week4 멘토링 일지

✅ 체크리스트

이번주에 우리 팀이 되고 싶은 모습을 상상하며 체크리스트를 추가해봐도 좋습니다.

멘토가 보기에 우리 팀은 어떤지 의견을 구해보세요.

• 계획한 목표의 80% 이상 구현하고 있다.
• 작성한 코드나 구현 과정을 근거 있게 설명할 수 있다.
• 의사 결정 사항과 문제 해결 과정을 누구나 볼 수 있게 정리하고 있다.
• 서버 연동이나 배포를 시도하고 있거나, 이미 배포 되었다.

✔️ 결론 및 To Do

멘토링 이후에는 결론과 To Do를 작성하고 실천해보세요.

멘토에게도 공유하여, 의도와 다르게 정리되지는 않았는지 검토를 받아볼수도 있습니다.

✔️ 아젠다 및 질문

멘토가 미리 아젠다와 질문을 보고 올 수 있도록 사전에 준비하여 공유합니다.

FE

프론트엔드 현황

FE 주간 계획

• 정의되었던 CRUD 기능 구현 (질문 생성, 질문 상세, 질문 답변 등)
• 임시글 저장 로직 구현
• 사용자 인가 로직 구현

주간 수행 결과

• 임시 글 저장 처리 (feat. polling)
• 사용자 인증 로직 구현 (feat. JWT token & Cookie)
• DOM Purify를 이용한 XXS 방지
• CRUD 구현
  • 문제 상세 및 답변 페이지 레이아웃 & api 연동
  • 질문 상세 페이지 레이아웃 & api 연동
  • 질문 검색 페이지 레이아웃 & api 연동

기술적 경험

[Vite Proxy 설정](https://www.notion.so/Vite-Proxy-4228506ac04246d8b6ab615bcec3c42c?pvs=21)

[임시글 저장 ](https://www.notion.so/f2b52cc7015f44f88e3aa095506658c7?pvs=21)

[브라우저에서 안전하게 token 보관하기](https://www.notion.so/token-1986db4e66544bf6bc4024f4954d1d1f?pvs=21)

[XSS 공격 방어](https://www.notion.so/XSS-4ade1a3121614e94810090fd7ead79bf?pvs=21)

질문 사항

• 클로버 노트는 사용자 인증을 어떤 방식으로 하나요?
  • 현재 ALGOCEAN 인증 방식
    • JWT access token 및 refresh token 발급
    • access token은 private 변수에, refresh token은 쿠키에 저장
      • 왜 쿠키에 저장하나요?
        • local storage ⇒ XXS 탈취 위험
        • cookie ⇒ httponly를 통한 XXS 대응 가능. referrer를 통한 CSRF 대응 가능
        • DB ⇒ refreshtoken을 노출하지 않을 수 있다는 장점이 있으나, 고민…
    • access token 만료시 refresh token을 통해 새로운 access token 발급 (RTR 방식)
    • refresh token 만료시 로그인 페이지로 강제 이동
• 사용자 경험(UX)을 개선하기 위해 시도한 것 중 가장 인상깊은 사례는 무엇이었나요?
• 최근에 관심있는 기술 또는 도구가 있으신가요?
• 프로젝트에서 FE 테스트 코드는 필요하다고 생각하시나요? (기능 구현하기 바빠서)
• 멘토님이 생각하시기에 프론트엔드 신입 개발자로서 꼭 가지고 있어야 할 소양이 무엇인지 궁금합니다.

BE

• 백**엔드 현황**

  B**E 주간 계획**

  • 남은 API 구현
  • 기존 API 수정
  • 실시간 알림 기능
    • 어떤 기술 사용할 것인지 결정 후 구현
  • 크롤링 코드 간단하게만 작성
  • swagger 설정

  주간 수행 결과

  • 남은 API 구현
    • 누적 포인트 API
    • 등급 API
    • 닉네임 API
    • 좋아요 API
    • 오늘의 질문 API
    • 질문에 대한 답변 리스트 API
    • 급상승 질문 API
  • 기존 API 수정
    • 질문 API soft delete 적용
    • 질문 읽기 API 수정
    • 질문 초안 작성 API 수정
    • 질문 리스트 API 기능 확장
  • 알림 API
    • 어떤 기술 사용할 것인지 결정 (구현 못한 상태)
  • 빌드 오류 방지를 위한 CI 워크플로

질문 사항

• 실시간 알림이 필요한 상황이라고 가정하고 구현하기 위한 기술들을 찾아봤는데 숏 폴링 또는 SSE가 적합하다고 판단이 되었는데 숏 폴링 같은 경우는 http request 관련 오버헤드가 존재하고 서버에 부담이 된다고 합니다. 그래서 SSE로 접근을 했는데 이 경우 발생할 문제에 대한 해결책에 대한 조언을 받고 싶습니다.

  • in-memory 형식으로 로그인한 유저를 관리하며 이벤트 발생 시 해당 유저에게 data를 보내는데 정말 만약에 유저수가 많아서 메모리를 초과하는 경우 문제가 될 것 같은데 이때 해결할 수 있는 방법이 어떤 것이 있는 지 궁금합니다.

  • 숏 폴링 방식으로 구현된 알림과 SSE로 구현된 알림이 서버에 주는 부하를 각각 테스트 해보고 싶은데 어떤 방식이 있는 지 궁금합니다.

  • 유저가 로그아웃된 동안에 발생한 이벤트에 대해서는 따로 저장 후 로그인 하면 알림을 주려고 하는데 이 경우 로그아웃된 동안 발생한 이벤트를 DB에 저장해놓는게 맞는 지 궁금합니다.

  • 메시지큐를 통한 알림 방식도 고민 중입니다.

  • nestjs 에서 sse를 설명하는 코드가 있는데 이게 왜 sse인지 모르겠습니다.

    

• 급상승 게시물 API 구현방식

  • 급상승 지표를 뭘로 정할 것인가
    • 30분 내 조회수 - 조회수 기댓값
    • 30분 내 조회수 / 1시간-30분 전 조회수
    • 30분 내 조회수 v
  • 급상승 게시물 API를 구현하기 위해 로깅 방식
    • DB에 저장 (nest.js service) v
    • 로그파일에 저장 (nginx)
    • 로그파일(.log 또는 redis)에 저장 후 DB에 주기적으로 벌크 삽입

✔️ 멘토링 내용

멘토링 시간에 나눈 이야기가 휘발되지 않도록 기록해보세요.

• 정량적으로 프로젝트 진행 상황을 평가해야함

  • 수치를 통해 보임으로써 직관적으로 파악 가능
  • 어떤 이유로 인해 진행 못했다면 해당 이유를 기록해두어야 함
  • github roadmap 활용 잘하고 있음

• release note를 통해 버저닝을 해야함

  • diff 파악 가능

• SSE구현 시 어려움 공유

  • map을 통해 연결을 관리함
  • WAS의 memory를 사용하면 안됨 → redis, kafka를 통해 memory 관리
  • in-memory로 연결을 관리하면 scale-out상황에 대처를 못함
  • mqtt (long polling 방식 지원), FCM, 웍스
  • in-memory는 8기까가지 정도 늘릴 수 있음
  • HTTP의 버전 유무와 관계 없이 parallel하게 요청을 처리할 수 있는 한도는 최대 6개임
    • 100개라고 하는 것은 parallel이 아님
  • 일단 long polling으로 구현 후 리팩토링

• 급상승게시물

  • 지표는 기획단계에서 고려
  • 주기적으로 count세서 board 테이블에 넣으면 order by할 때 sub query안해도 됨
  • 배치 주기를 정하고 배치 처리
  • redis에 저장 후 server에 batch처리 요청
  • db에 저장하는게 꼭 중요한게 아닐 수도 있음
    • select문이 사실 생각보다 느림
    • select문이 수백만번 돌아간다고 생각하면서 코드 작성 고민하기
  • 부하가 커질 수도 있기 때문에 이를 처리하기 위한 slave server 고려해보기
  • 데뷰 문서, 평소에 기술 관련 세미나를 많이 봐야함

• FE에서 alert가 너무 많음

  • UX상 없더도 될 alert가 보임
  • validation과정에서 try catch를 사용하는데 이는 try catch지옥이 발생할 수도 있음
  • 에러가 발생하면 throw로 처리하고 한 곳에서 모아서 처리하기 → unhandledException 사용

• 초안 기능

  • 세션 스토리지에 저장하는 방식을 사용해야 함
  • FE부담을 줄이기 위해 BE에서 처리 함

• 리프레시 토큰

  • BE에서 passport를 활용하여 쿠키로 전달
  • 클로바에서는 쿠키와 세션ID를 사용하고 있음

• UX 경험

  • 클릭을 최대한 줄여주어야 함

• UI

  • 폼 디자인도 이쁘게 변경
  • 테일 윈드 같은 것을 사용했으면 디자인 신경 많이 안써도 됨
  • 프레임워크를 선정하는게 중요한 요소임

• 관심 기술

  • 줌하고 연결하려고 함
  • URL을 통해 노트와 연결하여 동시 녹음, 여러가지 콜라보를 하려고 함
  • 일렉트론 제이슨으로 감싸면 pwa로 만들기 좋음
  • 3d, web assembly

• 테스트

  • e2e, unit 둘다
  • TDD하면 진짜 좋은 개발자가 될 수도 있음

• FE 테스트

  • e2e 는 힘듦 → ui변경되면 e2e test code를 변경해야함
  • 유닛테스트는 하면 좋은데, component 단위는 아니고. util, helper, hook 등에서 필요.

  → UI에 대한 테스트는 개발자가 직접하면 너무 힘들어짐. QA팀 부탁드립니다.

• BE 공부

  • 대학교 전공 지식들을 공부
  • 아키텍처 공부