VS Code 설치부터 첫 코드 실행까지 — 개발 환경 셋업 가이드

코딩의 첫걸음: 개발 환경 설정

코딩을 배우겠다고 결심한 뒤 가장 먼저 해야 할 일은 개발 환경을 설정하는 것입니다. 마치 요리를 시작하기 전에 주방을 세팅하는 것과 같죠. 오늘은 가장 인기 있는 코드 편집기인 VS Code를 설치하고, 첫 번째 코드를 실행하는 것까지 안내해드리겠습니다.

VS Code란?

VS Code(Visual Studio Code)는 마이크로소프트가 만든 무료 코드 편집기입니다. 전 세계 개발자의 70% 이상이 사용하는 가장 인기 있는 도구입니다.

VS Code가 인기 있는 이유:

• 완전 무료입니다
• Windows, Mac, Linux 모든 운영체제를 지원합니다
• 확장 프로그램으로 기능을 무한히 확장할 수 있습니다
• 가볍고 빠릅니다
• 코드 자동 완성, 에러 표시, 터미널 내장 등 편의 기능이 뛰어납니다

설치하기 (3분이면 완료)

• 1단계: code.visualstudio.com에 접속합니다.
• 2단계: 운영체제에 맞는 다운로드 버튼을 클릭합니다.
• 3단계: 다운로드된 설치 파일을 실행하고 "Next"를 계속 클릭하면 설치가 완료됩니다.
• 4단계: VS Code를 실행하면 환영 화면이 나타납니다. 여기까지 하면 설치 끝!

추천 확장 프로그램 5가지

VS Code의 진짜 힘은 확장 프로그램에서 나옵니다. 왼쪽 사이드바의 확장 프로그램 아이콘(네모 블록 모양)을 클릭하고 검색해서 설치하세요.

• Korean Language Pack — VS Code를 한국어로 변환합니다. 영어가 불편하신 분은 필수!
• Prettier — 코드를 자동으로 예쁘게 정렬해줍니다. 저장할 때마다 자동 정렬되도록 설정하면 편합니다.
• Live Server — HTML 파일을 작성하면 브라우저에서 실시간으로 결과를 확인할 수 있습니다.
• Auto Rename Tag — HTML 태그의 여는 태그를 수정하면 닫는 태그도 자동으로 바뀝니다.
• Material Icon Theme — 파일/폴더 아이콘을 예쁘게 바꿔줍니다. 가독성이 좋아집니다.

첫 번째 코드: Hello World!

개발 환경이 준비되었으니, 첫 번째 코드를 작성해봅시다.

• 1단계: 바탕화면에 "my-first-project" 폴더를 만듭니다.
• 2단계: VS Code에서 File → Open Folder로 해당 폴더를 엽니다.
• 3단계: 왼쪽 파일 탐색기에서 새 파일 아이콘을 클릭하고 index.html을 만듭니다.
• 4단계: 다음 코드를 입력합니다 (VS Code에서 !를 입력하고 Tab을 누르면 기본 구조가 자동 생성됩니다).

HTML 기본 구조가 생성되면, <body> 태그 안에 <h1>Hello World!</h1>을 추가합니다. 그리고 Live Server 확장 프로그램의 "Go Live" 버튼을 클릭하면 브라우저에서 결과를 확인할 수 있습니다.

축하합니다! 여러분은 방금 첫 번째 웹페이지를 만들었습니다. 🎉

마치며

개발 환경 설정은 코딩 학습의 첫 관문입니다. VS Code를 설치하고 확장 프로그램을 추가하고 Hello World를 만든 것만으로도 큰 한 걸음을 뗀 겁니다. 다음 글에서는 HTML로 자기소개 페이지 만들기를 함께 해볼게요!