2026.08.07 · 17 min
React는 왜 key를 요구할까 — diffing부터 Fiber까지
리스트를 렌더링할 때 key를 넣으라는 경고의 이유를 따라가 보면 Map 조회, 속성 단위 비교, 그리고 Fiber라는 자료구조까지 이어진다. React가 O(n³) 문제를 O(n)으로 만든 방법을 정리했다.
#React #key #Virtual DOM #Reconciliation #Fiber #렌더링 최적화
heum2 — Frontend Developer
25 posts
2026.08.07 · 10 min
중복 검사 함수를 O(n²)에서 O(n)으로 바꾸기
배열에 중복이 있는지 검사하는 이중 루프를 Set으로 리팩터링하며 시간복잡도를 다시 정리했다. 복잡도만 맞고 로직이 틀렸던 함정과, Set.has가 O(1)인 이유까지 짚는다.
#자료구조 #알고리즘 #시간복잡도 #Big-O #JavaScript #Set
2026.08.06 · 8 min
HEIC 사진을 올렸는데 서버에는 JPEG가 도착한다
아이폰 사진을 업로드하면 OS와 브라우저가 HEIC를 JPEG로 자동 변환해 전송합니다. 누가 변환했는지 파일명으로 판별하는 방법과, 이 동작 때문에 변환 코드의 버그가 가려지는 과정을 정리했습니다.
#HEIC #이미지 업로드 #Safari #Chrome #macOS #iOS #웹 개발
2026.03.17 · 5 min
React에서 한글 입력 시 이벤트 중복 실행 방지하기
e.nativeEvent.isComposing을 활용하여 한글 입력 시 keydown 이벤트가 중복 실행되는 문제를 해결하는 방법을 소개합니다.
#React #JavaScript #IME #한글 입력 #isComposing #웹 개발
2026.02.09 · 5 min
Next.js 15 + Storybook에서 webpack tap 에러 해결하기
Next.js 15.5에 번들된 webpack 5.101.3+와 Storybook 간 호환성 문제로 발생하는 'Cannot read properties of undefined (reading tap)' 에러 해결 과정
#Next.js #Storybook #webpack #SCSS #트러블슈팅
2026.01.13 · 11 min
Git worktree로 브랜치 스위칭 비용 줄이기
git stash와 checkout을 반복하는 대신 Git worktree로 여러 브랜치를 동시에 작업하는 방법을 소개합니다. Claude Code와 병렬 작업하기에도 유용합니다.
#Git #Git worktree #브랜치 #Claude Code #개발 생산성 #Git Flow
2025.11.27 · 12 min
Styled Components 스타일 우선순위 문제 해결기
Styled Components에서 컴포넌트를 상속할 때 발생하는 이슈를 정리
#styled-components #Next.js #CSS #TypeScript #CSS Specificity #웹 개발
2025.04.21 · 8 min
Next.js에서 뒤로가기 커스텀 버튼 로직 개선하기
Next.js에서 URL로 직접 접근했을 때 뒤로가기 버튼 클릭 시 메인으로 이동하는 로직 구현 및 이슈 해결 방법
#Next.js #App Router #JavaScript #History API #세션 스토리지 #웹 개발
2025.04.17 · 10 min
Next.js에서 페이지 이동 시 스크롤 위치가 유지되지 않는 문제 해결하기
Next.js 환경에서 레이아웃 시프트로 인해 페이지 이동 시 스크롤이 최상단으로 가지 않는 문제를 해결하는 방법을 소개한다.
#Web Performance #Next.js #스크롤 문제 해결 #웹 성능 최적화 #이미지 최적화
2025.04.08 · 7 min
Next.js와 Supabase로 간단하고 강력한 백엔드 구축하기
Next.js와 Supabase를 함께 사용하면 복잡한 서버 관리 없이 빠르게 웹사이트의 백엔드를 구현할 수 있다.
#Next.js #Supabase #실시간 통신 #백엔드 개발 #인증
2025.03.08 · 5 min
서브도메인 간 쿠키 공유와 CORS 문제 해결하기
서브도메인 간 쿠키 공유가 가능한 이유와 CORS 이슈가 발생하는 원인을 알아보고, Nginx 프록시와 Next.js 리라이트를 활용한 실용적인 해결 방법을 소개합니다.
#CORS #쿠키 #서브도메인 #Nginx #Next.js #프록시 #웹 보안
2024.08.11 · 5 min
React Query로 useLazyQuery 구현하기
이 글에서는 React Query에서 useLazyQuery를 사용하여 데이터 페칭을 효율적으로 관리하는 방법을 다룬다. 코드 예제와 함께 실습을 통해 useLazyQuery의 기본 사용법을 알 수 있다.
#React #React Query #JavaScript #TypeScript
2024.07.18 · 5 min
Day1 세계지도 어떻게 만들어야할까?
여행 프로젝트에서 어디로 여행갔는지 알기 위해 지도를 이용할 필요가 있다. 지도를 클릭할 때 해당하는 나라로 이동하는 효과를 주기 위해 방법을 찾아가는 과정을 적어본다.
#토이 프로젝트 #세계지도
2024.05.01 · 5 min
여행 앨범 프로젝트 구상
여행에서 사진은 빠질 수 없다. 일상으로 돌아온 후 사진을 보며 지친 일상을 위로를 받기도 한다. 여행 사진도 찍고 기록도 할 수 있는 나만의 여행 앨범 프로젝트를 구상해보자.
#토이 프로젝트
2024.04.10 · 7 min
Nextjs에서 외부 라이브러리 사용 시 발생했던 문제와 해결과정
프로젝트를 진행하면서 Ant Design 라이브러리를 사용했습니다. 설치 후 적용 시 문제가 발생했고, 해결했던 과정들을 풀면서 잘 모르는 키워드들은 한번 더 적어보았습니다.
#Nextjs
2023.12.14 · 4 min
Windows PowerShell을 꾸며보자
기본 터미널은 너무 칙칙하다. 이번에 PowerShell을 이쁘게 꾸며보자.
#powershell #oh-my-posh #windows
2023.08.24 · 6 min
Linked List와 Array 비교
Linked List와 Array 비교
#자료구조 #JavaScript
2023.07.16 · 2 min
Arrow Function에 대해 알아보자.
ES6에서 사용되고 있는 Arrow Function대해 알아보자.
#JavaScript #ES6
2023.07.15 · 2 min
This는 무얼 가르킬까?
this는 상황에 따라 값이 달라진다. 왜 그런지 알아보자.
#JavaScript #ES6
2021.07.19 · 5 min
React Native에서 Development, Staging, Production 설정
Development, Staging, Production 설정
#react-native-config #react native #environment variables
2020.09.11 · 9 min
TypeScript + Express + typeORM 세팅
TypeScript와 Express 그리고 typeORM의 세팅하는 방법을 알아보자
#JavaScript #backend #express #typeORM
2020.05.23 · 9 min
자바스크립트에서 비동기 처리 다루기
비동기 처리
#JavaScript #ES6 #async await #비동기 처리
2019.12.13 · 10 min
Git으로 협업하기
Git을 이용해 협업하는 방법을 알아보자.
#Git
2019.12.12 · 7 min
Git 명령어
Git 명령어에 대해 자세히 알아보자.
#Git
2019.12.11 · 6 min
Git의 기초
Git을 한번 사용해보자.
#Git