KDT 유비온 코딩 강의 5일차 [VScode 살펴보기]

KDT 유비온 코딩 강의 5일차 | VScode 살펴보기
KDT 국비 강의 재직자 전형으로 신청 후 작성하는 기록지입니다!

 

 

📌 도입

지난 4일차에서 깃허브를 배웠다면, 오늘은 비주얼 스튜디오 코드(VSCode)를 알아보는 시간이었어요!

오늘 다룬 내용은 크게 세 가지였어요.

• VSCode 설치 및 기본 인터페이스
• 확장 프로그램과 AI 도구의 통합
• Cursor, Windsurf, Copilot 등 주요 도구 개요

 

💡 VSCode 기본 인터페이스 살펴보기

VSCode를 설치하면 상단 메뉴 중에서 가장 많이 사용하게 되는 것이 Preferences(프리퍼런스), 즉 환경설정이라고 해요.

기본적으로 테마 종류와 컬러를 시연해 주셨는데, 저도 어두운 테마 대신 밝은 테마로 변경해봤어요. 한 번씩이라도 직접 경험해보는 게 좋을 것 같아서요 😊

View 메뉴에서 줌 인, 줌 아웃 기능도 보여주셨고, 왼쪽 탭 메뉴 구성도 하나씩 설명해 주셨습니다.

그리고 추가로 깃(Git) 설치도 필요하다고 하셔서 바로 설치 완료했어요.

 

👉 깃 설치 바로가기 : https://git-scm.com/install/windows

Git - Install for Windows

 

저도 어두운 테마 말고 밝은 테마로 변경했어요.🤣

 

 

 

🔌 확장 프로그램 (Extensions)

VSCode 설명을 계속 이어주셨는데, 버전이나 설정 옵션이 강사님 화면과 달라서 열심히 따라가며 들었어요.

 

마지막에 EXTENSIONS(확장 프로그램)을 상세하게 설명해 주셨는데요.

 

솔직히 아직은 이해가 다 되진 않았지만, 바이브 코딩에 익숙해지면 다방면으로 활용할 수 있다고 하시니 나중을 위해 잘 들어뒀습니다!

 

 

제 VSCode 환경에서는 위 이미지 처럼 보여졌었고,

 

 

강의 화면에서 위 이미지로 프로그램을 여러가지 확인할 수 있었는데요!

강사님 조언으로는 사람들이 많이 사용하는 것들부터 시도해 보면 좋다고 하셨어요.

역시 경험이 제일 중요하군요..! 😄

 

도움이 되는 확장 프로그램 목록과 간단한 기능 설명은 다음과 같아요. [클로드의 도움을 좀 받았습니다.]

• GitHub Copilot AI가 코드를 자동으로 제안해주는 도구예요. 코드를 작성하다 보면 다음에 올 코드를 AI가 미리 예측해서 보여줘요. 바이브 코딩과 함께 쓰면 개발 속도가 훨씬 빨라짐. 단, 유료 구독이 필요
• Auto Close Tag HTML에서 여는 태그를 쓰면 닫는 태그를 자동으로 만들어 줌 예를 들어 <div>를 쓰면 </div>가 자동생성 실수를 줄여주는 편리한 도구
• Auto Rename Tag 여는 태그 이름을 바꾸면 닫는 태그도 자동으로 변경. 태그명을 수정할 때 하나씩 찾아서 바꾸는 번거로움이 없음.
• JSX HTML <tags/> 리액트(React)에서 사용하는 JSX 문법 환경에서 HTML 태그를 편하게 쓸 수 있도록 도움을 줌. 리액트를 배우게 되면 유용하게 쓰이는 도구
• Live Server 코드를 수정하고 저장하면 브라우저가 자동으로 새로고침되어 결과 바로 확인 가능. HTML, CSS 작업할 때 특히 많이 쓰이는 필수 확장 프로그램
• Markdown Preview Enhanced 마크다운(.md) 파일을 작성하면서 오른쪽에 미리보기 화면을 바로 볼 수 있음. 깃허브 README 파일 작성할 때 특히 유용
• Prettier 코드를 저장할 때 들여쓰기, 줄 바꿈, 따옴표 등을 일정한 규칙으로 자동 정렬 코드가 깔끔하게 유지되고 가독성이 높아짐
• Python Debugger 파이썬 코드에서 오류가 발생했을 때 어디서 문제가 생겼는지 단계별로 확인할 수 있게 도와주는 디버깅 도구
• Remote Explorer Remote - SSH로 연결한 원격 서버 목록을 한눈에 보고 관리할 수 있는 탐색기 여러 서버를 관리할 때 편리
• SVG Editor SVG 파일을 시각적으로 편집할 수 있는 도구 코드를 직접 수정하지 않고도 SVG 이미지를 조정 가능
• SVG SVG 형식의 이미지 파일을 VSCode 안에서 바로 미리볼 수 있게 해줌. 코드로 만든 벡터 이미지를 확인할 때 유용
• Remote - SSH 내 컴퓨터가 아닌 원격 서버에 SSH로 접속해서 그 서버의 파일을 VSCode에서 직접 편집 가능. 클라우드 서버 작업할 때 사용
• Python 파이썬 코드를 VSCode에서 작성하고 실행할 수 있도록 해주는 기본 확장 프로그램. 파이썬을 배울 계획이라면 필수로 설치
• Path Intellisense 파일 경로를 입력할 때 자동완성 제공. 이미지나 파일을 불러올 때 경로를 직접 다 타이핑하지 않아도 돼서 편리
• HTML CSS Support HTML 파일 안에서 CSS 클래스나 ID를 작성할 때 자동완성 지원 HTML과 CSS를 연결해서 작업할 때 실수를 줄여줌
• Korean Language Pack VSCode의 메뉴와 설명을 한국어로 바꿔주는 언어팩. 사용 추천은 X
• HTML to CSS autocompletion HTML에서 사용한 클래스 이름을 CSS 파일에서 작성할 때 자동으로 불러와 줌. HTML과 CSS를 같이 작업할 때 매우 편리
• Auto Complete Tag 태그를 입력할 때 자동완성 기능 제공. 태그 이름을 다 입력하지 않아도 후보를 보여줘서 빠르게 선택할 수 있음
• Astro Astro라는 웹 프레임워크를 VSCode에서 편하게 사용할 수 있도록 도와주는 확장 프로그램. 블로그나 정적 웹사이트를 만들 때 주로 사용해요.

뭔가 상당히 많네요.. 😅

학습 과정을 통해서 차근히 경험해 보고자 합니다.

유용한 확장 프로그램을 직접 써보게 되면 소개글도 따로 작성해 볼게요! 😊👍

 

 

📖 모르는 단어 찾아보기

오늘도 새로운 단어들이 나왔어요. 찾아보고 정리해봤습니다!

 

[VSCode (Visual Studio Code)]

마이크로소프트에서 만든 무료 코드 편집기. 다양한 언어와 확장 기능을 지원하고 가볍고 빠른 게 특징이에요.

 

[Extensions (확장 프로그램)]

VSCode에 추가 기능을 설치할 수 있는 플러그인. 검색해서 설치하면 바로 사용 가능해요.

 

[Preferences (프리퍼런스)]

VSCode의 환경설정 메뉴. 테마, 폰트, 키 설정 등 다양한 옵션을 조정할 수 있어요.

 

[Live Server]

코드를 수정할 때마다 브라우저가 자동으로 새로고침되어 결과를 바로 확인할 수 있는 확장 프로그램.

 

[Prettier]

코드를 일정한 규칙에 맞게 자동으로 정렬해주는 포맷터. 코드 가독성을 높여줘요.

 

[GitHub Copilot]

AI가 코드를 자동으로 제안해주는 확장 프로그램. 바이브 코딩과 함께 활용하면 유용해요.

 

 

🙌 마무리

 

오늘도 열심히 배웠어요!

 

앞으로 갈 길이 멀다는 걸 다시금 느꼈지만, 갈 길이 머니 더 열심히 걸어나가 보겠습니다 💪

차근차근 경험을 쌓아가면서 유용한 내용들도 계속 공유해드릴게요.

 

앞으로도 강의 내용을 꾸준히 기록할 예정이니, 관심과 응원 부탁드립니다! 🙏