외부 CSS 파일을 사용하게 될 경우, VSCode는 CSS 속성에 대한 자동완성 기능을 제공해준다. 모든 속성명칭을 암기하고 있는게 아니라면, 암기하고 있더라도 일일이 타이핑할 시간이 소모되고 오타에 대한 위험성도 높아진다. 따라서 이 자동완성 기능은 간단하지만 상당한 편의성을 제공해주고 있다.

그런데 CSS-in-JS, styled-components의 경우 기본적으로 CSS 파일이 아니기 때문에 이런 자동완성 기능이 제공되지 않는다. CSS 속성 자체는 문자열 취급이라서 자동완성도 오타 감지도 되지 않기 때문에 개발 효율성이 상당히 떨어지고 개발자로 하여금 많은 피로감이 야기될 수 밖에 없다.

개발에 있어 발생하는 다양한 문제와 크고 작은 불편함을 해소하기 위해서 VSCode는 다양한 확장 프로그램들을 그 자리에서 바로 설치하여 사용할 수 있도록 제공해주고 있다.

1. vscode-styled-components!

설치법은 간단하다, VSCode의 확장 프로그램 탭에서 검색 후 설치버튼만 눌러주면 바로 적용된다.

사용법은 더 간단하다! 확장 프로그램이 제대로 작동한다면 문자열 취급받던 styled-components 내부의 CSS 속성들이..

하나의 제대로 된 속성으로 인정받아서 자동완성 기능은 물론, 에러 검사까지 자동으로 이루어진다!

2. not working with styled components!!

갑자기 잘 되던 확장 프로그램이 동작하지 않는다! 확장 프로그램 재설정, 재설치까지 해보았음에도 기능이 아예 먹통이 되어버렸다. 구글링 결과 다음과 같은 원인과 해결방법을 찾을 수 있었다.

• 하나, VSCode 혹은 확장 프로그램 버전의 문제.
  -> 확장 프로그램은 MS가 직접 관리하는게 아니기때문에 서로의 버전 업데이트 이후 버그 등의 이유로 기능이 작동되지 않을 수 있다. 추가 업데이트를 기다리거나 버전을 다운그레이드하면 된다. (나는 확장 프로그램 다운그레이드로 문제를 해결하였다.)

• 둘, 확장 프로그램끼리의 충돌.
  -> 사람에 따라 다르지만 VSCode에서 사용하고 있는 확장 프로그램의 갯수나 종류는 다양할 수 밖에 없다. 필수적인 기능부터 부가 기능, 취향의 영역까지 확장 프로그램이 할 수 있는 것들이 다양하기 때문. (나는 사용하고 있는 확장 프로그램이 몇 개 되지 않는데다가 반수 이상은 UI 수정쪽이라서 충돌할 여지는 없었다.)

• 셋, VSCode에 이상이 발생.
  -> 버전 업데이트 전후로 구성 파일에 문제가 생길수도 있다고 한다. VSCode 삭제 후 재설치하면 해결된다.

• 확장 프로그램 다운그레이드의 경우, VSCode의 마켓플레이스에서 이전 버전을 제공할 경우 가능하다. 다만 vsix라는 생소한 확장자를 가지고 있는데, 파일 다운로드 이후 VSCode의 명령어창에서 다음과 같은 명령어를 입력해주면 출력되는 확장 프로그램 설치 파일 선택창을 통해 프로그램 설치를 할 수 있다.