[Trouble Shooting] 경로설정..? 이스케이프 시퀀스..?

ESLint 문제해결 : https://whaleinmilktea.tistory.com/82

[Trouble Shooting] Prettier에서 package.json을 자꾸 발목잡을 때 해결방법 + 어찌 해결했더니,,, 또 다른

 

보통 위와 같은 에러는 파일의 경로가 떴을 경우 많이 확인할 수 있다.

따라서, 터미널에 src/tree를 입력하고 본인이 파일구조를 잘못 파악하고 있는지부터 확인했다.

(육안으로 보이는 파일구조에는 아무런 문제가 없어보였기에..)

 

src
├── App.css
├── App.js
├── Components
│   └── Editor.js
├── Page
│   └── \010Board.js
├── index.css
└── index.js

VS Code의 파일구조에서는 확인할 수 없는 이상한 표현이 tree에서는 확인된다.

 

Chat gpt한테 물어보니,  '\010'은 문자열에서 ASCII 코드 8에 해당하는 백스페이스 문자를 의미하고 이는 일반적인 문자열이 아닌 이스케이프 시퀀스 (Escape Sequence)라는 개념으로 인식된다고 한다.

 

어차피 해당 파일에는 <Editor /> 컴포넌트가 조립된 단순한 코드이기 때문에, 지웠다가 다시 만들면 그만이겠으나 해당 오류를 좀 더 명확히 파악하기 위해 살펴보기로 했다.

 

이스케이프 시퀀스란?

이스케이프 시퀀스를 알아보려고 공부하던 차에 본인과 같은 초보 개발자들이 이해하기 쉽도록 잘 정리된 블로그를 발견했다.

참조 블로그 : https://jake-seo-dev.tistory.com/419

이스케이프 시퀀스 (Escape Sequence) 란?

이를 통해 알아본 이스케이프 시퀀스란,,,

원래, 출력이 가능한 문자열 외에 화면에 보이지 않지만 데이터 상에 필요한 여러 내용들이 있다. 이 문자들은 여러 언어와 환경마다 다를 수 있다.

\n : 개행문자 (newline)
\t : 탭문자 (tab)
\r : 캐리지 리턴 (carriage return)
' : 작은따옴표 (single quote)
" : 큰따옴표 (double quote)

예를 들어 자바스크립트의 경우 다음과 같은 예가 있을 수 있다.

// 따옴표 문자열 안에 따옴표 사용 
// 코드에서는 문자열 'He said, "Hello!"' 에서 "이 이스케이프 시퀀스에 해당하며, 출력 시 " 대신 큰따옴표(")가 출력
const string = 'He said, "Hello!"';

// 줄바꿈 문자 출력
// 코드에선 \n으로 줄바꿈을 하지만 실제로는 줄바꿈 출력
console.log('Hello\nWorld');

이와 같이 이스케이프 시퀀스는 실제 처리되는 값과 컴퓨터 언어로 처리되는 값이 다를 때 컴퓨터 언어에 해당하는 부분에 해당하며, 이와 달리 실제 출력물과 같이 보이는 값을 unescape(언이스케이프)라고 한다.

 

이제 문제의 개념을 알았으니, 해결방법을 모색하고자 한다.

일단, chat gpt에서 알아본 .eslintrc.json 파일에서 정규식 표현을 감지하고 이를 수정하는 방법이 있다.
===> 하지만,, 이는 코드에서 필요한 정규식까지 오류처리를 할 가능성이 있기 때문에 제외하기로 했다.

"no-control-regex": "error"

 

두번째로는, 결국 터미널에서 출력된 내용에서 문제를 파악했기 때문에 터미널에서 해결하는 방법이다.
tree src로 파일구조를 출력한 다음에 mv 명령어를 활용하면 파일명을 변경할 수 있고 이때 정규식이 없는 파일명으로 바꿔주면 된다.
===> 결론, 이것도 안됨...

# 그냥 src/\010Board.js src/Board.js로 바꿨더니 안된다...
src/\010Board.js src/Board.js

# chat gpt한테 물어본 다른 식도 했더니 안된다.. 다음과 같은 에러가 뜨면서..
mv src/$(echo -e '010Board.js') src/Board.js

# 힝구...
mv: rename src/010Board.js to src/Board.js: No such file or directory

 

세번째,, 이스케이프 시퀀스의 \010은 null을 의미한다고 한다.
즉, 파일명에 공백이 있다는 뜻이다.......음...
실제 확인해보니... VSC 파일 명에 보일듯 말듯한 공백이 있었다...

 

 

... 예, 잘 렌더링 됩니다 ...

이 글을 도대체 어느 카테고리에 넣어야 할까..ㅠㅠ