교육에서의 개발 컨테이너: 강사를 위한 가이드

2020년 7월 27일, Brigit Murtaugh, @BrigitMurtaugh

많은 교육자들이 학기 초반 며칠 또는 몇 주가 학생들을 위한 올바른 환경 설정에 소요된다는 점을 지적해 왔습니다. 그럼에도 불구하고 학생들은 여전히 저품질의 개발 경험을 얻거나 과제에 대한 불충분한 평가를 받을 수 있습니다.

"제 학생들의 설정을 잡는 데 보통 5번의 수업 시간이 걸립니다. 파이썬 버전도 다루어야 하고요. 복잡성이 많습니다. 안타깝게도 그 복잡성을 해결하는 데 많은 시간과 비용이 듭니다." -[커뮤니티 칼리지 미국 CS 101 교수]

"파이썬 설치에 맞춰 특별히 설정된 VS Code 버전을 선호합니다..." -[인문학 칼리지 조교수]

Visual Studio Code를 사용한 개발 컨테이너는 학생들이 일관된 코딩 환경을 갖도록 보장하는 교육에서 훌륭한 도구가 될 수 있습니다. 설정 작업을 대신 처리해주기 때문에 학생들과 강사들은 구성 단계를 빠르게 건너뛰고, 진정으로 중요한 것, 즉 배우고 훌륭한 코드를 작성하는 데 집중할 수 있습니다!

개발 컨테이너

그렇다면 개발 컨테이너란 무엇일까요? 컨테이너는 코드와 해당 코드가 실행하는 데 필요한 모든 종속성(런타임, 도구, 라이브러리, 설정 포함)을 패키징하는 소프트웨어 조각입니다. 컨테이너는 처음에는 일관된 환경에서 앱을 배포하고 관리하며 하드웨어 사용 효율성을 높이는 방법으로 만들어졌습니다. 이후 일관된 빌드 환경을 제공하는 데 도움이 되도록 발전했으며, 최근에는 개발 환경을 제공하는 데 사용되고 있습니다. 여기서 "dev container"라는 이름이 유래했습니다.

컨테이너를 만들 때, 초기 내용은 "이미지"라고 알려진 것에서 가져옵니다. 이미지는 운영 체제 및 기타 도구가 미리 설치된 미니 디스크 드라이브로 생각할 수 있습니다. Dockerfile을 사용하여 이미지에 무엇이 포함될지 설명하며, 이미지를 실행하면 컨테이너가 됩니다.

Dev 컨테이너는 컴퓨터와 별도의 코딩 환경을 제공합니다. 예를 들어, 특정 버전의 종속성을 다운로드하면 해당 버전은 컨테이너에만 해당됩니다. 아래 다이어그램에서 컨테이너가 앱과 필요한 종속성을 포함하고 컴퓨터(호스트 OS 및 인프라)를 종속성으로부터 깨끗하게 유지하는 방법을 확인하세요.

강사로서 과제에 대한 특정 이미지를 만들 수 있습니다. 각 학생은 운영 체제 또는 컴퓨터에 이미 설치된 다른 파일에 관계없이 동일한 버전의 파이썬 또는 C++ 컴파일러와 같은 종속성의 정확히 동일한 버전을 받게 됩니다.

VS Code에서의 개발 컨테이너

Visual Studio Code의 Dev Containers 확장 프로그램을 사용하면 컨테이너를 메인 코딩 환경으로 사용할 수 있습니다. 교실에서 강사는 기존 dev container를 사용하거나 직접 만들어서 반 전체와 공유할 수 있습니다. 각 학생은 VS Code에서 컨테이너를 열고 자동으로 애플리케이션 개발에 필요한 도구와 런타임을 갖게 됩니다. 학생들은 코딩하는 동안 IntelliSense 및 디버깅을 포함한 VS Code의 모든 기능을 사용할 수 있습니다.

Dev Containers 확장 프로그램은 Linux 기반 컨테이너와만 작동하므로, 학생들의 컴퓨터 운영 체제가 다르더라도 코딩 환경은 모든 학생에게 일관되게 제공됩니다.

이미 많은 강사들이 Dev Containers를 성공적으로 교실에서 사용하고 있습니다. UC San Diego에서 진행된 한 강좌에서 dev 컨테이너를 사용한 세 연구원의 경험에 대해 자세히 알아보려면 Using DevContainers to Standardize Student Development Environments: An Experience Report를 확인해 보세요.

이 게시물은 학생들이 더 원활하고 일관된 환경을 만들 수 있도록 교실에서 개발 컨테이너를 구현하려는 강사들을 위한 가이드 역할을 할 것입니다.

dev 컨테이너를 실제로 어떻게 사용하는지, 그리고 학생들이 단 5분 만에 시작하는 방법을 보려면 소개 동영상을 확인하세요.

강사를 위한 가이드

기존 설정 방식으로는 학생들이 환경을 설정하는 동안 다양한 문제에 직면할 수 있습니다. 예를 들어, 고유한 OS의 차이, 프로젝트 파일 저장 위치, 또는 설치된 런타임이나 도구의 작은 차이 등이 있습니다. 강사는 이러한 모든 미묘한 차이를 잘 이해해야 학생들이 이러한 문제를 해결하도록 도울 수 있습니다.

흔한 문제는 도구의 다른 버전을 관리하는 것입니다. 예를 들어 파이썬을 살펴보겠습니다: 파이썬 2와 파이썬 3이 있고, 다양한 마이너 버전이 있습니다. 여러 버전의 파이썬과 린터와 같은 여러 동반 도구를 갖는 것은 혼란스럽고 오류로 이어질 수 있습니다.

엄청난 시간과 혼란을 절약하기 위해, dev 컨테이너를 사용하여 우리 반 전체에 표준화된 파이썬 개발 환경을 만들 수 있습니다. 학생들은 모두 동일한 버전의 파이썬을 받게 되어 새 버전을 설치하거나 오래된 버전을 제거할 필요가 없으며, 동일한 컨테이너와 소스 코드를 실행하는 모든 사람이 정확히 동일한 결과를 얻게 됩니다.

전제 조건

• Visual Studio Code를 설치합니다.
• Docker Desktop을 설치하세요.
  • Docker는 컨테이너를 빌드하고 공유하는 업계 표준입니다. Docker Desktop Stable 2.3.0.3은 Docker Desktop의 최신 성능 버전이므로 이를 권장합니다.
  • Windows Home에 새로 도입된 Docker Desktop 지원이 있습니다. Windows 10 버전 2004와 WSL 2 (Windows Subsystem for Linux 2) 백엔드 활성화가 필요합니다. WSL 2 설치 가이드에 따라 WSL 2를 활성화하세요.
  • WSL 2 백엔드를 설정하고 싶지 않은 학생들의 경우, Docker Desktop for Windows를 Windows 10 Pro, Enterprise 또는 Education(빌드 16299 이상)에서 대안으로 사용할 수 있으며, Hyper-V 및 Containers Windows 기능을 활성화해야 합니다.

명령 프롬프트 또는 터미널에 code를 입력하거나 컴퓨터에서 VS Code를 선택하여 VS Code를 실행해 보겠습니다.

VS Code가 실행되면 Dev Containers 확장 프로그램이 설치되었는지 확인하십시오.

Remote 확장 프로그램 중 하나를 설치하면 상태 표시줄 왼쪽 하단에 녹색 Remote 표시기가 추가됩니다.

그것을 클릭하여 명령 팔레트를 열고 Dev Containers 명령이 나열되어 있는지 확인할 수 있습니다.

수업을 위한 컨테이너 액세스

학생들이 일관된 코딩 환경을 갖도록 돕기 위해 예제 dev 컨테이너를 살펴보겠습니다. 교실에서 단일 GitHub 리포지토리를 만들어 동일한 기술 스택을 공유하는 연습 문제를 저장할 수 있습니다. 예를 들어, 모든 파이썬 과제는 동일한 컨테이너를 사용하고 동일한 리포지토리에 저장할 수 있습니다.

파이썬 dev 컨테이너와 두 개의 파이썬 소개 과제가 포함된 예제 vscode-course-sample GitHub 리포지토리가 있습니다. VS Code에서 열어보겠습니다.

왼쪽 하단의 Remote 표시기를 선택하거나 명령 팔레트를 사용하여 Dev Containers 명령을 호출할 수 있습니다.

컨테이너 볼륨에 리포지토리 복제...을 선택하겠습니다.

컨테이너가 저장된 GitHub 리포의 URL을 입력해야 합니다. 이 경우 microsoft/vscode-course-sample입니다.

고유 볼륨 생성을 할 수 있습니다. 볼륨은 컨테이너 내에 파일이 저장될 위치입니다.

컨테이너 리포를 선택했으므로 VS Code가 이미지를 빌드하고 컨테이너를 시작하기 위해 다시 로드됩니다.

컨테이너가 빌드되고 실행되면 파일이 로드되고 파이썬 환경 내에서 코딩을 시작할 수 있습니다!

탐색기에서 sort.py를 클릭하여 열고, **F5**(또는 오른쪽 상단의 녹색 실행 아이콘)를 눌러 실행합니다.

로컬 컴퓨터에 파이썬을 설정할 필요 없이 파이썬 코드가 성공적으로 실행되었습니다.

또한, 프로그램을 일시 중지하고 디버깅을 돕기 위해 중단점을 설정하는 등 VS Code의 모든 이점을 활용할 수 있습니다. 단어 목록을 정렬할 때 중단점을 설정해 보겠습니다.

F5를 눌러 프로그램을 실행합니다. 프로그램이 중단점에 도달하면 멈추는 것을 확인하세요.

수업을 위한 컨테이너 생성

환상적인 컨테이너 예제를 살펴본 후, Dev Containers 확장 프로그램을 사용하여 첫 번째 컨테이너를 직접 설정해 보겠습니다. "Hello World" 파이썬 애플리케이션으로 시작해 봅시다.

개발 컨테이너를 설정하는 데 필요한 파일을 시작하기 위해 **Dev Containers: Dev Container 구성 파일 추가…**를 선택합니다.

컨테이너 구성 파일은 개발 컨테이너를 만들고 사용자 정의하는 데 필요한 것입니다. 나타나는 컨테이너 정의 목록은 현재 애플리케이션(이 경우 파이썬 파일)의 내용에 따라 필터링됩니다. **Python 3**을 선택합니다.

Dev Containers 확장 프로그램은 자동으로 .devcontainer 폴더와 그 안에 두 개의 구성 파일(`devcontainer.json` 및 Dockerfile)을 추가합니다. 두 파일 모두 자세히 살펴보겠습니다.

devcontainer.json

devcontainer.json은 VS Code가 컨테이너를 시작하는 방법과 연결 후 수행할 작업을 설명합니다. 이 파일은 .devcontainer/devcontainer.json 아래에 있거나 프로젝트 루트에 devcontainer.json으로 직접 저장될 수 있습니다.

다음은 간단한 devcontainer.json 예시입니다. 사전 구성된 Node 이미지를 가져오고, 포트 3000에 대한 포트 전달을 자동으로 설정하며, 컨테이너가 생성될 때 eslint 확장을 설치합니다.

다음은 파이썬 프로젝트를 위한 약간 더 정교한 devcontainer.json 예시입니다. dockerfile 속성을 사용하여 직접 이미지 대신 Dockerfile을 참조합니다. 또한 파이썬 확장을 자동으로 설치하고, 컨테이너가 생성된 후 린팅과 같은 컨테이너별 설정 집합을 설정합니다.

devcontainer.json은 학생들의 특정 요구에 맞는 사용자 정의 코딩 환경을 만드는 좋은 기회입니다. 각 수업 또는 과제에 대한 고유한 환경을 만들기 위해 몇 가지 변수를 지정할 수 있습니다.

교육을 위한 devcontainer.json에서 시작하기에 권장하는 변수는 다음과 같습니다.

이 파일에 몇 가지 변수를 설정하면 장기적으로 수업 시간을 절약할 수 있습니다. 예를 들어, extensions 변수를 사용하여 모든 학생들이 동일한 확장 세트를 자동으로 설치하도록 할 수 있습니다. 경로 설정도 학생들의 컴퓨터에서 어려움을 겪거나 문제를 일으킬 수 있지만, settings 변수를 통해 경로 정보를 지정하면 수업 시간을 절약하고 컴퓨터의 경로 변수가 손상되지 않도록 할 수 있습니다.

devcontainer.json 참조에는 이 구성 파일에 포함할 수 있는 모든 사용 가능한 속성에 대한 테이블이 있습니다.

Dockerfile

Docker는 Dockerfile의 지침을 읽어 이미지를 자동으로 빌드할 수 있습니다. 이 파일은 최소한 FROM을 사용하여 기본 이미지가 지정되며, 명령줄 지침도 포함할 수 있습니다.

다음은 파이썬 앱의 Dockerfile 모습입니다.

컨테이너 열기

컨테이너 구성 파일이 추가되면 폴더에 devcontainer.json 파일이 생겼다는 알림을 받게 됩니다. **컨테이너에서 다시 열기**를 선택합니다.

VS Code의 새 인스턴스가 실행되고, 이미지가 빌드되고 앱이 dev 컨테이너에서 시작됩니다.

컨테이너가 빌드되면 모든 파일은 동일하지만, 왼쪽 하단 표시기에 "Dev Container: Python 3"이라고 표시되어 컨테이너 안에 있음을 나타냅니다. 로컬 컴퓨터에 설치된 파이썬 버전(있는 경우)에 관계없이 코드를 쉽게 실행할 수 있습니다!

과제 생성 및 공유

이제 dev 컨테이너를 갖게 되었으므로, 학생들의 과제에 액세스할 수 있도록 리포지토리에 업로드할 수 있습니다. README 파일에 과제 지침, 과제에 필요한 기본 또는 템플릿 코드, 그리고 일관된 개발 환경을 위한 .devcontainer 폴더를 포함할 수 있습니다. 이 모든 파일은 단일 리포로 업로드할 수 있습니다.

Git이 설치되었는지 확인하십시오. VS Code에서 컨테이너 프로젝트를 새 Git 리포지토리로 초기화할 수 있습니다. 또는 명령줄에서 프로젝트 디렉토리의 git init을 사용할 수도 있습니다.

다음 단계는 브라우저에서 GitHub의 새 리포지토리에 로컬 리포지토리를 연결하는 것입니다.

그런 다음 로컬 Git 리포(컴퓨터의 컨테이너 프로젝트)를 원격 리포(브라우저에서 만든 GitHub 리포)에 연결합니다.

GitHub에 로그인하라는 메시지가 표시될 수 있습니다. 로그인하면 파일이 원격 Git 리포에 추가될 수 있습니다.

이제 브라우저에서 GitHub를 새로고침하면 파일을 볼 수 있습니다!

리포지토리를 GitHub에 업로드하는 방법에 대한 자세한 내용은 이 GitHub에 기존 프로젝트 추가 가이드를 확인하세요.

과제 액세스

학생들이 GitHub에서 dev 컨테이너에 액세스하고 쉽게 프로그래밍을 시작하는 방법을 보려면 빠른 5분 동영상을 확인하세요.

피드백 및 추가 자료

컨테이너와 함께 VS Code를 설정하는 데 도움이 되도록 VS Code Remote Development 설명서에 자세한 기사가 있습니다. 팀에 대한 질문이나 피드백이 있으시면 VS Code Remote Development GitHub Repository에 이슈를 열거나 @code로 트윗해 주세요.

행복한 코딩 되세요!

Brigit Murtaugh, VS Code 프로그램 관리자 @BrigitMurtaugh