[1주차] 송아영 미션 제출합니다.

[gustn99]

배포 링크

https://vanilla-todo-21th-4ynn0nwdc-gustns-projects.vercel.app/
production은 default 브랜치만 되는 것 같아서 preview로 배포했습니다!! 혹시 이 방식이 잘못됐다면 알려주세요!

미션을 하며 . . .

바닐라 js를 공부한 지 1년이 되었을 뿐인데 이렇게나 까마득하네요. . . 옛날 코드들도 찾아보고 즐거웠습니다 👍

지난 해 초에 혼자서 바닐라 js 공부를 할 때는 getElementById 와 addEventListener 를 사용했었는데요, 그 해 3월에 시작한 스터디에서는 querySelector 와 이벤트 핸들러 메서드에 할당하는 방식을 거의 강제하다시피 했었습니다. 그때는 js 공부를 시작한 것도 몇 달 안 돼서 그저 하라는 대로만 했었는데 이제서야 뭐가 뭔지 눈에도 좀 들어오고 찾아보고 비교할 여유가 생겼네요!

공유하면 좋을 내용 같아 간략히 정리해 보겠습니닷

getElementById vs querySelector

• getElementById가 성능이 더 좋습니다. (querySelector가 약 1.2~1.3배 느리다고 하네용)
• 하지만 querySelector는 다양한 css 선택자를 허용합니다.
• 저는 모든 css 대상 태그에 id나 class를 붙이기보다는 간단한 건 .input-item input과 같이 속성이나 자손 선택자를 사용하는 게 좋더라고요!
• 그런데 지금 코드를 돌아보면 뭔가의 기준을 가지고 사용하기보다는 그때그때 보이는 대로 쓴 것 같기도 합니다ㅎㅎ;;
• getElementByClass와 querySelectorAll도 유사 배열을 반환한다는 점은 같지만 실제 타입이 달라서 생기는 차이점들이 있으니 찾아보셔도 좋을 것 같습니다!

이벤트 핸들러 메서드 vs addEventListener

• element.onclick() = () => {...}와 같이 이벤트 핸들러 메서드에 직접 함수를 할당한 경우를 이벤트 핸들러 메서드라고 불러보겠습니다.
• 이벤트 핸들러 메서드는 함수를 재할당하면 덮어씌워지지만, addEventListener는 중복으로 할당됩니다. 즉, 할당한 이벤트 핸들러가 모두 동작합니다.
• 또 addEventListener는 메서드에 할당하는 방식과 달리 세 번째 인자를 통해 캡처링이나 버블링 시에 동작하도록 설정할 수 있습니다.
• 이런저런 이유로 저는 이벤트 핸들러 메서드를 정의하다가 addEventListener를 사용하는 방식으로 리팩토링했습니다! 브라우저 호환성 등 다른 차이들도 있으니 한번쯤 찾아보시면 좋겠습니다!

과제 내내 리액트적 사고가 머리를 떠나지 않아서 투두 리스트를 배열로 관리하고 싶은데 엄두를 못 내겠더라고요. . . 현재 제 생각은요, 사용자 입력에 따라 배열을 업데이트하고 그 배열을 순회하며 화면을 렌더링하는 리액트와 같은 동작을 바닐라 js로는 시작도 못하고 주저하는 건, 리액트의 버추얼 돔이 바닐라에는 없다는 것을 알기 때문이 아니려나요. . . 버추얼 돔 없이 건너가기엔 너무 먼 강인 거죠. . .

비록 저는 그랬지만!! 다른 여러분들은 또 어떻게 코드를 짜셨을지 기대가 많이 됩니다!!

Key Questions

1. DOM은 무엇일까요?

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.

mdn에서는 이렇게 정의하고 있습니다. 문서, 다르게 얘기하면 브라우저를 구성하는 노드(태그)들의 프로퍼티, 메서드, 이벤트를 객체 형식으로 담아서 프로그래밍 언어를 사용해 접근할 수 있도록 표현한 방식이다, 정도로 저는 정리해 보겠습니다.

2. 이벤트 흐름 제어(버블링 & 캡처링)이 무엇인가요?

버블링

• 버블링은 다르게는 전파라고도 표현합니다.
• 이벤트 발생 지점부터 돔 트리를 따라 위로 올라가 부모 요소에서 자식 요소의 이벤트를 수신하는 과정입니다.
• 아래 예제에서 play movie 버튼 클릭 시 playing > you clicked on the toolbar 순서대로 alert가 나타납니다.
• play movie의 이벤트 핸들러에 버블링을 막는 e.stopPropagation()을 추가하면 playing만 alert되겠죠?

export default function Toolbar() {
  return (
    <div className="Toolbar" onClick={() => {
      alert('You clicked on the toolbar!');
    }}>
      <button onClick={() => alert('Playing!')}>
        Play Movie
      </button>
      <button onClick={() => alert('Uploading!')}>
        Upload Image
      </button>
    </div>
  );
}

캡처링

• 캡처링은 반대로 돔 트리의 최상위 노드(주로 document 또는 window)에서 이벤트 발생 지점까지 내려가는 과정입니다.
• 저는 한 번도 사용해 본 적이 없지만. . . 캡처링 이벤트 리스너를 등록해 라우터나 분석을 위한 코드에 사용할 수 있다고 합니다.

3. 클로저와 스코프가 무엇인가요?

클로저

• 제가 정말 어려워하는 개념입니다. . . 아직도 잘 이해하지 못했어요 💦💦
• 함수와 그 함수가 속한 렉시컬 환경(함수가 선언된 위치 등)을 클로저라고 하며, 클로저를 통해 외부 변수에 접근할 수 있습니다.
• setTimeout에서 외부 함수가 종료된 후에도 그 함수의 변수에 접근할 수 있는 것!!이 클로저를 사용하는 예라고 합니다.
• 더 깊은 이해는 다른 분들의 pr을 읽어보며 차차 진행해 보겠습니다. . .

스코프

• 스코프는 어떤 변수가 유효한 범위입니다.
• 지역, 전역, 블록으로 구분할 수 있습니다.
• 자바스크립트의 var는 지역변수, let과 count는 블록변수입니다. 이에 따라서 아래와 같은 흥미로운 예제가 존재하는데요,
• i가 var로 선언된 변수이기 때문에 i는 전체 함수에서 유효하고, 결국 setTimeout에서 클로저를 통해 받아오는 i의 값은 함수가 종료된 시점의 3이 됩니다.
• 반면에 i를 let으로 선언하는 경우 각각의 i는 각각의 블록에서 유효하기 때문에 setTimeout에서 클로저를 통해 받아오는 i의 값도 1, 2, 3이 된다고 합니다!

function run() {
  for (var i = 0; i < 3; i++) {
    setTimeout(function () {
      console.log(i); // 3, 3, 3 출력
    }, 1000);
  }
}
run();