우선 자바스크립트를 공부하기에 앞서, Visual Studio Code에서 제공하는 확장 프로그램이란 무엇인지 알아보고 확장 프로그램을 설치하는 방법과 사용하는 방법 그리고 초보자에게 유용한 확장 프로그램에는 무엇이 있는지 알아보겠습니다.
확장 프로그램의 개요
Visual Studio Code(이하 VS code)의 확장 프로그램(Extensions)은 기본 편집기 기능을 확장하거나 새로운 기능을 추가하는 소프트웨어 컴포넌트입니다. VS code는 경량화된 기본 편집기로 시작하지만, 확장 프로그램을 통해 다양한 기능을 추가할 수 있으며, 개발자들은 자신들만의 개발 환경을 손쉽게 구성해 개발 효율성을 크게 향상할 수 있습니다. 확장 프로그램은 주로 Visual Studio Code Marketplace를 통해 배포되며, 사용자는 이곳에서 다양한 확장 프로그램을 검색하고 설치할 수 있습니다.
확장 프로그램 설치 및 관리
VS Code 내에서 확장 프로그램을 검색하고 설치할 수 있으며 좌측 사이드바에서 확장 프로그램 아이콘(위 캡쳐화면에서 오른쪽 네모 아이콘)을 클릭하거나 “Ctrl + Shift + X” 단축키를 사용해 접근할 수 있습니다. 검색어를 입력하면 관련 확장 프로그램이 표시되며, 원하는 프로그램을 선택하고 “Install”버튼을 클릭하면 설치됩니다. 설치된 확장 프로그램은 확장 프로그램 패널에서 확인하고 관리할 수 있으며 확장 프로그램을 비활성화하거나 제거할 수 있습니다.
첫 번째 추천 프로그램 Error Lens
Error Lens는 코드 작성 중 발생하는 오류와 경고를 더욱 직관적이고 명확하게 표시해 주는 확장 프로그램입니다. 오류와 경고를 코드 편집기 내에서 더욱 두드러지게 빨간색으로 어떤 오류인지 시각화해 표현해 주며,이를 통해 개발하면서 코드 문제를 신속하게 식별하고 해결할 수 있습니다.
각각 코드 라인에 발생한 오류와 경로를 그 라인 바로 옆에 직접적으로 표시하며, 오류 메시지를 코드 바로 옆에 보여줌으로써 문제를 더 쉽고 빠르게 인식할 수 있습니다. 위에 캡처화면 중 아래 코드 예시 화면을 참고하시면 쉽게 이해하실 수 있습니다.
두 번째 추천 프로그램 Live Server
Live Server 확장 프로그램은 웹 개발자들이 HTML, CSS, JavaScript 파일을 작성할 때 실시간으로 변경 사항을 확인할 수 있게 해주는 도구입니다. 이것을 사용하면 로컬 개발 서버를 실행하여 브라우저에서 파일 변경 내용을 자동으로 새로고침 해주는 기능을 제공받을 수 있습니다. 이를 통해 개발 속도를 향상하고,실시간 피드백을 받을 수 있습니다.
위와 동일한 방법을 통해 Live Server를 검색 후 설치해 사용하면 되며, HTML 파일을 열고 우측 하단의 “Go Live” 버튼을 클릭하거나, HTML 파일을 마우스 오른쪽 버튼으로 클릭한 후 “Open with Live Server” 옵션을 선택해 실행할 수도 있습니다. 서버는 기본적으로 “http://127.0.0.1:5500”주소에서 실행되며, 다른 포트에서 서버를 실행하거나 Cross-Origin Resource Sharing으 지원하여 다른 출처에서 리소스를 불러오는 작업을 테스트할 수도 있습니다.
세 번째 추천 프로그램 Beautify
Beautify 확장 프로그램은 VS code에서 코드 포맷팅을 자동으로 수행해 주는 확장 프로그램입니다. 이것은 JavaScript, JSON, CSS, HTML 등의 코드를 일관된 스타일로 정리하여 가독성을 높이고, 유지보수성을 향상시키는데 도움을 줍니다.
코드의 들여쓰기, 공백, 줄바꿈 등을 일관된 스타일로 정리해 주며,코드를 읽기 쉽고 유지보수 용이하게 만들어 줍니다.
참고로 확장프로그램 시 제목에 취소선이 그어져 있는 것은 사용은 할 수 있지만 더 이상 유지보수가 되지 않는 프로그램을 의미합니다. Beautify 역시 이제 관리가 종료됐지만 아직 사용하기에는 좋아 추천드립니다.
네 번째 추천 프로그램 Auto Rename Tag
Auto Rename Tag는 HTML, XML, JSX 등 태그 기반 마크업 언어를 작성할 때 유용한 확장 프로그램으로 여는 태그와 닫는 태그의 이름을 자동으로 동기화하여, 태그 이름을 수정할 때 발생할 수 있는 실수를 줄이고 개발 효율성을 높여주는 효과가 있습니다.
즉, 여는 태그의 이름을 변경하면, 닫는 태그의 이름도 자동으로 변경되어 개발 시 실수를 줄일 수 있습니다. 별도의 설정이나 명령 없이, 태그를 수정하기만 하면 자동으로 닫는 태그를 변경합니다.
다섯 번째 추천 프로그램 ES7+ React/Redux/React-Native snippets
ES7+ 확장 프로그램은 VS code에서 React, Redux 그리고 React Native 개발을 더욱 빠르고 효율적으로 할 수 있게 해주는 코드 스니펫 모음입니다. ES7이상의 JavaScript 기능을 활용한 스니펫들을 제공하여 반복적인 코딩 작업을 줄이고 개발 생산성을 향상합니다.
해당 프로그램을 설치 후 코드 편집기에서 특정 스니펫의 접두어를 입력하고 Tab 키를 누르면 해당 스니펫이 자동으로 확장됩니다. 예를 들어 rafce를 입력 후 Tab키를 눌러주면 아래 React Arrow Function Component with export 코드가 자동으로 작성됩니다.
다른 접두어들은 아래와 같은 접두어들이 있습니다.
rcc : React Class Component
useState : React useState Hook
redux : Redux boilerplate
rcredux : Redux Connected Component
rnfs : React Natvie Functional Component with Stylesheet
마무리
이 외에도 정말 많은 종류의 확장 프로그램들이 있으며, 개발자들에게 매우 강력한 도구로 맞춤형 개발 환경을 구성하고 효율적으로 작업을 진행할 수 있도록 도와주는 정말 좋은 기능입니다. 대표적으로 5가지만 소개했지만 다른 프로그램들도 검색해 자신에게 맞는 프로그램을 설치해 활용하면 더욱 손쉽게 개발할 수 있으니 참고하시면 좋을 것 같습니다.