4주차 회의록

회의록

2021-11-15

• 백로그 수정
  • 각자 진행한 내용에 대한 백로그 스프레드 시트 반영
• 리팩토링 관련
  • 공통으로 사용되는 Component들은 Common으로 옮기는 것으로 협의(ex : Modal)
  • Server 측 API 코드는 모두 index 안으로 넣어서 사용하기
• 파일 이름 수정
  • callback -> loading
  • signin -> signup
  • login -> signin
  • plate -> modal
• status 수정
  • server 실패는 404가 아닌 500으로
  • 그 외 상황은 찾아서 넣기
• Server 반환 메시지 정하기
  • res.status(NUM).json({ result: T, msg : "상황에 맞게 메시지 전달" })
  • result에는 실제 요청하는 데이터에 대한 값을 전달함. 해당 Data의 타입은 Typescript에서 공통으로 설정, msg는 상황에 맞게 설정할 것
  • 타입 예시

    • type APIResultType<T> = {
        result: T | null;
        msg: string;
      }

• 로그인, 회원가입 관련 알아두어야 할 사항
  • 로그인 되면 session storage에서 jwt토큰과 recoil에 email, address, image가 저장됨
  • 프론트에서 로그인 됬냐, 안됬냐 확인은 session storage에 jwt토큰 있냐 없냐로 판단하기
  • 이중장치로 로그인 필요한 기능은 API header에 jwt토큰 넣고 로그인 미들웨어 API에 넣기
• 로그인, 회원가입 관련 이슈
  • 주소검색 프론트에서 어떤 정보들을 담고 있을지 (주소만 or 주소, center, code까지 다)
  • 모달 이슈 : 회원가입 페이지에서 x버튼을 누르면 loading page로 가게됨
• 금주 개발 목표
  • 1일 페어프로그래밍 기반 전체 리팩토링(월요일)
    • Backend Response 정립, Frontend 공통 함수, 컴포넌트 분리
    • Backend 로그인 인증 validation 넣기, Frontend session validation 넣기
    • 공통 사용 Type 분리
    • Backend API - Service 코드 분리
  • 기본 기능 금주 화요일 완료 목표
    • 공통
      • Toast Message 기반 알림 설정
    • 사이드바
      • Data fetch
      • Intersection Observer API 적용
      • 최신 순서 Data 중 6개월 이내 데이터만 보여주기
      • 자세히 보기 기능 구현
      • 평점 정보 없는 것 예외 처리
    • 로그인, 로그아웃, 회원가입
      • 로그아웃 구현하기
      • 회원가입 모달주소 해결
      • 회원가입 routeHistory 오류 해결
      • 회원가입 주소검색바 삽입
      • recoil에 임시저장이 아닌 history state를 사용하기
      • 로그인, 회원가입 기타 오타, 오류 수정
    • 프로필 페이지
      • 주소 모달 일반화
      • 드롭다운 스타일 해결
    • 랭킹 페이지
      • 행정단위 선택 버튼
    • 게시글 존폐여부와 새로운 기능
      • 화요일 오후 7시
      • 게시글을 만약 유지한다면 연관지어서 text editor

구현할 기능(feature)

기능	작업 크기	담당자	결과
리팩토링	상	페어
사이드바 후기 불러오기	상	홍종우
사이드바 후기 탭 with 무한 스크롤	중	홍종우
swagger API 명세서 구현	중	홍종우
로그아웃 구현하기	상	문혜현
회원가입 모달주소 해결	상	문혜현
회원가입 routeHistory 오류 해결	중	문혜현
회원가입 주소검색바 삽입	상	문혜현
recoil에 임시저장이 아닌 history state를 사용하기	중	문혜현
로그인, 회원가입 기타 오타, 오류 수정	중	문혜현
랭킹 페이지(모달)	중	송명회
주소 모달 구현	중	홍승용
프로필 페이지 완성	하	홍승용

일자별 목표

• 월
  • 페어프로그래밍 기반 리팩토링 진행
• 화
  • 사이드바 후기 불러오기 및 무한 스크롤 구현(시간 나면 swagger 추가)
  • 주소 모달 일반화 구현
  • 검색기능 UI, 리스트, 이동 구현
  • 랭킹 보기 기능
  • 로그인, 로그아웃, 회원가입 구현 완료하기
  • 프로필 페이지 구현 완료하기
• 수
  • 신규 기능 혹은 게시글 기능 추가 여부 결정 및 개발 진행(업데이트 필요)
• 목
  • 추후 업데이트

2021-11-16

멘토님 문의 사항

• API에서 정보를 줄 때 필요한 정보만 주는 게 좋을까, 아니면 사용될지 모를 정보들을 포함해서 주는 게 좋을까?
• typescript에서 타입을 지정하는 것은 최소 어느 단위로 해주는 게 좋을까요? interface Code {code: string} 이런 단위도 만들어 주어야 하나요?
• declare global 써도 되나요?
• type을 declare module, namespace 방식과 export interface 하는 방식. 어떤 상황에서 어떻게 적절한지 조언을 듣고 싶습니다.

리팩토링 진행 내역

• Backend
  • Type 분리
    • 프로젝트 src 하단에 type.d.ts 파일 별도로 분리
  • customError
    • 200 response가 아닌 경우 모두 try - catch 문 내부에서 Error throw 로 동작
  • res.json 형식 만드는 함수 utils에 만듦
  • Error 처리를 위해 service에서 catch 한 뒤에 err.message를 지정한 뒤, controller에서 try..catch 문 한 번만 사용하되 err.message는 각 오류에 대해 다르게 출력 또는 보내줌
  • @types는 nodemodule에서 이미 지정해주었기 때문에 @myType으로 만듦
  • AdminController message 수정할 것
• Frontend
  • App.tsx modal component로 하지 않으면 오류 발생
  • Modal은 x버튼 클릭 시에만 닫히도록 임시 수정(추후 일반화)
  • Callback -> 이름 변경할 것 Loading 등으로
  • Plate -> Modal로 이름 변경할 것.
  • 현재 모든 type이 global로 설정되어 있는데 이에 대한 고려 필요
  • Page들도 폴더로 구분하여 하나의 index.tsx 파일로 분리
  • Toast Message 설정
  • res status 값에 따라 화면 렌더링 결정하도록 로직 수정
  • Hooks, types 폴더 별도로 생성하여 custom hook은 hooks에 type들은 types 폴더로 분리(enum은 util로 유지)
    • custom hook 이름은 폴더 이름과 되도록 일치

2021-11-17

• interception observer api
  • 상태값을 다 넣는 게 맞는지
  • '내 동네 후기 작성하기' 버튼을 header로 빼면 무한 스크롤에 의해서 발생하는 버그가 없을 것 가다
• useCallback을 쓰는 함수와 Controller에 넣는 함수의 차이?
  • 상태에 따라 내부 로직이 변경되어야 하는 함수는 useCallback을 사용하고 이외 fetch 등 backend와의 통신이 필요한 내용은 controller에 두는 방식?
  • controller 폴더 안에는 어떤 로직을 넣어야 할까?
• 프로필 동 주소 변경, 후기 제출 관련 validation 추가
  • 근 6개월 이내에 변경 했거나 제출 시, 변경하거나 추가 후기를 제출할 수 없도록 설정
• profile 변경 모달
  • dropdown 내용은 absolute를 사용하면 되지 않을까?
• next(error) 통일시키는 것

2021-11-18

• 어디까지 할까?

  • (혜현) 메인 기능까지는 완벽하게 만들고, 게시글은 포기
  • (승용) 동의. 정리할 게 많기도 하고 마지막 주가 이벤트가 많아 개발을 크게 하지 못할 것
  • (명회) 동의. 성능 개선을 노력하자
  • (종우) 동의. 성능 개선 및 Refactoring 이 중요

• 성능 개선 도전할 수 있는 부분 고려

  • server docker
  • splitting code
  • mongodb replica
  • elastic search
  • jwt refresh token(문혜현)
  • Mongo db ncloud 옮기기 && Map path정보 인메모리로 관리
  • refactoring
  • 웹 성능 최적화(routing 최적화)
    • 이전 내역 git reset하여 수치화
  • 테스트 코드 작성(프론트, 백엔드)
  • SWR?
  • 새로고침하면 recoil 날아가는 것에 대한 처리 (문혜현)

• 아직 미완성(11/21까지 완성, 주말야근 확정)

  • 6개월 내 후기 재작성, profile 업데이트 금지? (문혜현)
  • 사이드바 후기글 (홍종우)
  • 후기글 update, delete (문혜현)
  • 해시태그 (홍승용)
  • swagger API (홍종우)
  • 캐싱 SWR (송명회)
  • 더미데이터

• 이슈들

  • 사이드바 열릴 때 이전 지역의 리뷰가 유지되는 문제
  • 헤더 버튼 시, PrivateRoute로 이동 시에 버튼을 2회 클릭해야 하는 이슈
  • 고화질 이미지의 경우 Profile이 정상적으로 변경되지 않는 이슈
  • colorhash 라이브러리 랜덤값을 넘겨서 색상이 중복되지 않도록 설정
  • 주소창에 직접 라우트를 입력해서 접속하면 404 Not Found 페이지가 나오는 이슈

• 해시태그 기능

  • 해시태그 입력 바를 별도로 만들기 vs 기존 editor 내에 넣기
    • Instagram은 일단 editor에서 # 입력 후 space 바로 하면 모양이 변경되도록 하는 방식을 차용 중
  • 해시태그가 순 자연어인 경우, 해당 값을 모두 DB에 저장하고 counting을 위해 1개당 N회 비교 연산을 해야 하는데 그에 대한 성능이 이슈가 될 수 있을 것으로 보임

• swagger API

  • process.env를 사용해서 swagger api 개발, 배포 버전 파일이름을 다르게 주어 사용하기

2021-11-19

• 11월 19일 기술공유
  • DB 최적화 : 8시 밤샘각오로 하면 될 것 같긴 함
    • 데이터의 구조 설명
    • MySQL vs NoSQL
    • mongodb 설계(재귀 -> 병렬, embedded)
    • mongodb indexing
      • index
      • text index
      • compound index
    • 최적화 과정 (처음 사이트 들어갔을 때 지도 뜨는 것은 기본 영상)
      • 디바운싱(시도) + 드래그 앤 드랍 : console log
      • fetch 요청 줄이기(같은 지역일 경우 fetch 안 보냄) : console.log(횟수, 축척에 따른 다른 지역이라도 같은 폴리곤 인거?)
      • simplify.js : postman
      • LFU 캐싱 : time console log
      • Atlas region 문제(America -> Japan -> NCloud) : america, japan 지도 불러오는 속도 비교하는 gif, postman으로 값 불러올 때 시간 차이 사진
    • 향후 발전 과정
      • 인 메모리
      • mongodb replica
      • 캐싱 SWR
  • MySql vs MongoDB(NoSQL)
    • MongoDB의 장점
    • MongoDB만의 index
    • 이런 상황이라면 mongodb를 고려해라
    • mongodb 설계에서 고려해야 할 점