[게시판 CRUD 만들기] 1. node와 express를 활용해 서버를 띄우기

목표

- 간단한 게시판 crud 만들기.

- express 공식문서를 읽으면서 개발해보기

 

기능

1. 글 쓰기

2. 글 업데이트

3. 글 읽기

4. 글 수정

5. 글 삭제

 

사용할 기술 

- node js

- express

- mongo db

- pug

 

 

오늘의 목표

서버를 띄워 Hello Wolrd를 화면에 출력하기

 

순서를 생각해보자

1. express를 활용해 서버 띄우기

• nodemon, babel을 사용해 개발을 좀더 용이하게 하기

cf)

babel : es6 등 신문법을 모든 브라우저가 이해할 수 있도록 예전 자바스크립트 문법으로 변환해주는 컴파일러

Babel · Babel

nodemon : 파일의 변화가 있는 경우, 알아서 서버가 재실행되도록 함

nodemon

 

2. html(pug)를 만들어 라우팅

cf)

pug : html을 더 간단하게 쓸 수 있게 해줌

---

1. express를 활용해 서버 띄우기 (Express 공식문서를 참고해서 세팅함)

- express 설치

npm i express

- babel 설치 (babel 공식문서 참고)

npm install --save-dev @babel/core

npm install @babel/preset-env --save-dev

babel.config.json 파일 설정

{

"presets": ["@babel/preset-env"]

}

 

- nodemon 설치(nodemon 공식문서 참고)

npm i nodemon

nodemon.json 파일 설정

{

"ignore": ["src/views"],

"exec": "babel-node src/server.js"

}

(exec : 실행시킬 구문)

 

cf)

package.json의 scripts는 

"dev": "nodemon"

으로 설정.

 

- server.js 코드

import express from "express";

const app = express();

const PORT = 5100;

app.set("view engine", "pug"); // default 엔진을 정해주는 것. 나는 pug를 사용할 예정 ***

app.set("views", __dirname + "/views"); // express app의 views로 찾을 경로 *** 

 

app.get("/", (req, res) => {

return res.render("home");

});

app.listen(PORT, () => {

console.log(`Your server on ${PORT}`);

});

view engine과 views는 꼭 설정해주도록 하자

 

 

2. pug 로 개발

npm i pug

src/views 안에 home.pug 작성

 

터미널에

npm run dev

명령어를 입력해 서버를 띄워보자

 

제대로 나온다!

성공!