[Node.js] Node.js 기초 2

Express

• Node.js 환경에서 가장 널리 사용되는 웹 애플리케이션 프레임워크로, 서버를 쉽고 빠르게 구축할 수 있도록 다양한 기능을 제공한다.
• 기본적인 HTTP 모듈보다 훨씬 간단하게 라우팅 처리, 요청/응답 객체 관리, 미들웨어 설정, 정적 파일 제공, 템플릿 엔진 연결 등을 할 수 있어 개발 생산성을 크게 높여준다.

라우팅

클라이언트가 어떤 URL과 HTTP 메서드(GET, POST)로 요청을 보냈을 때 그 요청을 어떤 코드가 처리할지 연결해주는 규칙이다.

미들웨어

• 요청(request)과 응답(response) 사이에서 중간에 실행되는 함수로, 클라이언트의 요청을 직접 처리하기보다는 가공 / 검사 / 추가 작업을 담당하는 역할을 한다.
• 요청 로그를 남기거나, JSON 데이터를 파싱하거나, 로그인 여부를 검사하거나, 에러를 처리하는 기능들이 모두 미들웨어의 기능이다.

정적 파일

• 서버에서 별도의 처리 없이 그대로 클라이언트에게 전달되는 파일을 말한다.
• 대표적으로 HTML, CSS, JavaScript, 이미지, 폰트 파일 등이 있으며, 사용자의 요청이 들어오면 서버는 내용을 가공하지 않고 저장된 그대로 응답한다.

EJS

• EJS (Embedded JavaScript)는 HTML 안에 JavaScript 코드를 삽입해 서버 데이터를 동적으로 렌더링 할 수 있게 해주는 node.js용 템플릿 엔진이다.
• <%= %>, <% %> 안에서 로직을 작성하여 사용한다.

템플릿 엔진

• HTML과 데이터를 결합해 동적인 화면을 만들어주는 도구.
• 서버에서 전달한 값을 HTML안에 삽입해서 최종 페이지를 생성하며, 반복문 / 조건문 같은 로직도 템플릿 내부에서 처리할 수 있다.

const express = require("express")
const path = require("path")
const app = express()
const port = 3000

// 미들웨어 등록
// app.use(express.static('public')) // root에서 접근
app.use("/static", express.static('public')) // http://127.0.0.1:3000/static/spring.png
app.use(express.urlencoded({ extended: true }))

// EJS 설정
app.set("view engine", "ejs")
app.set("views", path.join(__dirname, "view"))

app.get("/", (req, res) => {
    res.send("Hello Express!")
})

app.get("/hello", (req, res) => {
    res.render("hello", { name: "김사과" })
})

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

app.post("/submit", (req, res) => {
    const { name, age } = req.body
    console.log("name: ", name)
    console.log("age: ", age)
    res.send("post로 호출!")
})

app.listen(port, () => {
    console.log("서버 실행중...")
})

Express에서 JSON 데이터를 처리하는 흐름

클라이언트(요청) → Express 서버 → JSON 파싱 → req.body로 접근 → 로직 처리 → JSON 응답

1. 미들웨어 등록
    app.use(express.json())

{
    "name": "김사과",
    "age": 20    
}

2. post로 json 데이터 받기
    app.post("/user", (req, res) => {
        const { name, age } = req.body
    })

3. json 응답 보내는 방법
    res.json({ success: true })

    { "success": true }
    > 자동으로 Content-Type: application/json 설정
    > 자바스크립트 객체를 보내면 자동으로 JSON 변환이 됨

4. 유효성 검사
    app.post("/user", (req, res) => {
        const { name, age } = req.body
        if(!name || !age) {
            return res.status(400).json({
                error: "name 또는 age는 필수"
            })
        }
    })

API  주소(URL) 구성 원칙

• API 주소는 단순한 경로가 아니라 리소스를 표현하는 구조적인 설계 요소
• RESTful 설계 원칙에 따라 구성하는 것이 가장 일반적

RESTful (Representational State Transfer)

url 과 http 메서드를 이용해 자원을 직관적이고 일관성 있게 설계하는 웹 API방식

const express = require("express")
const app = express()

app.use(express.json())

// POST: 생성
app.post("/user", (req, res) => {
    const { name, age } = req.body
    if(!name || !age){
        return res.status(400).json({ error: "필수값 누락"})
    }
    res.status(201).json({
        message: "등록 완료",
        data: {name, age}
    })
})

// GET: 조회
app.get("/user/:id", (req, res) => {
    res.json({ id: req.params.id, message: "사용자 조회" })
})

// PUT: 전체 수정
app.put("/user/:id", (req, res) => {
    const { name, age } = req.body
    if(!name || !age){
        return res.status(400).json({ error: "필수값 누락"})
    }
    res.json({ message: "전체 수정 완료", id: req.params.id, data: { name, age}})
})

// PATCH: 부분 수정
app.patch("/user/:id", (req, res) => {
    const updates = req.body
    if(Object.keys(updates).length === 0) {
        return res.status(400).json({ error: "수정할 데이터가 없습니다" })
    }
    res.json({ message: "부분 수정 완료", id: req.params.id, updateData: updates })
})

// DELETE: 삭제
app.delete("/user/:id", (req, res) => {
    res.json({ message: "삭제 완료", id: req.params.id })
})

app.listen(3000, () => {
    console.log("서버 실행 중...")
})

모듈

자바스크립트 모듈은 코드의 재사용성과 유지보수성을 높이기 위해 기능을 개별 파일로 분리하여 사용할 수 있도록 해주는 구조이다.

CommonJS 방식의 모듈

// counter.js
let count = 0  // 외부에서 직접 접근 불가
function increase() {
    count++
}
function getCount() {
    return count
}

module.exports.getCount = getCount  // 외부에서 사용 가능
module.exports.increase = increase  // 외부에서 사용 가능

// main.js
const counter = require("./counter") // counter.js 파일을 불러옴
counter.increase()
console.log(counter.getCount())

ES6 방식의 모듈

// counter.mjs
export function increase() {
    count++
}
export function getCount() {
    return count
}

// main.mjs
import { increase, getCount } from "./counter.mjs"

increase()
console.log(getCount())

라우트

웹 애플리케이션에서 클라이언트가 요청한 URL 경로와 HTTP 메서드에 따라 서버가 어떤 동작을 수행할지를 정의하는 규칙이다.

app.route("/경로")
    .get((req, res) => {
        // get 요청 처리    
    })
    .post((req, res) => {
        // post 요청 처리    
    })
    .put((req, res) => {
        // put 요청 처리    
    })

status

서버가 요청 결과를 어떤 상태로 처리했는지 알려주는 번호

1xx: 요청 처리 중 (거의 사용 안함)
2xx: 성공
    200: 요청 성공
    201: 데이터 생성 성공
3xx: 다른 주소로 이동
    301: 주소 변경
    302: 임시로 변경
4xx: 사용자 요청에 문제가 있음
    401: 로그인 필요
    403: 접근 금지
    404: 페이지 없음
5xx: 서버 문제
    500: 서버 오류