2019년 12월 19일
Jekyll Google Analytics 연동하기
Google에서 제공하는 Google Analytics라는 툴을 사용하여 웹 로그를 분석할 수 있습니다.
Google Analytics는 앱 또는 웹의 이용자를 분석하여 통계로 제공해주고 있으며, 예로들어 방문 페이지, 이탈률, 세션 시간 등이 있습니다. 또한 Google Ads, Google Search Console 등 관련 서비스와 통합하여 확인할 수 있습니다.
Google Analytics 설정
우선 Google Analytics에 접속하여서 계정을 생성합니다.
계정은 여러개 생성이 가능하며, ‘속성 및 앱’에 페이지 별로 생성이 가능합니다. 저는 Blog라는 계정 하위에 Tistory, Github Page의 링크를 별도로 등록했습니다.
등록이 완료되면 추적 코드가 나타나게 되며, 해당 페이지에서 추적 ID, 태그(js)를 제공하고 있습니다.
추적 코드탭이 나타나지 않는다면,좌측 하단 관리 -> 속성 -> 추적정보 -> 추적코드로 이동합니다.
Jekyll 설정
위에서 나온 js를 복붙하셔도 상관 없지만, 저같은 경우에 _config.yml에 추적 ID 값을 넣었습니다.
google_analytics_id: 추적 ID
그리고 analytics 파일을 생성하여 Google Analytics에서 제공하는 js를 삽입하고 추적 ID 값을 불러옵니다.
아래 코드는 추적 ID 값을 _config에서 가져오도록 수정한 코드입니다.
<!-- analytics.html -->
{% if site.google_analytics_id %}
<script
async
src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics_id }}"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "{{ site.google_analytics_id }}");
</script>
{% endif %}
default 페이지에서 include를 진행합니다.
<!DOCTYPE html>
<html lang="kr">
<head>
{% include head.html %} {% include analytics.html %}
</head>
<body>
{{% include header.html %}
<div class="body-wrap">
{% include navbar.html %}
<div id="content-wrap">{{ content }}</div>
</div>
</body>
</html>
jekyll 배포 후, 추적 코드 탭에서 제공하는 테스트 트래픽 전송을 사용하여 연동이 됐는지 확인합니다.
analytics.html을 head에 import한 이유는 나중에 Google Search Console에서 홈페이지 소유권 확인 용도로 head를 인식하기 때문입니다.
-
2019년 12월 23일
Javascript Prototype 이해하기
자바스크립트는 프로토타입 기반 객체지향 언어라고 불립니다. 그리고 여러분들은 한번 쯤은 `__proto__`라는 Object를 본 적이 있을 것이고 그냥 지나치는 경우가 대다수일 것 입니다. 그러한 `__proto__`가 무엇이고 자바스크립트가 `prototype` 기반 언어라는 이유를 알아보도록 하겠습니다. ## Prototype 자바스크립트에서 모든 객체는 부모(객체 원형)와 연결되어 있습니다. 그리고 객체 지향에서 상속 개념과 동일하게 부모의 프로퍼티와 메소드를 상속받아 사용할 수 있게 됩니다. 여기서 부모 객체를 `Prototype 객체 또는 Prototype`이라고 부릅니다. 간단한 예제를 통해 알아봅니다. ```js var item = { key: "key", }; console.log(item); // { // key: "key" // __proto__: { // item 객체의 Prototype(부모 객체) 정보 // constructor: ƒ Object() // hasOwnProperty: ƒ hasOwnProperty() // toString: ƒ toString() // valueOf: ƒ valueOf() // ... // } // } console.log(item.hasOwnProperty("key")); // true ``` item 객체를 출력하여 `__proto__` 프로퍼티를 열어보면 자바스크립트의 Object 객체가 부모이며, item 객체에서 선언하지 않은 hasOwnProperty 메소드를 상속받아 사용이 가능합니다. ## **proto** ? 위에서 생각할 수 있는 부분은 '아 `__proto__` 프로퍼티를 통하여 부모 객체에 접근할...
-
2019년 12월 19일
Jekyll Google Search Console 연동하기
Google Search Console에서는 Google 검색에 콘텐츠를 표시하기 위한 실행 가능 보고서, 도구, 학습 리소스를 제공합니다. [Link](https://support.google.com/webmasters/answer/6258314?utm_source=wnc_376106&utm_medium=gamma&utm_campaign=wnc_376106&utm_content=msg_743502&hl=ko) Google Search Console에서 봇이 데이터를 가져가기 위해 sitemap과 robots의 설정이 필요하며, 먼저 설명드리겠습니다. > 작성 당시 jekyll 버전은 `3.8.6` 입니다. ## Jekyll Sitemap 설치 ### gem jekyll-sitemap 설치 ```bash gem install jekyll-sitemap ``` ### Gemfile 설정 ```ruby # GemFile group :jekyll_plugins do gem "jekyll-sitemap" ``` ### \_config.yml 수정 ```ruby # _config.yml plugins: - jekyll-sitemap ``` > 이제 도메인 뒤에 `/sitemap.xml`를 붙여 설정된 것을 확인합니다. > ex) [https://minhyeong-jang.github.io/sitemap.xml](https://minhyeong-jang.github.io/sitemap.xml) ## robots.txt 설정 Bot에게 현재 사이트의 sitemap과 권한 설정 등을 제공합니다. ```ruby User-agent: * Allow: / Sitemap: https://minhyeong-jang.github.io/sitemap.xml ``` ## Google Search Console 생성 이제 마지막으로 [Google Search Console](https://search.google.com/search-console) 홈페이지에서 속성을 생성합니다. 도메인 / URL 접두어로 나눠져있는데, 따로 Github Pages에 도메인을 설정하지 않은 경우 URL 접두어를 선택합니다. 선택 후에는 설명에 따라 인증을 진행합니다. ( 이전에 작성한 [anlytics]({{ site.base_url}}{{ page.previous.url }})를 진행하신 분은 바로 인증이 가능합니다. ) `Sitemaps`...
-
2019년 12월 12일
Nextjs에서 styled-components 깜빡임 현상
Nextjs에서 styled-components (이하 SC) 사용하면 CSS 로딩이 늦게 되어 발생하는 깜빡임 현상이 발생합니다. 개인적인 생각으로는 HTML은 SSR로 미리 렌더링 시켜 보내지만 SC의 스타일들은 사용자가 접속 시 변환된다고 생각합니다. css를 미리 적용할 수 있을까? 참고 자료 Next.js와 SC를 검색한 결과, ServerStyleSheet라는 함수를 SC에서 제공하고 있었고 Next.js에서 샘플 코드를 제공하고 있었습니다. 해당 페이지에서 제공하는 코드는 다음과 같습니다. import Document from "next/document"; import { ServerStyleSheet } from "styled-components"; export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />), }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), }; } finally { sheet.seal(); } } } _document.js 란? HTML Document를 관리하는 부분으로 이 외에도 '_app.js, _error.js' 등이 있습니다. 위 코드에서 에러가 나신다면..? 시간이 지나고 작성하는 글이라 정확하게 기억은 안나지만, 위에 코드를 사용해도...