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

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

간단한 입력을 위해서는 보통 textarea나 input을 사용해 입력란을 만들 수 있다. 하지만 사용자가 본문에서 중요한 부분을 강조하고 싶거나, 텍스트 색상을 변경하는 등의 스타일링을 필요로 하는 경우가 많다. 이런 상황에서는 텍스트만 입력하는 방식으로는 한계가 있다.  이런 한계를 극복하기 위해 다양한 웹 에디터 라이브러리가 등장했다. 웹 에디터는 사용자가 손 쉽게 텍스트를 꾸밀 수 있도록, 예를 들어 굵게, 기울임, 링크 추가, 이미지 삽입 등을 지원한다.  하지만 이렇게 강력한 웹 에디터가 XSS(크로스 사이트 스크립팅) 공격의 대상이 되기도 한다. 웹 에디터를 통해 발생할 수 있는 XSS 공격의 종류와, 왜 이런 공격 때문에 LocalStorage에 Access Token을 저장하는 것이 위험..

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

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

모달창 등에서 position을 fixed를 주고 화면을 꽉 채우기 위해서 vh를 100을 주는 경우가 있다. 안드로이드 또는 PC 화면에서는 문제가 없는데 아이폰에서 100vh를 사용하는 경우 사파리에서 아래에 웹사이트 바가 생겨서 깨지는 경우가 발생한다. 이때의 해결 방법으로 window.innerHeight * 0.01 이라는 값을 세팅해서 선언해준다고 한다. 그리고 document에 스타일 속성을 줘서 넣어준 다음 해결하는 방법이 일반적인 방법이다. let vh = 0; useEffect(() => { vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); }, []); // 사용 h..

Effect는 React 패러다임에서 벗어날 수 있는 탈출구이다. Effect를 사용하면 React의 외부로 나가서 컴포넌트를 React가 아닌 위젯, 네트워크 또는 브라우저 DOM과 같은 외부 시스템과 동기화할 수 있다. 즉, 외부 시스템이 관여하지 않는 경우에는 Effect가 필요하지 않다. 불필요한 Effect를 제거하면 코드의 가독성이 좋아지며, 실행 속도가 빨라진다. 또한 오류 발생률도 줄어든다. 불필요한 Effect를 제거하는 방법 Effect가 필요하지 않는 경우는 일반적으로 2가지가 있다. ▶ 렌더링을 위해 데이터를 변환하는 경우. 예를들어, 목록을 표시하기 전에 필터링을 하고 싶은 경우를 가정해보자. 목록이 변경될 때 상태 변수를 업데이트하는 Effect를 작성하고 싶을 수 있다. 하지만..

웹 개발을 하다보면 가장 큰 스트레스 중 하나가 브라우저이다. IE는 처리했고 남은게 사파리 ( iOS ) 그리고 떠오르는 샛별 카카오 브라우저이다. 카카오톡은 웹사이트 링크를 타고 들어가면 인웹 브라우저로 실행이 된다. 근데 요놈도 참 간혹 예상치 못한 말썽을 일으기키는 뇨속이다. 아무튼 iOS에서 발생한 문제를 하나씩 해결하면 올려보겠다. vh 아이폰에서 vh를 100으로 설정했을 때, 스크롤을 내린다던지 해서 해당 영역이 짤리는 문제가 있다. resize useEffect(() => { const setViewportHeight = () => { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--vh",..