[노마드코더 줌 클론 챌린지] 00

 

01. 선수지식 짚고 넘어가기

- Express, Pug, app.get(), (req, res)
- package.json, babel, nodemon
- javascript를 통해 HTML 요소 가져오기, 생성, class 추가/삭제
- 필요한 환경 : Node.js v14.17.3 이상

 

 

02. 서버 세팅

1. npm init : package.json 파일을 생성하여 패키지에 관한 정보와 의존 중인 버전에 관한 정보로 Node.js에서 사용하는 모듈들을 패키지로 만들기 위해 입력하는 커맨드

• -y 옵션 : name, version, description 등의 정보에 대해 일일이 입력하지 않고, default 값을 담아 package.json 파일을 생성해준다. 의미는 yes

 

2. npm i nodemon -D

• npm i : npm install의 alias
• -D 옵션 : devDependencies에 패키지들이 추가

3. 폴더 및 파일 생성

zoom
├── node_modules
├── package-lock.json
├── package.json
├── README.md
├── babel.config.json // 프로젝트 전체에 Babel 설정 정의
├── nodemon.json // nodemon 설정 정의
└── src
    └── server.js // 서버 역할

• nodemon.json

{
	"exec": "babel-node src/server.js" // src/server.js에 대해 babel-node 명령문을 실행시킴
}

• babel.config.json

{
	"presets": ["@babel/env"]
}

/*
강의에서 "presets": ["@babel/preset_env"]로 알려줘서
그렇게 진행했더니 [nodemon] app crashed가 떠서 댓글을 참고하여 수정했다.
왜 바꿔주면 실행이 잘 되는지는 모르겠다ㅠ
*/

 

4. npm i @babel/core @babel/cli @babel/node @babel/preset-env -D

 

5. package.json에 script 추가

"scripts": {
	"dev": "nodemon" 
},

/*
dev는 nodemon을 호출하고, 
nodemon이 호출되면 nodemon이 nodemon.json을 살펴보고 거기에 있는 코드를 실행
*/

 

6. npm i express, npm i pug

 

7. server.js 편집

import express from "express";

const app = express();

console.log("Hello");

app.listen(3000);

 

 

03. Frontend 세팅

1. 폴더 및 파일 생성

zoom
├── node_modules
├── package-lock.json
├── package.json
├── README.md
├── babel.config.json
├── nodemon.json
└── src
    ├── public // public 파일들은 FrontEnd에서 구동됨
    │    └── js
    │        └── app.js // 웹 페이지의 동적인 기능 담당
    ├── views
    │    └── home.pug // html 템플릿 파일
    └── server.js

 

2. home.pug 템플릿 코드 작성

• html:5 + tab 

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title Noom
  body 
    h1 It works!
    script(src="/public/js/app.js")

 

3. server.js 수정

import express from "express";

const app = express();

app.set("view engine", "pug"); // view engine을 pug로 설정
app.set("views", __dirname + "/views"); // Express에 template이 어디있는지 지정 
app.use("/public", express.static(__dirname + "/public")); // public url을 생성해서 유저에게 파일 공유
app.get("/", (req, res) => res.render("home")); // home.pug를 render 해주는 route handler를 만듦
app.get("/*", (req, res) => res.redirect("/")); // catchall url, 어떤 url로 이동하더라도 홈으로 돌려보냄

const handleListen = () => console.log(`Listening on http://localhost:3000`);
app.listen(3000, handleListen);

 

4. nodemon.json 수정

• 기본 설정으로는 유저한테만 보여지는 app.js를 수정할 때도 nodemone이 계속 재실행된다. views나 서버를 수정할 때만 재시작되도록 고친다.

{
  "ignore": ["src/public/*"],
  "exec": "babel-node src/server.js"
}

 

5. MVP CSS 사용하기

• 기본적인 HTML tag에 스타일을 입혀주는 CSS 프레임워크
• link(rel="stylesheet", href="https://unpkg.com/mvp.css") 를 head에 작성

 

---

참고

https://velog.io/@clean01/Npm-npm-init의-의미 

https://phsun102.tistory.com/29(npm install 옵션의 차이)