드리프트 / Posts / 웹 개발 배우기 6편 - 자바스크립트의 새로운 무대, 셸과 Node.js 정복하기

Created Fri, 10 Oct 2025 11:00:00 +0900 Modified Fri, 17 Oct 2025 19:19:58 +0900
3160 Words
JavaScript Node.js Shell CLI WebDev Beginner

웹 개발 배우기 6편 - 자바스크립트의 새로운 무대, 셸과 Node.js 정복하기

지금까지 우리는 웹 브라우저라는 아주 안전하고 친절한 환경에서 자바스크립트를 다뤄왔는데요.

하지만 진짜 프로 개발의 세계로 나아가려면, 이 안락한 울타리를 벗어날 준비를 해야 합니다.

오늘은 자바스크립트의 활동 무대를 컴퓨터 전체로 넓혀주는 두 가지 핵심 도구, 바로 ‘셸(Shell)‘과 ‘Node.js’에 대해 알아볼 거거든요.

조금 낯설게 들릴 수 있지만, 현대 웹 개발에선 없어서는 안 될 필수 교양과목과도 같습니다.

텍스트로 컴퓨터와 대화하기 ‘셸’

우리가 보통 컴퓨터를 쓸 때 만나는 건 ‘그래픽 사용자 인터페이스(GUI)‘라고 하는데요.

아이콘을 마우스로 클릭하고, 창을 드래그하는 아주 직관적인 방식입니다.

반면에 ‘셸’은 ‘명령 줄 인터페이스(CLI, Command-Line Interface)‘의 한 종류로, 키보드로 명령어를 직접 입력해서 컴퓨터를 조작하는 방식이거든요.

마치 브라우저에 있는 개발자 콘솔이 자바스크립트와 대화하는 창구였다면, 셸은 운영체제(OS)와 직접 대화하는 창구라고 할 수 있습니다.

개발에 필요한 각종 도구들을 실행하고 파일을 관리하는 등, 개발자에게는 그래픽 환경보다 훨씬 더 빠르고 강력한 작업 환경을 제공해 줍니다.

이 셸을 사용하려면 ‘터미널’이라는 프로그램을 실행해야 하는데요.

윈도우에서는 ‘Terminal’, macOS에서는 ‘Terminal.app’, 리눅스에서는 ‘터미널’ 등의 이름으로 찾아볼 수 있습니다.

파일 시스템의 주소 ‘경로’

셸을 다루려면 먼저 파일 시스템의 ‘경로(path)’ 개념부터 확실히 잡고 가야 하는데요.

파일 경로는 컴퓨터 안에 있는 파일이나 폴더(디렉터리)의 ‘주소’라고 생각하면 아주 편합니다.

여기에는 ‘절대 경로’와 ‘상대 경로’, 두 가지 방식이 있습니다.

‘절대 경로’는 최상위 디렉터리부터 시작해서 목표 지점까지의 전체 주소를 모두 적어주는 방식인데요.

사람으로 치면 ‘대한민국 서울시 강남구 테헤란로…‘처럼 처음부터 끝까지 다 알려주는 것과 같습니다.

  • 윈도우 예시: C:\Users\robin\
  • macOS 예시: /Users/robin/
  • 리눅스 예시: /home/robin/

‘상대 경로’는 현재 내가 있는 위치를 기준으로 목표 지점까지의 경로를 알려주는 방식이거든요.

마치 “여기서 오른쪽으로 돌아서 두 번째 건물이야"라고 말하는 것과 같습니다.

  • . (점 하나): 현재 디렉터리를 의미합니다.

  • .. (점 두 개): 현재 디렉터리의 부모 디렉터리, 즉 상위 폴더를 의미합니다.

예를 들어, 현재 내가 /home/robin/files/ 폴더에 있다면 아래와 같이 해석됩니다.

  • main.js: 현재 폴더에 있는 main.js 파일 (/home/robin/files/main.js)
  • ../notes.txt: 상위 폴더로 이동한 뒤, 거기 있는 notes.txt 파일 (/home/robin/notes.txt)

이 두 가지 경로 개념은 앞으로 정말 많이 쓰이니 꼭 기억해 두어야 합니다.

꼭 알아야 할 기본 셸 명령어

터미널을 열면 깜빡이는 커서와 함께 프롬프트(% 또는 >)가 여러분을 맞이할 텐데요.

이제 명령어를 입력할 준비가 되었다는 뜻입니다.

겁먹지 말고 아래 명령어들을 하나씩 직접 쳐보면서 셸과 친해져 보세요.

  • pwd: ‘P’rint ‘W’orking ‘D’irectory의 약자로, 현재 내가 있는 디렉터리의 절대 경로를 보여줍니다.

  • ls (macOS/Linux) 또는 dir (Windows): 현재 디렉터리에 있는 파일과 폴더 목록을 보여줍니다.

  • cd [경로]: ‘C’hange ‘D’irectory의 약자로, 지정한 경로로 현재 위치를 이동합니다.

    • cd .. : 상위 폴더로 이동합니다.

    • cd /home/robin/ : 특정 절대 경로로 한 번에 이동합니다.

  • cat [파일명] (macOS/Linux) 또는 type [파일명] (Windows): 텍스트 파일의 내용을 터미널에 출력해 줍니다.

  • mkdir [폴더명]: ‘M’a’k’e ‘Dir’ectory의 약자로, 새로운 폴더를 생성합니다.

  • touch [파일명]: 빈 파일을 생성합니다. (윈도우에서는 기본 명령어가 아니지만, Git Bash 등을 설치하면 사용 가능합니다. )

  • clear (macOS/Linux) 또는 cls (Windows): 터미널 화면을 깨끗하게 지워줍니다.

꿀팁: 키보드의 위쪽 화살표(↑) 키를 누르면 이전에 입력했던 명령어를 다시 불러올 수 있으니, 반복적인 작업에 아주 유용합니다.

브라우저를 탈출한 자바스크립트 ‘Node.js’

바로 이 지점에서 ‘Node.js’라는 엄청난 친구가 등장하는데요.

Node.js는 크롬 브라우저에 쓰이는 V8 자바스크립트 엔진을 떼어내서, 브라우저 밖 어디서든 자바스크립트를 실행할 수 있게 만든 ‘자바스크립트 런타임 환경’입니다.

즉, 브라우저라는 제한된 공간을 벗어나 내 컴퓨터의 운영체제 위에서 자바스크립트 코드를 직접 실행할 수 있게 된 것이죠.

이것이 왜 그렇게 중요하냐면, Node.js 덕분에 자바스크립트로 할 수 있는 일의 범위가 폭발적으로 늘어났거든요.

  • 웹 서버 제작: 자바스크립트만으로 웹 사이트의 뒷단(백엔드)을 만들 수 있습니다.

  • 개발 도구: React, Vue 같은 최신 프레임워크를 사용하기 위한 개발 환경 구축, 코드 자동 테스트 등 수많은 개발 관련 도구들이 Node.js 기반으로 동작합니다.

  • 명령 줄 애플리케이션: 셸에서 실행할 수 있는 나만의 도구를 만들 수도 있습니다.

Node.js가 진짜 강력한 이유

Node.js가 진짜 강력한 이유는 바로 거대한 ‘자바스크립트 생태계’의 문을 열어주기 때문인데요.

이 생태계의 중심에는 ’npm(Node Package Manager)‘이라는 보물창고가 있습니다.

npm은 전 세계 개발자들이 만들어 올린 수많은 자바스크립트 코드 조각(패키지 또는 라이브러리)들을 누구나 쉽게 가져다 쓸 수 있게 해주는 시스템이거든요.

복잡한 기능을 직접 다 만들 필요 없이, npm install [패키지이름] 명령어 한 줄이면 필요한 기능을 내 프로젝트에 바로 장착할 수 있습니다.

우리가 앞으로 다루게 될 대부분의 최신 웹 개발 기술은 바로 이 Node.js와 npm을 기반으로 하고 있습니다.

Node.js 설치와 첫 만남

아직 설치하지 않았다면, 지금 바로 Node.js 공식 웹사이트에 방문해서 설치 파일을 다운로드하고 설치해주세요.

버전은 ‘LTS(Long-Term Support)‘라고 적힌 것을 추천하는데요.

가장 안정적이고 오랫동안 지원이 보장되는 버전입니다.

설치가 완료되었다면, 터미널을 열고 아래 명령어를 입력해보세요.

node

이 명령어를 치면 > 프롬프트가 나타나면서 Node.js 콘솔 모드로 진입하는데요.

이곳을 ‘REPL’이라고 부릅니다.

REPL은 ‘Read(읽고)-Eval(평가하고)-Print(출력하고)-Loop(반복한다)‘의 약자로, 코드를 한 줄씩 입력하면 즉시 결과를 보여주는 대화형 환경입니다.

브라우저 개발자 콘솔과 거의 똑같이 작동하거든요.

한번 간단한 계산을 해볼까요?

> 16 * 16
256

REPL을 종료하고 싶을 땐 Ctrl + C를 두 번 누르면 됩니다.

프로젝트 첫 Node.js 앱 실행하기

이제 Node.js를 이용해 자바스크립트 파일을 직접 실행해 볼 시간인데요.

hello-nodejs.js라는 이름의 파일을 만들고 아래 코드를 작성해주세요.

console.log('Node.js가 "안녕"이라고 말합니다!');

이제 터미널에서 cd 명령어를 사용해 이 파일이 있는 디렉터리로 이동한 뒤, 아래 명령어를 실행합니다.

node hello-nodejs.js

터미널 화면에 아래와 같은 메시지가 출력된다면 성공입니다.

Node.js가 "안녕"이라고 말합니다!

축하합니다.

여러분은 방금 브라우저의 도움 없이, Node.js를 통해 첫 자바스크립트 애플리케이션을 실행한 것입니다.

마무리하며

오늘은 웹 개발의 지평을 넓혀줄 셸과 Node.js라는 두 거인을 만났는데요.

검은 화면에 글자만 나오는 터미널이 처음에는 어색하고 두려울 수 있습니다.

하지만 몇 가지 기본 명령어에 익숙해지는 순간, 여러분의 개발 효율은 이전과 비교할 수 없을 정도로 높아질 겁니다.

그리고 Node.js는 우리가 앞으로 배울 수많은 고급 웹 기술로 나아가는 단단한 디딤돌이 되어줄 거거든요.

Home Posts