useLayoutEffect는 useEffect와 다르게 렌더링 전에 callback을 실행함으로서, callback 내부에서 view에 그려질 데이터가 변경되어도 해당 view 부분에서 깜빡임이 발생하지 않는다는 장점이 있다.따라서 무적권 useLayoutEffect

chrome devtools의 network탭을 보면 waterfall이 다채로운 색과 함께 늘어져있는 걸 볼 수 있다. hover하면 나타나는 tooltip에서 각 항목들이 의미하는 바와 time이 어떤 항목들로 계산된 값인지 기록해보고자 한다.(시간으로 표기되는 항

https://tech.kakao.com/2020/12/01/frontend-growth-02/ 위 글에서 보면 commonJS와 ESModule을 함께 사용하기 위해서 @babel/plugin-transform-modules-commonjs, 즉 preset-env

CRA로 만든 프로젝트에서, Dynamic import를 이용한 code splitting은 굉장히 쉬웠다. CRA를 쓰지 않은 프로젝트에선 어떻게 해야하는지 정리해본다. @babel/preset-env에는 기본적으로 dynamic-import를 트랜스파일링할 수 있

commonJS 모듈을 esm방식으로 import할 경우, 컴파일 결과에 \_\_importStar와 \_\_importDefault를 추가해주는 옵션. moment의 경우, commonJS 모듈로 export하기 때문에 위와 같이 작성하면 밑줄과 함께 에러를 알려준

useCallback은 인자로 넣은 함수를 memoizing해서 component가 re-rendering 될 때 재정의되는 것을 막아준다.사용 시에 함수 내부에서 사용한 state를 반드시 dependencies에 넣어줘야 정상적으로 동작하는데, 그럴거면 왜 넣는건가

Context API는 상태관리도구가 아니다 흔히 상태관리도구로 알려진 Redux와 Mobx는 Context API와 결이 다르다. Context API의 경우, 1)

TodoContext.js가 처음으로 commit되었을 때, src/Shared 라는 directory안에 있었다.다른 폴더들은 전부 소문자로 시작하는 반면에, Shared 혼자 대문자로 시작하는 게 눈엣가시였다.checkout으로 이전 커밋으로 돌아가 폴더명만 살짝

렌더링 최적화 수단으로 많이 사용되는 3가지가 있다.3가지에 대해서 알아보자.React는 이전에 rendering된 결과와 비교해서 DOM Update를 결정한다. 만약 이전과 다르면 DOM을 업데이트할 것이다.이전 렌더링 결과와 현재 렌더링 결과를 비교하는 과정은 빠

코드를 실행되기 위해 필요한 환경으로, LIFO 특징을 갖는 Stack으로 관리된다.코드가 실행되면 전역 실행 컨텍스트부터 스택에 쌓이게 되고, 함수가 실행되면 그 위에 해당 함수의 실행 컨텍스트가 쌓인다. 함수실행이 끝나면 해당 함수의 실행

너무도 당연한 얘기를 실험과 함께 정리해보고자 한다.솔직히 React를 쓰면서, 'state가 바뀌면, re-rendering이 됩니다!' 정도만 알고 코딩했던 것 같다. 하지만 그런 와중에도'rendering이 적게 일어나게 하려면 state를 어떤 식으로 나눠야 할

지난번에 진행했던 모의 면접의 꼬리 질문으로,"var는 함수 스코프라고 했는데, 그럼 전역에서 선언하면 못읽어야하지 않나?"가 있었다.답변을 하기 위해 짧은 시간동안 머릿속을 굴려봤지만, 내 추측일 뿐 명확한 답이 아니었기에 답변하지 못했다.C나 C++는 기본적으로 m

javascript에서 싱글스레드에 대해 설명동기, 비동기란 무엇이며 차이는?array, set, map 차이parameter로 전달한 시간만큼 반복문을 돌다가 특정 문장을 출력하는 함수가 있다. 해당 함수를 setTimeout으로 실행하면 어떤 문장들이 출력되는지,

bundler는 연관된 파일들을 하나로 묶어주는 도구를 말한다.사용하는 이유는 여러가지 있겠지만, 일반적인 이유는 요청할 resource를 줄여줌으로서 network cost를 줄일 수 있다는 이점때문일 것이다.이에 반해, 성능 최적화를 위한 전략으로 code spli

2021.07.18 - https://velog.io/@bandor/20210718-TIL미니프로젝트 주간은 굉장히 정신없었다. 밥먹고 운동하거나 쉬는 시간도 없이 계속 코딩했다. 특히 마감과 가까워질수록 더욱 몰아쳤다. 같이 하는 FE 팀원분에게도 알려드리고

실시간 통신을 가능케하는 웹소캣을 쉽게 사용할 수 있도록 돕는 라이브러리.애초에 HTTP 프로토콜은 TCP처럼 연결이라는 개념이 존재하지 않는다. 흔히 상태가 없는, stateless라는 특징이 대표적인 예시이다. client와 server가 한번 요청-응답을 받으면

2021.07.05 - https://velog.io/@bandor/20210705-TIL2021.07.07 - https://velog.io/@bandor/20210707-TIL2021.07.08 - https://velog.io/@band

지난 주 TIL에서 무한 스크롤을 구현하고 정리했었다.이번 과제에도 무한 스크롤이 있어서, 강의에서 나온 방법말고 이전에 구현했던 방법으로 시도했었지만 잘 동작하지 않았다.이전에 구현했던 방법은 event.target.scrollTop, clientHeight, scr

firebase는 로그인까지 사용할 수 있게 해준다. email 부터 sns(OAuth)까지 다양하게 지원하고 있다.아래의 내용은 사실 공식 문서에 다 나와있다. 하지만 복습 겸 다음 번에도 firebase를 사용할 일이 있으면, 헤매지말자는 의미로 작성해본다.crea

input\[type="file"] 에서 받아온 파일을 읽어주는 API.input\[type="file"] 로 파일을 불러오면 event.target.files\[0] 에 파일정보가 담겨진다. 해당 값을 출력해보면 파일 이름, 크기 등 여러 정보가 나오지만 정작 파일의