[항해99] 실전프로젝트 26일차 TIL

작업한 것

• 동영상 페이지 UI 및 기능 구현

배운 것

• 프로젝트 어필 포인트

  1. 개발도구 사용의 최소화

     • 리덕스 툴킷, 리덕스 사가, 테일윈드 등 당장 도입하기에 코드의 흐름을 가린다고 판단한 도구는 가급적 사용을 지양함
     • 개발속도를 맞추기 위한 MUI, react-form, CRA와 같은 도구 최소한으로 사용.

  2. 원활한 협업을 위한 src디렉토리 관리

     • api : Axios 통신을 위한 코드
     • components : 페이지를 구분하지 않는 컴포넌(Header, PageLoader, 게시글 작성버튼) 혹은 반복 사용하는 컴포넌트 코드
     • constants : 상수(액션타입, 컬러셋, 카테고리종류/서울시 지역구 정보 등 고정 데이터값) 코드
     • redux : 스토어, 리듀서, 액션 생성함수
     • routes : 페이지 및 페이지CSS 코드
     • services : 미들웨어 동작 코드

  3. 실시간 채팅 구현

     • SockJs를 활용하여 웹소켓API 통신 및 웹소켓 미지원 브라우저 대응
     • STOMP를 활용하여 메세지 전달, 채팅방 개설

  4. 무한스크롤 구현

     • 화면 렌더링 속도 개선을 위해 무한스크롤 추가
     • 렌더링 속도 개선을 위한 레이지 로딩(구현 예정)
     • 게시물 리스트 페이지 무한스크롤 유지(구현예정, 게시물상세페이지 / 마이페이지 등 페이지 이동 후 돌아왔을 때)
     • 목적에 따른 페이징 방식 다양화
       1. Intersection Observer API 활용(게시물 리스트 페이지)
       2. 페이지넘버 값 감지(메인페이지 하단 영상 리스트)
       3. CSR 페이지네이션(마이페이지)

  5. 유저 사용감 고려한 UX, UI 적용

     • 유저 만족도 향상을 위한 lottie-web(추가 예정)
  • 어필 포인트를 문제 > 방법나열 > 비교 > 선택 > 근거정리의 단계로 정리하기

이슈

• 깃헙, 노션 정리하기
• 4월 5일 맞춰서 개발 완료하기

마무리

마음이 급할수록 정리, 정리, 정리