(2) Hello, World!

 

 

 

 

 

이번의 목표는 프로그래밍 언어를 배울 때 반드시 먼저 해본다는 "Hello, World!" 를 출력해봅시다.

 

 

 

 

 

 항상 프로그래밍 책의 맨 처음부분이 Hello, World!를 출력하는 이유는 간단합니다. 출력 결과가 바로 눈에 보이므로 코드가 잘 작동되는지 환경을 확인할 수 있고, 이후로 만들어 갈 코드들의 베이스를 배우며 다른 언어로 넘어가더라도 똑같이 Hello, World를 출력하는 내용일테니 어떤 구조로 작동되는지 직감적으로 알 수 있게 해줍니다.

 

 

 

 

 

 간단한 문장을 출력해보며 기본적인 Node.js의 구조를 알아봅시다.

 

 

 

 

 

 최대한 쉽게 풀어서 설명드릴 예정이지만 어느정도 프로그래밍에 대한 기초가 있음을 상정하고 설명드릴 예정입니다.

 

 

 

 우선 Node.js의 실행 환경부터 알아야하겠네요. 지금부터 설명드릴 내용은 이전 글에서 설명드렸던 대로 Node.js를 설치했다는 가정 하에 설명을 드리도록 하겠습니다. 또한 Node.js는 JavaScript의 전반적인 이해가 필요합니다. JavaScript의 기본적인 문법 역시 숙지하셨다는 가정하에 글을 작성할 예정입니다. 양해 부탁드립니다. (질문은 언제나 환영합니다.)

 

 

 

 

 

Node.js의 실행 방법은 크게 3가지가 있습니다. 각자만의 장점이 있겠지만 저희가 사용할 방법은 주로 3번째 방법일 예정이므로 급하신분은 3번째만 보셔도 지장 없습니다.

 

 

 

1. Node.js 자체에서 실행하기 (CMD로 실행하기)

 

 

 

 Node.js를 설치하셨다면 설치 폴더에 실행파일이 생기셨을 것 입니다. 이를 실행하면 다음과 같은 창이 나타날 것 입니다.

 

 

 Python이나 SQL을 사용하신 분들이라면 익숙한 느낌이실겁니다. 바로 인터프리터 방식으로 실행하는 방식이지요. 하지만 이 방식은 이후 긴 코드 예제를 작성하기에는 무리가 있기에 사용하지 않을 예정입니다.

 

 

 또한 다음과 같이 CMD(명령 프롬포트)에서 node 명령어를 입력하여 실행시킬 수도 있습니다.

 

 

 

 

 

 

2. 웹 브라우저 개발자 도구에서 실행하기 (F12)

 

 아무 웹브라우저 (크롬, 웨일, 파이어폭스 등)을 실행하고 F12를 누른 뒤 <콘솔>(또는 <Console>) 항목에 들어갑니다.

 

 

 우측의 > 에 1번 방식과 같은 방식으로 코드를 입력할 수 있습니다. 다만, 1번 방식과 같은 이유로 이후 예제에선 사용하지 않을 예정입니다.

 

 

 

 

 

3. 편집기로 JS 파일을 만들어 실행하기

 앞으로 저희가 사용할 방법이자 많은 프로그래머들이 애용하는 방식입니다. 긴 코드를 작성하게 될 경우에 한번에 코드를 작성하여 한눈에 보기도 편하고 수정도 편하게 작업할 수 있습니다. 

 

 

 편집기란?    사실 말만 번지르르하지 사실 작성한 코드를 이쁘게 보여주는 메모장 같은 것 입니다. 자동으로 변수에 색깔을 부여해서 같은 형태의 변수들을 분류하기 쉽게 해주거나 자동으로 들여쓰기를 해주어 코드를 가독성있게 정리해줍니다. 심지어 Extension이라는 확장기능을 설치하여 코드 자동완성기능을 사용할 수 있게 하거나 오탈자등을 실시간으로 디버깅해주는 기능들 등을 추가할 수도 있습니다.

 

 

 저희가 사용할 편집기는 많은 사람들이 이용하는 VisualScriptCode (이하 VSCode, 또는 VSC)를 사용할 예정입니다. 다음 링크에서 다운받아 사용합시다.

 

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

 

이전 글의 링크를 따라 Node.js가 설치된 상태에서 아무 에디터나 띄우고 다음과 같이 코드를 붙여넣습니다. 이때 코드 편집기를 메모장을 쓴다면 비 ASCII코드를 포함하는 코드 저장 시 인코딩을 UTF-8로 저장해야 합니다.

 

 

 

HTTP(웹)로 Hello, World! 출력하기 !

const http = require('http');
http.createServer((req, res) => {
	res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello, World!\n'); 
}).listen(8080, '127.0.0.1');
console.log('Server running at http://127.0.0.1:8080/');

 

Node.js로 해당 코드를 인코딩한 후 인터넷 브라우저 URL에  [localhost:8080]를 입력하면 Hello, World! 가 출력되는것을 확인 할 수 있습니다.

 

한 줄 한 줄 분석해봅시다. 

 

const http = require('http');

 

const는 constant의 약자로 상수를 선언할 때 사용합니다. 어째서 const를 사용하는지는 곧 얘기드리겠습니다.

 

require는 모듈을 불러오는 함수입니다.

 

즉 이 코드는 'http'모듈을 가져와서 -> 상수 http에 할당하는 코드입니다.

 

쉽게 얘기하면 파이썬의 'import http as http' 로 볼 수 있겠네요. 임포트의 경우 이름을 바꾸지 않을 것이기 때문에 const로 사용합니다. 자바스크립트는 모듈, 메서드 등 모든것들을 객체로 제작해서 사용합니다.

 

http.createServer((req, res) => { /* 함수 내용 */ })

 

http 모듈에 있는 변수를 사용하기 위해 http 변수를 사용한 것 입니다. (모듈명과 변수 이름이 같아서 헷갈릴 수 있습니다.)

 

createServer 메소드로 새로운 서버를 생성합니다.

 

이 후 익명함수에 전달하는 매개변수 req와 res를 사용합니다. req는 서버 요청, res는 서버 응답을 의미합니다.

 

 

	res.writeHead(200, {'Content-Type': 'text/plain'});

 

서버 응답 res 안에 있는 writeHead 메서드를 사용합니다.

 

	res.end('Hello, World!\n');

 

서버 응답 res 안에 있는 end 메서드로 통신의 종료를 알립니다.

 

/* http.createServer 함수의 반환값 */.listen(8080, '127.0.0.1');

 

 listen 메서드를 사용하여 createServer 메서드의 종결합니다. listen 메서드는 createServer 메서드 뒤에 반드시 붙어야 하며 포트번호 (예제의 경우 8080 입니다.)와 호스트 네임(예제의 경우 127.0.0.1입니다.)

 

이 listen은 node의 알파이자 오메가라고 할 수 있는 비동기 방식 메서드로, http 연결이 맺어지기 전까지 프로그램 실행을 차단하지 않는다.

 

비동기 방식에 대해서는 다음 게시글에서 다루겠습니다.

 

 

 

 

 

오늘은 Node.js의 기본인 Hello, World!를 출력하는 예제에 대해 알아봤습니다. 글 읽어주셔서 감사합니다!