[커리어핏] React 렌더링 최적화 분투기 (useState 에서 useRef, 그리고 EventBus 아키텍쳐까지)
React에서 상태 관리를 위해 useState 대신 useRef를 사용하여 불필요한 리렌더링을 줄이고, EventBus 아키텍쳐를 도입하여 컴포넌트 간의 효율적인 통신 방법을 알아봅니다.
✍️ 개발 블로그
개발과 관련된 다양한 주제의 글들을 정리해두었습니다.
최신 포스트
react-toastify 는 어떻게 리액트 렌더링사이클 밖에서도 토스트를 띄울수 있을까?
리액트에서 상태 관리와 렌더링은 보통 컴포넌트 내부의 state, props를 통해 이루어진다. 그런데 진짜 실무에서는 "리액트 컴포넌트 바깥"에서, 즉 비동기 로직이나 이벤트 핸들러, API 응답 등 어디서든 토스트(알림)를 띄우고 싶을 때가 많다. 어떻게 그게 가능할까?
Chain Of Responsibility 책임연쇄패턴
핸들러들의 체인(사슬)을 따라 요청을 전달할 수 있게 해주는 행동 디자인 패턴인 책임 연쇄 패턴에 대해 알아봅니다.
뭐? Context 가 복사가 된다고? (Context Provider Hell 해결하기)
React Context API를 사용할 때 발생할 수 있는 'Context Provider Hell'이 무엇인지, 그리고 이를 해결하기 위해 접근한 방법에 대해 설명합니다.
JavaScript Execution Context 실행 컨텍스트 - 예제편 (feat. 호이스팅, 스코프 체인, 클로저)
간단한 예제를 통해 실행컨텍스트가 어떻게 동작하는지 알아보고, 호이스팅과 스코프 체인, 클로저는 어떻게 동작하는지 알아봅니다
JavaScript Execution Context 실행 컨텍스트 - 개념편 (feat. 호이스팅, 스코프 체인, 클로저)
JavaScript 실행 컨텍스트란 무엇인가요? 실행 컨텍스트는 JavaScript 코드가 실행되는 환경을 정의하는 객체입니다. 이 글에서는 실행 컨텍스트의 개념과 구성 요소, 그리고 Lexical Environment와 Variable Environment에 대해 설명합니다.
엥? Modal 그거 z-index:99999 박으면 되는거 아님? (feat. createPortal과 Stacking Context)
React 에서 Modal 컴포넌트를 구현할때 단순히 z-index 를 높게 줬을때 발생하는 문제와 createPortal 을 이용해 해결하는 방법에 대해 알아봅니다.
동적 타이핑 언어 JavaScript 값은 실제로 어떻게 저장될까? (Feat. Tagged Pointer, NaN-Boxing)
JavaScript 에서는 숫자, 문자열, 불리언, 객체 등 다양한 값을 다룰 수 있습니다. 일반적인으로는 원시값은 스택에, 나머지는 힙에 저장된다고 합니다. 하지만 동적 타입 언어인 JavaScript 는 런타임에 타입이 결정되는데, 그렇다면 실제로 값은 어디에 또 어떻게 저장될까요 ?
객체리터럴 vs 정적메서드 vs 클래스 인스턴스 vs 클로저함수
객체리터럴, 정적메서드, 클래스 인스턴스, 클로저함수를 사용하면 공통적으로 객체를 생성할 수 있습니다. 이들은 모두 객체를 생성하는 방법이지만, 각각의 특징과 장단점이 다릅니다. 이 글에서는 이 네 가지 방법을 비교하고, 각각의 장단점과 사용 예시를 살펴보겠습니다.
CSS Cascade Algorithm 이란? (Feat. Cascade Layer)
CSS Cascade Algorithm 은 브라우저에서 스타일을 적용하는 방법을 정의합니다. CSS Cascade Algorithm 을 이해하면 CSS 스타일 우선순위를 이해할 수 있습니다.
AWS Lambda & S3 트리거로 이미지 최적화 자동화하기
AWS Lambda와 S3 트리거를 활용하여 이미지 업로드 시 자동으로 최적화하는 방법에 대해 알아봅니다. Sharp 라이브러리를 사용하여 JPEG, PNG, WebP 등 다양한 포맷의 이미지를 효율적으로 변환하고 저장하는 과정을 다룹니다.
응~ 이미지 키워봐~ 최적화 하면 그만이야 (pt2. 다양한 최적화 기법)
2024 경북대학교 디자인학과 졸업전시 웹사이트 개발 경험을 바탕으로, React 환경에서 이미지 최적화 기법을 적용하는 방법에 대해 알아봅니다. 지연 로딩, 크기 조정, CDN 활용 등 다양한 전략을 통해 웹 성능을 향상시키는 방법을 다룹니다.
응~ 이미지 키워봐~ 최적화 하면 그만이야 🤡 (pt1. 이미지 포맷)
almanac.httparchive.org 의 2022년 보고서에 따르면, 이미지가 하나 이상 포함된 페이지는 99.9%에 달하며, LCP 에 가장 큰 영향을 미치는 요소이기도 합니다. 2024 경북대학교 디자인학과 졸업전시 사이트를 개발하며 경험한 이미지 포맷의 종류와 최적화 방법에 대해 알아보겠습니다
React로 무한 스크롤 구현하기 (Intersection Observer 활용)
React와 Intersection Observer API를 활용해 성능 최적화된 무한 스크롤을 구현하는 방법을 알아보겠습니다. 페이지네이션의 종류부터 커스텀 훅까지 단계별로 설명합니다.
철로 위에 묶여 있는 IE 사용자를 구할 것인가 (웹 호환성과 크로스 브라우징)
수많은 최신 브라우저 사용자와 소수의 IE 사용자가 철로 위에 묶여 있다면, 개발자는 누구를 구해야 할까요? 트롤리 딜레마로 풀어보는 웹 호환성과 크로스 브라우징 이야기
REST API 의 REST 는 무엇인가?
REST API 는 REpresentational State Transfer API 로, 웹 서비스에서 통신하는데 사용되는 소프트웨어 인터페이스입니다.
React Transition Group 뜯어보기
React Transition Group 은 어떻게 동작할까요? 내부 동작 원리와 사용법에 대해 알아봅니다
Next.js Rendering Patterns (feat. SSG, SSR, ISR, CSR)
Next.js의 다양한 렌더링 패턴(SSG, SSR, ISR, CSR 등)에 대해 알아보고, 각 렌더링 패턴이 어떻게 동작하고, Core Web Vitals에 어떤 영향을 미치는지 설명합니다.
Redux 핵심 개념과 Flux 아키텍쳐
Redux의 핵심 개념과 Flux 아키텍처에 대해 알아봅니다. MVC, MVVM, Container-Presenter 패턴과 비교하며 Redux가 어떻게 상태 관리를 단순화하는지 알아봅니다.
React 는 항상 단방향으로 데이터가 흐를까? (useImperativeHandle)
React 는 항상 데이터가 단방향으로 흐를까요? React 의 useImperativeHandle 훅을 사용하여 부모 컴포넌트가 자식 컴포넌트의 메서드나 속성에 접근하는 방법에 대해 알아봅니다
Authentication, Authorization 인증과 인가
웹 애플리케이션에서 인증(Authentication)과 인가(Authorization)의 개념과 차이점에 대해 알아봅니다. Session, JWT 등 다양한 인증방식과 CSRF 문제에 대해 알아봅니다