역시 내 확장 프로그램은 잘못됐다

안녕하세요. Perfitt 웹 프론트엔드 개발자 mity입니다!

여러분은 개발할 때 어떤 IDE를 이용하시나요? 물론 Android, iOS 그리고 여러 개발 분야에 따라 사용하기 좋은 IDE는 모두 다릅니다. 수많은 개발자 중 웹 프론트엔드 개발자는 주로 Visual Studio Code를 사용하는데요, 사실 VS Code는 IDE가 아닙니다. 기능이 많은 텍스트 에디터일 뿐이죠. 그런데 그 기능이 너무 강력해 너무나도 유용한 텍스트 에디터가 되었습니다. 수많은 확장 프로그램이 무엇이든 열 수 있게 하고 개발 환경을 편리하게 해주거든요.

Youtube에 검색하면 ‘꼭 깔아야 하는 필수 확장 프로그램', ‘개발을 편하게 만들어주는 n가지 확장 프로그램' 이라는 제목으로 확장 프로그램을 추천해주는 영상이 많이 있습니다. 하지만 이것저것 많이 설치하고 설정을 제대로 해주지 않거나 기능이 중복되어 불필요하게 사용하고 있는 확장 프로그램도 어딘가 생기죠.

오늘은 웹 프론트엔드 개발자인 제가 사용하는 확장 프로그램 소개와 여러분도 알고 계셔서 설치는 했지만 사실 설정을 별도로 해줘야 하는 확장 프로그램에 대해 공유해 드리려 합니다. 끝까지 잘 봐주세요!

이 글은 HTML, CSS, Javascript, React JS, SCSS를 사용하는 웹 프론트엔드 개발 환경 위주로 작성된 글입니다.

분명 누구나 알림창을 닫고 있다

Bracket Pair Colorizer - CoenraadS

Bracket Pair Colorizer는 함수의 끝과 끝, 코드 사이에 있는 괄호의 끝과 끝을 하이라이트 해주는 역할을 합니다. (((괄호가 이렇게나 많은))) 코드 속에서 내가 찾고 있는 반대쪽을 비춰주어 가독성에 큰 도움이 되었습니다. 코드가 몇백줄을 넘어갈 때도 스크롤을 하며 끝을 찾기 유용해 개발 환경에 꼭 필요한 확장 프로그램으로 여겨 사용해왔습니다.

“Bracket Pair Colorizer is no longer being maintained.” 라는 메시지를 본 적 있나요? 저는 어느 날 이 메시지를 보고 대수롭지 않게 닫아버렸습니다. 물론 메시지를 닫고 사용하셔도 어느 날 자신의 개발 환경을 부숴버리지는 않습니다. 그렇게 내버려두게 되었죠.

“This project started on 3 Dec 2016. Now 5 years later, it has become a native feature in VSCode.”

어느 날 메시지의 내용이 궁금하여 확장 프로그램 설명 페이지를 들어가서 본 문구입니다. 이 확장 프로그램의 기능이 VS Code 기본 기능으로 제공되었다는 소식이었습니다. 더이상 같은 기능을 하는 확장 프로그램을 설치해둘 필요가 없다는 사실을 알게 되었습니다.

Bracket Pair Colorizer 1, 2는 더이상 별도의 확장 프로그램으로 설치할 필요가 없어졌습니다. 대신 VS Code 설정에서 몇가지 기능을 켜주기만 하면 됩니다.

1. VS Code 설정에 진입하여 검색창에 Bracket 을 입력합니다.
2. Editor > Bracket Pair Colorization: Enabled 체크박스를 클릭해 활성화합니다.
3. Editor > Guides: Bracket Pairs 설정값을 active 로 변경합니다.
   

설정을 모두 마치시면 별도로 설정하지 않은 Bracket Pair Colorizer 기본 설정값이 VS Code에 동일하게 적용됩니다.

---

가끔 알록달록한 색은 좋은 일을 한다

indent-rainbow - oderwat

indent-rainbow는 특정 코드의 끝과 끝을 색으로 칠해주는 확장 프로그램입니다. 함수나 여러 태그의 범위를 한 눈에 볼 수 있어 코드 가독성이 좋아지는 효과가 있습니다. 확장 프로그램이 동작할 언어, 칠할 색상을 커스터마이징 할 수 있으나 저는 기본값으로 사용 중입니다.

코드의 끝과 끝을 찾기 쉽도록 하기 위해 indent-rainbow와 위에서 설명한 VS Code의 Bracket Pair Colorization 기능을 함께 사용하면 코드 범위를 착각하여 괄호 오류를 내는 실수를 줄이는데 큰 도움이 됩니다.

Material Theme - Equinusocio

여러분이 VS Code를 설치 후 처음 실행하면 이런 모습일 겁니다. 물론 기본적으로 제공되는 디자인이 깔끔하고 가벼워보여 기본 테마가 이상하게 느껴지지는 않습니다. 하지만 조금 더 일체감있고 가벼운 디자인을 만나게 된다면 어떨까요? 자신에게 맞춘 각종 커스터마이징에 눈을 뜨게 됩니다. 이번에 설치할 확장 프로그램은 테마입니다.

그동안 설치해오던 방식과 동일하게 VS Code 확장 프로그램 마켓플레이스에서 Material Theme 를 설치합니다. 설치가 끝나면 아래 사진처럼 테마를 선택하는 팝업이 표시됩니다.

여러가지 테마 중 마음에 드는 걸 선택해보세요. 저는 Material Theme Darker를 사용합니다.

이제 파란색이었던 하단 상태 표시줄이 전체 배경색과 비슷해지고 여러 디자인 요소의 모습이 변경되었을 겁니다. 꼭 필요한 확장 프로그램은 아니지만 제 에디터 사용 경험에 큰 도움을 주는 확장 프로그램이었습니다.

Material Icon Theme - Philipp Kief

아이콘 또한 입맛에 맞게 커스터마이징하여 테마와 곁들이면 좋습니다. 아래는 VS Code의 기본 아이콘입니다.

이미지를 보시면 자바스크립트 파일은 노랑색 JS 글자로 아이콘이 제공되고, SVG 파일은 보라색 아이콘으로 제공되는 것을 볼 수 있습니다. 여기서 가장 큰 문제는 폴더 아이콘이 없다는 사실입니다.

웹 프론트엔드를 개발할 때 여러 파일을 사용하게 되는데, 너저분하게 빼놓는 것이 아니라 용도에 맞게 폴더별로 구분하여 보관합니다. 개발할 때 사용하는 소스 파일은 src 폴더, 그 안을 2차로 분류하여 이미지 파일은 images 폴더에, 라우팅 주소별 JS 파일은 routes 또는 pages 폴더에 넣어두죠.

폴더 이름을 외우는 건 가능하지만 파일이 너무 많아 한번에 찾으려면 어떡해야 할까요? 한 눈에 들어오는 그림이 제격일 겁니다.

Material Icon Theme를 적용한 상태에서 촬영한 스크린샷입니다. 보시다시피 폴더 아이콘이 있는데, 유형별로 다른 폴더 아이콘이 사용되고 있는 것을 볼 수 있습니다.

이제 눈으로 아이콘을 먼저 보고 글자를 읽을 수 있게 되었습니다. 기존보다 훨씬 파일을 찾기 쉬워졌고 아이콘 전체적으로 크기가 커 한 눈에 들어옵니다. 이제 스크롤을 내리면서 아이콘을 보고 멈추기 쉬워지겠죠?

이 확장 프로그램은 VS Code 확장 프로그램 마켓플레이스에서 검색 후 설치하시면 아래와 같은 팝업이 우측 아래에 표시됩니다.

활성화 버튼을 클릭하기만 하면 달라진 아이콘을 볼 수 있습니다.

---

언제든, 자동화는 기대에 부응한다

Auto Close Tag - Jun Han

이 확장 프로그램은 위 이미지를 보시면 바로 이해하실 수 있습니다. 바로 HTML의 태그를 열었을 때, 닫는 태그를 자동으로 코드 뒤에 추가해주는 것이죠.

닫는 태그를 타이핑 할 필요가 없어지고, 태그를 열자마자 닫히는 지점까지 완성되기 때문에 Lint 오류도 만나지 않게 됩니다. 그저 태그를 열고 바로 안에 들어갈 내용만 넣으면 됩니다.

Auto Rename Tag - Jun Han

위에서 태그를 자동으로 닫아주는 자동완성 확장 프로그램을 소개해드렸는데요, 이번에는 태그 수정마저 편리하게 만들어주는 확장 프로그램입니다.

이미지를 보시면 알아보셨겠지만 이 확장 프로그램은 여는 태그 닫는 태그 어디에서나 태그 수정 시 반대쪽 태그 이름도 자동으로 변경해주는 확장 프로그램입니다...만 태그 수정 시 타이핑이 너무 빠르면 따라오지 못하는 것 같아 조금 아쉽습니다.. ㅠㅠ

Prettier - Prettier

많은 개발자가 사용하고, 코드의 가독성을 유지하기 위해 필요한 확장 프로그램입니다. 파일을 저장할 때마다 코드 포맷터로 동작하여 작성한 코드의 띄어쓰기, 괄호, 줄바꿈, 세미콜론 등 다양한 문법을 검증하여 수정해줍니다.

저는 그동안 VS Code 확장 프로그램 마켓플레이스에서 설치만 하면 잘 동작하는 줄 알았습니다. 하지만 실제로 동작하는 건 VS Code에 있는 기본 Javascript 포맷터였고, 저는 그동안 Prettier를 사용하지 않고 있던 거였습니다.

Prettier를 설치하신 후 VS Code 설정에 진입하여 검색창에 Default Formatter 를 입력 후 Editor: Default Formatter 선택란을 클릭합니다. 그 중 Prettier - Code formatter를 찾아 선택해줘야 Prettier가 동작합니다.

Prettier를 설치, 설정까지 마쳤다면 이제 코드 입력 후 저장해보세요. 스타일 요소로써 수정할 수 있는 코드가 있다면 즉시 수정하여 저장됩니다.

---

역시, 도구는 최강의 파트너다

CSS Peek - Pranay Prakash

HTML과 CSS을 각각의 파일로 분리하여 개발하고 있는데, HTML 태그에 넣은 클래스명에 무슨 스타일 속성이 구성되어 있는지 알아야 할 때가 많습니다. 그럴 때 여러분은 CSS 파일을 열어 클래스명을 찾을 때까지 돌아다니시나요?

이 확장 프로그램은 HTML 태그 속 클래스명이나 아이디와 같은 선택자 위에 마우스를 올리는 것만으로 스타일 속성을 팝업으로 보여주는 도구입니다. 클릭 시에는 참조하고 있는 CSS 파일을 열어주기도 하죠.

아래 이미지를 보시면 단번에 이해하실 수 있습니다.

사용법은 아주 간단합니다. HTML 또는 JS 파일을 열고 Ctrl 또는 Command 키를 누른 상태에서 마우스를 클래스 또는 아이디 위에 올려보세요. 팝업으로 CSS 파일에 있는 스타일 속성이 표시됩니다.

아까와 같은 키를 누른 상태에서 마우스를 클래스 또는 아이디 위로 가져간 후 클릭해보세요. 팝업이 뜨는 것이 아닌 CSS 파일이 열려 찾을 필요도 없이 바로 수정할 수 있습니다.

Reactjs code snippets - charalampos karypidis

빈 HTML 파일을 생성한 후 ! 를 입력하여 기본 템플릿을 쉽게 구성하듯, 이 확장 프로그램은 단 몇 글자로 React 컴포넌트나 함수 템플릿을 구성할 수 있는 도구입니다.

사용하기 간단하고 어렵지 않아 설명할 필요가 없기도 한 확장 프로그램입니다. 저는 주로 rsc 로 React 함수형 컴포넌트를 간편하게 생성하고 있습니다. 더 많은 단축어를 보시려면 이 페이지를 열어보세요!

---

적어도, 이제는 틀리지 않기를 바라며

이렇게 제가 사용하고 있는, 제가 설정하지 않았던, 더이상 사용하지 않아도 되는 확장 프로그램에 대해 알아봤습니다. Git을 사용할 때 도움이 되는 확장, SVG 파일을 이미지로 볼 수 있는 확장, 다른 사람과 같이 코딩하는 확장 등 제가 사용하고 있는 것들은 더 많지만 이번에는 로컬 환경에서 개발할 때 도움이 되는 확장 프로그램 위주로 소개해봤습니다.

다른 개발자가 제공해주신 확장 프로그램 덕에 제 개발 환경이 더욱 편리해지고 VS Code 사용 경험 또한 만족스러웠는데 이 글을 보신 여러분도 개인 취향, 편리함, 만족감까지 모두 충족하는 개발 환경을 갖추시길 응원합니다. 감사합니다!