원티드 프리온보딩 FE 챌린지 - React Query
Github
- 제공해드리는 API Repository를 활용하여 가이드에 따라
Todo App
을 작성, 본인의 github에 Public
으로 올려주세요. (주의: Public이 아닐 경우 과제를 확인할 수 없습니다)
- 완성한 과제는 모집 마감 후 설문 조사를 통해 제출해주세요. (개강 시 설문 조사 링크 전달 예정)
- 제출 레파지토리 명은
wanted-pre-onboarding-challenge-fe-1
로 생성해 주세요.
- 과제 수행 개수에 따라 기본적인 평가가 이루어지며, 커리큘럼 운영 과정에서 최소한의 수준을 파악하기 위한 용도입니다.
- 코드의 일관성, 가독성, 함수 분리, 컴포넌트 설계, 코드 퀄리티 등을 기준으로 세부적인 평가가 이루어집니다.
- 해당 과제에 대한 해설은 개강 후 진행될 예정입니다.
README.md
를 꼭 작성해 주세요. 본인에 대한 소개나 프로젝트 소개 등 자유롭게 작성해주시면 됩니다.
- 반드시 함수 컴포넌트로 개발해주세요. (React Hooks)
- 문의 사항은 사전 과제 Repository의 Issue로 등록해 주세요.
Assignment 1 - Login / SignUp
- /auth 경로에 로그인 / 회원가입 기능을 개발합니다
- 이메일과 비밀번호의 유효성을 확인합니다
- 로그인 API를 호출하고, 올바른 응답을 받았을 때 루트 경로로 이동시켜주세요
- Todo List API를 호출하여 Todo List CRUD 기능을 구현해주세요
- 한 화면 내에서 Todo List와 개별 Todo의 상세를 확인할 수 있도록 해주세요.
- 한 페이지 내에서 새로고침 없이 데이터가 정합성을 갖추도록 구현해주세요
- 로컬 서버를 실행했을 때 생성되는
db/db.json
이 DB 역할을 하게 됩니다. 해당 파일을 삭제하면 DB는 초기화 됩니다.
- 로그인 / 회원 가입 기능은 유저를 DB에 추가하고 JWT 토큰을 응답으로 돌려줄 뿐, 실제 유저별로 Todo 목록을 관계 지어 관리하지는 않습니다. (모든 유저가 하나의 Todo를 가짐)
- 로그아웃은 클라이언트 단에서 localStorage에 저장된 token을 삭제하는 방식으로 간단히 구현해주세요.
> yarn
> yarn start # http://localhost:8080
- GET
/todos
- Headers
- Authorization: login token
{
"data": [
{
"title": "hi",
"content": "hello",
"id": "z3FGrcRL55qDCFnP4KRtn",
"createdAt": "2022-07-24T14:15:55.537Z",
"updatedAt": "2022-07-24T14:15:55.537Z"
},
{
"title": "hi",
"content": "hello",
"id": "z3FGrcRL55qDCFnP4KRtn",
"createdAt": "2022-07-24T14:15:55.537Z",
"updatedAt": "2022-07-24T14:15:55.537Z"
}
]
}
- GET
/todos/:id
- Headers
- Authorization: login token
{
"data": {
"title": "hi",
"content": "hello",
"id": "z3FGrcRL55qDCFnP4KRtn",
"createdAt": "2022-07-24T14:15:55.537Z",
"updatedAt": "2022-07-24T14:15:55.537Z"
}
}
- POST
/todos
- Parameter
- title: string
- content: string
- Headers
- Authorization: login token
{
"data": {
"title": "hi",
"content": "hello",
"id": "z3FGrcRL55qDCFnP4KRtn",
"createdAt": "2022-07-24T14:15:55.537Z",
"updatedAt": "2022-07-24T14:15:55.537Z"
}
}
- PUT
/todos/:id
- Parameter
- title: string
- content: string
- Headers
- Authorization: login token
{
"data": {
"title": "제목 변경",
"content": "내용 변경",
"id": "RMfi3XyOKoI5zd0A_bsPL",
"createdAt": "2022-07-24T14:25:48.627Z",
"updatedAt": "2022-07-24T14:25:48.627Z"
}
}
- DELETE
/todos/:id
- Headers
- Authorization: login token
- POST
/users/login
- Parameter
- email: string
- password: string
{
"message": "성공적으로 로그인 했습니다",
"token": "eyJhbGciOiJIUzI1NiJ9.YXNkZkBhc2RmYXNkZi5jb20.h-oLZnV0pCeNKa_AM3ilQzerD2Uj7bKUn1xDft5DzOk"
}
- POST
/users/create
- Parameter
- email: string
- password: string
{
"message": "계정이 성공적으로 생성되었습니다",
"token": "eyJhbGciOiJIUzI1NiJ9.YXNkZkBhc2RmYXNkZi5jb20.h-oLZnV0pCeNKa_AM3ilQzerD2Uj7bKUn1xDft5DzOk"
}