ESLint 설정하기 (no-eval)

• 리액트 프로젝트에서 eval을 사용해보려고 하니, ESLint에서 no-eval 경고 메세지를 띄웠다.
• 정상적으로 작동은 되었지만, 올바르게 사용할 수 있는 방법이 있지 않을까 해서 고민을 해보았다.
• 이 문제를 해결하기 위해서 eval을 사용하지 않고 알고리즘을 작성하여 문제를 해결할 수도 있었지만, eval을 사용하는 것이 간편하고 더 확실한 방법이기에 eval을 사용할 수 있는 방법이 있지 않을까 생각했다.
  🥙 mdn의 eval 문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/eval

🍸 ESLint 공식문서의 no-eval에 관한 페이지 : https://eslint.org/docs/rules/no-eval

• 위의 공식문서를 확인해보면, eval의 간접 호출을 허용하여 성능에 부정적인 영향을 최소화할 수 있다.

🍵 간접 호출은 범위를 동적으로 변경할 수 없기에, eval을 직접 호출하는 것 보다 덜 위험하다.

간접 호출을 허용하기 위해서 ESLint의 설정을 변경하자.

🍰 eslint의 설정을 변경하는 유저 가이드 : https://eslint.org/docs/user-guide/configuring/

• 위의 공식 문서 가이드를 보면, package.json를 통해서 eslint 옵션을 설정할 수 있다.

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "no-eval": [
        "error",
        { "allowIndirect": true }
      ]
    }
  },

• 기존에 작성된 package.json의 eslintConfig에 no-eval에 대한 rules를 설정하였다.

• 기존의 allowIndirect 디폴트 값은 false이다.

• 설정을 한 뒤, window.eval()로 eval을 호출하니, 더 이상 eslint의 에러 메세지가 나타나지 않았다.