Express 게시판 프로젝트

npm init

# npm 초기화 npm init # 모듈 설치 npm install express morgan pug sequelize sequelize-cli mysql2 dotenv nodemon cookie-parser express-session # 개별 설치 npm install express npm install morgan npm install pug npm install sequelize npm install sequelize-cli npm install mysql2 npm install dotenv npm install nodemon npm install cookie-parser npm install express-session --- # sequelize 초기화 (sequelize-cli 모듈 이용) npx sequelize init ### sequelize 설정 파일들이 생성됨 ### 자동 생성된 models/index.js 에 에러 발생이슈 등으로 코드 수정 ``` const Sequelize = require('sequelize'); // ✅ 모델 import const Board = require('./board'); const env = process.env.NODE_ENV || 'development'; const config = require('../config/config')[env]; const db = {}; const sequelize = new Sequelize(config.database, config.username, config.password, config); db.sequelize = sequelize; // 모델 등록 및 설정 db.Board = Board; // 모델 초기화 메소드 호출 Board.initiate(sequelize); // 연관 관계 설정 메소드 호출 (필요에 따라 사용) Board.associate(db); module.exports = db; ```

npm install express morgan pug sequelize sequelize-cli mysql2 dotenv nodemon cookie-parser express-session

npx sequelize init

{ "development": { "username": "joeun", "password": "123456", "database": "test", "host": "127.0.0.1", "dialect": "mysql" }, "test": { "username": "joeun", "password": "123456", "database": "test", "host": "127.0.0.1", "dialect": "mysql" }, "production": { "username": "joeun", "password": "123456", "database": "test", "host": "127.0.0.1", "dialect": "mysql" } }

const Sequelize = require('sequelize'); // ✅ 모델 import const Board = require('./board'); const env = process.env.NODE_ENV || 'development'; const config = require('../config/config')[env]; const db = {}; const sequelize = new Sequelize(config.database, config.username, config.password, config); db.sequelize = sequelize; // 모델 등록 및 설정 db.Board = Board; // 모델 초기화 메소드 호출 Board.initiate(sequelize); // 연관 관계 설정 메소드 호출 (필요에 따라 사용) Board.associate(db); module.exports = db;

const { DataTypes, Model, Sequelize } = require('sequelize'); class Board extends Model { static initiate(sequelize) { Board.init( { board_no: { type: DataTypes.INTEGER, autoIncrement: true, primaryKey: true, }, title: { type: DataTypes.STRING, allowNull: false, }, writer: { type: DataTypes.STRING, allowNull: false, }, content: { type: DataTypes.TEXT, allowNull: false, }, reg_date: { type: 'TIMESTAMP', // defaultValue: 'now()', }, upd_date: { type: 'TIMESTAMP', // defaultValue: 'now()', }, }, { sequelize, modelName: 'Board', tableName: 'board', timestamps: false, // true ➡ createdAt, updatedAt 컬럼 자동생성 } ); } static associate(db) { // Add associations if needed } } module.exports = Board;

const express = require('express') const Sequelize = require('sequelize'); // ✅ Sequelize 추가 const Board = require('../models/board') // ✅ Board 모델 import const router = express.Router() // 👩‍💻 게시글 목록 router.get('/', async (req, res) => { console.log('게시글 목록...'); let boardList = [] try { boardList = await Board.findAll() // ✅ 전체 데이터 조회 } catch (error) { console.log(error); } // console.log(boardList); res.render('board/list', {boardList} ) }) // 👩‍💻 게시글 등록 router.get('/insert', (req, res) => { console.log('게시글 등록 화면...'); res.render('board/insert') }) // 👩‍💻 게시글 등록 router.post('/', async (req, res) => { console.log('게시글 등록...'); // 구조분해할당 const { title, writer, content } = req.body; const newBoard = { title, writer, content }; let result = 0 try { result = await Board.create(newBoard) // ✅ 데이터 등록 } catch (error) { console.log(error); } console.log(`등록 result : ${result}`); res.redirect('/board'); }); // 👩‍💻 게시글 수정 페이지 router.get('/update/:id', async (req, res) => { console.log('게시글 수정 화면...'); console.log(`id : ${req.params.id}`); let id = req.params.id let board = await Board.findByPk(id) res.render('board/update', { board, id }); }); // 👩‍💻 게시글 수정 router.post('/update', async (req, res) => { console.log('게시글 수정...'); const { id, title, writer, content } = req.body; let result = 0 try { result = await Board.update({ title: title, writer: writer, content: content, upd_date: Sequelize.literal('now()') }, { where: {board_no: id} }) } catch (error) { console.log(error); } console.log(`수정 result : ${result}`); res.redirect(`/board/${id}`); }); // 👩‍💻 게시글 삭제 router.post('/delete', async (req, res) => { console.log('게시글 삭제...'); const id = req.body.id; let result = 0 try { result = await Board.destroy({ where: { board_no : id } }) } catch (error) { console.log(error); } console.log(`삭제 result : ${result}`); res.redirect('/board'); }); // 👩‍💻 게시글 읽기 // 요청 경로에 파라미터 매핑 방법 ➡ '/:파라미터명' router.get('/:id', async (req, res) => { console.log('게시글 읽기 화면...'); console.log(`id : ${req.params.id}`); let id = req.params.id let board = await Board.findByPk(id) console.log(board); res.render('board/read', {board, id}) }) module.exports = router;

const express = require('express'); const router = express.Router(); // GET / 라우터 router.get('/', (req, res) => { res.render('index', { title: 'Main' }); }); // 로그인 router.get('/login', (req, res) => { res.render('login', { title: 'Login' }); }); // 회원가입 router.get('/join', (req, res) => { res.render('join', { title: 'Join' }); }); module.exports = router;

header h1 Pug nav ul li a(href="/") Home li a(href="/login") Login li a(href="/board") Board

footer p Copyright © 2023 Pug

extends layout block content h1= message h2= error.status pre #{error.stack}

doctype html html head title= title link(rel='stylesheet', href='/css/style.css') body include fragment/header.pug block content include fragment/footer.pug

extends layout block content div.container-lg h1= title h3 #{title} 화면입니다

extends layout block content div.container h2 Login form div.form-group label(for="username") Username: input(type="text", id="username", name="username", required) div.form-group label(for="password") Password: input(type="password", id="password", name="password", required) div.form-group button.btn(type="submit") Login a.btn(href="/join") Sign Up

extends layout block content div.container h2 Sign Up form div.form-group label(for="username") Username: input(type="text", id="username", name="username", required) div.form-group label(for="email") Email: input(type="email", id="email", name="email", required) div.form-group label(for="password") Password: input(type="password", id="password", name="password", required) div.form-group button.btn(type="submit") Sign Up

extends ../layout block content div.container-lg div.btn-box h1 게시글 목록 a.btn(href="/board/insert") 글쓰기 table.table(border=1) thead tr th No th Title th Writer tbody each board, index in boardList tr td(width=80)= board.board_no td a(href=`/board/${board.board_no}`) #{board.title} td(width=200)= board.writer

extends ../layout block content div.container-lg h1 게시글 등록 form(action="/board", method="post") table.table.form-group(border=1) tr th(width="200") Title td input(type="text", name="title") tr th(width="200") Writer td input(type="text", name="writer") tr th(width="200") Content td input(type="text", name="content") div.btn-box a.btn(href="/board") 목록 button.btn(type="submit") 등록

extends ../layout block content div.container-lg h1 #{board.title} table.table(border=1) tr th(width="200") No td #{id} tr th(width="200") Writer td #{board.writer} tr th(width="200") Content td #{board.content} div.btn-box a.btn(href="/board") 목록 a.btn(href=`/board/update/${id}`) 수정

extends ../layout block content div.container-lg h1 게시글 수정 form(action="/board/update", method="post" id="form") input(type="hidden", name="id" value=`${id}`) table.table.form-group(border=1) tr th(width="200") No td #{id} tr th(width="200") Title td input(type="text", name="title", value=`${board.title}`) tr th(width="200") Writer td input(type="text", name="writer", value=`${board.writer}`) tr th(width="200") Content td input(type="text", name="content", value=`${board.content}`) div.btn-box div.item a.btn(href="/board") 목록 div.item button.btn(type="submit") 수정 a.btn(href="javascript:;" id="btn-delete") 삭제 script. document.getElementById('btn-delete').addEventListener('click', function() { let form = document.getElementById('form') form.action = '/board/delete'; form.submit(); });

# 모드 (development, test, production) NODE_ENV=development # PORT 설정 PORT=3000 # 쿠키 COOKIE_SECRET=cookiesecret

const express = require('express'); const morgan = require('morgan'); const cookieParser = require('cookie-parser'); const session = require('express-session'); const dotenv = require('dotenv'); const path = require('path'); const { sequelize } = require('./models'); // ✅ 시퀄라이즈 // dotenv 라이브러리를 사용하여 환경 변수를 로드하는 부분 // 이 메소드를 호출하면 프로젝트 루트에 위치한 .env 파일의 환경 변수가 process.env 객체에 추가됩니다. dotenv.config(); // 👩‍💻 라우터 모듈 import const indexRouter = require('./routes/index'); const boardRouter = require('./routes/board'); const app = express(); // 포트 설정: 환경 변수에서 PORT를 가져오고, 없을 경우 기본값으로 3000 사용 app.set('port', process.env.PORT || 3000); // ✅ 시퀄라이즈 싱크 // - 데이터베이스 테이블 생성 또는 동기화 sequelize.sync({ force: false }) .then(() => { console.log('데이터베이스 연결 성공'); }) .catch((err) => { console.error(err); }); // 뷰 엔진 설정: Pug를 사용하도록 설정 app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'pug'); // 로깅 미들웨어 설정: 개발 환경에서는 dev 모드로 로그를 출력 app.use(morgan('dev')); // 정적 파일 제공 미들웨어 설정: public 폴더를 정적 파일 제공 디렉토리로 설정 app.use('/', express.static(path.join(__dirname, 'public'))); // JSON 파싱 미들웨어 설정 // - JSON 형식의 요청 본문을 파싱 // - URL 인코딩된 요청 본문을 파싱 app.use(express.json()); app.use(express.urlencoded({ extended: false })); // cookie-parser 미들웨어를 사용하여 쿠키를 파싱하는 부분 // process.env.COOKIE_SECRET는 .env 파일이나 환경 변수에서 설정한 비밀 키를 사용 app.use(cookieParser(process.env.COOKIE_SECRET)); // Express 애플리케이션에 세션 미들웨어 설정 app.use(session({ resave: false, // 세션 데이터가 변경되지 않으면 서버에 다시 저장하지 않음 saveUninitialized: false, // 초기화되지 않은 세션을 저장소에 저장하지 않음 secret: process.env.COOKIE_SECRET, // 세션 식별을 위한 비밀 키 // 세션 쿠키 설정 cookie: { httpOnly: true, // 브라우저에서 쿠키에 접근할 때만 가능하도록 httpOnly 속성 사용 secure: false, // HTTPS가 아닌 환경에서도 쿠키 전송 허용 }, name: 'session-cookie', // 세션 쿠키의 이름 설정 })); // 👩‍💻 라우터 설정 app.use('/', indexRouter); app.use('/board', boardRouter); // 404 오류 처리 미들웨어 app.use((req, res, next) => { // 요청된 경로가 존재하지 않을 때 404 상태 코드와 'Not Found' 메시지를 응답으로 전송 res.status(404).send('Not Found'); }); // 에러 처리 미들웨어 app.use((err, req, res, next) => { // 에러가 발생했을 때, 에러 메시지를 콘솔에 출력하고 500 상태 코드와 에러 메시지를 응답으로 전송 console.error(err); res.status(500).send(err.message); }); // Express 애플리케이션을 특정 포트에서 실행하는 부분 app.listen(app.get('port'), () => { // 애플리케이션이 실행되면 콘솔에 해당 포트에서 대기 중임을 출력 console.log(app.get('port'), '번 포트에서 대기 중'); });