02 프론트엔드 초기 설정

1. express

1️⃣ views 설정

• 뷰 엔진을 pug 설정
  app.set("view engine", "pug");
• express에게 템플릿 엔진이 어디있는지 지정
  app.set("views", __dirname + "/views");
• public url을 생성해서 유저에게 파일 공유
  유저가 /public으로 가게 되면 "public"폴더를 보여주게 하는 것
  app.use("/public", express.static(__dirname + "/public"));

2️⃣ render

• /로 이동시에 사용될 템플릿을 렌더해줌
• home.pug를 render해주는 route handler를 만든다.
  app.get("/", (req, res) => res.render("home"));
• catchall url 만들기
  유저가 어떤 url로 이동하던지 홈으로 돌려보내기
  app.get("/*", (req, res) => res.redirect("/"));

2. static file

• views 폴더를 만들고 그 안에 home.pug 만들기
  

3. ignore

• 유저에게 보여지는 프론트엔드에 사용되는 app.js를 저장할 때마다 Nodemon이 새로 시작되고 있음 -> views나 서버를 수정할 때만 nodemon이 재시작될 수 있도록 수정
  
• 노드 모듈
  

4. css

• MVP.css 사용
  link(rel="stylesheet", href="https://unpkg.com/mvp.css@1.12/mvp.css")

3. 정리

• public 폴더는 유저에게 공개해주는 것
• server.js는 백엔드에서 구동, app.js는 프론트엔드에서 구동
• 현재 구조