1. 시작
이전 포스트를 끝으로 약 2개월정도 시간이 흘렀다.
2개월동안은 재취업 준비겸 자격증 공부를 주로 했다.(정처기 실기 1회.. 극악..)
그래도 Node.js를 더 까먹기 전에 빠르게 마무리 하고자 블로그를 구현하는 프로젝트를 시작하고자 한다.
다만, Node.JS와 Express에 대한 지식이 낮은 관계로 인프런의 Do it! Node.js 프로그래밍 입문를 보면서 구현하였고, 그 과정을 블로그에 녹여보고자 한다.
2. 블로그 구현 내용
아래와 같은 기능들을 구현하고자 한다.
- 메인 화면 (비 로그인)
- 최신 작성 게시글 리스트 조회
- 게시글 상세 조회
- 로그인 화면
- 아이디, 비밀번호를 통한 관리자 로그인 기능
- 관리자(User) 화면
- 게시글(Post) 작성
- 게시글(Post) 수정
- 게시글(Post) 삭제
관리자 계정에 대한 등록 기능은 필요하지 않아 임시로 로직을 작성해서 등록했다.
3. 사용 기술 스택
- Back-end
- Node.js
- F/W
- Express
- Template
- EJS : HTML에 JS문법이 삽입 가능한 템플릿 엔진
- Library
- dotenv : .env의 환경변수를 process.env로 로드 가능한 라이브러리
- express-async-handler : 비동기식 요청 핸들러를 처리하기 위한 미들웨어
- express-ejs-layouts : EJS 템플릿에서 레이아웃 기능을 지원
- method-override : form에서 PUT과 DELETE 메소드를 사용할 수 있게하는 라이브러리
- mongoose : Mongo DB와 연동하는 ODM 라이브러리
- bcrypt : 비밀번호 암호화 및 해시 비교 라이브러리
- cookie-parser : Node.js 환경에서 쿠키를 쉽게 사용할 수 있도록 도와주는 미들웨어
- jsonwebtoken : JWT
4. 프로젝트 구성
- config : DB 연동 설정 관리
- controllers : Admin, Post 도메인 Controller 레이어 관리
- models : DB Schema 관리
- public : css, image 등 정적 파일 관리
- routes : Admin, Post 도메인의 Route 레이어 관리
- service : Admin, Post 도메인의 Service 레이어 관리
- utils : Util 로직 관리
- views : ejs 파일 관리
- admin : Admin 페이지 관련 ejs 파일 관리
- layouts : Admin, Post 페이지 관련 레이아웃 ejs 파일 관리
- post : Post 페이지 관련 ejs 파일 관리
- .env : 환경 설정 파일
- app.js : 엔트리 포인트 파일
5. app.js 로직 작성
app.js 파일을 생성한 후 다음과 같은 로직을 작성한다.
아래의 로직은 완성본의 일부분이므로 이후 db 및 layout 설정 등에 따라서 로직이 추가될 예정이다.
require("dotenv").config();
const express = require("express");
const app = express();
const port = process.env.PORT || 3000;
app.use(express.static("public"));
app.listen(port, () => {
console.log(`App listening on port ${port}`);
});6. DB 연동 ( MongoDB )
6-1. .env 환경 변수 설정
기본적인 MongoDB 연동 방법은 이전 포스트에 적었으므로 링크만 살짝..
먼저 아래와 같이 MongoDB 플러그인에서 커넥션을 대상으로 우클릭을 한 뒤, Copy Connection String을 클릭하면 DB_URI가 복사한다.
.env파일을 생성하고 다음과 같이 설정한다.
(본인의 경우 MONGODB_URI라는 Key로 설정했으나 Key 이름은 마음대로 정해도 상관없다.)
6-2. DB Config 설정
config 폴더에 db.js 파일을 생성하고 다음과 같이 DB 연결 로직을 작성한다.
const mongoose = require("mongoose");
const asyncHandler = require("express-async-handler");
require("dotenv").config();
const connectDb = asyncHandler( async () =>{
const connect = await mongoose.connect(process.env.MONGODB_URI);
console.log(`DB Connected: ${connect.connection.host}`);
})
module.exports = connectDb;
6-3. app.js 로직 작성
다음과 같이 db관련 로직을 추가 작성한다.
require("dotenv").config();
const express = require("express");
const connectDb = require("./config/db"); // 추가
connectDb(); // 추가
const app = express();
const port = process.env.PORT || 3000;
app.use(express.static("public"));
app.listen(port, () => {
console.log(`App listening on port ${port}`);
});문제없이 연동된다면 어플리케이션을 실행했을 때 다음과 같은 로그가 출력된다.
6-4. DB Schema 작성
관리자(User) 도메인과 게시글(Post) 도메인에 대한 스키마를 models 폴더 내에 다음과 같이 작성한다.
User 스키마
const mongoose = require("mongoose");
const userSchema = new mongoose.Schema({
username: {
type: String,
required: true,
unique: true
},
password: {
type: String,
required: true
}
});
module.exports = mongoose.model("User", userSchema);Post 스키마
const mongoose = require("mongoose");
const PostSchema = new mongoose.Schema({
title: {
type: String,
required: true
},
body: {
type: String,
required: true
},
createdAt: {
type: Date,
default: Date.now()
}
});
module.exports = mongoose.model("Post", PostSchema);