다음의 글을 번역했습니다. 학습을 위해 번역하여 많은 부분을 생략하였습니다. https://blog.isquaredsoftware.com/2021/01/context-redux-differences/ Context와 Redux 이해하기 어떤 도구든 올바르게 사용하기 위해, 다음을 이해하는 것이 중요하다. 도구의 목적 도구가 해결하고자 하는 문제 언제 그리고 왜 이 도구가 생겨났는지 또한 현재 자신의 애플리케이션에서 해결하려는 문제가 무엇인지 이해하고, 이 문제를 해결하기 위한 도구를 선택하는 것 또한 중요하다. 컨텍스트와 리덕스에 대한 대부분의 혼란은 이러한 도구가 실제로 어떤 기능을 하는지, 어떤 문제를 해결하는 지에 대한 이해 부족에서 비롯된다. 따라서 실제로 언제 사용해야 하는지 알기 위해서는 먼저..

코드스쿼드 과정 중 바닐라 자바스크립트로 옵저버패턴을 통해 데이터 바인딩을 시도한 적이 있다. 하지만 Observable이 관리하는 observers에 이미 사용되지 않는 observer들이 누적해서 쌓이는 문제가 있었다. 명시적인 unsubscribe로 제거해주면 되지 않을까? 옵저버 패턴의 메모리 누수 (memeory leak)에 대해 검색해 봤을 때 많은 글에서는 다음과 같은 해결법을 말하고 있었다. 참고로 TS를 사용한다면 Updatable 인터페이스를 정의했을테지만, 글의 간략함을 위해 JS로 작성한다. class Observable { constructor() { this.observers = []; } subscribe(observer) { this.observers.push(observer..

기존 번들러의 어떤 점이 문제였을까? 기존의 번들러들 (Webpack, Parcel, Rollup, … )들은 기존 모듈 시스템들의 문제점을 해결해주었지만, 이제는 속도가 문제가 되었다. Vite의 공식문서에서는 이런 차세대 번들러가 어떤 문제를 해결하는지 명확히 알려주고 있다. “하지만 애플리케이션이 점점 더 발전함에 따라 처리해야 하는 JavaScript 모듈의 개수도 극적으로 증가하고 있습니다. 심지어 수천 개의 모듈이 존재하는 것도 대규모 프로젝트에서는 그리 드문 일이 아닙니다. 이러한 상황에서 JavaScript 기반의 도구는 성능 병목 현상이 발생되었고, 종종 개발 서버를 가동하는 데 비합리적으로 오랜 시간을 기다려야 한다거나 HMR을 사용하더라도 변경된 파일이 적용될 때 까지 수 초 이상 소..

ESM의 동작 방식을 매우 잘 설명한 글이 있다. 아래의 이 글을 번역하였다. (토스 기술 블로그에 더 잘 번역한 글이 있다.) https://ui.toast.com/weekly-pick/ko_20180402 ESM의 동작 방식 모듈을 사용하여 개발할 때 import문에 의하여 의존성 그래프가 생성되게 된다. entry point로 지정한 파일로부터 import 문을 쭉 따라가면 나머지 모든 코드들을 찾을 수 있게 된다. 하지만 파일 자체는 브라우저가 해석할 수 없다. 따라서 파일들을 Moudle record라고 하는 자료구조로 변경해야 한다. 그 후에 Module record를 Module instance로 전환하게 된다. Module instance는 코드와 상태라는 두 가지를 결합하게 된다. 코드는..

1주차 cs 과정이 끝나고 오프라인으로 처음 동료들의 얼굴을 봤던 1주차. 모든게 어색했다. 적응하느라 바빴고 cs 과정동안 javascript 코드만 작성하다 html, css를 다시 작성하려니 꽤나 걱정이 앞섰다. 사람들이랑은 어색해 질문도 하지 못했고 내가 기대한 코드스쿼드의 모습과는 달라서 잠깐의 후회도 있었던 듯 (물론 현재는 단 1의 후회도 없다. 혼자 했으면 못했을 공부를 너무 많이 한다). 지금은 말을 너무 많이해서 문제지만..ㅋ 1주차때 난 어떤걸 학습했고 어떤 문제들을 마주쳤었지? 기억을 되살려보려고 한다. 풀리퀘 언제나 손에 땀을 쥐게 하는 git. 나름 강의도 듣고 꽤 다양한 명령어 옵션들도 노션에 정리해놨는데 막상 내 프로젝트에서 revert나 reset을 적용하기 전엔 긴장이 돼..