[VSCode] VScode 기본 기능에 대해 알아보자

VSCODE 기본 UI 기능

1️⃣ 좌측 Activity Bar (사이드 바)

아이콘/기능	설명
📁 Explorer (탐색기)	파일 열고 닫기, 구조 확인
🔍 Search (검색)	`Cmd` + `Shift` + `F` 전체 프로젝트 내 검색
🔀 Source Control (소스컨트롤)	깃 연동, 변경사항 확인, 커밋
🐞 Run and Debug	디버깅 세션 관리, launch.json
📦 Extensions (확장)	확장 프로그램 관리
🕘 Timeline (타임라인)	(💡많이 모름) 선택한 파일의 git 히스토리
⚙️ Settings / Manage	환경설정

 

 

2️⃣ 타임라인 (Timeline)

• `Git` 이나 `SCM`을 쓸 때 연동됨.
• 파일 하나 선택 → Timeline 탭 보면:
  • 이 파일의 변경 이력
  • 커밋 히스토리별 변경 사항
  • 저장된 시간 순서 등 확인 가능
• “이 함수 언제 수정했더라?” → 타임라인으로 확인 가능

💡 GitLens 설치 시 더 효율적으로 Timeline을 쓸 수 있다.

 

 

3️⃣ 하단 Status Bar (툴바)

위치설명

왼쪽 하단	현재 브랜치, 워크스페이스 상태
우측 하단	줄바꿈, 인코딩, 언어모드, 타입스크립트 버전 등
⚠️ 오류 뜨면	여기서 eslint 오류 수, 빌드 실패 확인

주로 확인해야 할 것들:

• TS (TypeScript 버전 정보)
• Prettier (포맷터 작동 여부)
• LF / CRLF (줄바꿈 확인)
• Spaces (탭/스페이스 확인)
• Encoding (UTF-8) (인코딩 확인)

 

개요

“이 파일이 대충 어떻게 구성돼 있지?” 를 눈으로 코드 안보고 바로 파악하게 해주는 미니 맵

개요(OUTLINE) 기능이란

• 현재 열려있는 파일 단위로 심볼 구조를 파싱해서 트리 형태로 보여주는 기능
• 말 그대로 “이 파일 안에 어떤 컴포넌트/함수/변수/타입/props 등이 있는가” 를 빠르게 파악할 수 있게 도와줌

 

 

어떤 원리로 동작하나?

• VSCode가 사용하는 언어 서버 (예: TypeScript Language Server, tsserver)가 현재 코드를 파싱
• 파싱된 심볼(타입, 변수, 함수, 클래스, 메서드 등)을 outline으로 정리해서 표시

 

주로 파악할 수 있는 것들:

심볼 종류예시

타입 (interface, type alias)	CmpntOverlayProps
함수 or 컴포넌트	CmpntOverlay
변수, props, useState 등	onClose, type, setType 등
클래스 내부 멤버 (class일 경우)	메서드, 필드 등

 

장점

• 긴 파일에서 원하는 함수/변수를 빠르게 찾아 이동
• 현재 파일의 대략적인 구조 한눈에 파악
• 협업 코드 읽을 때 빠르게 뼈대 파악
• 중복 props, 중복 state 등 파악에 도움