🚫 문제
vscode를 초기화, 재설정 하는 과정에 styled-componets, emotion 방식으로 백틱 내 작성한 css 내용들이 위와 같이 텍스트화가 되어 나온 것이다. 웹 서버를 실행했을 때 문제는 없었지만, 텍스트화가 되면 속성 처리가 안 되기 때문에 formatting이나 자동완성 기능을 지원하지 않아 css 코드 작성에 어려움이 생긴다.
🚀 해결 시도
-
처음에는 내가 이제 막 타입스크립트를 써보기 시작하는 단계라 이것이 타입스크립트 오류라 생각하고 관련 내용으로 tsconfig.json 등 관련 속성들을 이것저것 수정해보았다.
-
하지만 리액트로 된 프로젝트에서도 같은 오류가 났다.
.ts뿐만 아니라.tsx,.jsx에서도 같은 오류가 났고,.css파일에서div { width: 100vw; }와 같이 기본 스타일 작성 방법으로 했을 때만 오류가 나지 않았다. 여기서 오류가 타입스크립트 오류가 아님을 깨달았다. -
전반적인 파일에서 오류가 나는 거라면 저 css 백틱 구조가 문제라고 생각했고, 백틱 내부 요소 인식과 관련된 속성 설정이 있는지 찾아보았으나 해결 방법을 찾지 못했다.
-
그 다음은 css를 가져오는
emotion/react라이브러리의 문제를 의심했다. emotion의 css를 쓰려면 어떠한 설정이 필요하다던가 이런 쪽을 알아보았다. 그치만 이것 역시 유용한 정보는 없었다.
✅ 해결
그러던 중 나와 비슷한 증상에 대한 질문글을 발견했다. 이 경우 emotion이 아니라 styled-componets를 사용한 케이스였지만, 문제는 동일한 문제였기에 아래 나온 해결 방법을 그대로 따라 했다.
백틱 내부 색상 - 인프런 | 커뮤니티 질문&답변
✨ 해결 방법은 VSCode에서 vscode-styled-components Extension을 까는 것이다.
놀랍게도 이거를 깔자마자 오류가 너무나 쉽게 해결되었다...;; 원래 속성 형식으로 잘 보이고 formatting과 자동완성도 잘 작동한다.
🧐 원인
오류를 해결하고, 내가 초기화 전 깔았던 Extension 리스트를 보니 해당 Extension이 떡하니 보였다. 이번 프로젝트는 styled-components 대신 emotion을 쓰기 때문에 굳이 안 깔고 있었는데 그게 문제였던 것이다. 이름 때문에 emotion과도 호환될 줄은 전혀 예상하지 못했다...해결은 했지만 이렇게 간단한 거에 몇 시간을 날렸다고 조금 허무했다😇
