-
질문 & 답변
카테고리
-
세부 분야
프로그래밍 언어
-
해결 여부
해결됨
fxjs를 사용한 백엔드 + 프론트엔드 구성에 참고할만한 예제가 있을까요?
19.07.05 09:07 작성 조회수 62
0
삭제된 글입니다
답변을 작성해보세요.
1
유인동
지식공유자2019.07.08
괜찮습니다. :)
아래와 같이도 응용할 수 있습니다.
감사합니다.
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
유인동
지식공유자2019.07.06
안녕하세요.
아직 예제는 없습니다. 추후에 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
0
Donghee Lee
질문자2019.07.08
감사합니다.
이런식으로 접근을 해보겠습니다! 이렇게되면 따로 html파일이 필요가 없겠네요. 또한 필요한 중복되는 부분(ex. 헤더, 푸터, css import)와 같은 부분은 따로 함수를 만들어서
res.send(`
<html>
<head>
${css_import()}
</head>
<body>
${header()}
${hi}
${footer()}
</body>
</html>
`);이런식으로 사용하면 된다는 말씀이신것인가요? 너무 번거롭게 질문을 많이드려 죄송합니다.
0
유인동
지식공유자2019.07.08
express 템플릿을 아예 사용하지 않는 방법도 있습니다.
아래와 같이 할 수 있습니다.
중복되는 코드는 함수를 만들어서 해결할 수 있습니다.
감사합니다.
app.get('/', (req, res) => {
const hi = '안녕하세요.';
res.send(`
<html>
<head></head>
<body>${hi}</body>
</html>
`);
});
0
Donghee Lee
질문자2019.07.08
혹시 express에서 그러면 template engine은 pug나 ejs같은것을 사용하면 될까요? template literal을 사용하면 될것같다는 말씀이 정확히 이해되지 않는것 같습니다...
0
0
Donghee Lee
질문자2019.07.06
상세한 답변 감사합니다.
아직은 많이 부족해서
"UI의 상태는 DOM 객체를 기반으로 다루고, 데이터의 상태는 되도록 데이터베이스를 직접 사용하고, 이벤트를 관리하는 것은 표준 Web Apis의 이벤트를 사용하고, View 템플릿 엔진은 템플릿 리터럴을 사용하고, 서버 사이드 렌더링을 기반으로하고, 템플릿에 사용한 함수를 백엔드와 프론트에서 공유하고, URL에 대한 라우팅은 express로 하는 식으로 개발"
이러한부분에 대해 어떤식으로 적용하여 개발을하여야할지 정확히 감이 오지 않네요... 좀더 자세히 설명해주시면 감사하겠지만... 아니어도 말씀해주신 express, mql, fxjs, fxjs-dom을 사용하여 이것저것 해보도록 하겠습니다.
다시한번 좋은강의 감사합니다.
답변 8