데브코스 웹풀스택 과정/TIL

0923 예외처리, find() 함수, 프로젝트 API 설계

thinktank911 2025. 9. 23. 15:41

핸들러, if(객체) : if 긍정문, route

핸들러

  • 요청에 의해 호출되는 메소드를 뜻함
  • HTTP request가 날아오면 자동으로 호출되는 메소드
  • 노드 : 콜백함수로, app.http메소드(path, 핸들러)
  • cf. 스프링 : 컨트롤러

if 조건은 긍정문이 좋다

  • 클린코드 관점에서 긍정문으로 바꾸는 게 더 가독성 좋음

<변경전>

if(findFruit == undefined){
        // 404 상태코드 : 찾는 리소스 없다.
        res.status(404).json({
            message : "과일 정보를 찾을 수 없습니다."
        })
       
    }else{  // 예외를 터트린다 = http status code 성공 x 실패!
        res.json(findFruit)
    }

 

<변경후>

if(findFruit){
        res.json(findFruit)
    }else{  // 예외를 터트린다 = http status code 성공 x 실패!
        // 404 상태코드 : 찾는 리소스 없다.
        res.status(404).json({
            message : "과일 정보를 찾을 수 없습니다."
        })
    }

 

 

route

  • path 옆 route 객체

- 라우팅 : 클라이언트가 요청한 URI(Uniform Resource Identifier)에 따라 적절한 핸들러 함수를 찾아 응답하는 것
- 라우트 : http 요청을 분류하고 처리하기 위해 사용되는 경로(path)와 HTTP 메서드(method)
- 라우터 : 요청을 처리하는 데 필요한 로직을 구현. 일종의 라우트 그룹이라고도 볼 수 있다.

json array, find(), 예외 처리

JSON Array

  • 이름 그대로 배열 구조이다.
  • res.json 안에 배열 넣어 출력 가능
  • 배열 안에는 문자열, 숫자, 배열, 객체 등을 담을 수 있다.
  • 대괄호('[ ]')를 통해 값을 담고, comma(',')를 통해 값을 구분한다.
  • index를 통해 값을 꺼낼 수 있기 때문에 순서에 대한 고려가 있어야 편하게 사용할 수 있다.

JSON Object

  • 하나 이상 key-value 쌍을 중괄호('{ }')를 통해 담고 있는 객체 구조.
  • key와 value 사이 구분은 colon(':')으로 함.
  • key-value(키-값) 구분은 comma(',')로 함.
  • 순서가 구분되지 않은 집합체.

find()

  • 자바스크립트 배열에서 사용 가능
  • fruits 배열 안에 있는 객체 중, id 값이 param.id랑 같은 객체를 찾겠다.
// let fruit = fruits[id-1]
// fruits.forEach((fruit)=>{
//     if(fruit.id === id){
//         findFruit = fruit;
//         return;
//     }
// })

// find() 함수 : fruits 배열 안에 있는 객체 중, 
// id 값이 param.id랑 같은 객체를 찾겠다.
var findFruit = 
fruits.find((fruit)=>fruit.id === id)

 

예외처리

  • 예외문에서 상태코드 추가
  • http 상태코드는 클라이언트(사용자, 화면)와 소통을 정확하게 하기 위함
// 404 상태코드 : 찾는 리소스 없다.
res.status(404).json({
    message : "과일 정보를 찾을 수 없습니다."
})

 

== vs ===

  • '==' : 자료형 상관 없이, 값만 비교
  • '===' : 자료형과 값 둘 다 상관있음
if(1 == "1"){   // 자료형 상관 없이, 값만 비교
    console.log("같아")
}
else{
    console.log("다름")
}

if(1 === "1"){  // 자료형, 값 둘 다 상관 있음
    console.log("같아")
}
else{
    console.log("다름")
}

 

YouTuber demo 예외 고도화 : map은 undefined가 아니다.

  • map 객체는 안에 데이터가 없어도 undefined 되지 않는다.
  • size를 비교해야 한다.
// 전체 데이터 삭제
app.delete('/youtubers',(req, res) => {

    // 예외처리
    if(db.size >= 1){
        db.clear();     // 전체 db 삭제
        res.json({
            message : "모든 유튜버 정보가 삭제되었습니다."
        })
    }

 

YouTuber demo 예외 고도화 : post

// 데이터 등록
// http 외 모듈인 '미들웨어':json 설정
app.use(express.json())
app.post('/youtubers',(req, res) => {
    const channelTitle = req.body.channelTitle;
    if(channelTitle){
        // 새 유튜버 등록 : Map(db)에 저장
        let newYoutuber =req.body

        // 등록 시 자동 채번
        db.set(id++, newYoutuber)

        // res.send(`${newYoutuber.channelTitle}님, 유튜버 생활을 응원합니다!`)
        res.status(201).json({
            message : `${db.get(id-1).channelTitle}님, 유튜버 생활을 응원합니다!`
        });
    } else{
        res.status(400).json({
            message : "채널명을 입력해주세요."
        })
    }
   
})

예외 처리 시 http 상태 코드를 같이 넘겨 준다.

  • 2xx : 성공
  • 200 : 조회/수정/삭제 성공
  • 201 : 등록 성공
  • 4xx : 클라이언트 잘못
  • 400에러 : 요청한 연산(처리)을 할 때 필요한 데이터(req)가 덜 왔을 때
  • 5xx : 서버 잘못
  • 500에러 : 서버가 죽었을 때 (서버가 크리티컬한 오류를 맞았을 때)

프로젝트 시작

※ 같이 살펴볼 것 : 라우터, 유효성 검사, post 예외, 리팩토링, db 연동(조인)

유튜브 운영

  1. 회원
  • 로그인
  • 회원가입
  • 회원정보조회
  • 회원탈퇴

회원은 계정 1개당 채널 100개를 가질 수 있다.

  1. 채널
  • 채널생성
  • 채널수정
  • 채널삭제

 

화면설계

 

1. 로그인페이지
  1) 화면 완성 API x
  2) 로그인 버튼 클릭
  => (입력란)id, pwd 로그인 시켜줄 API

 

2. 회원가입페이지

  1) 화면 완성 API x
  2) 회원가입 버튼 클릭
  => (입력란)id, pwd, 이름 회원가입 시켜줄 API

 

3. 마이페이지

  1) 화면 완성 => 회원정보 조회 API / (데이터)id, 이름
  2) 회원탈퇴 버튼 클릭
  => 회원탈퇴 시켜줄 API

 

회원 API 설계

1)로그인 POST (body 있음) /login

  • req : body(id, pwd)
  • res : ${name}님 환영합니다. => 메인페이지

2)회원가입 : POST /join

  • req : body(id, pwd, name)
  • res : ${name}님 환영합니다. => 로그인페이지

3)회원정보조회 : GET /users/:id

  • req : URL (id)
  • res : id, name

4)회원 개별 탈퇴 : DELETE /users/:id

  • req : URL (id)
  • res : ${name}님 다음에 또 뵙겠습니다. or 메인페이지

 

회원 API 코드 틀

  • express 서버 셋팅
  • 미들웨어 셋팅
  • db map 셋팅
  • api 라우터 셋팅
// express 모듈 셋팅
const express = require('express')
const app = express()
const port = 7777
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

app.use(express.json()) // http 외 모듈 'json'

let db = new Map();
var id = 1; // 하나의 객체를 유니크하게 구별하기 위함

 

회원가입 구현

- body 받아올 것이므로 express.json() 미들웨어 셋팅 확인

- req.body 즉, JSONObject의 값이 비어 있는지 체크하는 예외처리를 해야 하는데 내용이 없어도 object는 {}형태로 존재하기에 undefined로 체크할 수 없다. Object.keys(userInfo).length 로 길이를 비교해서 처리해야 한다.

- req.body 즉, userInfo가 비어있지 않다면 req.body를 db.set()으로 db map에 저장한다. 이때 키값은 id++로 자동 증가시킨다.

- 생성 시 성공 상태코드인 201로 json을 보내준다.

// 회원가입
app.post('/join',(req,res)=>{
    const userInfo = req.body;
    console.log(userInfo);
   
    if(Object.keys(userInfo).length > 0){
        db.set(id++, userInfo);
       
        res.status(201).json({
            // message : `${userInfo.name}님 환영합니다.`
            message : `${db.get(id-1).name}님 환영합니다.`  // 저장된 db 확인하는 개념
        })
    } else{
        res.status(400).json({
            message : "입력 값을 다시 확인해주세요."
        })
    }
   
})

post 요청 시 회원 등록 api 결과

 

[이슈] 이때 궁금한 점이 생겼다. db map 객체는 db.size == 0 으로 해당 값이 비어있는지를 체크해줬다. 그런데 req.body를 userInfo.size로 비교하려고 할 때 undefined가 뜬다. 같은 객체 형태인데 JSONObject와 맵 객체는 어떻게 달라서 이런 결과가 나오는지 살펴봐야겠다.

 

회원 개별 조회, 회원 개별 삭제

  • 라우팅이란 클라이언트가 요청한 URI에 따라 적절한 핸들러 함수를 찾아 응답하는 것 이고, 라우트는 요청을 분류하고 처리하기 위해 사용되는 경로(path)와 HTTP 메서드(method)이다. 
  • route() 함수는 중복되는 url을 메소드마다 분기처리할 수 있다.

 

// 회원 개별 조회, 개별 탈퇴 라우팅
app.route('/users/:id')
    .get((req,res)=>{
        let {id} = req.params;
        id = parseInt(id)
        let user = db.get(id)

        console.log(user);
        if(user){
            res.status(200).json({
                userId : user.userId,
                name : user.name
            })
        }
        else{
            res.status(404).json({
                message : "존재하지 않는 회원입니다."
            })
        }
    })
    .delete((req,res)=>{
        let {id} = req.params;
        id = parseInt(id)
        let user = db.get(id)

        console.log(user);
        if(user){
            db.delete(id)

            res.status(200).json({
                message : `${user.name}님 다음에 또 뵙겠습니다.`
            })
        }
        else{
            res.status(404).json({
                message : "존재하지 않는 회원입니다."
            })
        }
    })

 

get 요청 시 회원 개별 조회 api 결과
delete 요청 시 회원 개별 삭제 api 결과

res.json을 보낼 때 http 상태 코드를 보내는 방법에 대해 배웠다. 알고는 있었지만 상태 코드를 같이 보내는 이유를 명확히 알지 못했는데 서버가 클라이언트(화면 혹은 사용자)와 정확하게 소통하기 위해 보낸다는 것을 알았다. 이유를 알고 공부하면 기억하기 쉬운 것 같다. 좀 더 명확한 소통을 위해 예외처리 또한 여러 에러 원인에 따른 분기처리를 할 수 있지 않을까 생각을 했다. 

route 개념 또한 단순하게 '경로 설정' 정도로 생각하고 넘어갔는데 라우트, 라우팅, 라우터 개념을 나눠서 한번 정리를 하니 좋았다. 

새로운 궁금증이 생겼는데, Jsonobject와 map 객체의 차이에 대해 살펴보고 싶어졌다. 자료구조에 대한 개념이 많이 부족한 것을 느낀다. 앞으로 찬찬히 공부해야겠다.

'데브코스 웹풀스택 과정 > TIL' 카테고리의 다른 글

0925 라우터를 이용해 회원과 채널 서버 합치기, 유효성 검사  (0) 2025.09.25
0924 로그인 처리 및 고도화, 자바스크립트 Object.keys(), 채널 API 설계구현  (0) 2025.09.24
0922 REST API 설계(전체 조회, 삭제, 수정), foreach문, map 함수, 리팩토링, http status code  (0) 2025.09.22
0919 postman으로 get, post 메서드 테스트  (0) 2025.09.19
0918 Express - 객체 생성해서 전달 / express-generator 사용법  (0) 2025.09.18

'데브코스 웹풀스택 과정/TIL'의 다른글

  • 현재글0923 예외처리, find() 함수, 프로젝트 API 설계

관련글

티스토리툴바