Front/Node.js

node.js로 서버 만들기

oodada 2024. 12. 9. 22:50

node.js로 서버 만들기

1. 서버란?

서버와 클라이언트

서버는 요청을 받는 응답자이고, 클라이언트는 요청을 보내는 요청자입니다.

  • 클라이언트: 웹 브라우저(Chrome, Safari).
  • 서버: 네이버, 구글 같은 웹사이트를 운영하는 컴퓨터.

쉽게 서버의 동작 이해하기

  • 브라우저에서 "구글 검색"을 입력(요청)하면,
  • 구글의 서버가 요청을 받아서 검색 결과를 준비(처리)한 뒤,
  • 준비된 검색 결과를 브라우저로 보냄(응답).

서버의 예

  1. 웹 서버: 웹사이트를 보여주는 서버.

    • 예: 네이버, 구글, 유튜브.
  2. 파일 서버: 파일을 저장하고 전송하는 서버.

    • 예: Google Drive, Dropbox.
  3. 게임 서버: 온라인 게임에서 플레이어 간 연결을 관리하는 서버.

    • 예: LOL, PUBG.
  4. 호스팅 서버: 웹사이트를 저장하고 관리하는 서버.

    • 예: AWS, Azure.

2. 서버 만들기

- 간단한 HTTP 서버 만들기

HTTP 서버는 클라이언트(브라우저)의 요청을 받고, 이에 응답하는 프로그램입니다.
Node.js는 http 모듈을 사용해 쉽게 서버를 생성할 수 있습니다.

  • http.createServer() 메서드로 서버를 생성합니다.
  • server.listen() 메서드로 서버를 실행합니다.
// server.js
// Node.js의 기본 내장 모듈인 'http' 모듈을 불러옵니다.
const http = require('http');

// http 서버를 생성하는 메서드
// 콜백 함수로 request(요청)과 response(응답) 객체를 매개변수로 받습니다.
const server = http.createServer((req, res) => {
    // 요청이 들어오면 응답합니다.
    res.writeHead(200, { 'Content-Type': 'text/html' }); // 응답 헤더 설정
    res.write('<h1>Hello, Node.js!</h1>'); // 응답 본문
    res.end(); // 응답 종료
});

// 서버가 8080 포트에서 실행되도록 설정합니다.
// .listen() : 특정 포트에서 서버를 실행하고 클라이언트의 요청을 기다립니다.
server.listen(8080, () => {
    console.log('8080 포트에서 서버가 실행 중입니다.');
});
  • localhost는 자신의 컴퓨터를 가리키는 주소입니다.
  • 8080은 서버가 실행될 포트 번호입니다.
$ node main.js
8080 포트에서 서버가 실행 중입니다.

http 상태 코드 참고: MDN HTTP 상태 코드

- 리스닝 이벤트(이벤트 리스너)

Node.js에서 리스닝 이벤트는 특정 상황(이벤트)이 발생했을 때 실행되는 코드
서버가 클라이언트의 요청을 받아들이기 시작할 때 발생하는 이벤트입니다.

  • server.listen() 메서드는 서버를 실행하고 클라이언트의 요청을 기다리는 메서드입니다.
  • 서버가 정상적으로 실행되면 listening 이벤트가 발생합니다.
  • server.on('listening', 콜백함수)로 리스닝 이벤트를 등록할 수 있습니다.
  • server.on('error', 콜백함수)로 에러 이벤트를 등록할 수 있습니다.
// server.js

const http = require('http');

// 서버 생성
const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html' }); // 응답 헤더 설정
    res.write('<h1>Hello, Node.js!</h1>'); // 응답 본문
    res.end(); // 응답 종료
});

// `listening` 이벤트 등록
server.on('listening', () => {
  console.log('서버가 정상적으로 실행되었습니다!');
});

// `error` 이벤트 등록
server.on('error', (error) => {
  console.error('서버 실행 중 오류 발생:', error.message);
});

// 서버 실행
server.listen(8080, () => {
  console.log('8080 포트에서 서버가 실행 중입니다.');
});

터미널에서 node main.js 명령어를 실행하면, 서버가 정상적으로 실행되었음을 알 수 있습니다.
크롬의 주소창에 http://localhost:8080을 입력하면, "Hello, Node.js!"가 출력됩니다.

참고

터미널에서는 메시지가 보이지만, 크롬의 개발자 도구 콘솔창에서 메시지가 보이지 않는 이유는 터미널 출력(console.log)와 클라이언트(브라우저) 출력이 서로 다른 개념이기 때문입니다.

이유

  1. 서버 측 로그

    • console.log는 Node.js 서버에서 실행되는 코드에서 발생한 로그를 출력하기 때문에
    • 위 메시지는 서버의 터미널에서만 확인할 수 있습니다.
  2. 클라이언트(브라우저) 로그

    • 브라우저의 개발자 도구 콘솔창은 서버에서 받은 HTML, JavaScript 등의 응답에서 발생한 로그를 보여주는 곳입니다.
    • 현재 서버가 브라우저로 응답한 HTML에는 클라이언트 측 로그를 출력하는 코드가 없기 때문에 크롬 콘솔창에서 메시지가 보이지 않습니다.

참고

파일을 수정할 때마다 서버를 재시작하는 것이 번거롭다면, nodemon 패키지를 사용해보세요.

$ npm install -g nodemon
$ nodemon server.js
{
  "scripts": {
    "start": "nodemon server.js"
  }
}
$ npm start

- 파일 읽기/쓰기

Node.js는 fs(File System) 모듈을 사용해 파일을 읽고 쓰는 작업을 쉽게 할 수 있습니다.

  • fs.writeFile(): 파일을 생성하고, 내용을 쓰는 메서드입니다.
  • fs.readFile(): 파일을 읽어오는 메서드입니다.
// server.js

// fs 모듈을 가져와 사용합니다
const fs = require('fs');

// 파일 생성
// writeFile(파일명, 내용, 콜백함수)
fs.writeFile('diary.txt', '오늘 Node.js를 배웠다!', (err) => {
    if (err) throw err; // 에러 발생 시 에러를 던집니다.
    console.log('일기가 저장되었습니다!');

    // 파일 읽기
    // readFile(파일명, 인코딩, 콜백함수)
    fs.readFile('diary.txt', 'utf8', (err, data) => {
        if (err) throw err;
        console.log('읽은 내용:', data);
    });
});
$ node fs-test.js
일기가 저장되었습니다!
읽은 내용: 오늘 Node.js를 배웠다!
티스토리 친구하기