이번 먹었냥 프로젝트 및 블로그 프로젝트를 진행하면서 전체 흐름 혹은 배운점을 정리하려고 한다.

무려 한달인가 두달인가 임시 글로 저장해두었다가 추가하여 드디어 올림ㅋㅋ

우선 먹었냥🐾 프로젝트는 팀원분들이 너무 잘해주셨다.. 감사합니다.. 물론 추후에 다른 팀과의 비교를 해보니 디자인적인 부분이 다소 미흡했지만 이 점은 인지를 했기에 다음엔 더 좋은 성과가 나올 것 같다! (생각해보니 사용할 라이브러리를 초기에 완전 정해두는게 디자인적으로 깔끔하다고 생각했다.)

기능적인 부분은 우리팀 매우 훌륭했다!

특히 승우님이 백엔드 부분을 담당하시고 api 명세서도 자세히 주셨고 배포까지 해주셔서 어려움이 없었다. 플젝 기간에는 우선 그대로 제출하고 플젝이 끝나고 백엔드 부분도 공부하면서 이렇게 회고를 해본다.

+성현님이 tts api연동한 부분도 지금에서야 다시 코드보며 공부중이다.. 감사합니다..

+소은님이 로그인 부분 거의 맡아주셨는데 userSlice부분도 다시 공부중이다. 초반에 본인이 메인페이지를 맡으면서 로그인 부분을 로컬스토리지에서 가져오는 걸로 구현을했다가 소은님이 작성해주신 userSlice를 보고 useSelect를 통해 현재 User를 가져오는걸로 바꿨다. 로직상 깔끔하고 User 정보를 Store에 저장하는 것이 맞는 것 같다. 감사합니다..

아래는 프로젝트 진행중에 중요했던 개념이나 프론트 환경에서 프로젝트를 실행하는 법 등을 정리해보겠다.

node.js & mongoose 연동

백엔드에 대해서는 블로그 프로젝트를 진행하면서 본격적으로 공부했다.

블로그 프로젝트에서는 Node.js와 Express.js를 사용하여 백엔드 API 서버를 구축하고, MongoDB 데이터베이스 연동을 하여 DB 관리를 했다.

몽고디비 설정을 위해 아틀라스에서 새로운 클러스터를 생성하고 성능 및 비용을 조절해야한다.
이후 데이터 베이스를 생성하여 자신의 프로젝트의 데이터를 저장한다. (ex. 먹었냥 프로젝트 db를 생성하고 먹었냥 프로젝트 유저 db를 생성할 수 있다.)
그리고 콜렉션을 설정하여 user, products, orders 등 스키마별로 저장 가능하다.

아래는 프로젝트에서 프론트와 백엔드 구축 과정이다.

백엔드 (Node.js & Express) 구축 과정

1. 필수 라이브러리 설치: 프로젝트 폴더에서 npm을 사용하여 백엔드 운영에 필요한 주요 패키지들을 설치

   npm install express mongoose dotenv cors cookie-parser bcryptjs jsonwebtoken multer

2. 환경 변수 설정 (.env 파일 생성): 프로젝트 루트에 .env 파일을 만들고, 다음과 같은 주요 환경 변수를 설정.

   • PORT=4000 (백엔드 서버 실행 포트)
   • MONGODB_URI=mongodb+srv://유저네임:비밀번호@클러스터주소/DB이름?... (MongoDB Atlas 연결 문자열)
   • MONGODB_DB_NAME=DB이름
   • JWT_SECRET=매우강력한비밀키 (JWT 서명에 사용될 비밀키)
   • JWT_EXPIRATION=1h (JWT 유효 기간)
   • FRONTEND_URL=http://localhost:5173 (프론트엔드 주소 - CORS 설정용)

3. 서버 기본 구조 작성 (src/index.js 또는 index.js):

   • dotenv.config()를 파일 최상단에 호출하여 .env 파일의 환경 변수를 로드
   • Express 앱을 생성하고, cors, express.json(), cookie-parser 등의 미들웨어를 설정
   • Mongoose를 사용하여 MONGODB_URI로 MongoDB에 연결

4. 데이터 모델(스키마) 정의 (src/model/user.js, src/model/post.js):

   • Mongoose의 Schema를 사용하여 사용자(username, password) 및 게시글(title, content, author 등) 데이터 구조를 정의하고 모델을 export

5. API 엔드포인트(라우트) 구현 (src/index.js):

   • 회원가입 (/register), 로그인 (/login), 로그아웃 (/logout), 프로필 조회 (/profile), 글 작성 (/postWrite), 글 목록 조회 (/postlist) 등의 API 라우트를 Express의 app.post(), app.get() 등으로 구현
   • Mongoose 모델을 사용하여 DB와 상호작용하고, bcryptjs로 비밀번호를 처리하며, jsonwebtoken으로 JWT를 발급/검증하고multer로 파일 업로드를 처리

6. 백엔드 서버 실행:

   node src/index.js

   

   • 터미널에 "MongoDB 연결됨" 및 "포트에서 돌고있음" 로그가 뜨면 성공

프론트엔드 (React & Vite) 구축 과정

1. 필수 라이브러리 설치: npm을 사용하여 프론트엔드 운영에 필요한 주요 패키지들을 설치 (웬만한건 설치했다 가정하고 redux에서는 reduxjs/toolkit이 편리)

   @reduxjs/toolkit react-redux axios

2. 환경 변수 설정 (.env 파일 생성 - 프론트엔드 루트): 프론트엔드 프로젝트 루트에 .env 파일을 만들고, 백엔드 API 서버 주소를 설정

   • VITE_BACK_URL=http://localhost:4000 (백엔드 서버가 4000번 포트에서 실행 중일 경우)

3. API 연동 함수 작성 (src/apis/userApi.js, src/apis/postApi.js):

   • axios를 사용하여 백엔드 API 엔드포인트로 요청을 보내는 함수들(loginUser, registerUser, getPostList, createPost 등)을 다른 apis 전용 폴더에 작성
   • axios.defaults.withCredentials = true를 설정하여 쿠키(JWT 토큰)가 요청에 포함되도록 설정
   • API 기본 URL은 import.meta.env.VITE_BACK_URL을 사용

4. React 컴포넌트 및 라우팅, 상태 관리(Redux) 구현:

   • 페이지 컴포넌트(LoginPage, RegisterPage, PostListPage, CreatePost 등) 및 공통 UI 컴포넌트(Header, PostCard 등)를 작성
   • react-router-dom을 사용하여 페이지 간 라우팅을 설정합니다.
   • @reduxjs/toolkit과 react-redux를 사용하여 사용자 정보 등 전역 상태를 관리하는 Redux 스토어 및 슬라이스(userSlice)를 설정
   • 컴포넌트 내에서 useState로 로컬 상태를, useSelector 및 useDispatch로 Redux 상태를 사용하고, useEffect로 API 호출 등의 사이드 이펙트를 처리합니다.

5. 프론트엔드 개발 서버 실행:

   npm run dev

   

   • 터미널에 Vite 개발 서버가 실행되는 주소(http://localhost:5173)가 표시되면 성공

추가 정리

이 회고를 작성하는데 시간이 이미 좀 많이 흘러서..
임시글보니 그 한두달간에도 조금 성장했나보다 싶음ㅋㅋ;;

아래는 추가적으로 먹었냥때 기억나는 개념들을 정리해보겠다.

React Toolkit (RTK) & Slices

• React Toolkit (RTK)이란?

  • Redux의 공식 추천 라이브러리
  • 복잡한 Redux 설정과 코드를 단순화하고 최적화하기 위해 사용

• RTK 핵심 기능

  • configureStore: 여러 리듀서와 미들웨어를 합쳐 스토어(Store)를 생성, 기본적인 설정이 자동화되어 있어 편리함
  • createSlice: 상태(State), 리듀서(Reducer), 액션(Action)을 한 번에 정의하는 함수
    • createSlice의 구성 요소
      • name: 슬라이스의 고유 이름 (예: 'user', 'favorites')
      • initialState: 상태의 초기값 (예: { isLoggedIn: false })
      • reducers: 상태를 변경하는 함수들의 모음

Slice 예시

userSlice (사용자 정보 관리)

• 역할: 로그인 상태, 사용자 이름, 이메일 등의 정보 관리
• 주요 액션:
  • loginUser: 사용자 정보를 받아와 상태를 업데이트
  • logoutUser: 사용자 정보를 초기화하여 로그아웃 처리

favoriteSlice (즐겨찾기 목록 관리)

• 역할: 사용자가 추가한 즐겨찾기 아이템 목록 관리
• 주요 액션:
  • addFavorite: 새로운 아이템을 즐겨찾기 목록에 추가
  • removeFavorite: 특정 아이템을 즐겨찾기 목록에서 제거

RTK 정리

• 리덕스는 왜 쓴다? → 복잡한 앱의 데이터를 한 곳에서 관리하기 위해! (전역 상태 관리)

• 리듀서(Reducer)란? -> 액션(Action)이라는 요청서에 따라 기존 상태(State)를 참조하여 절대 원본은 건드리지 않고, 복사본을 만들어 변경한 뒤 새로운 상태(New State)를 반환하는 순수한 함수

• 리액트 툴킷은 뭐다? → 그 리덕스를 아주 쉽고 편하게 쓰도록 도와주는 공식 도구!

• createSlice는 뭐다? → 기능별로 상태, 리듀서, 액션을 묶어서 깔끔하게 관리하는 방법! (서랍장 정리)

• configureStore는 뭐다? → 그 슬라이스(서랍장)들을 모아서 전체 스토어(캐비닛)를 만드는 간단한 방법!

• useSelector & useDispatch는 뭐다? → 컴포넌트에서 스토어의 데이터를 꺼내 쓰고(Selector), 변경을 요청하는(Dispatch) 도구!