보통 인스타그램과 같이 우클릭이 막혀있는 서비스들을 종종 볼 수 있습니다. 인스타그램의 방식은 보통 div 태그를 만들어서 z-index 우선순위를 위해 뒤에 나오게 한 다음 absolute 로 박스크기를 가득 채워버립니다. 저도 이전에는 이러한 방식을 종종 사용했었는데, 더 간단하고 쉬운 방법이 있어서 기록과 공유차 포스팅을 진행합니다. pointer-events: none; 그냥 css나 style로 img태그에 pointer-events 즉 클릭과 같은 모든 포인터에 대한 요소를 막아버리면 끝입니다.

Modern Web Modern Web 은 현대적인 웹 또는 최신 웹앱 혹은 멀티플랫폼 반응형 웹이라는 의미로 사용되는데, 정확한 사전 의미는 없고 직역하면 그냥 현대적인 웹입니다. 2021년 오늘날에는 아마도 Reactive(반응형)하면서, Virtual DOM Render(가상 돔 렌더)를 통해 DOM을 그려내거나 컴파일된 번들파일로 페이지 이동시 깜빡임이 없는 UX/UI를 제공하는 웹이라고 보입니다. 이러한 웹은 주로 JS/WASM 등을 통해 제공됩니다. JS JS 진영에서는 현재 React.js, Vue.js, Angular.js, Svelte.js의 4가지 라이브러리 및 프레임워크들이 척도를 다루고 있지만, 간간히 Vanilla JS를 통해 Observle 등을 이용해서 직접 Virtual DO..

GraphQL을 사용한지는 몇년이 지났지만, 토큰 인증을 사용할 때 토큰의 만료응답을 주기 위해서는 항상 NetworkError를 고집했었습니다. 즉 HTTP STATUS에서 401을 응답하기 위함이었습니다. 하지만 Apollo의 공식 문서를 보면 UNAUTHENTICATED 가 이미 Error Codes로 정의되어 있는 것을 볼 수 있습니다. https://www.apollographql.com/docs/apollo-server/data/errors/#error-codes Error handling Making errors actionable on the client and server www.apollographql.com GraphQL에서는 굳이 삽질하지 말고 GraphQLError로 반환하라는 그..

Nuxt.js와 Apollo GraphQL Client를 사용하는 Front End Server에서 사이트맵(Sitemap)을 만드는 방법을 소개하고자 합니다. @nuxtjs/sitemap @nuxtjs/sitemap Automatically generate or serve dynamic sitemap.xml for Nuxt.js projects www.npmjs.com 위 라이브러리를 이용하면 굉장히 쉽게 사용할 수 있습니다. 방식은 지난 https://gmyankee.tistory.com/291 Nuxt + Apollo Graphql => Generate로 SSR/SEO 적용하기 목차 서론 Promise를 반환하는 함수 Callback을 반환하는 함수 Graphql로 SSR Generate 하기 서론..

목차 서론 Promise를 반환하는 함수 Callback을 반환하는 함수 Graphql로 SSR Generate 하기 서론 오버맵 오버맵 오버워치 워크샵 코드, 옵치 유즈맵 코드를 등록하고 공유하며, 워크샵 제작자들의 다양한 모드를 바로 이용해보세요! overmap.me 오버맵이 어느순간부터 검색노출에서 사라지고 있길래 이게 무슨일인가 싶어 확인해보니... 동적페이지들이 노출이 사라지고 있었습니다. Nuxt generate가 해줄거라고 믿어 의심치 않았지만... Parameter가 동적인데 어떻게하지 하고서 무시햇엇는데 ... 스크롤을 내려보니 더있었군요... Promise를 반환하는 함수 const axios = require('axios') module.exports = { generate: { ro..

목차 서론 Firebase 비공개 키 획득하기 Firebase-tools 설치하기 Firebase에 비공개 키 설정하기 Firebase 프로젝트 초기화 하기 의존성 설치 코드 작성 Firebase 함수에 환경변수 설정하기 Firebase 로컬에서 테스트하기 Firebase 배포하기 부록 서론 이 게시글을 읽기 전에 이전 섹션 내용을 모두 숙지하셨거나 기본 베이스가 되어 있으셔야 합니다. https://gmyankee.tistory.com/288 Nuxt + PWA + Firebase Cloud messaging 이젠 눈감고도 설치하죠? 목차 서론 Firebase Project 생성하기 Firebase 설정 값 획득하기 PWA 라이브러리 설치/설정 하기 Service Worker 작성하기 Token으로 알..