Node.js 입문주차 1주차

1.1 웹과 HTTP의 동작 방식

웹브라우저의 통신 방식

1️⃣ 사용자가 웹 브라우저의 주소창에 URL을 입력
2️⃣ 웹 브라우저는 입력받은 URL을 DNS 서버로 전달하여 해당 IP 주소를 탐색
3️⃣ DNS 서버는 도메인 이름을 IP 주소로 변환
4️⃣ 웹 브라우저는 해당 IP 주소로 HTTP 요청을 전달
5️⃣ IP 주소에 연결된 웹 서버는 요청(Request)을 받아 처리
6️⃣ 웹 서버는 처리 결과를 HTTP Response로 브라우저에게 전달
7️⃣ 웹 브라우저는 받은 HTTP Response을 바탕으로 사용자에게 페이지를 표시

◆ URL(Uniform Resource Locator)

구조 : ‘<프로토콜>://<도메인 명>:<포트>/<경로>’

http://cafe.naver.com/joonggonara 

<프로토콜>://<도메인 명>:<포트>/<경로>

 

‘http’ : 프로토콜

‘cafe.naver.com’: ‘naver.com’ 이라는 메인 도메인 명과 ‘cafe’라는 서브 도메인 명

  서브는 조작가능하지만 메인 도메인은 해킹이 않되니 주의해서 해킹피래응 예방하세요!

‘joonggonara’ : 서버에서 리소스 경로

 

◆ DNS(Domain Name Service)

도메인 이름을 중개하여, IP로 변경해주는 서비스를 제공합니다. 

영어, 숫자, 특수문자로 이루어진 URL을 IP로 변환해주는 역할을 하는 서비스 입니다.

◆ IP(Internet Protocol)

 각각의 네트워크에 연결된 장치들이 고유한 IP 주소를 가져 인터넷 상에 존재하는 해당하는 장치의 위치를 식별하게 합니다.

IPv4는 '.'으로 구분 합니다.   10진수 4부분IPv6은 ':'로 구분합니다.   16진수 8부분   보안기능을 기본으로 제공합니다.

한국인터넷정보센터(KRNIC) : https://xn--3e0bx5euxnjje69i70af08bea817g.xn--3e0b707e/jsp/resources/ipv6Info.jsp

 

◆ HTTP

데이터를 주고 받는 양식을 정의한 "통신 규약"중 하나 입니다.

의사 표현의 수단: (현실 세상) 말 ↔ (디지털 세상) 네트워크
의사 표현의 방법: (현실 세상) 언어 ↔ (디지털 세상) 통신 규약

 HTTPS는 HTTP를 기반으로 데이터 통신의 안전성을 높이기 위해 암호화 기능이 포함된 통신 프로토콜 입니다. 정보를 ‘비밀 코드’처럼 만들어 전송(암호화)합니다

서버는 브라우저가 원하는 페이지가 있는지 확인하고, 있다면 해당 페이지에 대한 데이터를 반환(Response) (status : 200)합니다. 없다면 없는 페이지에 대한 데이터 (status : 404) 를 반환합니다.

◆ Headers 탭 살펴보기

개발자 도구 > netwark > F5 > 브라우저가 지금 페이지를 보여주기 위해 서버에서 받아온 데이터 목록을 볼 수 있습니다.

목록의 이름을 더블클릭하면 내용도 볼 수 있습니다.

항목별로 찾아볼 수 있습니다.

 

 

◆ General : 브라우저에서 서버로 보낸 Request 데이터 입니다.

어떤 서버에 어떤 메소드로 요청을 보냈고 그 결과가 어떻게 반환되었던 것인지 볼수 있습니다.

가장 기본적으로 제공되는 정보입니다.

Request URL ( URL을 요청한 장소) : https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js

Request Method (조회하거나 생성할 메서드를 가져오는 방법) : GET

Status Code(서버가 처리된 결과) : 200 OK (from memory cache)   

   200은 정상적으로 조회되었다는 뜻입니다.

Remote Address: 146.75.49.229:443

Referrer Policy: strict-origin-when-cross-origin

 

◆ Request Headers : 서버가 반환한 데이터에 추가적으로 작업하는 데이터 입니다.

서버가 발행한 쿠키를 확인할 수 있습니다.

 

◆ Response Headers : 서버가 웹페이지를 작성할 때 실제로 보낸 데이터들 입니다.

 

◆ Response : 웹 브라우저가 페이지를 구현하기 위해 작성된 스크립트 부분이나 html 부분입니다.

 

◆ priview :  Response에 의해 작성된 결과 페이지를 보여줍니다.

 

 

◆ 추가 데이터

◆ 메서드

get : 어떤 리소스를 얻을 때 사용합니다.

  브라우저는 기본적으로 get 메서드를 사용해 서버네 요청을 보냅니다.

  예외사항 : https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fs-formmethod

post : 웹 서버에 데이터를 "게시"할 때 사용합니다.

 

◆  header : 추가 데이터, 메타데이터, 의사 표현을 위한 데이터 등

 브라우저가 어떤 페이지를 원하는지

요청받은 페이지를 찾았는지

성공적으로 찾았는지 등

 

◆ payload : 데이터, 실질적인 데이터

서버가 응답을 본낼 때 항상 Payload를 보낼 수 있습니다.

Get method를 제외하고 서버가 응답할 떈 항상 Payload를 보낼 수 있습니다.

DELETE method에서 Payload를 보낼 수 있지만 대부분 Payload를 보내지 않습니다.

주로 Json 타입으로 전달합니다.

 

◆  웹 서버

https://www.exabytes.my/blog/web-server-vs-application-server/

 

HTTP를 이용하여 인터넷 상에서 클라이언트의 요청을 처리하고 응답해주는 컴퓨터 또는 프로그램으로 정적인 콘텐츠를 제공합니다. (ex: HTML, CSS, 이미지 파일 등)

필요한 경우, 클라이언트의 요청을 웹 어플리케이션 서버(WAS, Web Application Server)로 전달하여 처리할 수 있습니다.

대표적인 웹 서버로는 Apache, Nginx

복잡한 비지니스 로직처리보단 요청된 콘텐츠나 데이터를 빠르게 반환하는 것이 주된 업무입니다.

 

◆ 웹 어플리케이션 서버 (WAS, Web Application Server)

웹 서버와 협력하여 동적인 컨텐츠를 제공합니다.

주로 데이터베이스를 조회하거나, 복잡한 계산과 같은 비즈니스 로직을 처리합니다.

복잡한 데이터를 가공하거나 다양한 비즈니스 로직을 수행하기 때문에 정적인 데이터만 전달하는 웹 서버에 비해 처리 시간이 길어질 수 있습니다.

웹 어플리케이션 서버는 콘텐츠 생성이나 데이터베이스와의 상호 작용이 필요할 때 주로 사용합니다.

클라이언트의 요청을 웹 서버로부터 전달받아 처리하고, 결과를 다시 웹 서버에 반환하여, 최종적으로 클라이언트가 응답을 받을 수 있도록 구성

https://www.fs.com/blog

 

 

◆ 웹 서버와 브라우저 간의 통신 방식 :  ( 중요)

1. 브라우저의 HTTP 요청 (Request)
   - 사용자가 브라우저를 통해 웹사이트를 요청하면, 브라우저는 HTTP 요청을 만들어 웹 서버로 전송합니다.
   - 이때 기본적으로 GET 메서드를 사용하지만, 상황에 따라 POST, PUT, DELETE와 같은 다른 HTTP 요청 메서드들도 활용됩니다.

2. 웹 서버의 HTTP 응답 (Response)
   - 웹 서버는 브라우저로부터 받은 요청을 처리한 후, 그에 맞는 데이터를 HTTP 응답으로 브라우저에 전송합니다.
   - HTTP 응답에는 요청된 웹페이지, 이미지, 또는 JSON 데이터와 같은 다양한 정보가 포함될 수 있습니다.

3. 브라우저의 렌더링 (Rendering)
   - 브라우저는 서버로부터 수신한 응답 데이터를 사용해 요청한 웹사이트를 화면에 표시합니다.
   - 이 과정에서 HTML, CSS, JavaScript 파일 등을 해석하고 렌더링하여 사용자가 볼 수 있는 형태의 웹페이지로 출력됩니다.
 

1.2 Node.js란 무엇일까?

◆ JavaSctipt

정적인(Static) 문서를 조금 더 동적(Dynamic)으로 표현할 수 있도록 만들어졌습니다.

 

◆ 정적 웹 페이지 (Static Web Page) : 미리 작성되어 확정된 페이지로 실시간 정보나 맥락을 반영하지 못합니다.

        연산이 필요없으므로 Javascript로 프로그래밍할 이유가 없고 HTML로만 작성 가능합니다.

 

◆ 동적 웹 페이지 (Dynamic Web Page) : 맥락, 상황을 반영할 수 있는 페이지를 말합니다.

 

◆ ECMAScript(ECMA-262)  : 현재의 자바스크립트 표준으로 ECMA International에서 만들었고 매년 꾸준히 업데이트 중입니다.

 

◆ Node.js

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

◆ Node.js는 “Javascript를 브라우저가 아닌 컴퓨터에서 브라우저 없이 실행하게 도와주는 환경”입니다. 이는 핵심적인 코어 라이브러리와 V8 엔진, 그리고 libuv라는 라이브러리를 통해 가능해집니다

 

◆ 코어 라이브러리 : 파일츨 출력하거나 쓰는 fs라이브러리, 운영체제 다루는 os, 여러가지의 프로세서와 스레드를 관리하는 프로세스 등

 

◆ Node.js Bindings : Node.js로 작성된 코드를 C나 C++로 번역해 V8엔진과 libuv에 전달합니다.

V8엔진과 libuv는 C와 C++ 언어로 작성되어 있지만 node.js에서 알 필요는 없습니다.

 

◆  V8 엔진 : 구글이 개발하여 구글 크롬 브라우저에서 사용하는 자바스크립트 엔진입니다. 개발중 확인할 수 있게 해주는 엔진 입니다. C와 C++로 분리되어 있습니다.

 

◆  libuv 라이브러리 : 비동기 I/O 작업을 수행할 수 있게 해주는 중요한 라이브러리입니다. 이 라이브러리 덕분에 Node.js는 논 블로킹 I/O 모델이라는 특징을 가지게 되었고, 이를 통해 여러 요청을 효율적으로 처리할 수 있게 되었습니다

 

◆ Node.js 장점

논 블로킹(Non-blocking) I/O, 싱글 스레드(Single Thread),  이벤트 루프(Event Loop)의 특성

 

◆ 논 블로킹I/O   (Non-Blocking Input/Output) 

프로그램의 실행 흐름을 제어하는 방식

-  I/O : 데이터의 입력(Input) / 출력(Output)을 의미합니다. 파일을 저장하거나, 불러오는 것을 “I/O 처리를 한다.” 라고 표현 합니다.

 

- 블로킹 I/O : 프로그램이 특정 작업을 수행하는 동안 다른 작업을 중단시키는 방식 입니다.

한 번에 하나의 작업만을 처리할 수 있으며, 호출된 함수가 자신의 작업을 모두 마칠 때 까지 호출한 함수에게 제어권을 넘겨주지 않습니다.

 

- 논 블로킹I/O : 프로그램이 여러 작업을 동시에 처리할 수 있습니다.

시스템 호출이 완료되기를 기다리지 않고 바로 다음 작업으로 넘어갈 수 있는 방식이므로 호출된 함수는 작업의 완료 여부와 상관없이 즉시 제어권을 호출한 함수에게 반환합니다. 파일을 읽는 중에도 다른 작업을 수행 할 수 있습니다.

 

※ 제어권 : 실제로 함수가 실행되기 위해 필요한 요구사항, 권한 입니다.

 

◆  싱글 스레드(Single Thread)

 

- 싱글 스레드(Single Thread) :

   스레드 하나만 사용하는 것이며, 동시에 하나의 작업만을 처리할 수 있음을 의미합니다

   싱글 스레드는 스레드 생성과 관리에 드는 부담을 줄이며, 컴퓨팅 리소스를 효율적으로 사용할 수 있게 합니다. 

    한 번에 하나의 작업만 처리하기 때문에 동시성 문제(여러 스레드가 공유하는 자원에 대한 동시접근하는 문제) 즉 Race condition 문제를 방지합니다.

    Node.js의 싱글 스레드 + 이벤트 루프 방식을 사용하면, 동시에 많은 요청을 효율적으로 처리할수 있습니다.

    연결 요청의 부하에 따른 서버 확장이 매우 자유롭습니다.

   CPU 집중적인(CPU Intensive) 작업에는 적합하지 않습니다.

-멀티 스레드(Multi Thread) :

   프로그램 하나에 여러 스레드를 사용 하거나 여러 프로그램을 여러 스레드를 상요해 실행합니다.

    동시에 많은 요청을 처리해야 하는 경우, 멀티스레드 방식을 사용하면 각 요청마다 스레드를 생성해야 하므로 오버헤드가 발생합니다.

    CPU 집중적인(CPU Intensive) 작업에 효율적입니다.

- 스레드(Thread) : 프로그램이 동작할 때, CPU 또는 프로세서를 사용하는 단위입니다.

   여러 스레드를 사용하면 여러 작업을 동시에 처리할 수 있지만 이는 복잡성을 증가시키고, 리소스를 더욱 많이 소모하게 되는 문제점이 발생합니다

 

-Node.js의 싱글 스레드 :

   싱글 스레드로 동작하지만, I/O 작업이 발생한 경우 이를 비동기적으로 처리하여 여러 작업을 동시에 처리할 수 있게 합니다.
  싱글 스레드는 CPU 집중적인(CPU Intensive) 작업에는 적합하지 않기에 Node.js 는 추가 스레드를 생성하는 방법들을 제공합니다.

 

◆  호출 스택(Call Stack) : 함수의 실행 순서를 추적하는 자료구조입니다. 가장 마지막에 호출된 함수부터 실행 됩니다.

   실제로 Node.js안에서 JS가 어떤 방식으로 동작하고 어떤식으로 함수가 실행되는에 관한 설명입니다.

   JavaScript는 코드를 실행하면서 호출 스택(Call Stack)에 함수를 추가(push)하고 함수가 완료되면 호출 스택에서 제거(pop)합니다.

   이는 비동기 작업에서 문제가 되는데, 특히 네트워크 요청과 같이 시간이 많이 걸리는 작업을 기다리는동안 JavaScript는 다른 어떠한 작업도 처리할 수 없게 됩니다.

   이 문제를 해결하기 위해 JavaScript는 이벤트 루프(Event Loop)와 이벤트 큐 (Event Queue)를 사용합니다.

 

◆  이벤트 루프(Event Loop) - 면접에서 중요★

이벤트 루프와 이벤트 큐를 사용하여 JavaScript는 비동기 작업을 처리할 수 있습니다.

일반적으로 JavaScript 함수는 호출 스택(Call Stack)에 저장되지만, 파일 입출력 같은 비동기 작업은 LIBUV의 이벤트 루프에 들어갑니다. 이벤트 루프는 루프를 돌면서 함수가 특정 조건을 만족할 때 이를 호출 스택으로 전달하는 역할을 합니다.

이벤트 루프는 호출 스택과 이벤트 큐(Event Queue)를 지속적으로 관찰하여, 호출 스택이 비어 있고 이벤트 큐에 작업이 있을 때 이벤트 큐의 작업을 호출 스택으로 옮깁니다. 이를 통해 JavaScript는 오래 걸리는 작업을 이벤트 큐에서 비동기적으로 처리하고, 호출 스택에서는 다른 작업을 계속 처리할 수 있습니다.

// 이벤트 루프 동작 방식 이해하기
function firstFunction() {
  console.log('firstFunction 입니다.'); // 2. 'firstFunction 입니다.'출력
  secondFunction(); // 3. secondFunction()함수를 호출 스택에 추가(push), 실행
}

function secondFunction() {
  // 2 초간 기다린다.
  setTimeout(function () { // 4. setTimeout은 비동기 함수. JS는 이 작업을 이벤트 큐에 넣고 
                           //    secondFunction을 호출 스택에서 제거(pop)합니다.
    console.log('secondFunction 입니다.'); // 6. 2초가 지난 후, 이때 호출 스택은 비어 있기 때문에 이벤트 루프가 이 작업을 호출 스택으로 이동시킬 수 있습니다. 
                                           //    ‘secondFunction 입니다.’를 출력하는 작업이 이벤트 큐에서 호출 스택으로 이동하고 실행됩니다
  }, 2000);
}

firstFunction();  // 1. firstFunction()함수를 호출 스택에 추가(push), 실행
console.log('전역 코드 실행 중!'); // 5. firstFunction도 호출 스택에서 제거하고, ‘전역 코드 실행 중!’을 콘솔에 출력합니다. 
                                   
// print: firstFunction 입니다.
// print: 전역 코드 실행 중!
/** 2 초간 기다린다. **/
// print: secondFunction 입니다.

 

1.3 개발 환경 설정하기

VSCode, Node.js, Git 설치하세

◆ 통합 개발 환경(Integrated Development Environment, IDE) :

   여러가지의 개발자 툴을 결합하여 개발에 관련된 모든 작업을 하나의 프로그램 안에서 처리할 수 있는 환경을 제공하는 소프트웨어 입니다.

 

◆ LTS (Long Term Support) 버전 : 장기 지원 버전. 일반적인 경우보다 장기간에 걸쳐 지원하도록 고안된 버전입니다.

 

◆ REPL 환경( Read-Eval(evaluation)-Print Loop) :

   사용자가 코드를 입력하면 그 코드를 읽고 실시간으로 실행시켜주는 환경을 말합니다.

- 시작하기 : 커맨드 창 또는 Git Bash에서 node 를 입력 후 엔터를 치면 Node.js의 REPL 환경으로 진입할 수 있습니다.

- 나가기 : Ctrl + C를 두번 누르거나, Ctrl + D를 한번 누르면 REPL 환경에서 벗어날 수 있습니다

 

 

 

출처: https://teamsparta.notion.site/Node-js-84b9c9b5c79248f98c9b834d0008ca23

 

※ 요약

◆ 웹과 http 기본 상식

 

※ 기억할 것

◆ url 구조 : ‘<프로토콜>://<도메인 명>:<포트>/<경로>’

◆ 웹 서버와 브라우저 간의 통신 방식 :  ( 중요)

1. 브라우저의 HTTP 요청 (Request)
   - 사용자가 브라우저를 통해 웹사이트를 요청하면, 브라우저는 HTTP 요청을 만들어 웹 서버로 전송합니다.
   - 이때 기본적으로 GET 메서드를 사용하지만, 상황에 따라 POST, PUT, DELETE와 같은 다른 HTTP 요청 메서드들도 활용됩니다.

2. 웹 서버의 HTTP 응답 (Response)
   - 웹 서버는 브라우저로부터 받은 요청을 처리한 후, 그에 맞는 데이터를 HTTP 응답으로 브라우저에 전송합니다.
   - HTTP 응답에는 요청된 웹페이지, 이미지, 또는 JSON 데이터와 같은 다양한 정보가 포함될 수 있습니다.

3. 브라우저의 렌더링 (Rendering)
   - 브라우저는 서버로부터 수신한 응답 데이터를 사용해 요청한 웹사이트를 화면에 표시합니다.
   - 이 과정에서 HTML, CSS, JavaScript 파일 등을 해석하고 렌더링하여 사용자가 볼 수 있는 형태의 웹페이지로 출력됩니다.

◆ REPL 환경( Read-Eval(evaluation)-Print Loop) :

   사용자가 코드를 입력하면 그 코드를 읽고 실시간으로 실행시켜주는 환경을 말합니다.

- 시작하기 : 커맨드 창 또는 Git Bash에서 node 를 입력 후 엔터를 치면 Node.js의 REPL 환경으로 진입할 수 있습니다.

-나가기 : Ctrl + C를 두번 누르거나, Ctrl + D를 한번 누르면 REPL 환경에서 벗어날 수 있습니다

◆  특별한 이유가 존재하지 않다면, 하나의 프로젝트에서는 두 패키지 매니저를 혼용하여 사용하는 것은 피해야합니다.

※Tip

◆ ‘cafe.naver.com’: ‘naver.com’ 이라는 메인 도메인 명과 ‘cafe’라는 서브 도메인 명

  서브는 조작가능하지만 메인 도메인은 해킹이 않되니 주의해서 해킹피래를 예방하세요!