시리즈 목록
- Node.js Express 로컬 서버 구축(1): npm 도입
- Node.js Express 로컬 서버 구축(2): Express 라우팅
- Node.js Express 로컬 서버 구축(3): JSON 반환 stub API
- Node.js Express 로컬 서버 구축(4) Request 다른 서버 이미지 얻기
글 순서
- 목적
- Node.js 이용하여 PC에 로컬 서버 띄우기 (Express 응용은 다음 포스트)
- 이 포스트 결과
- 브라우저에서 "localhost:8080"에 접속하면 "HelloWorld"가 보임
- 대상자
- WEB 프런트 담당자
- HTML, CSS, JavaScript(es2015 포함) 기본 문법을 이해하고있는 사람
- HTTP 통신, GET, POST 등을 어느 정도 이해하고있는 사람 (대충 알아도 됨)
- 검은 화면에 명령어 넣는 것에 거부감이 없는 분
- 환경 버전
- Windows10
- Node.js (권장 버전) 10.15.01
- npm 6.4.1
또한, 이 포스트에서 "명령 프롬프트"가 등장하는데, 실제로 제가 사용한 것은 "GitBash"입니다.
Windows 표준으로 탑재된 명령 프롬프트 보다 사용하기 쉽기 때문에 추천합니다.
Node.js
서버 사이드에서 동작하는 JavaScript 실행 환경입니다.
코어 모듈(핵심 모듈)이라는 서버 측의 표준 기능을 구현한 라이브러리들이 대거 포함되어 있습니다. 라이브러리들은 브라우저의 JS와는 별도로 존재하며, 고유(독립적) 기능을 수행합니다. 반대로 브라우저 제어 기능은 갖고 있지 않습니다.
자주 업데이트되거나, 또는 호환성이 적은 업데이트가 수행될 수도 있으므로 nvm이라는 패키지 관리 도구를 사용하여 버전을 관리합니다만, 이 글에선 생략하겠습니다.
npm
Node.js 개발에 이용하는 패키지들을 관리하기 위한 툴입니다. (Node Package Manager 줄임말)
어떤 패키지의 어느 버전을 사용하는지, "package.json"이라는 파일에 기록해 관리합니다.
클라이언트 측 개발에 이용하는 패키지도 함께 관리할 수 있습니다.
Node.js npm 도입
다운로드 및 설치
공식 사이트에서 다운로드합니다.
npm은 Node.js에 포함되어 있어서 별도로 다운로드 후 설치할 필요는 없습니다.
공식 사이트 : 다운로드
기본적으로 "yes"를 클릭해 나가면 설치가 완료됩니다.
글 작성 당시의 권장 버전은 10.15.01입니다.
서버 구축
프로젝트 시작
작업용 임의 폴더를 준비합니다.
명령 프롬프트에서 이 폴더로 이동하여 다음 명령을 실행합니다.
$ npm init -y위 명령은 이 폴더에서 프로젝트를 시작할게요!라고 npm에 전달하는 것입니다.
-y는 기본적인 package.json을 새로 만드세요!라는 뜻입니다. 추천하는 부분이죠.
생략할 경우 npm이 "어떤 프로젝트니?"라고 영어로 이것저것 물어볼 겁니다. 제대로 대답하거나 Enter 키로 맞장구치면서 넘어가면, 다 끝난 후에 package.json이라는 파일이 생성됩니다. 아래 내용으로요.
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}package.json
프로젝트 개요가 담겨있습니다. 패키지 이름, 버전, 라이센스(사용권) 등. 공개 예정인 패키지를 제작하는 경우엔 반드시 정확하게 기재해야 합니다.
이번에는 로컬 서버를 구축하는 것이 목적이므로 기본값을 그대로 둡니다.
WEB 서버 응용 프로그램 파일 만들기
작업 폴더에 app.js라는 JavaScript 파일을 준비하고, 다음 코드를 작성합니다.
Node.js에서 최소한의 기능을 가진 서버를 구축하기 위한 코드가 아래 있습니다.
const http = require('http');
const server = http.createServer((req, res)=>{
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World!!');
});
server.listen(8080);첫째, 핵심 모듈 중 하나인 http 모듈을 로드합니다.
HTTP 서버로서의 기능을 제공해주는 모듈입니다.
HTTP | Node.js v10.x Documentation (영문)
const http = require('http');이어서, http의 createServer 메소드를 사용하여 서버를 생성하고 변수에 저장합니다.
const server = http.createServer((req, res)=>{...이때 건네주는 콜백 함수가 요청 수신을 처리하는 함수입니다. req는 리퀘스트의 세부 사항, res에는 응답을 보내기 위한 툴 그룹이 포함되어 있습니다.
writeHead 메소드로 응답 헤더를 지정하고 "Hello World"라는 텍스트 메시지를 반환합니다.
그리고 생성된 서버 오브젝트(server)의 listen 메소드를 실행하여 요청 수신을 시작합니다. 인수로 전달하는 숫자는 포트 번호입니다.
server.listen(8080); 그리고 명령 프롬프트에서 다음 명령을 실행합니다. (작업 폴더로 이동한 다음)
"node 씨 app.js 파일을 실행하세요"
$ node app.js이제 서버가 실행됩니다. 브라우저에서 localhost:8080 접근해보세요.
무사히 응답을 받을 수 있습니다!
종료할 땐, 서버 시작 명령을 실행한 명령 프롬프트에서 Ctrl+C 입력하여 프로세스를 종료합니다.
솔직히 이것만으로 프론트엔드 프레임워크 제작에 참여할 순 없습니다.
이어서 Node.js의 Express라는 프레임워크를 이용하여 더 실용적인 형태로 만들어보고 싶습니다.
댓글