React 렌더링 원리 정리: Virtual DOM, Fiber, Lane, 업데이트 흐름
React의 렌더링 시스템은 단순한 Virtual DOM 비교를 넘어 Fiber 아키텍처 기반의 정교한 일처리 방식으로 진화해왔다. 이 글에서는 상태 업데이트가 발생했을 때 React가 내부적으로 어떤 과정을 거쳐 Virtual DOM을 비교하고 실제 DOM에 반영하는지, Fiber 트리 생성과 Lane 기반 우선순위 스케줄링, beginWork / completeWork 함수의 역할, commit phase의 효과 적용까지 전체 흐름을 코드와 함께 설명한다. 특히 React 18에서 도입된 자동 배치 처리와 비동기 처리 최적화도 함께 다룬다.
CKEditor5에서 천지인 IME 사용 시 한글 자음/모임 분리되는 현상
CKEditor5에서 Android 한글 입력 시, 자음과 모음이 분리되어 가 나 다 → 가 ㄴ ㅏ ㄷ ㅏ처럼 입력되는 현상 발생
[Next JS] SSR과 서버 컴포넌트의 차이점
SSR은 서버에서 HTML을 렌더링하여 초기 로딩 속도와 SEO를 개선하는 방식이고, 서버 컴포넌트는 클라이언트의 번들 크기를 줄이고 서버에서 데이터를 직접 처리하여 성능을 최적화하는 방식이라는 차이를 소개해 드립니다.
![[Next JS] SSR과 서버 컴포넌트의 차이점](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdkwge7cqi%2Fimage%2Fupload%2Fv1705837139%2Fpost%2Fbubn2i3ayfn8okhohdro.jpg&w=3840&q=30)
[React Native | RN | SVG] Text Stroke 효과 주는법 react-native-svg
React Native에서 텍스트에 stroke 효과를 주는 방법으로 CSS의 textShadow는 OS별 스타일 차이가 있어 react-native-svg의 <Text> 컴포넌트를 활용하여 일관된 스타일을 적용하는 방법을 소개해 드립니다.
![[React Native | RN | SVG] Text Stroke 효과 주는법 react-native-svg](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdkwge7cqi%2Fimage%2Fupload%2Fv1705326930%2Fpost%2Fb82hl7tymgd4vuw7wmqu.png&w=3840&q=30)
[React-Native] Dark Mode 다크모드 🌓
React Native로 토스 디자인을 따라 하면서 zustand와 mmkv를 활용하여 다크 모드를 적용하고, 사용자 설정을 유지하는 방법을 소개해 드립니다.
![[React-Native] Dark Mode 다크모드 🌓](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdkwge7cqi%2Fimage%2Fupload%2Fv1712315517%2Fpost%2Fxz0drfdxca6jbioklwz0.png&w=3840&q=30)
[Next JS | favicon | 파비콘] Next JS 프로젝트 탭,북마크는 favicon이 적용되는데 검색결과에 favicon이 적용 안될 때 해결법
Next.js 프로젝트에서 favicon이 브라우저 탭과 북마크에서는 정상적으로 표시되지만 검색 결과에서는 보이지 않는 문제를 해결하기 위해 favicon 형식, public 폴더 경로, 올바른 <link> 태그 사용, 빌드 및 캐시 문제 등을 점검하는 방법을 소개해 드립니다.
![[Next JS | favicon | 파비콘] Next JS 프로젝트 탭,북마크는 favicon이 적용되는데 검색결과에 favicon이 적용 안될 때 해결법](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdkwge7cqi%2Fimage%2Fupload%2Fv1705893465%2Fpost%2Fxjuwoto4djha0gzxlaor.png&w=3840&q=30)
[React] JSX 와 memo
JSX는 React.createElement() 함수로 변환되는 JavaScript 문법 확장으로, 이를 잘못 이해하면 props.children과 React.memo를 이용한 리렌더링 최적화가 제대로 동작하지 않을 수 있음을 소개해 드립니다.
![[React] JSX 와 memo](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdkwge7cqi%2Fimage%2Fupload%2Fv1705839515%2Fpost%2Fk3uh9du93f4lgfg3ay0d.png&w=3840&q=30)
[EC2 프리티어] JavaScript heap out of memory | NextJS 배포 시 메모리 부족
AWS EC2 프리티어(t2.micro)에서 Next.js를 배포할 때 발생하는 메모리 부족 문제를 해결하기 위해 SFTP(FileZilla)를 사용하여 로컬에서 빌드한 `.next` 폴더를 업로드하는 방법을 소개해 드립니다.
![[EC2 프리티어] JavaScript heap out of memory | NextJS 배포 시 메모리 부족](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdkwge7cqi%2Fimage%2Fupload%2Fv1704969445%2Fpost%2Fv2v0y7fqyainv931vnta.png&w=3840&q=30)
[Nginx] Custom Request Header 값이 백엔드에서 확인이 불가능 해결 방법 (EC2, Express)
Nginx의 기본 설정으로 언더스코어(_)가 포함된 헤더가 무시되어 CSRF 토큰이 Express에서 전달되지 않았으나, underscores_in_headers on; 설정으로 해결한 문제를 공유해드립니다.
![[Nginx] Custom Request Header 값이 백엔드에서 확인이 불가능 해결 방법 (EC2, Express)](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdkwge7cqi%2Fimage%2Fupload%2Fv1704875815%2Fpost%2Fh6dldbhmpwd18rduafow.jpg&w=3840&q=30)