프로그래머스 데브코스 18일차 with. TS 웹 풀스택

눌지 2024. 5. 1. 14:52

📚요약

지난 시간에 여러 API를 추가해 봤습니다. 어떤 것이 있나 익숙해지는 과정이었고, 이번 시간에는 핸들러와 조금 더 진화된 예외처리를 해보겠습니다. 그리고 JS에 대해 알아보고 아주 조그만 프로젝트의 기획과 API 설계 및 구현을 해보겠습니다.

📖핸들러(Handler)

요청이 오면 자동으로 호출되어 실행되는 메서드(Method)를 의미합니다. 예를 들면 Spring의 컨트롤러, Node.js에서 콜백함수를 말합니다. 가장 쉬운 예시로 express에서 사용하는 get, post 등의 함수에서 url(path) 뒤에 오는 함수를 의미합니다. 다른 예로는 이벤트 핸들러, 인터럽트 핸들러 - 위키백과를 참고해 보는 것도 도움이 될 것 같습니다.

📖JS

📄Array의 find()

Array에 객체를 저장하는 경우 원하는 객체를 찾을 때 반복문(for문)을 사용하거나 forEach함수를 사용해야 합니다. 하지만 그렇게 사용하면 코드가 길어질 수 있기 때문에 Array의 find() 함수를 이용하면 됩니다.

앞서 원하는 객체라고 했지만 원하는 조건에 대한 요소를 찾을 때 사용한다고 생각하시면 됩니다.

const arr = [{id:1,name:'1'},{id:2,name:'2'},{id:3,name:'3'},{id:4,name:'4'}];
let findThing;

arr.forEach(el=>{
  if(el.id === 1) findThing = el;
});

console.log(findThing); // {id:1,name:'1'}

findThing = arr.find(el=>el.id === 1);

console.log(findThing); // {id:1,name:'1'}

📄== vs ===

JS에서는 값을 비교할 수 있는 연산자가 두 가지 있습니다.

== : 값을 비교할 때 자료형을 신경쓰지 않는다.
=== : 값을 비교할 때 자료형까지 신경쓴다.

console.log(1 == '1'); // true
console.log(1 === '1'); // false

두 연산자를 적절히 잘 활용하면 쉽게 코드를 작성할 수 있습니다.

🍯tip! Map의 경우 가지고 있는 데이터가 없어도 undefined가 아닌 Map(0){}으로 나타난다. 데이터가 없는 것을 확인하고 싶은 경우 size로 확인하는 것을 추천한다.

📖예외처리

예외가 발생할만한 부분을 예상해서 상황에 따라 처리하는 것이 예외처리입니다.

Express에서는 조건문(if~else문)을 통해 상황을 나누어서 상황에 따라 다르게 처리할 수 있습니다. 추가적으로 응답할 때 보내는 HTTP Status Code를 개발자가 원하는 대로 조절할 수 있습니다. 이를 잘 활용한다면 예외가 발생했을 때 좀 더 쉽게 처리할 수 있습니다.

간단한 예를 보고 지나가겠습니다.

// POST 책 하나 등록(생성)
app.post("/book", (req, res) => {
  const name = req.body.name;
  // 책의 이름이 필수인 경우 이름이 있는지 확인
  if (name) { // 있다면 '작성됨'을 의미하는 201 코드와 함께 메시지 전송
    const id = db.size + 1;
    db.set(id, req.body);

    res.status(201).json({
      message: `add new book ${db.get(id).name}`,
      ...req.body,
    });
  } else { // 없다면 '잘못된 요청'을 의미하는 400 코드와 함께 메시지 전송
    res.status(400).json({
      message: "plz check your data that you want to add",
    });
  }
});

🍯tip! HTTP Status Code 400의 경우 잘못된 요청에 대해 응답하는 코드이다.

📖초 미니 프로젝트(Library)

📄기획 & API 설계

회원(사서)
- 로그인 : POST, '/login', req: body{id,pw} res: 'success'→main page
- 가입 : POST, '/signup', req: body{id,pw,name} res: 'success' →login page
- 정보 조회 : GET, '/librarians/:id', req: params{id} res: 'success'
- 탈퇴 : DELETE, '/librarians/:id', req: params{id} res: 'success'
책
- 등록
- 수정
- 삭제

📄구현(일부)

코드의 경우 Github에 올라가 있으니 참고해 주시면 될 것 같습니다.

로그인의 경우 우선 단순하게 id를 가지고 회원이 있냐 없냐에 따라 조회되도록 했습니다.

이 외의 추가 사항들은 다음 시간에 계속 추가해 보도록 하겠습니다.

다음 시간에 계속...

출처 & 참고

김송아 강사님의 강의

예외 처리, 위키백과, 2024.05.01