All Tags | phnml1

All Posts.

27 articles

react2026.05.04

AI 리뷰 비동기 상태 흐름과 실시간 알림 구조 정리

AI 리뷰처럼 시간이 오래 걸리는 작업을 즉시 응답, 백그라운드 처리, 상태 기반 UI, 실시간 알림으로 연결한 과정을 정리했습니다.

react nextjs typescript

react2026.04.19

React Query 캐시 전략으로 PR 댓글 API 요청을 10회에서 0회로 줄인 과정

CodeMate의 PR 댓글 화면에서 React Query의 `invalidateQueries`와 `setQueryData`를 비교하며, 변경분만 반영해 네트워크 요청을 줄인 과정을 정리했습니다.

react react-query cache performance codemate setQueryData invalidateQueries

react2026.04.19

PR 댓글 실시간 시스템을 WebSocket으로 설계한 이유

PR 댓글, reply, typing indicator, 알림을 실시간으로 반영하기 위해 WebSocket 기반으로 설계한 이유와 구조를 정리했습니다.

react websocket realtime codemate comments

nextjs2026.04.04

Next.js 서버 컴포넌트에서 Promise.all()로 대시보드 응답 시간 2배 단축하기

Next.js 서버 컴포넌트에서 Promise.all을 활용해 데이터 페칭을 병렬화하고, 대시보드 응답 시간을 약 2배 개선한 과정과 구조를 정리했습니다.

nextjs react performance server-components promise-all optimization

react native2026.03.22

React Native 칸반보드 드래그 앤 드롭 성능 최적화 (3) - Zustand Store와 React.memo로 리렌더링 최소화

2편의 개선에도 불구하고 남아있는 30-46ms짜리 큰 리렌더링의 원인은 props drilling이었습니다. Zustand store로 draggingItem 상태를 분리하고, React.memo와 세밀한 selector로 전체 트리 리렌더링을 차단합니다.

react native 드래그 앤 드롭 성능 최적화 Zustand React.memo selector 칸반보드 props drilling

react native2026.03.09

React Native 칸반보드 드래그 앤 드롭 성능 최적화 (2) - PanResponder 안정화와 Native 애니메이션

1편에서 측정한 문제들 중 즉각적인 효과가 있는 것부터 개선합니다. PanResponder를 useMemo로 안정화하고, 애니메이션을 Native 스레드로 전환합니다. 그리고 실제 측정 결과를 봅니다.

react native 드래그 앤 드롭 성능 최적화 PanResponder useMemo useRef useNativeDriver 칸반보드

react native2026.02.23

React Native 칸반보드 드래그 앤 드롭 성능 최적화 (1) - 문제 인식과 측정

칸반보드 드래그 앤 드롭에서 드래그 중에 불필요한 리렌더링 및 버벅임이 발생하는 문제를 수치로 측정하고 원인을 분석합니다.

react native 드래그 앤 드롭 성능 최적화 리렌더링 칸반보드 PanResponder props drilling

react native2026.02.09

React Native 칸반보드 드래그 앤 드롭 구현기 (4)

드래그 중 화면 경계에서 자동으로 스크롤되는 기능을 requestAnimationFrame 기반으로 구현합니다.

react native 드래그 앤 드롭 자동 스크롤 requestAnimationFrame 칸반보드

react native2026.01.25

React Native 칸반보드 드래그 앤 드롭 구현기 (3)

Floating Card를 Portal 패턴으로 구현하여 드래그 앤 드롭의 시각적 완성도를 높이는 방법을 다룹니다.

react native 드래그 앤 드롭 Portal Context API Animated

react native2026.01.12

React Native 칸반보드 드래그 앤 드롭 구현기 (2)

드래그 앤 드롭의 핵심 훅 구조와 절대 좌표 기반 레이아웃 측정, 드롭 타겟 계산 로직을 구현합니다.

react native 드래그 앤 드롭 PanResponder 칸반보드 hooks

react native2025.12.29

React Native 칸반보드 드래그 앤 드롭 구현기 (1)

React Native에서 칸반보드 형태의 Drag & Drop을 구현하며 PanResponder 기반 절대 좌표 시스템을 선택한 이유와 구현 과정을 공유합니다.

react native 드래그 앤 드롭 PanResponder 칸반보드 트러블슈팅

react native2025.03.25

React Native에서 Google Maps 연동 및 위치 추적 기능 구현하기

React Native에서 Google Maps 연동 및 위치 추적 기능 구현하고, 초기 위치 설정하는 과정에서 발생한 문제를 해결하는 과정입니다.

react native 트러블슈팅 google map expo-location 졸업작품

react2025.03.11

setState는 비동기일까

setState가 왜 동기 함수인지, 그리고 react서는 setState를 통해 상태 업데이트를 어떻게 하는지 알아보자.

react JavaScript deepdive useState hook

react2024.11.25

React와 Next.js의 Suspense에 대해 알아보자

React와 Next.js에서 Suspense를 어떤 방식으로 다르게 다루는지, 그리고 Next.js에서 이로인해 발생할 수 있는 에러와 해결방법에 대해 알아보자.

react next.js deepdive SSR Suspense 렌더링

react2024.11.19

리액트 컴포넌트 테스트 코드 시작하기

React Deepdive 서적의 React 컴포넌트의 테스트 코드를 정리하였다.

react 테스트 deepdive

react2024.11.12

React 개발자 도구(React dev tools)로 불필요한 렌더링을 없애본 경험

React 개발자 도구(React dev tools)의 기능들과 이를 활용해본 경험을 공유해보겠다.

react next.js 렌더링 트러블슈팅 deepdive dev tools

react2024.11.04

서버사이드 렌더링에 대해 알아보자(Feat: next.js, SSG)

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)에 대해서 그리고 SSR을 활용한 next.js 예제와 SSG의 개념과 예제까지 알아보자.

react next.js deepdive SSR SSG 렌더링

Algorithm2024.10.31

[PCCP 기출문제] 퍼즐게임 챌린지

프로그래머스 [PCCP 기출문제] level 2 퍼즐게임 챌린지 문제 풀이 입니다.

Algorithm 프로그래머스 PCCP lv2 이분탐색

react2024.10.27

React useState 훅과 클로저

클로저를 이용한 React useState 훅의 작동 원리

react JavaScript deepdive useState hook 클로저

JavaScript2024.10.26

클로저에 대하여

자바스크립트의 어렵지만 중요한 클로저의 개념과 활용을 함께 살펴보자

JavaScript deepdive 클로저 생명주기

react2024.09.25

[React DeepDive] React의 가상 DOM

리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.

react deepdive Virtual DOM

Algorithm2024.08.10

[백준 gold 5] 빌런 호석

dfs을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다.

Algorithm 백준 gold dfs

Algorithm2024.07.13

[프로그래머스 level 3] 아이템 줍기

bfs를 활용한 프로그래머스 [level 3] 아이템 줍기 문제 풀이 입니다.

Algorithm 프로그래머스 lv3 bfs

Algorithm2024.07.09

[프로그래머스 level 3] 징검다리 건너기

이분탐색을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다.

Algorithm 프로그래머스 lv3 이분탐색

JavaScript2024.04.30

객체 리터럴

자바스크립트 딥다이브 책 내용 중 '객체 리터럴'의 정리 내용입니다.

JavaScript

JavaScript2024.04.26

원시 값과 객체의 비교

자바스크립트 딥다이브 책 내용 중 '원시 값과 객체의 비교'의 정리 내용입니다.

JavaScript

JavaScript2024.04.22

자바스크립트 딥다이브: 09.타입 변환과 단축평가

자바스크립트 딥다이브 책 내용 중 '타입 변환과 단축평가'의 정리 내용입니다.

JavaScript