Hello world (1) Node.js가 서버인 줄 알았는데 아니었어

목표 : Hello world 홈페이지를 배포하기

하게된 계기 : 오늘 인프런 멘토링을 진행하면서, 데브옵스/클라우드전문가/SRE 분야로 준비하기 위해서는 "처음부터 끝까지 할 줄 알아야한다." 라고 멘토링 받고 일단 Hello world라도 혼자 배포까지 해봐야겠다고 생각이 들었음

 

원래도 아는게 잘 없었지만 기존의 있는 지식을 지우고, 처음부터 끝까지 배포해보면서 경험하는 고민 등을 기록해보도록 하겠음.

 

일단 단순 내 목표를 AI에게 정리해서 진행 순서에 대한 가이드를 받았는데,

내 목표는 Hello world의 출력과 단순한 댓글을 쓸 수 있는 홈페이지를 배포하는 것이다.

 

• Node.js Express로 Hello World 띄우기
• 댓글 입력 폼 만들기
• 댓글을 메모리에 저장
• PostgreSQL에 저장하도록 변경
• Dockerfile 만들기
• docker-compose.yml 만들기
• GitHub에 올리기
• EC2에 수동 배포
• Nginx 연결
• GitHub Actions 자동 배포
• README 정리
• 블로그 글 작성

AI한테는 위와 같은 순서를 추천 받았다. 

 

• ✅ Git 설치
• ✅ VS Code 설치
• ✅ Node.js 설치
• ✅ Docker Desktop 설치
• ✅ WSL2 설치
• ✅ GitHub Repository 생성
• ✅ Git 초기화
• ✅ 첫 Commit
• ✅ 첫 Push

일단 홈페이지를 먼저 만들어본다라고 하면 그 페이지에 누군가가 접속할 때 연결이 되어야하는데

예시로 google.com을 접속한다고 했을때의 원리를 간단하게 알아봐야겠다고 생각함

 

google.com 입력 -> DNS - google.com 의 ip주소 변환 -> 인터넷 -> google 서버 - HTTP 요청 -> google 서버가 html을 응답 -> 브라우저가 화면을 나타냄 

 

인 것 같다.

 

google.com 이라는건 도메인 이름이고,

이건 컴퓨터가 이해하지 못한다. 따라서 컴퓨터가 이해할 수 있는 주소인 ip주소로 바꾸는 과정이 필요함

 

도메인을 ip주소로 바꾸는 과정을 DNS 서버가 해주고

예를들어 DNS 서버가 google.com -> 142.250.xxx.xxx로 알려주면

목적 ip를 알았기 때문에 브라우저가 google의 서버로 요청을 보낼 수 있음.

 

그럼 브라우저는 목적 ip로 https 요청을 보내고 답장을 받아낸 뒤 브라우저에 그 서버의 응답을 출력해줌

그럼 구글은 어떤 응답을 해줄까? 

브라우저가 get/ 요청을 보내면, google 서버는 

HTTP response

HTML

CSS

JavaScript

이미지

....

을 보내줌

브라우저가 HTML을 읽으면서 CSS도 필요하고, JavaScript도 필요하고 해서 추가 요청을 보냈고 그것에 대한 응답을 받아 홈페이지가 완성됨

 

http/https 차이

https는 http라는 통신 방식에 암호화기능(TLS)가 추가 된 것

왜 암호화를 하냐? 

id / pw를 이용해 로그인 한다고 할 때, 이게 id / pw 가 그대로 패킷으로 가기 때문에 중간에 보면 바로 볼 수 있음. 

https로 암호화를 하면 af82!$%fsj15.... 이런식으로 되기 때문에 https를 사용함

 

여기서 내가 구축하려고 하는 홈페이지로 한다면,

일단 local에서 띄우기 위해 node.js를 실행시켜 서버를 만들거고

localhost:3000 으로 접속하게되면 127.0.0.1:3000으로 변환되어서 node.js가 실행되고 있으면 응답을 받아 출력해줄 수 있겠다고 생각함

 

Node.js는 브라우저 밖에서도 JavaScript를 실행할 수 있게 해주는 프로그램(Runtime)이고, 

그냥 자바 스크립트를 실행할 수 있는 프로그램 (잘 이해가안된다) 

내 머리에는 node.js를 실행하면 그게 서버가 되는게 아닌가?. 라는 생각이 있는 것 같다.

 

이해가 안되서 예를 들어보면, 

python에서 

print("hello")를 입력한다라고 하면 python은 서버일까? 

아니다 - python은 그저 python코드를 실행하는 프로그램일뿐..

 

Node.js도 똑같은 개념으로 

console.log("Hello");

를 실행하려면

node app.js를 입력하여 실행하는 것 뿐 그저 JavaScript를 실행하는 프로그램이라는거다.

그럼 왜 내가 node.js를 서버라고 생각했을까?

 

여기서 서버를 만드는건 Node.js가 아니고 JavaScript 코드가 만들기 때문에 서버가 되는건데

예를 들어 

const express = require("express");

const app = express();

app.listen(3000);

라는 코드를 실행하면,

3000번 포트를 열고 요청을 기다리는 프로그램이 만들어 지는거고 이게 바로 웹 서버이기 때문에 내가 서버라고 생각을 했던 것 같다. 따라서 웹 서버는 Node.js에서 실행되는 JavaScript 프로그램이다 라고 이해하면 될 것 같다.

 

근데 그럼 서버 실행할 때 왜 

javascript app.js

로 실행하지 않고

node app.js

 

로 실행하는거지? JavaScript 프로그램이면 그냥 JavaScript로 실행하면 되는거 아닌가? 라는 생각이 들었는데 

파이썬으로 생각해보면

hello.py가 있고 안의 내용은 print("Hello")라고 한다면,

python hello.py로 실행을 하게 된다.

 

왜 앞에 python을 붙일까?? -> 그 이유는 내 hello.py는 그냥 단순한 영어가 들어가 있는 코딩문법,텍스트 일 뿐이고 앞에 python을 붙여야 python에 맞게 읽고 이해하는 프로그램으로 실행시키기 위함이기 때문이다..

 

따라서 위에 app.js에 "JavaScript"언어로 된 서버를 실행시켜주는 내용(텍스트)가 있는거고
( app.js는 JavaScript 코드가 들어있는 파일이다.)
그 실행시켜 줄 수 있는 프로그램이 Node.js기 때문에 Node.js를 사용한다
( Node.js는 그 JavaScript 코드를 실행하는 Runtime이다.)

서버는 왜 계속 켜져있어야 될까?

당연히 클라이언트 요청이 언제올줄 모르니까 켜져 있어야겠지.. ?

 

그럼 서버는 어떤 상태로 있어야 할까? 

while (true)? 하지만 이건 그냥 반복 (참 참 참 참 참) 이고,

 

서버는 요청 기다림
↓
요청 왔나?
↓
없음
↓
계속 기다림
↓
요청 왔나?
↓
없음
↓
계속 기다림

으로 서버는 대기하며 무한 반복과 비슷한 일을 하고 있지만 while true랑은 조금 다르다.

대신 이벤트가 올 때 까지 기다리는 구조 (Event Loop)를 사용한다

 

 

그럼 브라우저가 http://localhost:3000로 접속 한다면, 브라우저는 서버에게 뭐라고 요청할까?

난 HTML을 요청한다고 생각했음.. 홈페이지를 보여주는 느낌이라고 생각했음

 

하지만 브라우저는 서버안에 뭐가 있는지 모르니(HTML,JSON,이미지 ...) 아직 뭘 줄지 모르는 상태이니 

브라우저는 /(메인 페이지)를 요청한다 

이 것을 HTTP Request라고 함

즉, 브라우저가 서버에게 보내는 것은 HTTP Request

그럼 서버는 메인 페이지를 요청 받았다고 판단하고 응답(Response)으로 HTML을 보낼수도 있고, JSON을 보낼수도 있고.. 등

그냥 HTTP Response를 한다 

HTTP Request / Response 안에 뭐 (메인페이지 주세요 ~ / ㅇㅋ HTML+CSS+이미지 등등 줄게) 이런 느낌

 

그럼 이제 직접 HTTP 서버를 만들어 보도록 해보자

app = 우리가 만드는 애플리케이션의 시작점(Entry Point)라고 해서 app.js를 사용하여 파일을 만들어 본다

 

 

면접 질문 / 지식정리

⭐ Q1. Node.js란 무엇인가요?

Node.js는 Chrome의 V8 JavaScript 엔진 기반의 JavaScript Runtime입니다.

원래 JavaScript는 브라우저에서만 실행되었지만, Node.js를 통해 브라우저 밖에서도 JavaScript를 실행할 수 있게 되었습니다.

이를 이용해 웹 서버나 CLI 프로그램 등을 개발할 수 있습니다.

⭐ Q2. JavaScript와 Node.js의 차이는 무엇인가요?

JavaScript는 프로그래밍 언어이고, Node.js는 JavaScript 코드를 실행하는 Runtime입니다.

⭐ Q3. 왜 node app.js라고 실행하나요?

app.js는 JavaScript 코드가 저장된 파일입니다.

컴퓨터는 JavaScript 코드를 바로 이해하지 못하기 때문에 Node.js Runtime이 JavaScript 코드를 읽고 실행합니다.

Python에서 python hello.py를 실행하는 것과 같은 원리입니다.

⭐ Q4. 서버(Server)란 무엇인가요?

서버는 클라이언트의 요청(Request)을 받아 처리하고 응답(Response)을 반환하는 프로그램 또는 시스템입니다.

 

⭐ Q5. 클라이언트(Client)란 무엇인가요?

클라이언트는 서버에게 요청(Request)을 보내는 주체입니다.

브라우저뿐 아니라 모바일 앱, Postman, 다른 서버도 클라이언트가 될 수 있습니다.

⭐ Q6. 서버도 클라이언트가 될 수 있나요?

가능합니다.

예를 들어 서버 A가 서버 B에게 HTTP 요청을 보낸다면,

A는 사용자에게는 서버 역할을 하지만 B에게는 클라이언트 역할을 수행합니다.

따라서 클라이언트와 서버는 고정된 개념이 아니라 역할(Role)입니다.

⭐ Q7. 브라우저에서 google.com을 입력하면 어떤 과정이 일어나나요?

1. 브라우저에 google.com 입력
2. DNS 서버에서 IP 조회
3. Google 서버로 HTTPS 요청
4. 서버가 HTML 등을 응답
5. 브라우저가 화면 렌더링

⭐ Q8. HTTP와 HTTPS의 차이는 무엇인가요?

HTTPS는 HTTP에 TLS(SSL) 암호화를 적용한 프로토콜입니다.

중간에서 패킷을 가로채더라도 내용을 쉽게 확인할 수 없도록 보호합니다.

 

⭐ Q9. 서버는 왜 계속 실행되어야 하나요?

클라이언트가 언제 요청을 보낼지 알 수 없기 때문입니다.

서버는 요청을 처리하기 위해 항상 실행되면서 대기해야 합니다.

만약 서버가 종료되어 있다면 요청을 처리할 수 없습니다.

⭐ Q10. console.log("Hello")만 있는 프로그램은 웹 서버인가요?

아닙니다.

단순히 JavaScript 코드를 실행하고 종료하는 프로그램입니다.

웹 서버가 되려면 HTTP 요청을 받고 응답할 수 있도록 포트를 열고 요청을 기다리는 기능이 필요합니다.

 

 

⭐ Q8. require()는 무엇인가요?

 

require()는 Node.js의 기능(모듈)을 가져오는 함수입니다.

필요한 기능만 가져와 사용할 수 있도록 해줍니다.
ex) python의 import os 

⭐ Q9. const http = require("http");는 무슨 의미인가요?

Node.js에 내장된 HTTP 기능을 가져와 http라는 변수에 저장하는 코드입니다.

이후 이 기능을 이용하여 HTTP 서버를 만들 수 있습니다.

⭐ Q10. 왜 http 모듈을 가져오나요?

브라우저와 HTTP 프로토콜로 통신하기 위해서입니다.

HTTP 기능을 사용해야 브라우저의 요청(Request)을 받고 응답(Response)을 보낼 수 있습니다.

⭐ Q11. require("http")만 하면 웹 서버가 만들어지나요?

아닙니다.

require("http")는 HTTP 기능만 가져오는 것입니다.

실제 웹 서버는 그 기능을 이용하여 별도로 생성해야 합니다.

⭐ Q13. HTTP 기능을 가져온 다음에는 무엇을 해야 하나요?

1. HTTP 기능 가져오기
↓
2. 웹 서버 생성
↓
3. 포트 열기
↓
4. 요청 대기
↓
5. 요청이 오면 응답