zoom 코딩 - 개발 환경 구축 요약

Nodemon 설정 -> nodemon.json

Nodemon은 프로젝트를 살펴보고 변경사항이 있을시 서버를 재시작해주는 프로그램.

이때 서버를 재시작하는 대신에 babel - node를 실행하게 된다. (exec)

babel은 우리가 작성한 코드를 일반 NodeJs 코드로 컴파일 해준다. 이때 그작업을 src/server.js 파일에 해준다.

 

server.js 파일에서는 express를 import하고 , express 어플리케이션을 구성한다.

 

view 엔진은 Pug로 설정이되고 views 디렉토리 또한 설정된다.

public 파일도 설정이되고 public 파일은 이번 프로젝트에서 FrontEnd에 구동되는 코드이다.

왜냐하면 js 코드를 사용하다보면 어떤게 프론트인지 백엔드인지 헷갈리기 떄문이다.

이번 프로젝트에서는 app.js(프론트엔드) server.js(백엔드)로 구분하여 진행한다.

 

public 폴더를 유저에게 공개한다. ( 왜냐하면 보안상의 문제때문에 user가 볼수있는 파일을 따로 지정하는 것임)

"/public" 으로 지정하면 공개가됨

 

그리고 views 폴더에 있는 home.pug를 렌더한다.

 

8 - mvp.css 페이지의 외형을 좀더 낫게 개선

15 - 프론트 엔드 js파일을 import 해준다.

 

app.get("/*", (req, res) => res.redirect("/");

유저가 어떤 url로 이동하던지  홈으로 돌려보낸다.

 

babel-node를 실행시키면 babel-node는 babel.config.json을 찾는다.

이제 preset을 실행시킨다.