원티드 프리온보딩 프론트엔드 인턴쉽 1주차 과제입니다. 과제 가이드라인을 준수하였습니다.
이 프로젝트는 CRA + TypeScript 템플릿으로 제작되었습니다.
- Todos 어플의 best practice 만들어 제출하기
- 동료 학습 및 협업 체계 만들기
기능 구현 목록을 작성 후 아래와 같이 분류하였습니다.
- Sign in / Sign up
- CR-- todo
- --UD todo
분류에 따라 팀원 개개인이 수행한 과제를 통해 토론을 진행했습니다. 투표를 통해 Best Practice를 선정한 후, 다른 과제 중 좋았던 구현들을 의논하여 추가하였습니다. 이슈와 PR메시지를 활용하여 문서화하였습니다.
- 🏆 Best Practice 선정
Update,Delete기능 파트입니다.- 역할에 따라 컴포넌트 나누는 기준을 고려하며 구현하였습니다.
Create,Read기능 파트입니다.- 재사용 되는 로직을 함수화하였습니다.
- 🏆 Best Practice 선정
Signin,Signup기능 파트입니다.- Custom Hook, Router 할당 자동화, Axios interceptors를 사용해 반복되는 작업을 줄였습니다.
- Context API와 토큰 클래스, Axios interceptors를 통해 인증&인가 횡단 관심사 처리하였습니다.
- HOC(고차 함수 컴포넌트)를 사용하여 로그인 여부에 따른 리다이렉트 기능을 구현했습니다.
- 초기 환경 구성 중 path alias를 사용하기 위한 세팅에 장애가 발생하였고 craco 라이브러리를 사용하여 해결하였습니다.
- 요구 사항 목록을 작성하여 커밋시마다 체크하는 방식을 제안하였습니다.
- 전체 페이지의 UI-UX를 구성하였습니다.
 
|
 
|
 
|
 
|
 
|
 
|
 
|
 
|
- Feb 24, 2023 | --UD todo Practice Best Practice
- Feb 23, 2023 | CR-- todo Practice Best Practice
- Feb 23, 2023 | Signin / Signup Best Practice Best Practice
- Feb 23, 2023 | 개발 툴 차이에 따른 lint 적용 이슈 해결
- Feb 23, 2023 | Path Alias 오류 수정 PR
npm i
npm run build
npm start
- Authenticate users via JWT (sign in, sign up, logout)
- Validation sign in, sign up
- Redirect processing based on login
- CRUD Todos
React, Typescript, Axios, React-router-dom, Bootstrap, craco
Collaboration Tool: Discord, Notion, Github
public
src
├── api // 서버 함수
│ ├── auth
│ └── todo
├── components // 재사용 컴포넌트
│ ├── HOC
│ └── todo
├── constants // 상수
├── contexts // 전역 state
├── lib
│ ├── hooks // 커스텀 훅
│ └── utils // 유틸 함수
└── pages // 페이지 컴포넌트
├── HomePage
├── SignInPage
├── SignUpPage
└── TodoPage