Babel이란? Babel은 자바스크립트 트랜스파일러로, ECMAScript 2015+ 코드를 구형 및 최신 브라우저 환경에서도 호환도록 변환하는 도구 체인이다.  주요 기능문법 변환최신 ECMAScript 문법을 구형 브라우저에서도 동작할 수 있도록 변환한다. 예) const나 arrow function 같은 문법을 구형 문법으로 변환polyfill 적용브라우저에서 지원하지 않는 새로운 JavaScript 기능을 사용할 수 있도록 추가 기능을 삽입한다. 예) Promise, Array.prototype.includes 등.코드 전환React(JSX), TypeScript와 같은 다양한 JavaScript 확장 언어를 표준 JavaScript로 변환한다. 예) JSX 코드를 React.createElem..

React 공식 문서에서도 프레임워크와 함께 사용하는 것을 권장하고 있지만, 실제로는 여전히 Next.js와 같은 프레임워크 없이 React만 사용하는 개발 사례가 많다. 이 경우 Vite를 비롯해 Rollup, Parcel, Webpack, 그리고 CRA(Create React App)와 같은 도구를 사용해 개발하는 경우가 이에 해당한다.  따라서, 프레임워크가 제공하는 번들링 환경에만 의존하기보다는 번들링 도구에 대한 이해가 여전히 중요하다. 특히, 풍부한 자료와 널리 사용되는 Webpack을 중심으로 번들링에 대해 정리하려고 한다.  더불어 Next.js에서도 Turbopack이라는 새로운 번들러가 도입되었지만, 현재 개발 환경에서만 사용되며, 여전히 Webpack을 주요 번들러로 사용하고 있다. ..

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