shinwonse / wanted-pre-onboarding-frontend

프리온보딩 인턴십 프론트엔드 8차 선발과제

원티드 프리온보딩 프론트엔드 - 선발 과제

로그인 기능과 간단한 투두 리스트 기능을 가지고 있는 프로젝트입니다.

배포 링크

🔗 WANTED TODOLIST

vercel cli를 사용하여 배포하였습니다.

실행 방법

$ npm install
$ npm start

기술 스택

브랜치 전략

• main : 배포용 브랜치
• routing : 라우팅 기능 구현 브랜치
• login : 로그인 기능 구현 브랜치
• todo : 투두 리스트 기능 구현 브랜치
• signup : 회원가입 기능 구현 브랜치

Lint

ESLint를 사용하여 코드 스타일을 통일하였습니다. 이때 다음과 같은 플러그인을 사용하였습니다.

• eslint-plugin-react
• eslint-plugin-prettier
• eslint-plugin-import

1인 프로젝트이지만 eslint-plugin-import를 통해 import 순서를 통일하여 가독성을 높였습니다.

주요 기능

로그인 기능

• 로그인 기능은 axios를 사용하여 POST 요청을 보내어 구현하였습니다.
• 로그인 성공 시 localStorage에 token을 저장하고, token이 존재할 경우 todo 페이지로 리다이렉트하도록 구현하였습니다.
• 로그인 실패 시 alert를 띄우도록 구현하였습니다.

이때 이메일과 비밀번호의 유효성 검사는 validations 디렉토리에서 관리하여 로그인과 회원가입에서 사용할 수 있도록 하였습니다.

회원가입 기능

• 회원가입 기능은 axios를 사용하여 POST 요청을 보내어 구현하였습니다.
• 회원가입 성공 시 토큰을 반환하지만, 다시 한번 로그인을 요청하는 플로우가 맞다고 생각하여 이를 사용하지 않고 로그인 페이지로 리다이렉트하도록 구현하였습니다.
• 회원가입 실패 시 alert를 띄우도록 구현하였습니다.

투두 리스트 기능

• 기본적인 CRUD 기능을 구현하였습니다.
• 투두 리스트의 모든 api 통신은 token을 header에 담아 보내도록 구현하였습니다.
• 투두 리스트 기능은 axios를 사용하여 GET 요청을 보내어 구현하였습니다.
• 투두 리스트의 상태를 변경할 때 axios를 사용하여 PUT 요청을 보내어 구현하였습니다.
• 투두 리스트를 삭제할 때 axios를 사용하여 DELETE 요청을 보내어 구현하였습니다.
• 투두 리스트를 추가할 때 axios를 사용하여 POST 요청을 보내어 구현하였습니다.
• localstorage에 token이 존재하지 않을 경우 로그인 페이지로 리다이렉트하도록 구현하였습니다.