# 시작
넥스트로 프로젝트 환경을 세팅하면서 typescript와 eslint, prettier를 한꺼번에 적용해보려고 하니 리액트 프로젝트 세팅할 때 겪었던 것처럼 에러가 여럿 눈에 보였다. eslint의 rules를 변경하면서 걸린 시간이 5시간은 족히 넘을 것 같다. 여기서는 구글링해서 따라하다가 막혔던 세 문제를 해결하고 글로 남긴다.
Next + eslint + prettier + typescript 환경을 이용해보려는 사람들은 참고했으면 좋겠다.
아래 사진들을 보면 코드 위에 에러 메시지들이 바로 띄워져있는 것을 볼 수 있다. 다른 사람들은 이렇게 바로 에러가 보이지 않을 수도 있는데 vscode의 익스텐션중에서 "Error Lens"라는 익스텐션을 사용하고 있다는 점을 참고하길 바란다.
# 1
Cannot find name "div" 에러
Nextjs로 프로젝트를 구성하고 나서 eslint와 prettier를 적용하려는 사람들 중에 아래와 같은 문제가 나타난 사람들이 있을 것이다.
리액트였다면 더 빨리 해결했을 것 같은데 뭔가 다른 설정을 건드려야되나 해서 더 오래 헤맸던 것 같다. 생각해보니 return문 내에서 jsx문법을 사용하고 있는데 옆의 파일을 보면 page2.ts라고 되어있다. 이것을 파일의 확장자를 "tsx"로 변경하면 해결된다.
아래는 참고한 사이트다.
stackoverflow.com/questions/51158080/typescript-cannot-find-name-errors-in-react-components
# 2
Replace `....`와 Insert `..` 에러
eslint를 적용하자마자 파일에서 에러들이 엄청 보인다.
이 에러는 prettier의 들여쓰기 제한과 eslint의 들여쓰기 제한이 서로 맞지 않아서 일어나는 문제였다. eslint의 configuration file(나는 .eslintrc.json 파일로 쓰고 있다.)에 rules에서 어떤 속성을 꺼주어야 된다는 것을 알 수 있었다.
{
"root": true,
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"parser": "@typescript-eslint/parser",
"plugins": [
"react",
"react-hooks",
"@typescript-eslint",
"prettier"
],
"extends": [
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
"parserOptions": {
"project": "./tsconfig.json",
"sourceType": "module",
"ecmaVersion": 2018,
"ecmaFeatures": {
"jsx": true
}
},
"settings": {
"react": {
"version": "detect"
}
},
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"import/no-unresolved": 0,
"react/jsx-filename-extension": [
2,
{ "extensions": [".js", ".jsx", ".ts", ".tsx"] }
],
"react/jsx-indent": [2, "tab"],
"react/jsx-indent-props": [2, "tab"],
"@typescript-eslint/no-inferrable-types": "off",
"@typescript-eslint/interface-name-prefix": "off",
"@typescript-eslint/explicit-function-return-type": "off",
"indent" : ["none",0],
"no-underscore-dangle": 0
},
"overrides": [
{
"files": ["**/*.tsx"],
"rules": {
"react/prop-types": "off"
}
}
]
}
JSON
복사
위 코드처럼 rules : { ... }안에
"indent" : ["none",0],
JSON
복사
를 넣어주자. 깔끔하게 해결되었다.
# 3
Cannot find module 에러
Next에서는 상대경로가 불가능하다. 공식 문서를 보면 알 수 있는데 나는 넥스트를 다른 블로그에서 따라하다보니 file-loader를 통해 웹팩 설정으로 상대경로를 사용할 수 있었다. eslint를 적용하고 나니 여기서 에러가 발생했다.
이것은 임시방편일지도 모르겠다. 쓰던 file-loader를 쓰는 게 아니라 공식문서에 맞춰 Url path를 사용하면 eslint 에러를 없앨 수 있다.(더 좋은 방식이 있으면 댓글 부탁드립니다.) 해결한 방식은 아래와 같다. 임포트문은 없고 src에 바로 "/file.png"로 지정해주었다.
