코딩병원

Frontend/React

[React] 이미지 로딩 최적화로 LCP 50% 개선하기 (WebP, srcset, Intersection Observer)

웹 서비스에서 가장 많은 트래픽 용량을 차지하는 리소스는 단연 이미지입니다. 고화질 이미지가 많아질수록 로딩 속도는 느려지고, 이는 곧 사용자의 이탈(Bounce Rate)로 이어집니다. 오늘은 프론트엔드 성능 최적화의 핵심인 대표적인 이미지 최적화 기법들(WebP, srcset, Intersection Observer)을 프로젝트에 적용하여 로딩 속도와 사용자 경험을 개선한 과정을 정리해보았습니다. 1. 차세대 이미지 포맷 WebP 도입 (feat. )JPG나 PNG는 범용성이 좋지만 용량이 큽니다. 구글이 개발한 WebP 포맷을 사용하면 동일 화질 대비 용량을 30~50% 까지 줄일 수 있습니다. 하지만, IE 같은 구형 브라우저는 WebP를 지원하지 않습니다. 이를 해결하기 위해 HTML5의 태그..

2026. 2. 1.

Frontend/React

[React] 리액트가 빠른 진짜 이유: Virtual DOM부터 Fiber까지 완벽 해부

프론트엔드 개발자라면 누구나 리액트(React)를 사용합니다. 하지만 면접장에서 "리액트는 왜 빠르죠?" 혹은 "Virtual DOM이 정확히 뭔가요?" 라는 질문을 받으면 의외로 말문이 막히는 경우가 많습니다. 오늘은 리액트의 핵심 엔진인 Virtual DOM의 정체와, 리액트가 어떻게 브라우저 렌더링 성능을 극한으로 끌어올리는지 그 내부 원리(Reconciliation, Fiber)를 아주 깊이 있게 파헤쳐 보겠습니다.1. 문제의 시작: DOM은 너무 비싸다 우리가 웹사이트에서 "좋아요" 버튼 하나를 누를 때마다 브라우저 내부에서는 엄청난 일이 벌어집니다.// 기존의 방식 (Vanilla JS)document.getElementById('container').innerHTML = 'New Conten..

2026. 1. 25.

Frontend/React

[React] Compound Pattern 파헤치기

이번 글에서는 Compound Pattern에 대해 알아보겠습니다. 그러기 위해선 먼저 Compound(합성)에 대해 알아볼 필요가 있습니다. 합성에 대해 익숙하지 않은 분은 아래의 포스팅을 보시고 돌아와서 다시 글을 읽는 것을 권장드립니다.링크 바로가기 ➔ [React] 컴포넌트 합성이란?Compund Pattern이란?Compund(합성) 컴포넌트 패턴은 컴포넌트 합성의 장점을 활용하기 위해서 구안된 패턴입니다.즉, “하나의 컴포넌트를 여러 가지 집합체로 분리한 뒤, 분리된 각 컴포넌트를 사용하는 쪽에서 조합해 사용하는 방식” 이라고 볼 수 있습니다. 저희가 즐겨 쓰는 select 컴포넌트가 바로 합성 컴포넌트 패턴의 형태를 잘 띈 대표적인 예시라고 볼 수 있습니다.select 컴포넌트는 변경에 대한..

2024. 7. 13.

Frontend/React

[React] 컴포넌트 합성이란?

모던 웹 개발에서 컴포넌트 기반 아키텍처는 빠르게 표준이 되었습니다. 특히 React와 같은 라이브러리를 사용하면 UI를 작은, 재사용 가능한 컴포넌트로 분리하여 개발하는 것이 일반적입니다. 하지만 이 과정에서 단순히 컴포넌트를 나누는 것만으로는 부족합니다. 여기서 중요한 개념이 바로 컴포넌트 합성입니다. 컴포넌트 합성은 여러 개의 작은 컴포넌트를 조합하여 더 큰 기능을 수행하는 컴포넌트를 만드는 방법을 의미합니다. 이 접근 방식은 코드의 재사용성을 높이고, 유지보수를 쉽게 하며, 복잡한 UI를 관리하는 데 매우 유용합니다. 따라서 컴포넌트 합성은 단순히 좋은 습관이 아니라, 효율적이고 확장 가능한 애플리케이션을 개발하는 데 필수적인 기술입니다. 이번 글에서는 컴포넌트 합성이 왜 중요한지, 어떻게 적용할..

2024. 7. 6.

Frontend/React

[React] Flux 패턴과 Elm 아키텍처

이번 글에서는 React 상태 관리의 근간이 되는 Flux 패턴의 등장 배경과 핵심 원리를 살펴보고, 이를 더욱 견고하게 발전시킨 Elm 아키텍처가 현대 프론트엔드 개발에 남긴 유산에 대해 깊이 있게 다뤄보겠습니다. 이를 통해 복잡해 보이는 상태 관리 코드가 사실은 얼마나 우아한 수학적 모델 위에서 동작하는지 알아보겠습니다.Flux 패턴의 등장 배경아래 그림에서 보실 수 있듯이 기존의 MVC 패턴은 상태를 변경하는데 추적하고 이해하기가 매우 어려운 상황이였습니다.페이스북 팀은 이러한 문제의 원인을 양방향 데이터 바인딩으로 봤습니다. 뷰(HTML)가 모델(자바스크립트)을 변경할 수 있으며, 반대의 경우 모델도 뷰를 변경할 수 있습니다. 이는 코드를 작성하는 입장에서는 간단할 수 있지만 코드의 양이 많아지고..

2024. 5. 18.

Frontend/React

[React] 성능을 측정하는 지표 (LCP, FID, CLS, FCP, TTFB 등)

웹사이트의 성능은 사용자 경험뿐만 아니라 구글 검색 순위(SEO)에도 결정적인 영향을 미칩니다. 이번 글에서는 구글에서 제공하는 공신력 있는 성능 측정 도구와 주요 지표를 알기 쉽게 소개해보겠습니다.PageSpeed Insights웹사이트 주소만 입력하면 즉시 성능을 분석해 주는 가장 대중적인 도구입니다. 모바일과 데스크탑 환경을 각각 분석하며, '실제 사용자 데이터'와 '가상 테스트 데이터'를 모두 제공합니다. 이 외에도 구글에서 만든 지표로 핵심 웹 지표(Core Web Vital)가 있습니다. 이것은 웹사이트에서 뛰어난 사용자 경험을 제공하는 데 필수적인 지표를 일컫는 용어입니다. 구글에서 핵심 웹 지표로 꼽는 지표는 다음과 같습니다.LCP: Largest Contentful PaintFID: F..

2024. 5. 11.

Frontend/React

[React] 커스텀훅 vs 고차 컴포넌트

일반적인 자바스크립트에서 재사용 로직을 작성하는 방식 외에도 리액트에서는 재사용할 수 있는 로직을 관리할 수 있는 두 가지 방법이 있습니다. 바로 커스텀훅(custom hook)과 고차 컴포넌트(higher order component)입니다. 커스텀 훅과 고차 컴포넌트가 무엇이며 어떻게, 언제 쓰이는지 알아보도록 하겠습니다.  커스텀 훅(custom hook)서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용되는 것입니다. 고차 컴포넌트의 경우 리액트가 아닌 곳에서도 사용이 가능하지만, 커스텀 훅은 오로지 리액트에서만 사용할 수 있는 방식입니다.  이러한 커스텀 훅의 규칙 중 하나는 이름이 반드시 use로 시작하는 함수를 만들어야 합니다. 만약 규칙을 따르지 않는다면 다음과 같이 에러..

2024. 4. 27.

Frontend/React

[React] useLayoutEffet와 useEffect

공식문서에 따르면 useLayoutEffect를 다음과 같이 정의하고 있습니다.'이 함수의 시그니처는 useEffect와 동일하나, 모든 DOM의 변경 후에 동기적으로 발생한다.' 먼저 '함수의 시그니처가 useEffect와 동일'하다는 것은 두 훅의 형태나 사용 예제가 동일하다는 것을 의미합니다.export default function App() { const [count, setCount] = useState(0); useEffect(() => { console.log('useEffect', count); }, [count]); useLayoutEffect(() => { console.log('useLayoutEffect', count); }, [count]); function..

2024. 4. 20.

Frontend/React

[React] useReducer는 언제 사용할까?

useReducer란? useReducer는 useState의 심화 버전이라고 볼 수 있습니다. useState와 비슷한 형태를 띠지만 좀 더 복잡한 상태값을 미리 정의해 놓은 시나리오에 따라 관리가 가능합니다. useReducer에서 사용되는 용어를 먼저 살펴보겠습니다. 반환값은 useState와 동일하게 길이가 2인 배열입니다. state: 현재 useReducer가 가지고 있는 값을 의미합니다. useState와 마찬가지로 배열을 반환하는데, 동일하게 첫 번째 요소가 이 값입니다. dispatcher: state를 업데이트하는 함수. useReducer가 반환하는 배열의 두 번째 요소입니다. setState는 단순히 값을 넘겨주지만 여기서는 action을 넘겨준다는 점이 다릅니다. 이 action은..

2024. 4. 6.

Frontend/React

[React] useEffect의 콜백 인수로 비동기 함수를 넣으면 안되는 이유

왜 useEffect의 콜백 인수로 비동기 함수를 바로 넣을 수 없을까요? 아래 코드는 첫 번째 인수에 비동기 함수를 넣으니 발생한 경고문입니다. useEffect 내부에서 state를 결과에 따라 업데이트하는 로직이 있다고 가정해 봅시다. 만약에 useEffect의 인수로 비동기 함수가 사용 가능하다면 비동기 함수의 응답 속도에 따라 결과가 이상하게 나타날 수 있습니다. 극단적인 예제로 이전 state 기반의 응답이 10초가 걸렸고, 이후 바뀐 state 기반의 응답이 1초 뒤에 왔다면 이전 state 기반으로 결과가 나와버리는 불상사가 생길 수 있습니다. 이러한 문제를 useEffect의 경쟁 상태(race condition)라고 합니다 그렇다면 비동기 함수는 어떻게 실행할 수 있을까요? 한 가지 유..

2024. 3. 31.

Frontend/React

[React] useEffect 의존성 빈 배열 경고 - react-hooks/exhaustive-deps 왜?

이번 글에서는 왜 eslint-disable-line, react-hooks/exhaustive-deps 경고를 알려주는지 알아보도록 하겠습니다. 리액트 코드를 작성하거나, 읽다보면 제법 심심치 않게 eslint-disable-line, react-hooks/exhaustive-deps 주석을 사용해 아래의 경고를 무시한는 것을 볼 수 있습니다. (저 또한.. 그랬습니다..) 이 ESLint룰은 useEffect 인수 내부에서 사용하는 값 중 의존성 배열에 포함돼 있지 않은 값이 있을 때 경고를 발생시킵니다. 정말로 필요할 때에는 사용할 수도 있지만 대부분의 경우에는 의도치 못한 버그를 만들 가능성이 큰 코드입니다. 이 코드를 사용하는 대부분의 예제가 빈 배열 []을 의존성으로 할 때, 즉 컴포넌트를 마..

2024. 3. 24.

Frontend/React

[React] Recoil + React Query를 도입한 이유

저는 사이드 프로젝트에서 Redux를 사용해왔지만, 최근 Recoil과 React Query로의 마이그레이션을 선택했습니다. Redux는 React에서 많이 사용되는 상태 관리 라이브러리지만, 새로운 접근 방식과 도구들이 등장하면서, Recoil과 React Query가 클라이언트와 서버 상태 관리에 더 나은 가능성을 제공하고 있다는 인상을 받았습니다. 이번 글에서는 이러한 마이그레이션을 결정한 이유와 새로운 라이브러리들이 어떻게 프로젝트에 긍정적인 영향을 미쳤는지 간략하게 다뤄보겠습니다. [Redux 상태관리의 문제]Redux는 오랜 기간 동안 React 애플리케이션에서 전역 상태 관리의 표준으로 자리 잡았습니다. 그러나 클라이언트와 서버 간의 데이터 흐름을 처리하는 데 필요한 복잡성과 보일러플레이트 ..

2024. 2. 12.

Frontend/React

[React] styled-Components란?

styled-components란? React 애플리케이션에서 사용되는 CSS-in-JS 라이브러리 중 하나입니다. 이 라이브러리는 JavaScript 파일 안에서 컴포넌트 스타일을 정의할 수 있게 해 주며, 동적인 스타일링 및 컴포넌트 기반의 스타일링을 쉽게 구현할 수 있도록 도와줍니다. 장점 1. 간단한 사용 방법 템플릿 리터럴 (template literals) 문법을 활용하여 스타일을 정의할 수 있습니다. import styled from 'styled-components'; const Button = styled.button` background-color: #3498db; color: #ffffff; padding: 10px 20px; font-size: 16px; border-radius: ..

2024. 1. 13.

Frontend/React

[React] REST API와 GraphQL 차이 및 예제

React 애플리케이션과 서버 간의 데이터 통신을 처리하는 방법은 주로 두 가지입니다. 서버와의 효율적인 데이터 통신을 위해 RESTful API 또는 GraphQL을 사용할 수 있습니다. 이러한 API는 데이터 엔드포인트와 데이터 스키마를 제공하며, 클라이언트는 이러한 API를 사용하여 데이터를 요청하고 업데이트합니다. 이 두 가지의 기본적인 개념과 차이를 알아보도록 하겠습니다. REST API (Representational State Transfer) - 구조적인 접근 방식 REST는 자원(리소스)을 URL 경로로 표현하고, HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 자원을 조작합니다. 각 엔드포인트(URI)는 특정 자원 또는 컨트롤러를 나타내며, 각각의 HTTP 메서..

2024. 1. 1.

Frontend/React

[React] axios를 사용하는 이유 (vs fetch)

Javascript에는 HTTP Request를 위한 방법으로 대표적으로 axios와 fetch가 있습니다. 이번 글에서는 각각의 장단점과 간단한 사용방법을 보면서 비교하고 차이를 알아보겠습니다. Fetch 간단하면서도 강력한 기능을 제공하며, 주로 모던 브라우저에서 사용되는 경향이 있습니다. [장점] ES6부터 도입된 Javascript 내장 라이브러리 브라우저 환경에서 사용 가능하며, import 하면 node.js에서도 사용 가능 Promise 기반 사용법이 간단하고 직관적이며, 간단한 요청에서는 불필요한 설정이 없이 사용 [단점] HTTP 에러(404, 500 등)를 자동으로 걸러내지 않음 응답 데이터가 바로 넘어오지 않아 JSON으로 파싱해야됨 IE11 및 구형 브라우저 지원은 추가 설정이나 폴..

2023. 12. 30.

Frontend/React

[React] React Query를 사용하는 이유 (vs Redux)

저는 개인적으로 운영 중인 프로젝트에서는 API 통신과 비동기 데이터 관리를 위해 React Query를 적극적으로 활용하고 있습니다. 프로젝트를 처음 진행할 당시에는 Redux의 redux-saga를 주로 사용하여 서버와의 API 통신과 비동기 데이터를 관리하였습니다. 그러다가 불편함을 느끼고 React Query를 도입하여 Redux에서 React Query로 마이그레이션하였습니다. 이번 글에서는 왜 React Query도입을 결정하게 되었는지 정리하려고 합니다. Redux는 Global State Management!Redux는 모두가 알다시피 Redux의 기본 원칙이 존재합니다. 단일 스토어여야 하며, 상태는 불변성을 유지해야 하기 때문에 읽기 전용이어야 하며 순수함수로 상태를 변경해야 합니다. ..

2023. 12. 14.

Frontend/React

[React] 카카오 로그인 구현하는 방법

안녕하세요. 이번 글에서는 카카오 로그인을 구현하는 방법에 대하여 알아보도록 하겠습니다. 요새 로그인이 필요한 웹, 앱이라면 너무 쉽게 접근할 수 있는데요, 널리 사용되는 만큼 어렵지 않은 것 같습니다. 예전에 안드로이드로 카카오 로그인을 구현한 적이 있었는데, 그 당시는 자료도 적고 개발 문서만 보고 작업하기에는 어려움을 느꼈었는데 요새는 개발 문서도 잘 나와있고 정리를 잘해주신 분들이 너무 많이 계시네요. 저도 개발자분들께 도움이 되고자 이번 글을 써봅니다.[시작하기 앞서 Auth 개념]카카오 로그인은 OAuth 2.0 기반의 소셜 로그인 서비스입니다. 카카오 로그인을 사용하면 사용자가 카카오톡 또는 카카오계정으로 손쉽게 서비스에 로그인할 수 있습니다. 서비스는 서비스 ID 및 비밀번호를 입력받고 검..

2023. 5. 22.

Frontend/React

[React] S3를 이용한 파일 업로드 구현하기

이번 글에서는 React로 파일 업로드를 하는 방법을 알아보도록 하겠습니다. 저는 파일을 업로드하기 위해 AWS S3를 이용하였습니다. S3는 Simple Storage Service의 약자로 인터넷용 스토리지 서비스입니다. S3를 선택한 이유는 일반적인 파일 서버는 트래픽이 증가함에 따라서 장비를 증설하는 작업을 해야 하는데 S3는 이러한 작업을 대행해 줍니다. 트래픽에 따른 시스템적인 문제를 걱정할 필요가 없어지는 거죠. 또 접근 권한도 설정할 수 있어서 외부에서 사용하는 것도 방지할 수 있습니다. 이러한 S3에서 사용되는 주요 용어들은 다음과 같습니다. 객체(object), AWS는 S3에 저장된 각각의 데이터를 객체라고 명명하는데, 하나 하나의 파일이라고 생각하시면 됩니다. 버킷(bucket), ..

2023. 3. 8.