fxjs를 사용한 백엔드 + 프론트엔드 구성에 참고할만한 예제가 있을까요?

해결됨
Donghee Lee 프로필

안녕하세요. 최근 기본편 + 응용편을 수강하고있는 수강생입니다. 인동님의 강의 덕분에 함수형프로그래밍의 매력에 빠지게 되었습니다. 정말 감사합니다.

제가 강의를 모두 들은 후 실무에 fxjs + mql를 사용하여 백엔드 + 프론트엔드 구성을 해보려하는대요. 일단은 express + fxjs + mql + vanilla js를 사용하여 구성해보려 하고있습니다. 하지만 어떤식으로 프로젝트를 구성하고 라이브러리를 사용하는것이 best practice일지 감이 잡히지 않는것 같습니다... 제 지식이 부족한탓이지만 혹시 해당 구성에대한 예제가 있을까요?

다시한번 좋은강의 감사드립니다!

 

 

유인동 프로필
유인동 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편 정도에서 풀스택 서비스 개발에 대해 소개 드릴 예정이지만 언제가 될지 모르겠네요.

감사합니다.

Donghee Lee 프로필
Donghee Lee 2019.07.06

상세한 답변 감사합니다.

아직은 많이 부족해서

"UI의 상태는 DOM 객체를 기반으로 다루고, 데이터의 상태는 되도록 데이터베이스를 직접 사용하고, 이벤트를 관리하는 것은 표준 Web Apis의 이벤트를 사용하고, View 템플릿 엔진은 템플릿 리터럴을 사용하고, 서버 사이드 렌더링을 기반으로하고,  템플릿에 사용한 함수를 백엔드와 프론트에서 공유하고, URL에 대한 라우팅은 express로 하는 식으로 개발"

이러한부분에 대해 어떤식으로 적용하여 개발을하여야할지 정확히 감이 오지 않네요... 좀더 자세히 설명해주시면 감사하겠지만... 아니어도 말씀해주신 express, mql, fxjs, fxjs-dom을 사용하여 이것저것 해보도록 하겠습니다.

다시한번 좋은강의 감사합니다.

유인동 프로필
유인동 2019.07.06

정말 고맙습니다^^ 더 좋은 내용 전할 수 있도록 하겠습니다.

Donghee Lee 프로필
Donghee Lee 2019.07.08

혹시 express에서 그러면 template engine은 pug나 ejs같은것을 사용하면 될까요? template literal을 사용하면 될것같다는 말씀이 정확히 이해되지 않는것 같습니다...

유인동 프로필
유인동 2019.07.08

express 템플릿을 아예 사용하지 않는 방법도 있습니다.

아래와 같이 할 수 있습니다.

중복되는 코드는 함수를 만들어서 해결할 수 있습니다.

감사합니다.


app
.get('/', (req, res) => {
const hi = '안녕하세요.';
res.send(`
<html>
<head></head>
<body>${hi}</body>
</html>
`);
});

Donghee Lee 프로필
Donghee Lee 2019.07.08

감사합니다.

이런식으로 접근을 해보겠습니다! 이렇게되면 따로 html파일이 필요가 없겠네요. 또한 필요한 중복되는 부분(ex. 헤더, 푸터, css import)와 같은 부분은 따로 함수를 만들어서 

res.send(`
    <html>
      <head>
         ${css_import()}
      </head>
      <body>
          ${header()}
          ${hi}
          ${footer()}
      </body>
    </html>
 `);

이런식으로 사용하면 된다는 말씀이신것인가요? 너무 번거롭게 질문을 많이드려 죄송합니다.

유인동 프로필
유인동 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>
`
}));
Donghee Lee 프로필
Donghee Lee 2019.07.09

감사합니다! 응용하여보겠습니다!

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스