5주차 회의록

2021-11-22

• 금주 목표

  • 이슈 해소 우선 진행 후 테스트 및 성능 개선 진행

• 해소할 이슈 내역

  • 헤더 버튼 시, PrivateRoute로 이동 시에 버튼을 2회 클릭해야 하는 이슈(마스터님께 질문) (홍승용)
  • 고화질 이미지의 경우 Profile이 정상적으로 변경되지 않는 이슈 (홍승용)
  • colorhash 라이브러리 랜덤값을 넘겨서 색상이 중복되지 않도록 설정 (홍승용)
  • 주소창에 직접 라우트를 입력해서 접속하면(ranking) 404 Not Found 페이지가 나오는 이슈 (송명회)
  • 공동 순위 처리 (송명회)
  • 여러개의 쿼리가 뭉탱이로 되야되는 경우를 찾아서 session 사용하여 transaction으로 만들기(Atomicity 보장) (홍종우)
  • 내가 쓴 후기 사이드바 렌더링 (홍종우)
  • 후기 Update / Delete 기능(문혜현)
  • refresh token db에 해시로 저장하기(문혜현)
  • 새로고침하면 recoil 날아가는 것에 대한 처리 (문혜현)
  • 6개월 이내 주소 변경, 후기 재작성 금지
  • 에러 처리 한곳으로 모으기 (리팩토링)
  • 별 스타일 (레이어간 높낮이가 안맞음 - OS 차이?)

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

docker (홍승용) mongodb replica (홍승용) Mongo db ncloud 옮기기 && Map path정보 인메모리로 관리 (홍승용) splitting code (홍종우) ncloud code_deploy (홍종우) jwt refresh token(문혜현) 웹 성능 최적화(history routing 최적화)(문혜현) SWR (송명회) React.memo (송명회) elastic search refactoring

테스트 코드 작성(프론트, 백엔드) : 토요일(평일과 똑같이)

리팩토링할 내용

• Backend
  • Type 분리
    • 프로젝트 src 하단에 type.d.ts 파일 별도로 분리
  • customError
    • 200 response가 아닌 경우 모두 try - catch 문 내부에서 Error throw 로 동작
  • res.json 형식 만드는 함수 utils에 만듦
  • Error 처리 하나의 middleware로 진행되도록 리팩토링
  • @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 이름은 폴더 이름과 되도록 일치
  • useCallback, useMemo 모두 적절한 적용

구현할 기능/해소할 이슈

기능	우선순위	담당자	결과
사이드바 내가 쓴 후기 UI	상	홍종우
MongoDB 세션 기반 Multi Query 적용	상	홍종우
swagger API 명세서 개선(Prod/Dev)	하	홍종우
Eject / Code Splitting	중	홍종우
NCloud Code Deploy 적용	하	홍종우
주소창에 /ranking 입력해서 접근할 경우 404 이슈	상	송명회
랭킹 모달 공동순위 표시되도록 수정	중	송명회
마커 정보 불러오기 SWR 적용	중	송명회
React.memo 컴포넌트 캐싱	하	송명회
프로필 이미지 validation	상	홍승용
폴리곤 색상 겹치지 않기(알고리즘)	상	홍승용
PrivateRoute 버그 해결	상	홍승용
docker 적용	중	홍승용
mongodb replica	중	홍승용
map data in-memory	중	홍승용
refresh token db 저장	중	문혜현
history routing 재렌더링 최적화	중	문혜현
recoil 새로고침 대신 storage 또는 fetch 사용	상	문혜현

멘토님

• id, address 등의 recoil 값이 새로고침하면 사라지는데, 이를 유지하기 위해 session storage, local storage를 사용하려 합니다. 보안의 이유로 사용해도 되나요?
• useCallback에 불 필요해 보이는 dependency를 모두 넣어주는 것이 맞는가요?
• Modal URL 이동 후 Modal을 제거하면 Router를 한 번 타게 되는데, 이 때 (상태가 변경되지 않음에도) 전체 페이지가 재렌더링 되는 현상을 막는 방법?(크롱님 문의드리자!)
• 헤더 버튼 시, PrivateRoute로 이동 시에 버튼을 2회 클릭해야 하는 이슈(크롱님 문의드리자!)
• MongoDB Map document 한 번에 업데이트 하는 방법?

2021-11-23

리팩토링할 내용

• Backend
  • Type 분리
    • 프로젝트 src 하단에 type.d.ts 파일 별도로 분리
  • customError
    • 200 response가 아닌 경우 모두 try - catch 문 내부에서 Error throw 로 동작
  • res.json 형식 만드는 함수 utils에 만듦
  • Error 처리 하나의 middleware로 진행되도록 리팩토링
  • @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 이름은 폴더 이름과 되도록 일치
  • useCallback, useMemo 모두 적절한 적용
  • useHistoryRouter에서 usehistory만 반환하기(history는 사용되는 곳이 없다)
  • recoil을 통해 login 여부 확인하도록 변경(새로고침 시, recoil값 유지하도록 fetch 하는 코드 우선 적용)

모달 라우팅 버그

• 해결방안들
  현재 Switch 구조는 마지막 NotFoundPage를 보여주기 위한 구조라고 볼 수 있음.(Switch는 default가 NotFoundPage이기 때문) background가 있는 구조는 주소창에 바로 입력된 경우를 처리할 수없음.(background가 없기 때문) 아예 모든 페이지를 Switch구조를 빼고 1차원으로 넣어줌 -> 현재 우리 구조를 너무 바꿔야함 🙅‍♂️ Switch구조에 맞게 모든 path를 계층적으로 만듬 Ex: '/' -> '/map'으로 바꾸면 모든 알맞은(우리 페이지에 있는)페이지를 Switch에서 걸리고, 그 아래에서 background로 걸리게 할 수 있음 -> background가 없는 주소창에 직접 입력한 경우 Switch아래에 있는 {background && ...}이 나오지 않음 🙅‍♂️ 현재 구조를 가져가고, NotFoundPage도 보여주면서, 문제를 해결하기 위해서는 Switch 마지막에 default Route에서 검증을 한번 해주어야함 NotFoundPage를 보여주기 전에, exception path들을 확인 없으면 NotFoundPage 있으면 파싱을 통해서 background를 넣어서 redirect
• 결론 사실 제일 우아한 방법은 '/'를 대문 페이지와 같이 만들고(3초정도 있다가 옮겨주는) 모든 path를 계층적으로 바꾼후에, background가 필요한 페이지는 적절한 background를 넣어서 redirect해주는 방법같다. 하지만, 너무 바꿔야할게 많으므로 현재 방법을 선택

2021-11-24

• 사용자 로그인 연장 체크를 위한 Backend 요청이 매번 진행될 필요가 있는가?
  • 신원체크가 필요한 API 요청을 보냈을때 그제야 인증이 유효하지 않다고 알려주는 것 vs 사용자 인증이 필요한 기능에 진입할 때마다 백엔드에 물어보는 것
  • SSR과 CSR의 괴리같다.. SSR은 페이지 요청할 때마다 자연스럽게 확인이 되니..

문제 상황 2. (문제상황) HTTPS 통신에서 Cookie(HTTP Only 옵션)를 통해 access token을 전달 시, 자바스크립트로 접근할 수 없어 언제 만료가 되는지 알 수 없으므로 Private Routing을 통해 로그인 필요 페이지 접근 시마다 백엔드 로그인 유효성을 검사하려 합니다 -> 이 때, 백엔드 로그인 유효성 결과를 응답 받는 동안 React에서는 Loading 페이지를 보여주다가 유효성 결과에 따라 페이지를 렌더링 시키는 방식 또는 일단 렌더링 시키고 백엔드 응답이 비동기적으로 도착했을 때, 다시 재렌더링 해주는 방식의 2가지를 생각했습니다. 전자의 경우 매번 로딩 페이지를 보여주어야 하고 후자의 경우 들어가면 안되는데 이미 들어가버린 상황이 염려스럽습니다.

const PrivateRoute: React.FC<RouterProps> = ({
  component: Component,
  ...rest
}) => {
  const [auth, setAuth] = useRecoilState(authState);

  return (
    <Route
      {...rest}
      render={(props) =>
        백엔드에서 비동기로 가져오는 로그인 여부 ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: '/map/signin',
            }}
          />
        )
      }
    />
  );
};

3. 매번 Private Route를 경유할 때마다 서버에 access token 만료 여부를 확인해야 하는데, 이 방식이 맞는지 궁금합니다. 혹은 서버에서 만료 시간 데이터를 추가로 전달하여 프론트엔드에서 만료시간만 localStorage에 따로 저장해서 만료되기 30초 전에 서버에서 새로운 accessToken을 받는 방식이 더 나을까요?
4. 참고한 블로그에서 refresh token은 secure, http only 옵션을 사용하고, access token은 header에 넣어서 사용하는 방식이었습니다. acces token도 secure, http only 형식으로 넣어주면 안되나요? 다른 예시들에서도 refresh token에만 옵션을 주는 형태여서 궁금합니다.

onLogin = (email, password) => {
	const data = {
		email,
		password,
	};
	axios.post('/login', data).then(response => {
		const { accessToken } = response.data;

		// API 요청하는 콜마다 헤더에 accessToken 담아 보내도록 설정
		axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;

		// accessToken을 localStorage, cookie 등에 저장하지 않는다!

	}).catch(error => {
		// ... 에러 처리
	});
}

https cookie를 사용할 경우 access token이 언제 만료되었는지 브라우저에서 감지할 수 없기 때문에 private routing을 통해 로그인이 필요한 페이지에 들어갈 때마다 백엔드에 로그인 유효성을 체크하는 fetch를 보냅니다. 이 때, 백엔드에서 응답을 받는 동안 react는 rendering을 해서 사용자에게 UI를 보입니다. 이 때, 로딩 페이지를 보여주거나 또는 로그인이 필요한 페이지에 미리 들어가 있는 것을 생각했습니다. 이후 상태 재렌더링으로 비동기 응답에 따라서 다시 페이지를 재렌더링해주는 방식입니다. 만료시간을 cookie 또는 session Storage에 저장해서 선택적으로 보내잠

2021-11-25

• APP.tsx에서 render, component 통일시키기 (render로) (홍종우)

• React.Suspense callback으로 loadPage와 loadingPage는 안에 로직이 있기 때문에 loading component를 사용해야 함

• 배포판에서 lighthouse로 성능 체크하기

• 도커 배포 및 Github action 작성 (홍승용)

• React.memo 적용과 리팩토링(송명회)

• lazy loading loadPage에 적용해도 되는지 확인하기(홍종우)

• 애니메이션 최적화(스낵바, loading Component)

• DB Inmemory

• 서버에서 Client로 최적화를 해주는 방법

2021-11-26

• swr suspense option이 있음
• react 18부터 suspense가 비동기부터 가능
• react 18부터 lazy loading과 suspense를 함께 쓰지 않아도 됨(lazy loading을 같이 쓰는 이유와 관련이 있는 것 같다)
• 벽전 팀의 문서 정리(db 수직확장, 수평확장과 suspense 적용)가 매우 잘 되어 있는 듯
• 리팩토링 : restful api, fetch 함수 만들기, 중복을 해결하자
• http와 https 4가지 경우와 secure
• 백엔드 캐시컨트롤을 넣어서 디스크 메모리 사용으로 polygon SWR을 제외하기