Hengxi's 개발 블로그

React Hooks에서 가장 많이 사용되는 useState...! 가장 많이 사용하고 있음에도, useState가 정확히 어떻게 동작하는지 생각해 본 적이 없는 것 같다. React를 깊게 공부해보고 싶었고 이번 기회에 useState의 동작 원리에 대해 정리를 해보고자 했다. 클로져(Closure) 그전에 useState를 이해하기 위해 javascript의 개념인 클로져를 알고 가면 좋을 것 같다. 클로져는 자신이 사용하는 변수를 기억하고 어딘가에 저장해두는 특성이 있다. 변수를 Capture 한다고 하며, 일반적으로 사라져야 할 변수라도 어떤 클로져에서 사용된다면 사라지지 않고 잡아 붙들린 것이라고 보면 되겠다. function outer() { let outerVar = 1; function i..

이 두 가지 방법 모두 DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트(event)를 제어(제한)하는 프로그래밍 기법이다. 웹/앱 사용자가 스크롤(scroll wheel), 트릭 패드, 스크롤 막대를 드레깅 한다고 하면, 사용자는 크게 느끼지 못할 수 있으나 이 행위로 인해 수많은 스크롤 이벤트가 발생하게 된다. 이때 매번 스크롤 이벤트에 대한 콜백(callback)이 발생하고 그 콜백이 수행하는 일은 매우 큰 리소스를 잡아먹게 될 것이다. 디바운싱과 쓰로틀링은 이벤트가 과도한 횟수로 발생하여 이벤트 핸들러가 무거운 연산을 수 없이 많이 수 행하는 경우에 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 하는 기술이다. 디바운싱 연이어 ..

프론트엔드 개발자로 실무에서 일을 시작하고 생각보다 프론트엔드 개발자로서 개발에 있어 '사용자 경험'이 매우 중요하다는 것을 깨닫고 자연스럽게 사용자 경험에 대해서 고민을 하게 되었다. Concurrent UI Pattern에 대해서 알게 되었고 React Query와 함께 Concurrent UI Pattern을 도입하는 방법이라는 카카오페이 Tech Log의 글을 보게 되었다. 많은 공부가 되었다고 생각하여 개인적으로 정리를 해보고자 했다. Concurrent UI Pattern 이란 리액트 공식 문서 - Concurrent 모드에 대해 리액트 공식 문서를 보면 Concurrent 모드에 대한 도입이 실험적 단계로 진행되고 있다고 한다. 그렇다면 이 Concurrent 모드는 무엇이고 왜 등장한 것일..

웹 성능 최적화 방법 2 애니메이션 최적화(Reflow, Repaint) 컴포넌트 Preloading 이미지 Preloading 1. 애니메이션 최적화 (Reflow, Repaint) 애니메이션 원리 연결된 동작을 하는 그림을 빠르게 보여주면 이전 그림이 뇌에서 사라지기 전에 다음 그림을 보면서 연결된 것처럼 받아들이는 원리 일반적인 모니터의 경우에는 1초에 60 FPS(1초에 이미지를 표현할 수 있는 개수)로 이미지를 표할 할 수 있는데, 브라우저도 이에 맞춰 초당 60 FPS으로 렌더링을 하려고 한다. 요즘 좋은 모니터의 경우에는 144 FPS까지 가능하다. 브라우저가 렌더링을 하는 과정에서 특정한 이유를 통해서 한 번의 이미지를 표현할 수 있는 프레임이 작아진다면(30 FPS나 20 FPS가 된다면..

웹 성능 최적화는 왜 필요할까? 1. 사용자가 떠나지 않도록 하기 위해( 수익 증대 ) 프런트엔드 개발자라면 상식적으로 다 알고 있듯이 페이지가 뜨는 시간이 늦어지면 서비스를 사용하는 사용자들은 점점 떠나갈 것이다. 반대로 성능이 좋아져서 사용자들이 우리 서비스에 오래 머문다면 그만큼 서비스에서 창출할 수 있는 수익은 증대할 것이다. 2. 프런트엔드 개발자로서, 경쟁력을 갖추기 위해 프런트엔드 개발을 하다 보면 일반적으로 어디서나 비슷한 일을 하게 되는데... 거기서 브라우저를 이해하고 웹 성능을 최적화할 수 있다면? 일단 프런트엔드 개발자 중에 상위 10%는 먹고 들어간다고 한다.(실화...?) 프런트엔드라는 분야가 나온 지 시간이 좀 흘러 몇몇 사람들은 성능 최적화에 관심을 가지고 있지만 아직 전반적..

일급 함수 일급 함수는 함수를 값으로 다룰 수 있는 개념을 말한다. 1. 변수에 함수 담기 var f1 = function(a) { return a * a }; console.log(f1); // function(a) { return a * a } 자바스크립트에서는 위처럼 변수에 함수를 담을 수 있다. 2. 함수를 인자로 받기 function f3(f){ return f(); } console.log(f3(function() { return 10; })); // 10 console.log(f3(function() { return 20; })); // 20 f3 함수는 함수를 인자로 받아 함수 내부에서 함수를 평가 후 그 결과를 return 하는 함수이다. 이러한 일급 함수라는 개념과 순수 함수라는 특징을..

함수형 프로그래밍 정의 함수형 프로그래밍은 성공적인 프로그래밍을 위해 부수효과를 미워하고 조합성을 강조하는 프로그래밍 패러다임이다. 부수 효과를 미워한다 -> 순수 함수를 만든다. 조합성을 강조한다 -> 모듈화 수준을 높인다. 순수 함수 -> 오류를 줄이고 안정성을 높인다. 모듈화 수준이 높다 -> 생산성을 높인다. 순수 함수 function add(a,b){ return a+b; } console.log( add(10, 5) ); // 15 console.log( add(10, 5) ); // 15 console.log( add(10, 5) ); // 15 함수 add는 순수 함수이다. 그 이유는? 1. 항상 동일한 인자를 주면 동일한 결과를 return 하기 때문 2. 부수효과가 없기 때문(함수가 r..

이번에는 이미지 크롭 기능을 구현해보았다. 여러 라이브러리가 있겠지만, 사용하기 쉽고 간단한 react-easy-crop이라는 라이브러리를 사용했다. 라이브러리 사용보다는 스타일을 커스텀하는 게 더 어려웠던 듯...ㅎ react-easy-crop 공식 github https://github.com/ricardo-ch/react-easy-crop 기본 예제 코드들을 볼 수 있어 많은 도움이 되었다. 완성된 영상부터 올려보았다. 일단 기본적인 설치부터 하자 yarn add react-easy-crop or npm install react-easy-crop --save image crop 컴포넌트 만들어주기 //imageCropper.js import React, { useCallback, useState }..