Hello Jay's Programming World!

[Web] 프론트엔드 개발자가 알아야 할 Core Web Vitals 최적화 실전 가이드 (LCP, INP, CLS)

안녕하세요. 코딩하는 Jay입니다. 오늘은 현대 웹 개발에서 검색 엔진 최적화(SEO)와 사용자 경험(UX)을 좌우하는 구글의 핵심 웹 지표(Core Web Vitals)의 개념과 실무 최적화 기법에 대해 알아보도록 하겠습니다.웹 서비스를 배포하고 나면 "왜 우리 사이트는 로딩이 느리게 느껴질까?", "모바일에서 스크롤하거나 버튼을 누를 때 왜 버벅거릴까?" 하는 고민을 한 번쯤 해보셨을 텐데요. 구글은 2024년 기존 FID(First Input Delay)를 폐지하고 인터랙션 반응성을 전면적으로 평가하는 INP(Interaction to Next Paint)를 정식 코어 지표로 도입했습니다.이제 단순히 초기 로딩 속도만 빠르다고 좋은 점수를 받을 수 없습니다. 오늘은 LCP, INP, CLS의 3대 ..

[Flutter] SharedPreferences vs Hive vs Isar: 2026 모바일 로컬 DB 성능 벤치마크 및 상황별 선택 가이드

안녕하세요. 코딩하는 Jay입니다.Flutter로 모바일 앱을 개발하다 보면 반드시 마주치는 고민이 있습니다. 바로 "앱의 로컬 데이터(설정값, 캐시, 사용자 기록)를 어떤 데이터베이스에 저장할 것인가?"인데요.가장 단순한 shared_preferences부터 순수 Dart 기반의 경량 NoSQL Hive, 그리고 초고속 네이티브 성능과 복잡한 쿼리를 지원하는 Isar, 여기에 전통의 강호 sqflite까지 선택지가 너무 다양해 프로젝트 초기에 혼란을 겪기 쉽습니다.오늘은 실제 프로덕션 앱 서비스에 적용해 보며 측정한 CRUD 벤치마크 성능과 상황별 최적의 로컬 스토리지 선택 기준을 알기 쉽게 정리해 드립니다.한눈에 보는 Flutter 로컬 DB 4종 비교라이브러리데이터 모델속도 / 성능쿼리 / 인덱싱 ..

[React 19] useActionState & useOptimistic 실전 활용법: 더 이상 복잡한 폼 상태 관리는 없다

안녕하세요. 코딩하는 Jay입니다.블로그를 시작한 지 엊그제 같은데 어느덧 110번째 개발 포스팅을 맞이하게 되었습니다. 기념비적인 110번째 글인 만큼, 오늘은 최근 Next.js 15와 함께 프론트엔드 실무 생태계의 중심에 선 React 19의 핵심 신규 훅 2가지(useActionState, useOptimistic)를 다뤄보려 합니다.프론트엔드 개발자라면 누구나 한 번쯤 폼(Form)을 다루며 고통받아본 경험이 있으실 겁니다. 사용자 입력을 받기 위해 수많은 useState를 선언하고, 제출 중 로딩 스피너를 띄우기 위해 isLoading 플래그를 관리하며, 에러를 잡기 위해 장황한 try-catch 블록을 작성해야 했죠.React 19는 이러한 보일러플레이트 지옥을 네이티브 차원에서 종식시켰습니..

안녕하세요. 코딩하는 Jay입니다.모던 웹 개발에서 타입스크립트(TypeScript)는 이제 선택이 아닌 필수가 되었습니다. 하지만 많은 개발팀이 여전히 과거 4.x 시절의 문법과 관성에 머물러 있는 경우가 많은데요.TypeScript 5.x 메이저 릴리즈 이후, 컴파일러 속도가 비약적으로 빨라졌을 뿐만 아니라 타입 추론을 획기적으로 단순화하고 코드 보일러플레이트를 줄여주는 강력한 실무 기능들이 대거 추가되었습니다.오늘은 수많은 신기능 중에서도 실무 개발에서 생산성을 가장 크게 끌어올려 준 핵심 기능 4가지와 실전 코드 예시를 정리해 보았습니다.한눈에 보는 TS 5.x 핵심 기능 요약기능명주요 용도 및 혜택실무 체감 포인트const Type Parameters함수 인자의 리터럴 타입을 as const 없..

안녕하세요. 코딩하는 Jay입니다.모던 프론트엔드 개발의 표준 프레임워크로 자리 잡은 Next.js가 15 버전으로 메이저 판올림되었습니다. 이번 릴리즈는 단순한 기능 추가를 넘어, 개발 생산성의 병목이었던 로컬 빌드 속도의 극적인 개선(Turbopack 정식 지원)과 React 19 생태계 전면 수용, 그리고 수많은 개발자들을 혼란스럽게 했던 캐싱 동작의 직관적 재정의를 핵심으로 담고 있습니다.프로덕션 레벨에서 Next.js를 운영 중인 팀이라면 언제, 어떻게 업그레이드를 진행해야 할지 고민이 깊으실 텐데요.오늘은 Next.js 15에서 실무 개발자가 반드시 짚고 넘어가야 할 핵심 변경점 4가지와 브레이킹 체인지 대응 및 마이그레이션 팁을 정리해 보았습니다.한눈에 보는 Next.js 15 핵심 변경점구..

안녕하세요. 코딩하는 Jay입니다.구글 플레이(Google Play)에 앱을 출시하거나 업데이트를 진행할 때마다 정기적으로 마주치는 관문이 있습니다. 바로 타깃 SDK(targetSdkVersion) 버전 상향 요구인데요.구글 정책에 따라 신규 앱과 업데이트 앱 모두 안드로이드 15(API 레벨 35) 타깃 대응이 필수가 되었습니다. 기존에 잘 빌드되던 Flutter 프로젝트의 targetSdkVersion을 35로 올리는 순간, 빌드가 터지거나 런타임 에러를 겪으시는 분들이 많으실 것 같습니다.오늘은 Flutter 프로젝트에서 안드로이드 15(API 35)를 대응할 때 자주 발생하는 빌드 에러와 필수 수정 사항들을 정리해 보았습니다.1. build.gradle 기본 설정 변경가장 먼저 android/a..

안녕하세요. 코딩하는 Jay입니다. Flutter 앱에 링크 열기 기능을 붙이려고 url_launcher 패키지를 추가했더니, 잘 되던 Android AAB(App Bundle) 빌드가 갑자기 실패하는 상황을 만났습니다. 릴리스 직전에 터지면 당황스럽죠. 원인과 해결법을 정리해둡니다. 증상url_launcher를 추가하고 릴리스 번들을 만들려는데 빌드가 깨집니다.flutter build appbundle --release에러는 대략 이런 형태로 나옵니다. (메시지 표현은 환경마다 조금씩 다를 수 있습니다.)Dependency 'androidx.browser:browser:1.9.0' requires Android Gradle plugin 8.9.1 or higher.This build currently ..

안녕하세요. 코딩하는 Jay입니다. 오늘은 요즘 개발 판에서 빠르게 바뀌고 있는 "AI와 함께 코딩하는 방법론"의 흐름을 정리해보려고 합니다. 혹시 얼마 전까지 "프롬프트 잘 쓰는 법"을 열심히 공부했는데, 어느새 "컨텍스트 엔지니어링"이 나오고, 또 "하네스"니 "루프"니 새로운 말이 계속 쏟아져서 좀 어지러우셨던 적 있으시죠? 저도 그랬습니다. 그런데 하나하나 뜯어보니 이게 서로 다른 유행이 아니라, 이전 단계를 흡수하면서 한 층씩 위로 올라가는 진화더라고요. 오늘은 그 네 단계를 순서대로 정리해보겠습니다.한 문장 요약: 질문에서 시스템으로먼저 큰 그림부터 보겠습니다. 네 단계는 결국 "무엇을 잘 다룰 것인가"의 대상이 바뀌어 온 역사입니다.프롬프트 엔지니어링 — 어떻게 질문할 것인가컨텍스트 엔지니어..

안녕하세요. 코딩하는 Jay입니다. 오늘은 방금 나온 Claude Sonnet 5 출시 소식을 개발자 관점에서 정리해보려고 합니다.한눈에 정리출시일: 2026년 7월 1일핵심 메시지: "Opus급 성능을 절반 값에"강화점: 에이전트 능력 — 스스로 계획을 세우고 브라우저·터미널 같은 도구를 직접 사용함께 공개: Claude Science (과학 연구 특화 모델)무엇이 좋아졌나 — 에이전트와 코딩이번 Sonnet 5의 방향성은 명확합니다. 바로 에이전트(agent) 능력 강화인데요. Anthropic에 따르면 모델이 스스로 계획을 세우고, 브라우저·터미널 같은 도구를 직접 사용하며 작업을 자율적으로 수행한다고 합니다.또한 지난 2월에 나온 Sonnet 4.6과 비교해 추론·도구 사용·코딩·지식 작업 전반..

안녕하세요. 코딩하는 Jay입니다. 예전에 [React 환경에서 Markdown 출력하기(react-markdown)] 글을 올렸는데, 꾸준히 찾아주시더라고요. 그래서 오늘은 한 발 더 들어가서, 실제 서비스에서 자주 필요한 ① 수학 수식(KaTeX) ② 코드 문법 강조(syntax highlight) ③ 유용한 remark/rehype 플러그인을 정리해보려고 합니다.본 글은 react-markdown v9 기준입니다. (v9에서 API가 일부 바뀌었으니 아래 주의사항도 함께 보세요.)1. remark와 rehype, 뭐가 다른가요?react-markdown은 내부적으로 unified 생태계를 씁니다. 처리 흐름을 알면 플러그인 배치가 쉬워집니다.마크다운 텍스트 → (remark) mdast: 마크다운..