[Error] next.js 사용중 Delete cr 에러 해결하기

인프런에서 nextjs 무료 강의가 있어서 듣고 있다.

프로젝트 생성하고 vscode에서 열어서 파일들을 살펴보고 있는데, 아무것도 안하고 에러가 났다.

 

 

main.ts 파일을 열어보니, 이러한 에러가 나왔다.

그래서 바로 해결하기 위해 구글링을 했고, 해결할 수 있었다.

 

 

 

 

 

문제 원인

OS 별로 줄바꿈을 하는 방식이 다르기 때문에 발생하는 문제이다.

줄바꿈 방식에는 CR, LF, CRLF 방식이 존재한다.

CR : Carrige Return / LF : Line Feed(LF)의 약자이다.

줄바꿈할 때 커서를 아랫줄로 이동시켜주는 것이 LF, 왼쪽 끝단으로 이동시켜 주는 것이 CR이다.

 

Linux 기반의 OS는 LF를 default로 사용하고,

Window OS에서는 CR, 그리고 CRLF를 default 값으로 사용한다.

 

prettier 2.0. 이상에서는 줄바꿈 방식으로 LF를 사용하여 코드를 체크하기 때문에 발생한 것이었다.

Window에서는 줄바꿈할때 CRLF를 사용하기 때문에 CR 방식을 제거하라는 의미의 오류인 것이다.

 

 

 

 

 

 

 

해결 방법

eslint의 prettier의 개행 방색을 endOfLine: 'auto'로 변경해주면 된다.

공식문서에 따르면 LF와 CRLF의 메모리 저장에 차이가 있어 이를 통일해야 한다는 것이다.

 

따라서 변경해주는 것은 줄바꿈(endOfLine)을 자동(auto)로 바꾸라는 의미의 코드이다.

 

'prettier/prettier': ['error', { endOfLine: 'auto' }],

 

위으 코드를 .eslintrc.js의 rules에 추가해주면 된다.

 

 

위의 캡처본처럼 추가했더니, 쉽게 에러가 해결되었다.