Next.js 15 instrumentation이 프로덕션에서 안 돌아간다면
instrumentation.ts의 register가 개발 서버에서는 돌지만 프로덕션에서는 첫 요청 전까지 실행되지 않았다. 관련 이슈와 커스텀 서버, 모듈 레벨 초기화 같은 대안을 비교했다.
React와 Next.js13편
2025
2024
React 19 useActionState 살펴보기
폼 제출처럼 비동기로 상태를 바꾸는 흐름에서 pending, 오류, 낙관적 업데이트를 손으로 다루던 코드가 React 19의 Action과 useActionState로 어떻게 줄어드는지 예제로 비교했다.
2022
React 깜빡임 현상 해결: useLayoutEffect와 이미지 로딩
useEffect 타이밍 때문에 생기는 깜빡임은 useLayoutEffect로, API 응답 뒤 이미지가 늦게 뜨는 깜빡임은 로드 완료 후 렌더링과 스켈레톤 UI로 해결한 과정이다.
2021
virtual DOM 파헤치기
Virtual DOM 복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발생한다. 그 변화를 적용하기 위해 브라우저가 많이 연산을 해야한단 소리고, 전체적인 프로세스를 비효율적으로 만든다는…
React [리렌더링 과정]
리엑트가 인기있는 이유는 효율적인 렌더링 방식에 있다.
[JSX]: JS와 JSX 확장자는 무엇이 다를까?
1) Javascript에서 HTML을 사용할 수 있게 하는 리액트만의 문법(syntax)을 말한다.
[styled-components] 타입스크립트에서 사용하기
reset.css, normalized.css의 역할을 하는 것으로, 브라우저 간의 차이를 최대한 없애는 코드를 넣어서, 브라우저 요소들의 스타일이 0인 상태에서 디자인을 만들어 나가기 위해 생겨난 것이다.
[React Hook 시리즈 3]: 10가지 Hook들 (useMemo, useRef 등)
- 랜더링 될 때마다 값을 계속 계산하지 않고, 이전에 계산된 값을 메모이제이션하여 불필요한 연산을 줄인다.
[React Hook 시리즈 2]: useEffect()
컴포넌트가 랜더링 이후에 실행시킬 함수를 정의한다. useEffect의 effect는 side-effect라는 뜻이며, 컴포넌트가 화면에 랜더링 된 후 (main-effect) 에 해야할 작업들을 말한다.…
[React Hook 시리즈 1]: 쓰는 이유, useState()
함수형 컴포넌트는 컴포넌트 내부의 state를 만들 수 없고, 컴포넌트의 생성, 변경, 소멸에 대한 이벤트인 라이프사이클 API를 사용할 수 없었다. 그저 상위 컴포넌트가 시키는 일만 처리하는 단순한 컴포넌트에만…
[React Router] 라우터 사용하기(react-router-dom v5)
• SPA는 서버에 하나의 페이지만 요청하여 전체 웹앱을 사용하는데, 이때 리액트 라우터는 CSR, AJAX 기술을 활용하여, 페이지 이동 시 리로드 없이 라우팅할 수 있도록 한다.
[리액트 삼대장]: Component, State, Props
1) 기능을 단위별로 캡슐화하는 리액트의 기본 단위
[React 입문]: 쓰는 이유, 특징, CRA, CRA구축
1. ?: JS언어인데 함수 안에 HTML코드를 작성할 수 있다.(JSX)