project/reactify5 이벤트 위임, 메모리 누수 해제 안녕하세요! 이번에는 메모리 관리 측면에서 적용한 방법을 소개드리고자 합니다. 많은 관심 부탁드립니다! 이벤트 위임이벤트 위임이란 하위 요소마다 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식을 말합니다. 즉 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있게 됩니다. 이벤트 위임을 이해하기 위해선 Event의 전파과정에 대해 알아야 합니다.Event 전파과정은 자식에서 Event가 발생하면 부모 요소에게 까지 전파가 되는 이벤트 버블링 현상이 발생합니다.이러한 자바스크립트 트릭을 이용해서 이벤트 위임을 할 수 있습니다. 결과적으로, 메모리 측면에서 큰 도움이 됩니다! 리.. 2025. 5. 12. Suspense를 이용한 Dynamic Import 안녕하세요!해당 프로젝트에서 Vite를 사용하였는데요. 간단하게 코드 스플리팅을 활용하여 성능 최적화를 진행해보았습니다 . 서론자바스크립트로 웹 개발을 하신 분이라면 여러개 JavaScript 파일을 만들고 개발하신 경험이 있으실텐데요. 만약 이렇게 여러 개의 자바스크립트 파일을 보내게 되면 비효율적일 수 있습니다. 이런 이유로 자바스크립트 프로젝트에서는 모든 코드를 하나의 번들로 묶어서 만듭니다. 물론 작은 프로젝트는 번들 크기가 작지만, 큰 프로젝트의 경우 번들 크기가 커지게 됩니다. 리액트처럼 SPA는 첫 로딩 시 많은 작업이 필요합니다. 이때 큰 파일이 로드되면 성능에 문제가 발생할 수 있습니다. 그래서 점진적 렌더링이 필요합니다. 즉, 필요한 부분을 우선순위에 따라 로딩하여 최대한 UX.. 2025. 2. 25. Browser Router와 컴포넌트 메모이제이션 안녕하세요!'Reactify 개발기 2부 - 상태관리'에 이어, 이번에는 Browser Router, 컴포넌트 메모리제이션, 문제점 및 개선사항을 말씀드리고 나만의 프레임워크 개발기는 마무리 지으려고 합니다. Browser Router React에서 SPA(Single Page Application) 방식으로 페이지를 전환할 때, 브라우저의 URL을 동적으로 관리하고, 페이지 전체를 새로고침하지 않고도 URL에 맞는 컴포넌트를 렌더링을 하기 위해 사용합니다. 즉, 기존에는 서버에서 완성된 HTML 파일을 내려받았으나, React와 같은 라이브러리에서는 경로에 맞는 자바스크립트를 사용해 필요한 컴포넌트만 업데이트하여 빠르고 효율적인 페이지 전환을 구현합니다. 또한 a태그는 이러한 SPA 본질과는 맞.. 2025. 2. 18. Auto Batching, 전역 상태 관리 안녕하세요!'Reactify 개발기 1부 - 컴포넌트 구현'에 이어, 이번에는 상태 관리에 대해 그 과정에서 고민했던 아이디어와 직면한 문제, 그리고 이를 해결하기 위한 방안들을 공유해보려고 합니다. 상태관리컴포넌트 내에서 state관리는 React에서 사용되는 데이터 단방향 흐름을 채택했습니다. 단방향 데이터 바인딩이란 데이터가 한 방향 (부모 → 자식)으로 데이터가 전달됩니다. 자식은 부모의 데이터를 props을 통해 읽기만 할 수 있고, 수정은 부모가 제공한 콜백함수를 통해서만 수정할 수 있습니다. 저는 이러한 부분을 클래스의 private, 생성자를 통해 해결했습니다.private필드를 사용해서 부모 뿐만 아니라 다른 컴포넌트의 state변수에 접근하지 못하도록 하였고,생성자를 통해서 자식에게.. 2025. 2. 18. 태그 리터럴을 활용한 JSX 유사 컴포넌트 안녕하세요! 개인 토이 프로젝트로 타입스크립트를 활용하여 프레임워크를 개발하고, 해당 프레임워크로 간단한 웹 페이지 개발을 진행했습니다. 그 과정에서 고민했던 아이디어, 직면한 문제, 그리고 그에 대한 해결 방안 등을 공유해보려고 합니다. 컴포넌트 만들기리액트를 사용해본 분이라면 컴포넌트의 편리함을 경험하셨을 텐데요. 제 프레임워크에서도 컴포넌트 개념을 접목시켰습니다. 저는 태그드 리터럴을 사용하여 컴포넌트 기능을 구현하였습니다. 템플릿 리터럴은 ``으로 주로 문자열을 동적으로 생성할 때 사용하셨을 겁니다. const name = 'John';const greeting = `Hello, ${name}!`; 하지만 태그드 리터럴은 태그 함수에 파라미터로 템플릿 리터럴 문자열을 전달합니다. 간단한 예제로.. 2025. 2. 18. 이전 1 다음
