개발자가 되고 싶었던 주니어 hobby 개발자 입니다.

2 분 소요

project

오늘 한 일(회고)

  • 프로젝트 생각 정리

생각정리 1

project

  1. 승인 버튼 만들기
  2. 승인 column을 클릭하면 select할 수 있게 만들고 버튼 클릭시 제출
  3. reserevationId를 hide로 숨겨두었다가 사용하기

오늘의 에러1

function reservationList() {
  $.ajax({
    type: 'GET',
    url: '/api/hospitals/reservation',
    dataType: 'json',
    success: function (response) {
      let reservations = extractReservations(response['reservationdata']);
      for (let i = 0; i < reservations.length; i++) {
        let reservation = reservations[i];

        let temp_html = `<tbody>
          <tr>
            <th scope="row">${i + 1}</th>
            <td>${reservation.doctorName}</td>
            <td>${reservation.name}</td>
            <td>${reservation.idNumber}</td> 
            <td>${reservation.phone}</td>                              
            <td>${reservation.contents}</td>
            <td>${reservation.date}</td>
            <td>${reservation.status}</td>          
            <td><button class="btn btn-primary" id="approveButton-${reservation.id}" data-reservation-id="${reservation.id}" data-waiting="false">승인</button></td>                                               
          </tr>
        </tbody>`;
        $('#reservationList').append(temp_html);
      }

        // 승인 버튼 클릭 이벤트
            $(document).on('click', 'button[id^="approveButton-"]', function() {
                let id = $(this).data('reservation-id');
                let waiting = $(this).data('waiting');
                $.ajax({
                type: 'PATCH',
                url: `/api/hospitals/reservation/status/${id}`,
                dataType: 'json',
                data: { 
                    status: 'waiting'
                },
                success: function(response) {
                // 서버로부터 응답이 왔을 때 실행할 코드를 작성합니다.
                },
                error: function(xhr, status, error) {
                // 에러가 발생했을 때 실행할 코드를 작성합니다.
                }
            });
        });
    },
  });
}

일단 일차적으로 이런식으로 코드를 짰다. 일단 누르기만 하며 waiting으로 해당 url reservationId로 data를 서버로 보낸다.

이때 한 가지 간단한 에러가 발생했는데 아무리 해도 404에러가 발생하는 것이다. 문제가 무엇이었냐면 바로 type 문제였다. 원래 처음 짯을 때는 POST로 짯는데 자세히 서버쪽을 보니 PATCH 였었다. ㅋㅋㅋ

그래서 갑자기 PATH 랑 POST가 궁금해져서 검색했다.


간단요약 하면
POST : 클라이언트에서 서버로 데이터를 보내기 위한 메소드 이고, 새로운 리소스를 생성하거나 수정하기 위해 사용된다.

PATCH : 기존의 리소스를 수정하기 위해 사용되는 메소드이고, 일부 속성만 변경하기 위해 사용된다. 즉 기존의 리소스를 수정하기 위해서는 PUT이나 PATCH를 사용하게 된다.

일단 나는 status만 변경하기 때문에 그 당시 서버 api 설계시 PATCH로 했었다. 그걸 까먹고 POST로 해서 에러가 났었다…ㅎ;;

생각정리 2

project
이번에는 tag 만들기를 하려고 한다.
doctor 의사 생성시 해당 의사에 맞는 카테고리를 만들려고 한다. 즉 이 의사가 내과의사인지? 외과의사인지? 그런 분야를 설정한다고 생각하면 될 듯 하다.

  1. 의사 등록하기에 name, contetns, image가 들어가고 그리고 태그로 부서 즉 외과,내과, 비뇨기과, 자신의 전공을 넣어야함.

  2. 이때 한 의사에 여러가지 전공이 들어갈 수 있다는게 핵심!!!

  3. client 클라이언트로 부터 name, contents, image, categories(외과,내과,비뇨 등등)을 서버로 전송받는다.

  4. 컨트롤러에서 그대로 받고, 서비스로 넘겨준다.

  5. 서비스에서는 일단 userId를 통해 병원을 찾는다.

  6. 왜냐? 해당 병원의 의사소속으로 넣어야 하기 때문에 병원 data로부터 hospitalId를 받는다

  7. 그럼 레포지토리로 hospitalId, name, image, contents를 넘겨주게 된다. 그러면 레포지토리는 db에서 생성하는 명령을 내릴 것이다.

  8. 그리고 db 등록 후 categories => 레포지토리로 보내서 만약 해당 카테고리가 있으면 그거 쓰고 없으면 생성하게 만들기.

  9. 그래서 다시 서비스로 돌아와서 mapping을 한다. 카테고리 id와 의사 id를 맵핑해서 doctors_categories_table에 등록하기.

  10. 리턴하자.

project

이렇게 프론트 카테고리까지 구현 완성!!!

오늘 mapping을 하면서 알게 된 사실들 bulkCreate => sequelize에서 사용되는 함수를 하나 알게 되었다.

배열의 데이터를 한 번에 삽입하는 메소드이다.

const users = [
  { username: 'user1', email: 'user1@example.com' },
  { username: 'user2', email: 'user2@example.com' },
  { username: 'user3', email: 'user3@example.com' }
];

User.bulkCreate(users)
  .then(() => console.log('Users inserted successfully'))
  .catch((error) => console.error(error));

이런 식으로 한번에 여러가지 데이터를 삽입가능하다..

생각정리3

bulkcreate을 이번에 쓰면서 생각했는데 workingTimes table에 data를 넣을 때 좋지 않을까 생각하게 되었다.

  1. 컨트롤러에서 여러 데이터를 받는다. 예시 ```javascript { “doctorId”:1, “dayOFTheWeek”:1, “startTime”:”10:00”, “endTime”:”18:00”, “startDate”:”2023-03-01”, “endDate”:”2023-03-31” }, { “doctorId”:2, “dayOFTheWeek”:1, “startTime”:”10:00”, “endTime”:”18:00”, “startDate”:”2023-03-01”, “endDate”:”2023-03-31”

},

{ “doctorId”:3, “dayOFTheWeek”:1, “startTime”:”10:00”, “endTime”:”18:00”, “startDate”:”2023-03-01”, “endDate”:”2023-03-31” }

``` 이 때 startDate,endDate는 고정!!

  1. 서비스에서 workingtimes으로 묶어야함.

  2. 레포지토리에 bulkcreate(workingtimes)으로 한번에 데이터 입력하기

내일 할일

  • 프로젝트 이어서 하기

참고자료

참고