12 KiB

Raw Permalink Blame History

코드 편집기 사용하기

이 강의에서는 웹 기반 코드 편집기인 VSCode.dev의 기본 사용법을 다룹니다. 이를 통해 컴퓨터에 아무것도 설치하지 않고도 코드 수정 및 프로젝트 기여를 할 수 있습니다.

학습 목표

이 강의에서는 다음을 배우게 됩니다:

코드 프로젝트에서 코드 편집기 사용하기
버전 관리를 통해 변경 사항 추적하기
개발을 위한 편집기 맞춤 설정하기

사전 준비

시작하기 전에 GitHub 계정을 만들어야 합니다. GitHub로 이동하여 아직 계정이 없다면 계정을 생성하세요.

소개

코드 편집기는 프로그램을 작성하고 기존 코딩 프로젝트와 협업하는 데 필수적인 도구입니다. 편집기의 기본 사항과 기능을 활용하는 방법을 이해하면 코드 작성 시 이를 적용할 수 있습니다.

VSCode.dev 시작하기

VSCode.dev는 웹에서 사용할 수 있는 코드 편집기입니다. 다른 웹사이트를 여는 것처럼 아무것도 설치하지 않고 사용할 수 있습니다. 편집기를 시작하려면 다음 링크를 열어보세요: https://vscode.dev. GitHub에 로그인하지 않았다면, 로그인하거나 새 계정을 생성한 후 로그인하세요.

로드되면 다음 이미지와 비슷한 화면이 나타날 것입니다:

왼쪽에서 오른쪽으로 이동하며 세 가지 주요 섹션이 있습니다:

_활동 바_에는 돋보기 아이콘 🔎, 기어 아이콘 ⚙️ 등 몇 가지 아이콘이 포함되어 있습니다.
확장된 활동 바는 기본적으로 _탐색기_로 설정되며, 이를 _사이드 바_라고 합니다.
마지막으로 오른쪽에는 코드 영역이 있습니다.

각 아이콘을 클릭하여 다른 메뉴를 표시할 수 있습니다. 완료되면 _탐색기_를 클릭하여 시작 위치로 돌아갑니다.

코드를 작성하거나 기존 코드를 수정하기 시작하면 오른쪽의 가장 큰 영역에서 작업이 이루어집니다. 이 영역을 사용하여 기존 코드를 시각화할 수도 있으며, 이를 다음 단계에서 수행할 것입니다.

GitHub 저장소 열기

첫 번째 단계는 GitHub 저장소를 여는 것입니다. 저장소를 여는 방법은 여러 가지가 있습니다. 이 섹션에서는 저장소를 열어 변경 작업을 시작할 수 있는 두 가지 방법을 소개합니다.

1. 편집기를 사용하여 열기

편집기를 사용하여 원격 저장소를 열 수 있습니다. 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이지만, GitHub 도메인을 VSCode.dev/github로 바꾸면 저장소를 직접 로드할 수 있습니다. 결과 URL은 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을 사용하여 이력서 웹사이트 만들기

복습 및 자기 학습

VSCode.dev 및 기타 기능에 대해 더 읽어보세요.

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

12 KiB Raw Permalink Blame History