VSCode: 확장 기능, Emmet, 단축키
필수 확장 기능을 설치하고 Emmet 약어로 HTML과 CSS를 즉시 작성하며 편집 속도를 높이는 키보드 단축키를 배웁니다.
VSCode: 확장 기능, Emmet, 단축키은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
VSCode가 필요한 이유
비주얼 스튜디오 코드는 프런트엔드 개발에 가장 널리 사용되는 코드 편집기입니다. 무료 오픈 소스이며 빠르고, 방대한 확장 기능 생태계를 갖추고 있습니다. 대부분의 프런트엔드 팀이 이를 표준 편집기로 사용합니다.
필수 확장 기능
프런트엔드 개발에 꼭 필요한 확장 기능은 다음과 같습니다. 이에스린트(인라인 린트 검사), 프리티어(자동 서식 지정), GitLens(인라인 깃 비난 정보), 경로 자동 완성(파일 경로 자동 완성), HTML 태그 자동 이름 변경(짝을 이루는 HTML 태그 이름 변경)입니다.
언어별 확장 기능
TypeScript에는 TypeScript 및 JavaScript 언어 기능이 기본 제공됩니다. 리액트에는 ES7+ 리액트/리덕스 코드 조각을 사용합니다. 뷰에는 공식 확장 기능인 볼라를 사용합니다. 테일윈드에는 Tailwind CSS IntelliSense를 사용합니다.
에밋이란 무엇입니까
에밋은 VSCode에 기본으로 포함되어 있습니다. 약어를 입력하고 Tab을 누르면 전체 HTML 또는 CSS로 확장됩니다. 마크업 작성 속도를 크게 높여 줍니다.
<!-- Type then press Tab: -->
nav>ul>li*3>a{Link $}
<!-- Expands to: -->
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>자주 사용하는 에밋 약어
다음 에밋 단축어를 익혀 보십시오. ! → HTML 기본 골격, div.container → 클래스가 있는 div, ul>li*5 → 항목 5개가 있는 목록, input:email → 이메일 입력란, form:post → post 방식을 사용하는 폼입니다.
<!-- type: div.card>img+h3{Title}+p{Description} → -->
<div class="card">
<img src="" alt="">
<h3>Title</h3>
<p>Description</p>
</div>필수 키보드 단축키
가장 많은 시간을 절약해 주는 단축키는 다음과 같습니다. Ctrl/Cmd+P(빠른 파일 열기), Ctrl/Cmd+Shift+P(명령 팔레트), Alt+Click(다중 커서), Ctrl/Cmd+D(다음 일치 항목 선택), Ctrl/Cmd+/(주석 전환)입니다.
다중 커서 편집
Alt+Click으로 커서를 추가할 수 있습니다. Ctrl+Alt+Up/Down으로 위나 아래에 커서를 추가합니다. Ctrl+D를 누르면 선택 영역의 다음 일치 항목이 선택됩니다. 커서가 여러 개일 때는 모든 편집이 동시에 이루어지므로, 작은 범위에서 변수 이름을 바꿀 때 유용합니다.
통합 터미널
Ctrl+`(백틱)을 사용하여 VSCode 안에서 터미널을 엽니다. 터미널을 분할하면 편집기를 벗어나지 않고 한 창에서 개발 서버를 실행하고 다른 창에서 테스트를 실행할 수 있습니다.
작업 영역 설정
프로젝트에 .vscode/settings.json 파일을 만들면 사용자 설정보다 우선하는 프로젝트별 설정을 지정할 수 있습니다. 이 파일을 커밋하면 모든 팀원이 저장 시 서식 지정, 탭 크기, 눈금자 열과 같은 동일한 환경을 사용하게 됩니다.
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}IntelliSense 및 자동 가져오기
VSCode의 IntelliSense는 자동 완성, 매개변수 힌트 및 마우스 오버 문서를 제공합니다. TypeScript 프로젝트에서는 완성 항목을 수락할 때 기호도 자동으로 가져오므로 수동으로 가져오기를 작성할 필요가 없습니다.
정의 및 참조로 이동
어떤 기호에서든 Ctrl+Click(또는 F12)을 누르면 해당 정의로 이동합니다. Shift+F12를 누르면 모든 참조가 표시됩니다. Ctrl+Shift+F를 누르면 모든 파일에서 검색합니다. 이러한 기능은 대규모 코드베이스를 탐색하는 데 필수적입니다.
문제 패널
문제 패널(Ctrl+Shift+M)에는 열려 있는 파일 전체의 이에스린트 및 TypeScript 오류와 경고가 나열됩니다. 커밋하기 전에 수정해야 할 내용을 확인하는 가장 빠른 방법입니다.
빠른 확인
ul>li*3 에밋 약어는 VSCode에서 무엇으로 확장됩니까?
요약: VSCode 작업 흐름
이에스린트, 프리티어 및 언어별 확장 기능을 설치합니다. 에밋을 사용하여 HTML/CSS를 빠르게 작성합니다. 키보드 단축키(Cmd+P, Cmd+Shift+P, Cmd+D)를 익힙니다. .vscode/settings.json에서 formatOnSave를 설정합니다. 반복적인 변경에는 다중 커서 편집을 사용합니다. 코드 탐색에는 정의로 이동을 사용합니다.
자주 묻는 질문
“VSCode: 확장 기능, Emmet, 단축키” 강의는 무료인가요?
네 — “VSCode: 확장 기능, Emmet, 단축키” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“VSCode: 확장 기능, Emmet, 단축키”에서 뭘 배우나요?
필수 확장 기능을 설치하고 Emmet 약어로 HTML과 CSS를 즉시 작성하며 편집 속도를 높이는 키보드 단축키를 배웁니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“VSCode: 확장 기능, Emmet, 단축키” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Chrome DevTools: Elements, Console, Network
- VSCode: 확장 기능, Emmet, 단축키
- Prettier 및 ESLint 설정
- 브라우저 호환성과 caniuse.com