어제 했던 것들
2021-03-08 어제는 Node.js에 필요한 모듈들을 설치하고 express-generator 모듈을 통해 기본 템플릿을 만들었다. 거기서 필요 없다고 생각하는 부분들을 정리..!
오늘의 목표
- 전체적인 레이아웃
구조에 대한 고민 MVC 패턴!
전체적인 프론트엔드에 해당하는 부분의 레이아웃을 잡아야 하는데, 모델링 설계를 고민하느라 시간을 많이 허비했다. 현재 Node.js에서 각 페이지를 pug로 Render해주고 있는데, 라우터에서 pug를 렌더링 할 때, 데이터를 보내줄 수 있어서 프론트에 대한 모든 것을 Node.js에서도 처리가 가능할 것 같은데.. 문제는 프론트에 해당하는 자바스크립트의 부재?? 역할구분이 충분치 않다는 생각이 들었다.
개인 프로젝트이지만 자꾸 신경쓰였다. 그래서 계속 고민중인 것은
1. 프론트엔드에서 요청과 응답을 받자!
일단.. 이렇게 한다면 확연히 프론트엔드와 백엔드를 나눌 수 있다고 본다.
Fetch, Ajax, Axios를 통해서 서버에 데이터를 요청하고 받아서 View에 뿌리는 Controllerd의 역할 완성이다!
다른 한편으로는, pug의 역할은 그냥 HTML과의 문법적인 차이로 끝나게 하는건가?
퍼포먼스 문제는 어떤 것이 더 빠를까...?라는 고민이 거듭된다.. 이런 젠장!!
생각한대로 한다면 라우터들을 세분화해서 프론트엔드에서 요청하고 받을 수 있게끔 설계하는 것이 타당하다고 본다. 예를들어 게시판의 목록을 렌더링하는데 프론트에서 필요한 이미지들을 라우터에 요청하고 라우터에서는 해당 이미지 파일들을 읽고 프론트에 응답 데이터로 보내주는 상황 같은 것 말이다.
2. Node.js에서 Render에 필요 데이터를 다 보내자!
반면 이 경우는 페이지마다 필요한 데이터의 모델들을 설계해두고 라우터에서 Render함수를 호출 할 때 데이터들을 묶어서 보내 pug에서 뿌리는 식으로 한다는 가정으로 생각해봤다.
이 경우 생각보다 편하기도 하지만.. 뭔가 프론트엔드와 백엔드의 구분이 잘 안되는 것 같은 느낌??
아 그래서 어떻게 하자는건지..
1번의 경우에서는 필요한 페이지에 스크립트만 추가해주면 컴포넌트처럼 알아서 기능을 해주니.. 분류하기가 쉽고 생산성과 유지보수가 좋다는 점이 있다. 반면 이 경우에도 게시판에 글쓰기 버튼을 누른다고 가정하면 로그인이 체크되어있는지 다시 서버에 요청하는 것이 아니라, 전에 페이지 로드할 때 체크한 로그인 데이터를 저장해 두었다가 저장된 데이터를 참조하는 식으로 작성을 해야 할 것 같은데, 결국 프론트엔드에 모델 설계가 필요하게 되겠군!
2번의 경우에는 필요한 것들이 생기면 모델에 데이터를 추가하고 알아서 뿌려주어야 한다는 것이다. 이런 경우는 거의 Node.js로 프론트엔드와 백엔드를 책임져야하니 의존성이 높아진다. 다만 모델 데이터의 접근이 쉬워져서 편해질 것 같다는 생각도 든다..
일단은 1번의 방법으로 해보도록 하겠다.
Fetch 그리고 async, await
Fetch는 기본적으로 제공해주는 비동기 함수이다. 이 함수를 통해서 서버에 요청하고 응답 받아보도록 한다. 여기서 2가지 방법이 있는데, then 콜백함수로 받는 방법과 await으로 하는 방법이 있는데, 사용해본 적 없는 await으로 시도해본다.
pug
퍼그에서 가장 마음에 들었던 것은 extends와 include, block을 지정한다는 점!!
중복되는 코드들을 많이 줄이고, 분류하기가 너무나 좋아졌다.
기타 조건문, 반복문 등 쓰기 너무 좋다
