석훈의 끄적끄적 석훈의 끄적끄적

Why Optimization? 인터넷 없이 살 수 없는 요즘, 웹사이트는 빠르게 로딩되고 반응해야 한다. 사용자가 빠른 웹사이트를 선호한다기 보단, 느리고 기다려야 하는 웹사이트를 싫어하기 때문이다. 또한 서비스를 정상적으로 제공하지 못하는 상황이 올 수 있으므로 최적화는 필수이다... How? 디자인과 마찬가지로 서비스를 제공하는 입장에서는 사용자 관점을 생각하는 것이 좋다. 첫 페이지 렌더링 속도 홈페이지 반응 속도 기능 동작 속도 개발 및 테스트를 진행하다 문득... 내 프로젝트는 왜 이렇게 렉이 걸릴까? 하는 생각이 든다면 최적화의 필요성을 느낄 것이다. 문제를 해결하기 위해선 원인을 아는 것이 가장 중요하다. [진단하기] 무엇 때문에 느려졌는가? 어느 상황에서 느려지는가? 다른 곳에서 영향을 ..

Why Recoil? 리액트에서 상태 관리를 통해 View를 관리할 때, 전역 상태가 필요한 때가 있다. Context API Hook을 통해서 이를 어느정도 해결할 수 있지만 단일 값만 저장할 수 있고 여러 값들의 집합을 담을 수는 없었다. Redux 보통 이를 해결하기 위해 외부 라이브러리로서 많은 사랑을 받은 Redux를 사용했고 필자도 그랬다. 필자가 사용했을 때 Redux는 액션을 통해 상태를 관리하기 때문에 어떤 데이터가 어떻게 변경되었는지 볼 수 있었다. 이를 통해 수월한 테스트를 할 수 있었던 것 같다. 데이터를 저장소에 저장할 수 있어 브라우저가 종료되더라도 상태를 정할 수 있었다. 복잡한 계층구조를 가진 프로젝트라도 간단히 상태관리를 할 수 있었다. 모든 Redux 상태를 확인할 수 있..

자바스크립트는 싱글 스레드로 동작한다! 1. 자바스크립트의 구성 메모리 힙 (Memory Heap) → 메모리의 할당을 담당한다. 콜 스택 (Call Stack) [LIFO] → 코드가 호출이 되어 스택으로 쌓인다. Single Thread? → 하나의 Main Thread, 하나의 Call Stack을 가진다는 뜻 비동기는 자바스크립트의 런타임이 아닌 자바스크립트 런타임 환경에서 비동기 API를 지원한다. 2. 자바스크립트 런타임 환경 런타임 환경은 프로그래밍 언어가 실행되는 환경을 뜻한다. 브라우저 node JS Javascript의 엔진과 외부의 런타임 환경들이 조합되어 코드를 실행하게 된다! 3. 자바스크립트 동작 자바스크립트는 싱글 스레드이기 때문에 코드를 순차적으로 실행한다. 실행해야 할 작업..