WEEK 5 멘토링 일지

멘토님 사용 경험

• 리뷰 제출이 실패하는 오류 → 로그인 문제가 있다.

/post/postId 공유하기

• 다른 기능 잘 안되는 오류

포스트 작성

• 이미지 15줄 이하일 때 캡쳐되지 않는 부분
• 순간적으로 2개 이미지가 생기는 버그
• 탭이 안쳐져요.
• 작성 성공했는데 또 포스트 작성 누르면 코드가 남아있어요.

포스트

• 포스트 수정이나 삭제는 없는지? (더보기 누르면 있나요? 라고 물어보심)
• 댓글도 수정이나 삭제가 안되는지?
• 코드 보려면 어떻게 봐야 하는지? (리뷰 보기 버튼이 코드를 나타낸다는게 조금 애매한듯)
• 포스트의 태그는 어디에 나오는지?
• 프로필을 누르면 그 유저가 작성한 글만 보여주는지?

검색

• 검색 UIUX 이슈
  1. 태그 여러개 입력하는 방식 소개가 부족
  2. 상세 검색 누르고 맨 위로 마우스 올려야 하는 부분 불편
  • 최종 제출 버튼 부분을 추가하는 게 좋을 것 같다고 하심.
• “좋아요” → 댓글수 버그

---

레이아웃은 잡혔는데 안되어 있는 기능들이 좀 있는 것 같다.

남은 기간동안 기능 추가 하면 데모 전까지는 될 것 같다.

중복 제거

• 좋아요를 누른 상태에서 또 좋아요 → 에러라고 생각할까요? 굳이 유저한테 에러를 내야하나?
• 굳이 에러처리를 하지 않아도 될 것 같다.
• 지금 좋아요 API를 나눠놓은 이유?? → request할 때 명확히 원하는 걸 할 수 있음.
  • 명시적으로 해도 좋을 것 같다.
• 하지만 에러를 내리는 것은 생각을 좀..
• 여러번 누르면 (따다다닥) → 계속 날라갈 수 있다. + 임의로 “따닥” 은 막아도 될 듯 : 클라에서는 한 0.5초라던지 클릭을 막는 경우 있음 (더블클릭실수)
• 등록, 제출하기 이런것도 클릭한번 하면은 정상 등록 응답까지 제출 버튼을 막는다. → 두번째 제출은 에러가 뜨기 때문.

클라이언트

전역 상태 관리 어떤걸로?

• zustand를 사용하고 있습니다.
• zustand 써보니까 어떤지? → 되게 편하다고 느끼고 있습니다.
• 아직 실무에서 이걸 많이 쓰고 있지는 않은 것 같아서. 요즘 많이 쓰기 시작하는 것 같다.

FE하는분들께..

• 포트폴리오라고 하는 이런것들을 보여주기가 수월하다.
  • 백엔드는 그쪽에서 사용될법한 라이브러리 등을 만들어보기가 막막하다.
  • 대신 프론트엔드쪽은 접근할 수 있는 쪽이 다양하다.
• 간단한 UI라이브러리를 만들어서 NPM으로 배포할수도 있고, CSS프레임워크 등을 배포할수도 있음.
• 작은 라이브러리 (버튼 등) 하나 만들어서 handler도 붙일 수 있고, 스타일도 커스터마이징 할 수 있고 등등 → 이걸 라이브러리로 말아서 npm에 올려보는것과, 개발 환경에서 이 버튼UI를 사용하는 페이지를 구성.
  • 이런걸 같이 github에 같이 넣었을 때 면접관들이 좋게 볼 수 있다.

BE에게…

• express를 만들어보기. (nest는 무리여도)

테스트

모든 테스트는 실제 DB를 가리키면 안된다.

| 테스트 중에 실제 스케줄러가 작동해서 테스트가 안되는 이슈가 있다.

• 테스트 하는 중에는 스케줄러에 영향 없도록 해야 함.
• 대상에 값을 실제로 저장해놓고, 유저가 검색을 했다는 가정 하에 검색 카운트를 몇 개 올린 이후에 순위 데이터를 테스트해야 한다.
• 단위 테스트를 이렇게 하는게 좋겠다 라는 의미.

스케쥴러 기능에 대한 e2e 테스트 방법을 알고 싶다.

| 태훈 : 검색이 일어나는 과정을 요청 보낸 후에, 스케줄러의 스케줄러 함수를 실행시킨다. 그 이후 결과를 확인하는 식으로 테스트.

• 조금 애매한 듯. e2e로 할거면 모든게 end-to-end로 가야 함.
• 실제로 화면을 띄워두고 순위를 알아놓은 다음에 검색 카운트가 차이나는 만큼을 검색UI를 통해 수행이 일어난 후에, 인기태그 순위가 변동되는 지를 테스트 해야 함.
• 스케줄러와 무관하게 테스트 하는 부분은 단위테스트에서 진행

현업에서 실제 스케쥴러를 어떻게 테스트하는지?

• 여러 가지 방법이 있는데 일단 스케쥴러로 돌아가는 메서드 자체를 기다리는 방법도 있는데 테스트 시간이 길어질 것이다.
• 또는 스케쥴러에 의해 돌아가는 랭킹을 배제하고 싶으면 e2e 직전에 업데이트 랭킹을 한 번 하고 수동으로 업데이트 랭킹을 했다는 플래그를 던져준다.
• 그리고 마지막에 한 번 더 업데이트 랭킹을 한 다음에 데이터를 쌓아 처리해라.
• 그 대신 로직 자체가 조금 바껴야 할 것 같다.
• 멘토님같으면 시간에 의존한 테스트는 안할 것 같다. 시간이 지났다 치고 그 이후에 실행되는 함수에 대한 단위 테스트를 주로 한다.

기존 서버에서 스케줄러 서버를 분리했는데 괜찮은 방식일지?

• 인기 태그를 조회하는 로직이나 이런 것들은 스케줄러 서버에 있는 것인지? → 네 맞습니다.
  • 그렇게 한 이유 : 서버 로드밸런싱 시 내부에 스케줄러가 있으면 서버 개수만큼 스케줄러가 생겨야 할 것 같았다. 이를 방지하고자 담당 서버를 하나로 분리했다.
• 분리하려고 했던 취지는 잘 하신 것 같다. WAS-API 서버 처럼 목적에 맞게 분리하는게 맞는 듯 하다.
• “나중에 밸런싱을 해보시면 스케줄러 서버가 여러개 뜬다” 라는 말이 애매하다.
• 애초에 진입점이 달라야 함. API 서버 띄우는 부분이랑 스케줄러 서버 띄우는 부분을 컨테이너 자체를 분리
• 고민이 되는 부분 : 검색어 순위/ 인기 순위/ 등등 → 비즈니스 로직인데 스케줄러 서버에서 관리하고, API 서버에서도 관리해야 하는데 이 부분에 대해 고민해야 함.
• 비즈니스 관련 로직 → API, 스케줄러는 스케줄링만 하고 관련 데이터는 API 서버에서 가져오기 등으로 구현할 수 있을 듯 하다.

면접

• 자바스크립트의 가장 큰 특징은?
• 자바스크립트와 다른 언어의 차이는?
• 자바스크립트 이벤트 루프 특징은?

→ 여러분들 다 아는 질문들이라고 생각함.

---

비동기 관련 질문들

• 비동기란 무엇인가?
• 비동기를 자바스크립트에서 어떻게 처리할 수 있는가?
  • callback, promise(2015), async/await(2018)
  • 콜백은 지금도 제일 많이 쓰인다. (node.js 표준 인터페이스, 브라우저 요소 이벤트 핸들러)
  • async/await는 내부적으로 promise 변형한 부분. 이 부분을 명확히 이해해야 함.
    • async는 어떤거고 → 사용하면 어떻게 되는지
    • await는 어떤거다 → 마찬가지로 어떻게 되는지?
    • 이 다음 질문 : async/await와 promise의 차이점은?
      • promise는 콜백 형태로 실행되기 때문에 비동기, async/await 는 스코프로 감쌀 수 있어 보인다. (동기처럼 보임)
      • 비동기코드 제어에 대한 제어권을 비동기가 일어나는 스레드로 넘기고, 그게 끝났을 때 반환해주는 부분이다. async/await는 그 promise가 판단될 때 까지 기다렸다가 판단이 되자마자 실행되는 부분.
      • Promise는 우리가 Promise객체를 받아서 then처리를 해서 실행하고 싶을 때 실행할 수 있다.
    • 2초 후에 실행 될 로직을 2초 전에 실행할 수는 없다. → 대신 5초 후에 실행하는건 Promise로만 가능 (제어권이 절반정도는 나한테 있음.) 그러나 async/await는 바로 실행됨. (제어권이 전혀 없다. await가 끝나면 다음 라인이 실행 = 컨텍스트가 아예 바뀐다.)
    • 면접에서 나오면 잘 안나오기 때문에 정리 해보는게 좋을 것 같다.
• 비동기를 자바스크립트에서 어떤 문법을 사용할 수 있는가?