[TIL-28] 실전 프로젝트 - 로그인 기능 구현(ESLint 구문 에러들)

Today목표 : 05/25일 실전 프로젝트 : 로그인 기능 구현(ESLint 에러)

로그인 기능을 구현하며 처음 맞닥뜨린 ESLint 구문 에러들을 정리해 보려고 한다.

---

알게된점,

 

❗1. ESLint airbnb => Assignment to function parameter

문제 상황

ESLint air bnb규칙에서는 함수의 매개변수에 재선언을 하는 것을 허용하지 않는 것 같다. 그 이유는 함수의 매개변수가 참조형인경우 같은 주소값을 가지고 있기때문에 원본 객체가 변경될 경우, 이후에 어떤 사이드 이펙트..? 예상치 못한 결과를 불러올 수 있기 때문인 것 같다. 다음은 해당 에러 관련 공식 문서다.

no-param-reassign - ESLint - Pluggable JavaScript Linter

때문에 매개변수로 받은 config.headers에 Access_Token 속성을 추가해 원본을 변경하고자 하니 ESLint 설정 때문에 에러가 발생했다. 

instance.interceptors.request.use(config => {
  if (config.headers === undefined) return config;
  const accessToken = sessionStorage.getItem('accessToken');
  const refreshToken = sessionStorage.getItem('refreshToken');
  
  if (!accessToken || !refreshToken) {
    return config;
  }
  config.headers.Access_Token = accessToken; //config 에서 발생
  config.headers.Refresh_Token = accessToken;

시도한 점

해결방법은 3가지가 있을 것 같다.

1. config를 스프레드 연산자로 복사하여 아예 새로운 객체를 생성한 후, 그 안에있는 headers에 새로운 속성값을 추가하는 방식이다.(스프레드는 1차 스코프까지만 복사 가능하기 때문에 headers안의 속성들도 복사해 줘야 한다.)

instance.interceptors.request.use(config => {
  if (config.headers === undefined) return config;
  const accessToken = sessionStorage.getItem('Access_Token');
  const refreshToken = sessionStorage.getItem('Refresh_Token');

  if (!accessToken || !refreshToken) return config; // 토큰이 없다면 그냥 config반환하며 끝남
  const setTokenConfig = {
    ...config,
    headers: {
      ...config.headers,
      Access_Token: accessToken,
      Refresh_Token: accessToken,
    },
  };
  return setTokenConfig;
});

2. ESLint 규칙을 임시적으로 비활성화하는 방법이다.

// eslint-disable-next-line no-param-reassign
config.headers.Refresh_Token = accessToken;

3. ESLint 규칙을 아예 비활성화하는 방법이다.

"rules": {
    "no-param-reassign": "off"
  }

 

해결한 점

내가 선택한 방법은 headers를 변경할 경우에만 일시적으로 eslint를 비활성화하는 방법이다.

매개변수의 원본 변경을 막고자 하는 의도가 옳다고 생각하여 아예 비활성화 시키지는 않되 headers에 속성값을 추가할 경우는 굳이 새 객체를 생성할 필요까지는 없다고 생각되어 일시적으로만 비활성화 하도록 하였다.

 if (!accessToken || !refreshToken) return config;
  // eslint-disable-next-line no-param-reassign
  config.headers.Access_Token = accessToken;
  // eslint-disable-next-line no-param-reassign
  config.headers.Refresh_Token = accessToken;
  return config;

headers 외에 매개변수 등을 수정하고자 할 경우에는 다음과 같이 새 객체를 생성해 변경시키는 것이 옳을 것 같다.

  // 2. 매개변수를 변경하지 않고 새 객체를 생성해 서버에 config 전달하는 방법
  const setTokenConfig = {
    ...config,
    headers: {
      ...config.headers,
      Access_Token: accessToken,
      Refresh_Token: accessToken,
    },
  };
  return setTokenConfig;

 

 

매개변수로 받은 객체의 수정

 

 

❗2. ESLint airbnb => Unnecessary try/catch wrapper

문제상황

try/catch 블록을 사용하는 이유 자체가 예외 처리를 위해 사용되는데, try 블록 내에서 예외가 발생할 수 있는 부분이 존재하지 않고, 에러를 '처리'하지 않고, 단순히 에러를 상위 호출자로 던져주기만 하는 경우에 발생하는 에러다. 불필요한 예외처리를 하기때문에 발생한다.

const authLogin = async payload => {
  try {
    const { data } = await instance.post('api/members/login', payload);
    return data;
  } catch (error) {
    throw error;
  }
};

 

해결방법

1. catch문에서 예외처리를 하지 않을 경우, 굳이 try catch문을 사용하지 않고 aync await에서 return만 한다.

2. 예외처리를 해준다. => console.log( ), console.error() 또는 throw new Errror(error) 구문을 사용한다.

여기서 throw error는 현재 예외 객체를 상위 호출자에 그대로 던지는 것 뿐, 예외 처리가 아니다, throw new Error(error)는 새로운 예외 객체를 생성하여 던지기 때문에 try/catch 가 필요한 예외 처리 구문이 된다.

따라서 내가 생각한 해결 방법은 다음과 같이 new Error구문으로 예외처리를 해 주고 상위 호출자에서 해당 예외처리를 수행하도록 하는 것이 좋다고 생각했다. 어차피 예외 처리는 컴포넌트 쪽에서 처리하도록 할 것이기 때문이다.

const authLogin = async payload => {
  try {
    const { data } = await instance.post('api/members/login', payload);
    return data;
  } catch (error) {
    throw new Error(error);
  }
};

 

 

 

목표 달성 여부,

1. 로그인 기능 구현 api 테스트 완료, 토큰을 받아 브라우저에 저장하기 ✅

2. ESLint 에러 구문들 이해하고 해결하기 ✅

 

느낀 점,

지금까지 ESLint를 사용해본 결과 발생하는 에러들이 대부분 자바스크립트의 기본적인 개념들과 직접적으로 연관하여 발생시키는 것으로 느껴졌다. 에러 구문들을 해석하고 이해하다 보니, 자바스크립트 사용에 있어 사이드 이펙트? 예외적으로 의도치 않은 문제가 발생할 수 있는 부분들에 에러를 발생시켜 미리 방지해 주고자 하는 것 같다. 굉장히 좋다고 느껴지는 부분이었다. 지금은 물론 계속 에러가 발생해 굉장히 힘들지만 .... 그 만큼 그런 문제가 발생할 수 있는 부분들을 고려하지 못하고 코드를 짜고 있었다는 것을 깨달았다. 역시 많이 사용해 보고 아는 만큼 보이는 것 같다... ESLint에서 의도하고자 하는 부분을 파악하고 내 의도와 비교하여 비활성화 할지 개선할지 해결 방법을 선택하는 과정에서 많이 배우는 것 같다.