총 3가지 예제를 통해서 javascript의 class를 function으로 변환해봅시다. 이게 가능한 이유는, javascript class는 그저 syntactic sugar이기 때문이고, 내부적으로는 function과 prototype의 조합으로 이루어져 있기 떄문입니다. 예제 1. class A { constructor(x,y) { this.x = x; this.y = y; } } 이것은 function으로 다음과 같이 바꿀 수 있습니다. function A(x,y) { this.x=x; this.y=y; } 간단합니다! 그럼 메서드를 추가해봅시다. 예제2. class A { constructor(x,y){ this.x = x; this.y = y; } say(){ return "say"; } ..

IIFE란? Immediately Invoked Function Express. 즉, 즉시 실행함수의 약자이다. 일회성 함수이거나, 모듈간 스코프분리를 위해서 주로 사용한다. 예제는 다음과 같다. // 1 (function () {})() // 2 (function (){}()) // 3 (() => {})() 여기서 한자기 의문이 있다. 2는 왜 되는거지? 일단은 "그냥 된다"라고 설명해두고 다른 질문에 답해보자. // 4 (() => {}()) 4는 왜 안되는 걸까? 2번과 같다고 생각되는데 4번은 되지 않는다. 그 이유는 https://github.com/babel/babel/issues/2118 ArrowFunction: CallExpression not allowed after closing }..

다라쓰의 댓글모듈 부분(reply-module)은 replyModule과 replyModal 이렇게 2개의 entry를 가진다. 왜냐하면 2개의 iframe이 필요하기 때문에, 2개의 페이지가 필요했기 때문이다. 그리고 둘다 공통적인 스타일 요소를 어느정도 가지고 있어서 프로젝트를 분리할 필요성도 없었다. 그 당시 번들을 보면, 위아래가 똑같은 라이브러리들을 가지고 있다. 즉, entry가 2개니까 각각에서 중복으로 사용하고 있던 부분들이 있던 것이다. 반대로 말하면 저것만 해결하면 번들 사이즈는 2배로 줄어들것이라는 뜻이다. 그래서 이리저리 방법을 찾아보고 다녔다. 그 중 module federation이라는 webpack5의 기법을 알아냈고 그것만 있으면 이 문제를 해결할 수 있을 것이라 생각했다. ..

1. simple-react-query에 캐싱기능 추가 react-query의 기능 중 하나인 cache기능을 추가했다. useQuery에서 데이터를 받아오면, QueryClient의 queryCache에 기억시키고, cache가 있다면 강제 refetch하거나, cache시간이 만료되어 제거되었을때 뺴고는 기억된 값을 반환한다. 이제 simple-react-query를 사용하려면 캐싱여부상관없이 QueryClient를 Provider로 Context API사용을해서 내려야한다. 물론 useQuery에서의 캐싱은 자유다. react-query의 캐싱이 default라면 simple-react-query는 cacheTime과 queryKeys를 넣어야 캐싱이 된다는 차이점이 있다. 원래는 캐싱기능을 넣지 ..

다라쓰는 react에서 JSX문법으로 사용할 수 있도록, 별도의 Component를 라이브러리로 제공한다. https://github.com/zereight/darass-react GitHub - zereight/darass-react: Darass reply module for React Darass reply module for React. Contribute to zereight/darass-react development by creating an account on GitHub. github.com 다라쓰 고객사 중의 하나로 https://babble.gg/ 사이트가 있는데, 다크모드를 토글할 수 있는 기능이 있다. 그런데, Darass의 prop이 변경되었는데 다라쓰 컴포넌트는 새롭게 렌더링되..

오랜만에 코드를 만졌다. 면접준비와 이력서, 포트폴리오를 손보고 지식들을 정리하느라 요새 코드를 많이 보지 못했다. 면접까지 남은 시간동안, 그동안 기술부채에 쌓여져있던 부분들을 어느정도 해결하면서 코드를 좀 만지기로 했다. 유지보수도 개발자의 업무이기 때문이닿 첫번째로 https://github.com/zereight/woowacourse-tiny-cra 아주 예전에 만든 custom cra로 javascript와 typescript를 선택하여 create-react-app처럼 동작하는 라이브러리를 만들었었다. 하지만, 이전에는 npx가 지원되지 않았다. 그래서 yarn add woowacourse-tiny-cra 를 한다음에, node ./node-module/woowacourse-tiny-cra/s..

목이 쉴것같다. 오늘 너무 많이 이야기했다. 준의 이력서 워크샵과 동동의 자바스크립트 스터디에 이어서, 11시부터 새벽 2시까지 파노와 각종 자바스크립트 토론과 서로 알고 있는 기술 면접 정보들을 공유했다. 내일 9시에 또 면접스터디가 있다. 7시간 남았다. 그만큼 많은 인사이트들이 있어서 블로그 글로 남긴다. 1. 이력서 워크샵에서 있었던 일 이력서를 작성하기 위해서 필요한 역량들을 끄집어 내는 시간을 가졌다. 준이 3명씩 짝을지어서 줌 소회의실로 매칭을 해주었는데, 일면식없는 두 분이 매칭되었다. 사실 나는 이력서를 써둔 상태였고, 내가 어필할 역량과 경험들이 어느정도 준비된 상태였지만, 다른 두분은 아직 이력서를 쓰지 않은 상태였던것 같았다. 낯선 사람과의 대화가 살짝 무섭기도 했지만, 사람은 트라..

면접 스터디를 진행하다가 많은 사람들이 Vitual DOM이 하는 일을 "정말 변경사항이 일어난 부분만 Real DOM에 반영해주기 위한 기술"이라고 대답을 했다. 물론 맞는 말이긴한데 살짝 설명이 부족하다고 생각을 한다. "Virtual DOM의 꽃은 변경사항을 한번에 모아서 Real DOM에 렌더링하여 렌더링 비용을 절감시키기위한 기술" 이라고 생각하기 때문이다. 실제로 우아한테크코스의 마지막 과제로 나만의 UI 라이브러리를 수행한적이있다. Virtual DOM의 기능을 어느정도 구현하면 되었다. 나는 createNodeIterator 라는 document의 내장 메서드를 사용하여 DOM 객체를 순회하였는데, 변경사항이 일어나면, 실제 DOM과 업데이트 하려는 DOM간의 비교를 통해서 변경사항이 일어..