[학습 일기 #1] Visual Studio Code를 설치하며 기본적인 개념을 다져본 하루
[학습 일기 시리즈]
오늘은 초보 개발자로서 첫걸음을 내딛기 전 가장 먼저 필요한
작업 공간을 제대로 갖추는 과정을 다뤄보려 한다.
VSCode 설치부터 확장 기능 세팅, 그리고 그 과정에서 새롭게 배운 개념들까지
하나씩 정리하며 내 방식대로 이해한 내용을 기록하고자 한다.
🛠️ IDE & Code Editor, 무엇이 다를까?
🔹 IDE(Integrated Development Environment)
IDE는 개발에 필요한 기능을 통합 제공하는 개발 환경 툴이다.
코드 작성, 빌드, 디버깅, 테스트, 자동완성 등을 한 곳에서 제공한다.
ex)
- PyCharm
- Visual Studio
- IntelliJ
- Xcode
✔️ 특징
- 무겁지만 강력하다
- 개발 환경을 거의 자동으로 구성해준다
- 대규모 프로젝트에 적합하다
cf) 빌드, 디버깅이란 무엇인가?
✔️ 빌드(Build)
사람이 이해하는 코드(소스코드)를 컴퓨터가 실행할 수 있는 형태로 바꾸는 전체 과정.
빌드는 다음 단계를 포함한다:
- 컴파일(Compile) - 코드를 기계어로 번역
- 링크(Link) - 필요한 함수 라이브러리 연결
- 패키징(Packaging) - 실행 파일(.exe)같은 형태로 묶음
- 최적화(Optimization) - 속도, 용량 효율화
- 결과물 생성(Output) - 실행 가능한 프로그램 생성
✔️ 디버깅(Debugging)
프로그램에서 발생하는 오류(bug)를 찾고 수정하는 과정.
이 과정에서는 다음 단계를 포함한다:
- 코드 실행 흐름 Step-by-Step(한 줄씩) 확인
- 변수 값 실시간 확인
- 프로그램이 어디서 멈추거나 잘못 동작하는지 파악
🔹Code Editor - 코드 편집 도구
Code Editor는 텍스트 파일을 작성하고 편집하는 도구로서 주로 소스 코드를 작성하는 데 사용된다.
자동완성, 태그 및 구문 강조, 코드에 색상 반영 등 유용한 기능을 제공하여
개발자가 코드 작성과 편집을 더 효율적으로 할 수 있도록 돕는다.
ex)
- VSCode
- Sublime Text
- Atom
✔️ 특징
- 가볍고 빠름
- 필요한 기능을 “확장 기능” 형태로 선택해 넣는다
- 사용자가 환경을 직접 만들어가는 방식
- 작은 작업부터 대규모 개발까지 모두 가능 (확장 기반)
비유를 해보자면,
🎮 IDE = 모든 게 세팅된 ‘완성형 게임기 패키지’
- 본체(코드 에디터)
- 기본 실행 시스템(자동완성·디버거)
- 게임 플레이 기능(빌드·테스트 툴)
- 모든 케이블 및 액세서리(플러그인)
- 설명서 포함
→ 구매하자마자 바로 게임을 시작할 수 있다.
무겁지만 안정적이고 강력하다.
🎮 Code Editor = 원하는 기능을 선택해 조립하는 ‘커스터마이징 게임기’
- 본체만 제공됨(VSCode 기본)
- 필요한 기능은 확장팩(Extensions)으로 추가
- 가볍고 빠름
- 무한히 확장 가능
→ 나한테 맞게 환경을 꾸밀 수 있음
VS Code 자체는 IDE는 아니지만,
확장 기능을 설치하면 사실상 IDE처럼 동작한다.
🧩 Visual Studio Code를 나에게 맞게 커스텀 해보자.
🔹 VSCode 설치
[사진 1-1. VSCode 다운로드 화면 및 설정 과정]
🔹 Python 설치
[사진 1-2. Python 설치 화면]
🐍 잠깐! 파이썬이란??
[출처： 위키피디아_파이썬]
요약하자면,
인터프리터를 사용하는 객체지향 언어이자
플랫폼에 독립적(OS에 영향받지 x)인, 동적 타이핑 대화형 언어.
간결하고 읽기 쉬운 문법이 특징인 프로그래밍 언어로 주로 사용되는 분야는 아래와 같다.
✔️ Python이 사용되는 주요 분야
１. 데이터 분석／머신러닝/AI
- Pandas(데이터 분석), NumPy(수학·배열 연산), Scikit-learn(머신러닝), PyTorch(딥러닝. Meta 제작), TensorFlow(딥러닝. Google 제작)
- AI 분야에서 사실상 표준 언어
２. 웹 개발
- Django(대규모 웹 서비스 개발), Flask(미니멀한 웹 서비스 개발) 같은 웹 프레임워크
- 웹 백엔드 개발 가능
３. 자동화/스크립트 작성
- 파일 처리, 업무 자동화, 크롤링(Crawling. 웹사이트 내용을 자동으로 수집하는 기술)
- 반복 작업을 자동으로 처리하는 데 매우 강함
４. 교육 및 기초 학습용
- 문법이 쉬워서 초심자에게 적합
- 전 세계 대학/교육기관에서 Python으로 코딩 입문 수업 진행
５. 과학·수학·시뮬레이션
- SciPy(과학·공학 연산) 등 과학 계산 라이브러리 존재
６. 서버·백엔드·API 개발
- API(Application Programming Interface) 제작, 서버 자동화에도 사용
🐍 파이썬이 가지는 저 언어적 특징은 어떤걸 의미할까??
✔️ 인터프리터 언어 vs 컴파일러 언어
１. 인터프리터 언어 (Interpreter Language)
코드를 한 줄씩 읽고 즉시 실행하는 언어. 컴파일 과정이 없거나 매우 단순함.
ex)
- Python
- JavaScript
- Ruby 등이 대표적.
✔️ 특징
- 실행 속도: 상대적으로 느림
- 개발 속도: 빠름
- 디버깅: 쉽고 직관적
- 실험하기 좋아서 학습용·데이터분석용으로 최적
２. 컴파일러 언어 (Compiler Language)
프로그램 전체 코드를 한 번에 기계어로 번역(컴파일)해서 그 번역본을 실행하는 언어.
ex)
- C, C++
- Rust, Go, Swift
- Java* 등이 대표적.
(Java*는 둘 다 섞인 형태이지만 기본적으로 컴파일 과정을 거침.)
✔ 특징
- 실행 속도: 매우 빠름
- 개발 속도: 인터프리터보다 느림
- 오류는 실행 전에 다 찾을 수 있음(정적 분석 우수)
- 대규모 프로그램, 성능 필요한 시스템에 매우 강함
🧪 경험에 빗대 비유하자면,
(A) 미리 영문 프로토콜을 한글로 정리한 뒤 실험 → “컴파일러 방식”
- 준비 시간이 오래 걸림 → 컴파일 시간이 김
- 영문 문서를 해석하고 순서를 재정리함 → 문법 분석·타입 검사·최적화
- 완성된 프로토콜이 나오면 → 최적화된 기계어 파일 생성
- 실험 자체는 빠르고 안정적 → 실행 속도 매우 빠름
즉, 시간이 더 걸리지만, 준비가 끝나면 작업이 광속으로 수행됨.
(B) 영문 프로토콜을 보면서 즉석으로 실험 → “인터프리터 방식”
- 준비 시간 거의 없음 → 바로 실행 가능
- 영문 한 줄 읽고 해석 → 한 줄씩 즉석에서 해석(interpret)
- 즉흥적으로 처리 → 실행 중 타입 판단·오류 처리 동시 수행
- 실험 속도는 느림 → 실행 속도 느림
즉, 시작은 빠른데 실제 실행 시간이 길어지는 방식.
✔️ 객체지향 언어(OPP, object-oriented programming)
데이터(field, 속성)와 행동(method)을 하나의 객체(object)로 묶어 관리하는 방식.
ex)
- Python
- Java
- C++
- Ruby
비유하자면,
사람(객체)이 있고, 이름·나이(속성)와 말한다·걷는다(행동)가 하나로 묶여 있는 구조
✔️ 동적 타이핑 언어 vs 정적 타이핑 언어
１. 동적 타이핑 언어
- 타입을 실행 중 자동으로 판단
- Python, JavaScript 등이 여기에 해당
- 유연함, 개발 속도 빠름
２. 정적 타이핑 언어
- 변수 타입을 코드 작성 시 명확히 선언해야 함
- C, Java, Rust 등이 여기에 해당
- 오류를 실행 전에 모두 잡고 최적화 가능
- 고성능 시스템에 필수
✔️ 대화형 언어
"입력 → 즉시 결과 출력"이 가능한 언어. 즉시 실행 결과를 볼 수 있다는 장점이 있다.
ex)
- Python의 REPL(Read-Eval-Print Loop)
- TypeScript의 REPL 등
🧩 추가적으로 설치하면 좋은 확장팩
🇰🇷 Korean Language Pack for Visual Studio Code
VSCode의 인터페이스(UI)를 한국어로 번역해주는 공식 언어팩.
✔️ 주요 기능
- 메뉴, 설정창, 팝업, 오류 메세지를 한국어로 출력
- VSCode 업데이트 시 자동 번역 반영
[사진 1-3. Korean Language Pack 설치 화면]
✍🏻 Better Comments
주석(comment)을 카테고리별 색상으로 구분해주는 기능.
✔️ 주요 기능
!(중요),?(경고),TODO등의 태그를 색상별로 구분- 코드 가독성 향상
- 작업 중 필요한 포인트 정리하기 쉬움
[사진 1-4. Better Comments 설치 화면]
🌈 indent-rainbow
들여쓰기(indentation) 레벨에 따라 색을 다르게 표시하는 시각화 기능.
특히, Python처럼 들여쓰기가 문법 역할까지 하는 언어에서 매우 유용.
* Python은 {} 대신 들여쓰기로 블록을 나누기 때문에 한 칸만 틀려도 코드가 고장난다.
✔️ 주요 기능
- indent level마다 색상 다르게 구분
- 블록 구조 빠르게 파악 가능
- 들여쓰기 오류(공백, 탭 혼합) 쉽게 확인
[사진 1-5. indent-rainbow 설치 화면]
🎨 Colorize
CSS, HTML, JS 등에서 사용되는 color code(hex, rgb, hsl)를
VSCode 편집기 내부에서 실제 색상으로 미리보기 해주는 확장 기능.
✔️ 주요 기능
- hex(
#FFFFFF), RGB 색상 실시간 미리보기 - 배경색, 글자색 파악이 쉬움
- UI 작업할 때 색감 튜닝이 매우 편해짐
[사진 1-6. colorize 설치 화면]
🗃️ Material Icon Theme
파일의 성격을 직관적으로 볼 수 있게 해주는 기능.
VSCode 기본 상태에서는 대부분의 파일이 비슷한 회색 아이콘으로 보이기 때문에
파일의 종류를 빠르게 구분하기 어렵다.
직관적인 아이콘을 통해 파일을 빠르게 구분하게 된다면 개발 시간이 단축될 것이다.
✔️ 주요 기능
- Python, HTML, JSON 등 파일 종류별 전용 아이콘 적용
- 목적별로 폴더 색상 및 아이콘 자동 분류
- 환경 파일, 패키지 파일 등 특수 파일도 시각적으로 구분
- 텍스트를 읽지 않아도 파일 역할이 즉시 파악됨
- 대규모 프로젝트에서도 구조 파악이 쉬워짐
[사진 1-7. Material Icon Theme 설치 화면]
🔍 Error Lens
VSCode는 기본적으로 오류 밑줄을 표시하나 눈에 잘 띄지 않아
초보자는 실수를 찾는 데 시간이 오래 걸리기 쉽다.
Error Lens는 오류가 있는 라인을 강하게 강조해
문제가 있는 부분을 즉시 발견할 수 있게 도와준다.
✔️ 주요 기능
- 오류, 경고가 있는 라인을 강조 색상으로 표시
- 문제 설명을 라인 옆에 바로 표시
- 제거하거나 수정하면 즉시 강조가 사라짐
- 오타, 변수명 오류, 타입 오류를 즉시 파악
[사진 1-8. Error Lens 설치 화면]
이렇게 확장팩까지 설치를 마쳤으니 이제 작업 환경 준비는 얼추 된 것 같다.
앞으로의 작업도 화이팅해야지...!
[참고한 사이트 목록]
