링크: https://wanted-pre-onboarding-fr-39654.web.app/

해당 링크로 접속하면 볼 수 있습니다.

1. git clone을 통해 해당 저장소를 clone합니다. $ git clone https://github.com/ZetBe/wanted-pre-onboarding-frontend.git

2. vsCode로 좌측 위에 File -> Open Folder -> clone한 저장소 폴더 선택합니다.

3. 해당 폴더로 이동하면 좌측 위에 Terminal -> New Terminal 을 클릭하여 터미널을 엽니다.

4. 터미널에서 해당 코드를 입력해서 먼저 설치합니다. npm install

5. 마지막으로 해당 코드를 입력해서 실행합니다. npm start

(깃에서 바로 npm install, npm start를 입력해도 됩니다.)

회원 가입

로그인

Todo 작성, 수정(수정 중 취소), 삭제

(로그인 한 기록이 있다면 /todo로 이동합니다.)

1. 새 이메일과 새 비밀번호를 적습니다.

3-1. 하지만 회원가입에 문제가 있다면 alert창으로 해당 사실을 알립니다.

(로그인 한 기록이 있다면 /todo로 이동합니다.)

1. 비밀번호와 동일하게 이메일에 '@'를 넣고 비밀번호의 글자수가 8자를 넘으면 로그인 버튼이 활성화되어 로그인이 가능합니다.

2. 로그인에 성공하면 JWT 토큰이 부여되고, todo 페이지로 이동합니다.

(로그인 한 기록이 없다면 /signin로 이동합니다.)

todo페이지에 쓰고 싶은 것이 있다면 빨간색 화살표로 가리킨 부분에 입력하고 추가 버튼을 누릅니다.

입력하고 버튼을 누르면 이렇게 나옵니다.

수정하고 싶은 것이 있다면 해당 부분에 수정 버튼을 눌러 수정하고 싶은 부분을 수정하고 제출 버튼을 누릅니다.

만약 취소를 누르면 원래 있던 글 그대로 나옵니다.

todo리스트에 체크하고 해당 부분을 수정하면 체크한 부분도 수정됩니다.

삭제하고 싶은 것이 있다면 해당 부분에 삭제 버튼을 누르면 해당 부분만 삭제되는 모습이 나옵니다.

api링크: https://www.pre-onboarding-selection-task.shop/

• React: 기본적으로 사용한 라이브러리 입니다.
• React Router: /signin, /signup, /todo, /페이지를 만드는데 사용했습니다.
• Axios: axios로 DELETE요청을 했습니다.