- Sprint1(9/2 ~ 9/8) : 기획 단계
- Sprint2(9/9 ~ 9/15): 메인,도서목록,게시글, 즐겨찾기, 로그인,회원가입 마크업 및 스타일링
- Sprint3(9/15 ~ 9/24): DB 연결, 기능구현
- Sprint4(9/23 ~ 9/25): 발표자료 준비 및 demoday
개발자들을 위한 책 추천 및 리뷰 사이트을 만들기 위해 다음의 목표와 가치를 추구했습니다.
지식 공유와 역량 향상: 이 사이트을 통해 개발자들은 서로의 경험을 공유하고 적절한 서적을 찾아 역량을 향상시킬 수 있습니다.
서적 선택의 단순화: 개발자들은 수많은 개발 서적 중에서 최적의 선택을 돕기 위한 추천 시스템과 리뷰를 활용할 수 있습니다.
개발자 커리어 발전: 이 사이트을 통해 개발자들은 더 나은 기술 역량을 갖추고 커리어를 발전시키는데 필요한 지식을 습득할 수 있습니다.
개발자의 서적 공유 사이트은 개발자 커뮤니티를 더욱 강화하고, 개발자들의 기술적인 성장과 네트워킹을 촉진하며, 서적 선택을 단순화하는 데 도움을 줄 것입니다. 우리는 개발자들에게 가치 있는 리소스를 제공하고, 개발자 생태계를 발전시키는 데 기여할 것입니다.
🧐 이호 : 팀원들과 함께 성장해 나가는 프로젝트가 되었으면 좋겠습니다!
🤪 전진승 : 팀원들과 함께 완성도 높은 프로젝트를 만들어가고 싶습니다!
😉 양정아 : 다 함께 만들고 성장하는 프로젝트가 되기 위해 노력하겠습니다!
😍 강예나 : 과정이 기억에 남는 프로젝트를 만들어가고 싶습니다!
| 이호(SM) | 전진승 | 양정아(L) | 강예나 |
|---|---|---|---|
 |
 |
 |
 |
| 이름 | 담당한 부분 |
|---|---|
| 🙋🏼♂️ 이호 | 게시글 등록, 게시글 상세페이지 |
| 🙋🏼♂️ 전진승 | 메인, 즐겨찾기 목록 페이지, 푸터 |
| 🙋🏻♀️ 양정아 | 로그인, 프로필 작성, 작성글 목록 페이지 |
| 🙋🏻♀️ 강예나 | 회원가입, 도서 목록 페이지, 헤더 |
- 구현한 기능들 (세세한 것들은 적지 못했지만 모두 고생해서 만들었습니다.)
- 도서 검색 후 등록 기능 (도서검색 API)
- 북마크, 좋아요 기능
- 댓글 기능
- 유효성 검사
- 스와이퍼 API
- 애니메이션
- 배너, 베스트도서, 카테고리별도서, 신규도서로 이루어져 있습니다.
- 스와이퍼 API와 애니메이션을 추가하였습니다.
- 카테고리별로 도서 목록을 볼 수 있습니다.
- 내가 작성한 게시글을 모아볼 수 있습니다.
- 도서 검색 후, 카테고리를 선택하고 내용을 적으면 게시글을 등록할 수 있습니다.
- 도서검색 API를 사용하였습니다.
- 북마크를 누른 게시글들을 모아볼 수 있습니다.
- 로그인, 회원가입, 프로필등록 페이지에서는 유효성 검사 후 등록이 가능합니다.
📦src
┣ 📂api
┃ ┣ 📜pocketbase.js
┃ ┗ 📜useProducts.js
┣ 📂assets
┃ ┣ 📜cleanCode.png
┃ ┣ 📜hori.png
┃ ┣ 📜mainBanner1.png
┃ ┣ 📜mainBanner2.png
┃ ┗ 📜reactBook.png
┣ 📂components
┃ ┣ 📂bookList
┃ ┃ ┣ 📜Spinner.jsx
┃ ┃ ┗ 📜TabButtonList.jsx
┃ ┣ 📂category
┃ ┃ ┗ 📜CategoryTabButton.jsx
┃ ┣ 📂common
┃ ┃ ┣ 📂bookCards
┃ ┃ ┃ ┣ 📜BookCardImage.jsx
┃ ┃ ┃ ┣ 📜ColBookCard.jsx
┃ ┃ ┃ ┣ 📜ColBookCardInfo.jsx
┃ ┃ ┃ ┣ 📜RowBookCard.jsx
┃ ┃ ┃ ┗ 📜RowBookCardInfo.jsx
┃ ┃ ┣ 📜Button.jsx
┃ ┃ ┣ 📜FormInput.jsx
┃ ┃ ┣ 📜Heart.jsx
┃ ┃ ┣ 📜Heartbutton.jsx
┃ ┃ ┣ 📜InputValidation.jsx
┃ ┃ ┣ 📜ScrollButton.jsx
┃ ┃ ┣ 📜SignPageTitle.jsx
┃ ┃ ┣ 📜SubVisualBanner.jsx
┃ ┃ ┗ 📜TabButton.jsx
┃ ┣ 📂favorite
┃ ┃ ┗ 📜FavoriteTitle.jsx
┃ ┣ 📂join
┃ ┃ ┣ 📜JoinForm.jsx
┃ ┃ ┗ 📜JoinTitle.jsx
┃ ┣ 📂login
┃ ┃ ┣ 📜EmailInput.jsx
┃ ┃ ┣ 📜JoinButton.jsx
┃ ┃ ┣ 📜LoginButton.jsx
┃ ┃ ┣ 📜LoginForm.jsx
┃ ┃ ┣ 📜LoginTitle.jsx
┃ ┃ ┗ 📜PasswordInput.jsx
┃ ┣ 📂main
┃ ┃ ┣ 📜BestBook.jsx
┃ ┃ ┣ 📜CategoryBook.jsx
┃ ┃ ┣ 📜MainBanner.jsx
┃ ┃ ┗ 📜NewBook.jsx
┃ ┣ 📂postList
┃ ┃ ┣ 📜PostListTitle.jsx
┃ ┃ ┗ 📜PostWriteButton.jsx
┃ ┣ 📂profile
┃ ┃ ┣ 📜ImageUpload.jsx
┃ ┃ ┣ 📜NicknameInput.jsx
┃ ┃ ┣ 📜ProfileTitle.jsx
┃ ┃ ┗ 📜RegistrationButton.jsx
┃ ┣ 📂userPost
┃ ┃ ┣ 📜Comments.jsx
┃ ┃ ┣ 📜CommentsLayout.jsx
┃ ┃ ┣ 📜InputComment.jsx
┃ ┃ ┣ 📜PostBookInfo.jsx
┃ ┃ ┣ 📜PostMain.jsx
┃ ┃ ┣ 📜PostOptions.jsx
┃ ┃ ┣ 📜PostTitle.jsx
┃ ┃ ┗ 📜RullsOfComment.jsx
┃ ┗ 📂write
┃ ┃ ┣ 📜BookImage.jsx
┃ ┃ ┣ 📜BookInfo.jsx
┃ ┃ ┣ 📜Category.jsx
┃ ┃ ┣ 📜ReviewBtn.jsx
┃ ┃ ┣ 📜ReviewInfo.jsx
┃ ┃ ┣ 📜ReviewMainText.jsx
┃ ┃ ┗ 📜SearchBooks.jsx
┣ 📂contexts
┃ ┣ 📜AuthContext.jsx
┃ ┣ 📜BookmarkContext.jsx
┃ ┣ 📜PbDataContext.jsx
┃ ┗ 📜PrivateRoute.jsx
┣ 📂hooks
┃ ┣ 📜booleanStore.js
┃ ┣ 📜categoryStore.js
┃ ┣ 📜commentStore.js
┃ ┣ 📜setupProxy.js
┃ ┗ 📜useStorage.js
┣ 📂layout
┃ ┣ 📜FooterBar.jsx
┃ ┣ 📜HeaderBar.jsx
┃ ┣ 📜Layout.jsx
┃ ┗ 📜Nav.jsx
┣ 📂pages
┃ ┣ 📜BookDescription.jsx
┃ ┣ 📜BookList.jsx
┃ ┣ 📜FavoritePage.jsx
┃ ┣ 📜Home.jsx
┃ ┣ 📜Join.jsx
┃ ┣ 📜Login.jsx
┃ ┣ 📜PostListPage.jsx
┃ ┣ 📜RegisterProfile.jsx
┃ ┗ 📜WritePage.jsx
┣ 📂routes
┃ ┗ 📜routes.jsx
┣ 📂store
┣ 📂styles
┃ ┗ 📜tailwind.css
┣ 📂utils
┃ ┣ 📜debounce.js
┃ ┣ 📜getPbImageURL.js
┃ ┣ 📜regular.js
┃ ┗ 📜showAlert.js
┣ 📜App.jsx
┗ 📜main.jsx
| Type 키워드 | 사용 시점 |
|---|---|
| Feat | 새로운 기능 및 구조 추가 |
| Fix | 오류 및 코드 수정 |
| Style | 코드 포맷팅, 코드 변경이 없는 경우 및 세미콜론 누락 |
| Docs | 리드미 및 문서변경 |
| Comment | 필요한 주석 추가 및 변경 |
| Refactor | 코드 리팩토링(결과는 같은 상태에서 내부 코드를 수정) |
| Remove | 파일을 삭제하는 작업만 수행한 경우 |
| Chore | 화면 및 로직의 변화가 없는 작업, 이미지파일 수정, 파일 구조 변경 |
| Setting | Eslint, dependency, config 파일 등의 환경설정 수정 사항 |
| Merge | 다른 브랜치와 병합할때 |
- 카멜케이스(camelCase) 사용하기
- 리액트컴포넌트 파스칼케이스(PascalCase) 사용하기
- Eslint, Prittier 사용하기
- 함수명
- 이벤트함수는 앞에 꼭 handle꼭 적어주기!
- 동작을 하는 함수를 쓸때는 꼭 앞쪽에 동사를 적어주기!
- 함수명이 길어도 되니까, 무슨 함수인지 알수 있게 해주기! (10년후에 봐도 알수있게)
- 변수명
- 변수명 확실히 해주기
- 만약 변수명이 너무 난해하거나, 길거나 애매하면 동료들에게 꼭꼭 의논하기!
- 변수 사용방법
- var는 절대 쓰지말기
- 가능한 const를 사용하기
- let은 동적인 항목에만 사용하기
🧐 이호 : 야무선생님께서 말씀하신 ‘학’, ‘습’ 이란게 무엇인지 제대로 깨달았습니다. 정말 배울게 많은 리액트였고, 그만큼 습의 시간이 많이 필요하단걸 느꼇습니다.그래도 프로젝트로 직접 구현해보고 수업시간에 말했던 내용들이 하나씩 연결고리가 생기며 재미있게 진행했던 것 같습니다. 팀원분들도 너무 좋은 분들이고 배울점도 각각 달라서 이번 파이널 프로젝트는 저에게 뜻깊고 의미있던 시간이었던 것 같습니다.
🤪 전진승 : 아직까지 제가 습득해야 할 내용이 많다고 느끼고, 배운 내용을 제대로 활용하지 못하는 게 아쉬웠습니다. 그래서 기반을 다시 탄탄히 다지고, 코드 리팩토링에 충분한 시간을 할애해야 할 것 같습니다
😉 양정아 : 시간이 촉박해서 더 다듬지 못한 부분이 아쉽기도하고, 내가 처음부터 끝까지 팀원들과 동작하는 페이지를 구현해낸 것에 대해 뿌듯함도 있습니다. 리액트에 대한 지식이 적은 상태로 개발을 하다보니 답답함도 많이 느꼈습니다. 앞으로 더 많이 공부해야겠다는 생각이 들었습니다. 이번 프로젝트를 통해서 내가 어떤 부분을 잘하고 못하는지 조금 파악하게 되었고 팀원들과 작업하는 진정한 경험을 한 것 같아서 좋은 시간이었습니다.
😍 강예나 : 리액트 프로젝트를 하면서 자신의 한계와 부딪치는 느낌을 많이 받았습니다. 지금의 프로젝트가 완벽할순없지만 최선을 다한 프로젝트라고 생각합니다. 좌절할때마다 같이 긍정적으로 헤쳐나간 dib프로젝트 동료들이 있어서 끝까지 완주할수있었습니다. 프로젝트를 하면서 스스로 부족한 부분이 무엇인지 알고, 부족한부분을 직접 경험하며 성장한 소중한 시간이었다고 생각합니다.