Visual Studio Code를 위한 쉬운 해설서

Visual Studio Code(VSCode)는 현재 프로그래밍 및 웹 세계에서 사실상 표준으로 자리 잡은 오픈 소스 텍스트(코드) 에디터이다. 현재 빠르게 사용자 수가 늘어나고 있으며 엔지니어는 물론 웹 크리에이터, 프로그래밍 입문자에 이르기까지 사용자층이 넓어지고 있다. 인기가 높기 때문에 다른 텍스트 에디터를 사용하다 갈아타는 경우가 많지만, 신세대 에디터 특유의 다기능 탑재로 인한 복잡함이 걸림돌이 되기도 한다. 본서는 그 허들을 없애는 것을 목표로 한 ‘쉬운 해설서’이다. 웹 디자이너나 프로그래머는 물론 평범한 텍스트 에디터로 Visual Studio Code를 사용하는 분들도 더욱 편리하게 사용할 수 있도록 기본부터 커스터마이즈, 효율 향상에 도움을 주는 기능들, 나아가 Visual Studio Code가 표준 지원하는 Git의 사용법까지 꼼꼼히 담았다.

이 도서는 총 여섯 챕터로 이루어진 도서로, 처음 1~3장에서는 에디터에 관해 간단히 소개한 뒤 활용하면 좋을 유용한 자체 기능 및 단축키를 알려준다. 그 뒤 웹, 프로그래밍 등 각 사용 환경에 맞는 확장과 그 사용법을 소개하며, 마지막으로는 VSCode에 Git을 연동하여 작업하는 방법을 알려준다. 도서의 내용을 전부 학습하고 나면 그동안 간단히 사용해 왔던 툴의 활용성을 체감할 수 있을 것이다.?

시작하면서

CHAPTER1 VSCode를 도입하자
01 코드 에디터의 새 기준, Visual Studio Code
02 VSCode를 설치한다
03 초기 설정을 실시한다
04 VSCode의 화면 구성
05 상태 표시줄에서 파일 설정을 한다

CHAPTER2 기본적인 파일 편집을 해 보자
01 폴더, 파일을 열고 편집한다
02 작업 영역으로 여러 개의 폴더를 연다
03 텍스트 편집에 도움이 되는 필수 테크닉
04 Markdown 파일을 편집한다
05 검색·바꾸기를 사용한다

CHAPTER3 설정과 커스터마이즈를 이해하자
01 VSCode에서 무엇을 할 수 있는지 검색한다
02 VSCode를 자기 취향대로 커스터마이즈한다
03 작업 영역별로 설정을 바꾼다
04 JSON 파일에서 고급 설정을 한다
05 설정을 다른 컴퓨터와 동기화한다
06 자주 사용하는 작업을 단축키에 등록한다
07 확장을 도입한다
08 확장을 관리한다

CHAPTER4 웹 제작에 최적화하자
01 HTML, CSS 편집에 도움이 되는 표준 기능
02 Prettier로 코드를 정돈한다
03 HTML 파일을 실시간으로 미리 본다
04 CSS와 HTML을 자유자재로 오간다
05 편집기상에서 이미지를 미리 본다
06 코드 입력에 도움이 되는 기능
07 코드를 보기 쉽게 하는 기능

CHAPTER5 프로그래밍에 최적화하자
01 프로그래밍에 도움이 되는 테크닉
02 코드 보완 기능을 커스터마이즈한다
03 코드 조각을 더욱 활용한다
04 파일을 넘나들며 정의와 참조를 자유롭게 오간다
05 코드를 개선하기 위한 테크닉
06 디버그의 기본
07 디버그 중에 프로그램의 세부 정보를 확인한다

CHAPTER6 VSCode에서 Git을 사용해 보자
01 버전 관리 시스템 Git
02 Git의 이용 준비를 한다
03 로컬 리포지토리를 생성한다
04 로컬 리포지토리상에서 작업한다
05 로컬 리포지토리를 GitHub에 게시한다
06 리모트 리포지토리를 클론한다
07 충돌을 해결한다
08 브랜치에서 커밋 이력을 분기시킨다
09 풀 리퀘스트를 이용하여 브랜치를 머지한다
10 GitLens 확장으로 더욱 Git을 편리하게 한다
11 온라인 버전 VSCode를 이용한다

Appendix
INDEX

리브로웍스 , 김은철, 유세라

* 주요 내용

CHAPTER1 VSCode를 도입하자
VSCode 소개, 실습 환경 준비, 화면 구성에 관한 설명을 하는 챕터입니다. VSCode를 모르는 분에게는 기본 지식을 심어주고, 이미 사용하던 분이라도 미처 알지 못했을 만한 각 화면 구성 요소에 관한 정보를 알려줍니다.

CHAPTER2 기본적인 파일 편집을 해 보자
어떤 파일을 편집하더라도 유용한 VSCode의 핵심적인 파일 편집 기능들과 VSCode의 작업 단위인 작업 영역을 소개하는 챕터입니다. 해당 챕터를 읽고 나면, VSCode의 구조에 관한 이해와 함께, 작업 능률을 크게 올릴 수 있습니다.

CHAPTER3 설정과 커스터마이즈를 이해하자
VSCode에서 조정 가능한 각종 설정들과 그 구조를 이해하고, 사용자화를 위한 커스터마이즈를 배우는 챕터입니다. VSCode를 지금의 위치에 서게 한 강력한 요소인 확장(Extension)을 사용하는 법을 알려줍니다.

CHAPTER4 웹 제작에 최적화하자
HTML과 CSS 편집 시에 사용하면 좋을 VSCode의 기능들과 확장들을 소개하는 챕터입니다. HTML - CSS - JavaScript로 이어지는 웹 개발 환경을 VSCode 중심으로 세팅하여 작업하는 데 큰 도움이 됩니다.

CHAPTER5 프로그래밍에 최적화하자
코드 작성 속도를 높여 주는 인텔리센스나 코드 조각 등의 사용법과, VSCode에서 직접 디버깅까지 가능하도록 설정하는 방법을 알려줍니다. 해당 챕터의 방법을 도입하면 거의 대부분의 언어를 VSCode가 대응할 수 있게 됩니다.

CHAPTER6 VSCode에서 Git을 사용해 보자
VSCode에서 정식으로 지원하는 Git 연동 기능을 사용하여 VSCode에서 버전 관리를 하는 방법을 소개합니다. 또한 Git 연동 기능과 함께 사용하면 좋을 GitLen 확장의 사용법을 알려주어 터미널을 적극적으로 사용하지 않더라도 Git을 활용할 수 있도록 도와줍니다.

* 작가의 말

이 책을 손에 든 여러분은 Visual Studio Code(이후 VSCode)라는 도구에 대해 들어본 적이 있나요? 그리고 어떤 인상을 가지고 있나요?

「프로그래머가 사용하는 대단한 도구」 「Visual Studio와 같은 무언가」… 이러한 인상은 모두 틀린 것은 아니지만, 대체로 「소프트웨어 개발자용의 도구이고, 사용하기 위해서는 전문적인 지식이 필요할 것 같다」라고 느끼는 분이 많지 않을까요?

VSCode는 Microsoft 사가 무료로 공개한 텍스트 에디터이지만, Visual Studio나 Android Studio 등 소프트웨어 개발을 위한 기능을 갖춘 IDE(통합 개발 환경)에 가까운 부분이 있는 것도 사실입니다. 따라서 전업 엔지니어용이라는 이미지가 앞서 진입 장벽이 높다고 느끼고 있는 분도 많을 것 같습니다.

그러나 VSCode는 소프트웨어 개발자 및 엔지니어만을 위한 도구가 아닙니다.
VSCode의 매력은 텍스트 편집이나 폴더 조작 등의 일상 업무부터 프로그래밍이나 버전 관리와 같은 본격적인 개발 업무까지, 모든 작업을 이것 하나로 완수할 수 있다는 점입니다.

만약 당신이 웹 크리에이터나 엔지니어로서 이 책을 읽고 업무에 VSCode를 도입한다면 효율적으로 작업을 진행할 수 있을 뿐만 아니라, 하루 업무를 마친 후, 그날에 작동한 앱은 웹 브라우저와 VSCode 뿐이었다고 말하는 날이 드물지 않게 될 것입니다.

그렇다고는 해도 Microsoft가 공개하고 있는 VSCode의 공식 문서에는 영어로만 접근할 수 있는 정보도 많고, 엔지니어용 설명서도 몇 권 나와 있으나 전제 지식이 없으면 읽는 데 어려움을 겪을 수도 있습니다.

이 책에서는 VSCode의 도입부터 본격적으로 활용하는 단계까지, 단계별로 그림으로 설명하면서 쉽게 설명합니다.

기본적인 설정 및 자기만의 방식으로 커스터마이즈하는 방법은 물론, 웹 제작 및 프로그래밍 전용의 기능도 스크린샷을 곁들여 단계별로 설명하므로 헤매지 않고 조작을 마스터할 수 있습니다.

각 CHAPTER의 구성은 VSCode의 기본적인 기능의 설명부터 시작하여, 그 후에 웹 제작 및 프로그래밍을 위한 기능을 소개하는 흐름으로 되어 있습니다.

앞으로 VSCode를 도입할 분은 CHAPTER1부터 읽고, 이미 사용하고 있으며 기본적인 조작 방법은 알고 있는 분은 개발 용도에 맞게 CHAPTER3~6의 자신에게 필요할 것 같은 부분을 읽으면 좋을 것입니다.

CHAPTER1 VSCode를 도입하자
CHAPTER2 기본적인 파일 편집을 해 보자
CHAPTER3 설정과 커스터마이즈를 이해하자
CHAPTER4 웹 제작에 최적화하자
CHAPTER5 프로그래밍에 최적화하자
CHAPTER6 VSCode에서 Git을 사용해 보자

이 책의 내용을 이해함으로써 매일의 업무를 VSCode로 수행할 수 있을 뿐만 아니라, 여러분이 일하는 방식 자체를 업데이트하는 데 도움이 되면 좋겠습니다.