NodeJS, MongoDB, react 회원가입, 로그인, 게시판 구현 플로우

 

Node.js / MongoDB / React를 활용한 프로젝트를 만들어 보려 한다.

회원가입을 하고 로그인을 하면 게시판 글쓰기가 가능한 기본적인 기능을 시작으로 점진적으로 기능을 추가해 볼 예정이다.

 

 

1. 프로젝트 폴더 및 구조 구성

 

2. backend, frontend 구성 및 설치

 

3. backend 

1) 서버 시작 파일 작성 및 환경변수 파일 작성 ( server.js, .env ), nodemon설정 

2) MongoDB 연결 및 서버 실행 ( db.js, errorHandler.js )

3) 회원가입, 로그인 로직 작성 ( User.js, authController.js, authRoutes.js, generateToken.js )

4) 게시글 로직 작성 ( Post.js, postController.js, postRoutes.js, authMiddleware.js )

5) 사용자 검증 미들웨어 ( authMiddleware.js )

15) 게시글 수정/삭제 기능 추가 ( postController.js, postRoutes.js )

 

4. frontend

6) frontend 기본 라우팅 및 페이지 구성 ( react router설치, App.js, RegisterPage.js )

7) 회원가입 폼 백엔드 데이터 전송 ( axios설치, RegisterPage.js ), cuncurrently, Cors

8) 로그인 페이지 및 라우터 연결 ( LoginPage.js, App.js )

9) 로그인 기능 구현 ( LoginPage.js )

10) 인증이 필요한 보호 페이지 ( ProtectedRoute.js, DashboardPage.js, App.js )

11) 로그인 응답 구조로 인한 오류 해결 ( DeshboardPage.js, localStorage, res.data, LoginPage.js )

12) 전역 상태 관리하기 ( AuthContext.js, LoginPage.js, DashboardPage.js, ProtectedRoute.js, App.js ), 로그아웃

13) 게시판 페이지 작성 ( PostListPage.js, PostDetailPage.js, CreatePostPage.js, App.js )

14) 프론트엔드 기능별 라우터 분리 ( routes/index.js , authRoutes.js, dashboardRoutes.js, postRoutes.js, App.js )

16) 게시글 수정페이지 및 삭제 추가 ( EditpostPage.js, postRoutes.js, PostDetailPage.js )

17) 마무리작업 ( HomePage.js, DeshboardPage.js, PostListPage.js )

 

 

---

 

 

1. UX/UI

1) Tailwind CSS 설치 및 설정

2) 공통 레이아웃 컴포넌트 ( Header.js, Footer.js, Layout.js )

3) 반응형 내비게이션 ( Navbar.js, Header.js )

4) 페이지 라우팅 설정 ( Layout.js, routes/index.js, HomePage.js )

5) Header 구성 변경 및 추가 ( Sidebar.js, Navbar.js, Header.js, Layout.js )

6) Tailwind UI 적용 ( PostListPage.js, PostDetailPage.js )