리액트
[React] 리액트 19 업데이트 내용 톺아보기
[React] 리액트 19 업데이트 내용 톺아보기
2025.02.082024년 12월 React 19의 stable 버전이 출시됐다. 리액트 공식 블로그를 참고해서 React 19의 주요 변경 사항을 정리해 봤다. 새롭게 선보인 훅은 각종 문서와 예제를 참고해서 이해하기 쉽도록 부연 설명을 덧붙였다. 공식문서에 기존 사용자를 위한 마이그레이션 가이드도 자세하게 나와있으니 참고하자. useTransitionuseTransition은 주로 무거운 작업의 상태 업데이트를 낮은 우선순위로 지정하여 UI 블로킹을 방지할 때 사용한다. React 18 버전까지 startTransition 콜백은 항상 동기적이어야 하는 제약이 있었다. 때문에 콜백 안에서 비동기 호출 같은 작업을 수행할 수 없었다. React 19부턴 startTransition 콜백 안에서 비동기 처리도 가능해졌..
[Next.js] Dynamic Routes 다이나믹 라우트
[Next.js] Dynamic Routes 다이나믹 라우트
2025.01.31TL;DR[slug] : 단일 경로 세그먼트 포착[...slug] : 다중 경로 세그먼트 포착(Catch-All)[[...slug]] : 루트 경로를 포함한 모든 경로를 선택적으로 포착(Optional Catch-All) Dynamic Segments정확한 세그먼트 이름을 미리 알 수 없을 때 폴더 이름을 대괄호로 감싸면 다이나믹 세그먼트로 작동. 세그먼트 이름은 layout, page 또는 route 파일에서 params 프롭으로 값 조회 가능. RouteURL ExampleParamsapp/blog/[slug]/page.js/blog/a{ slug: 'a' }app/blog/[slug]/page.js/blog/b{ slug: 'b' }루트 경로(blog/)에 페이지 없으면 접근 불가. Catch-..
[Next.js] App Router 공식 튜토리얼 톺아보기
[Next.js] App Router 공식 튜토리얼 톺아보기
2025.01.30Next.js에서 제공하는 Learn Next.js App Router 튜토리얼을 부연 설명과 함께 한국어로 정리해 봤다. 공식 가이드는 총 16개 챕터로 구성되어 있지만, 이번 포스팅에선 프로젝트 세팅을 다루는 챕터 1과 CSS 스타일링 방법을 설명하는 챕터 2는 생략했다. Optimizing Fonts and ImagesCumulative Layout Shift(CLS, 누적 레이아웃 이동)는 구글이 웹사이트의 성능과 사용자 경험을 평가하는 데 사용하는 지표로, 페이지 로드 중 레이아웃 이동으로 인해 발생하는 사용자 경험의 불편함을 측정한다. 예를 들어, 브라우저가 폴백(fallback) 폰트나 시스템 폰트로 텍스트를 먼저 렌더링 한 뒤 사용자 지정 폰트로 교체할 때 텍스트 크기, 간격 또는 레이아..
[React] 리액트의 올바른 useEffect 사용팁
[React] 리액트의 올바른 useEffect 사용팁
2025.01.21리액트의 useEffect는 데이터 가져오기, 구독 관리, DOM 업데이트, 사이드 이펙트 처리 등 다양한 작업에 사용된다. 그러나 useEffect를 과도하게 사용하면 성능 저하, 불필요한 렌더링, 디버깅의 복잡성 같은 문제가 발생할 수 있다. "Leave useEffect Alone!" 라는 가이드 글을 참고하여 올바른 useEffect 사용법에 대한 추가 설명을 덧붙여서 정리해 봤다. 경쟁 상태(Race Condition) ⭐경쟁 상태는 여러 비동기 작업이 동시에 실행될 때, 실행 순서나 결과가 예측하지 않은 방식으로 작동하는 현상을 가리킨다. 아래 코드에서 버튼을 여러 번 클릭하면 counter 값이 증가하고, 각 요청은 랜덤한 시간만큼 대기한 후 response 상태를 업데이트한다. 하지만 이..
[React] 리액트 코드를 개선할 수 있는 4가지 팁
[React] 리액트 코드를 개선할 수 있는 4가지 팁
2024.10.28TLDR이벤트 핸들러에 커링 활용컴포넌트 책임 분리조건문 대신 객체 map 사용React 라이프사이클 외부에 독립적인 변수 배치 4 React Tips1. 커링 활용user 상태는 name, surname, address 3개 속성을 가지며, 이에 대응하는 3개의 input 필드가 필요하다. 아래 코드에선 각 필드를 처리하기 위해 별도의 핸들러를 각각 만들어서 사용하고 있지만, 이 핸들러들은 value가 할달될 속성 이름만 다를 뿐 나머지 로직이 동일하기 때문에 코드 중복이 발생하고 있다.export default function App() { const [user, setUser] = useState({ name: "", surname: "", address: "", }); co..
[React] 틱택토(Tic-Tac-Toe) 게임 주요 로직 톺아보기
[React] 틱택토(Tic-Tac-Toe) 게임 주요 로직 톺아보기
2024.05.30틱택토 소개틱택토는 2명의 플레이어가 자신의 기호(X, O) 3개를 가로, 세로, 대각선으로 연속해서 놓이도록 하는 보드 게임이다. 게임은 주로 3x3 격자 보드에서 진행된다. 플레이어는 번갈아가면서 자신의 기호를 놓고, 한 칸엔 한 개의 기호만 놓을 수 있다. 모든 칸에 기호를 놓았지만 어느 한쪽도 연속적인 세 개의 기호를 배열하지 못하면 게임은 무승부로 끝난다(무승부가 많은 게임). 승리 조건 체크틱택토는 행렬로 이뤄진 2차원 보드에서 진행하지만, 1차원 배열로 관리하면 각 칸을 단일 인덱스로 접근할 수 있기 때문에 데이터를 더 수월하게 관리할 수 있다. 게임 로직을 구현할 때도 인덱스 계산을 단순화시켜 코드의 복잡성을 줄이는 데 도움이 된다. 또한, 1차원 배열은 그리드 스타일을 이용해 2차원 보..
[React] 리액트에서 setTimeout 더 편하게 쓰기
[React] 리액트에서 setTimeout 더 편하게 쓰기
2024.05.28React에서 setTimeout 같은 타이머 API를 사용할 때 컴포넌트의 생명주기를 고려하지 않으면 메모리 누수나 예기치 않은 예외가 발생할 수 있다. 예를 들어 타이머를 설정한 후 컴포넌트가 언마운트돼도 타이머는 여전히 실행되고, 이후 타이머 콜백에서 언마운트된 컴포넌트의 상태를 업데이트하려고 하면 에러가 발생할 수 있다. 위 같은 상황을 방지하기 위해 useEffect의 클린업 함수에 타이머 해제 로직을 추가한다. 하지만 한 컴포넌트에서 여러 타이머를 관리해야 한다면 메모리 누수 뿐만 아니라 타이머를 관리하기 위한 로직 때문에 컴포넌트의 복잡성이 높아질 수 있다. 만약 별도의 커스텀 훅에서 타이머를 관리하고, 커스텀 훅이 언마운트 될 때 모든 타이머를 자동으로 해제한다면 해당 훅을 사용하는 곳에선..
[React] 크롬 확장 프로그램 개발 배경 지식 및 튜토리얼
[React] 크롬 확장 프로그램 개발 배경 지식 및 튜토리얼
2024.05.28크롬 확장기능 주요 기능사용자 인터페이스 사용자화 : 브라우저 툴바에 버튼 추가, 사용자 정의 팝업/오버레이 생성 등콘텐츠 스크립트 : 웹페이지에 직접 스크립트를 삽입하여 DOM 조작 가능백그라운드 스크립트 : 브라우저를 사용하는 동안 지속적으로 실행돼서 필요한 기능 제공API 접근 : 북마크/탭/윈도우 관리, 히스토리 조작 등 브라우저의 다양한 영역 접근 가능🔍 탭 이동, capture, zoom 등 다양한 방식으로 제어 가능메시징 시스템 : 확장 기능의 다른 컴포넌트 혹은 웹페이지와 메시지 교환 가능웹 요청 조작 : 네트워크 요청 가로채기, 광고 차단, 프라이버시 보호, 웹 트래픽 관리 등🔍 chrome.webRequest API로 http 요청을 가로채거나 request header 수정 가능사..
[React] Proxy를 활용한 Custom Lazy Import
[React] Proxy를 활용한 Custom Lazy Import
2024.05.24React.lazy()React에서 코드 분할을 목적으로(Chunk 분리) 컴포넌트를 Dynamic Import 할 때 React.lazy() 함수를 사용한다. 컴포넌트가 필요한 시점에만 로드되기 때문에, 로딩 중 표시할 컴포넌트나 메시지는 를 활용하여 설정한다. 여러 개의 lazy 컴포넌트를 묶어서 fallback을 한 번에 표시할 수도 있다. 또한, React.lazy()로 불러오려는 컴포넌트는 기본적으로 default export를 사용해서 내보내야 한다.// Child.tsxexport default function Child() { /* ... */ }// Parent.tsximport { Suspense } from 'react';// 컴포넌트 바디에서 호출하면 정상 작동하지 않으므로 주의co..
[Vite] 초기 로드 시간 개선을 위한 Vendor Chunk 쪼개기
[Vite] 초기 로드 시간 개선을 위한 Vendor Chunk 쪼개기
2024.05.24Intro프론트엔드 영역에선 .jsx, .tsx, .vue 등의 확장자를 가진 파일을 사용하지만 브라우저는 이를 이해하지 못한다. 때문에 이러한 파일들은 모두 .js 파일로 변환해야 한다. 모든 파일을 하나의 .js 파일로 만들 수 있지만 이 방식은 성능에 부정적인 영향을 줄 수 있으므로 권장되지 않는다. 대신 여러 .js 파일(chunks)로 변환한 뒤 필요한 순간에만 로드(지연 로딩)하는게 성능에 더 유리하다. 특히 초기 로딩 시간을 줄일 때 유용하다. Vite, Webpack 같은 번들러는 보통 index, vendor 두 개의 메인 chunk를 생성한다. 참고로 Vite 2.9 버전부턴 Production 종속성 모듈이 index chunk에 포함된다.index : App.tsx와 같은 어플리케이..
[React/JS] 드래그한 문자열 분리(랩핑)하기 / Selection API
[React/JS] 드래그한 문자열 분리(랩핑)하기 / Selection API
2024.05.21아래와 같은 문자열이 있을 때 마우스로 드래그해서 텍스트를 선택할 때마다 태그로 감싸도록 구현하는 게 목표. Pharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissimPharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissimPharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissim 드래그한 문자열 랩핑❶ 마우스 클릭/텍스트 드래그/클릭 해제 → onMouseUp 이벤트 호출 ❷ 선택한 영역에 대한 Selection 객체 획득const selection =..
[React] 리액트 동시성 렌더링(Concurrent) 톺아보기
[React] 리액트 동시성 렌더링(Concurrent) 톺아보기
2024.05.20사용자가 사용하는 UI는 여러 부분으로 구성되어 있다. 일반적으로 폼 입력 필드는 상호 작용에 즉각적으로 응답하지만, 많은 양의 필터링 목록 같은 부분은 응답하는데 오랜 시간이 소요될 수 있다. React는 기본적으로 동기적인 방식으로 렌더링하는데, UI의 느린 작업(필터링 목록 등)이 다른 빠른 작업(입력 폼 등)을 차단하여 응답이 느려지는 현상이 발생한다. 💡 Render-blocking: Concurrent 기능을 사용하지 않을 때 React는 컴포넌트를 동기적으로 렌더링 하며, 렌더링을 시작하면 예외가 아닌 이상 렌더링을 중단할 수 없다. 즉, 렌더링이 끝나야만 다른 작업을 수행할 수 있다. React 18 버전에 공개한 Concurrent 기능은 이런 문제를 해결하기 위해 개발됐다. Concu..