[React/TypeScript] 팀프로젝트 - 주특기 플러스 심화 / 주제는 자유 웹사이트 제작

🔥 React / TypeScript  팀프로젝트🔥

 

 

<발제 내용>

 

요구 사항 : 아래 3가지 중에 한 가지를 반드시 활용해서 만들기

 

💡상

• 좋아요 또는 북마크 기능에 리액트쿼리 Optimistic Update 적용
• 무한스크롤 기능에 리액트쿼리 useInfiniteQuery 적용
• form 유효성검사에 react-hook-form 라이브러리 적용
• Yarn Berry 적용하여 깃헙관리
• Supabase 적용

위 기능 중 2가지를 적용하여 프로젝트 만들기

 

 

💡 중

• redux 외의 다른 전역상태관리 라이브러리 적용
• debounce 또는 throttle(Lodash) 함수를 사용하여 API 요청이나 이벤트 핸들링 성능 개선하기
• json-server-auth 적용

위 기능 중 1가지를 적용하여 프로젝트 만들기

 

 

💡하

• redux-toolkit 적용
• react-query 로 서버 상태 관리하기
• 외부 API 적용

위 기능 중 2가지를 적용하여 프로젝트 만들기

 

---

 

 

개발 기간

2023.12.26 - 2024.01-03

 

프로젝트 명

책 check ( 내가 읽은 책을 체크한다 )

 

프로젝트 소개

 나만의 독서 기록 사이트! 📖

1. 도서 검색 : 도서 API를 통해 책을 검색할 수 있다. 이를 통해 원하는 책을 찾고 상세 정보를 확인할 수 있다
2. 독서 진행률 관리 : 사용자는 자신이 현재 읽고 있는 책의 진행률을 기록할 수 있다. 진행률을 통해 진행 성과를 시각적으로 파악하는 데에 도움이 될 것이다.
3. 읽은 책 목록 : 완독한 책을 목록에 추가할 수 있다
4. 읽고 싶은 책 목록 : 북마크 버튼을 통해 사용자가 읽고 싶은 책을 목록에 추가할 수 있다
5. 다 읽은 책 목록 : 사용자가 다 읽은 책은 별도의 목록에 저장한다.

 

 

👤팀원 소개 및 WBS & Tasks

박희원 : 로그인 및 회원가입 (유효성 검사)

윤성현 : 알라딘 도서 API 가져오기, 내 서재 페이지 만들기

손지원 : 책 등록 페이지 (북마크 및 읽고 있는 책)

박솔이 : 상세페이지(독서 메모 작성 및 수정)

천민정 : 메인페이지(진행 상태, 완주목록)

 

 

 

✔️ 필수 구현 사항

• 북마크 기능에 리액트쿼리 Optimistic Update 적용
• Supabase 적용
• 타입스크립트 사용
• react-query 로 서버 상태 관리하기
• 외부 API 적용

 

✔️선택 구현 사항

• 개인이 맡은 기능 구현 시 Memoization 기법을 사용하여 최적화 하기
• React Query의 enabled 옵션과 select 옵션을 이용하여 useQuery를 구현하기
• form 유효성검사에 react-hook-form 라이브러리 적용

 

 

🖥️ Code Convention

css

• Styled-componenet 사용시 앞에 St 붙이기

변수 및 함수 명명

• 의미 있고 명확한 변수 및 함수 이름 사용
• CamelCase를 사용하여 변수와 함수 명명

주석

• 코드를 이해하기 어려운 부분에 주석 추가.
• 주석은 명확하고 간결하게 작성, 코드 변경 시 주석도 업데이트.

파일 / 폴더명 : 소문자 컴포넌트: 첫글자 대문자 .jsx

 

 

 🐣Ground Rules

1. 자리 비울 시 꼭 전달하기

2. 예쁜 말로 소통하기

3. 모르는 것은 언제든 팀원과 상의하기

4. 식사 시간과 아침, 저녁 인사하기

5. 건강 관리 잘하기

6. 화면공유 잘하기

7. 11시 내로 다 끝내고 퇴근하기 8. 잘 풀리지 않는 로직, 오류 등 30분간 고민해보고 해결되지 않으면 팀원들과 바로 상의하고 그 때도 해결이 안되면 다같이 튜터님 찾아가기 (사소한 거라고 생각해도 고민하지 말고 물어보기)

 

 

 

와이어프레임

 

https://www.figma.com/file/nuNv0afV7rQVbYXYVNYQkc/LET-IT-CO?type=design&node-id=0-1&mode=design&t=gBQTw12BIupxNvg1-0