원티프 프리온보딩 인턴쉽 1주차 과제

원티드 프리온보딩 프론트엔드 인턴쉽 1주차 과제입니다. 가이드라인과 강의 자료 중 과제 피드백을 준수하였습니다.

이 프로젝트는 CRA + TypeScript 템플릿으로 제작되었습니다.

👨‍💻팀원 소개

🤝협업 툴

• 디스코드
• 노션
• github

📝과제 목적

• best practice 만들어 제출하기
• 동료 학습 및 협업 체계 만들기

🔗배포주소

⚙️설치 및 실행 가이드

Install

npm i

Build

npm run build

Start

npm start

백엔드 api 링크

🚀기능

• Authenticate users via JWT (sign in, sign up, logout)
• Validation sign in, sign up
• Redirect processing based on login
• CRUD Todos

DEMO

✨기술 스택

• React
• Typescript
• axios
• react-router-dom
• bootstrap → 효율적인 스타일링을 위해 사용하였습니다.
• craco → webpack 설정을 확장하기 위해 사용하였습니다. Path Alias를 사용합니다

✅과제 진행 방법

기능 구현 목록을 작성 후 아래와 같이 분류하였습니다.

1. Sign in / Sign up
2. CR-- todo
3. --UD todo

분류에 따라 팀원 개개인이 과제를 수행했습니다. 그리고 팀원이 다 같이 모여서 각자가 수행한 과제를 가지고 토론을 진행했습니다. 투표를 통해 Best Practice를 선정한 후, 다른 과제 중 좋았던 구현들을 의논하여 추가하였습니다. 이슈와 PR메시지를 활용하여 문서화하였습니다.

🌟Best Practice Process

Feb 24, 2023  　|　UD— todo Practice PR

• 컴포넌트 단위를 가장 적절하게 나눈 점

Feb 23, 2023  　|　CR— todo Practice PR

• 재사용될 타입들을 파일로 분리해서 관리한 점
• 컴포넌트 단위를 가장 적절하게 나눈 점

Feb 23, 2023  　|　Signin / Signup Best Practice PR

• routerMeta를 사용하여 router 할당을 자동화 시킨 점
• axios interceptors를 통해 token 및 에러 처리를 진행한 점
• React.lazy와 Suspense를 통한 컴포넌트 코드 스플리팅한 점
• 토론을 거쳐 나온 프로젝트 구조(파일과 컴포넌트)에 가장 가까웠던 점
• 커스텀 훅을 사용해 간결하게 코드를 정리한 점

🐞이슈 및 버그

Feb 23, 2023  　|　개발 툴 차이에 따른 lint 적용 이슈 해결

Feb 23, 2023  　|　Path Alias 오류 수정

🗂️파일 구조

public
src
├── api // 서버 함수
│   ├── auth
│   └── todo
├── components // 재사용 컴포넌트
│   ├── HOC
│   └── todo
├── constants // 상수
├── contexts // 전역 state
├── lib
│   ├── hooks // 커스텀 훅
│   └── utils // 유틸 함수
└── pages // 페이지 컴포넌트
    ├── HomePage
    ├── SignInPage
    ├── SignUpPage
    └── TodoPage