210928 화 TIL

면접질문을 정리했다.

 

 

 

개발환경 구축

nodemon설정을 위해 nodemon.json 생성

(nodemon이란? 프로젝트의 변경사항이 있을 시 서버를 재시작해주는 프로그램)

 

nodemon.json에서

{
“exec”: “babel-node src/server.js”
}
//로 재시작하는 대신 src/server.js의 코드를 NodeJS 코드로 컴파일해주도록 Babel을 실행시키게 만들었다.

 

/src/server.js에서

import express from “express”;
//express를 import한다

app.set(“view engine”, “pug”);
//view engine을 Pug로 설정하고

app.set(“views”, __dirname + “/views”);
//views 디렉토리를 설정하고

app.use(“/public”, express.static(__dirname + “/public”));
//public 폴더를 유저에게 공개하고

app.get(“/”, (req, res) => res.render(“home”));
//홈페이지로 이동시 사용될 템플릿(views 폴더에 있는 home.pug)을 렌더하도록 했다.

 

/src/views/home.pug에서

link(rel=”stylesheet”, href=”https://unpkg.com/mvp.css”)
//home.pug에는 mvp.css를 사용해서 조금이나마 꾸몄다.

script(src=”/public/js/app.js”)
//public 폴더의 app.js파일을 import하게 했다.

 

 

 

npm run dev로 프로그램을 실행했을 때의 흐름을 정리하면 이렇다.

 

package.json

“scripts”: {
	“dev”: “nodemon”
}
//으로 npm run dev를 했을 때 nodemon이 실행되게 하고

 

nodemon.json

{
	“exec”: “babel-node src/server.js”
}
//로 babel-node가 실행되면 babel-node는 babel.config.json을 찾아서

 

babel.config.json

{
	“presets”: [“@babel/preset-env”]
}
//로 코드에 적용돼야 하는 preset을 실행시킨다.

 

이를 통해 server.js의 코드들을 nodeJS 코드로 컴파일해서 실행시킨다.