# 코드 편집기 사용하기 이 강의에서는 웹 기반 코드 편집기인 [VSCode.dev](https://vscode.dev)의 기본 사용법을 다룹니다. 이를 통해 컴퓨터에 아무것도 설치하지 않고도 코드 수정 및 프로젝트 기여를 할 수 있습니다. ## 학습 목표 이 강의에서는 다음을 배우게 됩니다: - 코드 프로젝트에서 코드 편집기 사용하기 - 버전 관리를 통해 변경 사항 추적하기 - 개발을 위한 편집기 맞춤 설정하기 ### 사전 준비 시작하기 전에 [GitHub](https://github.com) 계정을 만들어야 합니다. [GitHub](https://github.com/)로 이동하여 아직 계정이 없다면 계정을 생성하세요. ### 소개 코드 편집기는 프로그램을 작성하고 기존 코딩 프로젝트와 협업하는 데 필수적인 도구입니다. 편집기의 기본 사항과 기능을 활용하는 방법을 이해하면 코드 작성 시 이를 적용할 수 있습니다. ## VSCode.dev 시작하기 [VSCode.dev](https://vscode.dev)는 웹에서 사용할 수 있는 코드 편집기입니다. 다른 웹사이트를 여는 것처럼 아무것도 설치하지 않고 사용할 수 있습니다. 편집기를 시작하려면 다음 링크를 열어보세요: [https://vscode.dev](https://vscode.dev). [GitHub](https://github.com)에 로그인하지 않았다면, 로그인하거나 새 계정을 생성한 후 로그인하세요. 로드되면 다음 이미지와 비슷한 화면이 나타날 것입니다:  왼쪽에서 오른쪽으로 이동하며 세 가지 주요 섹션이 있습니다: 1. _활동 바_에는 돋보기 아이콘 🔎, 기어 아이콘 ⚙️ 등 몇 가지 아이콘이 포함되어 있습니다. 2. 확장된 활동 바는 기본적으로 _탐색기_로 설정되며, 이를 _사이드 바_라고 합니다. 3. 마지막으로 오른쪽에는 코드 영역이 있습니다. 각 아이콘을 클릭하여 다른 메뉴를 표시할 수 있습니다. 완료되면 _탐색기_를 클릭하여 시작 위치로 돌아갑니다. 코드를 작성하거나 기존 코드를 수정하기 시작하면 오른쪽의 가장 큰 영역에서 작업이 이루어집니다. 이 영역을 사용하여 기존 코드를 시각화할 수도 있으며, 이를 다음 단계에서 수행할 것입니다. ## GitHub 저장소 열기 첫 번째 단계는 GitHub 저장소를 여는 것입니다. 저장소를 여는 방법은 여러 가지가 있습니다. 이 섹션에서는 저장소를 열어 변경 작업을 시작할 수 있는 두 가지 방법을 소개합니다. ### 1. 편집기를 사용하여 열기 편집기를 사용하여 원격 저장소를 열 수 있습니다. [VSCode.dev](https://vscode.dev)로 이동하면 _"원격 저장소 열기"_ 버튼이 표시됩니다:  또한 명령 팔레트를 사용할 수 있습니다. 명령 팔레트는 명령 또는 작업의 일부 단어를 입력하여 실행할 적합한 명령을 찾을 수 있는 입력 상자입니다. 왼쪽 상단 메뉴를 사용하여 _보기(View)_를 선택한 다음 _명령 팔레트(Command Palette)_를 선택하거나 다음 키보드 단축키를 사용할 수 있습니다: Ctrl-Shift-P (MacOS에서는 Command-Shift-P).  메뉴가 열리면 _원격 저장소 열기(open remote repository)_를 입력한 다음 첫 번째 옵션을 선택하세요. 참여 중이거나 최근에 열었던 여러 저장소가 표시됩니다. 전체 GitHub URL을 사용하여 저장소를 선택할 수도 있습니다. 다음 URL을 입력 상자에 붙여넣으세요: ``` https://github.com/microsoft/Web-Dev-For-Beginners ``` ✅ 성공하면 텍스트 편집기에 저장소의 모든 파일이 로드됩니다. ### 2. URL을 사용하여 열기 URL을 직접 사용하여 저장소를 로드할 수도 있습니다. 예를 들어, 현재 저장소의 전체 URL은 [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)이지만, GitHub 도메인을 `VSCode.dev/github`로 바꾸면 저장소를 직접 로드할 수 있습니다. 결과 URL은 [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners)가 됩니다. ## 파일 편집하기 브라우저 또는 vscode.dev에서 저장소를 열었으면 다음 단계는 프로젝트를 업데이트하거나 변경하는 것입니다. ### 1. 새 파일 생성하기 기존 폴더 안에 파일을 생성하거나 루트 디렉터리/폴더에 파일을 생성할 수 있습니다. 새 파일을 생성하려면 파일을 저장할 위치/디렉터리를 열고 활동 바 _(왼쪽)_에서 _'새 파일 ...'_ 아이콘을 선택한 후 이름을 입력하고 엔터를 누르세요.  ### 2. 저장소에서 파일 편집 및 저장하기 vscode.dev는 프로젝트를 빠르게 업데이트해야 할 때 로컬 소프트웨어를 로드하지 않고도 유용합니다. 코드를 업데이트하려면 활동 바에 있는 '탐색기' 아이콘을 클릭하여 저장소의 파일 및 폴더를 확인하세요. 파일을 선택하여 코드 영역에서 열고 변경한 후 저장하세요.  프로젝트 업데이트를 완료하면 _`소스 제어`_ 아이콘을 선택하여 저장소에 변경한 모든 내용을 확인하세요. 프로젝트에 변경한 내용을 확인하려면 확장된 활동 바의 `변경 사항(Changes)` 폴더에서 파일을 선택하세요. 그러면 '작업 트리(Working Tree)'가 열려 파일에 변경한 내용을 시각적으로 확인할 수 있습니다. 빨간색은 프로젝트에서 삭제된 부분을, 녹색은 추가된 부분을 나타냅니다.  변경 사항에 만족하면 `변경 사항(Changes)` 폴더 위로 마우스를 올려 `+` 버튼을 클릭하여 변경 사항을 스테이징하세요. 스테이징은 변경 사항을 GitHub에 커밋할 준비를 하는 것을 의미합니다. 변경 사항 중 일부가 마음에 들지 않아 삭제하려면 `변경 사항(Changes)` 폴더 위로 마우스를 올려 `되돌리기(undo)` 아이콘을 선택하세요. 그런 다음 `커밋 메시지(commit message)` _(프로젝트에 변경한 내용에 대한 설명)_를 입력하고 `체크 아이콘`을 클릭하여 변경 사항을 커밋하고 푸시하세요. 프로젝트 작업을 완료하면 왼쪽 상단의 `햄버거 메뉴 아이콘`을 선택하여 github.com의 저장소로 돌아가세요.  ## 확장 기능 사용하기 VSCode에 확장 기능을 설치하면 편집기에 새로운 기능을 추가하고 개발 환경을 맞춤 설정하여 개발 워크플로를 개선할 수 있습니다. 이러한 확장 기능은 여러 프로그래밍 언어를 지원하며 일반 확장 기능 또는 언어 기반 확장 기능으로 나뉩니다. 사용 가능한 모든 확장 기능 목록을 보려면 활동 바에서 _`확장 기능 아이콘`_을 클릭하고 _'마켓플레이스에서 확장 기능 검색'_이라는 텍스트 필드에 확장 기능 이름을 입력하세요. 확장 기능 목록에는 **확장 기능 이름, 게시자 이름, 한 줄 설명, 다운로드 수** 및 **별점**이 포함됩니다.  또한 _`설치된 폴더`_에서 이전에 설치한 모든 확장 기능, _`인기 폴더`_에서 대부분의 개발자가 사용하는 인기 확장 기능, 그리고 동일한 작업 공간의 사용자 또는 최근에 열었던 파일을 기반으로 추천된 확장 기능을 _`추천 폴더`_에서 확인할 수 있습니다.  ### 1. 확장 기능 설치하기 확장 기능 이름을 검색 필드에 입력하고 확장 기능이 확장된 활동 바에 나타나면 클릭하여 코드 영역에서 추가 정보를 확인하세요. 확장된 활동 바에서 _파란색 설치 버튼_을 클릭하거나 코드 영역에서 확장 기능을 선택하여 추가 정보를 로드한 후 나타나는 설치 버튼을 클릭하여 설치할 수 있습니다.  ### 2. 확장 기능 맞춤 설정하기 확장 기능을 설치한 후에는 필요에 따라 동작을 수정하고 선호도에 맞게 맞춤 설정해야 할 수 있습니다. 이를 위해 확장 기능 아이콘을 선택하면 설치된 확장 기능이 _설치된 폴더_에 나타납니다. _**기어 아이콘**_을 클릭하고 _확장 기능 설정(Extensions Setting)_으로 이동하세요.  ### 3. 확장 기능 관리하기 확장 기능을 설치하고 사용한 후에는 vscode.dev에서 다양한 요구에 따라 확장 기능을 관리할 수 있는 옵션을 제공합니다. 예를 들어 다음을 선택할 수 있습니다: - **비활성화:** _(확장 기능을 완전히 제거하지 않고 더 이상 필요하지 않을 때 임시로 비활성화)_ 확장된 활동 바에서 설치된 확장 기능을 선택 > 기어 아이콘 클릭 > '비활성화' 또는 '워크스페이스에서 비활성화' 선택 **또는** 코드 영역에서 확장 기능을 열고 파란색 비활성화 버튼 클릭. - **제거:** 확장된 활동 바에서 설치된 확장 기능을 선택 > 기어 아이콘 클릭 > '제거' 선택 **또는** 코드 영역에서 확장 기능을 열고 파란색 제거 버튼 클릭. --- ## 과제 [VSCode.dev을 사용하여 이력서 웹사이트 만들기](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md) ## 복습 및 자기 학습 [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) 및 기타 기능에 대해 더 읽어보세요. --- **면책 조항**: 이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서를 해당 언어로 작성된 상태에서 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.