next.js를 설치 한 후 공부하면서 조금 끼적이다가 타입스트립트를 설치하고나니 갑자기 App이 먹통이 되었다!
코드들이 아주 박살이 난 경우는 아니고 import를 못하는 상황이 발생했다!
보일러플레이트에 올려져있는 구조이고 저 global.css도 보일러플레이트 파일의 일부이다!
내가 임의로 만든게 아니라는 사실...
에러를 보자마자 '뭐 아주 큰문제는 아니겠군!' 싶었고 절대경로에 문제가 생긴 것 같은 느낌이었다.
구글에 검색을 해보니 나와 같은 상황을 겪는 분들이 많지는 않지만 종종 있었던것 같다.
이런 저런 글들을 읽어본 뒤 눈에 보인 것은
이건 에러라기보단 그저 TS환경 설정을 하다 만 것이다!
처음에 Next.js 프로젝트를 생성 할 때 이런저런 설치옵션들이 나오지만
한번쯤은 날것에서부터 직접 설치하고 설정 해봐야겠다 싶어서 옵션 없이 설치를 했었다.
일단 프로젝트가 생성이 되고나서 TS를 설치하는 과정에서 생긴 문제가 아닐까 싶다.
단순히 '그저 설정이 덜 되어 시작에 문제가 생긴것!' 이다.
처음에 Next프로젝트를 생성 할 당시 TS는 제외되어 있었기 떄문에 jsconfig.json 파일이 생성된다.
jsconfig안에 절대경로가 설정되어있어 프로젝트를 만들자마자 실행시켜보면 절대 경로로 import한
import '@/styles/globals.css'위의 코드도 잘 인식이 되어 문제가 없이 잘 돌아가게 된다.
문제는 이 다음부터인데 TS를 설치하고 설정 파일을 만들어주는 과정에서 tsconfig.json을 만들어줘야한다.
Next.js에서는 아무런 내용이 없는 tsconfig.json을 만들어두면 프로그램 진입 시 빈 파일을 확인 한 뒤에 내용을 채워주는 기능이 있고
나는 그 방법으로 TS설정을 진행 했다.
사실 공식문서를 보면 기본설정에 대해서는 확인 할 수 있지만 그냥 귀찮았을 뿐이다.
경로 설정 없음....
컴파일러 옵션에 절대 경로 설정이 되어있지 않아 발생한 문제다!
기존의 jsconfig.json의 설정은 이렇게 되어있다.
TS로 컴파일 설정이 변경이 되면서 config파일의 참조를 jsconfig에서 tsconfig로 변경이 되어 발생한 문제이다.
그저 컴파일 옵션을 추가해주면 해결되는 문제이다.
"paths": {
"@/*": ["./*"]
}위의 코드를 tsconfig.json에 입력해주자!
경로 옵션을 추가 해 준 뒤 어플리케이션을 동작시켜보면 잘 돌아 갈 것이다.
사실 별거 아닌데 혹시라도 누군가에게 도움이 될까 해서 남기는 기록이다.
대부분의 사람들이 알고있겠지만 갑작스레 되던게 안되면 당황할 수도 있으니!
댓글