23강. 실무형 게시판 프로젝트 만들기
이번 강의에서는 지금까지 배운 Express + MySQL + React를 활용하여 실무에서 사용하는 게시판 프로젝트를 완성합니다.
목표: 게시판 CRUD뿐만 아니라 댓글, 좋아요, 조회수, 검색, 파일 첨부까지 포함된 실무형 게시판을 구현합니다.
1. 프로젝트 완성 구조
React
↓
Axios
↓
Express API
↓
JWT 인증
↓
MySQL
↓
게시판
댓글
좋아요
파일업로드
2. 프로젝트 구조
board-project
│
├── frontend
│
│ ├── pages
│ ├── components
│ ├── api
│ └── hooks
│
└── backend
│
├── routes
├── controllers
├── models
├── middleware
├── uploads
└── config
3. 게시판 테이블
CREATE TABLE board(
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(200),
content TEXT,
writer VARCHAR(100),
image VARCHAR(255),
views INT DEFAULT 0,
likes INT DEFAULT 0,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
4. 댓글 테이블
CREATE TABLE comment(
id INT AUTO_INCREMENT PRIMARY KEY,
board_id INT,
writer VARCHAR(100),
content TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
5. 게시글 목록
GET
/api/v1/boards
SQL
SELECT *
FROM board
ORDER BY id DESC;
6. 게시글 상세보기
조회수를 증가시킵니다.
UPDATE board
SET views = views + 1
WHERE id = ?;
조회
SELECT *
FROM board
WHERE id = ?;
7. 게시글 등록
POST
/api/v1/boards
입력
{
"title":"Node",
"content":"Express",
"writer":"커사맨"
}
8. 게시글 수정
PUT
/api/v1/boards/1
SQL
UPDATE board
SET
title=?,
content=?
WHERE id=?;
9. 게시글 삭제
DELETE
/api/v1/boards/1
SQL
DELETE
FROM board
WHERE id=?;
10. 댓글 등록
POST
/api/v1/comments
SQL
INSERT INTO comment(
board_id,
writer,
content
)
VALUES(
?,?,?
);
11. 댓글 목록
SELECT *
FROM comment
WHERE board_id=?
ORDER BY id DESC;
React
게시글
↓
댓글
↓
댓글
↓
댓글
12. 좋아요 기능
SQL
UPDATE board
SET likes = likes + 1
WHERE id=?;
API
POST
/api/v1/boards/1/like
13. 검색 기능
SQL
SELECT *
FROM board
WHERE title
LIKE ?;
Node
"%"+keyword+"%"
14. 카테고리
테이블
ALTER TABLE board
ADD category
VARCHAR(30);
검색
SELECT *
FROM board
WHERE category=?;
15. 페이지네이션
LIMIT ?,10;
예시
1
2
3
4
5
16. 이미지 업로드
multer
↓
uploads
↓
DB 저장
↓
React 출력
/uploads/photo.jpg
17. JWT 로그인
로그인
↓
JWT
↓
LocalStorage
↓
API
↓
Authorization
↓
게시글 작성
18. React 구조
BoardList.jsx
↓
BoardDetail.jsx
↓
BoardWrite.jsx
↓
BoardEdit.jsx
API
axios.get()
axios.post()
axios.put()
axios.delete()
19. 관리자 기능
관리자
↓
게시글 삭제
↓
회원 삭제
↓
댓글 삭제
↓
신고 관리
↓
공지사항 등록
20. 실무 프로젝트 구조
Board
│
├── 로그인
├── 회원가입
├── 게시판
├── 댓글
├── 좋아요
├── 조회수
├── 검색
├── 파일업로드
├── 관리자
└── JWT
21. 추가 기능
게시글 고정(Pin)
인기글
댓글 개수 표시
첨부파일 다운로드
태그(Tag)
북마크
게시글 공유
22. React 화면
게시글 목록
↓
검색
↓
카테고리
↓
글쓰기
↓
상세보기
↓
댓글
↓
좋아요
23. 이번 강의 핵심 정리
게시판
CRUD
검색
페이지네이션
조회수
좋아요
댓글
등록
조회
삭제
로그인
JWT
Authorization
파일
multer
uploads
React
목록
상세
등록
수정
실무 팁
실무 게시판은 단순 CRUD에서 끝나지 않습니다.
일반적으로 아래 기능까지 포함됩니다.
기능 설명
조회수 상세 조회 시 증가
좋아요 사용자 반응 저장
댓글 게시글과 1:N 관계
검색 제목, 내용, 작성자 검색
페이지네이션 대량 데이터 처리
첨부파일 이미지·문서 업로드
권한 관리 작성자와 관리자 권한 구분
소프트 삭제 실제 삭제 대신 삭제 상태 표시
최종 프로젝트
다음 기능을 모두 구현해 보세요.
✅ 회원가입
✅ 로그인(JWT)
✅ 게시판 CRUD
✅ 댓글 CRUD
✅ 조회수 증가
✅ 좋아요
✅ 검색
✅ 페이지네이션
✅ 이미지 업로드
✅ 관리자 페이지
✅ React 연동
이번 강의에서는 지금까지 배운 Express + MySQL + React를 활용하여 실무에서 사용하는 게시판 프로젝트를 완성합니다.
목표: 게시판 CRUD뿐만 아니라 댓글, 좋아요, 조회수, 검색, 파일 첨부까지 포함된 실무형 게시판을 구현합니다.
1. 프로젝트 완성 구조
React
↓
Axios
↓
Express API
↓
JWT 인증
↓
MySQL
↓
게시판
댓글
좋아요
파일업로드
2. 프로젝트 구조
board-project
│
├── frontend
│
│ ├── pages
│ ├── components
│ ├── api
│ └── hooks
│
└── backend
│
├── routes
├── controllers
├── models
├── middleware
├── uploads
└── config
3. 게시판 테이블
CREATE TABLE board(
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(200),
content TEXT,
writer VARCHAR(100),
image VARCHAR(255),
views INT DEFAULT 0,
likes INT DEFAULT 0,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
4. 댓글 테이블
CREATE TABLE comment(
id INT AUTO_INCREMENT PRIMARY KEY,
board_id INT,
writer VARCHAR(100),
content TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
5. 게시글 목록
GET
/api/v1/boards
SQL
SELECT *
FROM board
ORDER BY id DESC;
6. 게시글 상세보기
조회수를 증가시킵니다.
UPDATE board
SET views = views + 1
WHERE id = ?;
조회
SELECT *
FROM board
WHERE id = ?;
7. 게시글 등록
POST
/api/v1/boards
입력
{
"title":"Node",
"content":"Express",
"writer":"커사맨"
}
8. 게시글 수정
PUT
/api/v1/boards/1
SQL
UPDATE board
SET
title=?,
content=?
WHERE id=?;
9. 게시글 삭제
DELETE
/api/v1/boards/1
SQL
DELETE
FROM board
WHERE id=?;
10. 댓글 등록
POST
/api/v1/comments
SQL
INSERT INTO comment(
board_id,
writer,
content
)
VALUES(
?,?,?
);
11. 댓글 목록
SELECT *
FROM comment
WHERE board_id=?
ORDER BY id DESC;
React
게시글
↓
댓글
↓
댓글
↓
댓글
12. 좋아요 기능
SQL
UPDATE board
SET likes = likes + 1
WHERE id=?;
API
POST
/api/v1/boards/1/like
13. 검색 기능
SQL
SELECT *
FROM board
WHERE title
LIKE ?;
Node
"%"+keyword+"%"
14. 카테고리
테이블
ALTER TABLE board
ADD category
VARCHAR(30);
검색
SELECT *
FROM board
WHERE category=?;
15. 페이지네이션
LIMIT ?,10;
예시
1
2
3
4
5
16. 이미지 업로드
multer
↓
uploads
↓
DB 저장
↓
React 출력
/uploads/photo.jpg
17. JWT 로그인
로그인
↓
JWT
↓
LocalStorage
↓
API
↓
Authorization
↓
게시글 작성
18. React 구조
BoardList.jsx
↓
BoardDetail.jsx
↓
BoardWrite.jsx
↓
BoardEdit.jsx
API
axios.get()
axios.post()
axios.put()
axios.delete()
19. 관리자 기능
관리자
↓
게시글 삭제
↓
회원 삭제
↓
댓글 삭제
↓
신고 관리
↓
공지사항 등록
20. 실무 프로젝트 구조
Board
│
├── 로그인
├── 회원가입
├── 게시판
├── 댓글
├── 좋아요
├── 조회수
├── 검색
├── 파일업로드
├── 관리자
└── JWT
21. 추가 기능
게시글 고정(Pin)
인기글
댓글 개수 표시
첨부파일 다운로드
태그(Tag)
북마크
게시글 공유
22. React 화면
게시글 목록
↓
검색
↓
카테고리
↓
글쓰기
↓
상세보기
↓
댓글
↓
좋아요
23. 이번 강의 핵심 정리
게시판
CRUD
검색
페이지네이션
조회수
좋아요
댓글
등록
조회
삭제
로그인
JWT
Authorization
파일
multer
uploads
React
목록
상세
등록
수정
실무 팁
실무 게시판은 단순 CRUD에서 끝나지 않습니다.
일반적으로 아래 기능까지 포함됩니다.
기능 설명
조회수 상세 조회 시 증가
좋아요 사용자 반응 저장
댓글 게시글과 1:N 관계
검색 제목, 내용, 작성자 검색
페이지네이션 대량 데이터 처리
첨부파일 이미지·문서 업로드
권한 관리 작성자와 관리자 권한 구분
소프트 삭제 실제 삭제 대신 삭제 상태 표시
최종 프로젝트
다음 기능을 모두 구현해 보세요.
✅ 회원가입
✅ 로그인(JWT)
✅ 게시판 CRUD
✅ 댓글 CRUD
✅ 조회수 증가
✅ 좋아요
✅ 검색
✅ 페이지네이션
✅ 이미지 업로드
✅ 관리자 페이지
✅ React 연동
#23강. 실무형 게시판 프로젝트 만들기