[멋쟁이 사자처럼] 멋사 프론트엔드 스쿨 5기 7주차 4LS 회고(Tailwind/DOM/this/json)

 ❤️‍🔥 Liked

• 줌이라곤 회의할 때 밖에 사용해보지 않은 나...ㅋㅋㅋ 온라인으로 수업을 듣고 채팅으로 사람들과 대화하는 건 아직도 낯설지만 그래도 새로운 사람들을 알아가는 건 참 즐거운 일이다. 각자 다른 환경에서 다른 사연으로 어렵게 지원해서 치열하게 학습하고 있는 동기들의 개인적인 면모를 들여다볼 때마다 참 이 경험이 소중하기도 하고 시간이 지나도 기억에 남겠다는 생각이 든다.
• 이번 주말 거의 대부분의 시간을 집에서 복습하는데 보냈다. 수업 시간에 다 끝내지 못했던 mbti 페이지도 완성해서 배포했고, 함수, 객체, 배열, 배열메소드를 유튭 강의랑 병행해서 복습하다 보니 예전에는 전혀 이해하지 못했던 내용들이 자연스럽게 습득된 게 느껴졌다. 몇 번을 다시 보고 또 봤는지...... 자바스크립트를 공부하면서 내 러닝커브가 너무 느리고 더디다는 생각이 들 때가 많다. 나 혼자 공부했으면 포기했을지도 모르는 구간을 지나가는 중인 것 같다. 뭐라도 하나 더 반복하는 이 지루한 시간이 내 러닝커브에 가속도를 가져다줄 것이란 걸 안다. 이번주에 소화 못 했던 closer, callback, ....this 는 아직도 이해가 되지 않지만 여러 번 복습하다 보면 자연스럽게 이해되는 날이 오겠지. 존버!
• 유튭에서 드림코딩 엘리님 강의를 보고 도움이 많이 됐는데 코딩애플님 강의 스타일도 나랑 잘 맞는 것 같다.
  코딩애플님 드립이 내 개그코드 저격... 남는 시간에 볼만한 새로운 강의를 발견해서 기쁘다. :)
• 주말에 스트레스를 좀 날리고 싶은 마음에 러닝을 했는데 달리고 보니 6km...! 수업 때문에 요즘 소홀했는데 오랜만에 러닝하니까 기분이 너무 좋았다. 30초도 못 달리던 런린이... 진부한 얘기지만 성실함과 꾸준함은 나를 배신하지 않는다는 사실을 다시 숙고하며 돌아왔다.

 

 

 

 💣 Lacked

• 아쉬웠던 점은... 이해력이 떨어지는 내 머리? 전두엽, 측두엽, 후두엽 소중한 뇌세포들아 힘내줘...🥲
• this를 만만하게 봤던 걸 후회하는 중... 알면 알수록 헷갈리는 this. 일단 이해하는 만큼만 알고 넘어가려고 한다.
• 생성자함수 class, promise를 예습하다가 우주에 다녀왔다.....ㅎ
  예습을 어떤식으로 하는 게 효율적 일지 고민이 좀 필요할 것 같다. 🚀 

 

 

 

 

 ✏️ Learned

• DOM 은 HTML 문서의 내용을 트리형태로 구조화하며 웹페이지와 프로그래밍 언어를 연결시켜 주는 역할을 한다.
• DOM요소 접근 시 CSS와 동일하게 선택자를 입력하면 된다.
  단일 요소에 접근하는 document.querySelector() 다수의 요소에 접근하는 document.querySelectorAll()
• classList 를 통해 DOM 요소에 CSS class 제어 가능.
• innerHTML 은 요소(element) 내에 포함된 HTML 마크업을 가져오거나 설정.
• 속성에 접근하고 수정할 수 있는 Attribute 메소드, 접근은 getAttribute 접근 및 수정은 setAttribute
• data-* 속성을 사용하면 HTML에서 요소에 추가적인 정보를 저장할 수 있다. script에서는 dataset.* 형식으로 접근.
• addEventListener 리스너 함수를 통해 DOM요소 제어. click, mouseover, mouseout, wheel 등 다양한 이벤트를 감지.
• addEventListener()는 요소에 Event(e)를 연결하면 event propagation이벤트 전파가 발생.
• 이벤트 전파가 발생할 때 부모부터 자식까지 요소를 타고 진행되는 event capturing event bubbling 덕분에
  이벤트가 발생한 요소인 target 과 리스너함수를 등록한 부모 요소 currentTarget 이라는 속성이 존재한다.
• 변수는 지역변수 전역변수 가 있다.
  function을 사용할 때 내부에 지역변수가 없다면 바깥을 타고 올라가면서 변수를 찾는데,
  이를 Scope Chaining이라고 한다. 만약 전역에도 변수가 없다면 Error!
• Hoisting 은 함수나 변수를 Scope 최상단으로 끌어올려 주는 것처럼 보이는 현상.
  변수와 함수의 메모리 공간을 선언 전에 미리 확보해 놓는 것.
  let, const를 이용한 선언문은 마치 호이스팅이 안된 것처럼 동작하는데
  이러한 현상은 일시적 사각지대(Temporal Dead Zone)에 빠지기 때문! ... 중요한 내용이라 장문ㅎㅎ 😅
• Closer란 폐쇄된 공간 안의 은닉화된 데이터 에 접근하기 위한 테크닉. 함수 밖에서 변수를 출력할 수도, 변경할 수도 없음.
• callback function 은 함수를 arguments 로 전달해서 언젠가는 사용(콜백)하겠다 선언해 놓는 것.
• Map 은 key와 value를 한 쌍으로 저장하는 자료구조. key는 중복해서 저장할 수 없다. key에 다양한 자료형을 허용하며,
  keys() values() entries() 메소드로 값을 바로 가져올 수 있다는 점에서 기존 Object보다 더 진화된 형태.
• Map 은 for..of forEach() loop를 통해 [key, value] 배열을 순회해서 반환 가능
• Set 은 모든 타입의 값을 저장하는 객체자료형의 한 종류. Object 안의 값은 중복을 허용하지 않는 점이 특징.
  (집합, 교집합, 차집합... 알고리즘 문제에서 유용하지만 실무에서 자주 사용되지는 않음.)
• this 는 자신을 호출한 객체를 this 로 지정. 대부분의 경우 값은 함수를 호출한 방법에 의해 결정된다.
• JSON(JavaScript Object Notation)은 자바스크립트에서 Object를 표현하는 형식으로 데이터를 표현한 것.

 

 

 

 👩🏻‍💻 Longed For

• 10km 러닝
• 프로그래머스 0단계 문제 매일 3개씩 풀기.
• 이력서 퇴고.
• 매일 최소 예습 1시간, 복습 3시간 실행해 보기.
• 모던 JavaScript 튜토리얼, 코어 자바스크립트 2단락 내용 숙지.
• DOM 제어 실습.
• 새로운 것보다 기본에 충실하자. 루틴!