Section2 Unit10 [Web Server] 기초 - StatesAirline Server

---

Section2 Unit10 [Web Server] 기초 - StatesAirline Server

 

⭐️ 과제.  StatesAirline Server

✔️ Bare Minimum Requirement

 ✅ statesairline/controller/flightController.js와 statesairline/controller/bookController.js 에 코드를 작성하세요.

 ✅ Express 공식문서에서 req.query , req.params를 사용하는 방법을 확인하세요. Query와 Params를 기준으로 데이터를 필터링하는 코드를 작성해야 합니다.

 ✅ 예약 데이터는 controller/bookController.js 안에 작성된 let booking = []; 배열에 저장해야 합니다.

 ✅ Flight API -> 항공편 수정은 Advanced Challenges입니다.

 

구현과정 & 코드

 API 문서를 보며 Bare Minimum과 Advanced Challenges 모두 구현 완료했다.

 Node.js와 Express를 공부하며 정신이 하나도 없어서 블로그에 다른 내용은 정리를 못했었지만, 이번에 과제를 통해 req.body, req.params, req.query 공부하며 정리해보았다. 

 서버 쪽은 공부해볼 생각조차 못했었는데, 이번 유닛을 통해 Node.js와 Express를 다뤄볼 수 있어서 다행이라는 생각이 들었다. (프론트엔드 개발자도 서버를 만들줄은 알아야 한다고 한다...😭 할 줄 알면 좋은건 당연히 알겠지만 생각보다 재밌어서 더 공부해보고 싶다는 생각이 들었다. )

Express 요청 객체 req.body, req.params, req.query 사용 예제

 

과제에서 메인으로 다뤄야 할 코드는 flightController.js 와 bookController.js 이다.

하지만 이번 과제에서는 관심사분리가 된 폴더구조와 나머지 파일들도 눈여겨 보면 좋을 것 같아서 나머지 코드도 함께 살펴보았었다.

 

⭕ 과제 제출 후 레퍼런스 코드를 보고 공부를 하며 비교해보고, 일부 작업을 추가했다.

 1. 각 함수마다 필요할 시 유효성 검사를 하여 전달받은 값이 유효한 값인지 확인하는 작업을 추가하였고

 2. 요청 후 응답시 상태코드 또한 적절한 값으로 전달해 주었다.

유효성 검사로 더 명확한 검사를 실행하여 다양한 케이스를 구분할 수 있었고, 성공한 요청 뿐만 아니라 유효하지 않은 요청에 대한 상태코드 또한 전달할 수 있었다.

 

아래는 flightController.js 와 bookController.js의 내가 작성했던 코드와 레퍼런스 코드를 비교하여 다시 정리한 코드 😊

 

 

 👩🏻‍💻 flightController.js 

const flights = require('../repository/flightList');

module.exports = {
  // [GET] /flight
  findAll: (req, res) => {
    const { departure_times, arrival_times, destination, departure } = req.query;

    /** 유효한 Airport Code인지 확인
     * /^[A-Z]{3}$/ 세 개의 연속된 대문자 알파벳
     * .test() 정규 표현식 패턴에 대한 문자열 매칭 테스트를 수행하는 JS 메서드 (true 또는 false 반환)
     */
    const isValidAirportCode = (code) => {
      return typeof code === 'string' && code.length === 3 && /^[A-Z]{3}$/.test(code)
    }

    /** 유효한 날짜인지 확인
     *  date.toString() === 'Invalid Date' : Date 객체 유효성 검사 (유효하지 않은 날짜일 경우 Invalid Date 문자열을 반환한다.)
     * date.toISOString() !== timestamp : 유효한 날짜/시간 값인지 검사
     */
    const isValidDate = (timestamp) => {
      if (!timestamp) {
        return false;
      }
      
      const date = new Date(timestamp);

      return date.toString() === 'Invalid Date' || date.toISOString() !== timestamp;
    }

    /** TODO
     * 요청 된 파라미터 departure_times, arrival_times, departure, destination 값과 동일한 값을 가진 항공편 데이터 조회
     */

    // 요청된 쿼리가 없을 경우 전체 항공편 출력
    if (Object.keys(req.query).length === 0) return res.json(flights); 

    // departure_times, arrival_times
    // Ex. http://localhost:3001/flight?departure_times=2021-12-02T12:00:00&arrival_times=2021-12-03T12:00:00
    else if (isValidDate(departure_times) && isValidDate(arrival_times)) {
      console.log("test")
      const filteredData = flights.filter (
        (flight) => flight.departure_times === departure_times && flight.arrival_times === arrival_times
      )
      return res.json(filteredData);
    } 

    // departure, destination
    // EX. http://localhost:3001/flight?departure=ICN&destination=CJU
    else if (isValidAirportCode(departure) && isValidAirportCode(destination)) {
      const filteredData = flights.filter (
        (flight) => flight.departure === departure && flight.destination === destination
      )
      return res.json(filteredData);
    }

    // departure만 전달한 경우
    // EX. http://localhost:3001/flight?departure=ICN
    else if (isValidAirportCode(departure)) {
      const filteredData = flights.filter (
        (flight) => flight.departure === departure
      )
      return res.json(filteredData);
    }   

    // 그 외의 경우
    else {
      return res.status(400).json('Incorrect request');
    }
  },

  // [GET] /flight/:uuid
  // TODO: 요청 된 uuid 값과 동일한 uuid 값을 가진 항공편 데이터를 조회합니다.
  // Ex. http://localhost:3001/flight/af6fa55c-da65-47dd-af23-578fdba40bed
  findById: (req, res) => {
    console.log(req.params) // { uuid: 'af6fa55c-da65-47dd-af23-578fdba40bed' }
    const { uuid } = req.params;
    const filteredData = flights.filter((flight) => flight.uuid === uuid);
 
    // 유효하지 않은 uuid의 경우 404
    if (filteredData.length) {
      return res.json(filteredData);
    } else {
      return res.status(404).json('Not Found');
    }
  },

  // Advanced
  // [PUT] /flight/:uuid 요청을 수행합니다.
  // TODO: 요청 된 uuid 값과 동일한 uuid 값을 가진 항공편 데이터를 요쳥 된 Body 데이터로 수정합니다.

  /* 기존 data
    [{
        "uuid": "af6fa55c-da65-47dd-af23-578fdba40bed",
        "departure": "ICN",
        "destination": "CJU",
        "departure_times": "2021-12-02T12:00:00",
        "arrival_times": "2021-12-03T12:00:00"
    }]
  */

  update: (req, res) => {
    const { uuid } = req.params;
    const bodyData = req.body;

    /*
    // -----------------------------------------
    // 1. 내가 작성했던 코드
    const filteredData = flights.filter((flight) => flight.uuid === uuid);

    // Object.assign() bodyData의 속성을 복사해 filteredData[0]에 반영한 후 반환한다.
    const updatedData = Object.assign(filteredData[0], bodyData);
    // -----------------------------------------
    */

    
    // -----------------------------------------
    // 2. 레퍼런스 코드
    // findIndex() 전달받은 함수를 만족하는 배열의 첫번째 요소의 인덱스를 반환. 만족하는 값이 없으면 -1을 반환.
    const updatedIdx = flights.findIndex((flight) => flight.uuid === uuid);
    if (updatedIdx === -1) {
      return res.status(404).json('Not Found')
    }
    const updatedData = { ...flights[updatedIdx], ...bodyData }
    console.log(updatedData)

    // splice() 인덱스 updatedIdx 부터, 1개의 요소를 제거하고, updatedData 삽입
    // 즉, 기존 데이터를 제거하고, 새로운 데이터인 updatedData 삽입
    flights.splice(updatedIdx, 1, updatedData)
    // -----------------------------------------
    
    res.status(200).json(updatedData)
  }
};

 

 👩🏻‍💻 bookController.js 

// POST /book에서 사용할 uuid입니다.
const { v4: uuid } = require('uuid');
// 항공편 예약 데이터를 저장합니다.
// booking에 더미 데이터 추가 (테스트용)
let booking = [
  {
    "booking_uuid": "1c69bd78-9404-4138-9e01-9b66db9d65ff",
    "flight_uuid": "af6fa55c-da65-47dd-af23-578fdba40bed",
    "name": "하나",
    "phone": "010-1234-5678",
  }
];

module.exports = {
  // [GET] /book 요청을 수행합니다.
  // 전체 예약 데이터를 조회합니다.
  findAll: (req, res) => {
    return res.status(200).json(booking);
  },

  // [GET] /book/:phone 요청을 수행합니다.
  // 요청 된 phone과 동일한 phone 예약 데이터를 조회합니다.
  findByPhone: (req, res) => {
    const { phone } = req.params;
    if (phone) {
      const filteredData = booking.filter (
        (book) => book.phone === phone
      )
      return res.status(200).json(filteredData)
    }
  },

  // [GET] /book/:phone/:flight_uuid 요청을 수행합니다.
  // TODO: 요청 된 id, phone과 동일한 uuid, phone 예약 데이터를 조회합니다.
  findByPhoneAndFlightId: (req,res) => {
    const { phone, flight_uuid } = req.params;

    const filteredData = booking.filter (
      (book) => book.phone === phone && book.flight_uuid === flight_uuid
    )
    return res.status(200).json(filteredData)
    
  },
  
  // [POST] /book 요청을 수행합니다.
  // TODO: 요청 된 예약 데이터를 저장합니다.
  create: (req, res) => {
    // POST /book에서 사용할 booking_uuid입니다.
    const booking_uuid = uuid();
    
    /*
    // -----------------------------------------
    // 1. 내가 작성했던 코드
    req.body.booking_uuid = booking_uuid;
    booking.push(req.body);
    return res.status(201).json(booking)
    // -----------------------------------------
    */

    // -----------------------------------------
    // 2. 레퍼런스 코드
    const { flight_uuid, name, phone } = req.body;
    
    if (booking.find ((book) => book.phone === phone && book.flight_uuid === flight_uuid)) {
      return res.status(409).json("It's already booked"); // 409 Conflict (충돌)
    } else {
      const newBooking = { booking_uuid, flight_uuid, name, phone }
      booking.unshift(newBooking); // 가장 앞쪽으로 정렬
      // res.location은 HTTP 응답의 Location 헤더를 설정하는 메서드로 클라이언트에게 리다이렉션을 지시하기 위해 사용
      res.location(`/book/${booking_uuid}`); 
      return res.status(201).json(booking[0])
    }
    // -----------------------------------------
  },

  // Optional
  // [DELETE] /book/:booking_uuid 요청을 수행합니다.
  // TODO: 요청 된 id 값과 동일한 예약 데이터를 삭제합니다.
  deleteByBookingId: (req, res) => {
    const { booking_uuid } = req.params;

    booking = booking.filter((book) => book.booking_uuid !== booking_uuid);
    return res.status(204).json("No Content") 
    // 204 No Content
    // 204 상태코드는 요청이 성공했으나, 컨텐츠를 제공하지 않는다. (HTTP Response body가 존재하지 않음)
    // → 그렇기 때문에 "No Content"는 출력되지 않는다.
  }
};

 

 💬

 레퍼런스 코드를 보며 기존에 알고있던 내용을 확실히하고, 활용하는 방법과 더 나은 코드 작성법(적절한 status를 보내주는 것)을 배울 수 있었고,

 몰랐던 부분(res.location이나, 특히 204로 status를 보내면 본문을 제공하지 않는다는 놀라운 점도...)들도 배울 수 있었다. 

---

🌙  오늘의 회고

 API 문서를 보며 StatesAirline도 서버 구현을 했다. node.js와 express를 잠깐 학습한 후에 하는 작업인데다가 밑그림은 코드스테이츠 기존 코드에 이미 다 작성이 되어 있어서 이번 과제는 그나마 좀 수월했던 것 같다. 이번 유닛동안 페어 활동을 하며 내가 명확히 알지 못하고 작성했던 코드들과 이론, 개념들이 정말 많다는 것도 깨닫고, 페어에게서도 많은 걸 배웠다. 좀 더 확실하게 알고 넘어가야 할 부분들을 다시 생각해봐야 겠다는 생각이 들었다.

 정규 수업이 끝나고 스터디 주제(? 정확이 무엇을 위한 건지는 잘 모르겠지만)였던 movie app server 만들기 과제도 완료하고, 강의를 들었다. 과제 자체에서 구현을 요구한 코드는 이미 오늘 했던 StatesAirline에 나왔던 코드와 비슷한 유형이라 어렵지는 않았는데, 그 후에 관심사분리를 위해 하나의 파일에 작성되어 있던 코드를 routes, controller 폴더에 각각 나누어 분리시켜준 부분이 흥미로웠다.   StatesAirline에서는 제공받은 코드가 이미 관심사분리가 되어있었기 때문에 생각할 기회가 없었는데, 이번 과제로 관심사분리를 위해 작성된 코드를 일부 수정하고, 옮기는 작업을 해 본 것이 재미있었다는 생각을 했다. 😊 4주차 실습까지 끝나면 블로그에도 정리 한 번 해보면 좋을 것 같다.