220913(화)

🪴 성장일지 2.0

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

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

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

Project jaybnb

목표

• 숙박 일정 선택 시 달력 모달 창 생성

CSS(SCSS)

&__main {
    width: 90%;
    height: 75%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    padding-top: 50px;

• 습관적인 width, height % 작성 -> 추후 미디어 쿼리를 통해 화면에 맞는 설정을 따로 하도록 하자
• flex를 통한 배치가 너무 익숙
  • 굳이 float을 이용하지는 않아도 되지만
  • position(static, relative, absolute, fixed, sticky)에 대한 개념 확실히 기억하자
  • 또한, grid 배치가 더 깔끔한 구간엔 grid를 사용하는 것도 종종 연습하자

Date 객체

var now = new Date(); // 선언된 시각에 대한 Date 객체
console.log(now.getDate()); // 현재 `일`
console.log(now.getDay()); // 현재 `요일` 일요일: 0, 토요일: 6

now.setMonth(0);
/* ⭐ now 객체의 `월`을 set하게 되는데, 이 때 1월: 0, 12월: 11에 해당하는 것 주의하자!
getMonth()와 왔다갔다하다보니 좀 헷갈린다! */

모달 창 외부 클릭 시 닫힘

간단하게 모달창과 같은 위치에 .modal-back과 같은 div를 만든다.
이 .modal-back의 width, height은 100%, position은 absolute처리
이후 자바스크립트에서 클릭 시 이벤트 타겟의 비교를 통해 모달창 display를 none과 block을 바뀌게 해준다.

프로젝트를 진행하면서 우선 기능 구현에 초점을 맞추게 되다보니, 내 코드에 대한 의구심이 게속 든다. 일단 기능을 최대한 내 실력과 구글링을 통해 구현하고 나중에 코드를 수정하는 작업(리팩토링)을 거치면 된다. 그러니까 좀더 마음 편하게 일단 만들고 보자. 어차피 지금 내 수준에서는 많은 생각을 하고 코드를 짜는 게 한계가 있다!