비주얼 스튜디오 코드 VSC (Visual Studio Code) 의 설치와 사용

비주얼 스튜디오 코드 VSC (Visual Studio Code) 의 설치와 사용

Contents

 

1. 코딩과 에디터의 개념

그대 그리스와 중세를 거쳐 현대에 이르기까지 교육에서 교양 교육이라고 말하는 것들이 있다. 그 시대를 살아가기 위해서 기본적으로 습득하고 있어야 하는 내용들이다. 지금 대학에서 교양 과목과 전공과목으로 나누어져 있는 과목 중에서 교양과목들의 면면을 살펴보기를 바란다.

어떤 과목들은 그대 그리스의 교육에서 뿌리가 내려져 지금까지 이어져 온 과목들이 있다. 문법, 논리학, 수사학을 일컫는 트리비움(trivium) 계열의 교양과목들이다.

전통적인 교양과목의 틀이 몇 년 전부터 변화하고 있다. 인공지능의 영향으로 대학의 교양과목에 코딩이라는 과목이 신설되기 시작했다. 예전에는 소프트웨어 공학을 전공한 개발자들의 전유물이었던 코딩이 이제는 누구나 코딩을 해야 하는 시대를 살아가고 있다.

코딩을 교양으로 인식하고 살아가야 하는 이유는 인공지능과 협업하고 자신의 업무를 자동화하여 업무 생산성을 높일 수 있기 때문이다. 인간도 소통을 위해 언어를 사용하듯이 인공지능과 소통하기 위해서는 컴퓨터가 인식할 수 있는 언어가 필요하다. 인간의 언어처럼 컴퓨터가 알아들을 수 있는 언어도 많다. 특정 언어를 선택하여 코딩하기 위해서는 에디터가 필요하다. 초창기에는 메모장을 사용하여 코딩한 시절도 있었다. 물론 지금도 메모장으로 코딩을 할 수 있다. 메모장에서 코딩한다는 것은 많은 불편함이 있다. 다행히 코딩을 잘할 수 있도록 해주는 도구도 인공지능만큼 진화했다. 특정 코딩 언어에 최적화된 에디터도 있다.

많은 에디터 중에서 어떤 에디터를 선택하면 좋을까?

추천을 한다면

• 무료로 사용할 수 있고,
• 편리한 기능도 많으면서 확장성이 있고
• 다수의 사용자층을 확보하고 있는
• 마이크로소프트사의 비주얼 스튜디오 코드를 추천한다.

초보자가 사용하기에 좋은 비주얼 스튜디오 코드 설치와 세팅 방법을 소개하고자 한다.

 

2. 비주얼 스튜디오 코드(Visual Studio Code)는?

비주얼 스튜디오 코드는 다양한 언어를 사용하여 코딩할 수 있는 에디터이다. 2016년 4월 15일 정식판이 발표되어 윈도우, macOS, 리눅스에서 사용할 수 있다.

비주얼 스튜디오 코드의 강점은 확장성이다. 새로운 기능을 추가하여 편리성을 극대화할 수 있다.

심지어 특정 언어에 특화된 IDE(통합환경; Integrated Development Environment)로도 사용할 수 있다.

2018년 6월 4일 마이크로소프트가 GitHub을 인수하면서 비주얼 스튜디오 코드는 개발자가 가장 많이 사용하는 에디터가 되었다.

 

 

3. 비주얼 스튜디오 코드의 다운로드

비주얼 스튜디오 코드를 다운로드 받으려면 비주얼 스튜디오 코드에 대한 서비스 홈페이지에 접속해야 한다.

1. 방법1 : 포털사이트 검색창에서 ‘비주얼 스튜디오 코드’를 검색

2. 방법2 : code.visualstudio.com 주소를 사용하여 방문

 

①을 클릭하여 사용하는 운영체제를 선택한다.

 

② 아래 화살표 중에서 왼쪽 또는 오른쪽 화살표 중에서 원하는 화살표를 클릭하면 다운로드된다.

왼쪽과 오른쪽 화살표의 차이는 다음과 같다.

왼쪽 Stable : 안정화된 정식 버전

오른쪽 Insiders :  최신 기능을 사용할 수 있는 베타버전

 

 

4. 비주얼 스튜디오 코드의 설치

① 다운로드한 파일을 실행한다.

 

② [다음] 버튼을 누른다.

 

③ [다음] 버튼을 누른다.

 

④ ‘바탕화면에 바로가기 만들기’항목의 체크박스에 체크하고 [다음] 버튼을 누른다.

 

⑤ [설치] 버튼을 누른다.

 

⑥ [종료]버튼을 누른다.

 

 

5. 비주얼 스튜디오 코드의 초기 설정

자신이 사용할 언어에 최적하고 사용하면 편리하다. 웹 프로그램언어 HTML에 최적화하는 방법을 알아보자.

 

비주얼 스튜디오 코드의 처음 화면은 사용컴퓨터 환경마다 다를 수 있지만 이런 모습니다.

 

1) 배경 테마 색 변경하기

(1) 화면 왼쪽 하단의 관리 아이콘(①)을 클릭하여 메뉴에서 [테마]-[색 테마]를 선택한다.

 

(2) 자신의 취향에 맞는 색 테마를 선택한다.

 

(3) 아래 화면은 ‘다크+’를 선택한 화면이다.

 

2) 비주얼 스튜디오 코드의 확장 프로그램 설치

(1) Korean Language Pack

-한국어 확장팩 설치

비주얼 스튜디오 코드는 설치할 때 운영체제의 언어를 인식하여 한글 윈도우가 설치되었다면 한국어 확장팩이 자동으로 설치된다. 어떤 이유에서든지 한국어 확장팩이 설치되지 않아 영문으로 메뉴가 보인다면 다음의 방법으로 한국어 확장팩을 설치한다.

 

왼쪽 상단에 다섯 개의 아이콘이 있다.

 

⑤ 번 아이콘을 클릭하면 확장팩을 설치할 수 있는 화면이 나온다.

왼쪽 검색창에서 ‘Korean Language Pack’을 입력하여 아래쪽 검색 결과 목록에서 ‘Korean Language Pack for Visual Studio Code’를 선택한다.

 

오른쪽 화면에서 [설치] 버튼을 눌러 한국어 확장팩을 설치한다.

 

다른 확장팩도 같은 방법으로 검색창에서 검색하여 설치할 수 있다.

 

(2) HTML Snippets

-태그의 <> 자동 입력 확장팩

HTML 태그를 사용할 때 기본적으로 <>을 사용해야 한다. 예를 들어 table을 입력하고 엔터키를 누르면 <table>와 같이 자동으로 <>를 만들어 준다.

 

(3) Auto Close Tag

-HTML Tag 자동 입력 확장팩

태그를 구성하는 <> </>를 자동으로 입력해 준다.

 

(4) Live Server

-작성한 코드를 웹페이지에서 확인할 수 있는 확장팩

작성된 HTML 코드가 원하는 형태로 보이는지를 확인해 볼 수 있는 확장팩이다.

 

사용 방법은 코드 Live Server 확장팩을 설치하고 원하는 코드를 입력한다. 입력된 코드가 문제가 없는지 확인하기 위해 코드 입력창에서 마우스 오른쪽 단추를 눌러 바로가기 메뉴에서 ‘Open with Live Server’를 선택하면 결과를 확인해 볼 수 있다.

 

(5) Prettier-code formatter

-코드를 깔끔하게 정렬해 주는 확장팩

잘 정리된 코드는 나중에 분석하기도 쉽니다. 코드를 저장할 때 미리 설정에서 정해 놓은 포맷 형태에 맞추어 보기 좋게 저장해 준다.

 

Prettier-code formatter 확장팩을 사용하기 위해서는 설치하고 설정해 주어야 하는 내용이 있다.

 

① 왼쪽 하단의 관리 아이콘을 클릭하고 메뉴에서 [설정]을 선택한다.

② 오른쪽 상단 검색창에서 ‘editor format on save’를 입력하고 엔터키를 누른다.

첫 번째 항목 Format On save에 체크를 한다.

 

 

③ editor Default Formatter로 다시 검색하여 Default Formatter를 Prettier - Code formatter로 변경한다.

 

④ 코드가 입력된 상태에서 저장하거나 코드 창에서 Alt + Shift + f를 누르면 깔끔하게 정리된 모습을 볼 수 있다.

 

6. 마무리

많은 코딩 에디터 중에서 어떤 에디터를 선택하느냐는 사용자가 주관적인 입장에서 편한 에디터를 선택한다. 만약 코딩 첫 입문자라면 다수가 사용하는 Visual Studio Code 에디터를 사용하는 것이 합리적인 선택이라 생각한다.