웹 개발에서 살아남기

웹 사이트의 품질을 결정하는 기준인 웹 표준(Web Standards)의 정확한 정의와 4가지 핵심 이점을 정리한다. 또한 실무에서 표준 준수 여부를 점검하고 품질을 높일 수 있는 W3C Validator, Lighthouse, Can I Use 등 필수 검증 도구 5가지를 소개한다. 웹 표준(Web Standards) 가이드: 정의부터 필수 도구 5선까지"제 로컬(Chrome)에서는 잘 되는데요?"주니어 시절, QA 팀으로부터 크로스 브라우징 이슈 리포트를 받았을 때 가장 먼저 했던 변명이다. 하지만 사파리(Safari)나 구형 모바일 기기, 혹은 인앱 브라우저에서 레이아웃이 깨지거나 버튼이 눌리지 않는 문제는 현업에서 매우 빈번하게 발생한다. 웹사이트는 단순히 내 화면에서 '작동'하는 것을 넘어, ..

Tiptap이나 Toast UI Editor 등, 서로 다른 에디터를 한 프로젝트에 도입할 때 발생하는 ProseMirror 의존성 충돌 문제를 다룬다. instanceof 체크 실패 원인을 분석하고, pnpm overrides를 이용한 강제 해결법과 그에 따른 위험성을 정리했다. ProseMirror 의존성 충돌: 에디터 라이브러리 2개 쓸 때 발생하는 문제와 해결책평화롭게 실무 개발을 하던 중 기묘한 버그를 만났다. 기존 레거시 에디터가 불편하다는 피드백이 있어, 최신 에디터(Tiptap 등)를 도입해 PoC(개념 증명)를 진행하려는 순간 빌드조차 되지 않거나 런타임에서 원인을 알 수 없는 에러가 발생한 것이다.로그를 뜯어보니 두 에디터 모두 내부적으로 ProseMirror라는 라이브러리를 공통으로 ..

좋은 React 애플리케이션의 품질은 코드를 작성하기 전 '설계' 단계에서 결정된다. 컴포넌트 계층 구조 분리부터 최소한의 State 산정, 그리고 데이터 흐름의 위치 선정까지, 유지보수하기 좋은 리액트 앱을 만드는 5단계 사고 과정을 정리한다. React 실무 설계 (1): 'Thinking in React'로 사고하는 5단계 프로세스최근 실무 프로젝트를 진행하면서, 단순히 기능이 돌아가는 결과물을 만드는 것보다 "어떻게 하면 동료가 읽기 쉽고, 미래의 내가 고치기 쉬운 코드를 짤까?"에 대한 고민이 깊어졌다. 결국 이는 단순히 코딩 기술을 넘어 "잘 설계하는 사고방식"의 문제로 귀결된다.React 개발자가 된다는 것은 JSX 문법을 익히는 것을 넘어, "React스럽게 사고하는 법(Thinking i..

React Hook Form에서 formState의 값이 업데이트되지 않거나 isDirty가 항상 false로 나오는 문제는 RHF의 성능 최적화 핵심인 Proxy 기반 Lazy Evaluation(지연 평가) 때문이다. 이 현상의 기술적 원리와 올바른 구독(Subscribe) 방법을 정리한다. React Hook Form: formState 업데이트가 안 되는 이유 (Lazy Evaluation)React Hook Form(이하 RHF)으로 폼을 개발하다 보면 황당한 경험을 할 때가 있다. form.formState.isDirty 값을 체크해서 수정 사항이 없으면 제출을 막으려고 로직을 짰는데, 폼을 아무리 수정해도 여전히 false로 나와서 기능이 동작하지 않는 현상이다.더 기묘한 건, 디버깅을 위해..

자바스크립트에서 주소를 다룰 때 사용하는 URL과 URLSearchParams 객체의 차이점과 활용법을 정리한다. 전체 경로 파싱부터 쿼리 스트링(Query String) 조작, 그리고 실무에서 자주 쓰이는 유틸리티 함수 구현까지 상세히 다룬다. URL과 URLSearchParams: 자바스크립트로 주소 조작하기이 글은 JavaScript Core 시리즈의 3번째 글이다.프론트엔드 개발을 하다 보면 API 요청을 보내거나 페이지 라우팅을 처리할 때 URL을 조작해야 하는 일이 빈번하다. 이때 정규표현식으로 문자열을 자르기보다는 브라우저가 기본 제공하는 Web API인 URL과 URLSearchParams를 사용하면 훨씬 안전하고 깔끔하게 처리할 수 있다.비슷해 보이지만 용도가 명확히 다른 두 객체의 특징..

Next.js 프로젝트를 GitHub Pages에 정적으로 배포하기 위한 핵심 설정인 브랜치 전략, next.config.js 설정, 그리고 GitHub Actions 워크플로우(YAML) 작성법을 상세히 정리한다. 실무에서 사용하는 스테이징(Staging) 배포 파이프라인 구축 과정을 담았다. Next.js: GitHub Actions 자동 배포 완벽 가이드 (2)이 글은 Next.js 배포 파이프라인 구축 시리즈의 2번째 글이다. 이전 글 보기이전 글에서 배포 전략과 개념을 잡았으니, 이제 실제로 코드를 작성하고 설정을 만질 차례다. GitHub Actions로 Next.js를 정적 빌드(SSG)해서 GitHub Pages에 띄우는 과정은 크게 3단계로 나뉜다.이 과정만 따라오면 push 한 번으로 ..

Next.js 프로젝트를 Vercel이 아닌 GitHub Pages로 배포해야 하는 상황과 정적 사이트 생성(SSG)의 개념을 정리한다. 특히 GitHub Repository 설정에서 'Deploy from a branch'와 'GitHub Actions' 옵션의 차이를 명확히 구분하고, 커스텀 배포를 위한 올바른 접근 방식을 설명한다. Next.js: GitHub Pages 무료 배포, Vercel 대신 쓰는 이유와 전략 (1)Next.js 프로젝트를 배포할 때 가장 먼저 떠오르는 선택지는 단연 Vercel이다. Next.js를 만든 회사인 만큼 SSR(Server Side Rendering), ISR 등 모든 기능을 설정 없이 완벽하게 지원하기 때문이다.하지만 비용 문제나 사내 보안 정책, 혹은 간단..

백엔드 데이터에 이미 id 속성이 있을 때 useFieldArray를 사용하면 React Hook Form(RHF)의 내부 식별자와 충돌하여 데이터가 덮어씌워지거나 키 에러가 발생할 수 있다. 이를 해결하기 위한 keyName 옵션 설정법과, 자식 컴포넌트로 내릴 때의 정확한 타입 정의(FieldArrayWithId) 방법을 정리한다. React Hook Form: useFieldArray의 id 충돌 해결 (keyName 설정)useFieldArray를 사용하여 동적 폼을 만들 때, 서버에서 받아온 초기 데이터(Default Values)에 id라는 필드가 포함되어 있으면 곤란한 상황이 발생한다.React Hook Form(이하 RHF)은 배열 아이템을 추적하기 위해 자체적으로 id라는 고유 키를 생성..

useFieldArray는 동적 폼 관리를 위해 append, remove, move 등 8가지 핵심 메서드를 제공한다. 각 함수의 정확한 동작 원리와 인자(Argument), 그리고 실무에서 어떤 상황에 사용해야 하는지 상세히 정리한다. React Hook Form: useFieldArray의 모든 함수 완벽 정리useFieldArray를 단순히 배열을 map으로 돌리는 용도로만 쓰고 있지는 않은가? 이 훅은 배열 데이터를 효율적으로 조작하기 위해 최적화된 다양한 메서드를 제공한다. 단순 추가/삭제 외에도 순서 변경이나 특정 위치 삽입 등 복잡한 UI도 메서드 하나로 해결할 수 있다.리턴 객체에 포함된 모든 함수(API)의 사용법과 특징을 하나씩 상세히 분석해 본다.1. 데이터 추가 계열 (append..

React Hook Form을 사용하는데 입력 반응 속도가 느리다면 watch의 오남용을 의심해야 한다. 폼의 상태를 구독하여 리렌더링을 유발하는 watch와 값을 조용히 가져오는 getValues의 차이점, 그리고 useWatch를 이용한 렌더링 범위 최적화 전략까지 정리한다. React Hook Form 성능 최적화: watch vs getValues, 그리고 useWatchReact Hook Form(이하 RHF)이 다른 라이브러리보다 빠른 이유는 비제어 컴포넌트(Uncontrolled Component) 방식을 사용하여 입력값이 바뀔 때마다 리렌더링을 하지 않기 때문이다.하지만 개발자가 편의상 watch 함수를 무분별하게 사용하면, RHF의 장점인 'No Re-render' 특성이 사라지고 use..