node.js로 서버 열기

Back-End 환경 설정

 

node.js를 이용해 기존에 사용하던 live server(client-side)가 아닌 새로운 서버(server-side)를 만들어 보았다.

 

 Node.js는 언어나 프레임워크가 아닙니다.

Node.js는 'JavaScript 실행 환경(Runtime Environment)'입니다. 크롬 브라우저가 웹 페이지를 실행해주는 환경인 것처럼, Node.js는 내 컴퓨터에서 JavaScript 파일을 실행해주는 환경

 

즉 node.js는 JavaScript라는 하나의 언어로 프론트엔드와 백엔드를 동시에 다룰 수 있게 해줌.

 

프레임워크는 도커에서 쓰던 이미지와 비슷한 설계도라고 할 수 있음.

개발자가 반복적인 일을 피하고 핵심 기능에만 집중하도록 도와줌. node.js는 프레임워크가 아님.

 

node.js의 장점

• 하나의 언어로 Full-Stack 개발이 가능.
• 비동기 I/O 기반의 빠른 속도 (논블로킹 방식으로 동작)
• 거대한 NPM 생태계 : 많은 개발자들이 만들어 놓은 무료 코드를 패키지로 가져와 사용 가능.

 

node.js의 단점

• CPU 집약적인 작업에 부적합 : 싱글 스레드 방식이라 여러 작업 동시 x
• 에러 처리의 중요성 : 에러 처리를 제대로 안하면 전체 서버가 멈출 수 있음.

 

대중적으로 사용되는 언어별 프레임워크 종류

언어	대표 프레임워크	주요 특징
Python	Django, Flask	문법이 쉽고 간결하며, 데이터 과학 및 인공지능 분야와 연계성이 높음.
Java	Spring	매우 안정적이고 강력한 성능을 자랑하며, 대규모 엔터프라이즈급 애플리케이션에 주로 사용됨.
Ruby	Ruby on Rails	'개발자의 행복'을 추구하는 철학으로 매우 빠르고 즐거운 개발 경험을 제공함.

 

node.js 설치 순서

1. 공식 사이트 접속 :  Node.js 공식 사이트

2. LTS 버전 다운로드

• LTS(Long Term Support) 장기적으로 안정적인 지원이 보장된다는 뜻.

3. 설치 프로그램 실행

• .msi 파일을 실행 특별한 설정 변경 없이 계속 next로 넘겨 설치를 완료.
• 설치 과정에서 NPM(Node Package Manager)도 설치됨.

 

 

명령 프롬프트에서 이렇게 뜨면 설치가 완료 된 것임.

이제 vs code를 이용해 JavaScript 파일을 서버-사이드로 열어보자.

터미널 단축키 : Ctrl + `

 

터미널에서 node 파일이름.js 를 입력했을 때 환경 변수 설정이 제대로 되어 있지 않아

npm : command not found 라는 에러코드가 발생.

환경변수 설정 참고 사이트 : https://codest.tistory.com/15

 

js 파일을 이용해 웹 서버를 열기 위해서는 http 모듈이 필요함.

 

서버 생성의 3단계

STEP1. 서버 만들기 ('http.createServer')

http.createServer() 는 웹 서버 객체를 생성하는 함수이며 인자로 함수를 받으며 브라우저에서 요청이 들어올 때마다 실행.

요청 함수는 두 가지 중요한 매개변수, request와 response를 가짐.

• request (요청) : 사용자의 브라우저가 보낸 모든 정보 (어떤 URL에 접속했는지)가 담겨있는 객체.
• response (응답) : 사용자에게 다시 보내줄 응답을 작성하는 데 사용하는 객체.

 

STEP2. 요청에 응답하기 ('response.writeHead', 'response.end')

서버는 요청을 받으면 반드시 응답이 필요. response 객체 메서드를 사용해 응답 작성.

response.writeHead(200, { 'Content-Type' : 'text/html; charset=utf-8' }); 응답의 '머리말(Header)'을 작성.

• 200 : "요청이 성공적으로 처리되었다"는 의미의 HTTP 상태 코드.
• Content-Type : "지금부터 보내는 데이터는 HTML 형식이야"라고 브라우저에게 알려주는 역할.
• charset=utf-8 : 한글이 깨지지 않도록 추가하는 옵션.

response.end('Hello, World!'); : 실제 브라우저에 표시될 내용을 보내고 응답을 최종적으로 완료.

 

STEP3. 서버 실행하기 ('server.listen')

• 서버 객체를 만들었으면 특정 포트를 열어 사용자의 요청을 기다리게 하고 listen() 메서드가 이 역할을 담당함.
• 포트(Port) : 컴퓨터라는 큰 건물에서 우리 서버가 사용할 출입구 번호. (보통 개발용으로 3000, 8080을 주로 사용.)

 

실습1 : 나만의 서버 실행.

server.js 파일

// 1. http 모듈 불러오기

const http = require('http');



// 2. 서버 만들기

const serveer = http.createServer(function(request, response) {
    // 3. 요청에 대한 응답 작성
    console.log("브라우저에서 요청이 들어왔습니다.");
    
    // 응답 헤더 작성 (200: 성공, Content-Type: HTML) 
    response.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
    
    // 응답 본문(body) 작성 및 응답 종료
    response.end('<h1>Hello, My First Node.js Server!</h1>');
});

// 4. 서버 실행하기 (3000번 포트에서 요청 대기)
server.listen(3000, function() {
	console.log("서버가 3000번 포트에서 실행 중입니다.");
});

 

VS Code 터미널에서 node server.js 입력 
주소창에 http://localhost:3000 입력

서버에 접속되는 것을 확인 할 수 있음.

 

서버 종료하는 법 : 터미널 창을 클릭하고 Ctrl + C 를 입력하면 서버가 종료됨.

 

NPM

수많은 자바스크립트 코드(패키지)가 모여있는 코드 앱스토어라고 할 수 있음. NPM을 통해 코드를 다운로드하고 관리 할 수 있게 해주는 명령어 도구(CLI)임.

 

package.json : 이 파일은 node.js 프로젝트에 대한 모든 정보를 담고 있는 설정 파일.

• 프로젝트의 이름, 버전, 설명 등 기본 정보가 담겨있음.
• 프로젝트가 동작하기 위해 필요한 외부 패키지들의 목록(의존성)이 기록됨.
• npm start, npm test 등 간단한 명령어를 등록해 사용 가능.

 

package.json 이 중요한 이유.

예를 들어 내가 냉장고에 수 많은 재료들을 가지고 있는데 계란후라이를 만들기 위해서는 계란과 식용유가 필요함.

근데 그것을 냉장고에 있는 모든 재료를 상대에게 넘겨주는 것보다 따로 상자에 계란과 식용유를 포장해 보내는 것이 편함.

같은 원리로 package.json에 등록된 패키지들만 상대에게 보낼 수 있음.

 

상대는 npm install 명령어만 입력하면 등록된 모든 패키지를 자동으로 다운 가능.

 

실습2 : 'npm init' 으로 'package.json' 생성하기

1. VS Code에서 'node' 폴더를 열고 내장 터미널(Ctrl + `)을 키고.
2. 터미널에 npm init 입력.
3. 터미널 상에서 패키지 이름, 버전, 설명 등을 묻는 질문들이 차례로 나타남.
4. 모든 질문이 끝나면 'Is this OK? (yes)' 라고 묻는데, 'yes'를 입력하거나 Enter를 누르면 폴더에 package.json 파일이 생성.

 

더 빠른 방법: 'npm init -y' : 모든 질문을 생략하고 기본값으로 만들고 싶을 때 사용.

 

외부 패키지 설치 : 'npm install'

Express : node.js에서 가장 인기 있는 웹 프레임 워크. 

명령어 : npm install express

 

명령어 실행이 끝나면 두 가지 변화가 생김.

1. 'node_modules' 폴더 생성 : 'express' 와 'express' 가 동작하는데 필요한 모든 코드들이 다운로드 후 이 폴더에 저장. 폴더가 매우 크고 복잡하므로 직접 수장할 일은 거의 없음.
2. 'package.json' 파일 업데이트 : 파일을 열어보면 이전에는 없던 "dependencies" 라는 항목이 추가되고 그 안에 "express"가 기록된 것을 볼 수 있음. 이제 이 프로젝트는 express에 의존하는 것을 의미.

 

최종 실습

 

'fs' 모듈은 node.js가 컴퓨터의 파일 시스템(File System)에 접근하게 해주는 핵심 모듈.

이 모듈을 사용하면 서버 컴퓨터에 있는 파일을 읽거나, 쓰거나, 수정하거나, 삭제하는 모든 작업이 가능.

 

const fs = require('fs');  : 사용자가 접속했을 때 보여줄 HTML 파일을 읽어와줌.

fs.readFile() : 지정된 경로의 파일을 읽어오는 함수.

파일을 읽는 작업은 시간이 걸릴 수 있어 node.js는 이 작업을 비동기(Asynchronous) 방식으로 처리.

 

도서관 사서에게 책을 찾아달라고 요청하는 것과 같음.

1. 요청하기 ('fs.readFile()' 호출)
2. 기다리기 (Node.js의 논블로킹 방식)
3. 결과 받기 (콜백) : 다시 불러주는 과정은 콜백(Callback) 함수가 처리해줌.

 

기본 사용법

fs.readFile('파일경로', function(error, data) {
	// 이 함수는 파일 읽기가 끝난 후에 실행됩니다.
    
    if (error) {
    	// 만약 파일 읽기 중 에러가 발생했다면?
        console.error("파일을 읽는 중 에러 발생:", error);
        return;
    }
    
    // 에러 없이 성공했다면, data 변수에 파일 내용이 담겨있음
    console.log("파일 내용:", data);
});

 

콜백 함수는 두 개의 인자 error와 data를 가짐.

에러가 발생했는지 먼저 확인하는 것은 매우 중요. 코딩할 때 예외처리를 해주는 것이 좋은 습관.

 

최종 목표 : HTTP 서버와 FS 모듈의 결합

1. 브라우저가 우리 서버에 접속 ('http.createServer'의 콜백 함수 실행.)
2. 서버는 요청을 받으면 'fs.readFile'을 이용해 미리 만들어 둔 'index.html' 파일을 읽음.
3. 파일 읽기가 성공적으로 끝나면, 'fs.readFile' 의 콜백 함수 실행.
4. 콜백 함수 내에서 읽어온 파일 내용 (data)을 response.end() 를 통해 브라우저에게 전송.

 

실습 : HTML 파일을 보여주는 서버 만들기'index.html' 파일 만들기.

1. 서버 파일과 같은 위치에 만드는게 좋음
2. 다음으로 'server.js' 파일을 생성
3. VS Code 터미널에서 node server.js 로 서버를 실행. 브라우저에서 http://localhost:3000 접속
4. 'index.html'의 내용이 잘 보이면 성공.

<!DOCTYPE html>
<html lang="ko">
<head>
	<title>My Node.js Server</title>
    <style>
    	body { font-family: sans-serif; background-color: #e0f7fa;
        text-align: center; padding-top: 50px; }
        h1 { color: #00796b }
    </style>
</head>
<body>
	<h1>🎉 축하합니다! Node.js 서버가 HTML 파일을 성공적으로 보여주고 있습니다!</h1>
    <p>이제 Live Server 없이도 직접 만든 서버로 웹페이지를 열 수 있습니다.</p>
</body>
</html>

const http = require('http');
const fs = require('fs');

const server = http.createServer(function(request, response) {
	console.log("요청 받음:", request.url);
    
    // index.html 파일을 읽어서 응답으로 보내기
    fs.readFile('./index.html', function(error, data) {
    
    // 1. 에러 처리
    if (error) {
    	console.error(error);
        response.writeHead(404); // 404: Not Found
        response.end("파일을 찾을 수 없습니다.");
        return;
    }
    
    // 2. 성공 시 처리
    response.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8'});
    response.end(data); // 읽어온 파일 내용(data)을 그대로 전송
    });
});

server.listen(3000, function() {
	console.log("서버가 3000번 포트에서 실행 중입니다. http://localhost:3000");
});