[Next.js] src로 전체 경로 옮기기 + eslint 이슈

인턴을 하면서 Next.js 14로 프로젝트를 4월 부터 새롭게 시작을 했었고 프로젝트 구조를 어떻게 할까 하다가 src의 필요성을 못 느끼고 app을 base로 폴더를 만들어서 시작을 했었습니다. 작업을 하다보니 page 별로 _component 라고 폴더 명을 지어서 사용하게 되어서 팀장님과 얘기를 해서 폴더 구조를 전체적으로 바꾸기로 하였습니다. 

사실 아직도 이유를 잘 모르지만, vscode 상에서 폴더를 통으로 옮기게 되면 failed가 나는 에러가 계속 있어서 일일히 src 쪽으로 폴더를 만들고 파일을 하나씩 옮겨주는 과정을 무한 반복 해주어서 전체적으로 파일을 다 옮겼습니다. (이거 혹시 왜 그런지 아시는 분은 댓글 부탁드립니다)

"compilerOptions": {
    "baseUrl": "./src",
}

폴더를 옮긴 후에 해줄 건 이제 baseUrl을 "src" 혹은 "./src"로 변경 해주면 됩니다. 

이렇게 하고 나서 생겼던 이슈가 eslint를 적용했을 때 제대로 적용이 안되었다는 점인데요. 

분명히 에러가 눈앞에 많이 보이는데도 왜 적용이 안되는 거지 하다가, 앞에 폴더구조를 바꾼 사실을 깜박하고 있었습니다.  폴더구조를 바꾼 시점과 eslint 테스트를 한 시점이 좀 차이 나긴 해서 당시에 lint를 적용해보고 이상 없네 라고 생각하고 그냥 넘어가버린 게 화근이었습니다. 

//next.config.mjs 파일

//변경 전
eslint: {
    dirs: ['app', 'components', 'utils', 'components', 'hooks', 'store'],
},

//변경 후
eslint: {
    dirs: ['src'],
},

기존에 폴더 구조 상에는 소스 코드에 관련된 폴더가 최상단에 있었기 때문에 src로 적용해줘야 된다는 걸 깜박했고, next.config.mjs에 경로를 작성해주지 않았기에 발생한 문제였습니다. 그래서 아래와 같이 src를 기준으로 eslint가 next.config.mjs에서 src를 참조해서 사용을 할 수 있도록 코드를 수정 해주었습니다. 

수정하고 난 뒤에 정상적으로 작동

사실 저 처럼 폴더구조를 바꾸시는 분이 애초에 많이 없겠지만 하시다보면 한두분 정도는 이런 일이 있을 것 같아 간단하게 정리해서 올려 봤습니다.