우분투로 자바스크립트 개발하기 — 2. 개발환경 세팅하기

nvm, nodejs, vscode, chrome 설치하기

한 프로그램을 실행시키기 위해 여러 패키지를 설치해야 합니다. (icons from flaticon)

apt를 통한 우분투 패키지 관리

특수한 패키지를 제외하고는 대부분 apt를 통해 설치할 수 있습니다. 아래 링크에서 사용법에 대해 자세히 설명이 되어있으니 한번 읽어보면 좋습니다!

처음 우분투를 설치하신 분들은, 그간 업데이트가 된 패키지들의 정보를 받아오는 sudo apt update명령어를 터미널에 입력해봅시다. 터미널이 어디있는지 모르시겠다면, 왼쪽 하단의 application을 누르시고 terminal을 검색해보세요! sudo apt update 를 입력하고 엔터를 누르시면 이런 화면을 보실 수 있는데, 자연스럽습니다. 여기에서 sudo apt upgrade 명령을 수행하시면 여러 중요한 프로그램(패키지)를 업데이트 할 수 있습니다.

apt를 통한 크롬 설치하기

우분투에서 크롬을 깔아보겠습니다. 역시 CLI로 한번 깔아볼까요? 우선 크롬 설치 파일을 받아보겠습니다. 설치 파일을 저장하기 위해 /home 폴더 최 상단에 apps라는 폴더를 만들어보겠습니다. 무슨 말인지 잘 모르시겠다면 일단 한번 따라해볼까요?

터미널을 여시고 cd ~ 을 입력한 뒤에 mkdir apps 라는 명령어로 apps 폴더를 만들어보겠습니다. 이후에 아시겠지만 cd ~/home 폴더로 이동한 것이고, mkdir apps 는 그 곳에 apps라는 새로운 폴더를 만든 것입니다. 윈도우의 "새 폴더"와 같은 작업입니다. 이후에 cd apps 라는 명령어를 통해 폴더간 이동 (개발자들은 왠지 모르게 디렉토리라고 많이 합니다)을 한 후, 크롬 설치 파일을 받아봅시다. wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

cd ~ 
mkdir apps
cd apps
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

그 다음에 한번 터미널에서도 파일을 확인해볼까요?ls -al 이라는 명령어로, 현재 터미널이 위치해있는 디렉토리의 모든 파일 및 폴더 정보를 확인할 수 있습니다. 나중에.git같은.으로 시작하는 숨겨진 파일이나 폴더도 확인하실 수 있습니다. 이렇게 숨겨진 파일을 볼 수 있다는 것은 실제 세팅 파일이 어디에 있고 무엇을 고쳐야 하는지 이해할 수 있는 단초가 됨으로, 중요합니다!

.deb 파일이 생긴 것을 볼 수 있습니다!

google-chrome-stable_current_amd64.deb라는 실행파일을 다운로드 받으셨군요! 한번 설치해보겠습니다.sudo apt install ./google-chrome-stable_current_amd64.deb

막간을 이용해 내가 무슨 명령을 내린건지 한번 곱씹어볼까요? apt는 설명 드렸지만 일종의 패키지 설치 도구입니다. 이 패키지 설치 도구가 무언가를 루트 폴더에 설치를 하려면 sudo 권한이 필요합니다. 그래서 sudo apt install 이라는 설치 명령을 내렸는데요, 이번에는 .deb 패키지를 지정해줬습니다. 위치를 잘 명시해주었죠? ./google-chrome-stable_current_amd64.deb 앞으로도 대부분의 .deb 패키지들을 다운을 받으시게 된다면, 이렇게 apt를 통해서 설치하실 수 있어야 합니다.

설치가 되었는지 확인해볼까요? 왼쪽 하단의 프로그램 표시 버튼을 누르고, chrome 으로 검색해보시면 아마 크롬을 찾으실 수 있을겁니다.

클릭해볼까요? 잘 실행되는 모습입니다 :)

강력한 Code Editor VS Code 설치

한번 설치해볼까요? 공식 홈페이지로 이동해보겠습니다.

왼쪽에 우분투에서의 설치를 위한 .deb 파일을 다운로드 받습니다

왼쪽에 우분투에서의 설치를 위한 .deb 파일을 다운로드 받습니다. 다운로드 받은 폴더로 한번 가볼까요? 저는 크롬을 설치했던 apps 폴더에 다운로드 받았습니다.

터미널에서도 파일을 확인해볼까요? ls -al 로 직접 확인해보시기 바랍니다 :) 이 곳에서 아까 크롬을 설치했던 것 과 같은 명령어를 실행하셔야 됩니다. sudo apt install ./code_1.43.0–1583783132_amd62.deb

이제 여러분은 Visual Studio Code를 사용하실 수 있습니다. 크롬과 같은 방식으로 찾아서 실행시켜보세요!

nvm으로 nodejs와 npm 설치 및 관리하기

옛날에는 프론트앤드 개발만 가능하던 js로 백앤드 개발 및 네이티브 앱까지!

nodejs를 가장 효율적으로 사용할 수 있는 도구가 nvm 입니다. 뭐하는 녀석인지 궁금하다면 한번 구글링을 해보시죠 :) nvm 부터 설치 해볼까요? nvm 의 모든 소스코드를 보관하고 있는 깃허브로 이동합니다. 아래 링크로 이동하여 안내를 한번 따라해볼까요?

you should run the install script. To do that, you may either download and run the script manually, or use the following cURL or Wget command

설치 스크립트를 실행하라고 하는데, 그게 뭔가 궁금하네요. 잘 모르겠지만 아래 명령어를 한번 따라해볼게요.

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

음.. 왜 안되죠? 저는 이런 화면을 보고 있습니다.

뭔 소린지는 잘 모르겠지만, 뭔가 추가로 설치를 해야 되는 것 같습니다. 사실 위 명령을 실행하기 위해서는 이 cURL이라는 패키지를 설치를 하셔야 합니다! 이런 메세지가 나왔다는 것은, 설치가 되어있지 않다는 의미입니다. 다음 기회에 꼭 설치해보세요. :D

그러면 다음에 적혀있는 명령어를 한번 쳐볼까요?

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

갑자기 무언가 되버리고 말았습니다. 뭔가 된 것 같죠? 터미널을 잘 읽어보시면 “터미널을 껏다가 키고 nvm을 사용해보세요”라고 적혀있습니다. 영어를 아무래도 잘 해야만 할 것 같지 않나요?

이제 아래의 커멘드를 입력해보세요

nvm --version

이 커멘드는 nvm의 버젼을 확인하는 명령어지만, 설치가 잘 되었는지 확인할 수도 있는 커멘드이기도 합니다. 만약 어떤 프로그램을 깔았다면 이렇게 버젼 확인 커맨드가 무엇인지 확인해보세요. 그렇다면 설치가 잘 되었는지 확인하실 수 있습니다. 영어가 자신 있으시다면 nvm --help 로도 대부분의 명령어를 확인하실 수 있습니다.

이제 nodejsnvm을 통해서 설치하겠습니다. nvm ls-remote --lts 라는 명령어를 적으면 이런 화면을 보실 수 있습니다. nvm 뒤에 뭔가를 붙임으로써, 다른 동작을 할 수 있다는 점을 유념하셔야 합니다.

LTS라는 말 어디서 보지 않았나요? 우분투 설치할 때 LTS라는 말을 많이 보셨을 겁니다. LTS는 Long Term Support라는 말의 약자로, 이 버젼의 패키지를 오랫동안 지원하겠다는 의미입니다. 어떤 패키지든 LTS를 깔아야겠다 라는 느낌이 팍팍 오신다면, 센스가 좋으신겁니다!

그럼 2020년 3월 기준 최신 LTS 버젼을 설치하겠습니다. 가장 마지막에 최근 LTS라고 나와있는 12.16.1 버젼을 설치해볼까요? nvm install 12.16.1 라는 명령어로 설치할 수 있습니다.

와우! nodejs를 설치하셨습니다! nvm은 다른 버젼의 nodejs도 사용할 수 있다는 것이 장점이기 때문에, 한번 10.13.0 버젼도 설치하고, 사용해보겠습니다! nvm install 10.13.0

잘 하셨습니다! 이제 두가지 nodejs 버젼을 사용할 수 있습니다. 어떻게 버젼을 바꿔가면서 사용할 수 있을까요? 아래의 스크린샷을 참고해주세요. 더 다양한 기능이 있지만, 이 후 부터는 직접 공부하셨으면 좋겠네요!

nodejs의 버젼을 바꿔가며 개발할 수 있습니다!

nvm을 통해서 nodejs를 설치했다면, 이제 npm을 활용해서 다양한 nodejs package를 설치할 수 있습니다. 이를 통해서 사람들이 좋다고들 말하는ReactExpress를 사용해서 웹 개발에 입문하실 수 있습니다. 이 npm도 오늘 배웠던 apt와 비슷한 녀석입니다! apt를 통해 우분투에서 사용할 수 있는 소프트웨어를 받았다면, npmnodejs 에서 사용할 수 있는 오픈소스 프로그램을 사용할 수 있게 도와줍니다. 많은 자바스크립트 개발자들이 개발한 오픈소스 소프트웨어를 npm을 통해서 받아서 사용할 수 있습니다.

ubuntu에 apt가 있다면, nodejs에는 npm이 있습니다!

이제 여러분은 본격적으로 우분투로 자바스크립트를 개발할 준비가 되었습니다! 다음 글은 여러분이 우분투를 다루면서 겪게 될 문제를 해결하실 수 있는 링크를 모아둔 FAQ 성격의 글입니다. 도움이 되셨으면 좋겠습니다!

이전 글 )

다음 글 )

코드스테이츠 Code States — Unlock Human Potential

여러분의 잠재력과 미래에 투자하는 휴먼 캐피탈, 코드스테이츠(Code States)입니다. codestates.com

Hong Shik Branden Kim

Written by

Codestates Crew / Software Enginner, who speaks human language — KR, EN, CN / Good Listner

코드스테이츠 Code States — Unlock Human Potential

여러분의 잠재력과 미래에 투자하는 휴먼 캐피탈, 코드스테이츠(Code States)입니다. https://codestates.com

Hong Shik Branden Kim

Written by

Codestates Crew / Software Enginner, who speaks human language — KR, EN, CN / Good Listner

코드스테이츠 Code States — Unlock Human Potential

여러분의 잠재력과 미래에 투자하는 휴먼 캐피탈, 코드스테이츠(Code States)입니다. https://codestates.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store