이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://www.youtube.com/watch?v=J-g9ZJha8FE useRef 를 사용하여 디펜던시 문제 해결하기 위와 같은 코드는 리액트 코드를 작성하면서 심심치 않게 볼 수 있습니다. useEffect 안에서 사용하는 함수가 외부 함수라서 이를 useEffect 에 넣어버리고 의존성에 등록해두지 않으면 linter 가 이를 지적할 것입니다. 해당 함수가 업데이트 될 필요가 있다고 합시다. 이때 useEffect 안에서 상태를 바꾸는 로직이 있다면 리렌더링이 수행될 것이고, 해당 외부함수가 useCallback 처리 되어 있지 않으면 매번 아예 새로 생성될 것이기 때문에 무한 렌더링의 수렁에 빠지게 됩니다. 하지만 그렇다고 useCall..

이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. 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 를 직접 활용해보기 위해 간단한 웹사이트를 위한 HTML/CSS/Javascript 파일들을 준비해봅시다. 저는 과거에 제가 사용했던 포트폴리오 웹사이트를 사용하겠습니다. S3 에 파일 업로드 (s3 업로드 방법은 여기서 따로 다루지는 않겠습니다) 별다른 설정 없이 s3 에 index.html 을 비롯한 각종 웹 자원들을 업로드했다면 기본으로 퍼블릭 엑세스가 차단되어 있을 것입니다. 그리고 이건 정적 호스팅을 활성화하더라도 마찬가지입니다. 이제 파일의 접근권한을 이대로 내버려둔채로 정적 호스팅을 위해 Cloud Front 서비스를 이용해봅시다. Cloud Front 도메인 배포 처음 cloud front 를 이용한다면 위와 같은 화면을 보게 될 것입니다. Creat..

간단히 말해서, 직접 만들 수 있는 CDN(Content Delivery Network) 라고 볼 수 있습니다. CDN 은 간단히 말해 세계에 널리 퍼진 중계서버들의 집합이라고 보시면 됩니다. 보통 S3 와 같은 일반적인 정적 호스팅을 통해 웹 컨텐츠를 이용자들에게 제공하게 되면, 예를 들어 한국에 해당 정적 서버를 호스팅하는 컴퓨터가 위치하고 있다고 가정하면 유럽과 같은 다른 먼 나라의 이용자들에게는 한국에 거주하는 이용자들에 비해 빠른 로딩 속도를 제공하기 어려울 것입니다. 물리적인 거리가 증가함에 따라 컨텐츠를 로드하는데 걸리는 시간 또한 증가할 것이기 때문입니다. 이 비효율을 없애기 위해, 전세계에 뿌려져 있는 각종 중계서버들, 즉 CDN이 웹 자원을 대신 전달하는 역할을 해줄 수 있습니다. 프론..

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/%..