바닐라코딩 prep 2주차 정리

바닐라코딩의 prep 과정을 수강한 내용을 정리한 포스팅입니다.

---

강의

이번주 강의는 DOM과 스코프 호이스팅에 관하여 정리하는 강의였습니다. 

- DOM
Document Object Model을 의미하며 HTML 문서를 구조화 하여 자바스크립트로 제어할 수 있게해주는 API입니다. 
HTML 문서는 HTML 요소(element)의 집합으로 이루어져있으며 해당 요소들은 객체화되어 트리 자료구조의 노드가됩니다. 이렇게 노드객체로 구성된 트리자료구조를 DOM 이라고 합니다 (따라서 DOM 트리라고도 부릅니다.).

DOM 에는 HTML 문서 조작을 가능케 하는 여러 메서드가 있으며 주로 요소선택, 요소조작, 요소생성, 이벤트 와 관련이 있습니다.  https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

Document Object Model (DOM) - Web APIs | MDN

추가적으로 이벤트에서 이벤트 delegation(버블링, 캡쳐링)에관한 내용을 간략하게 설명하고 넘어갔었습니다. event 객체의 속성에는 Target과 currentTarget 이라는 속성 2가지가 존재 합니다. 2개의 차이는 정말 간략히 말하자면 이벤트리스너 메소드가 붙은 대상인지(currentTarget) 아니면 이벤트가 실제로 발생한 대상인지 (target)입니다. 

돔구조에서 이벤트의 전파는 1. capturing 2. Target 3. bubbling의 3단계로 이루어집니다. 따라서 중첩되어있는 요소의 이벤트는 해당요소의 부모~ 라면 버블링이나 캡쳐링 단계에서 잡아채서 활용이 가능합니다.  https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링

- Scope
스코프란 변수가 유효한 범위를 의미하며 자바스크립트의 경우 var로 선언한 변수는 함수스코프 let, const로 선언한 변수는 블록 스코프입니다. 자바스크립트는 본인의 스코프에 찾는 변수가 없으면 부모스코프로 거슬러 올라가서 해당 변수를 찾으며 해당과정은 변수를 찾지 못하면 전역스코프에 까지 계속 됩니다.  

주의할점은 웹페이지에는 하나의 전역스코프만이 존재합니다. 따라서 HTML 문서내에서 여러개의 자바스크립트 코드를 모듈화하여 사용하거나 복수의 <script>태그를 이용할경우 변수 이름이 겹쳐서 원하지 않는 결과를 얻을 수 도 있습니다. 

- Hoisting
호이스팅이란 영어로는 끌어올린다는 의미의 동사입니다. 자바스크립트의 변수 선언문(var, let, const)과 함수선언식은 호이스팅이라는 현상이 발생합니다. 

function foo() {
console.log(a);
var a = 1;
}
    
foo()

위의 코드에서는 변수 a 가 선언되기 이전에 a 를 콘솔창에 기록 하려합니다. 실제로 실행해보면 오류가 나지 않고 undefined라는 값이 콘솔에 찍히는 것을 관찰할 수 있습니다. 왜 그럴까요? 

호이스팅 때문입니다. 자바스크립트의 모든 변수 선언문은 코드 실행전 평가과정에서 자신의 스코프 최상단으로 끌어 올려지게 되며 먼저 수행됩니다. 따라서 위의 코드는 실제로는 아래와 같이 작동 합니다. 

function foo() {
var a
console.log(a);
a = 1;
}
    
foo()

주의할점은 어디까지나 변수 선언까지만 호이스팅 될 뿐 할당문 (=) 은 호이스팅 되지 않는다는 것입니다. 
함수 선언문 (표현식은 위와 동일한 이유로 변수만)또한 호이스팅된다는 점에 주의 합시다. 

과제

금주의 과제는 Tic Tac Toe 게임을 구현 하는 것이었습니다. 기본적인 로직은 준수하게 작성했다는 평가를 받았으나 변수선언에서 주의할점이 몇개 보였고 이벤트 버블링을 활용했다면 더 좋은 코드를 작성 가능했을것 같다는 리뷰를 받았습니다. 

1. svg 이미지는 HTML 문서내에서 인라인으로 처리가가능하지만 object 태그를 써서 다른 문서로 저장해 분리 할수 있다. 

이번과제를 진행하면서 저는 SVG 태그라는 것을 사용해 보았습니다. 그러나 SVG 태그의 경우 제가 조사했엇을때는 mdn 공식문서 튜토리얼도 덜완성된 상태였고 마땅히 많은 설명을 찾지 못했습니다. 그래서 어찌저찌 스택 오버플로우나 구글을 뒤져가면서 인라인으로 작성했는데 마크업이 너무 지저분해졌습니다. 

인라인으로 svg를 구현하니 지저분해진 모습....

위의 코드는 object태그를 활용해 분리시킬수 있다는 리뷰를 받았습니다.(https://svgontheweb.com/ko/) 실제로 분리가 가능했으며 나중에 SVG태그를 다시 사용할 경우 반드시 다시 적용 해볼 예정입니다. 

벋은리뷰!

2. DOM element로 받아온 변수는 뒤에 element를 붙여서 변수명을 지어줘야 돔요소인지 명확해진다. 

3.불리언 변수 네이밍은 is 나 has를 앞에 붙이는 편이다. 

4.CSS 프로퍼티 작성에도 순서 컨벤션이 있으므로 참고해볼것
5.유사배열을 배열로 전환할때는 스프레드 문법 보다는 Array.prototype.from()을 쓰는게 더 의미가 명확하다. 

저는 노드리스트는 어차피 이터러블인 유사배열이니 간편하게 스프레드 문법을 사용해 배열로 변환시켰으나 그렇게 하기보다는 Array.prototype.from()을 쓸것을 권장 받았습니다. 

5. 3항 연산자에서 할당과 가은 구문을 적는 건 가독성 저해가 있을수 있다. 

7. 원하는 메서드가있는지 확인하는 습관을 가지자. 

저는 노드리스트의 경우 contains 메서드가있는지 몰라서 스프레드 문법으로 배열로 변환후 includes를 사용했습니다. 그런데 알고보니 contains 메서드가 이미 존재해서 굳이 배열로 전환할 필요가 없었습니다. 

8. css선택자별로 성능이 각자 다르다. 

id와 class 선택자의 속도차이는 거의 없지만 아닌것들과의 차이는 꽤 큰편이라고 리뷰어 분께서 말씀 해주셨습니다. 실제로 그런지 실험해보고 싶어서 아래와 같은 코드를 크롬에서 실행 시켜 봤습니다. 

{
  const t1 = performance.now();
  for (let i = 0; i < 999999; i++) {
    const test1 = document.querySelector("#test1");
  }
  const t2 = performance.now();

  console.log("id", t2 - t1);
}

{
  const t1 = performance.now();
  for (let i = 0; i < 999999; i++) {
    const test1 = document.querySelector(".test2");
  }
  const t2 = performance.now();

  console.log("class", t2 - t1);
}

{
  const t1 = performance.now();
  for (let i = 0; i < 999999; i++) {
    const test1 = document.querySelector("div[class='test3']");
  }
  const t2 = performance.now();

  console.log("attribute", t2 - t1);
}

실험결과 실제로 속도차이가 났습니다. 

기타

---

부족하다고 느낀점

- 깃 

이번과제를 수행하면서 일부로 커밋을 여러차례 나누고 푸쉬 오리진도 여러차례 나누어 해봤습니다. 어느정도 감은 잡혔으나 역시 좀더 대규모의 협업을 진행하면서 더 능숙해질 필요가 있습니다. 

-SVG태그

svg를 활용하는 것은 이번이 처음이었는데 상당히 어려웠습니다. 다음에 한번더 사용할때 이번 리뷰에서 개선점으로 안내받은 부분을 한번 개선해 봐야겠습니다. 

-css

지금까지 css 마크업을 작성할때 두서없이 작성했는데 다음부터는 컨벤션을 참조하여 더 가독성이 좋게 작성하도록 시도해봐야겠습니다.