이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://www.youtube.com/watch?v=cCOL7MC4Pl0 이벤트 루프란? 자바스크립트의 단일 스레드 환경에 맞춰서 비동기 처리와 이벤트 핸들링을 수행하는데 사용되는 제어방식입니다. 간단히 설명하자면, 끊임없이 콜스택의 상태를 감지하며 태스크 큐의 콜백을 콜스택에 밀어넣는 방식입니다. 왜 자바스크립트는 단일스레드 방식을 택한 것일까? 이벤트 루프의 배경에는 흔히 자바스크립트가 '단일 스레드로만 동작한다'는 사실이 깔려 있습니다. 하지만 다른 언어들은 스레드를 나누는 일이 흔한데, 왜 하필 자바스크립트는 단일 스레드를 고집하는 것일까요? 이는 자바스크립트의 주요 실행 환경이 브라우저라는 점에 기반합니다. 이용자가 발생시킨 이벤트와 서..

컨셉트 기본적인 사용법은 리액트와 유사하게 구성하였습니다. 기존의 JSX 문법이 아닌 독자적인 문법을 한번 고안해보고 싶어서 함수 컴포넌트가 객체가 아닌 제가 template 이라고 명명한 특수한 형식의 문자열을 return 하도록 지정했습니다. import useState from "../lib/hooks/useState"; import Counter from "./Counter"; const App = () => { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; const onReset = () =..

Cloud Front 의 자세한 사용법에 대해 알고 싶다면 다음의 두 글을 참고하시기 바랍니다 (이 글을 읽으려면 Cloud Front Quick Start 글의 캐싱 정책 설정 부분만이라도 읽어보시길 권장드립니다). https://codingmoondoll.tistory.com/entry/Cloud-Front-%EB%9E%80 Cloud Front 란? 간단히 말해서, 직접 만들 수 있는 CDN(Content Delivery Network) 라고 볼 수 있습니다. CDN 은 간단히 말해 세계에 널리 퍼진 중계서버들의 집합이라고 보시면 됩니다. 보통 S3 와 같은 일반적인 정적 호 codingmoondoll.tistory.com https://codingmoondoll.tistory.com/entry/%..

이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://www.youtube.com/watch?v=4YCBBoSg2fk 웹 어플리케이션의 폰트는 어느 이용자의 컴퓨터에나 설치되어 있을만한 기본 폰트를 사용해도 좋지만 디자인 등의 다른 요소를 고려해서 외부의 폰트를 다운로드 받아 적용하는 것이 일반적입니다. 하지만 단순히 인터넷에서 가져다 쓰는 웹 폰트는 최적화가 안되어 있는 경우가 많아 실제로 적용이 되기 까지 오래걸리는 경우가 많습니다. 특히 알파벳을 일렬로 나열할 뿐인 영어와는 다르게 한국어와 같이 글자들을 조합해서 사용하는 폰트들은 엄청난 용량을 자랑하는 만큼, 반드시 최적화를 해줘야 합니다. 게다가 설정에 따라, 웹폰트가 적용되기로 지정된 문자들은 웹폰트가 다운로드 되기까지 아예 글자..

이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://jeonghwan-kim.github.io/series/2020/01/02/frontend-dev-env-webpack-intermediate.html https://www.youtube.com/watch?v=2QYpkrX2N48 https://developer.mozilla.org/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images 어플리케이션에서 이미지가 차지하는 비율은 절반을 넘어가는 일이 많습니다. 그만큼 이미지를 압축하는 일은 이용자가 웹사이트의 컨텐츠를 빨리 받아보기 위해 아주 중요한 일입니다. 이번에도 이미지를 압축할 수 있는 가장 간단하고 유용한 방법을 먼저 선택하..

이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://medium.com/humanscape-tech/react에서-해보는-코드-스플리팅-code-splitting-56c9c7a1baa4 https://ui.toast.com/weekly-pick/ko_20180716 자바스크립트 코드 분할 자바스크립트 코드를 분할하는 방식에는 정말 여러가지가 있지만, 그 중 가장 간단하고 유용하다고 생각되는 방식을 적용해보겠습니다. 그것은 바로 동적 import + React.lazy 메서드 + React.Suspense 컴포넌트를 조합해서 사용하는 것입니다. 참고로 동적 import 를 사용하기 위해서는 @babel/plugin-syntax-dynamic-import 패키지가 필요하고 이를 바벨에 적용하..