✈ travel-here는 전 세계의 여행후기글을 볼 수 있는 여행후기 플랫폼입니다.
- 전상우(팀장)
- 김현수
- 박현정
- 임상기
$ npm install
$ yarn install
$ yarn start📦public
┗ 📜index.html
📦src
┣ 📂assets
┃ ┗ 📂images
┃ ┃ ┣ 📜background.jpeg
┃ ┃ ┣ 📜blur.png
┃ ┃ ┗ 📜logo.png
┣ 📂components
┃ ┣ 📂Category
┃ ┃ ┣ 📜Category.jsx
┃ ┃ ┣ 📜Category.style.js
┃ ┃ ┗ 📜CategorySkeleton.jsx
┃ ┣ 📂Comment
┃ ┃ ┣ 📜Comment.jsx
┃ ┃ ┣ 📜Comment.style.js
┃ ┃ ┣ 📜CommentList.jsx
┃ ┃ ┗ 📜styleConstants.js
┃ ┣ 📂GreetingCard
┃ ┃ ┣ 📜GreetingCard.jsx
┃ ┃ ┗ 📜GreetingCard.style.js
┃ ┣ 📂Header
┃ ┃ ┣ 📜Header.jsx
┃ ┃ ┗ 📜Header.style.js
┃ ┣ 📂Loading
┃ ┃ ┗ 📜Loading.jsx
┃ ┣ 📂LoginHelp
┃ ┃ ┣ 📜LoginHelp.jsx
┃ ┃ ┗ 📜LoginHelp.style.js
┃ ┣ 📂LoginModal
┃ ┃ ┣ 📂footer
┃ ┃ ┃ ┣ 📜LoginFooter.jsx
┃ ┃ ┃ ┗ 📜LoginFooter.style.js
┃ ┃ ┣ 📂header
┃ ┃ ┃ ┣ 📜LoginHeader.jsx
┃ ┃ ┃ ┗ 📜LoginHeader.style.js
┃ ┃ ┣ 📜LoginModalOpen.jsx
┃ ┃ ┗ 📜LoginModalOpen.style.js
┃ ┣ 📂Logo
┃ ┃ ┣ 📜Logo.jsx
┃ ┃ ┗ 📜Logo.style.js
┃ ┣ 📂Mypage
┃ ┃ ┣ 📂bookmark
┃ ┃ ┃ ┣ 📜Bookmark.jsx
┃ ┃ ┃ ┗ 📜Bookmark.style.js
┃ ┃ ┣ 📂comment
┃ ┃ ┃ ┣ 📜Comment.jsx
┃ ┃ ┃ ┗ 📜Comment.style.js
┃ ┃ ┣ 📂info
┃ ┃ ┃ ┣ 📜Info.jsx
┃ ┃ ┃ ┗ 📜Info.style.js
┃ ┃ ┣ 📂Password
┃ ┃ ┃ ┣ 📜Password.jsx
┃ ┃ ┃ ┗ 📜Password.style.js
┃ ┃ ┣ 📂post
┃ ┃ ┃ ┣ 📜Post.jsx
┃ ┃ ┃ ┗ 📜Post.style.js
┃ ┃ ┣ 📜Mypage.jsx
┃ ┃ ┣ 📜Mypage.style.js
┃ ┃ ┗ 📜styleConstatns.js
┃ ┣ 📂NavBar
┃ ┃ ┣ 📜NavBar.jsx
┃ ┃ ┗ 📜NavBar.style.js
┃ ┣ 📂NavLinks
┃ ┃ ┣ 📜NavLinks.jsx
┃ ┃ ┗ 📜NavLinks.style.js
┃ ┣ 📂Post
┃ ┃ ┣ 📂PostSlider
┃ ┃ ┃ ┣ 📜ContentPlaceholder.js
┃ ┃ ┃ ┣ 📜PostSlider.jsx
┃ ┃ ┃ ┗ 📜PostSlider.style.js
┃ ┃ ┣ 📜NoneMember.jsx
┃ ┃ ┣ 📜Post.jsx
┃ ┃ ┣ 📜Post.style.js
┃ ┃ ┗ 📜styleConstants.js
┃ ┣ 📂PostCard
┃ ┃ ┣ 📜ContentPlaceholder.js
┃ ┃ ┣ 📜PostCard.jsx
┃ ┃ ┗ 📜PostCard.style.js
┃ ┗ 📂Write
┃ ┃ ┣ 📂WriteBtn
┃ ┃ ┃ ┣ 📜WriteBtn.jsx
┃ ┃ ┃ ┗ 📜WriteBtn.style.js
┃ ┃ ┗ 📂WriteModal
┃ ┃ ┃ ┣ 📜UpdateModal.jsx
┃ ┃ ┃ ┣ 📜WriteModal.jsx
┃ ┃ ┃ ┗ 📜WriteModal.style.js
┣ 📂hooks
┃ ┗ 📜useAuth.js
┣ 📂pages
┃ ┣ 📂Board
┃ ┃ ┣ 📜Board.jsx
┃ ┃ ┗ 📜Board.style.js
┃ ┣ 📜CategoryList.jsx
┃ ┣ 📜Home.jsx
┃ ┣ 📜Login.jsx
┃ ┣ 📜LoginFind.jsx
┃ ┣ 📜MyPage.jsx
┃ ┣ 📜NotFound.jsx
┃ ┣ 📜NotFound.style.js
┃ ┗ 📜Write.jsx
┣ 📂store
┃ ┣ 📂apis
┃ ┃ ┣ 📜board.js
┃ ┃ ┣ 📜comment.js
┃ ┃ ┣ 📜delete.js
┃ ┃ ┣ 📜post.js
┃ ┃ ┣ 📜postLike.js
┃ ┃ ┗ 📜userLike.js
┃ ┣ 📂modules
┃ ┃ ┣ 📜board.js
┃ ┃ ┣ 📜bookmark.js
┃ ┃ ┣ 📜category.js
┃ ┃ ┣ 📜comment.js
┃ ┃ ┣ 📜delete.js
┃ ┃ ┣ 📜login.js
┃ ┃ ┣ 📜mypageBookmark.js
┃ ┃ ┣ 📜mypageComment.js
┃ ┃ ┣ 📜mypagePost.js
┃ ┃ ┣ 📜nav.js
┃ ┃ ┣ 📜postLike.js
┃ ┃ ┣ 📜user.js
┃ ┃ ┣ 📜userLike.js
┃ ┃ ┗ 📜view.js
┃ ┗ 📜index.js
┣ 📂styles
┃ ┣ 📜Background.js
┃ ┗ 📜GlobalStyle.js
┣ 📂utils
┃ ┗ 📜getDate.js
┣ 📜App.js
┣ 📜auth_service.js
┣ 📜firebase.js
┣ 📜history.js
┗ 📜index.js
https://www.youtube.com/watch?v=E1qkUKJi3Ho
상세보기
상세보기
상세보기
| 팀원 | 아쉬운 점 | 개선할 점 |
| 박현정 | 역할 분배를 페이지별로 했더니 특정 사람에게 너무 많은 역할이 주어졌습니다. | 개발을 시작하기 전에 기능별 정의를 분명하게 하고 그 기능별로 역할 분배를 해야겠다고 느꼈습니다. |
| 리덕스의 action이 너무 많아진 느낌입니다. | 개발을 하면서 그때그때 중복된 부분을 정리해야할 것 같습니다. | |
| 데이터를 정의할 때 어떤 type의 값을 넣을건지를 정확히 정하지 않아 나중에 수정할 일이 많았습니다. | 개발 전 단계에서 데이터타입을 정확하게 해야겠다고 느꼈습니다. 예를 들어 post id는 string타입의 date.now로 하자는 식으로요. | |
| firebase와 redux상태간의 정확한 정리가 없어 헷갈리는 일이 많았습니다. | firebase에서 받아오는 사용자와, redux에서의 사용자를 서류상으로 정확하게 명시해놓고 각각 어떻게 쓸것인지 팀원들과 정의하는 시간을 가져야할 것 같습니다. | |
| 코드리뷰가 적극적으로 이루어지지 않았던 것 같습니다. 제가 짠 코드가 괜찮은 코드인지 아닌지를 판단하기 어려웠고, 팀원이 짠 코드를 제대로 파악하기 힘들었습니다. | 팀프로젝트이니만큼 프로젝트에 사용된 코드에 모두가 책임감을 가져야한다고 생각합니다. 그 책임감을 지려면 어느정도 코드리뷰에 강제성이 있어야될 것 같습니다. | |
| 김현수 | 정확한 디자인이 없었던 점 | figma를 사용해서 대략적인 디자인이 있었지만 기능 및 세부사항들을 개발하면서 추가하여 프로젝트의 기간이 늘어지는 상황이 됐습니다. 시간이 좀 걸리더라도 기능별 세부사항과 디자인을 확정시켜두고 개발하는 방법이 좋을 것 같습니다. |
| 대화의 부재 | 프로젝트를 진행할 때 서로 도움이 될 수 있는 부분이 있었지만 내꺼 하기에 바쁘다는 핑계가 있었던 것 같습니다. 개발 스케쥴을 내 작업에만 맞췄던 것 같습니다. | |
| 다른 사람의 코드를 확인하지 못함 | 흐름정도만 파악한 뒤 정확한 동작을 확인하지 않았습니다. 더 세심하게 보는 습관을 가져야 할 것 같습니다. | |
| 전상우 | ||
| 코드 리뷰의 문제점 | 코드 리뷰 담당자를 한 명씩 정해서 이상이 있으면 연대 책임시키기 | |
| 너무 많은 state | 추적 중인 state가 15개이다. 비슷한 위치에 놓인 컴포넌트끼리는 state를 통하해도 좋지 않을까? 예를 들어 mypage, board, post 3개로. | |
| 너무 많은 Boilerplate | redux 자체의 문제점. redux toolkit을 사용하는 것이 좋을 듯 하다. 최근에는 비동기적인 작업을 redux-saga 대신에 react-query, swr, apollo로 대신한다고 하니 다음 프로젝트에서는 이를 활용해보는 것이 좋을 듯 하다. | |
| 서로 다른 코딩 방식 | 3가지 방법으로 이를 해결할 수 있을듯 하다. 첫 번째는 ESLint와 Prettier을 맨처음 세팅할 때 설정하는 것. 두 번째는 변수명을 좀 더 명확하게 짓는 것. 세 번째는 주석을 좀 더 명확하게 다는 것 | |
| 임상기 | 해결되지 않는 문제를 혼자 끙끙 앓고 있던 것이 아쉽습니다. | 모르는 것들은 팀원들과 상의하면서 프로젝트를 하면 좋을 거 같습니다. |
| 프로젝트 기간을 정확히 정하지 않고 계속 연장했던 부분이 아쉽습니다. | 프로젝트의 우선순위를 두어 필요한 기능을 먼저 구현하여 완성하고, 나머지 기능들은 그 다음에 완성을 해나가면 좋을 것 같습니다. | |
| 리덕스 강의는 들었으나 적용을 하지 못한 점이 아쉽습니다. | 프로젝트 끝나고 개인적으로 리덕스를 적용하면서 이해를 더 높여야겠습니다. | |
| 영어 실력 부족. 번역기를 쓴다지만 어느 정도 영어 실력은 있으면 훨씬 수월할 것 같습니다. | 영어 원문을 보고 해석하는 연습을 조금씩이라도 해야 될 것 같습니다. | |
| *** 향후 계획 *** Node.js도 배워 볼 계획입니다. 파이어스토어가 아닌 Node.js를 통해서도 백엔드를 구현해볼 수 있도록 공부할 계획입니다. |
||