8/30 Node.js 입문 1주차 (2)

성준호·2024년 8월 30일
0

1. 웹 서버의 이해

1) 웹 서버란?

- 웹 서버는 HTTP를 이용하여 인터네 상에서 클라이언트의 요청을 처리하고 응답해주는 컴퓨터 또는 프로그램.
- 웹 서버는 클라리언트의 HTTP 요청을 받아 정적인 콘텐츠를 제공
- 필요한 경우 클라이언트의 요청을 웹 어플리케이션 서버(WAS)로 전달하여 처리할 수 있다.
- 웹 서버의 주요 업무는 복잡한 비즈니스 로직 수행보다는 요청된 콘텐츠나 데이터를 빠르게 반환하는 것
- 대표적인 웹 서버: Apache, Nginx

2) 웹 어플리케이션 서버란?

- 웹 서버와 협력하여 동적인 컨텐츠 제공
- 주로 데이터베이스 조회, 복잡한 계사노가 같은 비즈니스 로직 처리
- 클라이언트의 요청을 웹 서버로부터 전달 받아 처리, 결과를 다시 웹 서버에 반환.
- 정적인 데이터만 전달하는 웹 서버에 비해 처리 시간이 길어질 수 있음.
- 콘텐츠 생성이나 데이터베이스와의 상호작용이 필요할 때 주로 사용

3) 웹 서버와 브라우저 간의 통신 방식 정리

- 사용자는 브라우저를 통해 HTTP request로 웹사이트를 웹 서버에 요청. 웹 서버는 HTTP request를 통해 웹사이트 데이터를 브라우저에 전송. 마지막으로 브라우저는 서버에서 받아온 데이터를 웹사이트 브라우저에 그려냄
- 기본적으로 브라우저가 웹 서버에 요청할 때는 주로 GET Method로 요청. POST, PUT, DELETE와 같은 다른 HTTP 요청 메서드도 존재하며 이들은 서버에 다른 타입의 요청을 보낼 때 사용됨.

2. Node.js란?

1) Node.js란?

Chrome V8 엔진으로 빌드된 JavaScript 런타임. 이벤트 기반, 논 블로킹 I/O 모델을 사용해 가볍고 효율적이다. Node.js 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생태계이기도 하다.

JS를 컴퓨터에서 브라우저 없이 실행하게 도와주는 환경으로, 코어 라이브러리와 V8엔진, libuv라는 라이브러리를 통해 가능하다.

2) 논 블로킹 I/O

블로킹 방식은 프로그램이 특정 작업을 수행하는 동안 다른 작업을 중단시키는 방식이다.
반면에 논 블로킹 방식은 프로그램이 여러 작업을 동시에 처리할 수 있는 장점이 있다.

  • 블로킹 I/O: 한 번에 하나의 작업만을 처리. 호출된 함수가 자신의 작업을 모두 마칠 때까지 호출한 함수에게 제어권을 넘겨주지 않음.
    • 예) 파일을 읽는 동안 다른 작업을 함께 수행할 수 없음
  • 논 블로킹 I/O: 시스템 호출이 완료되기를 기다리지 않고 바로 다음 작업으로 즉시 넘어가는 방식. 호출된 함수는 작업의 완료 여부와 상관없이 즉시 제어권 호출한 함수에게 반환.
    • 예) 파일을 읽는 동안에도 동시에 연산을 하는 것처럼 다른 작업을 함께 수행할 수 있음

3) 싱글 스레드

싱글 스레드는 스레드 하나를 사용하여 동시에 하나의 작업만을 처리.

여기서 스레드란 프로그램이 동작할 때, CPU 또는 프로세서를 사용하는 단위로, 여러 스레드를 사용하면 여러 작업을 동시에 처리할 수 있다. 그러나 이는 복잡성을 증가시키고 리소스를 더욱 많이 소모하게 한다.
  • Node.js 는 싱글 스레드로 동작하지만 I/O 작업이 발생한 경우 이를 비동기적으로 처리하여 여러 작업을 동시에 처리한다.
  • 일반적으로 1개의 프로그램은 1개의 스레드를 사용할 수 있다.

4) 호출 스택

호출 스택은 함수의 실행 순서를 추적하는 자료구조이다.

  • JavaScript는 코드를 실행하면서 호출 스택에 함수를 추가하고, 함수가 완료되면 제거한다.
  • 이는 비동기 작업에서 문제가 되는데, 네트워크 요청과 같이 시간이 많이 걸리는 작업을 기다리는동안 JavaScript는 다른 어떠한 작업도 처리할 수 없다. 따라서 JS는 이벤트 루프와 이벤트 큐를 사용한다.

5) 이벤트 루프

이벤트 루프는 여러 이벤트들과 같은 비동기 작업들을 모아서 관리하고 어떤 순서로 실행해야하는지 도와주는 도구이다.

  • 이벤트 루프는 호출 스택과 이벤트 큐를 관찰하면서, 호출 스택이 비어있고, 이벤트 큐에 작업이 있다면, 이벤트 큐의 작업을 호출 스택으로 이동하는 역할을 담당.
  • 자바스크립트는 시간이 오래 걸리는 작업을 이벤트 큐에 넣어 비동기적으로 처리. 그 동안 호출 스택에서 다른 작업들을 계속 처리할 수 있다.

6) 이벤트 루프의 동작 방식 이해

function firstFunction() {
  console.log('firstFunction 입니다.');
  secondFunction();
}

function secondFunction() {
  // 2 초간 기다린다.
  setTimeout(function () {
    console.log('secondFunction 입니다.');
  }, 2000);
}

firstFunction();
console.log('전역 코드 실행 중!');

// print: firstFunction 입니다.
// print: 전역 코드 실행 중!
/** 2 초간 기다린다. **/
// print: secondFunction 입니다.

firstFunction은 호출 스택에 추가되고 실행되며 'firstFunction 입니다.'를 콘솔에 출력하고 secondFunction을 호출. 그 다음 secondFunction을 호출 스택에 추가하여 setTimeout 함수를 실행.
setTimeout은 비동기 함수이므로, JS는 이 작업을 이벤트 큐에 넣고 secondFunction을 호출 스택에서 제거.
그 다음 firstFunction도 호출 스택에서 제거하고, ‘전역 코드 실행 중!’을 콘솔에 출력.
2초 후, ‘secondFunction 입니다.’를 출력하는 작업이 이벤트 큐에서 호출 스택으로 이동하고 실행된다. 이때 호출 스택은 비어있기 때문에 이벤트 루프가 이 작업을 호출 스택으로 이동시킬 수 있었다.

1. Pakage Manager

1) Package란?

Node.js에서 코드르이 재사용성을 높이기 위해 작성된 독립적인 코드 조각을 모듈이라 부른다.
이러한 모듈을 npm이나 yarn과 같은 패키지 매니저를 통해 업로드하여 다른 개발자들과 공유할 때, 이를 패키지라고 한다.

  • 모듈은 일반적으로 프로젝트 내에서 사용되는 코드 조각을 의미.
    패키지는 이러한 모듈을 포함하거나, 다른 패키지에 의존하고 있는 코드의 집합을 의미.
  • 패키지는 다른 패키지를 사용할 수 있다. 이런 관계를 의존 관계라 부른다.

2) Package Manager란?

  • 패키지를 손쉽게 다루는 작업을 안전하고 편리하게 사용하기 위한 툴.
  • 여러 개발자들이 만든 수많은 패키지들을 효과적으로 활용하여 자신의 프로젝트를 더 빠르고 안정적으로 만들 수 있다.

3) npm이란?

  • 자바스크립트에서 사용할 수 있는 패키지 관리자

4) yarn이란?

  • npm에서 부족한 부분을 보완하여 편리한 기능과 보안 성능이 향상된 패키지 매니저
  • 패키지를 다운로드 하는 과정에서 해당 패키지의 보안 검사 수행.
  • 병렬처리를 도입하여 패키지 설치 속도가 npm보다 빠르다. 패키지 여러개를 동시에 설치할 수 있다.

5) package.json이란?

  • Node.js 프로젝트의 가장 핵심적인 파일. 패키지들의 버전을 관리.
  • 프로젝트명, 작성자, 라이센스 정보 등 메타 데이터뿐만 아니라, 스크립트를 실행할 수 있는 필드 또한 포함.
  • npm과 yarn 모두 동일한 package.json 파일을 참조.

6) package-lock.json과 yarn.lock이란?

  • package-lock.json 또는 yarn.lock 파일은 package.json에서 정의한 패키지 외에도 node_modules에 들어있는 패키지들의 버전과 의존 관계가 상세하게 정의돼있다.
  • node_modules 폴더가 존재하지 않더라도, 해당하는 lock 파일이 존재한다면 동일한 패키지 구조를 재설치 할 수 있다.
  • npm으로 패키지를 설치, 수정, 삭제할 때마다 패키지들의 정확한 의존 관계를 package-lock.json 파일에 저장.
  • yarn의 경우 패키지들의 상세한 의존 관계를 yarn.lock 파일에 저장
  • 이러한 lock 파일들은 개발 환경 간에 일관된 패키지 버전을 보장해준다.

2. 배포를 위한 yarn 학습

1) yarn 설치

글로벌 환경에서 yarn을 설치한다.

# npm을 이용하여 전역 환경에 Yarn을 설치합니다!
npm install -g yarn

설치가 완료되었는지 확인하기 위해 yarn -v 명령어로 확인한다.

2) yarn 시작

yarn itit

  • 새로운 프로젝트나 패키지를 만들 때 사용
  • package.json 파일을 만들 때 사용된다. package.json에는 yarn으로 설치된 패키지에 대한 정보가 들어있다.
  • 패키지명, 프로젝트 버전, Githun URL 등 프로젝트와 관련된 다양한 정보를 설정할 수 있다.
# package.json
{
  "name": "package-manager",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

yarn add [패키지 명]

  • yarn으로 패키지를 설치할 때 사용.
  • yarn add express는 express 패키지 하나를 설치할 수 있다. 띄어쓰기로 구분하여 여러개의 패키지를 한 번에 설치하는 것도 가능하다.
    • 예) yarn add express mongoose jest

3) node_modules

  • node_modules는 yarn add 명령어를 통해 설치된 패키지들이 저장되는 폴더이다.
  • package_json 파일에 작성된 각 패키지와 그 패키지가 의존하는 다른 패키지 또한 node_modules 폴더에 저장.
  • 환경에 맞는 파일들이 설치되기 때문에 이 폴더는 다른 곳에 공유하거나 배포할 때 포함하면 안 된다.

4) yarn

  • yarn 명령어가 입력되면 yarn.lock 파일과 package.json 파일을 기반으로 필요한 패키지를 설치한다.
  • 작업한 프로젝트를 공유하거나 다른 사람의 프로젝트를 새롭게 시작할 때 패키지를 설치하기 위해 실행하는 명령어

dependencies와 devDependencies

dependencies

  • yarn add [패키지명] 명령어를 통해 설치한 패키지들이 나열되는 곳
  • 프로젝트 실행과 배포(Deploy) 시 필수적으로 필요한 패키지의 이름과 버전 표시

devDependencies

  • yarn add -D [패키지 명] 명령어를 통해 설치한 패키지들이 나열되는 곳
  • 개발 또는 빌드(Build) 단계에서 필요한 패키지들을 설치할 경우 이곳에 포함된다.
    • 빌드 단계: 테스트 코드 실행이나, TypeScript를 JavaScript로 변경하는 단계

5) npm과 yarn 명령어 비교

명령어npmyarn
dependencies 설치npm installyarn
패키지 설치npm install [패키지명]yarn add [패키지명]
dev 패키지 설치npm install --save-dev [패키지명]yarn add --dev [패키지명]
global 패키지 설치npm install --global [패키지명]yarn global add [패키지명]
패키지 제거npm uninstall [패키지명]yarn remove [패키지명]
dev 패키지 제거npm uninstall --save-dev [패키지명]yarn remove [패키지명]
global 패키지 제거npm uninstall --global [패키지명]yarn global remove [패키지명]
업데이트npm updateyarn upgrade
패키지 업데이트npm update [패키지명]yarn upgrade [패키지명]

1. Express.js의 이해

1) 웹 프레임워크

웹 프레임워크란 프로그래밍의 특정 부분을 추상화하여, 개발자가 더 높은 수준에서 프로그램을 작성할 수 있게 도와주는 도구이다.

2) Express.js란?

Express.js의 가장 큰 특징 중 하나는 미들웨어를 지원이다. 미들웨어는 사용자의 요청과 응답사이에 위치하여 특정 기능을 수행한다.

2. Express.js로 백엔드 서버 구현

1) 새 프로젝트 설정

  1. 프로젝트 폴더에 app.js 파일을 생성한다.
  2. 아래의 명령어를 실행하여 package.json을 생성한다.
yarn init -y

뒤의 -y는 yarn init 명령 실행 시 프로젝트명이나 버전 등을 물어보지 않고 기본값으로 알아서 설정해주는 옵션이다.

2) package.json 모듈 변경하기

{
  "name": "spa-shop",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "type": "module"
}

3) Express.js 설치

yarn add express

4) 기본적인 백엔드 서버 코드 작성

// app.js

import express from 'express';

const app = express();
const PORT = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(PORT, () => {
  console.log(PORT, '포트로 서버가 열렸어요!');
});

5) 내가 만든 서버 실행

node app.js

6) 브라우저에서 서버의 응답 확인

  • 브라우저로 http://localhost:3000/ 경로에 들어간다.
  • GET Method로 작성된 코드를 통해 Hellow World! 라는 문구를 확인할 수 있다.
profile
성준호
안녕하세요
이전 포스트

8/29 Node.js 입문 1주차

다음 포스트

9/2 Node.js 입문 1주차 (2)

0개의 댓글