코딩 초보 필독! HTML/CSS/JS 시작 전, 핵심 텍스트 에디터 설치법 (비주얼 스튜디오 코드)

코딩할 때 꼭 필요한 프로그램, 비주얼 스튜디오 코드!

코딩을 배우려면 코드를 써야 하는데, 그냥 메모장으로 쓰기엔 너무 불편해. 그래서 코딩할 때 편하게 도와주는 프로그램이 있는데, 이걸 텍스트 에디터라고 불러. 윈도우에 기본으로 깔린 메모장도 텍스트 에디터인데, 코딩하기엔 좀 부족하지.

그래서 보통은 서브라임 텍스트, 브라켓, 아톰, 비주얼 스튜디오 코드 같은 코딩 전용 텍스트 에디터를 따로 설치해서 써. 오늘은 그중에서도 요즘 제일 핫한 비주얼 스튜디오 코드(Visual Studio Code)를 설치해 볼 거야!

비주얼 스튜디오 코드 설치하기

1. 다운로드: 웹 브라우저 주소창에 code.visualstudio.com 이라고 치거나, 검색창에 "비주얼 스튜디오 코드"라고 검색해서 공식 홈페이지에 들어가.
2. 내 OS에 맞는 파일 다운로드: 홈페이지에 들어가면 네 컴퓨터(OS)에 맞는 다운로드 버튼이 보일 거야. 윈도우면 'Download for Windows' 버튼을 누르면 돼. 다른 OS용 파일을 받고 싶으면 옆에 있는 화살표를 눌러서 선택하면 돼.
3. 설치: 다운로드 받은 파일을 실행해서 'Next' 버튼만 계속 누르면 쉽게 설치할 수 있어. 설치 과정이 어렵다면, 글 맨 아래에 있는 링크를 참고해서 설치해도 좋아.

비주얼 스튜디오 코드, 뭐가 좋을까?

설치하고 비주얼 스튜디오 코드를 실행하면 웰컴 페이지가 보일 거야. 여기서 파일 만들고, 폴더 열고, 최근 작업한 파일 목록도 볼 수 있어.

왼쪽 사이드바에는 여러 가지 아이콘들이 있는데, 하나씩 살펴볼게.

• 첫 번째 아이콘 (탐색기): 프로젝트 폴더나 파일들을 관리하는 곳이야. 여기서 작업할 폴더를 선택하고, 새 파일을 만들거나 삭제할 수 있어.
• 두 번째 아이콘 (검색): 설정한 폴더 안에서 특정 단어를 찾거나 바꾸고 싶을 때 사용해. 예를 들어 '테스트'라는 단어를 검색하면, 그 단어가 들어있는 파일을 바로 찾아줘.
• 세 번째 아이콘 (소스 제어): 나중에 '깃(Git)'이라는 걸 배우면 버전 관리할 때 쓰는 곳이야.
• 네 번째 아이콘 (디버그): 코드를 실행하면서 오류를 찾고 수정할 때 쓰는 곳이야.
• 다섯 번째 아이콘 (확장 프로그램): 비주얼 스튜디오 코드를 더 편리하게 만들어주는 확장 프로그램(익스텐션)을 설치하고 관리하는 곳이야.

맨 아래쪽 톱니바퀴 모양 아이콘을 누르면 여러 메뉴가 나오는데, 자주 쓸 만한 건 두 가지야.

• 명령 팔레트: 비주얼 스튜디오 코드의 명령어를 직접 입력해서 실행할 수 있는 곳이야.
• 설정: 글꼴 크기, 글꼴 종류 같은 비주얼 스튜디오 코드의 여러 가지 설정을 바꾸고 싶을 때 쓰는 곳이야.

코딩을 더 편하게! 유용한 확장 프로그램 설치하기

이제 비주얼 스튜디오 코드를 더 편리하게 쓸 수 있게 도와주는 확장 프로그램 몇 가지를 설치해 볼 거야. 확장 프로그램은 플러그인이라고 생각하면 쉬워.

확장 프로그램 설치 방법:

1. 왼쪽 사이드바의 다섯 번째 아이콘 (확장 프로그램)을 클릭해.
2. 위에 있는 검색창에 설치하고 싶은 확장 프로그램 이름을 검색해.
3. 원하는 확장 프로그램을 찾으면 'Install' 버튼을 눌러서 설치하면 돼.

추천 확장 프로그램:

• Material Theme: 비주얼 스튜디오 코드의 전체적인 디자인 테마를 바꿔줘. 어두운 테마를 좋아하면 'Material Theme dark high contrast' 같은 걸로 바꿔봐.
• Material Icon Theme: 파일이나 폴더 아이콘을 예쁘게 바꿔줘.
• Auto Rename Tag: HTML 코드를 짤 때, 시작 태그 이름을 바꾸면 끝 태그 이름도 자동으로 바뀌게 해줘. 코딩할 때 정말 편해져!
• HTML CSS Support: HTML에서 클래스 이름을 쓸 때 CSS 파일에 있는 클래스 이름을 자동으로 완성해줘.
• HTML CSS Support: (이름이 같지만 다른 확장 프로그램) CSS 파일에서 정의한 클래스 이름을 HTML 파일에서 자동으로 완성해줘. 위 확장 프로그램과 함께 쓰면 좋아.
• CSS Peek: HTML 파일에서 특정 클래스 이름을 보고 싶을 때, Ctrl (맥은 Command) 키를 누른 채 클릭하면 해당 클래스가 정의된 CSS 파일로 바로 이동시켜줘.
• Autoprefixer: CSS 속성에 브라우저별로 필요한 접두사(벤더 프리픽스)를 자동으로 붙여줘. CSS를 좀 더 쉽게 쓸 수 있게 도와줘.
• Bracket Pair Colorizer 2: 코드의 중괄호({}) 색깔을 다르게 해서 어디가 시작이고 끝인지 쉽게 알 수 있게 해줘.
• indent-rainbow: 코드 들여쓰기(들여쓰기) 부분에 무지개 색깔을 입혀서 코드 구조를 한눈에 파악하기 쉽게 해줘.
• Live Server: HTML 파일을 수정할 때마다 웹 브라우저를 새로고침하지 않아도 자동으로 내용이 바뀌게 해줘. HTML 공부할 때 필수야!

이 확장 프로그램들을 설치하면 코딩이 훨씬 더 즐거워질 거야! 이제 웹 개발 공부할 준비는 끝났어! 다음 영상에서 또 만나자!