[모던자바스크립트] WIL-5 (7.25 ~ 7.31) 모던자바 1회독 완료

  이번주는 뒷 부분을 이해 안가는 부분이 생기더라도 조금 빠르게 책을 다 보기로 결정했다. 생각보다 진도가 너무 느리게 나가 걱정이던 찰나에 룸메이트가 조언해 주길 '너무 매몰되는 감이 없지 않아 있는것 같고, 어차피 계속 반복해서 봐야 할 책이므로 한 번 빠르게 보는게 좋을 것 같다.'라는 말을 해주었다. 그 말에 동의해서 조금은 빠른 속도로 이번주에 책을 다 읽고, 다음 주 부터는 알고리즘 공부를 시작하기로 했다. 또 정말 고맙게도 지금 당장 한 번은 읽어두면 좋을 만한 내용들로 읽어야 할 부분을 간추려 주었다. 먼저 책을 다 보는것을 목표로 하고 리액트와 html/css 그리고 알고리즘 공부를 하면서 다시 책을 읽는것을 추천해 줬다. 보통 공부를 하면서 방향성이 많이 흔들리기 마련인데 정말 고맙고 운이 좋게도 공부의 방향성을 걱정할 일은 크게 없는것 같아 정말 다행이다.

 

  이번주는 ES6 함수의 추가 기능, 배열, Number, String, 이터러블, 스프레드 문법, 디스트럭처링 할당, set과 map, 브라우저 렌더링 과정 DOM, 비동기 프로그래밍 , REST API, 프로미스, 제너레이터와 async/await, 에러처리, 모듈을 공부했다.

 

  사실 위의 주제 중에 절반정도는 이해한것 같고, 절반 정도는 전혀 이해하지 못했다. 왜 룸메이트가 우선 빠르게 한 번 책을 보는걸 추천해 줬는지 알 것 같다. 우선 배열, Number, String, ES6 함수의 추가 기능(메서드 축약 표현, 화살표 함수)등을 공부하는 것은 그렇게 어렵지 않았다. 대부분 기본 개념과 정적 메서드와 프로퍼티 메서드들을 공부하는게 주였고, 이 부분은 개발자라면 계속해서 검색하고 익숙해지면서 활용해야 하는 부분이라고 생각이 들었다. 그리고 가장 실용적이라고 느꼈던 부분은 스프레드 문법과 디스트럭처링 할당이었다. 굉장히 직관적이면서 편리한 기능이라고 생각이 들었다. 만약 스프레드 문법과 디스트럭처링 할당이 없었다면 하나 하나 함수로 구현을 해서 활용했어야 했을 것이다. 물론 내부 로직이 어떻게 구현되는지에 대해서는 알지 못하지만, 사용하는 입장에서는 정말 유용한 기능이라는 생각이 들었다.

 

  그리고 지금까지는 자바스크립트 언어에 대해서 공부만 했지 브라우저에 어떻게 렌더링 되는지에 대해서는 알지 못했다. 대충 서버에서 데이터를 받아와 화면에 띄워주는 것이라고만 단순하게 생각했었다. 하지만 이 또한 정말 정교하게 설계되어 브라우저에 페인팅 된다라는 사실을 알 수 있었다. 해당 내용과 용어 및 개념을 전부 이해한 것은 아니지만, 실행 컨텍스트를 공부할 때와 비슷한 느낌을 받았다. 결국 실행 컨텍스트처럼 브라우저도 렌더링 엔진과 자바스크립트 엔진을 통해 일을하고, 렌더링 엔진은 HTML을 파싱하여 DOM 트리를 생성하고 또 HTML 파싱 도 중 CSS와 자바스크립트 엔진을 통해 Javascript를 파싱하여 CSSOM과 AST를 만들어 내고 DOM과 CSSOM을 통해 렌더 트리를 형성하여 레이아웃을 계산하고 페인팅 되는 일련의 과정들을 통해서 내가 지금 블로그를 작성하고 있는 이 웹사이트, 웹페이지가 보여지고 있는 것이었다. DOM은 또 노드들로 이뤄지고 또 DOM도 상속관계를 맺고 있다는 것도 알 수 있었다. 아직 수준이 많이 부족하여 많은것을 이해하지는 못했지만 그래도 대략적인 큰 그림은 이해할 수 있었다. 그리고 정말 정교하다라는걸 다시 한번 느낀 것 같다. 

 

  이 이외의 REST API, 제너레이터, 비동기 프로그래밍, DOM등에 대해서는 개념만 정확하게 이해하려고 노력했다. 책을 읽었는데, 솔직히 뭘 읽은건지 모르겠는 내용이 정말 많았던것 같다. 실행 컨텍스트를 공부할때 까지만해도 자신감이 조금은 생겼었는데, 이번주는.. 얼마나 내가 부족한지 절실히 깨닫는 주가 아니었나 싶다.. 그치만 계속 보고 또 보면 이해가 어려웠던 부분도 깨닫는날이 올거라는 생각으로 계속해서  공부하고 반복할 것이다!!!! 그래도 뭔가 이 두꺼운 책을 끝까지 봤다는 생각에 뿌듯하긴 하다 ㅎ 

 

 

2022.07.26 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 26장 ES6 함수의 추가 기능

26장 ES6 함수의 추가 기능

2022.07.27 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 27장 배열

27장 배열

2022.07.27 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 28장 Number

28장 Number

 

2022.07.27 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 32장 String

32장 String

2022.07.27 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 34장 이터러블

34장 이터러블

2022.07.28 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 35장 스프레드 문법

35장 스프레드 문법

2022.07.28 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 36장 디스트럭처링 할당

36장 디스트럭처링 할당

2022.07.28 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 37장 Set과 Map

37장 Set과 Map

2022.07.28 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 38장 브라우저의 렌더링 과정

38장 브라우저의 렌더링 과정

2022.07.28 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 39장 DOM(노드들로 구성된 트리 자료구조)

39장 DOM(노드들로 구성된 트리 자료구조)

2022.07.29 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 42장 비동기 프로그래밍

42장 비동기 프로그래밍

2022.07.29 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 44장 REST API(※단순 개념만 정리)

44장 REST API(※단순 개념만 정리)

2022.07.30 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 45장 프로미스(※단순 개념만 정리)

45장 프로미스(※단순 개념만 정리)

2022.07.30 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 46장 제너레이터와 async/await(※단순 개념만 정리)

46장 제너레이터와 async/await(※단순 개념만 정리)

2022.07.30 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 47장 에러 처리

47장 에러 처리

2022.07.31 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 48장 모듈

48장 모듈