에어비앤비 사이트 클론 코딩 (기능 추가)

• 기능 1 : 우측 상단 햄버거UI누르면, 레이어 노출 / 레이어 제외한 다른 곳을 누르면 레이어 닫힘
• 기능 2 : 상단 메뉴 '숙소','체험'을 선택할 때마다 검색UI 바뀜.
• 기능 3 : '체험' -> '날짜' 클릭 시 달력UI 노출 / 좌우 버튼 클릭 시 월 변경

알게된 내용

👉 CSS 레이어 숨기는 여러가지 방법

• opacity(투명도) : 0
• position : absolute ; left : -9999px
• display : none;
• visibility : hidden

👉 DOM Api와 Templating

• DOM 엘리먼트 추가,제거
• DOM Tree구조의 노드를 조작하는 법을 알자!!!!
• (노드 앞에 li추가 , 노드의 부모를 찾는다 ,,, )
• createElement -> createTextNode -> appendchild -> insertBefore (div를 만들고 텍스트노드를 만들어서 append하고 , 실제 dom tree에 삽입하는 아주 기초적인 루트)
• classList의 추가,삭제,토글

👉 이모저모

• DOMContentLoaded : (Dom tree구성 완료 후의 이벤트)
• preventDefault : 이벤트 기본 동작 막음
• document.addEventLister와 window.addEventLister 의 차이 : 거의 dom을 사용
• js파일의 모듈화해서 사용하는 법 (export,import & script type="module")

👉 Destructuring

• Ex

function myFn(e){e.target.querySeletor; e.target...}
//아래처럼 바꿀 수 있다.
function myFn({target}){target.querySelector ..}

👉 이벤트 전파

• 이벤트 버블링 캡처링
• Event delegation

👉 OOP 스럽게 코딩하는 법

• 클래스마다 파일을 쪼갠다 (모듈화)
• 객체를 생성하는 방법은 여러개 있다. (그 중에 class를 사용하자)
• 함수는 파라미터를 받아서 다른 동작을 한다.
• 클래스는 constructor에 지정된 인자가 다른 것이 와도 다른 동작을 하는 범용성을 지님.
• 클래스는 동사가 아닌, 명사로 지정한다.
• 메서드(or 함수)는 동사로 지정한다.
• 생성자함수는 파라미터를 본인의 인자로 사용하는 (객체를 생성하는) 기능만 쓴다.
• this가 가르키는 것은 new ???으로 객체를 생성했을때 생기는 객체를 가르킨다.
• 객체가 생성되면, this에는 생성자에서 지정한 property가 생성된다.
• 메서드들은 프로토타입에 지정되어, new할때마다 같은 프로토타입을 사용한다. (Share)

👉 this

• this란?

class T {
  go() {
    console.log(this); // 객체 T
    setTimeout(function () {
      console.log(this); // 전역객체 window (webAPI에서 동작하니까)
    }, 1000);
  }
}

• scope는 선언할때 결정되고, this는 실행될 때 결정된다.

class T {
  go() {
    console.log(this); // 객체 T
    setTimeout(() => {
      console.log(this); // 객체 T
    }, 1000);
  }
}

• 그래서 this를 바인딩하기 위해 arrow function을 쓰거나 bind를 쓴다.

addeventListener('click',this.clickHandler.bind(this))

clickHandler(){}

• 이렇게 하면 원래 this는 eventListener를 가르키지만, clickHandler 함수를 가르키게 된다.

👉 그 외에 정리

• tabindex

• input 클릭 시 글자 없애기

• css 배경색만 투명하게 바꾸기

• insertAdjacentHTML MDN

• 크롬에선 jQuery 문법을 지원한다.

• $1은 전커서 , $0은 첫커서

• 나만의 유틸리티를 만들어서 중복을 많이 없애보자.

• 유틸리티

  1. airbnb에 사용되는 유용한 함수
  2. 모든 웹페이지에서 사용할 수 있는 유용한 함수
  3. src/utils/_.js 이런식으로 유틸리티 파일을 만든다.

• Magic number (개발자가 코드에 입력한 쌩 숫자) 를 자제하자. (안티패턴)

• 항상 유지보수를 용이하게 할 수 있는 코딩을 염두하자.

• 함수를 분리해야 테스트 하기도 쉽다.

• 실행시킬때 두번한다면 배열로 한방에 넣어서 할 수 있다.

• es모듈화로 import export를 하자

• document.querySelector는 루트부터 탐색하기 때문에 변수에 저장해서 쓰는게 좋다.

---