Top

Dev Container로 React JavaScript 개발환경 구성

#1 기초편

JavaScript 는 Node 환경에서 개발 할 수 있습니다. 이 글은 Dev Container에 Node 개발 환경을 구성합니다. Dev Container는 Node 뿐만 아니라 준비된 다양한 개발 환경을 구성 할 수 있습니다. 예를 들자면, Python, Dart, Java 같은 개발 환경들입니다.

Dev Container란?

마이크로소프트가 제안한 개발 환경 컨테이너 입니다.

장점:

Dev Container 구성하기

Dev Container는 Windows, MacOS, Linux에서 구성할 수 있습니다. 맥을 사용하지 않은지 5년 정도 되었고, 맥에서 구성하는 방법은 테스트 할 수 없으므로 적지 않겠습니다.

Windows: Dev Container 환경 구성

윈도우에서도 Docker와 Dev Container를 사용할 수 있습니다.

Ubuntu: Dev Container 환경 구성

Ubuntu에서 간단한 명령으로 Dev Container를 사용할 수 있습니다.

Windows: Windows Subsystem for Linux (WSL) 설치

Container 기술은 Free-BSD와 Linux에서 지원 됩니다. 윈도우에서 Dev Container를 사용하려면 Docker Desktop을 설치해야 하고, Docker를 구동하려면 WSL이 설치되어 있어야 합니다.

이곳 마이크로소프트 스토어에서 WSL을 검색하여 설치 합니다.

4.2

(선택사항) 다른 리눅스 배포판을 설치하여 WSL을 테스트 해볼 수도 있습니다.

Windows: Docker 설치

docker.com에서 Windows용 Docker Desktop을 다운로드 받아 설치 합니다.

1

설치를 진행합니다.

2

설치를 완료 합니다.

3

Ubuntu: Docker 설치

우분투에서 snap으로 도커 설치는 쉽습니다만, 오류 발생시 snap의 앱이 sandbox에서 실행되므로 보다 긴 오류메시지가표시되고 오류 메시지 보기 힘들며, sandbox로 인해 권한 문제가 발생합니다. snap을 통하지 않고 데비안 패키지로 설치하도록 하겠습니다.

설치 절차는 공식 문서 가 제공됩니다. 시간이 지나 설치 방법이 바뀔 수 있으니 가능한 공식문서를 참조하여 설치하시기 바랍니다.

먼저 기존에 설치된 Docker를 제거 합니다:

$ sudo apt-get remove docker docker-engine docker.io containerd runc
$ snap remove docker

의존성 패키지를 설치합니다:

$ sudo apt-get update
$ sudo apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

Docker를 설치합니다:

$ sudo mkdir -m 0755 -p /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
$ echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
$ sudo apt-get update
$ sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

설치를 확인 합니다.

$ docker --version

Windows: 에서 Visual Studio Code 설치

이곳에서 Visual Studio Code를 다운로드하여 설치 합니다.

Ubuntu: Visual Studio Code 설치

vscode도 snap에서 설치 할 수 있지만, 오류 메시지 표시나 sandbox내의 권한 문제로, 이곳에서 Visual Studio Code를 다운로드합니다. 다운로드 폴더에서 다운로드 받은 데비안 패키지를 설치 합니다. 다운로드 받은 파일을 지정해 주면 됩니다.

$ sudo apt-get install ./code_x.xx.x-xxxxxxxx_amd64.deb

또는 Microsoft 패키지 저장소에서 설치할 수 있습니다:

mkdir -p ~/.cache
cd ~/.cache

sudo apt-get install wget gpg 
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
rm -f packages.microsoft.gpg
sudo apt install apt-transport-https -y
sudo apt update
sudo apt install code -y

프로젝트 폴더 만들기

파일 관리자를 열어서 폴더를 node1이라는 폴더를 만듭니다. 폴더를 만들고 Visual Studio Code로 폴더를 오픈합니다.

image-20230302233457935

Visual Studio Code가 폴더 저작자를 신뢰하냐는 질문에 동의 해 줍니다:image-20230302233809976

Visual Studio Code의 Extensions (확장 플러그인) 탭을 엽니다:

image-20230302233948080

확장 플러그인에서 Dev Containers를 검색하여 설치합니다:

image-20230302234047267

다음 확장 플러그인 들을 설치해 줍니다.

(선택사항 - 팁) 좌측 아래 사람 형상의 아이콘을 눌러서 github나 microsoft 계정과 연동하면 확장 플러그인이나 디자인 등이 여러 컴퓨터에서 동기화 됩니다.

Node.Js & TypeScript Dev Container를 추가합니다.

명령 팰럿

Visual Studio Code에서 Ctrl + Shift + P 를 누르고 명령 팰럿을 통해 다양한 확장 명령들을 검색하여 빠르게 수행 할 수 있습니다.

image-20230303000351227

명령 팰럿에서 Add Dev Con을 입력하여 Dev Container: Add Dev Container Configuration Files... 명령을 실행 합니다.

Dev Container 리스트가 표시 됩니다.

image-20230303000454140

여기서 Node를 입력하여 우리가 설치하고자 하는 Dev Container를 검색합니다.

우리는 Node.js & TypeScript를 설치하여 JavaScript와 TypeScript를 함께 사용할 것입니다.

image-20230303000708833

Node 버전을 물으면 해당 프로젝트가 요구하는 16 또는 18을 선택 합니다.

image-20230303000829569

피처 선택에서 선택하지 않고 확인 (OK)을 눌러 줍니다.

image-20230303000913672

아래처럼 .Dev Container/devcontainer.json파일이 열리면 구성에 성공한 것입니다.

image-20230303001036492

.Dev Container/devcontainer.json 파일 내용은 아래와 같습니다.

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/Dev Containers/templates/tree/main/src/typescript-node
{
	"name": "Node.js & TypeScript",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/Dev Containers/typescript-node:0-18"

	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "yarn install",

	// Configure tool-specific properties.
	// "customizations": {},

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}

Dev Container 구동하기

지금 Dev Container 구성 파일만 만들어졌을 뿐입니다. 아직 Dev Container가 구동되지 않았습니다. 우리는 여전히 호스트 컴퓨터에 있습니다.

F1 또는 Ctrl + Shift + P를 눌러서 다시 명령 팰럿을 열고, Rebuild를 검색하여 Dev Container: Rebuild & Reopen in Container를 실행합니다.

image-20230303001414284

Dev Container: Rebuild & Reopen in Container명령은 다음 작업을 수행 합니다.

image-20230303204018142

컨테이너가 준비 완료 되었으면 상태바 좌측에 Dev Container: Node.js & TypeScript로 표시됩니다.

image-20230303204247590

이제 NodeJs 개발 환경이 준비되었습니다. 터미널 탭을 눌러서 컨테이너의 Bash 로 들어가 봅니다. 유저는 node이고 컨테이너 안의 /workspaces/node1 폴더에 있습니다:

image-20230303204422482

터미널에서 운영체제를 확인합니다:

node ➜ /workspaces/node1 $ lsb_release -a
No LSB modules are available.
Distributor ID: Debian
Description:    Debian GNU/Linux 11 (bullseye)
Release:        11
Codename:       bullseye

터미널에서 node 버전을 확인합니다:

node ➜ /workspaces/node1 $ node --version
v18.14.2
node ➜ /workspaces/node1 $ 

node 패키지를 준비합니다. 몇가지 프롬프트가 나오며 그냥 엔터를 눌러도 기본값으로 설정 됩니다:

node ➜ /workspaces/node1 $ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (node1) 
version: (1.0.0) 0.0.1
description: node demo
entry point: (index.js) 
test command: 
git repository: 
keywords: node
author: Booil Jung
license: (ISC) MIT
About to write to /workspaces/node1/package.json:

{
  "name": "node1",
  "version": "0.0.1",
  "description": "node demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "node"
  ],
  "author": "Booil Jung",
  "license": "MIT"
}
Is this OK? (yes) yes
node ➜ /workspaces/node1 $ 

image-20230303205424892

React 예제 구동해 보기

ReactJS React 프로젝트 생성 및 실행 (React로 아주 간단한 게시판 만들기 - 1)를 따라 간단한 React 예제를 구동해 보겠습니다.

npm의 버전을 확인합니다:

node ➜ /workspaces/node1 $ npm --version
9.5.0
node ➜ /workspaces/node1 $ 

create-react-app 패키지 설치:

Dev Container엣허 npm 사용시 수퍼 유저 권한(su) 등을 지정할 필요가 없습니다.

node ➜ /workspaces/node1 $ npm install -g create-react-app
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

added 67 packages in 3s

5 packages are looking for funding
  run `npm fund` for details
node ➜ /workspaces/node1 $ 

react-simple-blog를 React 프로젝트를 생성합니다:

node ➜ /workspaces/node1 $ create-react-app react-simple-blog

Creating a new React app in /workspaces/node1/react-simple-blog.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1417 packages in 46s

231 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 62 packages in 6s

231 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1479 packages in 7s

231 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created react-simple-blog at /workspaces/node1/react-simple-blog
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-simple-blog
  npm start

Happy hacking!
node ➜ /workspaces/node1 $ 

다음과 같이 파일들이 생성되었습니다:

image-20230303211041608

프로젝트 폴더에서 Reat 앱을 실행합니다:

node ➜ /workspaces/node1 $ cd react-simple-blog
node ➜ /workspaces/node1/react-simple-blog $ npm start
Compiled successfully!

You can now view react-simple-blog in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.17.0.2:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

호스트 브라우저에서 핵 아이콘이 표시된 페이지가 열립니다:

image-20230303211445301

컨테이너 안에서 소스코드를 변경하면 핫리로드가 되는지 확인합니다.src/App.js를 열어서:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Learn ReactLearn Reat MORE로 변경합니다:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React MORE
        </a>
      </header>
    </div>
  );
}

export default App;

그리고 저장합니다. 핫리로드가 동작하는지 확인 합니다.

image-20230303211812681

참조