Chromebook에서 VS Code로 학습하기

2020년 12월 3일, Alessandro Segala, @ItalyPaleAle

지난 몇 년 동안 Google Chrome OS를 실행하는 Chromebook은 "기존" 노트북에 대한 대안을 제공해 왔습니다. 매우 저렴한 모델부터 고급 모델까지 다양한 선택지가 있어 Chromebook은 특히 학생들에게 인기가 많으며, 학생들은 이를 사용하여 학습하고, 과제를 완료하고, 가상으로 수업에 참여할 수 있습니다.

Chromebook 및 Chrome OS는 일반적으로 웹 브라우저를 중심으로 하지만, Visual Studio Code를 포함한 네이티브 데스크톱 애플리케이션을 설치할 수 있는 Linux 환경을 활성화할 수도 있습니다!

Chromebook에서 VS Code를 실행하면 다양한 언어와 프레임워크로 쉽게 빠르게 코딩을 시작할 수 있습니다. 여기에는 Python, JavaScript 및 Node.js, Java, C# 등 수많은 언어가 포함됩니다!

이 두 부분으로 된 글의 첫 번째 부분에서는 Chromebook에 Visual Studio Code를 설치하는 방법과 Python 또는 JavaScript/Node.js로 코딩을 시작하기 위한 환경을 설정하는 방법을 살펴봅니다. 나중에 게시물에서는 VS Code의 원격 개발 확장을 활용하여 더 강력한 개발 환경에 연결하는 방법을 살펴볼 것입니다.

필요한 것

VS Code는 대부분의 최신 Chromebook에서 실행되며, 잠시 후에 살펴볼 Crostini를 통해 Linux 애플리케이션을 활성화할 수 있다면 말이죠.

Visual Studio Code는 가벼운 편집기이므로 1GB RAM만 있어도 저사양 Chromebook에서도 실행할 수 있습니다. 또한 VS Code는 이제 Linux on ARMv7 및 ARM64에서 사용할 수 있으므로 ARM 칩으로 구동되는 Chromebook에서도 실행할 수 있습니다!

이 튜토리얼에서는 ARM64 CPU, 4GB RAM, 32GB 디스크를 갖춘 보급형 Chromebook을 사용하겠습니다. 사양이 modest함에도 불구하고 VS Code는 이 기계에서 잘 작동합니다!

Chromebook에서 Linux 활성화하기

Chrome OS에 VS Code를 설치하기 전에 Crostini를 사용하여 네이티브 Linux 앱 지원을 활성화해야 합니다.

먼저 시스템 설정으로 이동하여 사이드바에서 **Linux (베타)**를 찾습니다. 거기서 Linux 지원을 켭니다.

화면의 지침에 따라 Linux 환경을 구성합니다 (대부분의 경우 기본값을 수락하는 것으로 충분합니다). Chromebook은 Linux 환경을 생성하기 위한 도구를 다운로드하고 구성합니다. 실제로 이 과정은 Debian 10을 실행하는 컨테이너를 생성하여 완전한 Linux 배포판을 제공합니다!

Linux 환경 설정이 완료되면 새 터미널 창이 나타납니다.

VS Code를 설치하기 전에 Linux 터미널에서 몇 가지 명령을 실행해야 합니다. Linux 패키지 목록을 업데이트하고 선택적 (하지만 강력히 권장되는) 종속성인 gnome-keyring을 설치해야 합니다. 터미널에서 다음 두 명령을 입력합니다 (각 명령 끝에서 Enter 키를 눌러 실행).

sudo apt-get update
sudo apt-get install -y gnome-keyring

출력은 다음과 유사할 것입니다

두 번째 명령이 끝나면 다음 단계로 이동할 수 있습니다.

VS Code 설치

이제 VS Code를 설치할 준비가 되었습니다!

Visual Studio Code 다운로드 페이지로 이동합니다. 거기서 Chromebook에 맞는 패키지를 선택해야 합니다.

• Intel 또는 AMD 칩을 실행하는 Chromebook의 경우 64비트 변형에서 .deb를 선택합니다.
• Chromebook이 ARM64 칩 (테스트 중인 것과 같은)에서 실행되는 경우 대신 ARM64 변형의 .deb 패키지를 선택합니다.

Chromebook이 어떤 종류의 CPU를 사용하는지 확실하지 않은 경우 Linux 터미널에서 dpkg --print-architecture 명령을 실행하여 확인합니다. amd64 (Intel 및 AMD 칩 모두: VS Code의 64비트 변형 선택) 또는 arm64 (ARM64 선택)가 표시됩니다.

VS Code를 다운로드한 후에는 다운로드 폴더에서 패키지를 찾을 수 있습니다. 패키지를 두 번 클릭하여 설치 프로그램을 시작합니다.

Chromebook이 VS Code 및 기타 모든 종속성을 설치합니다.

설치가 완료된 후 앱 목록에서 Linux apps 폴더 안에 Visual Studio Code를 찾을 수 있습니다 (Linux 터미널과 함께). 이제 VS Code를 실행할 수 있습니다.

VS Code가 실행되는 것을 볼 수 있으며, 이 시점에서 코딩을 시작할 준비가 되었습니다!

VS Code가 처음이라면 편집기 사용 방법을 알고 싶을 것입니다. 다음은 탐색할 수 있는 몇 가지 리소스입니다.

• VS Code 소개 동영상: 이 동영상들은 VS Code를 사용하여 파일 및 폴더를 열고, 테마 및 확장을 설치하고, 편집기를 구성하는 방법 등을 설명합니다.
• VS Code로 코딩 배우기: "학습" 섹션에는 코딩이 처음이고 시작하고 싶은 사람들을 위한 기사, 튜토리얼 및 동영상이 포함되어 있습니다.

JavaScript 및 Node.js로 코딩하기

JavaScript는 웹 브라우저 내에서 실행되는 앱과 Node.js를 사용하는 웹 서버에서 실행되는 앱을 구축하는 데 사용할 수 있는 매우 유연한 프로그래밍 언어입니다. 요즘에는 네이티브 데스크톱 앱 (Electron) 및 모바일 앱 (Apache Cordoba, React Native 등)을 구축하고, 사물 인터넷 (IoT) 장치를 프로그래밍하는 등 다양한 용도로 JavaScript가 사용되고 있습니다.

팁: JavaScript를 배우고 싶다면 동료들이 만든 무료 동영상 시리즈가 있습니다:

Visual Studio Code는 JavaScript 및 Node.js로 코딩하기 위한 매우 인기 있는 편집기이며 (State of JS 설문 조사), JavaScript를 네이티브로 지원합니다.

하지만 Chromebook에서 Node.js (및 전반적으로 JavaScript)를 사용하려면 Node.js 런타임을 설치해야 합니다. 이를 위해 Node.js 설치 및 업데이트를 용이하게 하는 작은 오픈 소스 유틸리티인 nvm을 사용할 것입니다.

nvm을 설치하려면 Linux 터미널에서 다음 명령을 실행하십시오.

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
source .bashrc

nvm 설치 후에는 이 명령으로 최신 버전의 Node.js를 설치할 수 있습니다.

nvm install node

팁: VS Code에 통합 터미널이 있다는 것을 알고 계셨나요? 터미널 메뉴에서 새 터미널을 선택하여 실행할 수 있습니다. VS Code는 Linux 환경의 컨텍스트에서 실행되므로 통합 터미널도 Linux에서 실행됩니다.

nvm은 Node.js를 설정, 업데이트 및 관리하기 위한 몇 가지 옵션을 제공합니다. 관심이 있다면 공식 nvm 문서에서 더 자세한 내용을 읽어볼 수 있습니다.

Node.js를 설치한 후에는 터미널에서 node 명령 (node --version을 실행하여 Node.js 설치를 확인하는 것이 좋습니다)과 VS Code의 내장 기능 (통합 작업 실행기 및 Node.js 및 JavaScript 디버거 등)을 사용할 수 있습니다. VS Code에서 JavaScript 및 Node.js를 사용하는 방법에 대해 자세히 알아보려면 VS Code 설명서를 확인하세요!

Python으로 코딩하기

Python은 또 다른 인기 있는 프로그래밍 언어이며, 특히 초보자에게 훌륭합니다. Python을 사용하면 웹, 데스크톱 및 명령줄 앱을 구축할 수 있습니다. Python은 데이터 과학 및 인공 지능 (AI) 작업에 가장 적합한 언어 중 하나이며, IoT 장치, 마이크로 컨트롤러 등을 프로그래밍하는 데에도 사용됩니다!

VS Code는 Python 코딩 및 언어 학습을 위한 훌륭한 편집기입니다. VS Code에서 Python을 사용하여 모든 종류의 앱을 구축하고 노트북 (데이터 과학자들이 사용하는 것과 같은) 작업을 하는 데 사용할 수 있습니다.

팁: Python을 시작하고 싶다면 무료 동영상 시리즈도 있습니다:

Chrome OS에는 Python 3 인터프리터가 미리 설치되어 있지만, 최상의 Python 코딩 경험을 위해 몇 가지 추가 패키지를 설치해야 합니다. 여기에는 Python의 종속성 관리자인 *pip*, Python 가상 환경 관리를 위한 *venv*, 네이티브 패키지 작업을 위한 빌드 도구 등이 포함됩니다. 터미널에서 다음을 실행합니다.

sudo apt-get install -y python3-pip python3-dev python3-venv build-essential libssl-dev libffi-dev

VS Code의 Python 지원은 Microsoft Python 확장을 통해 제공됩니다. Python 확장을 설치하려면 VS Code 내에서 왼쪽 활동 표시줄을 사용하여 확장 보기 (⇧⌘X (Windows, Linux Ctrl+Shift+X))를 열고 "python"을 검색하여 Microsoft에서 제공하는 확장을 설치합니다.

이제 VS Code에서 Python으로 개발을 시작할 준비가 되었습니다! VS Code에서 Python 사용 (코드 실행, 통합 디버거 사용, 린팅 등)에 대해 자세히 알아보려면 VS Code의 Python in VS Code 문서를 확인하세요.

다음: 원격 개발 사용

오늘 내용은 여기까지입니다! 이 게시물에서는 Chromebook에 VS Code를 설치하는 방법과 JavaScript/Node.js 및 Python으로 코딩을 시작하는 방법을 살펴보았습니다.

하지만 더 있습니다. Chromebook은 저사양 버전에서도 VS Code를 잘 실행할 수 있지만, 때로는 개발을 위해 더 빠른 기계 (더 많은 메모리 및/또는 더 빠른 CPU)를 사용해야 할 때가 있습니다. 예를 들어 ARM 기반 Chromebook을 사용하지만 Intel/AMD 칩에서 코드를 실행해야 할 수도 있습니다. 또는 인공 지능을 사용하고 강력한 GPU를 갖춘 기계에 액세스해야 할 수도 있습니다.

VS Code와 원격 개발 확장 (SSH 및 컨테이너), 그리고 GitHub Codespaces를 사용하면 위에 설명된 모든 문제와 그 이상을 해결할 수 있습니다.

이 튜토리얼의 다음 부분에서는 VS Code 원격 확장 및 GitHub Codespaces가 Chromebook을 개발 파워하우스로 어떻게 전환할 수 있는지 배울 것입니다!

그동안 즐겁게 코딩하고 즐겁게 배우세요!

Alessandro Segala, VS Code 제품 관리자 @ItalyPaleAle