카테고리 없음

Visual Studio Code 설치하는 방법

HSCV 2022. 10. 20.

Visual Studio Code 설치하는 방법

 

  • 코딩용 텍스트 에디터란?
  • Visual Studio Code 설치하는 방법
  • Visual Studio Code 사용법 안내
  • 마무리

 

코딩용 텍스트 에디터란?

 

 안녕하세요. 오늘은 컴퓨터로 코딩을 할 때 도움을 주는 텍스트 에디터 프로그램에 대해서 알아보도록 하겠습니다. 코딩을 본격적으로 시작하게 되면 각각의 코딩 언어에 맞는 코드 문법을 배우고 작성을 하게 됩니다. 이때 컴퓨터로 코드를 작성하게 되는데 코드 작성 시 도움을 주는 프로그램을 텍스트 에디터라고 합니다.  

 

 Window에서 제공하는 메모장도 텍스트 에디터 종류 중 하나입니다. 하지만 메모장은 코딩을 할 때 활용하기가 불편한 점이 있습니다. 그래서 코딩을 할 때 사용하는 프로그램으로 SubLime Text, Brackets, Atom, Visual Studio Code와 같은 다양한 코딩용 텍스트 에디터 프로그램들이 존재합니다.

 

 오늘은 이중에서 Microsoft 사에서 개발한 텍스트 에디터 프로그램 중 하나인 Visual Studio Code를 같이 설치해보도록 하겠습니다.

 

 

 

Visual Studio Code 설치하는 방법

 

 먼저 구글에서 Visual Studio Code를 검색합니다. 또는 웹사이트 주소창에 https://code.visualstudio.com 을 검색합니다. 검색을 하면 Visual Studio Code 공식 홈페이지에 접속이 됩니다.

 

 이후 자신의 OS, 운영체제에 맞는 프로그램을 설치할 수 있는 버튼이 보입니다. 버튼을 클릭해서 설치 프로그램을 다운로드를 진행합니다.

 

 만약에 내가 사용하는 컴퓨터의 운영체제가 Windows가 아닌 다른 운영체제일 경우에는 화살표를 클릭하여 내가 사용하는 컴퓨터의 운영체제에 호환이 되는 다운로드 파일을 설치합니다. 

 

 

 

Visual Studio Code 사용법 안내

 

 Visual Studio Code를 설치한 후 처음에 뜨는 화면으로 Welcom 페이지를 볼 수 있습니다. Welcom 페이지는 새로운 파일을 생성하거나 폴더를 열거나 최근 작업한 파일 목록을 확인할 수 있는 기본적인 페이지입니다.

 

 왼쪽 사이드 바에 보이는 첫번째 아이콘인 문서 모양을 클릭하면 프로젝트 폴더와 파일들을 관리할 수 있는 익스플로러 창이 열립니다. 익스플로러 창을 이용하여 내가 작업할 디렉터리를 선택을 할 수 있습니다.

 

 선택한 디렉토리 안에서 첫 번째 아이콘인 New File을 클릭하여 작업을 할 작성 파일을 생성할 수 있습니다. 이것은 Visual Studio Code를 사용할 때 가장 기본적인 사용 방법입니다.

 

 두 번째 아이콘인 돋보기 모양을 클릭하면 검색창이 열리게 됩니다. 이 창에서는 현재 설정되어있는 폴더 안에서 특정 단어를 검색하거나 수정할 때 사용하는 창입니다. 예를 들어서 내가 index.html이라는 작업 파일에 test라는 단어를 작성합니다.

 

 이후에 style.css 파일이 열린 상태에서 작업을 하는 도중에 test라는 단어를 찾고 싶을 때가 있습니다. 그때 검색 창에 test라고 검색을 하면 현재 설정되어있는 폴더 안에서 test라는 단어가 있는 파일을 보여줍니다. 그다음에 검색한 파일을 클릭하게 되면 해당 단어로 바로 이동도 해주기 때문에 자주 사용하는 기능입니다.

 

 세번째 아이콘은 나중에 깃이라는 것과 연동하여 버전 관리를 할 수 있을 때 사용하는 창입니다. 네 번째 아이콘은 소스코드를 디버그 할 때 사용할 수 있는 디버그 창입니다. 다섯 번째 아이콘은 익스텐션을 관리할 수 있는 창입니다.

 

 왼쪽 사이드바의 각각의 아이콘들을 눌렀을 때 나오는 창들은 이후 포스팅을 통해 더 자세하게 설명해드리도록 하겠습니다.

 

 

 

마무리

 코딩용 텍스트 에디터인 Visual Studio Code의 첫 페이지에 대해 간단한 사용 기능을 알아보았습니다. 다음 포스팅에서는 다양한 메뉴와 상세한 정보에 대해서 더 자세히 설명해드리도록 하겠습니다. 감사합니다. 

댓글