220915(목)

🪴 성장일지 2.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자

Project jaybnb

목표

1. 일정 버튼 클릭 시, 헤더 부분 확대 및 변화
2. 달력 모달에 화살표 버튼을 추가하고 버튼 클릭 시 달력 넘기는 기능
3. 체크인 및 체크아웃 날짜 선택 시, 헤더 부분에 해당 날짜 표출
4. 체크인 및 체크아웃 날짜 선택 시, 그 사이 날짜들에 대해 시각적 표현 추가

SCSS

• css bem에 맞게 작성을 잘하면, SCSS의 &를 활용하기 정말 용이해진다!

block {
  &__element {
    // 이런 느낌
  }
}

JavaScript

• 아직 모듈화를 통해 프로젝트를 관리하는 부분이 어렵다.

  • 달력 생성에 필요한 날짜 객체들을 만들어주는 calendar.js 그리고 여러가지 화면을 조작하는 main.js으로만 구성해보았다.
  • 아직 감이 없으니, 시작 전에 최대한(내가 가능한 선에서) 프로젝트를 어떻게 구성하고 설계할지 고민해보자

• 일단 기능을 위주로 전부 구현했는데, 열심히 코드를 적다보니 어느정도 어떻게 변수, 함수를 재활용할지 감이 오는 것 같다.

• 큰 차이가 없을 것 같지만, 2번과 같이 했을 때 원할 때마다 원하는 날짜 객체 배열을 만들 수 있어서 정말 유용했다.

  // 1. 빈 배열을 만들어서 그 배열에 날짜 객체들을 저장해서 이용
  makeAfterCalendar(prevMonthList);
  
  // 2. 특정 연도와 월을 넣으면 해당 달의 날짜 객체 배열을 반환하는 함수를 이용
  makeAfterCalendar(makeAfterMonthList(tempYear, tempMonth));

• 함수 내에서 특정 조건에서 return 처리함으로써 함수를 제어하는 방법

  function example() {
    if ($prevFirstRow.innerHTML !== '') {
      return;
    }
  }

• 가급적 (for let i = 0) 형태의 반복문은 지양할 것

  • for, in/of 혹은 배열의 메서드인 forEach()를 활용하도록 하자!!!

  document.querySelectorAll('.prev').forEach((ele) => {
    if (+ele.innerHTML > firstDate) {
      ele.style.backgroundColor = '#ebebeb';
      ele.style.borderRadius = 0;
    }
  });

  프로젝트 후기

  1. 변수 관리는 생각보다 어렵다.
  2. console.log() 넘나 소듕하다.(ㅠㅠ)
  3. html 및 css 구조를 잘 짜두면, 이후 자바스크립트에서 DOM 조작이 훨씬 편해지고 직관적이게 된다. 물론 이번엔 그렇게 못했당 ㅎㅎㅎㅎㅎㅎㅎㅎ
  4. 코드를 작성하는 일은 쉽지 않지만, 일단 최대한 기능 구현을 목표로 하고 공부한 내용을 바탕으로 리팩토링하면 더 많이 배울 수 있을 것 같다.