웹사이트를 개발할 때 성능 최적화는 고려할 사항 중 하나이다. 다양한 기기와 네트워크 환경에서 웹사이트가 원활하게 작동하도록 설계하는 일은 개발자가 해야할 중요한 부분이다. 컴퓨터와 스마트폰 사양이 높아지면서 이정도까지 신경을 써야하나 의문이 생길 수 있지만, 모든 사용자가 그러한 환경을 가지고 있지 않는 점에서 성능 최적화는 여전히 중요하다.  웹사이트의 성능 저하는 사용자 경험을 크게 떨어뜨리며, 페이지가 늦게 로드되거나 상호작용이 느려질수록 이탈률이 높아질 수 밖에 없다. 그렇기 때문에 우리들은 늘 최악의 경우를 염두에 두고, 가능한 빠르고 효율적인  환경을 제공해야 한다.  그러한 의미에서 성능 최적화 중 하나인 메모이제이션(Memoization)을 통해 성능을 어떻게 개선할 수 있는지 알아보려고..

프론트엔드 개발에서 중요한 요소 중 하나는 성능이다. 상태를 "효율적"으로, "불필요한" 작업이 발생하지 않도록 신경써야하며, CSS 애니메이션 작업 시 width, top 대신 transform을 사용하는 등 최적화가 필요하다. 이런 여러 가지 고려사항을 깊게 파고들다 보면, 결국 렌더링의 문제에 도달하게 된다.  상태를 효율적으로 관리하고, CSS를 통해 최적화된 애니메이션을 구현하려면, 브라우저가 렌더링을 어떻게 처리하는지 이해하는 것이 필수적이다. 단순히 문제를 해결하는 것을 넘어서, 그 문제가 발생하는 원인을 정확히 알아야 진정한 해결책을 마련할 수 있기 때문이다.  그래서 우선 렌더링에 대한 깊은 이해를 바탕으로, 상태 관리와 CSS 최적화에 대해 다시 한번 살펴보려고 한다. 브라우저의 렌더링..

디바운싱 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식을 디바운싱이라고 말한다. 주로 마지막 또는 첫 번째로 처리된 함수를 처리하는 방식으로 사용한다.  정리하면 특정 시간 이내, 추가 이벤트가 없는 경우, 첫 번째 ( 또는 마지막 ) 1회만 실행하는 방식이다.  검색창에 글을 입력하면 검색 결과가 바로 나오는 기능을 본 적이 있을 것이다. [ 검색하기 ]라는 트리거가 입력이 되면 바로 실행되기 때문에 특별한 작업이 없다면 입력을 할 때마다 API를 호출하기 때문에 비용과 성능적인 측면 모두 좋지 않은 방법이다. 이런 문제를 해결하기 위해서 디바운싱을 사용한다. ※ 쓰로틀링 연이어 발생한 이벤트에 대해서 일정한 delay를 포함시켜, 연속적으로 발생하는 이벤트를 무시하는 방식으로 사용한다...

동료의 코드 리뷰를 하면서 동일한 css 파일이 같은 페이지 내에서 여러 곳에서 호출되고 있었다. css 파일이기 때문에 공통의 부모 요소에만 호출하면 동일하게 호출이 될 것이라서 해당 방식이 잘못 됐다고 생각했다.  근데 이런 부분 말고도성능상에도 손해가 있을 수 있지 않을까?  라는 생각이 들었다. 같은 파일을 중복으로 호출하면 페이지 내에서 동일한 CSS 파일을 여러 번 요청하기 때문에 그만큼 낭비가 있을 것이라고 생각했다.  그래서 바로 테스트를 호다닥 진행하기로 했다. 테스트 방식은 간단하다. 한 페이지에 자식 요소를 몇개 만들고 각 자식에서 동일한 css 파일을 호출하면 끝이다. // 부모 페이지import React, { useEffect } from "react";import Childre..

단순하게 서버에게서 데이터를 요청하고 요청 받는 것은 React Query로 간단하게 구현할 수 있다.  이제 변화가 필요하다. 단순하게 서버에서 데이터를 받는것 뿐 아니라 네트워크 성능, 렌더링 부분도 신경을 써야겠다는 생각이 들었다.  Request Waterfalls요청 폭포수, 앞선 요청이 완료되어야지 다음 요청을 진행할 수 있는 것을 말한다. | -> Markup | -> JS | -> CSS// ... 다음과 같이 React 같은 코드에서는 Markup ( HTML 로드 )가 되고 JS 로드를 하고 CSS 같은 부분들이 로드가 이루어 진다. 해당 플로우 자체는 HTML 파일에서 JS 파일을 불러와야지 전체적인 코드가 실행되고 그 과정에서 root div에서 렌더링이발생하면서 CSS..

어드민 페이지를 개발할 때 가장 많이 사용하는 요소가 아마 Table일 것 같다. 그동안은 table을 table 태그를 사용해서 개발하지 않았다. 테두리 관련된 작업이나, 요소를 구현할 때 colspan 등을 사용하는 방법보단 div 태그를 활용해서 만드는게 더 간단하다고 생각했기 때문이다.  어드민 한정된 요소라면 상관없을텐데, 클라이언트 페이지에서 표를 사용하는 경우도 있을텐데 시맨틱한 구조로 개발하는 것이 SEO 측면에서도 좋을 것이다. 또한 rowspan, colspan을 사용할 때도 div로 만든다면 flex 옵션 등을 사용해서 추가 설정을 줘야한다.  이렇다보니 테이블을 어떤 방식으로 만드는 것이 좋을지 여러가지 생각을 해봤다. 어쩌면 이런 고민이 의미가 없을 수 있는게 antd나 mater..

지난번엔 Funnel 컴포넌트에 대해서 알아봤다. 토스에서 이미 잘 만들어둔 useFunnel 컴포넌트가 있지만 해당 기능을 참고해서 유사한 기능을 하는 Funnel 컴포넌트를 만들어 보려고 한다.  핵심 기능은 다음과 같다 : Funnel에 steps를 넘겨줘서 현재 Step에 해당하는 컴포넌트만 렌더링next() 함수를 통해서 다음 Step으로 이동 Funnel이란게 어려운 기능이 아니다. 현재 Step에 맞는 컴포넌트를 렌더링 해주는 것이 끝이다.  추가로 다음과 같은 기능을 구현할 생각이다 :next 외 prev, update 함수를 통해 컨트롤할 수 있는 기능을 구현할 계획이다.useFunnel이 토스의 Funnel 컴포넌트의 시작 지점인데, 나는 useFunnel을 전역 상태를 관리하는 용도로..

※ 본 글은 React의 제어 및 비제어 양식 입력이 복잡할 필요는 없습니다 내용을 정리한 것입니다. 해석 및 개인적인 의견을 추가한 글입니다. 다소 오역이 있을 수 있습니다.... FBI WARNING..... React에서의 Controlled와 UnControlled Input 많은 아티클에서 "너는 useState를 사용해서는 안 된다"라고 말합니다. 또한 문서에서 "Ref는 나쁘다"라고 하고 있습니다. ※ 작성자 작성자는 Ref를 사용하는 것이 나쁘다는 이야기를 특별히 들어본 적이 없습니다. 그래서 찾아보니 Don’t Overuse Refs Your first inclination may be to use refs to “make things happen” in your app. If this ..