본문 바로가기

TIL

 (53)
JS. Closure 그렇다 클로저다. 언제 한번 정리를 해야겠다고 생각했는데, 어디서 보기만 했지 내가 진정 이해하고 있는지 모르겠어서 다시 정리해보려 한다. MDN에서 클로저 검색해 보면 렉시컬 스코프부터 알고 가야된다고 한다. 그래서 간단하게 Lexical Scope에 대해 정리하고 가자. 다음은 MDN에 있는 코드다 var name = "gozilla" function init() { var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다. function displayName() { // displayName() 은 내부 함수이며, 클로저다. alert(name); // 부모 함수에서 선언된 변수를 사용한다. } displayName(); } init(); 결과는 Mozilla라..
Redux, Redux-toolkit은? live-memo 프로젝트하면서 리덕스를 사용했는데 원래 Redux를 썼다기보다는 Redux-toolkit을 썼다. 프로젝트를 하면서 리덕스를 처음 접했기 때문에 구글에서 요즘 Redux-toolkit을 많이 쓰길래 나도 그냥 일단 빠르게 적용하기 쉬워서 쓴 거 같다. 그래서 오늘은 리덕스를 끝장내기보다는 내가 경험한 것들 위주로 정리하고 그 부분들에 대해서 공부를 해봐야겠다. 먼저 시작하기 전에 저번에 말했던 Flux 부터 잠깐 이야기를 다시 해보자. 플럭스 구현체들이 나오기 시작했고 리덕스도 그중 하나라고 했다. 그럼 이 둘의 차이점은 무엇이고 왜 써야 하는가? 그에 대한 답변을 StackOverflow에서 찾아왔다. 자세한 건 가서 읽는 게 나을 거 같고 가장 큰 이유는 내가 보기엔 Reducer가..
JS. 자바스크립트 번들러 그전에 모듈 시스템 번들러에 대해 공부하다가 정말 엄청난 글을 알게 되었다. 이 글 또한 너무 재밌게 읽어서 공유해 보려고 한다. 일단 읽고 오자 https://wormwlrm.github.io/2020/08/12/History-of-JavaScript-Modules-and-Bundlers.html JavaScript 번들러로 본 조선시대 붕당의 이해 - 재그지그의 개발 블로그 JavaScript 모듈 표준화의 제안부터 현대 모듈 번들러 등장까지의 역사를 정리해봅니다. wormwlrm.github.io 이 글을 기반으로 정리를 하려고 한다. 자세한 스토리 흐름은 글에 있으니 간단히 정리해 보겠다. 먼저 모듈 시스템부터. 자바스크립트는 처음에 아주 기본적인 모듈 시스템만 제공했다. 단순히 순서대로 브라우저가 로드하는 방식이었..
JS. 코드 스플리팅 그리고 트리 쉐이킹 사실 이건 번들러에 대해 공부하다가 코드 스플리팅이란 걸 알게 되었는데, Live memo 프로젝트 기억이 나면서 정리가 필요할 거 같아서 작성해 본다. 먼저 간단하게 코드 스플리팅의 정의를 적고 가자. 코드 스플리팅은 말그대로 코드 분할인데 성능 개선 관련하면 나온다. 번들 코드를 분할하는 건데, 웹앱을 만들면 웹팩 같은 번들러가 코드를 번들하고, 번들된 코드를 브라우저에서 실행한다. 근데 이게 크기가 커질수록 성능이 안 좋아 지니까. 코드를 분할하는거다. 모든 코드를 한 번에 불러오지 않고 사용자가 필요로 할 때에 필요한 코드만 불러오는 개념이라 한다. 기존에 import 구문을 실행코드로 내려서 사용한다 밑에처럼. 이걸 dynamic import라고 한다. import('./somthing').th..
JS. 프로토타입 일단 프로토타입 시작하기 전에 밑에 글부터 읽고 오면 좋을 거 같다 너무 재미있게 읽은 글이다. 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 그리고 정리를 한번 하고 마지막에 ..
JS. 자바스크립트 실행컨텍스트 사실 다른 블로그에서 정리가 잘 되어 있어서, 안 하려고 했는데 다음 글을 위해 정리 좀 하려고 한다. 일단 개념들은 자바스크립트 Deep Dive를 기반으로 정리를 할 것이다. 하나하나가 내용이 좀 많기 때문에 적당히 흐름대로 정리하려고 한다. 그럼 시작하자 먼저 자바스크립트 실행 컨텍스트 부터 시작해보자, 아 그전에 간단하게 자바스크립트 런타임에 대해 이야기 하겠다. 런타임이란 해당 프로그래밍 언어로 작성된 코드가 구동되는 환경인데 , 자바스크립트에서는 크게 자바스크립트 엔진과 웹 api로 이뤄져 있다 보면 된다. 엔진은 크게 메모리 힙과 콜 스택으로 이뤄져 있다. 런타임으로는 우리가 아는 브라우저랑 Node가 있을 것이다. v8 엔진을 쓴다고 한다. 자바스크립트는 단일 쓰레드로 동작한다고 하는데, ..
Flux 그전에 MVC Flux를 하기 전에 MVC를 안 하면 찝찝할 거 같아서 MVC부터 보련다. 길게 다 정리하고 싶다만 그건 구글에 넘쳐서 나는 내 생각 정리나 해야겠다. MVC 정의부터 보고 가자 모질라에서는 다음과 같이 말한다 MVC (모델-뷰-컨트롤러) 는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있습니다. 이러한 "관심사 분리" 는 더 나은 업무의 분리와 향상된 관리를 제공합니다. MVC에 기반을 둔 몇 가지 다른 디자인 패턴으로 MVVM (모델-뷰-뷰 모델), MVP (모델-뷰-프리젠터), MVW (모델-뷰-왓에버) 가 있습니다. 모델: 데이터와 비즈니스 로직을 관리합니다. 뷰: 레이아웃과 화면을 ..
JS. Iterable과 Iterator 그냥 지나치면서 잠깐잠깐 봤던 개념들 언젠가 한번 정리하려고 했다. 그게 바로 투데이. 우선 이 개념을 접했을 때 내가 아는 느낌으로는 반복할 수 있는 객체들을 이터러블 하다고 하는 거 아니야?라고만 생각했다. 근데 뭔가 정의스럽지 않으니 멋진 말로 다시 한번 정의해보자 자바스크립트 deepDive라는 책에서는 다음과 같이 이야기한다. ES6에서 도입된 이터레이션 프로토콜(iteration protocol)은 데이터 컬렉션을 순회하기 위한 프로토콜(미리 약속된 규칙)이다. 이터레이션 프로토콜을 준수한 객체는 for…of 문으로 순회할 수 있고 Spread 문법의 피연산자가 될 수 있다. 이터레이션 프로토콜에는 이터러블 프로토콜(iterable protocol)과 이터레이터 프로토콜(iterator pro..

티스토리툴바