내배캠 TIL 2023.03.10

오늘 할 일

 

favicon 수정

 

렌더링 최적화 

 

코드 정리

- 컴포넌트화

- 커스텀 훅 

 

배너 progressive 이미지 및 더보기 버튼 주말에 아마도?

 

밥 먹고 발표자료 

멘토링....

 

화면녹화 단축키! 

window  + G

 

 

발표 순서

 

1. 주제 선정 배경, 간단한 서비스 설명

 

2. 서비스 아키텍쳐 

• 프론트
  • (ui는 react로 구성했다. 사실 react도 라이브러리) 
  •  css 라이브러리는 tailwind, styled component를 썼다고 해야함 (얘네도 사실 라이브러리)
• 파이어베이스
• 카카오 맵 API
• 그 외 쓴 라이브러리 
• vercel로 배포 한 후
• useData를 모아서 사용자 친화적이게 기능을 개선했다

3.  주요 기능 시연

 

메인 페이지

• 게시물을 가로로 넘겨가며 보여주기
• 해시태그 리스트까지 내려갔다가 탑 버튼을 눌러서 올라가서 글쓰기 페이지로 이동

 

글쓰기 페이지 

• 대표 이미지
• 제목
• 여행 계획/ 후기 여부
• 지역 // 여기까지는 필수  (다중 선택이 되는 것을 보여준다)
• 해시태그는 선택 (다중 선택이 되는 것을 보여준다)
• 코스 추가 버튼 
• 주소 검색 모달
• 코스 2곳 추가
• 코스 순서 변경
• 지도마커를 클릭하면 카드가 반응, 카드를 클릭하면 마커가 반응
• 메모나 후기를 남길 수 있음
• 게시물 등록 후 상세 페이지로 자동 이동

 

상세 페이지

• 게시물 수정
• 장소에 대한 메모를 간단히 수정해본다.
• 수정 후 아래에 내려가서 좋아요, 댓글 기능을 소개한다.

 

메인 페이지

메인으로 나가서 해시태그 리스트를 클릭해서 검색 페이지로 들어온다.

 

검색 페이지

카테고리를 선택하고 검색한다

useQuery로 이전 검색 내역이 저장된다.

카테고리 초기화 보여준다.

 

유저페이지

• 프로필 수정 버튼, 정보 재설정, 회원탈퇴 버튼 언급
• 프로필 수정 모달 뜨고 프로필 사진과 닉네임 변경
• 정보 재설정은 모달만 보여주고 나간다.
• 내글, 좋아요한 글 모아 볼 수 있다
• 내글보기에서  여행 계획/후기 변경 버튼을 클릭하면 상태만 변경하거나 후기를 쓰러 바로 갈 수 있다고 언급하고 마무리

4.트러블 슈팅

• 로그인 모달이 다른 레이어 가려있거나, 공간이 작아 불편하다는 사용자 피드백이 있어서 페이지로 변경해서 사용자 경험을 개선
• 각자 페이지수 게시물 수 등 데이터들이 달라 각각의 페이지에 페이지네이션의 반복되는 로직이 있었는데, custom hook에 서로 다른 데이터들을 전달해서 코드를 정리했다. 
• state가 계속 변경되면서 리렌더링이 되는 것을 debouncing을 이용해서 마지막 요청을 한 후 시간이 정해진만큼 지나고 나서 state 변경 시켜주어 필요없는 리렌더링을 막아주었다. (좀 더 정확히 알아보고 설명하기)

5. 앞으로의 계획, 잘한 점, 아쉬운 점

추가 구현하면 좋을 기능들을 더 넣을 것이다.

supabase를 써보고 싶다.

 

잘한 점

팀원들과 소통 잘됌

 

못한 점 

개선 전 후에 대한 수치화 된 데이터가 부족해서 비교가 어렵다. 

 

 

개인적으로 이번 프로젝트에서 배워가는 것

 

반응형 css 연습을 많이 할 수 있었다. 

tailwind css에 더 익숙해졌다.

css로 style을  다양하게 넣어보았다.

검색 로직 다양하게 써봄. Firebase query에 대해서 많이 공부함. SQL의 중요함을 알게됌

useEffect로 원하는 데이터를 잘 받아오는 방법 공부가 많이 됌. 내가 원하는 데이터는 어떤 순서로 진행되어서 나에게 도착하는가에 대해 보다 더 알게 되었다. 

 

usefilterData ()

 

성능개선은 라이트 하우스의 빨간색 위주로만 보면 된다.

 

성능이 획기적으로 빨라질 수 있는 방법은?

code spliting 

코드 분할 – React (reactjs.org)

코드 분할 – React

 

 

우리가 얻은 데이터는 개발환경과 프로덕션 데이터가 다 섞여있어서 

 

발표 질문이 어떤게 들어올까?

왜 이 기술을 썼어요?

트러블 슈팅이 과정에 대해서 많이 물어본다. 

흔한 기술 면접, 

 

url을 쳤을 때 클라이언트에 오기까지 어떤 과정 

도메인 네임 서버로 갔다가 우리 서버랑 중개를 해서

어떤 서버 사이드에 따라서 

html 파일, 자바스크립트 파일, 

 

우리가 있는 브라우저에서는 어떻게 보여주는가?

 

면접보기 일주일 이주일 전에 이런 기술 질문 집합들을 쭉 보고 나서 면접으로 꼬우

우리 스파르타 CS 수업 한 번씩 다 보는 것도...

 

이번에 물어오는 면접 질문 모음을 모아서 관리하는 것도 좋아요.