- 1. 로그인 / 회원가입
- / 경로에 로그인 / 회원가입 기능을 개발해주세요
- 페이지 안에 이메일 입력창, 비밀번호 입력창, 제출 버튼이 포함된 형태로 구성해주세요
- 로그인, 회원가입을 별도의 경로로 분리해도 무방합니다
- Assignment1
- 이메일과 비밀번호의 유호성 검사기능을 구현해주세요
- 이메일 조건 : @ 포함
- 비밀번호 조건 : 8자 이상
- 입력된 이메일과 비밀번호가 위 조건을 만족할 때만 버튼이 활성화 되도록 해주세요
- 보안 상 실제 사용하고 계신 이메일과 패스워드말고 테스트용 이메일, 패스워드 사용을 권장드립니다
- Assignment2
- 로그인 API를 호출하고, 올바른 응답을 받았을 때 /todo 경로로 이동해주세요
- 로그인 API는 로그인이 성공했을 시 Response Body에 JWT를 포함해서 응답합니다
- 응답받은 JWT는 로컬 스토리지에 저장해주세요
- Assignment3
- 로그인 여부에 따른 리다이렉트 처리를 구현해주세요
- 로컬 스토리지에 토큰이 있는 상태로 / 페이지에 접속한다면 /todo 경로로 리다이렉트 시켜주세요
- 로컬 스토리지에 토큰이 없는 상태로 /todo 페이지에 접속한다면 / 경로로 리다이렉트 시켜주세요
- 2. 투두 리스트
- Assignment4
- /todo 경로에 접속하면 투두 리스트의 목록을 볼 수 있도록 해주세요
- 리스트 페이지에는 투두 리스ㅡ의 내용과 완료 여부가 표시되어야 합니다.
- 리스트 페이지에는 입력창과 추가 버튼이 있고, 추가 버튼을 누르면 입력창의 내용이 새로운 투두 리스트로 추가되도록 해주세요
- Assignment5
- 투두 리스트의 수정, 삭제 기능을 구현해주세요
- 투두 리스트의 개별 아이템 우측에 수정버튼이 존재하고 해당 버튼을 누르면 수정모드가 활성화되고 투두 리스트의 내용을 수정할 수 있도록 해주세요
- 수정모드에서는 개별 아이템의 우측에 제출버튼과 취소버튼이 표시되며 해당 버튼을 통해서 수정 내용을 제출하거나 수정을 취소할 수 있도록 해주세요
- 투두 리스트의 개별 아이템 우측에 삭제버튼이 존재하고 해당 버튼을 누르면 투두 리스트가 삭제되도록 해주세요
- [O] 회원가입 폼 구현
- [O] 이메일 입력창 구현
- [O] 비밀번호 입력창 구현
- [O] 제출 버튼 구현
- [O] 회원가입 유효성 검사 기능 구현
- [O] 이메일에 @ 포함되어있는지 확인하는 함수 구현
- [O] 비밀번호가 8자 이상인지 확인하는 함수 구현
- [O] 이메일 및 비밀번호가 정상이면 제출버튼 활성화 되도록 구현
- [O] 회원가입 버튼 클릭 시 회원가입처리
- [O] 회원가입 버튼 클릭 시 회원가입 후 로그인 페이지로 이동 처리
- [O] 로그인 폼 구현
- [O] 이메일 입력창 구현
- [O] 비밀번호 입력창 구현
- [O] 로그인 버튼 구현
- [O] JWT토큰을 로컬스토리지에 저장하는 함수 구현
- [O] 로컬스토리지에 JWT가 존재하는지 검증하는 함수 구현
- [O] 로컬스토리지에 JWT가 존재하는 상태로 /페이지 접속시 /todo로 리다이렉트
- [O] 로컬스토리지에 JWT가 존재하지 않는 상태로 /todo페이지 접속시 /로 리다이렉트
- [] 투두 폼 구현
- [O] 투두리스트 화면 구현
- [O] 투두리스트 목록 표시 구현
- [O] 투두리스트 추가 기능 구현
- [O] 투두리스트 삭제 기능 구현
- [] 투두리스트 수정 기능 구현
$npm install
$npm start
로그인
투두리스트
로그인 및 회원가입 기능을 직접 구현하면서 JWT를 알게 되어 좋았습니다.
UI/UX를 좀 더 이쁘게 만들지 못하였고, 코드 가독성이 좋지 않은 것 같습니다ㅠㅠ 또한 투두 리스트에서 수정 기능을 구현하지 못하여서 아쉽고, 삭제 기능 또한 서버 에러가 발생되어서 많이 아쉬움이 남습니다 ㅠ
1. JWT 학습하여 벨로그에 정리하기
2. 투두리스트 마무리 짓기
3. 리팩토링 하기