FrontEnd98 [Web] OG 태그 동적으로 생성하기 🔍 현재 프로젝트 환경현재 OG 태그를 적용할 프로젝트는 Preact를 사용한 전형적인 **CSR 기반의 SPA(Single Page Application)**이다. 서버는 API와 정적 파일 서빙만 담당하고, 실제 UI 렌더링은 브라우저에서 JavaScript로 처리한다.💡OG 태그란?OG(Open Graph) 태그는 웹 페이지를 소셜 미디어(예: 카카오톡, 페이스북, 트위터 등)에서 공유할 때 링크 미리보기의 제목, 설명, 이미지등을 제어하는 메타태그이다.OG 태그가 적용되는 흐름사용자가 웹 링크를 공유플랫폼(카카오, 페북 등)이 해당 URL에 요청서버는 HTML 문서 응답의 OG 태그를 파싱그 정보를 기반으로 링크 미리보기를 생성👉 클라이언트에서 동적으로 삽입한 OG는 무시됨→ 이유는 크롤러는.. 2025. 7. 24. [JavaScript] iOS에서 클립보드 복사(navigator.clipboard.writeText) 동작 안하는 이슈 navigator.clipboard.writeText?설명writeText()는 자바스크립트로 ‘텍스트 복사(control+c)’ 기능을 지원하는 메서드로, 매개변수로 텍스트를 넘기면 브라우저가 해당 텍스트를 사용자의 클립보드에 저장한다.복사에 성공하면 Promise가 완료(resolved)되고, 실패하면 NotAllowedError DOMException오류가 발생한다.예시코드:navigator.clipboard.writeText("텍스트 복사하기!") .then(() => { alert("복사 성공 😀"); }) .catch(() => { alert("복사 실패 😨"); }); 25.07.18 기준 브라우저 호환성주의할 점대부분의 브라우저에서 https 환경에서만 동작한다.명확한.. 2025. 7. 20. [Web] 타 서비스에 임베딩해서 사용하는 서비스 개발 방법 1. Iframe Embed (가장 일반적)💡 요약호스트 서비스 내의 팝업이 내부에 iframe를 가지고 있어야 한다..임베드 서비스를 별도의 URL로 띄우고, 호스트 서비스에서 iframe으로 임베드한다.🟢 장점🔴 단점• 완전히 분리된 SPA • CSS/JS 충돌 없음 • 배포, 업데이트 독립적• 부모 ↔ 자식 간 데이터 통신이 window.postMessage로만 가능 • SSR/CSR 혼합일 때 SEO는 불가능 (보통 팝업이므로 문제는 적음) • 이질감이 들지 않기 위해서는 디자인 통일이 필요함✏️ 실제 예시호스트 팝업 컴포넌트에서 아래와 같이 iframe을 삽입한다. 데이터 전달 필요 시:// 호스트 서비스iframe.contentWindow.postMessage({ token: "xxx" .. 2025. 7. 16. [Web] 번들러(Bundler)의 종류 및 비교 분석 번들러(Bundler)란?브라우저는 모듈화된 자바스크립트는 읽지 못하기 때문에 브라우저에서 코드를 실행하려면 번들러가 필요하다. 즉 번들러란 모듈화된 여러 개의 자바스크립트 파일, CSS, 이미지 등의 리소스를 하나 또는 여러 개의 번들(bundle)로 묶어주는 도구이다. 번들러를 통해 브라우저가 불러오는 파일의 수를 줄일 수 있어 관리가 편리해지고 성능 최적화가 가능하다.번들러가 하는 일1. 엔트리 파일에서 시작해 의존성을 분석한다.번들러는 entry로 지정한 시작 파일(index.js, main.tsx 등)에서 코드를 분석한다.이 파일이 import, require 등으로 불러오는 다른 파일들을 하나씩 추적한다.2. 모듈 그래프를 생성한다.의존성 분석을 통해 모든 파일 간의 연결 관계(모듈 그래프)를.. 2025. 6. 1. [Nuxt] definePageMeta로 layout 지정 시 린트에러와 layout이 정상적으로 설정되지 않는 현상 문제 상황Nuxt 공식문서에 따르면 definePageMeta를 이용해 페이지에 특정 레이아웃을 사용할 수 있다.에러페이지에서 error 레이아웃을 사용하기 위해 아래와 같은 코드를 작성했다. 에러페이지에서는 error 레이아웃을 보여줘야하지만, App.vue에서 사용되고 있는 'default' 레이아웃이 표시되고 있었다. 그리고 definePageMeta에는 "'definePageMeta' is not defined." 라는 린트 에러가 발생했다. 원인 파악현재 nuxt v3.12.x 버전을 사용중인데, 해당 버전에서 nuxt 깃허브 issue에서 동일한 현상으로 제보된 이슈를 발견했다..! In nuxt@3.12.0 the definePageMeta function is broken · Iss.. 2024. 9. 7. [Vue warn]: Failed to resolve component: ... If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement 문제 상황- 환경: vue3, nuxt: 3.12.4Vue에는 폴스루 속성(Fallthrough Attributes)이 존재하는데 해당 속성을 사용해서 타입선언 없이 부모 컴포넌트에서 받아온 props와 emit을 그대로 자식 컴포넌트에게 전달하고자 했다. 이 경우 개발자 콘솔에서 아래와 같은 warnning 문구가 발생한다. 원인 파악Vue3 마이그레이션 가이드에 따르면 $listener는 Vue3에서 제거되었다고 한다.기존의 $attrs에 Event listeners가 포함되는 형태이다. 해결 방법아래와 같이 defineProps로 타입정의 후 v-bind="$props" 또는 v-bind="$attrs"로 부모 컴포넌트로 받은 props를 내려준다.!-- ArrowLinkButto.. 2024. 8. 28. 이전 1 2 3 4 ··· 17 다음
