나는산타

Gatsby로 만든 사이트에 애드센스(AdSense)를 적용하는 방법 - 원글 : https://qiita.com/bob_yama/items/2b24fca112587a1bf8e8 Gatsby의 SSR에 대응하는 방법이나 표시되는 화면의 크기에 따라 광고의 표시 숨기기를 전환하는 방법 등의 내용이다. 애드센스에 자신의 사이트를 등록하는 방법등은 검색하면 여러가지 사이트에서 소개되고 있다고 생각하므로 이번은 생략한다. Google 애드센스를 사이트에 적용하려면 적절한 스크립트 태그를 헤더에 추가해야 한다. 그것을 해주는 것이 gatsby-plugin-google-adsense | GatsbyJS 라는 플러그인이다. npm 또는 yarn으로 설치하고 gatsby-config.js에 다음 설정을 추가한다. pl..

Parcel을 이용하여 Phaser 개발환경 세팅하는 방법 node가 설치되어 있어야함 1) node, npm 설치 확인 node --version npm --version 2) parcel-bundler 설치 npm install -g parcel-bundler 3) 템플릿 클론 https://github.com/ourcade/phaser3-parcel-template.git 4) 설치 및 실행 npm install --save npm run start 5) http://localhost:8000으로 접속해서 확인 - 참고 : https://blog.ourcade.co/posts/2019/get-started-phaser3-fast-painless/

크롬에서 캐시 끄는 방법 개발자도구(F12) > 네트워크(Network) > Disable cache 체크 ※ 이 설정은 개발자도구가(devtools)가 열려 있는 동안에만 활성화된다.

React와 같은 SPA의 경우 Google 애드센스(Adsense)는 기존 요청마다 HTML을 반환하는 SSR을 전제로 하므로 배포를 위해 궁리가 필요하다. 공식 문서에 SPA에 대응하는 가이드가 없기 때문에, 어떻게 도입하는지 글로 작성했다. 애드센스 광고 유형은 반응형이 가능하며 권장되는 디스플레이 광고를 사용한다. (설정 필요 없음) 이 글에서는 별도의 패키지를 사용하지 않는다. 패키지를 도입하지 않는 이유 패키지를 도입할지의 판단 기준으로서, 독자적인 개발 공수와 번들 사이즈 증가를 대비했을 때, 도입하는 편이 메리트가 큰지 어떤지로 보고 있다. 이번 경우 애초에 광고가 단순화된 것으로 패키지로 처리해야 할 처리가 없다고 판단했다. 또 패키지 도입 시의 단점으로서 갱신 빈도가 낮으면 트렌드로부터..

react, vue 같은 SPA 서비스도 애드센스 통과가 가능할까? 결론은 가능하다. * 원글 : https://qiita.com/boneskeleton/items/ea86d129fe9231f0b8d9 "SPA는 SEO의 관점에서 불리하다.", "광고를 올리도록 애드센스가 심사 통과시켜 주지 않는다."라는 이야기도 있고 한편으로는 "구글 검색봇은 자바스크립트를 읽을 수 있기 때문에 SPA에서도 괜찮다."라는 이야기도 있다. 사실은 어떨까? 2022년 2월 시점으로 SPA 웹앱 애드센스를 통과했다. 1. 검색엔진 반영 SPA 웹앱은 검색 엔진에 제대로 인덱스 되는 것인가? 1) Google 옛날에는 크롤러가 자바스크립트를 지원하지 않았기 때문에 SPA는 색인에 등록되지 않았다고 알려져 왔다. 그러나 현재(..

브라우저 로컬스토리지(localStorage) 만료시간 설정하기 localStorage에서는 만료 시간을 제공하지 않는다. 하지만 자바스크립트를 사용하여 TTL(Time to Live)을 추가하여 특정 기간이 경과한 후 localStorage의 항목을 무효화할 수 있다. 아래 처럼 만료시간을 설정하면 된다. 저장될 원본 정보와 함께 예상 만료 시간을 저장 데이터 조회 시, 현재 시간과 저장된 만료 시간을 비교 현재 시간이 저장된 만료 시간보다 크면 null을 반환 후 저장소에서 제거하고, 그렇지 않으면 원래 정보를 반환 만료 시간이 있는 항목 저장 localStorage에 키를 설정하고 만료 시간을 함께 저장할 수 있는 함수 function setWithExpiry(key, value, ttl) { co..

자바스크립트에서 함수가 async 함수인지 확인하는 방법 async function 선언은 AsyncFunction 객체를 반환하는 비동기 함수를 정의한다. constructor.name 프로퍼티로 async 함수인지 체크 할 수 있다. async 함수는 AsyncFunction을 반환하고 non-async 함수는 Function을 반환한다. const syncSum = (a, b) => a + b; console.log(syncSum); // [Function: syncSum] console.log(syncSum.constructor.name); // Function const asyncSum = async (a, b) => a + b; console.log(asyncSum); // [AsyncFunc..

call, apply, bind 함수를 간단히 말하면 이 함수들은 모두 함수 내의 값을 변경하기 위해 사용된다. 각 함수들을 자세히 알아보자. call call 함수를 사용하면 함수 내부에서 이렇게 처리되는 값을 전달하여 함수를 호출할 수 있다. const obj = { myName: "john", printName: function () { console.log(this.myName); }, }; obj.printName(); // john const newObj = { myName: "peter", }; obj.printName.call(newObj); //peter 위의 코드에서는 파라미터로 newObj를 전달함으로써 printName 함수의 call 함수를 호출하고 있다. 이 printName은 ..

좋든 싫든 쿠키는 현대 웹 개발에 필수적인 부분이다. 그러나 때로는 웹사이트를 취약하게 만들지 말아야 하거나 속성이 결여된 장소에서 사용되기도 한다. 이 글은 브라우저 쿠키의 작동 방법, 클라이언트와 서버 모두에서 브라우저 쿠키에 접속하여 조작하는 방법 및 브라우저 속성을 사용하여 브라우저에서 쿠키의 가시성을 제어하고 쿠키를 보다 안전하게 만드는 방법에 대한 설명이다. 그리고 써드파티의 쿠키와 관련된 privacy 문제에 대해서도 간략히 다루겠다. 쿠키와 쿠키 구조 브라우저 쿠키는 클라이언트 쪽 자바스크립트 또는 HTTP 요청 중에 서버에 의해 생성되는 브라우저에 저장된 작은 데이터이다. 브라우저는 해당 쿠키를 나중에 같은 서버로 보내거나 사용자가 페이지를 다시 방문했을 때 웹 페이지의 클라이언트 측 자..

브이원텍 (시총 1,631억) 엠플러스 (시총 2,877억) 티에스아이 (시총 2,650억) 대보마그네틱 (시총 : 4,382억) 원익피앤이 (시총 4,535억) 피엔티 (시총 9,836억) 씨아이에스 (시총 10,045억) 시총 낮은 순으로 차트 하나씩 봐보자 브이원텍 (시총 1,631억) 엠플러스 (시총 2,877억) 티에스아이 (시총 2,650억) 대보마그네틱 (시총 : 4,382억) 원익피앤이 (시총 4,535억) 피엔티 (시총 9,836억) 씨아이에스 (시총 10,045억)