on
[VanillaJS, Node.js] Zoom Clone Coding-1. Node.js 개발 환경 설정
[VanillaJS, Node.js] Zoom Clone Coding-1. Node.js 개발 환경 설정
728x90
nodejs 개발 환경 구축
- server.js가 BackEnd, app.js 가 FrontEnd 역할을 하게 된다.
1. 터미널 창을 켜고 npm init 을 입력한다.
- node.js를 실행하기 위한 initial 과정으로 몇 가지 질문을 통해 package.json 파일을 Project 홈에 생성해 준다.
- 나는 scripts, main, keywords, author 항목은 삭제했다. license는 원하는 문자열로 변경 가능하다.
2. nodemon 설치
> npm i nodemon -D
3. nodemon.json, babel.config.json 파일 생성
4. src 폴더 생성 및 구성
- src 폴더 내 public, views 폴더 생성
- public 폴더 내 js 폴더 생성 후 app.js 파일 생성
-views 폴더 내 home.pug 파일 생성
5. babel 설치
> npm i @babel/core @babel/cli @babel/node -D
6. .gitignore 파일 생성 후 파일에 /node_modules 입력
7. nodemon.json 파일에 아래와 같이 입력
→ exec : execute로 src/server.js에 대해 babel-node 명령문을 실행시킨다.
8. babel/preset install
> npm i @babel/preset-env -D
babel/preset-env를 다운받는 이유 : https://velog.io/@pop8682/%EB%B2%88%EC%97%AD-%EC%99%9C-babel-preset%EC%9D%B4-%ED%95%84%EC%9A%94%ED%95%98%EA%B3%A0-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%9C%EA%B0%80-yhk03drm7q
9. babel.config.json 파일에 아래와 같이 입력
→ babel-node를 실행시키면 babel-node는 바로 babel.config.json을 찾아
코드에 적용 되어야 하는 preset을 실행시킨다.
10. express, pug install
> npm i express
> npm i pug
pug에 대해 : https://dydals5678.tistory.com/91
11. package.json의 devDependencies 항목 위에 scripts 추가
→ dev : nodemon을 호출한다. nodemon이 nodemon.json을 살펴보고 거기에 있는 코드를 실행한다.
11번까지 완료 후 package.json에 devDependencies와 dependencies가 아래와 같이 구성되면 완료
12. server.js 파일에 express를 import 한다.
13. 서버 작동 : npm run dev
→ hello가 정상적으로 출력되면 안심해도 된다.
home.pug 기본 구성
- 기본 css 틀을 잡아주는 mvp.css를 이용하기 위해 link에 추가
- app.js 사용을 위해 script 태그 추가
서버 작동 후 app.js를 화면에 보여주기 위한 server.js
1. Pug로 view engine을 설정
app.set('view engine', "pug");
2. Express에 template이 어디있는지 지정
app.set("views", __dirname+"/views");
3. public url을 생성해 user에게 파일 공유
app.use("/public", express.static(__dirname+"/public"));
4. home.pug를 render 해주는 route handler를 생성
app.get("/", (req, res) => res.render("home"));
<프론트를 수정할 때는 서버를 재시작 하지 않도록 하고 싶을 때>
nodemon.json 에 "ignore" 항목 추가
728x90
from http://mingmeng030.tistory.com/171 by ccl(A) rewrite - 2021-09-11 17:26:41