윈도우에 만드는 리눅스 개발 환경; 3. nvm으로 node.js 설치

윈도우에 만드는 리눅스 개발 환경 목차

1. 우분투 리눅스 설치 (윈도우 10)

2. 윈도우에 Docker 설치

3. 속도 개선 후 node.js 설치

4. VSCode 설치

5. Docker로 MySQL시작하기

6. Docker로 MongoDB 시작하기

7. 윈도우 11에 우분투 설치

8. Docker로 PostgreSQL 시작하기

0. node.js에 대해서

프론트엔드 개발에서 가장 많이 사용하는 언어는 당연히 자바스크립트(Javascript)이다. 아주 예전에는 프레임워크 없이 화면 이벤트 핸들링에 필요한 간단한 프로그램만 작성하는 시절도 있었지만, DOM을 쉽게 핸들링 할 수 있는 jQuery가 나오면서 화면에 일부 비즈니스 로직이 들어가기 시작하더니, CommonJS로 module화가 쉬워지고 나서, 이제는 이를 기반으로 하는 프레임워크인 node.js가 자바스크립트의 기본 프레임워크로 정착된 분위기이다.

 

이제는 npm (Node Package Manager)을 이용해 공개되어 있는 많은 package (공개된 라이브러리)를 설치하고 , npm이 자동으로 만들어 내는 package.json라는 메타정보 파일을 통해 node.js 프로젝트를 관리한다. 프론트엔드 개발에  자주 사용되는 react도 npm으로 설치할 수 있으므로, node.js가 설치되면 react프로젝트를 만들어 설치가 잘 되었는지 확인해 보겠다.

1. 우분투 VM 업그레이드

네트워크 환경에 따라 다르겠지만, 마이크로소프트 앱스토어를 사용해 설치한 우분투 리눅스의 경우 패키지를 가져오는 repository의 위치가 미국 ubuntu서버(archive.ubuntu.com)로 지정되어 있다. 속도가 잘 나올때도 있지만, 잘 안될 경우는 연결시간 초과로 error가 발생하기도 한다. 이 서버를 다음서버(ftp.daum.net이나, mirror.kakao.com)로 바꾸면 속도도 빨라지고 error가 발생하는 것도 방지할 수 있다.

 

• repository의 위치를 바꾸기 위해 먼저 /etc/apt/sources.list 파일을 vi로 연다.

sudo vi /etc/apt/sources.list

 

vi에디터가 실행되면 ESC키를 한,두번 누르고 나서 콜론(:)을 눌러 명령어 모드로 바꾼다.

명령어 모드로 바뀌면서 커서가 화면 아래로 이동하면, 다음 명령을 입력하고 파일내의 archive.ubuntu.com를 모두 mirror.kakao.com으로 바꾼다. 이 vi명령은 1(첫번째 줄),$(마지막줄)s(ubstitue바꾼다)/archive.ubuntu.com을/mirror.kakao.com으로/g(모두)라는 뜻이다.

 

1,$s/archive.ubuntu.com/mirror.kakao.com/g

 

vi 화면

실행이 끝나면 다시 콜론(:)을 눌러 명령어 모드로 바꾸고 wq (write and quit)를 입력해서 저장하고 끝낸다.

 

• 다음으로 apt명령을 사용하여 우분투의 pakcage list를 다시 update하고, 완료되면 우분투 리눅스를 최신판으로 업그레이드한다.

sudo apt update
sudo apt upgrade -y

 

이제 우분투 리눅스의 패키지 설치 속도가 빨라진 것을 확인할 수 있고, 우분투가 보안패치를 포함해서 업그레이드되었다.

2. nvm으로 node.js의 설치

우분투 리눅스에서 node.js를 apt명령으로 설치하고 node -v로 버전을 확인해 보면,

 

sudo apt install nodejs
node -v

 

node.js홈페이지에 나와 있는 버전과 많은 차이가 많이 있음을 알 수 있다.

 

당연히 react를 포함해서 많은 최신 패키지들이 이 node.js 버전에서는 지원되지 않는 것을 npm을 사용해 설치, 실행해 보면 쉽게 확인할 수 있을 것이다. 이 문제를 해결하기 위해서는 node.js 홈페이지에서 권장하는 버전을 설치해야 하는데, 이를 위해 해당 버전을 포함하고 있는 repository를 sources.list파일에 추가하거나, 보다 유용한 nvm(node version manager)를 사용하면 해결할 수 있는데, 나는 모든 버전을 지원하는 nvm을 선택했다.

 

• nvm을 설치한다.

nvm을 설치하기 위해 nvm의 GitHub로 가면

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

설명 중간에 있는 curl 또는 wget명령을 복사해서 실행하면 된다. 이 글을 쓰는 시점의 curl과 wget명령은 편의를 위해 아래에 복사해 놓았는데, nvm버전이 바뀌면 위 링크의 GitHub에서 최신 버전의 명령을 찾아 복사해 실행하면 된다.

 

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

 

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

 

curl이나 wget 중 본인이 선호하는 명령을 복사해서 붙여 넣으면 nvm설치가 완료된다. 설치하고 로그아웃을 하고 다시 로그인 하면 nvm을 사용할 수 있는데, 로그아웃 없이 바로 사용하려면 변경된 .bashrc의 설정을 다음 명령 중 하나로 실행하면 된다. 

 

. ~/.bashrc

 

source ~/.bashrc

 

• node.js의 LTS (Long Term Support)버전을 설치한다.

이제 nvm을 사용해서 node.js홈페이지에서 봤던 최신 버전을 설치한다. 나는 버전의 지원기간이 긴 18.14.0버전을 선택하고 아래 명령으로 설치했다.

 

nvm install 18.14.0
(또는, 메이저 버전만 지정해도 가능)
nvm install 18

 

이제, node.js가 잘 설치되었는지 react프로젝트를 만들어 확인해 보자.

3. react 테스트

react프로젝트는 create-react-app명령으로 쉽게 만들 수 있다.

 

• 이 명령을 실행하려면 먼저 create-react-app패키지를 아래와 같이 설치한다.

npm i -g create-react-app

 

i는 install을 줄여서 사용한 것이고 g옵션은 global환경에 설치해서 다음에 다른 프로젝트에서도 다시 설치하지 않고 바로 쓸 수 있게 해 준다.

 

• 이제 create-react-app 명령으로 test프로젝트를 만든다.
• create-react-app test

• 생성이 완료되면, 화면 마지막에 있는 명령어를 따라서 입력한다.

cd test
npm start

 

브라우저가 자동으로 열리고 익숙한 react프로젝트 초기화면이 나타나면 잘 실행되는 것이다.

 

4. VSCode 개발 환경 확인

이렇게 만든 프로젝트는 윈도우에서 다른 폴더와 동일하게 보이기 때문에 VSCode를 사용해서 작업을 시작할 수 있다. 다른 IDE나 에디터를 개발환경으로 사용할 수 있지만, VSCode가 node.js개발에는 가장 좋은 것으로 알려져 있다.

 

• VSCode가 설치되어 있지 않다면 아래 URL에서 다운로드하여 윈도우에 설치한다.

Download Visual Studio Code - Mac, Linux, Windows

WSL을 활성화 시키고 우분투를 설치했기 때문에 윈도우 파일 탐색기를 열면 왼쪽 디렉토리 트리의 맨 밑, 네트워크 다음에 Linux가 보일 것이다. 이 폴더를 열면 우분투 OS의 파일을 볼 수 있는데 이 중 /home/[사용자명] 폴더를 열면 앞에서 만든 react프로젝트 폴더를 볼 수 있다. 이번 테스트에서는 /home/webia/works아래에 test라는 이름으로 생성했고 아래와 같이 확인할 수 있다.

 

이제 동일한 방법으로 프로젝트를 만들고 프론트엔드 개발을 할 준비가 되었다.

 

다음 글에서는 프론트엔드 개발자가 매일 사용하는 개발환경인 VSCode 설정에 대해 좀 더 자세히 알아 보겟다.