Hengxi's 개발 블로그

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

프론트엔드 개발자로 실무에서 일을 시작하고 생각보다 프론트엔드 개발자로서 개발에 있어 '사용자 경험'이 매우 중요하다는 것을 깨닫고 자연스럽게 사용자 경험에 대해서 고민을 하게 되었다. 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%는 먹고 들어간다고 한다.(실화...?) 프런트엔드라는 분야가 나온 지 시간이 좀 흘러 몇몇 사람들은 성능 최적화에 관심을 가지고 있지만 아직 전반적..

이번에는 이미지 크롭 기능을 구현해보았다. 여러 라이브러리가 있겠지만, 사용하기 쉽고 간단한 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 }..

현재 진행하는 프로젝트에서 이메일 자동완성 기능을 필요로 하여 기능 구현을 해보았다. 처음에는 구글링을 하면 간단하게 구현할 수 있을 것이라고 생각했지만, 이메일 자동 완성 기능을 구현해 놓은 코드는 없었다... 그래서 HTML에 datalist 태그를 이용하여 간단하게 구현을 했는데, 안타깝게도 스타일을 줄 수 없어 빠꾸 먹고... javascript로 열심히 기능을 구현했다. 아래는 쿠팡의 로그인 화면으로 이메일 자동완성 기능을 쿠팡처럼 구현하고자 했다. 자주 사용하는 이메일 리스트와 기능 구현에 필요한 state 선언 const FrequencyEmails = [ '@naver.com', '@gmail.com', '@daum.net', '@hanmail.net', '@yahoo.com', '@out..