LF와 CRLF의 차이 (Feat. Prettier)

LF와 CRLF의 차이를 알아보게 된 이유

나는 주로 윈도우즈에서 코딩을 한다. (윈도우즈에서 코딩을 하는 것을 미리 알리는 이유는 이 에러의 원인과 관련이 있다.) 아무튼 내가 윈도우즈를 사용하는 이유는 회사 컴퓨터가 윈도우즈고, 직장 동료들도 윈도우즈를 쓰고 있기 때문에 최대한 모든 환경을 팀에 맞추고 싶기 때문이다. 그런데 윈도우즈에서 프론트엔드 개발을 하다가 eslint와 prettier를 통합하는 과정에서 뭔가 알 수 없는 에러가 났다.

많은 블로그에 단순한 해결 방법은 있지만, 이게 뭔지에 대해 자세히 설명한 글은 적은 것 같다.

에러 현상 분석

DELETE ␍?뭔 듣도보도 못한 외계어 같은 걸 지우라고 한다.

'난 저딴거 쓴적도 없는데?'

문제 해결 방법

스택오버플로우를 보니, 다음과 같은 방법으로 해결할 수 있다고 한다. .eslintrc.js를 다음과 같이 작성한다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["eslint:recommended", "plugin:prettier/recommended"],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  rules: {
    "prettier/prettier": ["error", { endOfLine: "auto" }],
  },
};

prettier 통합 과정에서 eslint 설정에 들어가 prettier의 endOfLine에 대한 설정을 "auto"로 바꾸면 된다. 이후 에러가 뜨지 않았다. 그런데 '왜?' 라는 궁금증이 해소되지 않았다.

endOfLine이 뭐하는 설정인데? 날 이렇게 힘들게 해

LF와 CRLF의 차이

일단 LF와 CRLF의 풀네임은 각각 Line Feed와 Carriage Return Line Feed이다. 둘 다 줄넘김의 뜻을 가지고 있긴 한데, Line Feed는 직역하면 라인 먹이기인데 이게 왜 줄넘김이 됐을까? 그 유래는 typewriter라 불리는 기계에서 찾아볼 수 있다.

소위 '타자기'라 불리는 기계이다.

저렇게 생긴 타자기 입구에 A4용지를 넣으면, 내가 친 타자가 마치 도장찍듯 쿡쿡쿡 찍히는 방식이다.

타자기 동작 영상

위의 그림에서 글자를 콕콕콕 찍는 녀석은 고정되어 움직이지 않고, (아마 이녀석을 문제없이 움직이는 비용보다는 종이를 움직이는 비용이 싸게 먹혀서 일 것 같다.) 타자를 칠 때마다 종이가 오른쪽으로 움직여서 글씨간의 가로 간격이 형성된다. 오른쪽 끝에 다다르면 Carriage Return이라는 행위를 통해 다시 종이를 왼쪽으로 끌어온다.

Carriage란 것은 종이를 고정시키는 물건이다.

또, 다음 줄로 넘어갈 때는 타자기가 종이를 조금 더 먹어서 이전에 썼던 글자와의 세로 간격을 형성한다. 즉 새 줄을 만든다. Line Feed라는 것은 타자기가 이렇게 종이를 먹는 것을 말한다.

• CRLF: 이전 타자기에서의 줄넘김 개념을 그대로 가져온 것
• LF: 현대 디지털 기기에서의 줄넘김을 말하는 것

어찌보면 CRLF는 과거 타자기에서 온 디지털 잔해(digital remnant)일 뿐이다.

OS별 LF, CRLF

일단 요약하자면,

• windows에서는 줄넘김 값으로 CRLF를 기본값으로 많이 쓴다.
• linux에서는 줄넘김 값을 LF를 많이 쓴다.

windows에서 CRLF를 많이 쓰는 이유는 과거에 있던 장치들과 호환하기 위해서였다. 몇몇 장치는 LF를 썼지만, 여전히 CRLF를 쓰는 장치가 있었기 때문이다.

컴퓨터 관점에서의 CR과 LF

컴퓨터의 관점에서는 CR과 LF는 그저 바이트코드이다. 사실 우리가 보는 이 한글과 영어도 컴퓨터에게는 그저 2진수로 이뤄진 숫자일 뿐일 것이다. Carriage Return은 ASCII로 표현하면 13이다. 2진수로는 00001101, Line Feed는 ASCII로 표현하면 10이고, 00001010이다.

LF, CRLF가 발생시키는 문제

그렇다면 Prettier는 왜 ␍을 지우라고 난리법석일까? 그 이유는 바로 Prettier 공식문서 중 End of Line에 대한 부분을 읽어보면 알 수 있다.

간단히 읽어보면 이게 모두 협업 때문임을 알 수 있다.

컴퓨터상에서 LF와 CRLF는 다른 바이트코드로 인식이 되기 때문에 줄넘김을 LF로 하는 것과 CRLF로 하는 것을 git에서는 diff로 인식한다. 그래서 내가 정확히 어떤 소스코드를 변환시켰는지 기록하는데 잡음이 되는 것이다.

Prettier v2.0.0부터는 LF로 강제시켜서 이러한 잡음을 없애겠다는 것 같다. 아무튼 별 거 아닌 오류를 그냥 깊게 파보니까 별의 별 지식을 공부한 것 같다. 생각보다 컴퓨터 업계에서 쓰는 영어는 과거의 물건이나 행동에서 유래한 것들이 많은 것 같다.

레퍼런스

https://stackoverflow.com/questions/53516594/why-do-i-keep-getting-delete-cr-prettier-prettier
https://jw910911.tistory.com/90