전체 글
-
Next.js v14 → v15 마이그레이션 작업기Next.js 2026. 6. 6. 12:20
1. 도입부 (Why This Matters)메이저 버전 업그레이드는 보통 하나씩 한다. Next.js 먼저 올리고, 안정화되면 React, 그다음 Node. 교과서적이고 안전하다. 그런데 우리는 Next.js 14→15, React 18→19, Node.js 20→24, ESLint 8→9를 단일 PR로 동시에 올렸다. 88개 파일이 한 번에 바뀌었고, 프로덕션 에러율은 0%를 유지했다.이게 무모해 보인다면 정확한 직관이다. 다만 이 네 축은 서로 강하게 결합돼 있어서 따로 떼면 오히려 "중간 상태"가 더 위험해진다. React 19 타입은 Next.js 15가 요구하고, Next.js 15의 비동기 API는 Node 런타임과 맞물리고, ESLint 9는 그 위에서 새 코드를 검증한다. 절반만 올린 브..
-
개발자 원칙(확장판) - 박성철 , 강대명 , 공용준 , 김정 , 박미정 , 박종천 , 장동수 , 이동욱(향로) , 이동욱(네피림)서평 2026. 6. 3. 12:27
이 책은 "좋은 개발자란 누구인가"라는 질문에 기술 스택이 아니라 업(業)의 원칙으로 답하는 책입니다. 컬리·카카오·무신사·몰로코·인프런 등에서 일해온 국내 테크 리더 9인이 각자 한 가지 원칙을 에세이로 풀어냈고, 확장판은 여기에 0장 「선배와의 인터뷰」와 각 장 말미의 「출간 후 2년, 그다음 이야기」를 더했습니다.그래서 이 책은 "무엇을 코딩할까"보다 "어떻게 개발자로 살아갈까"에 가까운, 일종의 직업 정체성 안내서입니다.0장. 선배와의 인터뷰핵심 개념: 확장판에 새로 들어간 부분으로, 9인 저자 전원에게 같은 질문 세 가지를 던집니다. "좋은 개발자(좋은 개발 조직)란 무엇인가", "언제 가장 즐거웠나", "이 일을 계속하게 하는 원동력은 어디서 오는가"입니다.주요 사례/에피소드: 각자의 답이 본..
-
TanStack Form과 React Hook Form, 어떤 폼 라이브러리를 선택할까?Tip 2025. 9. 11. 15:35
프론트엔드 개발에서 폼(Form) 관리는 피할 수 없는 숙제입니다. 단순한 로그인 폼에서 시작해 어느새 수십 개의 필드와 복잡한 검증 로직을 가진 건드리기도 싫은 코드가 되어버린 경험, 모든 개발자가 한 번쯤은 겪어봤을 것입니다. 이런 상황에서 React Hook Form은 오랫동안 React 생태계의 표준으로 자리 잡아왔습니다. 그런데 최근 TanStack Form이라는 새로운 선택지가 등장했습니다. 이 글에서는 두 라이브러리의 핵심 차이점을 분석하고, 어떤 상황에서 어떤 라이브러리를 선택해야 하는지 실무 관점에서 살펴보겠습니다차이점 이해하기먼저 두 라이브러리가 문제를 해결하는 접근 방식의 차이를 이해해 봅시다. React Hook Form은 성능 최적화에 중점을 둡니다. 이 라이브러리는 uncontr..
-
React useOptimistic vs React Query optimistic updates: 낙관적 업데이트, 무엇을 선택할까?React 2025. 9. 1. 18:59
사용자가 어떤 액션을 취했을 때 서버 응답을 기다리지 않고 UI에 미리 성공한 것처럼 반영하는 것을 낙관적 업데이트라고 합니다. 예를 들어 SNS에서 댓글을 달면 서버 응답 전에 곧바로 댓글이 화면에 나타나고 “전송 중...”이라고 표시되는 경험을 본 적이 있을 것입니다.성공 시에는 그대로 두고, 실패 시에는 UI를 다시 원래대로 돌립니다. 이러한 기법은 미묘한 시간 지연으로 인한 답답함을 줄여 사용자 경험을 개선하지만, 동시에 실패 시 UI를 되돌리고 오류를 알리는 처리가 중요합니다. 낙관적 UI 업데이트를 활용하면 서버 처리 중에도 “Sending...”과 같은 상태를 즉시 표시할 수 있습니다. 위 이미지는 사용자가 댓글을 작성하자마자 UI에 (Sending...) 라벨이 나타나는 예시입니다. 서버 ..
-
React의 Synthetic Event는 어떻게 작동할까?React 2025. 8. 14. 19:46
React의 이벤트 시스템, 즉 SyntheticEvent는 단순히 개발 편의를 위해 추가된 요소가 아닙니다.이것은 파편화된 브라우저 환경이라는 현실적 제약 속에서 일관되고 예측 가능한 UI 개발을 가능하게 하려는 React의 근본적인 아키텍처 설계의 산물입니다. React가 등장하기 전, 개발자들은 브라우저마다 제각각인 이벤트 모델과 비표준 API 구현 때문에 '크로스 브라우징'이라는 거대한 장벽에 끊임없이 부딪혔습니다.Internet Explorer의 attachEvent와 다른 브라우저의 addEventListener, 이벤트 객체의 속성 차이 등은 개발자에게 끝없는 if/else 분기문과 폴리필(Polyfill)의 늪을 선사했습니다. 이는 jQuery와 같은 라이브러리가 DOM을 직접 조작하며 복..
-
언제까지 MSW? MirageJS 알아보기Tip 2025. 8. 8. 19:10
실무에서 프론트엔드 개발을 하다 보면 생각보다 백엔드 개발이 늦어지는 경우가 많습니다.이전에 MSW에 대해 소개했었는데요.2024.11.30 - [Tip] - 실무에서 유용한 MSW(Mock Service Worker) 활용 가이드 실무에서 유용한 MSW(Mock Service Worker) 활용 가이드프런트엔드 개발을 하다 보면 백엔드 API가 완성되지 않은 상태에서 작업해야 하는 API 의존성 문제는 항상 개발 속도와 품질에 큰 영향을 미칩니다.이런 상황에서 모킹(Mocking)은 필수적이지만,kir93.co.kr이번 글에서는 최근 괜찮다고 생각되는 MirageJS를 MSW와 비교하며 소개해보겠습니다.MirageJS란?MirageJS는 브라우저 내에 가상의 API 서버를 생성하여 프론트엔드 코드와 함..
-
이제는 TipTap? 아직도 CKEditor?Tip 2025. 8. 1. 19:56
최근 편집기에 대해 조사하던 중 많이 변했다는 것을 체감했습니다.Quill 주로 사용하고 좀 더 많은 기능이 필요하다면 CKEditor를 사용하는 게 일반적이었는데, Tiptap과 같은 새로운 Editor가 나와 오늘은 Tiptap과 CKEditor, Quill에 대해 비교해 보겠습니다.ProseMirror와 TipTap – 모던 에디터의 탄탄한 기반먼저 TipTap을 이야기하기 전에, 그 기반 기술인 ProseMirror를 짚고 넘어가야 합니다.ProseMirror는 CodeMirror를 만든 Marijn Haverbeke가 설계한 문서 편집 엔진으로, 수년간 다양한 에디터에서 활용되며 안정성을 검증받은 배틀 테스트된(editor) 라이브러리입니다.ProseMirror는 문서 모델(schema)과 편집..
-
웹 애니메이션 성능을 끌어올리는 requestAnimationFrame(rAF) 활용법Tip 2025. 7. 24. 19:24
웹페이지를 구현할 때 가장 난감한 순간 중 하나는 애니메이션을 구현할 때인 것 같습니다.CSS만으로 구현할 수 있는 애니메이션이라면 다행이지만, JS로 스타일을 변화시켜야 되는 경우에는 생각보다 성능이 안 나오는 문제가 있습니다.(특히 모바일에서)이런 상황에서 최적화할 수 있는 API인 requestAnimationFrame(rAF)에 대해 알아보겠습니다.requestAnimationFrame은 무엇인가?requestAnimationFrame()은 쉽게 말해 브라우저에게 "다음 repaint 이전에 이 함수를 실행해 줘"라고 요청하는 API입니다. 콜백으로 전달된 함수는 브라우저 다음 프레임의 repaint 직전에 호출되며, 일반적으로 초당 60회(60 FPS) 호출됩니다.다만 실제 호출 빈도는 디스플레..