백 오피스 프로젝트하며 배운 것들

김민준·2023년 7월 20일

TIL-----------------------------내림차순↓

목록 보기

24/111

1.git branch 내용 덮어씌우기
2.자바스크립트로 달력만들기
3. Error: Dialect needs to be explicitly supplied as of v4.0.0 오류
4. :root 가상클래스로 CSS 변수 다루기
5. 글자 상하/세로 가운데 정렬

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

1. git branch 내용 덮어씌우기

git checkout <branch>
git fetch origin
git reset --hard origin/main

2. 자바스크립트로 달력만들기

html

  <div class='rap'>
    <div class="header">
       <div class="btn prevDay"></div>
      <h2 class='dateTitle'></h2>
      <div class="btn nextDay"></div>
    </div>
    
    <div class="grid dateHead">
      <div>일</div>
      <div>월</div>
      <div>화</div>
      <div>수</div>
      <div>목</div>
      <div>금</div>
      <div>토</div>
    </div>

    <div class="grid dateBoard"></div>
  </div>

css

/* 달력 */
.dateHead div {
  background: #e31b20;
  color: #fff;
  text-align: center;
  border-radius: 5px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 5px;
}

.grid div {
  padding: .6rem;
  font-size: .9rem;
  cursor: pointer;
}

.dateBoard div {
  color: #222;
  font-weight: bold;
  min-height: 6rem;
  padding: .6rem .8rem;
  border-radius: 5px;
  border: 1px solid #eee;
}

.noColor {
  background: #eee;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
}

/* 좌우 버튼 */
.btn {
 display: block;
 width: 20px;
 height: 20px;
 border: 3px solid #000;
 border-width: 3px 3px 0 0;
 cursor: pointer;
}

.prevDay {
  transform: rotate(-135deg);
}

.nextDay {
  transform: rotate(45deg);
}

/* ---- */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;  
  font-family: Pretendard;
}

.rap {
  max-width: 820px;
  padding: 0 1.4rem;
  margin-top: 1.4rem;
}

.dateHead {
  margin: .4rem 0;
}

const makeCalendar = (date) => {
  const currentYear = new Date(date).getFullYear();
  const currentMonth = new Date(date).getMonth() + 1;

  const firstDay = new Date(date.setDate(1)).getDay();
  const lastDay = new Date(currentYear, currentMonth, 0).getDate();

  const limitDay = firstDay + lastDay;
  const nextDay = Math.ceil(limitDay / 7) * 7;

  let htmlDummy = '';

  for (let i = 0; i < firstDay; i++) {
    htmlDummy += `<div class="noColor"></div>`;
  }

  for (let i = 1; i <= lastDay; i++) {    
    htmlDummy += `<div>${i}</div>`;
  }

  for (let i = limitDay; i < nextDay; i++) {
    htmlDummy += `<div class="noColor"></div>`;
  }

  document.querySelector(`.dateBoard`).innerHTML = htmlDummy;
  document.querySelector(`.dateTitle`).innerText = `${currentYear}년 ${currentMonth}월`;
}


const date = new Date();

makeCalendar(date);

// 이전달 이동
document.querySelector(`.prevDay`).onclick = () => {
makeCalendar(new Date(date.setMonth(date.getMonth() - 1)));
}

// 다음달 이동
document.querySelector(`.nextDay`).onclick = () => {
makeCalendar(new Date(date.setMonth(date.getMonth() + 1)));
}

.getDay()로 요일을 0(일)~6(토)로 가져온 뒤, 시작점을 정하는 방법은 정말 좋은 발상인 것같다.

위의 내용과 아래의 내용을 응용해서, 예약이 있는 날짜는 다르게 나오도록 만들었다.

if (response.status === 200) {
    const reservations = result.reservations;
    for (const reservation of reservations) {
      const reservationAt = new Date(reservation.reservationAt);
      const day = reservationAt.getDate();
      const month = reservationAt.getMonth() + 1;
      console.log('day :', typeof day, day);

      const targetElement = document.querySelector(
        `.shadedBoxCalendar[id='${day}'],.shadedBoxCalendarBooked[id='${day}']`,
      );
      console.log(
        'targetElement.textContent :',
        typeof targetElement.textContent,
        targetElement.textContent,
      );
      console.log(day);
      targetElement.className = 'shadedBoxCalendarBooked';

    }

3. Error: Dialect needs to be explicitly supplied as of v4.0.0 오류

환경변수를 설정하지 않아서 일어나는 오류이다.
.env 파일등을 확인하자.

4. :root 가상클래스로 CSS 변수 다루기

아래와 같은 방식으로 :root{}에 선언해둔 변수 값을 다른 클래스에서 var(--name) 형태로 불러올 수 있따.

:root {
  --shadedBoxWidth: 50px;
  --shadedBoxBoxShadow: 7px 7px 2px 1px rgb(100, 111.5, 111.5);
  --shadedBoxPadding: 20px 0px 20px 0px;
  --shadedBoxFontSize: 20px;
  --shadedBoxText-align: center;
  --shadedBoxText: 10px;
}
/* --shadedBoxTextVertical-align: middle; */

.shadedBoxCalendar {
  color: white;
  width: var(--shadedBoxWidth);
  height: var(--shadedBoxWidth);
  line-height: var(--shadedBoxText);
  background-color: rgb(35, 44, 44);
  box-shadow: var(--shadedBoxBoxShadow);
  padding: var(--shadedBoxPadding);
  font-size: var(--shadedBoxFontSize);
  text-align: var(--shadedBoxText-align);
  vertical-align: var(--shadedBoxTextVertical-align);
}

.shadedBoxCalendarBooked {
  color: rgb(165, 179, 179);
  width: var(--shadedBoxWidth);
  height: var(--shadedBoxWidth);
  line-height: var(--shadedBoxText);
  background-color: rgb(165, 179, 179);
  box-shadow: var(--shadedBoxBoxShadow);
  padding: var(--shadedBoxPadding);
  font-size: var(--shadedBoxFontSize);
  text-align: var(--shadedBoxText-align);
  vertical-align: var(--shadedBoxTextVertical-align);
}

위의 코드는 너무 비효율적이라고 생각되어서 고쳤다.

.shadedBoxCalendar,
.shadedBoxCalendarBooked {
  width: 50px;
  height: 50px;
  line-height: 10px;
  box-shadow: 7px 7px 2px 1px rgb(100, 111.5, 111.5);
  padding: 20px 0px;
  font-size: 20px;
  text-align: center;
  vertical-align: middle;
}

.shadedBoxCalendar {
  color: white;
  background-color: rgb(35, 44, 44);
}

.shadedBoxCalendarBooked {
  color: rgb(165, 179, 179);
  background-color: rgb(165, 179, 179);
}

중복되는 css를 root 변수로 처리할 생각이었으나 가독성이 너무 나빴고, 결정적으로 클래스 두 개를 같이 처리하는 법도 있음을 알게 되었다.

5. 글자 상하/세로 가운데 정렬

클래스의 높이와 글자 라인의 높이를 같게한다.

.guid {
  display: flex;
  height: var(--shadedBoxWidth);
  line-height: var(--shadedBoxWidth);
}

공부하며 느낀 점

서로 토론하면서 코드를 짜는 것이 매우 중요하다.
서로 놓친 부분이나 모르는 부분을 계속 실시간으로 주고받아야한다.
정말 상상도 못한 곳에서 해결법이 나온다.
처음엔 달력을 만드는 것은 부트 스트랩으로 해결하려고 했다.
하지만, 예약이 있는 날과 없는 날을 구분해야함을 깨닫고 나니 부트스트랩이 아니라 js로 처리해야함을 알게 되었다.
중복되는 부분을 변수로 처리하는것만이 능사는 아니다.
중복되게 한번에 처리할 수 있다면 그렇게하는 것이 가독성 측면에서 훨씬 좋을 수 있기 때문이다.