TIL

1. ESLint 구문 분석 오류

📌 Unexpected token

ESLint 구문 분석에서 예기치 않은 토큰 오류는 JavaScript ES6~7의 지속적인 변경으로 인해 개발 환경과 ESLint의 현재 구문 분석 기능 간의 비호환성으로 인해 발생합니다.

ESLint를 호환 가능한 파서(예: @babel/eslint-parser 또는 babel-eslint v7 이하 babel 버전용)로 구문 분석을 통해 해결할 수 있습니다.
1. Terminal에 npm install @babel/eslint-parser --save-dev 실행
2. .eslintrc 파일에 "parser": "@babel/eslint-parser" 추가

*참고 사이트: ESLint Parsing error: Unexpected token

2. ESLint Babel 오류

아래 코드를 작성했을 때 발생한 오류입니다.

📌 const에 대한 오류

The 'const' modifier can only be used in TypeScript files.ts(8009)

📌 validator에 대한 오류

Parsing error: Unexpected token

const validator = {
    id: input => input.length >= 10,
    email: input => {
      const regExp = /^[a-zA-Z\d+-.]+@[a-zA-Z\d+-.]+\.[a-zA-Z]{2,3}$/;
      return regExp.test(input);
    },
    password: input => {
      const regExp =
        /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*-_])[A-Za-z\d!@#$%^&*-_]{10,}$/;
      return regExp.test(input);
    },
  };

const 예약어를 삭제했을 뿐인데 해결..?
1번에서 발생한 오류를 해결하기 위해 추가로 작성한 설정 다시 되돌림.
이유는 나중에 알려주신다 함..

3. request-response 리팩토링

로그인 경우에 따라 출력되는 alert 메시지를 messages 객체로 생성했습니다.
response message(key)에 따라 해당하는 메시지(value)가 출력되도록 if-else 조건문을 작성했습니다.
(참고: key로 설정한 메시지는 백엔드에서 설정한 것입니다.)

const messages = {
  LOGIN_SUCCESS: `로그인을 성공했습니다. ${this.state.id}님 반갑습니다!`,
  INVALID_USER: "잘못된 회원정보입니다. 아이디를 다시 입력해주세요.",
  INVALID_PASSWORD: "잘못된 회원정보입니다. 비밀번호를 다시 입력해주세요.",
};

if (res.message === "LOGIN_SUCCESS") {
  alert(messages[res.message]);
} else if (res.message === "INVALID_USER") {
  alert(messages[res.message]);
} else if (res.message === "INVALID_PASSWORD") {
  alert(messages[res.message]);
}

📌 Refactoring
alert(messages[res.message])만 있어도 response message에 따른 값을 각각 출력할 수 있습니다!

alert(messages[res.message]);

res만으로 출력할 수 없고 res.message로 접근할 수 있습니다.
(res.MESSAGE와 같이 대문자로 작성했을 때와의 차이는 무엇일까?)