본문 바로가기

TIL

This Month. 1월

오늘은 어제의 week 복습에 이어서 이번 한 달 공부한 내용들을 돌아보자. 면접 준비한다고 쓴 것들이랑 여러 가지 글들이 너무 많아서 일단은 리스트로 보자.

  • DOM
  • 자바스크립트 관련 글들(실행 컨텍스트, 엔진, 히든 클래스, 이터러블,프로토타입, 클로저, 모듈 등)
  • 타입스크립트 관련 글들( 타입스크립트에 관해, 인터페이스, 제네릭, 설정, 코드 생성 관계)
  • 리액트 최적화 관련 훅들 ,리덕스 간단한 개념
  • CSR, SSR, FLUX 
  • DI, DIP개념

이번 달이 특별히 많을 수도 있다. 이전에 정리했던 글들을 블로그에 다시 쓰면서 몰아서 쓴 경향이 있다. 이걸 앞으로 어떻게 해야 될지 명확하지 않은데, 그래도 한 번씩 더 보면서 복습을 하면 그것만으로도 충분히 의미가 있다고 생각이 든다. TWIL은 미처 정리하지 못한 부분들을 좀 썼는데, TMIL은 최대한 복습 위주로 가야겠다.

그럼 DOM부터 보자.

먼저 DOM이란 문서 객체 모델로 html, xml 등 문서의 프로그래밍 인터페이스다. 구조화된 nodes와 property와 method를 갖고 있는 objects로 문서를 표현.  쉽게 말해서 프로그래밍 언어로(자바스크립트 같은) 접근하여 조작할 수 있게 해 준다. 우리가 흔히 이야기하는 브라우저에서 렌더링 하는 과정에서 DOM이 만들어진다. DOM 노드들은 Node클래스를 상속받는다. DOM의 개념적 핵심은 동적으로 컨텐츠를 제공하고 사용자와 상호작용 하는 것이다.  DOM의 디테일한 인터페이스들은 강의를 들의 면서 따로 정리해야겠다.

 

자바스크립트

내가 기존에 정리한 실행 콘텍스트는 ES3를 기반으로 작성되었음 개념은 비슷하긴 한데 지금은 scope chain과 activation object 부분이 lexical environments 개념으로 바뀜.
자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 마치 객체지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메서드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 프로토타입 객체라 한다. 그리고 확실히 생성자 함수를  class 형태로 정의하면 좀 더 익숙해 보인다. 그리고 새로 알게 된 부분은 class도 var처럼 선언과 동시에 초기화하지 않고 let, const처럼 호이 스팅 된다고 한다. 근데 ES6에서 클래스 추가한걸 별로 좋게 보진 않는 거 같다.  프로토타입 관련은 이 글을 다시 한번 잊을만하면 읽으면 좋을 거 같다 https://medium.com/@limsungmook/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%99%9C-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85%EC%9D%84-%EC%84%A0%ED%83%9D%ED%96%88%EC%9D%84%EA%B9%8C-997f985adb42

 

자바스크립트는 왜 프로토타입을 선택했을까

프로토타입으로 검색하면 으레 나오는 서두처럼 저 또한 자바스크립트를 처음 접했을 때 가장 당황스러웠던 게 프로토타입이었습니다.

medium.com

클로저를 간단히 정리해 보면 이전의 정리한 실행 콘텍스트 그림을 떠올려 보면 개념은 비교적 이해가 쉽게 간다. 정의는 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합이라고 하는데, 조금 더 이야기하자면 반환된 내부 함수가 선언됐을 때의 환경인 스코프를 기억하여 자신이 선언됐을 때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수를 말한다. 밑의 그림을 보면 쉽게 이해 간다.

 

Redux , Flux는 밑에 글 보면 좋을듯.

https://bestalign.github.io/translation/cartoon-intro-to-redux/

 

Redux로의 카툰 안내서

원문: https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6 Flux를 더 혼란스럽게 만드는 것은 Flux 그 자체보다는 Flux와 Flux에서 영감을 받아 만들어진 Redux…

bestalign.github.io

DI, DIP 는 IoC 보면서 다시 정리하고 클린 아키텍처 보면서 한번 더 봐야 겠다.

비교적 기억이 잘 안나는 부분을 살펴봤다. 너무 간단히 정리한 글들은 나중에 따로 추가해야 될 거 같다. 한 달을 되돌아보는 시간을 가져보니, 생각보다 정리할게 너무 많다. 지금은 정말 줄여서 정리하긴 했는데 쉽지 않다. 아직 처음이니까 일단은 계속 진행하고, 시간이 좀 지날수록 블로그 내용이 너무 겹치는 것도 있으니까 개인 복습은 그냥 따로 정리하고 한 달을 되돌아보며 간단히 반성하는 시간을 갖는 방향으로 가야겠다.

 

참고 및 출처: https://poiemaweb.com/js-closure