홈 - Sam tech blog

영상 플랫폼 시스템 디자인 흐름 정리

동영상 플렛폼의 시스템 디자인 아키텍쳐(업로드, 다운로드)를 이해하기 위해 공부한 내용을 정리했습니다.

2025-05-07

React Native iOS에서 빈 이미지 파일 발생

React Native 기반 프로젝트에서 iOS 기기에서 사진을 선택한 후 피드를 작성하려 할 때, 간헐적으로 이미지 업로드가 실패하는 문제가 발생했습니다

2025-03-25

React Native fetch(file://...) 사용 시 이미지 업로드 용량이 3배 증가하는 이유

React Native iOS 환경에서 이미지 업로드 시, fetch(uri)만 호출해도 JPEG 용량이 최대 3배까지 증가하는 버그가 발생했습니다. 이 글에서는 실제 디버깅을 바탕으로 원인 분석과 해결 방법을 공유합니다

2025-03-19

React Native fetch(file://...) 사용 시 이미지 업로드 용량이 3배 증가하는 이유

React 렌더링 원리 정리: Virtual DOM, Fiber, Lane, 업데이트 흐름

React의 렌더링 시스템은 단순한 Virtual DOM 비교를 넘어 Fiber 아키텍처 기반의 정교한 일처리 방식으로 진화해왔다. 이 글에서는 상태 업데이트가 발생했을 때 React가 내부적으로 어떤 과정을 거쳐 Virtual DOM을 비교하고 실제 DOM에 반영하는지, Fiber 트리 생성과 Lane 기반 우선순위 스케줄링, beginWork / completeWork 함수의 역할, commit phase의 효과 적용까지 전체 흐름을 코드와 함께 설명한다. 특히 React 18에서 도입된 자동 배치 처리와 비동기 처리 최적화도 함께 다룬다.

2025-03-11

React 렌더링 원리 정리: Virtual DOM, Fiber, Lane, 업데이트 흐름

기존 marquee 라이브러리 커스텀 및 성능 최적화

마키 애니메이션이 화면 전환 후에도 계속 실행되어 FPS가 저하되는 문제를 해결

2025-02-23

CKEditor5에서 천지인 IME 사용 시 한글 자음/모임 분리되는 현상

CKEditor5에서 Android 한글 입력 시, 자음과 모음이 분리되어 가 나 다 → 가 ㄴ ㅏ ㄷ ㅏ처럼 입력되는 현상 발생

2024-08-22

CKEditor5에서 천지인 IME 사용 시 한글 자음/모임 분리되는 현상

[Next JS] SSR과 서버 컴포넌트의 차이점

SSR은 서버에서 HTML을 렌더링하여 초기 로딩 속도와 SEO를 개선하는 방식이고, 서버 컴포넌트는 클라이언트의 번들 크기를 줄이고 서버에서 데이터를 직접 처리하여 성능을 최적화하는 방식이라는 차이를 소개해 드립니다.

2024-02-07

[React Native | RN | SVG] Text Stroke 효과 주는법 react-native-svg

React Native에서 텍스트에 stroke 효과를 주는 방법으로 CSS의 textShadow는 OS별 스타일 차이가 있어 react-native-svg의 <Text> 컴포넌트를 활용하여 일관된 스타일을 적용하는 방법을 소개해 드립니다.

2023-11-09

[React Native | RN | SVG] Text Stroke 효과 주는법 react-native-svg

[React-Native] Dark Mode 다크모드 🌓

React Native로 토스 디자인을 따라 하면서 zustand와 mmkv를 활용하여 다크 모드를 적용하고, 사용자 설정을 유지하는 방법을 소개해 드립니다.

2024-04-05

[Next JS | favicon | 파비콘] Next JS 프로젝트 탭,북마크는 favicon이 적용되는데 검색결과에 favicon이 적용 안될 때 해결법

Next.js 프로젝트에서 favicon이 브라우저 탭과 북마크에서는 정상적으로 표시되지만 검색 결과에서는 보이지 않는 문제를 해결하기 위해 favicon 형식, public 폴더 경로, 올바른 <link> 태그 사용, 빌드 및 캐시 문제 등을 점검하는 방법을 소개해 드립니다.

2024-01-22