merry

- nodemon.json

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

nodemon을 설정하기 위해 nodemon.json 생성

nodemon은 프로젝트를 살펴보고 변경 사항이 있을 때 서버시를 재시작해줌

서버를 재시작하는 대신 bable-node를 실행하게 되는데

Babel은 작성한 코드를 일반 NodeJs 코드로 컴파일 해줌 > 그 작업을 src/server.js에서 해주는 것

- server.js

import express from "express";

const app = express();

express를 import

express 어플리케이션을 구성

app.set("view engine", "pug");
app.set("views", __dirname + "/views" );
app.use("/public", express.static(__dirname + "/public"));
app.get("/", (req, res) => res.render("home"));

view engine을 pug로 설정

views 디렉토리 설정

public 디렉토리 설정 > public 폴더를 유저에게 공개해주는 코드 (line 3)

홈페이지로 이동 시 사용될 템플릿을 render

*public 파일은 frontend에서 구동되는 코드 (중요!)

*현재 디렉토리에서 server.js는 백엔드 / app.js는 프엔 

* catchall url를 만들고 싶다면

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

유저가 어떤 url로 이동하든지 requst 및 response 할 수  있고 홈으로 돌려 보내기

(다른 url 사용 X, 홈 URL 만 사용할거기 때문)

- views > home.pug를 렌더하면 끝

script(src="/public/js/app.js")

정리

❗express 사용 NodeJS 설정

❗package.json, script 생성

❗babel (babel-node 실행 > babel.config.json을 찾고 코드가에 적용돼야 하는 preset 실행)

1. zoom 폴더 생성 후 npm init -y 해주기

C:\Users\user>cd C:\projects

C:\projects>mkdir zoom

C:\projects>cd zoom

C:\projects\zoom>npm init -y
Wrote to C:\projects\zoom\package.json:

{
  "name": "zoom",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

* npm init -y 이란 ? 

npm(Node Package Manager) | node.js에서 사용하는 모듈들을 패키지로 만들어 관리하고 배포하는 역할​

package.json | 패키지에 관한 정보와 의존중인 버전에 관한 정보를 담고 있습니다.

​

npm init | package.json를 생성하여 Node 패키지에 관한 정보와 의존중인 버전에 관한 정보로 node.js에서 사용하는 모듈들을 패키지로 만들어 관리하고 배포하기 위해서 사용되는 것입니다. >> package.json이란 파일을 생성하기 위해 사용된다.

참고) https://m.blog.naver.com/ckdgh930314/221801015725

2. README.md 파일 생성

3. npm i nodemon -D

: nodemon 설치를 위한 코드

4. 파일 생성

babel.config.json (바벨 설치를 위해)

nodemon.json

src > server.js

5. npm i @babel/core @babel/cli @babel/node -D

.gitignore도 생성하기

6. nodemon.json

: exec 명령어로 서버 실행

7. babel.config.json 

: preset 설정

9. package.json scripts 추가

*"dev"는 nodemon을 호출하는 일만 함

nodemon 호출 > nodemon.json를 살펴봄

10. express, pug 설치

npm i express

npm i pug

11. server.js 수정

import express from "express"

const app = express();

console.log("hello");

//port 3000
app.listen(3000);

12. nom run dev