[WIL] 내일배움캠프 열한 번째 주_React Native 프로젝트 결과물 정리

 

프로젝트 소개

앱 이름 : MBTI Types

앱 설명 : MBTI 타입에 따라 의견을 나눌 수 있는 커뮤니티성 React Native App

• 커뮤니티: MBTI 타입과 관련된 게시글을 작성 후 댓글과 좋아요 버튼을 통해 공감을 받을 수 있고, MBTI필터를 통해서, 해당 MBTI의 글 만을 볼 수 있습니다.
  • ex) 카테고리 [ISFP]: 약속 취소되면 오히려 좋은 거 다들 공감하시나요?ㅎㅎ
• 상황문답: 특정 상황을 제시하고 댓글에 각 MBTI 별 반응을 모아서 볼 수 있다.
  • ex) 친구에게 “네 숙제 베껴도 돼?”라는 문자를 받는다면?
• 마이페이지: 내가 작성한 글과 내가 좋아요 한 글을 볼 수 있다.

 

프로젝트 정리본 노션 https://green-number-f91.notion.site/MBTI-Types-349eb4314f874d7ea78e90e6c7cd9546

GITHUB https://github.com/sukpo61/Mbti_Types

S.A https://green-number-f91.notion.site/S-A-a45eb3327c774333a38c76ce9eb67cf0

 

 

EXPO 배포 QR코드

---

튜터님 피드백

1. 디자인이나 색이 깔끔하고, 컨셉이랑 잘 어울려요!
2. 로그인 시, 유효성 검증이 잘 들어가 있습니다.
3. 게시글이 적을 때는 top 버튼이 활성화되지 않는 것이 낫겠어요.
4. 게시글이 입력되고 나서, 최신글이 가장 위로 올라가게끔 잘 구현하셨어요. 페이지가 로딩 중일 때 지루하지 않게 보여주는 게 있으면 좀 더 좋지 않을까 싶습니다.
5. [수정하기] 누르면 2초 정도 딜레이가 있다가 넘어가게 돼요. UX 적으로 좋지 않죠.
6. 좋아요 기능까지 구현하셨네요! 잘하셨어요.
7. 마이페이지에 가면, 좋아요 한 글과 내가 작성한 글을 보여주는데, DB에서 어떠한 방식으로 읽게끔 했는지가 궁금하네요 나중에 따로 와서 알려주시면 감사하겠습니다.
8. 보통 댓글은 댓글이 크고, 닉네임이 작죠...ㅎㅎ
9. 전체적으로 필수기능이 적절하게 잘 들어간 프로젝트로 보여집니다. 고생하셨어요.
10. 주어진 시간 안에서 프로젝트하는 것이 어렵다는 것은 이해하지만, 좀 더 나은 구조를 지향하면서 프로젝트를 했으면 하는 바람이에요. 스타링 관련 컴포넌트는 따로 뺀다던지, 한눈에 프로젝트 구조를 볼 수 있으면 좋겠어요. 주석 등 협업을 위해 필요한 부분들이 많이 누락되어 있어 보입니다.
11. useEffect, useFocusEffect, useCallback 등 다양한 hook을 적절하게 사용해서 원하는 기능을 구현했어요. 활용능력이 뛰어난 것 같습니다.
12. 어떠한 데이터를 CUD할 때, 검증 로직을 나름 꼼꼼히 넣은 것으로 보여요.
13. useQuery 뿐만 아니라, useMutation도 다양하게 활용했네요. 이번 프로젝트를 통해서 개발 실력적으로 정말 많이 발전한 조 인 것 같습니다.
14. optional chaining을 사용하여 발생 가능한 오류를 방지하였으나, 만일 너무 많이 사용하게 되면 정작 실제로 발생하여야 하는 오류에 오류가 발생하지 않아 디버깅이 어려울 수 있음을 명심해야 합니다 :)

 

---

추가 구현 혹은 수정하고 싶은 부분

• 컴포넌트의 재사용성을 높이지 못한 것이 너무 아쉽다! 이번에 게시판을 커뮤니티와 상황문답이라는 두 가지 컨셉으로 잡아서 메인이나 디테일, 글 수정 삭제 스크린을 하나만 만들고 재사용하고 싶었는데 그럴 시간이 없어서 결국 거의 동일한 구조의 스크린이 각각 두 개씩 만들어졌다. 글 작성할 때도 카테고리를 선택할 수 있게 하고 싶었는데 아쉽다~~
• style.js 나누지 않은 것으로 피드백을 받았는데 이건 당연히 나누는 게 좋았을 듯하다.
• 주석이 부족하다는 피드백을 매번 받는데 왜 개선되지 않는 걸까.. 다음 프로젝트 때는 PR하면서 코드리뷰할 때 주석까지 꼼꼼하게 봐야겠다!
• 메인에 본문 리스트를 불러올 때 로딩 중 표시를 넣어주는 걸 시도했다가 실패했었는데 결국 이 부분도 피드백을 받았다. 다음에는 쿼리를 이용해서 로딩 중이라는 것을 사용자들이 인식할 수 있도록 섬세하게 구현해 봐야겠다.

 

---

 프로젝트 기간 동안 TIL 목록 

[TIL] 내일배움캠프 React 과정 2023.01.06_네이티브 팀 프로젝트 S.A

[TIL] 내일배움캠프 React 과정 2023.01.07

[TIL] 내일배움캠프 React 과정 2023.01.08

[TIL] 내일배움캠프 React 과정 2023.01.09

[TIL] 내일배움캠프 React 과정 2023.01.10

[TIL] 내일배움캠프 React 과정 2023.01.11

[TIL] 내일배움캠프 React 과정 2023.01.12

[TIL] 내일배움캠프 React 과정 2023.01.13

 

---

일주일 동안 함께해서 정이 든(?) 공식 문서

https://reactnavigation.org/docs/bottom-tab-navigator/

https://reactnative.dev/docs/scrollview

 

앱 UI 참고하기 좋은 링크

https://wwit.design/

https://mobbin.com/browse/ios/apps#

 

무료로 로고 만들었던 사이트

https://logo.com/