4주차 멘토링 일지

FE

✔️ 아젠다 및 질문

• 아직 구현할 기능 (기술적 도전) 이 많이 남았는데, 문서화를 많이 하지 못했다… 남은 기간을 어떻게 보내야 할까흐흑흥힝
• cors 관련 배포 설정
• 다른 팀원이 작성한 코드까지 알고있어야할까??
• 검색 자동완성 글자 바뀔때마다 api 요청해야하나요?
• 모든 라우터에 권한 인증을 추가하는게 좋을까?

✔️ 멘토링 내용

• 아직 구현할 기능 (기술적 도전) 이 많이 남았는데, 문서화를 많이 하지 못했다… 남은 기간을 어떻게 보내야 할까흐흑흥힝
  • 3d 공간 처리 자체로 의미가 있음
  • 그린 그림을 하는게
  • 코등 ㅔ집중에서 퀄리티있게 한 다음에 ㅏㅂㄹ표까지 화ㅑㄱ실하게 하는게 낫지 않나
  • 발표도 중요하다
  • 못한 자잘한 버그들을 더 집중하는게.
  • 다른팀은 테스트 커버리지도.ㅜ
  • 현재 있는 것에서 빠진 것들을 더 완벽하게 하는게 좋지 않을까 싶다
  • 정보를 풍성하게
  • 엄청 매력적이진 않당..
  • 균형성을 위해서 코드 퀄리티를 더 …
• cors 관련 배포 설정
• 다른 팀원이 작성한 코드까지 알고있어야할까??
  • 다른 팀원의 코드에 대해 물었을 때 대답할 수 있도록 하자.
• 검색 자동완성 글자 바뀔때마다 api 요청해야하나요?
  • 그렇다
  • 디바운스로 가져오면 됨
  • 입력할 때마다 바로바로 가져오지 않고 요청을 딜레이시켜서 가져옴
• 모든 라우터에 권한 인증을 추가하는게 좋을까?
  • 권한 access 부분이까다롭긴해여
  • 마이페이지에서 글쓰기, 글수정은 다른사용자가접근을못하는데
  • 각각의 페이지나 컴포넌트 안에서 처리할 것인지, 상위 레벨에서 할 것인지
  • 모든 것을 할 필요는 없고
  • 결론적으로 상위에 해당하는 루트에서 권한을 확인해서 하면 됨
  • 따로 컴포넌트를 만든다거나 (ex. protectedRoute)

- useRoutes 훅을 씀

- 컴포넌트 만들어서
- 막아야 할 것들은 함수 만들어서 권한 확인하고 권한 없으면 리다이렉션
- lazyImport
- 특정 페이지에 대한 접근을 만들어야하면  컴포넌트만들거나 함수에서 어쩌구
- 페이지 접근 권한 없을 때 404 페이지 보여주거나 리다이렉션 시키는데, 무조건 404 페이지를 보여줘도 좋지 않음. 플로우 깨질 수 있음. 화면으로 못돌아오게됨.. 접근이 불가능한 페이지입니다 적어놓고, 아래에 돌아가기 버튼을 만들어두어서 전으로 돌아가거나 메인으로 돌아가게

• 수학적인 개념에 대해서는
  • 수학적으로 너무 딥하게 들어가면 안됨… 아무도 이해를 못함
  • 컨셉츄얼하게. 추상화하여 설명. 초등학생도 이해할 수 있게
  • 왜 이거를 해야했었는지 이유부터 스토리텔링이 되어야 함
  • 어떠어떠한 계기로
  • 실제로 사용자가 좋아하는지 피드백까지 받아야 함
  • 기획한대로 다 동작하는지 사용성 테스트
  • 전체적인 스토리텔링, 시나리오
• 기술적 챌린지는 구현하는 것도 좋지만,
  • 렌더링 이슈나 다이나믹 임포트같은 것을 했을 때 어떤 장점이 있는지
  • 그런 것들도 기술적인 것의 하나
• 3D로 너무 빠지지 말라..
  • 3d 개발자를할거냐?
  • 하는 사람이 별로없다.
  • 별로 포지션이없다고 함 안타깝게도

→ 나머지 시간은 코드에 좀 더 집중하는걸로.

• 동민님 질문..? 뭐엿지 로더 어쩌구

  • 멘토님은 안써봤음
  • 리액트 쿼리를 쓰시는데, 그래서 안씀
  • 로더는 거의 잘 안쓴다. 안써도상관없다 . 역할정도 알아두기
  • 오브젝트가 아닌 컴포넌트로 구성되어있음
  • 나중에 리팩토링하는 것도 고려해봐라
  • 꼬일 수 있기에 로직들을 하나로 관리하기 위해 여러 솔루션이나왔는데.
  • configuration처럼 구성하는 것이 더 좋다.
  • 문서가 많지 않고 해서
  • 최신 버전을 쓰되, 나중에 만날 프로젝트에서는 대부분 옛날식으로 쓰는..

• 유명한 상태라이브러리는 인터뷰에서 물어볼 때 대답할 수 있게끔

  • 리덕스같은 것들
  • 그리고 zustand 왜썼냐 물어볼 때 대답할 수 있어야 함
  • 왜 이걸 쓰는지, 장점과 단점이 무엇인지 알아둬야 함
  • 좋았던 점, 안좋았던 점을 생각해봐라

✔️ 아젠다 및 질문

• 새로운 기능 개발, 어떤 것이 좋을지
• 부하테스트는 어떻게 진행하면 될지
• 로그는 어느 정도 단위로 남기는 것이 좋을지 🙏🏻
• cors 관련 배포 버전 설정
  • 현재 credentials true, origin에 www.별글.site, 개발용으로 localhost도 추가
  • 쿠키 httponly true, sameSite none, secure true
• 리팩토링 vs 추가 기능 고안 및 구현

✔️ 멘토링 내용

• 지금 한거
  • 회원 기능, 게시글 기능
  • 이미지 업로드
  • 트랜잭션 수정
  • 쿼리 최적화
  • 로깅
    • Interceptor로 구현
  • 배포: HTTPS, CI/CD
  • 검색기능
• 앞으로 할거?
  • 로그 모니터링? 엘라스틱서치?
    • elasticsearch(ELK)로 쌓을수도 있음
    • AWS cloudwatch
    • 로깅은 어느정도 수준까지?
      • ex. 쇼핑몰에서 주문결재처럼 중요한 기능 → 모든 기능 다남김 (쿼리로그까지)
      • 나머지 덜 중요한건 안남
      • 피노로거(pino) → req, res 로그가 다 남음
      • 에러 로깅은 꼼꼼히
  • DB 캐싱? redis → 금방함 해도좋음
  • 부하테스트 → ㄱㅊㄱㅊ
    • artillery, k6 쓰심 → 근데 돈 많이듬(클라우드 요금) ㅋ 로컬에서 돌리는것도?
      • artillery는 ECS로 서버 24개 올리고 요청 3000개 정도,,
      • 팀원들 PC 각각 돌려서 쏴보거나..
      • k6에서 VO?를 많이 올리는것도 한계가 있다~
    • 목적: 현재 유저가 몇명인데 이만큼을 버틸수 있냐? 이걸 확인
      • 피크 칠 때 동접자 수가 ~명일 때, 병목이 어디서 발생하냐 등
    • DB를 오토스케일링되는 클라우드서비스로 이용하셨는데 오토스케일링에서 최소 스케일을 몇으로 잡을지? 를 결정하는 문제 → 업스케일링 하는데도 시간이 들기 때문에 미리 최소치를 정해놓는 것
  • Worker 모듈 → 아직 사용한 케이스를 보지 못하심
  • production환경에서는 cors origin에 localhost 뺌, sameSite는
  • AI CLOVA API.. → 써보면 막 엄청난 것은 없지만 경험해보는것도 나쁘진 않음
  • 1주정도 남은 시점에서 딱 떠오르는 새로 구현할만한 기능이 없다 → 리팩토링 vs 테스트코드 vs 새로운 기능
    • 테스트코드 ㄱㅊ 커버리지를 올린다거나..
  • backoffice용 API (= 어드민용 API) 는 어떤지
    • 통계, 전체 글 보기, 회원 보기, 회원 관리, 게시글 하나씩 확인.. 대시보드
    • react좀 공부하는거? 나쁘지 않음 → 관리자 페이지를 만들어 볼까?
      • react-admin
  • SWC 적용해봐도 좋
    • 해봤는데 Yarn Berry 모노레포에서 적용하기가 만만치않..
  • Logger, Exception Filter, Guard 이런거 빠진거 있으면 꼼꼼히 적용
  • 코드 리팩토링 → 하고싶으면 계속 코드를 읽어볼 것
  • Docker 이미지 최적화
    • 멀티 스테이지 빌드
    • build 후 prod 버전에서 필요없는 거 빼기
      • dist, node_modules(의존성), .env 정도만 들어가게
  • tsconfig.ts에서 “strictNullChecks"옵션을 true로 놓고 검토 → null이 발생할 수 있는 곳 검사
    • findOne 같은 것도 원래는 Entity 타입만 써도됐었는데 저 옵션 true로 하면 null | Entity 이런식으로 해야해서. 컴파일단에서 에러잡기 더 수월해짐