[React] Day_51 개인 프로젝트 후기

 

요즘 내 디폴트

 

오늘 오전부터 팀 프로젝트와 챌린지 수업으로 인해 시간을 많이 써서

개인 프로젝트 후기를 간단하게.. 작성해보겠습니다.

트러블 슈팅은 뭐.. 저기에서 vercel 배포할 때, 또 대소문자 에러난거?

아 그거 뭐더라.. git ignore 뭐시기로 했는데 까먹었다

아 여튼 TIL 간단하게 갈게요

가보자고.

 

 

MBTI Test 💡

 

링크는 이곳을 타고 가주세용 → 👉 바로가기

 

Intro ✨

 

오늘의 TIL은 MBTI Test 프로젝트입니다.

이 프로젝트는 간단한 MBTI 테스트를 통해 성격 유형을 파악하고, 결과를 저장/삭제하며,

다양한 성격 설명을 제공하는 React 기반 웹 애플리케이션

 

 

🚀 주요 기능

 

MBTI 테스트 진행

• 테스트 질문을 통해 자신의 MBTI를 계산하고 결과를 확인 가능

결과 저장 및 삭제

• 계산된 결과를 서버에 저장하거나 삭제 가능

반응형 디자인

• 모바일, 태블릿, 데스크톱 환경에 최적화된 UI.

회원관리 시스템

• 로그인 및 회원가입 기능을 통해 사용자 데이터를 관리

 

🛠️ 기술 스택

• Frontend: React, React Router
• Styling: Styled-Components
• State Management: Zustand
• Notifications: react-toastify
• Deployment: Vercel

 

✍️ 작업 내용

 

1️⃣ 라우팅 구성

 

- react-router-dom 사용

• ' / ' - 홈 페이지
• ' /login ' - 로그인 페이지
• ' /signup ' - 회원가입 페이지
• ' /profile ' - 프로필 수정 페이지
• ' /test ' - MBTI 테스트 페이지
• ' /results ' - 테스트 결과 페이지

 

2️⃣ API 연결

 

- 회원가입, 로그인, 프로필 수정, 테스트 결과 관리 기능을 API로 연결

 

- CRUD 기능:

• POST /register → 회원가입
• POST /login → 로그인
• GET /testResults → 결과 목록 조회
• DELETE /testResults/:id → 결과 삭제

 

📂 디렉토리 구조

src/
│
├── components/             # 재사용 가능한 UI 컴포넌트
│   ├── test/               # 테스트 페이지 관련 컴포넌트
│   │   ├── TestForm.jsx            # 테스트 폼 컴포넌트
│   │   └── TestResultItem.jsx      # 테스트 결과 컴포넌트
│   │   └── TestResultList.jsx      # 테스트 결과 리스트 컴포넌트
│   ├── Btn.jsx             # 버튼 컴포넌트
│   ├── LoginForm.jsx       # 로그인 폼 컴포넌트
│   ├── MainLayout.jsx      # 전체 레이아웃 컴포넌트
│   ├── ProtectedRoute.jsx  # 보호된 라우트 컴포넌트
│   ├── SignUpForm.jsx      # 회원가입 폼 컴포넌트
│
├── data/                   # 정적 데이터 파일
│   ├── questions.js        # MBTI 질문 데이터
│   ├── questionsForForeigners.js # 외국인을 위한 질문
│
├── pages/                  # 각 페이지 컴포넌트
│   ├── auth/               # 인증 관련 페이지
│   │   ├── Login.jsx       # 로그인 페이지
│   │   └── SignUp.jsx      # 회원가입 페이지
│   ├── protected/          # 보호된 페이지
│   │   ├── Home.jsx        # 홈 페이지
│   │   ├── Profile.jsx     # 프로필 수정 페이지
│   │   ├── TestPage.jsx    # 테스트 페이지
│   │   └── TestResult.jsx  # 테스트 결과 페이지
│   └── Intro.jsx           # 인트로 페이지
│
├── shared/                 # 공용 모듈 및 설정
│   └── Router.jsx          # 라우터 설정
│
├── store/                  # Zustand 상태 관리 스토어
│   ├── authStore.js        # 인증 관련 상태 관리
│   ├── testFormStore.js    # 테스트 폼 관련 상태 관리
│   └── testStore.js        # 테스트 결과 상태 관리
│
├── utils/                  # 유틸리티 함수 및 파일
│   └── mbtiCalculator.js   # MBTI 계산 로직 및 설명 데이터
│
├── App.jsx                 # 메인 App 컴포넌트
└── main.jsx                # React 진입점

 

 

🧪 느낀 점 & 배운 점

 

- axios instance 활용

• 공통 설정(baseURL, timeout 등) 한 번에 관리 → 코드의 재사용성과 유지보수성 향상
• 요청/응답 인터셉터를 통해 JWT 토큰 추가 및 공통 에러 처리 로직을 쉽게 구현 가능
• 코드의 가독성과 일관성을 높이는 데 매우 유용하다고 느끼게 됨

 

- Zustand를 활용한 상태 관리

• 전역 상태를 다루면서 Redux보다 가볍게 사용이 가능
• 간단한 프로젝트에선 Zustand가 효율적인 선택이라는 걸 느끼게 됨

 

📝 다음 목표

 

- 로그인 유지 기능 추가

• localStorage를 활용해 로그인 상태를 유지할 계획

- React Query 도입

• Tanstack Query로 상태 관리를 리팩토링할 예정

 

 

 

 

마무리 - 이번 주말도 반납 예정 ㅜ-ㅜ)...

 

 

오늘 그래도 집중 빠르게 빡빡 해가지고

팀 프로젝트의 경우, 어차저차 역할 분담까지 쇼쇽 진행되었던 것 같은데..

가뜩이나 어버버 대서 내가 정말 코딩을 해도 되는건가 싶을 정도로 현타온 와중에

발표도 갑자기 거지같이 망해버린 me...

끝나자마자 오열했구요.. (어헝헝)

잘하고 싶었는데.. 그게 너무 잘 안되어서 속상하기도 하고

남들보다 뒤쳐지기 싫어서 더 열심히 하는 중인데...

노력하는 만큼 결과가 안나오는 것 같기도 하고...

그냥 여러모로 속상하고 눈물펑펑나는 일주일이었네여

뭐 그래봤자.. 어쩌겠어 해야지.

이번 주말도 반납하고 프로젝트 구현이나 할랍니다.

KPT 회고는 패스하고 이만 가보겠습니다.

굳바이.