[FE - ConnecTo] DAY35 TIL👩🏻‍💻

22.08.29 수업을 들으며 공부한 내용들을 정리하였습니다 😊
피드백은 언제나 환영입니다! 🍊

HTTP

http 1 ~ 3 까지의 버전에 대한 부분 또한, 면접 질문에 나올 수 있으니 정리해두기!

---

브라우저 렌더링 과정

브라우저 주소 창에 www.naver.com을 쳤을 때 네이버 창이 나오는 과정의 한 사이클을 설명하라 (면접 단골)

• DNS부터 시작하면 됨 → 도메인과 ip주소를 바꿔주는 것임
• 도메인? 사용자가 숫자로된 ip주소를 기억하기 어려우니까 사용자가 기억하기 쉽게 바꿔준 것
  

---

DOM?

html 문서를 파싱한 결과물이자, 노드들이 트리구조를 가지고 있는 자료구조임.

돔트리를 조작할 수 있는 api까지 조작하면 돔!

• 작은 의미 : 돔 트리
• 큰 의미 : api를 포함해야함.

일반적으로 돔을 이야기하면 돔 트리를 이야기하는 경우가 많음

---

토큰

어떤 언어에서든지 의미있는 하나의 덩어리를 의미

---

Async와 Defer

• async
  폰트 로드할 때는 많이 쓰기도 함. 폰트의 경우에는 최대한 빨리 가져와야한다는 의미에서는 이걸 쓸 때가 있음.
  
• defer
  원래 스크립트는 헤드에 있어야 정상이고, 흩어져있는 것은 굉장히 안좋음.
  그래서 모던 자바스크립트에서는 헤드에 스크립트를 가져다놓기 때문에, defer를 사용하는 것이 훨씬 낫지 않나라는 생각이 듬.
  

---

LoadEvent와 DOMContectLoaded

❗️이 두 개는 구분을 잘 해두기!

• loadEvent : 모든 리소스의 로딩이 완료 되었다. (html, css , images, font 모두 포함됨.)
• DOMContentLoaded : 돔의 완성. 돔에 더이상 추가할 요소가 없다! 라고 했을 때 발생하는 것임

---

🤔 브라우저 렌더링 과정에서 핵심? 왜 알아야 하는거야?

리플로우, 리페인트가 핵심임!

FE의 관점에서 관심을 가져야하는데, 그 관점에서는 리플로우에 관심을 가져야 함!!!!

우리는 리플로우를 최소한으로 한정시켜야 한다!

무엇이 리플로우를 발생시키는지, 생각해봐야 함.

---

권고사항

id 가 있는 녀석를 가지고 온다? getElementsBy를 쓰고,

없다? 하면, documents.queryselector를 사용함.

id라는 것을 각각 주겠다?

→ 중복 선언을 못하게 막았어야 함. 그런데 id는 충분히 중복될 가능성이 있기 때문에, 특수한 경우를 제외하고는 id를 안 쓰는 것이 좋다.

---

탐색

document에서 요소를 아는 상태에서 형제 / 자식 / 부모 를 찾으러 가거나, 다른 것을 찾으러 가는 것을 탐색이라고 함.

---

프로퍼티와 attribute

프로퍼티와 어트리뷰트 차이는 무엇일까?????

<input type = "text" value = "123">

일 때, 화면상의 input 태그 박스 안에는 123이 기본적으로 입력되어 있는데,

이를 100으로 수정을 한다고 가정했을 때, 기본적으로 입력되어 있는, 123은 어트리뷰트 값이고, 수정한 100은 프로퍼티임.

그래서 변경된 것을 반영할 때는 초기값이 체크된 상태를 체크하라.!

---

기타 사항

책을 읽다가, 개념이나 기능 등에 대한 단점이 나오면, 이것을 쓰지 말라는 것이 아니라, 그 단점을 보완해서 잘 쓰라는 의미임! 👊🏻