[4주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 16

유튜버를 활용한 전체조회 실습

 

//express 모듈 셋팅
const express = require('express')
const app = express()
app.listen(1234)

//데이터 셋팅
let youtuber1 = {
    channelTitle : "십오야",
    sub : "746만명",
    vidoeNum : "2.1천개"
}

let youtuber2 = {
    channelTitle : "이다",
    sub : "50만명",
    vidoeNum : "1만개"
}

let youtuber3 = {
    channelTitle : "침착맨",
    sub : "5000만명",
    vidoeNum : "100만개"
}

let db = new Map() // key - value = json
var id = 1

db.set(id++, youtuber1)
db.set(id++, youtuber2)
db.set(id++, youtuber3)


//Rest API 설계
app.get('/youtubers', function (req, res){
    var youtubers = {}
    db.forEach(function(value, key){
        youtubers[key] = value
    })

    res.json(youtubers)
})


app.get('/youtuber/:id', function (req, res){
    let {id} = req.params
    id = parseInt(id)

    const youtuber = db.get(id)
    if( youtuber == undefined ){
        res.json({
            message : "유튜버 정보를 찾을 수 없습니다."
        })
    } else {
        res.json(youtuber)
    }
})


app.use(express.json()) // http 외 모듈인 '미들웨어':json 설정
app.post('/youtubers', (req, res) => {
    console.log(req.body)


    //등록..? Map(db)에 저장(put) 해야한다.
    db.set(id++, req.body)

    res.json({
        message : db.get(id-1).channelTitle + "님, 유튜버 생활을 응원합니다."
    })
})

• GET : 데이터를 가져올 때 사용하는 HTTP 메서드
• res.json() : JSON 형식으로 응답을 보내는 함수

 조회 요청은 데이터를 변경하지 않는 것이 원칙이다.

 자바스크립트 forEach

배열 안의 데이터를 하나씩 순회할 때 사용하는 메서드이다.

특징

 

• forEach는 반환값(return)을 무시한다
• 콜백 안에서 return 해도
  👉 어디에도 모이지 않음

 

• 반환값이 없다 (undefined)
• 단순 반복 작업에 적합하다

즉 내부적으로는 이런 느낌

for (let i = 0; i < arr.length; i++) {
  a = arr[i]
  a * 2   // 계산은 되지만 저장 안 함
}

그래서 결과는:

console.log(forEachArr) // 👉 undefined
console.log(arr)        // 👉 [1,2,3,4,5] (변화 없음)

forEach의 목적

 

“각 요소에 대해 무언가를 ‘실행’만 한다”

 

예:

• 콘솔 출력
• DB 저장
• 값 수정
• 로그 남기기

 자바스크립트 map

map의 핵심 역할

const mapArr = arr.map(function(a, b, c){
  return a * 2
})

• 콜백의 return 값을
• 새 배열에 차곡차곡 담아준다

내부 동작 느낌:

let newArr = []

for (let i = 0; i < arr.length; i++) {
  newArr.push(arr[i] * 2)
}

결과:

console.log(mapArr) // [2, 4, 6, 8, 10]
console.log(arr)    // [1, 2, 3, 4, 5] (원본 유지)

map의 목적

 

“배열을 변환해서 새로운 배열을 만든다”

특징

• 새로운 배열을 반환한다
• 원본 배열을 변경하지 않는다

forEach vs map

forEach와 map의 역할이 근본적으로 다르다

return 값	무시됨	새 배열로 수집
반환	undefined	새로운 배열
주 용도	실행 / 처리	변환
원본 배열	그대로	그대로

 자바스크립트 delete

객체의 특정 속성을 삭제할 때 사용하는 키워드이다.

delete 실행

실재로 없어진것을 확인

 예외 처리

서버는 오류가 발생해도 멈추면 안 된다.
그래서 예외 처리가 매우 중요하다.

 

 에러가 발생해도 서버가 종료되지 않도록 보호하는 역할을 한다.

 리팩토링 (수정 후 기능 추가)

리팩토링이란: 기능은 그대로 두고, 코드를 더 읽기 좋고 유지보수하기 쉽게 정리하는 작업

예시

• 중복 코드 함수로 분리
• 변수명 명확하게 수정
• 로직 정리 후 기능 추가

코드가 동작은 하는데 지저분할 때 리팩토링을 한다.

 데이터가 없을 때 메시지 보내기

조회했는데 데이터가 없는 경우도 반드시 처리해야 한다.

 PUT 메서드 (데이터 수정)

유튜버 실습 내역

PUT은 기존 데이터를 수정할 때 사용한다.

 

app.put('/users/:id', (req, res) => { // 특정 id 데이터 수정 })

• 특정 리소스를 전체 수정하는 개념
• 설계에 따라 없으면 생성하기도 한다

 HTTP Status Code

HTTP 상태 코드

 

HTTP(인터넷 상에서 통신할때 사용하는 규약) 안에 작성되어서 들어가는 “상태”

• 조회/수정/삭제 성공 : 200
• 등록 성공 : 201
• 찾는 페이지 없음 (url에 맞는 api 없음) : 404
• 서버가 죽었을 때 (서버가 크리티컬한 오류를 맞았을 때) : 500

서버와 클라이언트가 상태를 주고받는 공통 언어이다.

코드의미

200	요청 성공
201	데이터 생성 성공
400	잘못된 요청
404	데이터 없음
500	서버 오류

 상황에 맞는 상태 코드를 사용하는 것이 좋은 백엔드 개발자의 기본기이다.

 정리

Node.js 백엔드를 공부하면서 느낀 핵심은 다음과 같다.

자바스크립트 문법 + HTTP 요청 흐름 + 예외 처리 = 백엔드 기본기

이 기본기를 이해하면
Express 구조, DB 연동, 실제 서비스 API 설계까지 자연스럽게 이어진다.