쿼리로 데이터 분류할 때는 where을 쓰지말자 외...

죄송합니다 제목으로 어그로좀 끌어봤습니다.

최종적으로는 where를 쓰는게 맞습니다. 하지만 중간에는 안쓰는게 좋다고 느껴서 이렇게 썼습니다.

위는 일반적인 wehre로 비교한 스크린 샷입니다. 제가 가지고 오고 싶은 데이터들 중 대부분이 가져와지지 않았습니다.

아래는 같은 조건을 where 가 아니라 SELECT에 넣은 것입니다.

가지고 오고 싶었던 40이 왜 안되는지 알 수 있습니다. v.deletedAt이 0 즉, FALSE군요

IS NOT으로 조건을 반대로 바꾸니 1 1 1 이 나옵니다.

WHERE 절에 그대로 적용하니 원하는데로 나오는 모습입니다.

0. 쿼리로 데이터 분류할 때는 where을 쓰지말자
1. console.log() 잘 찍기
2. 비동기 함수 페이지 로딩 시마다 실행하기
3. class와 js 연동하기

공부하며 느낀 점
참조한 사이트

1. console.log() 잘 찍기

console.log('date :',typeof date, date);

사람의 취향마다 다르겠지만, 개인적으로 이렇게 내가 찍으려는 대상 :, 대상의 타입, 대상의 값 순으로 하는것이 보기에 편했다.
typeof를 먼저 하는 이유는 개발 과정에서 객체를 다루는 경우가 많은데 양이 너무 방대하기 때문에, typeof를 뒤에하면 직관적으로 확인하기 힘들기 때문이다.

2. 비동기 함수 페이지 로딩 시마다 실행하기

async function onPageLoad() {
  await getNonReviewedreservationId();
}

document.addEventListener('DOMContentLoaded', onPageLoad);

async function getNonReviewedreservationId() {
  try {
    const response = await fetch(
      `http://localhost:3000/api/petsitters/${petsitterId}/nonReservation`,
      {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: sessionStorage.getItem('Authorization'),
        },
      },
    );

    const result = await response.json();
    const reviews = result.allPost;
    const resultContents = result.allPost
      .map(item => `<option value="${item}">${item}</option>`)
      .join('');
    document.querySelector('#reservationId').innerHTML = resultContents;
    return;
  } catch (error) {
    console.error('불러오기 실패:', error.message);
  }
}

분석하면 아래와 같다.

document.addEventListener('DOMContentLoaded', onPageLoad);

DOM이 로드 되면 onPageLoad를 실행한다.

async function onPageLoad() {
  await getNonReviewedreservationId();
}

onPageLoad 가 실행되면 아래의 getNonReviewedreservationId 함수가 동기로 실행된다.

async function getNonReviewedreservationId(){
	// 대충 내용물
}

함수 선언 내용

3. class와 js 연동하기

• 인덱스 세기

// 인덱스를 센다.
.shadedBoxCalendar:nth-child

반복되는 것의 뒤에 .shadedBoxCalendar:nth-child를 붙여서 인덱스를 셀 수 있다.

targetElement.classList.add('shadedBoxCalendarBooked');
parentElement.className = 'shadedBoxCalendarBooked';

위는 클래스를 추가 하는 것이고, 아래는 클래스를 설정하는 것이다.

공부하며 느낀 점

1. 쿼리 문 사용의 강력함
   힘들기는 하지만 일단 성공하니까 감을 잡았고, sequlize의 명령어 없이도 할 수 있을 것같다. 생각 이상으로 간결하게 구문이 뽑혀나왔다.
2. 생각지도 못한 버그
   예약 번호와 userId를 기반으로 리뷰를 쓰는 시스템을 만들었고, 예약 번호를 그때그때 찾기 귀찮으니 아래의 과정을 거쳤다.

   1. 예약 테이블과 리뷰 테이블을 join 한다
   2. userId 기반으로 내 예약을 찾는다.
   3. deletedAt(삭제일이 아니라 가리기를 한 날) 기반으로 이미 리뷰를 쓴 예약을 찾는다.
   4. 겹치지 않는 예약 번호 = 내가 예약을 할 수 있는 것들

당연히 이렇게하면 문제가 없을 줄 알았는데, 리뷰를 삭제하니 해당 예약 번호가 삭제한 횟수만큼 더 나왔다.
왜냐하면 deletedAt의 값이 null 인 경우에 걸렀는데, 삭제하면 값이 들어가게 되어서 삭제한 리뷰의 갯수만큼 더 나오게 된 것이었다.
0. 쿼리로 데이터 분류할 때는 where을 쓰지말자 에서 쓴대로 시각화해서 겨우겨우 해결했다.

참조한 사이트

SQL 중복 된 행 제거