👩🏻💻 Today Learn
- 5주차 멘토링
- 재배포 및 도메인등록
💡 멘토링 내용 정리
우리 프로젝트에서 기술적으로 강점을 삼을 만할 항목
- optimistic updates
- Real-time 1:1 chat
- Parallel Routes 이용한 모달띄우기
- App Router의 서버 컴포넌트를 이용한 SEO 최적화
- supabase 사용으로 옵티멀 패치 구현
프로젝트에 적용했던 핵심 기술 목록과 각 기술을 도입하게된 의사결정 과정
모든 이야기를 요구사항/선택지/의사결정/근거로 준비하세요.
여러분이 어필해야 하는 것은 내가 엔지니어로서 자질이 있다는 것입니다.
엔지니어는 문제를 해결하는 사람입니다. 따라서 엔지니어는 우선 문제 정의를 정확하게 하는 것이 중요합니다.
어떤 요구사항이 있었는지, 이 요구사항을 구현할 수 있는 어떤 선택지들이 있었는지, 이 선택지들 중에서 어떠한 이유와 근거로 어떤 선택지를 결정하였는지 라는 이야기가 반드시 준비되어야 합니다.
| 요구사항 | 선택지 | 핵심 기술을 선택한 이유 및 근거 |
|---|---|---|
| optimistic updates | - 캐시 무효화 후 보여주는 것 | 즉각 반영되지 않으면 사용자가 원치 않은 동작을 하는 것을 막기 위해 선택하였다. |
| 유저 정보에 따른 분기처리 | 페이지/컴포넌트 자체에서 분기처리 / middleware를 사용한 분기처리 | 코드의 중앙관리화와 보일러 플레이트 감소,컴포넌트 자체에서 분기처리 시 브라우저상에서 분기처리 될 때 보이는 미세한 깜빡임 등을 방지하기 위해 middleware를 사용하여 분기처리하였다. |
| SEO 최적화 | Page Router / App Router | App Router는 서버 컴포넌트가 존재한다는 것과 컴포넌트 단위로 렌더링 대상을 구성할 수 있기 때문에 선택하였다. |
| 커뮤니티 뉴스 피드에서 게시글을 클릭하면 상세 정보 표시 | 상세 페이지로 이동 / 모달 띄우기 (패러렐 라우트, 인터셉트 라우트) | 상세 페이지로 이동하게 되면 피드에서 보여지는 많은 글들을 볼 수 없다. 여러개의 글 중에서 자유롭게 탐색을 하고 싶은 사용자 경험을 생각해 모달로 구현하였다. URL로 접근할 때도 모달 컨텐츠를 공유하여 사용자가 항상 같은 컨텐츠를 볼 수 있도록 하기 위해 패러렐 라우트와 인터셉트 라우트 사용. |
| 지도API + 오픈데이터 를 이용한 정보제공 | 전국 데이터를 한번에 불러와서 보여준 후 검색 및 카테고리 분리 / 화면이동에 따라 해당영역에 보여지는 데이터만 보여주기 | 해당 서비스의 중고거래나 유기견공고 페이지 등에서 이미 다양한 필터링 및 검색기능을 제공하고 있었다. 그리고 유저들이 지도를 이용할때는 나의 현재 위치를 기반으로 주변에 어떠한 시설이 있는지에 대한 정보를 더 원할것이라고 판단하였다. 따라서 onBoundsChanged 를 활용하여 영역이동에 따라 화면영역에 있는 정보만 보여주기로 결정하였고 추가로 다른지역에 대한 정보는 간단한 키워드 검색으로도 가능하게 하였다. |
| Real-time 1:1 chat | 중고거래 시 채팅으로 대화 주고받기 / 댓글로 대화 주고받기(댓글, 대댓글) | 중고거래를 할 때에는 판매자, 구매자 간의 1:1 실시간 소통이 중요하기에 supabase의 real time 기능을 이용하여 구현할 수 있는 채팅을 선택 |
이번 주 한 일
- 컴포넌트 분리 및 커스텀훅 만들기
- 메인페이지 이미지 wepp 변경
사용성 테스트 결과를 토대로 반영해야 할 점
- 로딩 속도 개선을 위한 이미지, 폰트 의 최적화
- 멍스타 그램 댓글기능
- 지도페이지에서 현재위치 안내 및 추가적인 기능요구
- 중고물품 상세페이지에서 채팅버튼 눌렀을 때 기존 채팅내역이 있을 시에 해당 채팅방으로 이동
- 견주들 간의 커뮤니티 기능
| 우선순위 | 개선 및 추가사항 | 마감일자 |
|---|---|---|
| 1 | 초기 로딩시간이 길다는 피드백 다수 -> 이미지 및 폰트 최적화 진행 | 2024.02.06 |
| 2 | 멍스타 그램 댓글기능 | 2024.02.03 |
| 3 | 지도페이지에서 현재위치 안내 및 추가적인 기능요구 | 2024.02.03 |
| 4 | 중고물품 상세페이지에서 채팅버튼 눌렀을 때 기존 채팅내역이 있을 시에 해당 채팅방으로 이동 | 2024.02.03 |
| 5 | 유기견 북마크 기능 | 최종발표 이후 예정 |
| 6 | 견주들 간의 커뮤니티 기능 | 최종발표 이후 예정 |
✍🏻 회고
최종프로젝트의 마무리를 앞두고 마지막 멘토링을 진행하였다. 마무리를 위한 피드백과 함께 다행하게도 잘 하고 있다는 얘기도 해주셨다. 이제 발표만 남긴 했지만 발표가 끝나도 추가적인 기능이나 최적화, 오류수정 등 더 다듬어보기로 하였다!
웰씽킹_나는 경쟁력을 갖춘 FE개발자로 성장할 것이다.