Thanks for reading!

© 2026 · Bang Eunsu

이력서로 돌아가기

기술 정리 & 회고

velog.io/@diso592RSS

Velog(@diso592)에 정리한 프론트엔드·React Native 학습과 실무 궤적을 태그 중심으로 재구성했습니다.

2026.08.18 09:05 기준 수집
정리 글 50개
태그 8개

Skill Map

  • React Native48편
    1. React Native에서 모달 등장 시 미세한 jank 원인을 추적한 기록
    2. React Native 가상화 리스트 컴포넌트의 성능 관련 props 모음
    3. React Native에서의 콜드 스타트 최적화 & UX 전략
    4. ios에서 usb 연결하고 빌드 후 Metro 와의 연결이 끊길 때
    5. React Native 에서의 메모이제이션 (4. React Compiler 적용시 지켜야할 필수 규칙들)
  • State Management1편
    1. Tanstack Query에서 mutation 으로 달라지는 파라미터 variable?
  • 태그별 보기
  • 시간순 보기

Tag Cloud

  • 전체
  • react native48
  • build-and-deploy6
  • optimization6
  • memoization4
  • Debuging1
  • iOS1
  • tanstack-query1
  • trouble shooting1
  • React Native 가상화 리스트 컴포넌트의 성능 관련 props 모음

    2026.08.08

    React Native 가상화 리스트 성능 props 정리 — FlatList vs FlashList vs LegendList 긴 리스트의 성능 문제는 결국 "화면에 보이지 않는 아이템까지 다 그리느냐"의 싸움이다. 세 라이브러리 모두 가상화(virtualizatio

    자사 RN 앱 개발/유지보수
  • React Native에서의 콜드 스타트 최적화 & UX 전략

    2026.08.08

    개요 최적화는 어디서 시간이 쓰이는지 분해하는 데서 시작한다. 콜드 스타트는 크게 다음 구간으로 나뉜다. 프로세스 생성 + 네이티브 초기화 — OS가 앱 프로세스를 띄우고 네이티브 런타임이 올라오는 구간이다. 앱이 직접 줄이기 가장 어렵다. JS 엔진 초기화 +

    자사 RN 앱 개발/유지보수
  • React Native 에서의 메모이제이션 (4. React Compiler 적용시 지켜야할 필수 규칙들)

    2026.08.05

    1. eslint-plugin-react-hooks개요 핵심 전제부터 짚는다. React Compiler는 위반을 만나면 빌드를 실패시키지 않고 해당 함수를 그대로 둔다. 즉 "skip"은 에러가 아니라 안전 후퇴(silent bailout)다. RC는 Rules o

    자사 RN 앱 개발/유지보수
  • React Native 에서의 메모이제이션 (3. React Compiler 의 적용시 기존 메모이제이션들의 방향)

    2026.08.04

    개요 RC를 도입했을 때 수동 메모이제이션이 불필요해지는 라이브러리·기능들을 정리해보자. 결론부터 말하자면 본질은 모두 같다. RC가 인라인 객체·함수·배열을 표현식 단위로 자동 캐시하므로, 그 위에 손으로 깔던 useMemo / useCallback / React.m

    자사 RN 앱 개발/유지보수
  • React Native 에서의 메모이제이션 (2. React Compiler 의 자동 메모이제이션)

    2026.08.02

    1. React Compiler란? React Compiler(이하 RC)는 빌드 타임에 코드를 분석해 메모이제이션을 자동으로 삽입하는 컴파일러다. 지금까지 개발자가 손으로 깔던 React.memo / useMemo / useCallback을, 컴파일러가 데이터 흐름

    자사 RN 앱 개발/유지보수
  • React Native 에서의 메모이제이션 (1. React와 같은 이론이지만 더 낮은 손익분기점)

    2026.07.27

    1. 개요 React의 메모이제이션(React.memo, useMemo, useCallback)은 효과가 작거나 오히려 손해가 나는 경우에는 적용하지 않는 것이 정석이다. 비교 연산과 메모리 비용이 절약되는 렌더 비용을 초과할 수 있기 때문이다. 그렇다면 React

    자사 RN 앱 개발/유지보수

이 페이지는 어떻게 만들어졌나요?

Velog GraphQL → 배포 파이프라인 → RSC 정적 렌더링까지의 흐름

Velog @diso592

GraphQL API

scripts/fetch-velog.ts

try/catch + exit(0)

src/data/velog-posts.json

committed seed

Next.js 16 RSC

utilFetchVelogArchive

/{locale}/writings

static HTML

GitHub Actions cron이 velog RSS를 폴링해 새 글 감지 시 배포 웹훅을 트리거합니다.

SOURCE

velog.io/@diso592 posts + tags

FETCH

배포 시 GraphQL 커서 페이지네이션

SEED

커밋된 시드, 실패 시 이전 JSON 유지

RENDER

서버에서 fs로 로드, RSC 정적 렌더링

OUTPUT

/{locale}/writings 정적 HTML

posts
정리 글 50개
tags
태그 8개
fetched
2026.08.18 09:05 기준 수집
  • Velog GraphQL
  • Next.js RSC
  • TypeScript
  • GitHub Actions