Basic Role

• backEnd run code - root/server.js
• forntEnd run code - public/js/app.js

Server Setup

1. node 속성의 서버 생성 : Babel, Nodemon, Express 활용

   Nodemon - 코드에 변경 사항이 생기면 서버를 재시작해 주는 역할

   • ignore 로 특정 영역의 변경사항은 스킵
   • exec 설정을 통해 서버를 재시작하기 전에 babel-node를 실행

   Babel - nodeJS 코드 컴파일

   • babel-node를 실행 → babel.config.json 내 preset 실행

   Express - nodeJS 설정

   • view엔진을 pug로 설정, view 디렉토리 설정, frontEnd에서 구동되는 디렉토리 설정, 랜더링할 템플릿 및 catchall 설정

2. code flow

   1. npm init -y
   2. touch README.md
   3. npm i nodemon -D
   4. babel.config.json , nodemon.json, src/server.js 생성
   5. git init .
   6. npm i @babel/core @babel/cli @babel/node @babel/preset-env -D
   7. touch .gitignore
   8. npm i express
   9. npm i pug
   10. npm run dev

Frontend Setup

• Pug로 view engine 설정
• Express에 template이 어디 있는지 지정
• public url생성해서 유저에게 파일공유
• home.pug를 render해주는 route handler 생성
• home.pug에 mvp.css 링크 연결
• public/js/app.js 스크립트 확인