프렙코스 2주차
이번주 DOM과 scope & hoisting 에 대해 배웠다.
처음에 공부했을 때도 DOM은 무슨 말인지 모르겠었다. 추상적인 개념도 잘 안그려지는? 글이 이해가 잘 안됐음, 와닿지 않는다?
가볍게 조금 이해가 된 예시가 리모컨 예시였고, HTML을 조종(정확히 맞는표현은 아니지만)하는 역할을 하는 인터페이스 라는 말이였다.
아직 완전히 스스로 설명할 정도는 아니라 계속 공부하고 친숙해지자.
Scope와 hoisting은 코어 자바스크립트 읽고 알고 있었는데 예시 문제에 몇개 이해가 안됐던 부분이 if안에 들어있는 변수선언이 호이스팅 되는 거였는데 var는 함수내에서, const, let은 블록내에서만 호출된다고 생각하고 다른 것들(여기서는 if) 신경안써도 된다.
다 이해하고 생각해보니 똑같은 글인데 처음 읽을 때, 특정단어를 모르니까 아직 처음이니 훑어보는 마음으로…등 닫힌 마음으로 글을 읽은것 같다. 더 열린 마음으로 글을 읽고 이해하려고 더 노력하자.
코드리뷰
1 . 문맥간 불필요한 공백 줄이기
> 변수선언 부분과 다른 부분 공백을 주고 썼는데 불필요하게 공백을 줄 필요는 없는것 같다. 에어비앤비 코드스타일보고 공부하자.
2 . 처음 변수 준 경우 초기값을 명시하자
> 예시) let count; let level; 이런식으로 설정해뒀는데(globe scope로) 이때 초기값도 설정해두고, 코드를 읽을 떄 해당 변수 타입을 알 수 있게 하자.
RandomNumber를 구하는 함수를 사용할때도 범위를 알 수 있도록(나가 미리 다 생각해두고 적지 말고, 다른 사람이 읽었을 때 범위가 어떻게 되는지 알게끔 식을 세워두자.)
3 . event.target VS event.currentTagrget
e.target은 클릭된 요소자체를 반환하고,
e.currentTarget은 바인딩된 요소랑 같이 반환
4 . Tagname으로 탐색 X.(적절치 못함, 정확하게 class name으로 명확히)
5 . 네이밍 관련.
변수 이름 단수, 복수 명확히 적어 코드 가독성을 높히고, 항상 읽는 사람이 쉽게 읽도록 함수동작과 어울리는 이름으로 네이밍 고민하자.
6 . Object 사용
Object를 이용해서 더 많은 정보를 담을 수 있다. 배열에 익숙해져서 object사용을 등한시 했는데, 배열은 순서보장이 필요한 자료를 묶어두는 역활로 주로 사용하고, 많은 정보를 넣어둘 시 object를 사용연습하자.
7 . 불필요한 함수 호출 자제하는 방향으로 순서 설정.
8 .innerHTML, textContent, innerText 차이와 권장되는 방식
사용 이유에 따라 다르긴 하지만, 가장 권장되는 방법은 textContent이다.
innerText는 reflow가 발생하고, innerHTML은 HTML분석이 필요하다.
textContent는 script와 style포함 요소들을 가져오지만, innerText는 사람이 읽을 수 있는 요소들만 가져온다.(사람에게 보여지는 요소들만).
innerHTML은 HTML요소를 반환한다. 그리고 보안 취약함.
(이외 더 많지만 중요하다 생각한것.)
9 . Visibility: hidden과 diplay: none의 차이
전자는 보이지는 않지만, 공간에 존재.
후자는 보이지도 않고 공간에도 존재하지 않는다.
코드리뷰관해 공부 완료.
한 주 평가
이번주 총 50시간 공부목표했지만,
월,화는 8시간씩 잘했는데, 백신맞고 쉬다보니 루틴이 무너졌다.
오는 주 다시 루틴세우고 집중해서 공부하자.
DOM에 다시 복습하고, portal에 나온것들 러닝JS로 복습
몰입하자.
몰입의 평화와 성취감이 나를 이룬다.
-손주은-
- 추가 21.08.02
코드리뷰에서 리팩토링관련 질문과 답변
Q. 리팩토링해서 코드가 줄지 않는데 의미가 있나?
Ans. 리팩토링으로 코드양은 일반적으로 더 늘어나게 된다.
리팩토링이 길이를 줄이기위함이 아니라 가독성을 높히고 유지보수성을 용이하게 하기 위함이다.
그리고 고민했었던부분도 과도하다고 생각한다면 굳이 줄이지 않아도 된다.
항상 더 합리적인 방향으로 코드를 적어나가면 된다. 항상 고민하고, 스스로 답을 내리자.
DOM에 대한 이해 (추가)
Web page의 interface
쉽게 말해 DOM은 HTML document를 다양한 프로그램에서 사용가능하도록 object model로 바꾼것이다.
그렇다고 HTML document 그 자체는 아니다.
차이점
1. DOM은 valid한 HTML document만 사용가능
2. DOM은 JS에 의해 수정됨.
NODE 와 Element의 차이
NODE 는 ELEMENT_NODE, ATTRIBUTE_NODE, TEXT_NODE 등 으로 있지만
Element는 NODE안에 타입중 하나이고, HTML tage로 쓰여진 NODE이다.
Ex) <html>, <head>, <title> …
