📅 개발 기간 : 2025. 02.20 ~ 2025. 02. 25 (총 6일)
🔗 배포 주소 : https://react-developer-test-five.vercel.app자신의 개발자 유형을 알아볼 수 있는 React 기반의 웹 어플리케이션입니다.
TailwindCSS를 통한 컴포넌트를 스타일링하고, Zustand를 활용하여 클라이언트 상태 관리를 합니다.
TanstackQuery를 통하여 서버 상태 관리를 하고, react-router-dom을 활용하여 페이지 간 네비게이션을 처리합니다.이 프로젝트를 통해 axios의 인터셉트 활용 및 토큰 인증/인가에 대해 학습했습니다.
PC와 모바일 환경 모두에 최적화된 반응형 디자인을 적용하였습니다.
| 1. 회원가입 | 2. 로그인 | 3. 메인 홈 | 4. 프로필 수정 |
|---|---|---|---|
 |
 |
 |
 |
| 5. 개발자 유형 테스트 | 6. 테스트 결과 | 7. 테스트 결과 목록 | 8. 카카오톡 공유하기 |
 |
 |
 |
 |
- React 라이브러리로 구성된 프로젝트입니다.
- Zustand를 사용하여 애플리케이션의 유저 정보 상태를 관리합니다.
- TanStack Query의 API를 이용하여 suspense를 통한 loading과 무한스크롤을 구현하였습니다.
- Axios Instance를 활용하여 API 통신을 모듈화하고, 요청/응답 인터셉터를 통해 공통적인 처리 로직을 적용합니다.
- TailwindCSS를 사용하여 반응형 디자인을 적용하고, react-router-dom을 이용해 페이지 간 네비게이션을 처리합니다.
- 로그인된 유저의 인증 상태에 따라 ProtectedRoute를 적용하여 비인가 사용자의 접근을 제한합니다.
- 카카오톡 공유하기 기능을 활용해 자신의 개발자 유형 검사 결과를 소셜에 공유할 수 있습니다.
# server-json 설정
git clone https://github.com/llddang/json-server-developer-test.git
cd json-server-developer-test
pnpm install
pnpm start & # unix/linux/mac 에서 background로 실행 (http://localhost:4000)
cd ..
# frontend project 실행
git clone https://github.com/llddang/react-developer-test.git
cd react-developer-test
cat > .env.development << EOL
VITE_APP_AUTH_API_URL=https://www.nbcamp-react-auth.link
VITE_APP_JSON_API_URL=http://localhost:4000
VITE_APP_KAKAO_KEY='KAKAO_KEY' # kakao에서 발행한 key를 넣어주세요.
EOL
pnpm i
pnpm dev & # unix/linux/mac 에서 background로 실행 (http://localhost:5173/)📦 react-developer-test
├─ public
└─ src
├─ main.tsx
├─ App.tsx
├─ components
│ ├─ commons
│ ├─ features
│ └─ layouts
├─ config
│ ├─ ProtectedRoute.tsx
│ └─ Router.tsx
├─ constants
│ ├─ env.constant.ts
│ └─ query-key.constant.ts
├─ data
│ ├─ developer-type.data.ts
│ └─ questions.data.ts
├─ libs
│ ├─ api
│ ├─ hooks
│ └─ utils
├─ pages
├─ stores
├─ styles
└─ types
