VSCode 설치

Elvia SY Choi·2025년 3월 27일
post-thumbnail

학습-비기너 트랙

4. VSCode 설치

1. 오늘의 학습 키워드

오늘은 오즈코딩스쿨 학습-비기너 트랙 네 번째 시간으로 VSCode 에디터를 설치하는 시간을 가졌습니다. 예전에 코딩 공부를 조금 한 경험이 있어 지금 주로 사용하고 있는 노트북에 VSCode가 설치되어 있지만 2~3년가량 사용하지 않아 기존에 설치했던 프로그램을 지우고 완전 초심자로 돌아가서 다시 다운로드 진행했습니다.

2. 오늘 학습 한 내용

Visual Studio Code(VS Code)는 마이크로소프트에서 개발한 가볍고 빠르면서 무료인 소스 코드 편집기입니다. Windows, macOS, Linux 등 다양한 운영체제에서 사용 가능하고, 가볍고 빠른 성능을 가지고 있어 전 세계 많은 개발자들에게 사랑받고 있는 코드 편집기입니다.

💻 Visual Studio Code 공식 다운드로드
👉 https://code.visualstudio.com/Download

VSCode 다운로드 방법은 공식 다운로드 페이지에 접속한 후 자신의 운영체제에 맞는 다운로드를 클릭하면 됩니다. 저는 다운로드를 진행하기 전 예전에 설치한 VS Code를 먼저 삭제했습니다.

1. 예전에 설치했던 VS Code

2. 제어판에 들어가 프로그램 선택 후 삭제


3. 내 노트북 운영체제에 맞는 버전으로 .exe 파일 설치 후 동의


🚀 VSCode 설치가 완료된 후엔 나만의 에디터를 만들기 위해 학습자료에 나온 익스텐션도 추가로 설치했습니다. 인스텐션을 설치하는 방법은 간단했습니다.

1. 먼저, VSCode를 열면 좌측 아이콘 하단에 네모 박스로 된 버튼을 눌러줍니다.

2. 다운로드하고 싶은 익스텐션을 검색한 다음,

3. Install 버튼을 눌러주면 설치가 완료됩니다.

파이선을 설치 한 후 학습자료에 추가적으로 설치하면 좋은 익스텐션이 있어 같이 설치해주었습니다.

  1. 첫 번째는 'Indent Rainbow' 였는데 이건 예전에 설치한 적이 있었는지 화면에 Disable과 Uninstall 버튼이 보여 다음으로 넘어갔습니다.
  2. 두 번째는 'Better Comments' 플로그인으로 카테고리별 색상을 구분해줍니다. 중요한 부분, TODO, 경고 등을 눈에 띄게 하여 코드 리뷰나 디버깅 시 가독성을 높여주는 익스텐션입니다.
  3. 세 번째 플로그인은 'Bracket Pair Colorizer' 을 추천되어있는데 중괄호, 대괄호, 소괄호 등의 짝을 색깔로 구분해주는 플러그인입니다. 복잡한 코드에서 괄호의 짝을 구분하기 쉽게 해주는 기능이 있다고 합니다. 다만, 더 이상 익스텐션으로 다운이 아닌 VSCode 내장기능으로 변경되어 설정으로 들어갔습니다. 설정은 에디터 왼쪽 하단 톱니바퀴 모양을 선택하면 들어갈 수 있고 Setting에서 bracket pair를 검색하여 원하는 대로 설정하면 됩니다. 다만, 이 기능은 아직 시작한 코딩 작업이 없다보니 어떤게 더 좋을지 몰라 오늘은 설정 경로만 알아두었습니다.
  4. 네 번째는 'colorize' 를 추천해주셨는데 이 익스텐션은 CSS의 색상 문자 코드에 배경색을 입혀서 색상을 알아볼 수 있게 해주는 플러그인이라고 합니다. 해당 익스텐션도 추가로 설치했습니다.

위에 추천된 익스텐션 외에도 VSCode에는 수많은 익스텐션이 있습니다. 앞으로 코딩 작업을 하면서 불편한 점이 생기면 더 많은 익스텐션을 활용해 보는 것도 좋은 방법입니다.

📚 VSCode 익스텐션 참고자료
https://marketplace.visualstudio.com/

3. 학습을 한 후 느낀 점

오랜만에 VSCode를 설치하고 실행하려고 하니, 시작 전에는 괜히 어렵게 느껴졌습니다. 한동안 사용하지 않았던 탓에, 혹시 에러가 나거나 설치가 잘 안 되면 학습에 차질이 생기지 않을까 하는 걱정이 먼저 들었습니다. 하지만 역시 백문이 불여일견이라는 말처럼, 직접 해보니 생각보다 수월했고 큰 문제 없이 설치도 잘 되었습니다. 다시 설치를 하면서 오히려 살짝 설레는 마음도 들었습니다.

물론, 이제 다시 시작하는 단계라 앞으로 걱정되는 부분도 있지만 매일 조금씩이라도 포기하지 않고 계속한다면, 나도 개발자가 될 수 있지 않을까? 하는 기대감도 생깁니다.

오늘은 이렇게 VSCode 설치와 필수 확장 프로그램 세팅으로 학습을 마무리해 봅니다.

profile
console.log("한 줄 짰는데 왜 안 돼요");

0개의 댓글