Delete `␍` eslint (prettier/prettier) 에러(LF, CRLF의 차이)

집에서 사이드 프로젝트를 진행하던 중, 기존 맥북으로 하던 작업을 데스크톱(윈도우)로 작업을 진행하였다.

맥북에서 작업하던 코드는 이상이 없었는데 윈도우로 새롭게 컴포넌트를 작성하니 작성한 코드의 문(statement) 끝마다 에러를 발생시키는 것이 아닌가?

 

Delete `CR` eslint (prettier/prettier)

 

멀쩡히 잘 되던 코드를 새로 작성했는데 이와 같은 에러가 발생하자 원인을 검색해보았다.

원인은 바로 LF와 CRLF의 차이로 인한 것이었다.

 

이를 위해서는 LF와 CRLF가 무엇인지 확인할 필요가 있다.

CR : Carriage Return(\r)
LF : Line Feed(\n)

 

CR과 LF는 각각 새로운 줄 바꿈을 바꾸는 방식을 의미한다.

CR의 경우 현재 줄에서 커서의 위치를 맨 앞으로 옮기는 동작, LF의 경우 현재 커서의 위치에서 하나의 줄을 커서의 위치 변화 없이 아래로 내리는 동작이다.

 

우선, 해당 문제의 원인과 해결 방법부터 적어보자면 각 운영체제(OS) 별로 줄 바꿈을 표현하는 방식이 상이하기 때문에 발생한 문제이다.

macOS, 즉 Linux 기반의 운영체제는 줄 바꿈을 위해 LF값을 사용한다. 반면 윈도우의 경우 줄 바꿈을 위해 CRLF를 기본값으로 많이 사용한다.

prettier 2.0 이상의 버전에서는 줄 바꿈 값으로 LF를 사용한다. 그렇지만 윈도우에서는 엔터 키를 누를 경우 CRLF 방식으로 줄 바꿈이 이루어지기 때문에 CR을 제거한 LF 방식을 사용하라는 에러가 나타나는 것이다.

 

이를 해결하기 위해서는 .eslintrc 파일의 rule에 아래와 같은 내용을 추가해주면 된다.

 

// .eslintrc
{
    ...,
    rules: {
        ...,
        prettier/prettier: [
            "error",
            {
                "endOfLine": "auto",
            },
        ],
        ...,
    },
    ...,
}

 

prettier에서 endOfLine이라는 에러가 발생했을 때 운영체제 별로 설정된 값을 사용하라는 의미이다. 이 구문을 추가하고 나면 더 이상 에러가 발생하지 않는 것을 확인할 수 있다.

 

---

 

이에 관해서 찾아보던 중[1, 2, 3] 줄 바꿈 방식이 컴퓨터의 조상이라고 할 수 있는 타자기에서 왔다는 재밌는 스토리를 하나 알게 되었다.

CRLF은 컴퓨터 이전 쓰이던 타자기에서 사용되는 방식이었다. 타자기에서 한 줄을 다 입력하게 되면 종이가 왼쪽으로 이동하고(CR), 조금 위로 올라가며(LF) 한 줄 아래에 입력할 수 있게 된다.

컴퓨터 관점에서는 CR과 LF는 그저 한 줄의 끝(EOL_End Of Line)을 표현하는 방식일 뿐이고, 이는 운영체제를 디자인 하는 사람들에 따라서 다르게 사용되었을 뿐이었다.

 

단순히 줄의 끝을 나타내는 단어일 뿐인데 prettier에서는 왜 이러한 에러를 발생시키는 것일까? 이에 대한 내용은 prettier의 공식 문서의 End of Line[4]을 참조하면 확인할 수 있다. 이 내용을 간략히 요약하자면

 

CRLF와 LF는 깃에서 서로 다른 단어로 인식되어 git에서는 diff로 인식한다. 그렇기 때문에 코드의 변경사항을 확인하는데 문제가 생길 수 있다.
이를 막기 위해 prettier 2.0 버전에서는 EOL을 LF로 강제하여 발생할 수 있는 이런 문제를 해결하려고 한다.

 

즉, 사소한 문제로 인해 git에서 diff가 발생하는 것을 막기 위해 prettier 자체에서 제약을 주기로 한 것이다. 이로 인해 기존 macOS에서 작성한 EOL은 LF로, 윈도우에서 작성한 EOL은 CRLF로 되어 있어서 prettier에서 문제가 발생한 것이다.

 

관련 해결 방법은 prettier 공식 문서에서 확인이 가능하다. 일단, 당분간 윈도우와 맥에서 병행해서 작업을 진행할 것 같아서 auto 옵션으로 해두었다.

 

References

[1]

LF와 CRLF의 차이 (Feat. Prettier)

[2]

CR, LF, CR LF 의 히스토리

[3]

CRLF와 CR/LF 그리고 EOL

[4] : prettier, End of Line

Prettier · Opinionated Code Formatter