웹 개발 배우기 7편 - 웹 서버와 npm으로 시작하는 진짜 개발

이 글은 프로그래밍 경험이 없는 분들을 대상으로 자바스크립트 웹 앱 제작법을 알려드리는 ‘웹 개발 배우기’ 시리즈의 일부인데요.

이번 편에서는 드디어 우리 컴퓨터에 직접 ‘웹 서버’를 실행시키고, 그걸로 웹 앱을 서비스하는 방법을 알아볼 예정입니다.

도대체 웹 서버가 뭔가요?

‘웹 서버’라는 용어는 보통 두 가지 의미를 가지고 있는데요.

• 웹 사이트의 파일들이 담겨있는 인터넷상의 ‘컴퓨터’ 그 자체.
• 그 컴퓨터가 서버 역할을 할 수 있도록 만들어주는 특정 ‘프로그램’.

이 글에서는 두 가지 의미를 모두 사용할 거거든요. 문맥을 통해 어떤 의미로 쓰였는지 충분히 파악하실 수 있을 겁니다.

웹 서버를 본격적으로 다루기 전에, 먼저 몇 가지 기본 개념부터 짚고 넘어가야 합니다.

서버를 가리키는 이름, IP 주소와 도메인

컴퓨터끼리 서로 대화할 때 사용하는 약속된 언어를 ‘프로토콜(protocol)‘이라고 부르는데요. 인터넷 세상의 프로토콜이 바로 ‘아이피(IP, Internet Protocol)‘입니다.

웹은 인터넷을 기반으로 하고, 웹의 프로토콜인 ‘HTTP’나 ‘HTTPs’는 바로 이 IP를 기반으로 하거든요. 조금 거칠게 비유하자면, HTTP가 브라우저와 서버가 대화하는 ‘언어’라면, IP는 그 대화가 오고 갈 수 있도록 깔아주는 ‘통신망’이나 ‘전화번호 체계’ 같은 개념입니다.

인터넷에 연결된 모든 컴퓨터는 저마다의 ‘IP 주소’를 가지고 있는데요. IP 주소에는 ‘IPv4’와 ‘IPv6’라는 두 가지 버전이 있습니다. 192.0.2.1과 같은 것이 IPv4의 예시입니다.

그런데 우리는 보통 숫자로 된 주소 대신 ’exploringjs.com’처럼 이름으로 된 주소를 사용하잖아요. 이런 이름을 ‘도메인 네임(domain name)‘이라고 부르는데, 인터넷에는 이 도메인 네임을 실제 IP 주소로 변환해 주는 ‘도메인 네임 서버’가 있어서 가능한 일입니다.

나만의 실험실, 로컬호스트(Localhost)

‘로컬호스트(Localhost)‘는 ‘바로 지금 내가 사용하고 있는 이 컴퓨터’를 가리키는 아주 특별한 이름인데요. 이 컴퓨터의 도메인 네임은 ’localhost’이고, IP 주소는 127.0.0.1(IPv4) 또는 ::1(IPv6)로 정해져 있습니다.

로컬호스트는 개발할 때 정말 유용하게 쓰이거든요. 실제로 인터넷에 접속하지 않고도 내 컴퓨터 안에서 웹 서버를 돌리면서, 마치 실제 웹 사이트처럼 ‘http://‘로 시작하는 주소를 사용할 수 있게 해주는 아주 고마운 존재입니다.

URL의 숨겨진 번호, 포트(Port)

웹 서버를 제대로 사용하려면 URL의 한 가지 기능을 더 알아야 하는데요. 바로 ‘포트(port)‘라는 개념입니다.

포트는 주소의 호스트(domain name) 뒤에 콜론(’:’)을 붙여서 쓰는 10진수 숫자거든요. 아래 예시처럼 말이죠. http://localhost:80/site/ (80번 포트)

모든 서버는 여러 개의 포트를 가지고 있는데, 이건 서버와 통신할 수 있는 일종의 ‘채널’이라고 생각하시면 편합니다. 평소에 우리가 포트 번호를 볼 수 없었던 건, 자주 쓰는 프로토콜마다 기본값이 정해져 있기 때문인데요. ‘HTTP’의 기본 포트는 ‘80’번이고, ‘HTTPs’의 기본 포트는 ‘443’번입니다.

자바스크립트 생태계의 중심, npm과 npx

’npm’은 자바스크립트 개발자들이 만든 수많은 코드 조각, 즉 ’npm 패키지(package)‘들이 모여있는 거대한 저장소인데요. 개발자들은 이곳에서 필요한 패키지를 설치해서 사용할 수 있습니다.

’npm’이라는 이름이 특정 단어의 약자는 아니지만, ‘노드제이에스 패키지 매니저(Node.js Package Manager)‘라고 이해하면 대략 어떤 역할을 하는지 감이 오실 겁니다. npm은 크게 세 가지로 구성되는데요.

• 공개된 패키지를 둘러볼 수 있는 웹사이트 ‘www.npmjs.com’.
• 패키지들이 실제로 저장되는 온라인 공간인 ’npm 레지스트리(registry)’.
• 패키지를 설치하고 관리하는 셸 명령어 ’npm’.

지난 시간에 ‘노드제이에스(Node.js)‘를 설치했기 때문에, 여러분의 컴퓨터에서도 이미 npm 명령어를 사용할 수 있는 상태입니다.

설치 없이 패키지를 사용하는 마법, npx

원래 패키지를 사용하려면 먼저 내 컴퓨터에 설치를 해야 하는데요. 하지만 설치 과정 없이 패키지 안의 셸 명령어를 바로 실행할 수 있는 아주 편리한 방법이 있습니다.

바로 ’npx’라는 명령어입니다. 예를 들어, 아래 명령어를 셸에 입력하면 터미널에 귀여운 소 그림이 나타나거든요.

npx cowsay "Hello!"

이건 ‘cowsay’라는 npm 패키지를 설치하지 않고도 그 안에 있는 셸 명령어를 바로 실행한 겁니다.

드디어, 나만의 웹 서버 실행하기

‘http-server’라는 npm 패키지에는 웹 서버를 실행시켜주는 셸 명령어가 들어있는데요. 우리에겐 npx가 있으니, 굳이 설치할 필요 없이 바로 실행해 볼 수 있습니다.

npx http-server <디렉토리_경로>

위 명령어는 <디렉토리_경로>에 있는 모든 파일을 서비스하는 웹 서버를 시작합니다. 만약 경로를 생략하면 현재 위치한 디렉토리를 기준으로 서버가 실행됩니다.

fruits-you-like-generated.html 파일 열어보기

자, 그럼 직접 웹 서버를 실행해 볼까요? 먼저 실습 파일이 있는 곳으로 이동해야 합니다.

cd learning-web-dev-code/projects/
npx http-server

이제 셸 창에는 웹 서버가 실행되고 있을 텐데요. 서버가 실행되는 동안에는 다른 명령어를 입력할 수 없도록 셸이 ‘차단(block)‘된 상태가 됩니다. 서버를 끄고 싶을 땐 ‘Control-C’를 누르면 다시 셸을 사용할 수 있습니다.

서버가 실행되면 셸에 이런 메시지가 나타날 거거든요. Available on: http://127.0.0.1:8080 이제 이 주소를 웹 브라우저에 입력하면 우리가 만든 웹 앱을 직접 열어볼 수 있습니다. http://127.0.0.1:8080/fruits-you-like-generated.html

http-server의 루트 디렉토리

우리가 learning-web-dev-code/projects/ 경로에서 http-server를 실행했기 때문에, 이 서버의 루트 디렉토리는 바로 여기가 되는데요. 따라서 내 컴퓨터의 파일 경로는 웹 서버 주소에서 다음과 같이 바뀌는 겁니다. learning-web-dev-code/projects/fruits-you-like-generated.html → /fruits-you-like-generated.html

기본 포트인 80번 사용하기

http-server는 기본적으로 다른 서비스와 충돌할 가능성이 적은 ‘8080’ 포트를 사용하는데요. 원한다면 HTTP의 기본 포트인 80번을 사용하도록 직접 지정할 수도 있습니다.

npx http-server --port 80

이렇게 하면 80번이 HTTP의 기본 포트이기 때문에 URL에서 포트 번호를 생략할 수 있어 주소가 훨씬 더 깔끔해집니다.

셸 명령어의 추가 기능, 옵션(Option)

방금 사용했던 --port 80 같은 것을 셸의 세계에서는 ‘옵션(option)‘이라고 부르는데요. 이름표가 붙어있는 특별한 인자(argument)라고 생각하시면 됩니다.

값 없이 이름표만으로 작동하는 ‘불리언 옵션(boolean option)‘도 있거든요. npx http-server --silent처럼 말이죠. --silent 옵션은 터미널에 서버 상태 정보 같은 ‘로그 메시지’가 출력되지 않도록 막아주는 역할을 합니다.

대부분의 셸 명령어는 --help나 축약형인 -h 옵션을 지원하는데요. 이 옵션을 사용하면 해당 명령어의 사용법을 자세히 볼 수 있습니다. 한번 직접 시험해 보세요.

node -h
npx http-server -h