월요일 하루동안 맨 땅에서 블로그를 만들어보려 했으나...
HTTP 메서드, 라우팅 설정 등 부족한 점이 너무 많아서
유튜브에서 관련 강의를 보고 무작정 따라해보기로 했다.
CRUD 구현을 따라해보면서 습득한 지식을 기록하기 위해 쓰는 글.
완성화면
블로그처럼 아티클을 생성, 읽기, 수정, 삭제할 수 있는 기능을 구현한다.
NPM 프로젝트 시작
1. 빈 디렉토리를 생성한다.
2. 콘솔에 다음과 같이 입력해 서버를 npm 프로젝트를 시작한다.
npm init -y3. express, mongoose, ejs 모듈을 설치한다.
npm i express mongoose, ejs
(왼쪽에서부터 서버, DB, 렌더링 을 위한 모듈들)4. nodemon 모듈을 설치하고 dependecy 설정을 해준다.
npm i --save nodemon
(서버 파일이 수정될 때마다 서버를 재시작 해주는 모듈)// package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"devStart": "nodemon server.js" //
},5. server.js 파일을 생성한다.
6. 콘솔에서 서버를 실행하고, 구동되는지 확인한다.
npm run devStart
7. 서버를 브라우저에서 열어본다.
// server.js
const express = require('express'); // express 모듈을 불러온다.
const app = express(); // express 서버를 실행한다.
app.listen(5001); // express 서버를 포트 5001 번에서 불러온다.
서버에는 연결되었으나, 아직 localhost/5001 에 맞는 라우팅 설정이 되어있지 않으므로 아무것도 렌더링되지 않고 있다.
8. 라우팅을 설정해준다.
// server.js
app.get('/', (req,res) => {
res.send("hello world"); // 주소 '/' 에 "hello world" 라는 문자열로 응답한다.
})
res.send()내부에 들어간 문자열이 주소/에서 성공적으로 출력되고 있다.
9. view 엔진을 세팅해준다.
브라우저에 단순 문자열이 아닌 html 파일을 띄워주기 위해, view 엔진을 세팅한다.
// server.js
app.set('view engine', 'ejs);10. 렌더링할 ejs 파일을 생성한다.
지금부터 브라우저에는 views 디렉토리 안의 ejs 파일이 렌더링됀다.
11. index.ejs 파일을 html 문법으로 개발한다.
...생략
<body>
This is HTML
</body>12. 위 8 번에서 설정한 라우팅을 수정해준다.
app.get('/', (req,res) => {
res.render("index"); // send 가 아닌 render로 괄호 안의 파일을 렌더링한다.
})
index.ejs 파일 내부의 코드가 렌더링되고 있다.
기본 세팅이 끝났다.
이제 본격적으로 블로그를 만들어보자.
3/20 완료!
질문: 제가 폴더 이름을 views가 아니라 view라고 했는데 왜 에러가 날까요?? views라고 바꾸니까 잘 실행이 되긴 하네요!