종원

Hello world (3) Express를 사용해보고, 간단한 원리를 파악해보자 본문

카테고리 없음

Hello world (3) Express를 사용해보고, 간단한 원리를 파악해보자

곰종 2026. 6. 22. 16:28

목표

우리가 직접 만든 Node.js 서버를 Express를 사용하여 리팩토링 해보기

Express로 리팩토링(더 좋은 구조로 개선) 하는 것.

1. Express 설치

 
npm install express
 

배운 점

  • node_modules는 실제 라이브러리 코드가 저장되는 폴더
  • package.json은 프로젝트에서 사용하는 패키지 정보를 저장
  • package-lock.json은 정확한 버전을 고정하여 모두가 같은 환경을 사용하도록 함
  • node_modules는 Git에 올리지 않고, package.json과 package-lock.json만 올리면 된다.

2. Express 시작

 
const express = require("express");

const app = express();
 

배운 점

  • Express는 Node.js 위에서 동작하는 웹 프레임워크이다.
  • express()는 웹 애플리케이션(app) 객체를 생성하여 반환한다.
  • app은 웹 애플리케이션 전체를 관리하는 객체이다.

3. 서버 실행

 
app.listen(3000);
 

배운 점

  • express()만 호출해서는 서버가 실행되지 않는다.
  • app.listen()을 호출해야 특정 포트에서 요청을 기다린다.

4. GET 요청 처리

Node.js

 
if(request.method === "GET" &&
   request.url === "/")
 

↓

Express

 
app.get("/", (req, res) => {

});
 

배운 점

Express가

  • request.method 비교
  • request.url 비교

를 내부적으로 처리해준다.

5. 응답 보내기

Node.js

 
response.end("Hello");
 

↓

Express

 
res.send("Hello");
 

배운 점

Express는

  • Header 설정
  • 응답 종료

등을 내부적으로 처리한다.

6. HTML 화면 출력

 
res.send(`
<h1>Hello Comment</h1>

<form action="/comment" method="POST">
    <input name="comment">
    <button>작성</button>
</form>
`);
 

배운 점

브라우저에게 HTML을 그대로 응답하면 브라우저가 HTML을 해석하여 화면을 그린다.

7. Body Parsing

Node.js

 
request.on("data")

↓

request.on("end")

↓

querystring.parse()
 

↓

Express

 
app.use(express.urlencoded({ extended: true }));
 

↓

 
req.body
 

배운 점

Express가 Body를 읽고 객체로 만들어준다.

8. 댓글 저장

 
comments.push(req.body);
 

저장되는 형태

 
[
    {
        comment: "안녕하세요"
    }
]
 

9. Redirect

Node.js

 
statusCode

↓

Location Header

↓

end()
 

↓

Express

 
res.redirect("/");
 

10. 댓글 조회

 
app.get("/comments", (req, res) => {

    res.send(comments);

});
 

배운 점

Express는 배열을 JSON으로 자동 변환하여 응답한다.

11. HTML 분리

기존

 
res.send(`
...
`);
 

↓

현재

public/index.html
 

↓

 
app.use(express.static("public"));
 

배운 점

HTML을 별도 파일로 분리하여 관리한다.

12. Static 파일

public

index.html

style.css

script.js
 

배운 점

브라우저가

GET /style.css
 

를 보내면

Express는

public/style.css
 

를 찾아 응답한다.

13. fetch()

 
fetch("/comments")
 

배운 점

fetch는 바로 JSON을 반환하는 것이 아니라

Response 객체
 

를 반환한다.

↓

 
response.json()
 

↓

댓글 배열 획득

14. 댓글 출력

 
fetch("/comments")
    .then(response => response.json())
    .then(comments => {

        const commentsDiv =
            document.getElementById("comments");

        comments.forEach(comment => {

            commentsDiv.innerHTML +=
                `<p>${comment.comment}</p>`;

        });

    });
 

배운 점

JSON 데이터를 HTML로 만들어 화면에 출력하였다.

 

⭐ Express가 Node.js 대신 해주는 것

Node.jsExpress
http.createServer() express()
if(request.method === ... ) app.get()
request.on("data") req.body
response.end() res.send()
statusCode + Header + end() res.redirect()
JSON.stringify() res.send(JSON)

⭐ 현재 프로젝트 구조

hello-comment

app.js

package.json

package-lock.json

public
    │
    ├── index.html
    ├── style.css
    └── script.js
 

⭐ 현재 요청 흐름

브라우저

↓

GET /

↓

Express

↓

index.html

↓

브라우저

↓

GET /style.css

↓

GET /script.js

↓

script.js 실행

↓

GET /comments

↓

Express

↓

comments(JSON)

↓

브라우저

↓

댓글 출력
 

⭐ 다음 단계

현재

RAM
↓

const comments = []

↓

다음

PostgreSQL

↓

Docker

↓

EC2

↓

GitHub Actions

↓

Nginx

 

⭐ 41. Express를 사용하는 이유는 무엇인가요?

답변

Express는 Node.js 위에서 동작하는 웹 프레임워크입니다.

Node.js에서 반복적으로 작성해야 하는 라우팅, Body 처리, 응답 처리, Redirect 등의 작업을 대신 수행하여 웹 애플리케이션을 더 쉽고 효율적으로 개발할 수 있도록 도와줍니다.

⭐ 42. express()는 무엇을 반환하나요?

답변

express()는 웹 애플리케이션(app) 객체를 반환합니다.

이 app 객체를 통해 라우팅, 미들웨어 등록, 서버 실행 등 웹 애플리케이션 전체를 관리합니다.

⭐ 43. app.listen()을 호출하지 않으면 어떻게 되나요?

답변

express()로 app 객체만 생성되고 서버는 실행되지 않습니다.

app.listen()을 호출해야 특정 포트에서 HTTP 요청을 기다리게 됩니다.

⭐ 44. Node.js의

 
if(request.method==="GET" &&
request.url==="/")
 

는 Express에서 어떻게 변경되나요?

답변

Express에서는

 
app.get("/", ...)
 

로 변경됩니다.

Express가 내부적으로 request.method와 request.url을 검사하여 해당 요청이 들어오면 등록한 함수를 실행합니다.

⭐ 45. req.body는 어떻게 생성되나요?

답변

Express의 Body Parsing 미들웨어가 요청의 Body를 읽고 파싱하여 req.body 객체를 생성합니다.

⭐ 46. app.use(express.urlencoded())의 역할은 무엇인가요?

답변

Form으로 전송된 데이터를 읽고 객체 형태로 변환하여 req.body를 사용할 수 있도록 만들어주는 미들웨어입니다.

⭐ 47. res.send()와 response.end()의 차이점은 무엇인가요?

답변

Node.js에서는 response.end()를 사용하여 직접 응답을 종료합니다.

Express의 res.send()는 적절한 Header 설정과 응답 종료를 내부적으로 처리하여 더 편리하게 사용할 수 있습니다.

⭐ 48. res.redirect()는 내부적으로 어떤 작업을 대신 수행하나요?

답변

Node.js에서 직접 작성했던

  • statusCode 설정
  • Location Header 설정
  • response.end()

를 하나의 메서드로 처리합니다.

⭐ 49. Express에서 res.send(comments)를 하면 JSON이 되는 이유는 무엇인가요?

답변

Express는 전달받은 데이터의 타입을 확인합니다.

객체나 배열이면 내부적으로 JSON으로 변환하고 적절한 Content-Type을 설정하여 응답합니다.

⭐ 50. 왜 HTML을 app.js에 작성하지 않고 index.html로 분리했나요?

답변

HTML이 길어질수록 서버 코드와 화면 코드가 섞여 유지보수가 어려워집니다.

역할을 분리하기 위해 HTML은 별도의 파일로 관리하고 app.js는 서버 로직만 담당하도록 구성했습니다.

⭐ 51. express.static()의 역할은 무엇인가요?

답변

브라우저가 요청한 정적 파일(HTML, CSS, JavaScript, 이미지 등)을 public 폴더에서 찾아 그대로 응답해주는 미들웨어입니다.

⭐ 52. 브라우저는 style.css를 언제 요청하나요?

답변

브라우저가 HTML을 받은 후 <link> 태그를 해석하면서 필요한 CSS 파일을 발견하면 자동으로 GET 요청을 보냅니다.

⭐ 53. 브라우저가 GET /style.css를 요청하면 Express는 어떻게 처리하나요?

답변

express.static()이 요청을 먼저 확인합니다.

public 폴더에서 style.css를 찾고 존재하면 브라우저에게 그대로 응답합니다.

⭐ 54. fetch()는 무엇을 반환하나요?

답변

fetch는 바로 JSON 데이터를 반환하는 것이 아니라 Response 객체를 반환합니다.

⭐ 55. 왜 response.json()을 호출해야 하나요?

답변

Response 객체 안의 JSON 데이터를 JavaScript 객체로 변환하기 위해 사용합니다.

⭐ 56. 댓글을 화면에 출력하기 위해 JavaScript는 어떤 과정을 거치나요?

답변

  1. fetch("/comments")로 서버에 요청합니다.
  2. response.json()으로 JSON 데이터를 변환합니다.
  3. 댓글 배열을 반복문으로 순회합니다.
  4. HTML을 생성하여 화면에 추가합니다.

⭐ 57. document.getElementById("comments")를 사용하는 이유는 무엇인가요?

답변

댓글을 출력할 HTML 영역을 찾기 위해 사용합니다.

찾은 요소 안에 JavaScript가 댓글을 추가합니다.

⭐ 58. 왜 comments.forEach()를 사용했나요?

답변

댓글 개수가 계속 달라질 수 있기 때문입니다.

배열을 반복하면서 댓글 개수만큼 화면에 출력하기 위해 사용했습니다.

⭐ 59. innerHTML +=를 사용한 이유는 무엇인가요?

답변

댓글을 HTML 형태(<p>댓글</p>)로 만들어 기존 HTML 뒤에 계속 추가하기 위해 사용했습니다.

⭐ 60. 현재 프로젝트에서 댓글은 어디에 저장되며, 서버를 재시작하면 왜 사라지나요?

답변

현재 댓글은

 
const comments = [];
 

배열에 저장됩니다.

이 배열은 RAM(메모리)에 존재하므로 서버를 종료하거나 재시작하면 메모리에서 사라져 저장된 댓글도 모두 없어집니다.