[원티드 프리온보딩] TIL - (8)

May 10, 2022

5월 10일

장수영님의 수강생 코드 리뷰

폴더 구조

유사한 성질을 가진 컴포넌트끼리는 뭉쳐 놓는 것이 좋다. 예를 들어 모든 곳에서 쓰일 수 있는 컴포넌트는 common 폴더에, 특정 페이지에서만 사용되는 컴포넌트는 해당 컴포넌트 이름의 폴더 안에 넣을 수 있다.

modules.scss 할 때 이름은 소문자로 하는 것을 추천.

컴파일을 통해 HTML에 적용될 때, xxx.modules.scss에서 xxx 부분이 클래스에 대문자로 적용된다.
예를 들어 파일 이름이 Button.modules.scss라면,

<button className="Button_container_E3I2c21">버튼</button>

과 같은 모양이 되기 때문에, 클래스 이름을 camelCase나 snake-case로 작성하려면 파일 이름을 소문자로 작성해줘야 한다.

import 순서도 정리하는게 좋다.

import도 패키지는 패키지끼리, 로컬은 로컬끼리 등 성질이 비슷한 것 끼리 모아두면 가독성이 향상된다.

Suspense 활용할 수 있으면 활용하기

React 18에서 새로 소개된 Suspense를 활용하면 로딩 상태에 대한 코드를 줄일 수 있어 유용하다.
현재는 Lazy Loading과 함께 사용하도록 요구하고 있으나, 신기술이기 때문에 추후 추가적인 개선이 이루어질 것을 기대할 수 있다.

<Suspense fallback={<div>Loading...</div>}>
  <div>{data}</div>
</Suspense>

Throttle과 Debounce

이벤트 핸들러가 많은 연산을 해야하는 경우 제약을 걸어줌으로써 과도한 수준으로 이벤트가 발생하지 않도록 방지하는 방법이다.
Debounce는 이벤트를 그룹화하여 특정 시간이 지나면 그룹화된 이벤트로부터 처음 혹은 마지막 하나의 이벤트만 발생하도록 하는 것이고, Throttle은 일정한 주기마다 이벤트가 실행되도록 하는 것이다.
일반적으로 Debounce는 300ms를 기준으로 잡는다.

Axios Interceptors

Axios를 사용할 때 request나 response가 then이나 catch로 처리되기 전에 가로챌 수 있게 해주는 메서드이다.
요청 인터셉터의 경우 요청이 전달되기 전에 특정 작업을 수행할 수 있고, 만약 요청 오류가 발생했다면 그 요청 오류로 특정 작업을 수행하고 오류를 전달할 수 있다.
응답 인터셉터의 경우 2xx 범위에 있는 상태 코드가 반환되면 일단 응답 데이터로 코드를 실행할 수 있고, 만약 2xx 범위 밖의 코드가 반환되면 응답 오류로 특정 작업을 수행하고 오류를 전달할 수 있다.

// 요청 인터셉터
axios.interceptors.request.use(
  function (config) {
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

// 응답 인터셉터
axios.interceptors.response.use(
  function (response) {
    return response;
  },
  function (error) {
    return Promise.reject(error);
  }
);

물론 사용 이후 제거도 해줄 수 있다.

const myInterceptor = axios.interceptors.request.use(function () {
  /*...*/
});
axios.interceptors.request.eject(myInterceptor);

.env.copy

.env파일은 gitignore로 인해 리모트 저장소에 등록되지 않게 되는데, 이 때 복사본을 만들어 넣어두면 추후 사용자가 API key를 소유자에게 요청할 수 있게끔 할 수 있다.

React Router에서 공통적인 부분은 Layout으로 처리하면 된다.

React Router 6버전에서 소개된 Layout 기능은 페이지 마다 공통적인 부분을 정의할 수 있게 해준다. 즉, Layout을 만들어 두면 그 안의 Outlet에 라우팅에 따른 컴포넌트를 넣을 수 있다는 뜻이다.

Session

setInterval을 하면 상황에 따라 꼭 clearInterval을 해줘야 한다.

어떠한 컴포넌트에서 setInterval을 하고 나서 clearInterval을 해주지 않을 경우 컴포넌트가 언마운트 됐더라도 코드가 일정 주기마다 계속해서 실행되게 된다. 또한 그 컴포넌트가 다시 마운트 됐을 때 새로운 setInterval이 발생해 똑같은 코드가 반복적으로 실행되는 참사가 발생한다. 이를 방지하기 위해서 꼭 clearInterval을 해줘야 한다.

🔗react-i18next

Localization을 간편하게 할 수 있도록 도와주는 라이브러리이다.

🔗BabelEdit

json이나 yaml 확장자는 물론 다양한 파일을 여러 언어로 작성 및 관리할 수 있게 해주는 에디터로써 상술한 🔗react-i18next와 함께 사용하면 더욱 효율적이다.

Jaeseok Moon