summereuna / react-week

📝 투두 리스트

• React 주특기 주차 Lv.5 과제
• 정은화
• 배포한 사이트: vercel

📌 과제 개요

목표

• 레벨 4 과제에 살을 붙여, 나만의 React App 을 만들어봅시다.
  • 주제는 반드시 Todo List가 아니여도 됩니다. 본문과 댓글을 가진 구조의 웹 서비스면 OK!

👍 Checklist : 과제 진행 간 고민해야 하는 부분

• 상태관리 ( 유지 / 초기화 ) 가 잘 되어있나요?
• 각 컴포넌트의 재사용성이 높나요?
• 예외처리가 미흡한 부분은 없나요?

⚙️ features : 구현해야 할 기능

• (1) 공통
  • UI 구현하기
  • API 명세서 작성하기
• (2) 본문 (ex: 할일) CRUD 구현
  • 본문 리스트 조회 하기
  • 본문 조회 하기
  • 본문 추가 하기
  • 본문 삭제 하기
  • 본문 수정 하기
• (3) 배포
  • json-server 서버 배포
  • 리액트 프로젝트 배포 (S3, vercel 등 자유)

📌 Requirement : 과제에 요구되는 사항

• (1) UI/UX
  • 창의적인 UI/UX로 과제를 만드세요.
  • 예시에 없어도 만들고 싶은 기능이 있다면 OK!
• (2) 필수 요구 사항
  • 동적 라우팅을 사용하세요.
  • 1개 이상의 Custom Hook을 구현하세요.
  • Form에 유효성 검증 기능을 적용하세요. 유효성 검증이란, 아래의 예시들을 의미합니다.
    • ex: 제목을 10글자 이상 기입하지 않으면, 글을 추가할 수 없도록 제한 → Alert 으로 안내
    • ex: Form에서 모든 input에 값을 입력하지 않으면, 버튼이 비활성화
  • 버튼 컴포넌트 1개로 모든 버튼을 구현하세요. 모든 스타일과 기능을 버튼을 구현할 수 있는 만능 버튼을 만들어보는 것 입니다.
  • development 환경에서만 redux devtool이 활성화 되도록 처리합니다.
  • 배포된 결과물에서는 console.log() 가 보이지 않도록 처리합니다.
  • .env 를 이용해서 API 서버의 URL 코드상에서 숨기도록 처리합니다.
• (3) API 명세서 (프로젝트 완료 후 작성) 프로젝트가 완료되었다면, 간이 API 서버에서 어떤 API를 사용하였는지 명세서를 작성해주세요.

🏃 Challenge: 도전해볼만한 키워드를 드립니다. 검색을 통해 각 키워드들이 어떤 기능인지 찾아보고 도전해보세요. (필수 ❌)

• Infinite Scroll 또는 Pagination
  • 할일 또는 댓글이 양이 많을 때, 모든 데이터를 한번에 불러오는 것이 아니라 스크롤이 가장 아래에 도달할때마다 부분적으로 데이터를 Fetching 하도록 구현해봅니다.
• Form Help Text
  • Form의 유효성을 체크하고, 유효성을 체크 하지 못했을 때 사용자에게 유효성을 체크 하지 못한 이유에 대해서 안내하는 기능을 구현해봅니다.

📝 구현 방식

사용자 인증/인가 (JWT 관리: LocalStorage => Cookie로 변경)

1. TodoList/Comments data

• 서버 사이드 전역 상태 관리:
  • axios
  • json-server
  • TanStackQuery

2. User data

• 클라이언트 사이드 전역 상태 관리 및 로컬 스토리지에서 관리:
  • axios
  • https://moneyfulpublicpolicy.co.kr api
  • Local Storage
  • Redux Tool Kit

3. 인증을 위한 JWT 토큰 (accessToken만 있음)

• 쿠키에서 관리:
  • axios
  • https://moneyfulpublicpolicy.co.kr api
  • cookie

4. 배포

• json-server => 무료 사용 가능해서 glitch로 json 배포
• vercel 배포

5. 구현

• 투두 CRUD
• 투두 별 상세페이지 댓글 CRUD

6. API 설계

• api = 배포한 json 서버
• authApi = https://moneyfulpublicpolicy.co.kr

구분	기능	URL	Method	request	response
Auth	회원가입	authApi/register	POST	{ "id": "유저 아이디", "password": "유저 비밀번호", "nickname": "유저 닉네임" }	status: 201 Created { "message": "회원가입 완료", "success": true } status: 401 Unauthorized { "message": "아이디, 비밀번호, 닉네임은 필수값입니다." } status: 409 Conflict { "message": "이미 존재하는 유저 id입니다." }
Auth	로그인	authApi/login	POST	{ "id": "유저 아이디", "password": "유저 비밀번호" }	status: 200 OK { "accessToken": "억세스 토큰", "userId": "유저 아이디", "success": true, "avatar": null, "nickname": "닉네임"(기본값 "익명"으로 설정) } status: 401 Unauthorized { "message": "id는 4글자 이상의 문자열이어야 합니다." } status: 401 Unauthorized { "message": "존재하지 않는 유저입니다." } status: 401 Unauthorized { "message": "password는 4글자 이상의 문자열이어야 합니다." } status: 401 Unauthorized { "message": "비밀번호가 일치하지 않습니다." }
Auth	유저 조회	authApi/user	GET	{Authorization: Bearer 억세스토큰}	status: 200 OK { "id": "유저 아이디", "nickname": "닉네임" "avatar": null, "success": true,} status: 401 Unauthorized(토큰 없는 경우) { "message": "헤더에 authorization 정보가 존재하지 않습니다." }
Todo	전체 투두 조회	/api/todoList	GET	-	{ "todoList": [ { "id": "투두 아이디", "userId": "유저 아이디", "title": "제목", "content": "내용", "isDone": 불리언 값 }, { "id": "투두 아이디", "userId": "유저 아이디", "title": "제목", "content": "내용", "isDone": 불리언 값 }, ... ]
Todo	투두 상세 조회	/api/todoList/:id	GET	{id: id}	{ "id": "투두 아이디", "userId": "유저 아이디", "title": "제목", "content": "내용", "isDone": 불리언 값 }
Todo	투두 생성	/api/todoList/:id	POST	{ "id": "투두 아이디"(자동 생성), "userId": "유저 아이디", "title": "제목", "content": "내용", "isDone": false (초기값 false) }
Todo	투두 삭제	/api/todoList/:id	DELETE	{id: id}
Todo	투두 수정	/api/todoList/:id	PATCH	{ ...currentTodo, "title": "수정한 제목", "content": "수정한 내용", }
Todo	투두 수정(isDone 토글)	/api/todoList/:id	PATCH	{ ...currentTodo, "isDone": !currentTodo.isDone }
Comment	투두 별 댓글 리스트 조회	/api/comments?todoId=:id	GET	{id: id}	[ { "id": "댓글 아이디", "userId": "유저 아이디", "todoId": "동일한 투두 아이디", "comment": "댓글" }, { "id": "댓글 아이디", "userId": "유저 아이디", "todoId": "동일한 투두 아이디", "comment": "댓글" }, ]
Comment	댓글 생성	/api/comments	POST	{ "id": "댓글 아이디"(자동 생성), "userId": "유저 아이디", "todoId": "투두 아이디", "comment": "댓글" }
Comment	댓글 삭제	/api/comments/:id	DELETE	{id: id}
Comment	댓글 수정	/api/comments/:id	PATCH	{ ...currentComment, "comment": "수정한 댓글" }

✍️ 질문에 대한 답변

1. Custom Hook을 구현하실 때 어떤 기능을 위해 사용하셨나요? 또한 Custom Hook을 사용함으로써 어떤 이점을 얻으셨나요?

1. 리액트 포탈 사용을 위한 modal 훅 생성

• 이점: 필요한 곳에서 빠르고 간편하게 호출 가능

2. 비동기 처리 로직 분리를 위해 mutate, query 훅 생성

• 이점: 컴포넌트 내부 로직 복잡성 감소 및 가독성 향상
• 단점: 파일양 증가

2. API 서버의 URL을 .env 파일을 사용하여 숨기는 이유는 무엇일까요?

• 보안

3. 애플리케이션의 상태 값들을 컴포넌트 간 어떤 방식으로 공유하셨나요?

• 서버 상태 관리: 서버에서 받아오는 TodoList, Comments의 경우 TanStackQuery으로 관리
• 클라이언트 상태 관리: Error, Modal 등은 useState 및 리덕스 툴킷으로 관리

react-week's Issues

[코드 리뷰] :Lv1

1. 코드의 가독성

코드를 깔끔하게 작성하시고 부분 주석 덕분에 코드를 이해하기 쉬웠습니다.

---

2. 컴포넌트의 재사용성

button과 input, layout, card부분을 나누어서 활용되고 있습니다.

• layout 부분에 header를 넣어서 관리하여 layout으로 감싼다면 해당 페이지에 header가 보일 수 있게 설정 👍
• Button 컴포넌트에 type이라는 값을 받아서 스타일 적용하는 방법도 있다는 것을 배웠습니다.

---

3. card 추가 시 id 검증 부분

조건문으로 중복 아이디가 생기지 않도록 검증하는 부분 배워갑니다. 👀👀

---

4. import

tsconfig.json으로 따로 주소를 설정할 수 있는 기능을 배웠습니다. 저렇게 하면 관리하기 좋고 보기도 좋은 것 같아요!

---

제안 🙋‍♂️

1. id 검증부분처럼 input도 추가하면 좋을 것 같습니다.
2. css부분 깔끔합니다. 컴포넌트 별로 관리해보시는 건 어떤가요?