7.9 KiB

Raw Blame History Unescape Escape

코드 편집기 사용: VSCode.dev 마스터하기

환영합니다!
이 강의에서는 강력한 웹 기반 코드 편집기인 VSCode.dev를 기본부터 고급 사용법까지 배웁니다. 브라우저에서 설치 없이 코드 편집, 프로젝트 관리, 변경 사항 추적, 확장 설치, 협업을 자신 있게 수행하는 방법을 배우게 됩니다.

학습 목표

이 강의를 마치면 다음을 할 수 있습니다:

어떤 프로젝트든, 어디서든 효율적으로 코드 편집기를 사용할 수 있습니다.
내장된 버전 관리 기능으로 작업을 원활하게 추적할 수 있습니다.
편집기 커스터마이징과 확장을 통해 개발 워크플로를 개인화하고 향상시킬 수 있습니다.

사전 준비

시작하려면 무료 GitHub 계정에 가입하세요. 이를 통해 코드 저장소를 관리하고 전 세계적으로 협업할 수 있습니다. 아직 계정이 없다면 여기에서 계정을 생성하세요.

웹 기반 코드 편집기를 사용하는 이유

VSCode.dev 같은 코드 편집기는 코드 작성, 편집, 관리의 중심 역할을 합니다. 직관적인 인터페이스, 다양한 기능, 브라우저를 통한 즉각적인 접근성을 제공하며 다음을 할 수 있습니다:

어떤 기기에서든 프로젝트를 편집
설치의 번거로움 없이 작업
즉시 협업 및 기여

VSCode.dev에 익숙해지면 언제 어디서든 코딩 작업을 처리할 준비가 됩니다.

VSCode.dev 시작하기

**VSCode.dev**로 이동하세요—설치도, 다운로드도 필요 없습니다. GitHub로 로그인하면 설정, 확장, 저장소를 동기화하는 등 전체 기능에 접근할 수 있습니다. 요청 시 GitHub 계정을 연결하세요.

로드 후 작업 공간은 다음과 같이 보입니다:

![기본 VSCode.dev](../images/default-vscode-dev 세 가지 주요 섹션이 왼쪽에서 오른쪽으로 나뉩니다:

활동 바: 🔎 (검색), ⚙️ (설정), 파일, 소스 제어 등 아이콘
사이드바: 활동 바 아이콘에 따라 컨텍스트가 변경됨 (기본값은 탐색기로 파일 표시)
편집기/코드 영역: 가장 큰 오른쪽 섹션—코드를 실제로 편집하고 볼 수 있는 곳

아이콘을 클릭하여 기능을 탐색하세요. 하지만 위치를 유지하려면 _탐색기_로 돌아오세요.

GitHub 저장소 열기

방법 1: 편집기에서

VSCode.dev로 이동합니다. **"원격 저장소 열기"**를 클릭하세요.

![원격 저장소 열기](../../../../8-code-editor/images/open-remote-repository 명령 팔레트 (Ctrl-Shift-P 또는 Mac에서는 Cmd-Shift-P)를 사용하세요.

![팔레트 메뉴](../images/palette-menu.png 원격 저장소 열기”를 선택하세요.
- 옵션을 선택합니다.
- GitHub 저장소 URL(예: https://github.com/microsoft/Web-Dev-For-Beginners)을 붙여넣고 Enter를 누릅니다.

성공하면 전체 프로젝트가 로드되어 편집할 준비가 됩니다!

방법 2: URL을 통해 즉시 열기

GitHub 저장소 URL에서 github.com을 vscode.dev/github로 바꾸면 VSCode.dev에서 직접 열 수 있습니다.
예:

GitHub: https://github.com/microsoft/Web-Dev-For-Beginners
VSCode.dev: https://vscode.dev/github/microsoft/Web-Dev-For-Beginners

이 기능은 어떤 프로젝트든 빠르게 접근할 수 있도록 해줍니다.

프로젝트 파일 편집하기

저장소를 열면 다음을 할 수 있습니다:

1. 새 파일 생성

탐색기 사이드바에서 원하는 폴더로 이동하거나 루트를 사용하세요.
‘새 파일 ...’ 아이콘을 클릭하세요.
파일 이름을 입력하고 Enter를 누르면 파일이 즉시 나타납니다.

![새 파일 생성](../images/create-new-file 2. 파일 편집 및 저장

탐색기에서 파일을 클릭하여 코드 영역에서 엽니다.
필요한 변경 사항을 만드세요.
VSCode.dev는 변경 사항을 자동으로 저장하지만 Ctrl+S를 눌러 수동으로 저장할 수도 있습니다.

![파일 편집](../images/edit-a-file.png. 버전 관리로 변경 사항 추적 및 커밋

VSCode.dev에는 Git 버전 관리가 통합되어 있습니다!

'소스 제어' 아이콘을 클릭하여 모든 변경 사항을 확인하세요.
Changes 폴더의 파일은 추가된 부분(녹색)과 삭제된 부분(빨간색)을 보여줍니다.
![변경 사항 보기](../images/working-tree.png 파일 옆의 +를 클릭하여 커밋 준비를 합니다.
원하지 않는 변경 사항은 되돌리기 아이콘을 클릭하여 삭제하세요.
명확한 커밋 메시지를 입력한 후 체크 표시를 클릭하여 커밋하고 푸시합니다.

GitHub 저장소로 돌아가려면 왼쪽 상단의 햄버거 메뉴를 선택하세요.

![변경 사항 준비 및 커밋](../images/edit-vscode.dev 확장으로 기능 강화

확장은 VSCode.dev에 언어, 테마, 디버거, 생산성 도구를 추가하여 코딩을 더 쉽고 재미있게 만들어줍니다.

확장 검색 및 관리

활동 바에서 확장 아이콘을 클릭하세요.
'마켓플레이스에서 확장 검색' 상자에 확장을 검색하세요.

![확장 세부 정보](../images/extension-details:
- 설치됨: 추가한 모든 확장
- 인기: 업계에서 선호하는 확장
- 추천: 워크플로에 맞춘 확장
![확장 보기](

1. 확장 설치

검색창에 확장 이름을 입력하고 클릭하여 세부 정보를 편집기에서 확인하세요.
사이드바 또는 메인 코드 영역에서 파란색 설치 버튼을 클릭하세요.

![확장 설치](../images/install-extension 2. 확장 커스터마이징
설치된 확장을 찾으세요.
기어 아이콘을 클릭 → _확장 설정_을 선택하여 원하는 대로 동작을 조정하세요.

![확장 설정 수정](../images/extension-settings 3. 확장 관리 다음 작업을 할 수 있습니다:
비활성화: 확장을 설치 상태로 유지하면서 일시적으로 끄기
제거: 더 이상 필요하지 않은 경우 영구적으로 삭제

확장을 찾고 기어 아이콘을 클릭하여 ‘비활성화’ 또는 ‘제거’를 선택하거나 코드 영역의 파란색 버튼을 사용하세요.

과제

실력을 테스트하세요: vscode.dev를 사용하여 이력서 웹사이트 만들기

추가 탐구 및 자기 학습

공식 VSCode 웹 문서를 통해 더 깊이 탐구하세요.
고급 작업 공간 기능, 키보드 단축키, 설정을 탐색하세요.

이제 VSCode.dev를 사용하여 어디서든, 어떤 기기에서든 코딩, 생성, 협업할 준비가 되었습니다!

면책 조항:
이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서의 원어 버전이 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.

7.9 KiB Raw Blame History Unescape Escape