리액트에서도 의존성 주입으로 결합도를 낮춰보자! - Renderer Props 패턴 (feat.DIP)
의존성 주입이 백엔드에서만 사용되는 패턴이라고? 리액트에서도 의존성 주입을 활용해 컴포넌트 간 결합도를 낮추고 재사용성을 높여보자! Renderer Props 패턴을 의존성 주입과 OCP, DIP 원칙과 연결지어 알아봅니다
✍️ 개발 블로그
개발과 관련된 다양한 주제의 글들을 정리해두었습니다.
최신 포스트
[Redux 공식문서 번역] 전역상태를 어떻게 설계해야 할까? - Normalizing State Shape
Redux 애플리케이션에서 상태 구조를 정규화하는 방법에 대해 알아봅니다. 이 글은 Redux 공식 번역이 아니며, 개인 학습 및 공유 목적으로 작성된 비공식 번역입니다. (원문 : https://redux.js.org/usage/structuring-reducers/normalizing-state-shape)
리액트에서 고차컴포넌트(HOC)로 횡단 관심사를 처리해보자 (feat. AOP - 관점지향 프로그래밍)
리액트에서 고차컴포넌트(HOC)를 사용하여 횡단 관심사를 효과적으로 처리하는 방법에 대해 알아봅니다. 관점지향 프로그래밍(AOP)의 개념을 도입하여 코드의 재사용성과 유지보수성을 향상시키는 방법을 알아봅니다
Isomorphic 이란 뭐고 어떨때 사용하는 네이밍일까 ? (feat. useIsomorphicEffect 는 뭘까)
오픈소스를 보다보면 Isomorphic 이라는 단어를 마주치게 됩니다. Isomorphic 이란 무엇인지, 그리고 어떨때 사용하는 네이밍인지에 대해 알아봅니다. 또 리액트에서 자주 사용되는 useIsomorphicEffect 훅도 함께 살펴봅니다.
같은 입력은 같은 결과 - 장바구니와 해시 함수로 배우는 멱등성 (해시 테이블)
해시테이블의 핵심은 같은 키에 같은 값이 매핑된다는 단순한 원리입니다. 프론트엔드에서 장바구니 기능을 구현할 때 멱등성(idempotency) 원칙을 사용해 해결하는 방법을 알아봅니다. 규모가 작다면 단순 순회 비교로 충분하지만, 확장성/재사용이 필요하면 정규화된 해시 함수를 도입하는 방법도 살펴봅니다.
뭣?! 값은 변하지 않는다고? JavaScript 불변성(Immutability) 이해하기
불변성(Immutability) 는 개발 공부를 하다 보면 정말 자주 듣는 단어다. 값을 바꾸지 않는다는 말은 이해되지만, 자바스크립트에서 그게 어떻게 동작하는지, 그리고 왜 React 에서는 꼭 지켜야 하는지 알아보자.
DIY React 1 - JSX 마크업을 Virtual DOM 객체로 변환하기
React의 핵심 개념과 동작 원리를 이해하기 위해, React를 직접 구현해보는 시리즈의 첫 번째 글입니다. 이번 글에서는 JSX 마크업을 Virtual DOM 객체로 변환하는 과정을 다룹니다.
[커리어핏] 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 스타일 우선순위를 이해할 수 있습니다.
우리는 같은 꿈을 꾸었지만, 서로 다른곳에 서 있었다
열정으로 시작한 RoomFit 프로젝트는 나에게 첫 창업이자 첫 실패였다. 마음이 잘 맞는 팀원들과 함께 밤을 새우며 꿈을 그렸지만, 현실은 쉽지 않았다. 학업과 창업 사이에서 흔들리며, 자유의 대가로서 책임의 무게를 처음으로 느꼈다. 그러나 그 실패 속에서 나는 관계와 협업, 그리고 나 자신을 깊이 이해하게 되었고, 다시 시작할 용기를 배웠다.
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 을 통해 DOM 개수를 줄여보면서 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 문제에 대해 알아봅니다