본문 바로가기
Trend

[Visual studio code] 비쥬얼 스튜디오 코드 모든것 (다운로드, 설치, 화면, 사용법, 사용해야 하는 이유, 장단점)

by stepbyme 2023. 9. 6.
반응형

1. Visual Studio Code 소개

Visual Studio Code(이하 VS Code)는 Microsoft에서 개발한 무료, 오픈 소스 코드 편집기입니다. VS Code는 IDE(통합 개발 환경)의 한 종류입니다. 가볍지만 강력한 소스 코드 편집기로, 다양한 프로그래밍 언어를 지원하며 확장 기능을 통해 기능을 추가할 수 있습니다.

2. IDE(Integrated Development Environment)란?

IDE는 '통합 개발 환경'의 약자로, 코드 편집, 디버깅, 컴파일 등의 기능을 한 곳에서 제공하는 도구입니다. 프로그래밍을 할 때 필요한 모든 도구들이 한 곳에 모여 있는 것이라고 생각하시면 됩니다. IDE의 사용은 개발 프로세스를 효율화하며, 오류를 빠르게 찾아 수정할 수 있게 도와줍니다. 기능으로는 다음과 같은 기능이 있습니다. 

코드 편집: IDE에서는 코드를 쓰고 수정 가능 합니다. 

디버깅: 코드의 에러가 발생할 때 IDE는 이런 문제들을 찾아주고, 어디가 문제인지 알려줍니다. 

컴파일: 코드를 다 작성하면, IDE는 그 코드를 컴퓨터가 알아들을 수 있게 변환해 주는 것입니다. 

 

3. IDE 사용률 (Visual studio code사용률)

2022년도 기준으로 Visual studio code가 개발자들에게 가장 많이 사용되는 IDE이며 두 번째는 Visual studio입니다. 

2022년도에 많이 사용되는 IDE
2022년도에 가장 많이 사용되는 IDE (출처 : Stack Overflow)

4. Visual Studio Code vs Visual Studio 차이


Visual Studio Code: 경량화된 코드 편집기로, 다양한 프로그래밍 언어를 지원하며 확장 기능을 통해 기능을 추가할 수 있습니다.
Visual Studio: 통합 개발 환경(IDE)으로, 강력한 디버깅, 코드 관리, 데이터베이스 관리 기능 등을 포함하고 있습니다.


5. Visual Studio Code 다운로드 받는법

Visual Studio Code 공식 홈페이지에 접속합니다. https://visualstudio.microsoft.com/ko/#vscode-section 
원하는 OS(Windows, macOS, Linux)에 맞는 버전을 선택합니다.

visual studio code 다운로드
Visual studio code 다운로드


'다운로드' 버튼을 클릭하여 설치 파일을 다운로드합니다.

다운로드한 파일을 실행하여 설치를 진행합니다.

6. Visual Studio Code 사용법

1) 새 파일 또는 폴더 열기


VS Code를 처음 실행하면 왼쪽 상단에 '파일' 메뉴를 클릭하여 새 파일 또는 폴더를 열 수 있습니다. 또는 단축키 Ctrl + N (Windows) 또는 Cmd + N (Mac)을 사용하여 새 파일을 빠르게 열 수 있습니다. 

visual studio code 화면 새파일
새로운 파일 열기

다음과 같이 원하는 폴더를 선택합니다.  

파일 선택
파일 선택

다음과 같이 "GETTINGSTARTED"라는 폴더가 열린 것을 확인할 수 있습니다. 

workspace 설정
폴더 확인

2) Visual studio code 화면 살펴보기 

 

먼저 Activity bar를 살펴보겠습니다. 가장 좌측에 있는 여러 아이콘이 모여있는 메뉴입니다.

 

위에서부터 아이콘을 차례대로 확인해 보겠습니다.

- Explorer : 폴더 및 파일을 보기 위한 아이콘
- Search: 워크스페이스 안에서 텍스트를 검색하거나 찾아서 바꾸기 위한 아이콘
- Source control: 깃허브 안에 있는 코드의 변경사항을 확인하기 위한 아이콘
- Run and debug: 코드를 실행하고 디버깅하기 위한 아이콘
- Extension: 코드 에디터에 새로운 기능을 추가하기 위한 아이콘

activity bar
Activity bar

하단에는 상태바가 있는데

 

좌측하단에는 에러 또는 주의가 몇 번 있었는지 확인할 수 있고 
우측하단에는 현재의 코드가 몇 번째 라인인지 그리고 무슨 프로그래밍 언어를 쓰는지를 확인할 수 있습니다.  

상태바
하단의 상태바

하단의 상태바 위에는 아웃풋, 디버그 정보, 에러 정보 등을 확인할 수 있는 터미널이 있습니다.

터미널을 열려면 다음의 단축키를 사용하셔도 됩니다. 

터미널
터미널

 

다시 상단의 New File을 선택하고 코딩을 시작하면 됩니다. 

 

3) 언어 선택

 

VS Code의 가장 큰 장점 중 하나는 다양한 확장 기능을 설치하여 기능을 확장할 수 있다는 것입니다. 왼쪽 사이드바의 Extension 아이콘을 클릭하여 원하는 확장 기능을 검색하고 설치할 수 있습니다. 예를 들어 파이썬의 경우에는 Extension 아이콘을 선택하셔서 python을 install 해주시기 바랍니다. 해당 언어를 설치를 안 하는 경우 IntelliSense 기능이 작동을 못합니다.  

파이썬 선택
파이썬 선택


4) Git 통합 기능사용하여 버전관리


VS Code는 Git과의 통합 기능을 제공합니다. 이를 통해 코드의 버전 관리를 쉽게 할 수 있습니다. 변경 사항을 추적하고, 커밋하고, 푸시하는 등의 Git 작업을 VS Code 내에서 직접 수행할 수 있습니다.

5) HTML 파일 드래그 & 드롭


HTML 파일을 작업 영역으로 드래그 앤 드롭하여 가져올 수 있습니다. 또한 Live Preview 확장을 사용하여 HTML의 미리 보기를 볼 수 있습니다.

6) 테마 변경


Visual Studio Code는 테마를 변경하여 외관을 사용자 지정할 수 있습니다. 다양한 테마 중에서 원하는 것을 선택하여 적용할 수 있습니다.


7. Visual Studio Code 장점

- 다양한 프로그래밍 언어 지원
- 오픈 소스 및 무료
- 활발한 커뮤니티와 다양한 확장 기능
- Git 통합 및 디버깅 도구 포함


8. Visual Studio Code 단점

- 특정 언어나 프레임워크에 대한 지원이 제한적일 수 있음


9. Visual Studio Code 유의할 점

확장 기능 설치 시 호환성 및 안정성을 확인해야 합니다.
또한 주기적으로 업데이트를 확인하고, 최신 버전을 유지하는 것이 좋습니다.

 

반응형

댓글