fxjs를 사용한 백엔드 + 프론트엔드 구성에 참고할만한 예제가 있을까요?
삭제된 글입니다
답변 8
1
괜찮습니다. :)
아래와 같이도 응용할 수 있습니다.
감사합니다.
const layout = ({title, body}) => `
<html>
<head>
<title>${title}</title>
</head>
<body>
<div class="header"></div>
<div class="body">
${body}
</div>
<div class="footer"></div>
</body>
</html>
`;
res.send(layout({
title: '공지사항',
body: `
<div class="notice">...</div>
`
}));
1
안녕하세요.
아직 예제는 없습니다. 추후에 create fxjs app 을 구현할 예정입니다.
https://github.com/marpple/FxJS-dom
바닐라로 구성하신다면 fxjs-dom도 함께 사용하시는 것을 추천드립니다.
어떤 앱을 만드실지 모르겠지만 간단하게 나마 답변을 드리자면 풀스택으로 개발할 경우 프론트엔드에서의 상태 관리를 최소화하는 것을 추천드립니다.
예를 들어서 어떤 글이 있고 수정을 해야한다고 했을 때,
수정하기전에 미리 그 글에 대한 데이터를 프론트에 심어두기보다 엘리먼트에 id 정도만 넣어두고, 수정 버튼을 눌렀을 때 서버에서 해당글의 정보를 가져와서 수정하는 에디터를 구성한 후 변경되면 서버에 저장하는식이랄까요.
개인적으로는 UI의 상태는 DOM 객체를 기반으로 다루고, 데이터의 상태는 되도록 데이터베이스를 직접 사용하고, 이벤트를 관리하는 것은 표준 Web Apis의 이벤트를 사용하고, View 템플릿 엔진은 템플릿 리터럴을 사용하고, 서버 사이드 렌더링을 기반으로하고, 템플릿에 사용한 함수를 백엔드와 프론트에서 공유하고, URL에 대한 라우팅은 express로 하는 식으로 개발하는 것이 대부분의 CRUD 기반의 웹 서비스에서 심플하고 좋은 코드를 작성할 수 있는 한 가지 해법이라고 생각합니다.
이정도 구성으로 구현하는 방향으로 생각하신다면 express, mql, fxjs, fxjs-dom 을 기반으로한 구성이 꽤 괜찮은 편이라고 생각합니다.
나중에 함수형 시리즈 4편 정도에서 풀스택 서비스 개발에 대해 소개 드릴 예정이지만 언제가 될지 모르겠네요.
감사합니다.
0
감사합니다.
이런식으로 접근을 해보겠습니다! 이렇게되면 따로 html파일이 필요가 없겠네요. 또한 필요한 중복되는 부분(ex. 헤더, 푸터, css import)와 같은 부분은 따로 함수를 만들어서
res.send(`
<html>
<head>
${css_import()}
</head>
<body>
${header()}
${hi}
${footer()}
</body>
</html>
`);이런식으로 사용하면 된다는 말씀이신것인가요? 너무 번거롭게 질문을 많이드려 죄송합니다.
0
express 템플릿을 아예 사용하지 않는 방법도 있습니다.
아래와 같이 할 수 있습니다.
중복되는 코드는 함수를 만들어서 해결할 수 있습니다.
감사합니다.
app.get('/', (req, res) => {
const hi = '안녕하세요.';
res.send(`
<html>
<head></head>
<body>${hi}</body>
</html>
`);
});
0
혹시 express에서 그러면 template engine은 pug나 ejs같은것을 사용하면 될까요? template literal을 사용하면 될것같다는 말씀이 정확히 이해되지 않는것 같습니다...
0
상세한 답변 감사합니다.
아직은 많이 부족해서
"UI의 상태는 DOM 객체를 기반으로 다루고, 데이터의 상태는 되도록 데이터베이스를 직접 사용하고, 이벤트를 관리하는 것은 표준 Web Apis의 이벤트를 사용하고, View 템플릿 엔진은 템플릿 리터럴을 사용하고, 서버 사이드 렌더링을 기반으로하고, 템플릿에 사용한 함수를 백엔드와 프론트에서 공유하고, URL에 대한 라우팅은 express로 하는 식으로 개발"
이러한부분에 대해 어떤식으로 적용하여 개발을하여야할지 정확히 감이 오지 않네요... 좀더 자세히 설명해주시면 감사하겠지만... 아니어도 말씀해주신 express, mql, fxjs, fxjs-dom을 사용하여 이것저것 해보도록 하겠습니다.
다시한번 좋은강의 감사합니다.
이미지 동시성 다루기
0
116
2
클로저와 같은 함수형 프로그래밍 공부
0
192
2
fx.js
0
440
2
fxjs 라이브러리 takeL 관련하여 질문드립니다.
0
344
2
[ 비동기 상황에서의 Lazy, Strict 기법이 혼합된 평가 ] 에 대한 이해
0
528
1
input값이 이터러블 함에도 range를 쓴 이유가 궁금합니다.
0
468
1
질문있습니다!
1
372
2
DB Insert관련
0
657
2
강의에 대한 제언
2
599
1
DOM 조작 관련 질문입니다.
0
408
1
L.map, L.filter
0
613
1
indexBy 함수에 대한질문입니다.
0
404
2
해당 강의를 듣고 나면
0
397
1
내용없음
0
236
1
함수 추출에 대한 고민
1
286
1
뷰 포트에 보이는 엘리먼트만 이미지 로드하고 싶을 때
1
327
1
기존에 반복문이 1개 돌던거를 이렇게하면 2번 도는데...
0
242
1
array in object... 는 어떤 식으로 재귀가 가능할까요..?
0
271
1
queryToObject 질문드립니다.
0
359
1
재귀는 어떻게 표현할 수 있을까요?
0
315
1
모든 명령형 => 함수형 가능한가요?
0
323
1
명령형 => 함수형 변환
0
341
2
이해한게 맞을까요?
0
216
1
iter의 개별 elements 에 data 를 삽입 또는 변형해서 삽입하는 경우엔 map 으로 제어를 하는게 맞을까요?
0
263
2