dhyun2 개발 블로그

한 줄 결론WebView 기반 네이티브 브릿지에서 href/커스텀 스킴 가로채기 방식은 라우팅·딥링크용으로 한정하고, 일반 기능 호출은 메시지 기반 브릿지(postMessage, WKScriptMessageHandler, addWebMessageListener)로 옮기는 것이 현재 기준 가장 안전하고 유지보수하기 쉽다.Android 공식 문서는 addWebMessageListener를 권장(Recommended), postWebMessage를 대체(Alternative), addJavascriptInterface를 기존(Legacy) 으로 정리한다. iOS 역시 WKUserContentController 위에 WKScriptMessageHandler 또는 WKScriptMessageHandlerWithR..

claude code 관련 아티클을 읽으며 참고용으로 정리1. 대규모 개발에서 “SPEC 기반”이 필요한 이유대규모 작업에서 실패하는 패턴은 비슷하다.프롬프트가 모호해서 에이전트가 기본값/추측으로 달린다중간에 요구사항이 바뀌는데, 변경이 “대화 속 문장”으로만 존재한다결과가 마음에 안 들면 “다시 설명”을 반복하고, 누적 컨텍스트가 썩는다(Context rot)그래서 시작점은 항상 명세(SPEC) 다.여기서 SPEC은 완벽한 문서가 아니라 “의도를 고정시키는 최소 계약서”다.2. AskUserQuestionTool: “대화”가 아니라 “인터뷰”로 빈칸을 메운다2.1 왜 AskUserQuestion이 게임체인저인가AskUserQuestion은 Claude가 실행 중 멈춰서 결정 포인트를 구조화된 질문으로 ..

요약iOS Safari/WKWebView에서 placeholder는 브라우저가 기본적으로 연하게(반투명/연회색) 처리하는 경우가 있어, 밝은 회색(##c2c2c2)은 사실상 흰색처럼 보일 수 있습니다.해결은 보통 ::placeholder { opacity: 1; color: ... }처럼 명시적으로 고정하는 것입니다. iOS 대응으로 ::-webkit-input-placeholder도 같이 둡니다.그리고 placeholder는 label을 대체하면 안 됩니다. label + helper text(aria-describedby)가 정석입니다.1) 사건: iPhone에서 지정한 색과 다른 색이 되었습니다.처음 문제는 단순했습니다.placeholder 컬러를 디자인 토큰대로 #c2c2c2로 적용했습니다.데스..

1. 왜 단일 서버에서 Blue‑Green을 했나단일 서버 배포에서 흔히 겪는 문제는 단순하다.배포 순간에 프로세스가 내려가며 접속이 끊긴다새 프로세스가 올라오는 동안 일시적인 502/504가 발생한다문제 생기면 “재배포”가 최선이라 복구가 느리다기존 버전으로 즉시 되돌리는 버튼(rollback)이 없다Blue‑Green은 “두 개의 실행 슬롯(blue/green)을 번갈아 쓰고, 트래픽은 라우터(Nginx)가 가리키는 슬롯으로만 흐르게” 만들어서 이 문제를 해결한다.새 버전은 비활성 슬롯에서 먼저 기동/검증(health check)검증 성공 시 Nginx upstream 심볼릭 링크 교체 + reload로 전환(거의 즉시)장애 시 링크만 반대로 되돌리면 롤백 완료단일 서버에서 Blue‑Green이 특히..

디자인 시스템 쓰다 보면 매번 나오는 장면입니다.디자인 토큰은 Figma에,컴포넌트 가이드는 Storybook에,네이밍/철학은 노션이나 컨플루언스에,실제 사용 예시는 GitHub 코드에…문서는 넘치는데, 내가 지금 필요한 정보는 바로 안 보이는 그 느낌.요즘 많이 나오는 RAG(Retrieval-Augmented Generation) 는 사실 거창한 게 아니라,한 줄로 줄이면:“LLM에다 우리 회사 문서 검색 엔진을 붙여서, 먼저 찾아보고 나서 대답하게 만드는 패턴”입니다.이 글에서는:RAG가 뭔지, FE/디자이너 입장에서 어디까지 알면 되는지 사내 디자인 시스템을 RAG화하면 어떤 경험이 나오는지 이를 위해 어떤 아키텍처로 챗봇을 설계하면 좋은지 구현 시 피해야 할 함정(환각, 권한, 최신화, 평..

nextjs 톺아보기 – {children} );}Lighthouse로 SEO/Best Practices 체크meta description 누락, title 중복, canonical 누락 등은Lighthouse SEO 섹션에서 바로 잡아낼 수 있습니다.6.2 CSR-only React SPA라면React 19를 사용할 수 있다면내장된 Document Metadata 기능(, , 호이스팅)을 적극 활용하고구/레거시 환경이라면react-helmet-async로 페이지 별 meta를 구성하되,OG / SEO를 제대로 챙기고 싶다면 SSG/SSR 프레임워크(Next, Remix 등)로 옮기는 걸 진지하게 고민하는 게 좋습니다.7. 마무리는 “안 보이는 영역”이지만,검색, SNS, 성능, 정..

운영 중인 FE_devtalk 스터디 2주차 주제가 릴리즈 노트 분석 훈련 - vue3.5로 선정되었습니다.제가 선택한 항목은 reactivity: avoid infinite recursion when mutating ref wrapped in reactive 으로 vue의 reactive를 깊게 이해해야 분석 가능하기에 vue-ref를 먼저 정밀 분석하게 되었습니다.Vue Ref 구현 상세 분석 Vue의 반응성 시스템을 좀 더 깊이 이해하고 싶다면, `ref`가 어떻게 만들어지고 동작하는지 알아두면 좋습니다. 이 글에서는 **`ref`의 생성 과정**, **내부 클래스(`RefImpl`)**, 그리고 **의존성 관리(`Dep`)**가 어떻게 연결되어 있는지 정리해 보겠습니다.1. Ref 생성 과정Vue..

운영중인 FE_devtalk스터디 1주차 주제가 빌드시스템로 선정되었습니다. 이번 글은 왜 빌드 시스템이 필요한지에 집중하여 진행해보겠습니다! 이 글에서는 왜 빌드 시스템이 필요한지, 그리고 빌드 시스템이 어떤 과정을 거쳐 동작하는지를 알아봅니다. 마지막에는 간단한 예시 코드를 통해 직접 구현해보는 과정도 살펴보겠습니다.1. 빌드 시스템이 왜 필요할까?1️⃣ 모듈 시스템의 필요성예전에는 JavaScript에서 공식적인 모듈 시스템이 없었습니다. 그래서 프로젝트를 여러 파일로 나누면 전역 스코프가 오염되어, 의도하지 않은 변수 충돌이 빈번하게 일어났습니다.requireJS, AMD, CommonJS 등의 모듈 시스템이 등장하면서 파일 간 의존성을 정리하고 전역 스코프를 지키는 일이 중요해졌습니다.ES6부터..