번개장터 코딩테스트 준비

drag 를 구현 중인데, 더 하면 될 것 같은데 더 하는 것은 시간 낭비일 것 같아서 중단!

준비사항

아마도 무엇을 구현해보라고 하실 것 같아서 준비해본다.

• 시험에 사용할 라이브러리 생각

  • 예를 들어 scss, axios 등. 대신 왜 사용하는지는 분명히 말씀드릴 수 있어야 함.
  • CRA를 왜 사용했는지? 보일러 플레이트를 사용할 생각은?

• 폴더 구조는 어떻게 짤지 생각

  • page > container > component 이런 식으로 짤 예정인데 설명 잘 해야함.
  • 다른 디자인 패턴에 대해서 아는 것이 있는지?

• 데이터를 두 번 이상 불러오는지도 잘 확인해야 함

  • 콘솔 잘 찍어보기
  • 네트워크 탭 들어가보기

• 코드에 주석도 한 번씩 달아보기

• 코드 절대 경로는 어떻게 설정하는지?

• 이 프로젝트 뿐만 아니라 내가 작업했던 다른 프로젝트도 한 번 설명해보기

  • post 요청은 여기서 하기 어려워서 거기서 해야할 듯. 시간상 아마 get요청 하나랑 post 요청 하나를 주시지 않을까?

공부 기록

• container와 wrapper의 차이

  • container는 하나의 요소를 감쌀 때, wrapper는 여러개의 요소를 감쌀 때 사용한다. 참고
  • 폴더 구조는 페이지 다음 컨테이너, 컴포넌트로 구성한다. 컨테이너와 컴포넌트의 기준은 좀 애매하지만, 특정하게 공통 기능을 하는 것들을 묶어서 컨테이너라고 부른다.
  • 해당 프로젝트에서는 헤더, 카테고리, 상품 슬라이드 정도가 컨테이너가 될 듯 싶다.

• 사용 라이브러리 설명하기

  • css module을 사용한 이유
    • 스타일이 컴포넌트 내의 범위에서만 적용되도록
    • webpack을 활용하여 트리쉐이킹이 되어, 성능상의 이점이 있을 수도 있지만 이는 확인해봐야 아는 사항
  • css를 그대로 사용한 이유
    • 원래는 중복 사용 가능한 코드를 작성할 수 있고, 코드 중첩이 된다는 이유로 scss를 선호했다. emotion은 css명을 자기 마음대로 바꾸어버려서 잘 쓰지 않으며, 주관적으로 가독성도 별로 안 좋은 것 같다. (컴포넌트와 스타일 컴포넌트가 헷갈린다)
  • axios vs fetch
    • axios는 응답 상태 코드에 따라 자동으로 에러를 처리하는 기능도 있다.
    • 컴포넌트가 소멸되었을 때 불필요한 요청을 중단할 수 있다.
    • axios는 간편하게 interceptor를 만들 수 있지만 fetch는 이를 확장하는 방식으로 구현해야만 한다. 현업에서 이를 사용해본 경험이 있는데 편리했다.
  • js vs ts
    • 타입스크립트를 사용하지 않은 이유는 일단 테스트니까. 코드를 빠르게 짜려면 타입스크립트로 짤 수 없다
    • 타입스크립트는 게다가 린트도 같이 해두어야 한다.
  • react-query
    • useEffect에서 axios get요청을 바로 적어둘 시 이상하게 두 번이나 요청을 보낸다.
    • react-query를 사용하면서 한 번의 요청으로 바뀌었다.
      • 한 번 데이터를 받아오고 나서는 그 데이터를 캐싱하여 사용할 수 있다.
      • staleTime 을 설정해서 데이터가 중복으로 불러와지는 것을 막을 수 있다.
      • refetchInterval 을 통해 일정 간격 수동으로 불러오기도 가능하다.
      • ⭐ 같은 end point와 HTTP method에 한해서 중복 요청을 자동 방지한다.

• 코드 절대 경로는 어떻게 설정하는지?

  • jsconfing.json 파일을 설정하면 된다

• import 문 순서

  • react or next library > container > component > js(data) > style > external pkg

• 고민한 것

  • 기본적으로 캐시 정책은 서버에서 정해서 클라이언트로 보내준다. 네트워크 탭에서 요청을 자세하게 보면, Cache-Control이라는 것이 있다. 이는 서버에서 관리하여서 클라이언트 측으로 보내주는 것이다.
  • 캐시를 설정하지 않아 새로고침 할 때마다 데이터를 불러오는 것이 문제라면, 클라이언트 측에서는 이를 로컬 스토리지 등에다 저장을 해두어야 한다. 혹은 서버 개발자와 캐시 정책을 논의해야 한다.
  • 다만 클라이언트 측에서 "강력한 새로고침"을 통해 캐시를 날려버릴 수도 있다.