2019년 12월 19일
Jekyll Google Search Console 연동하기
Google Search Console에서는 Google 검색에 콘텐츠를 표시하기 위한 실행 가능 보고서, 도구, 학습 리소스를 제공합니다. Link
Google Search Console에서 봇이 데이터를 가져가기 위해 sitemap과 robots의 설정이 필요하며, 먼저 설명드리겠습니다.
작성 당시 jekyll 버전은
3.8.6입니다.
Jekyll Sitemap 설치
gem jekyll-sitemap 설치
gem install jekyll-sitemap
Gemfile 설정
# GemFile
group :jekyll_plugins do
gem "jekyll-sitemap"
_config.yml 수정
# _config.yml
plugins:
- jekyll-sitemap
이제 도메인 뒤에
/sitemap.xml를 붙여 설정된 것을 확인합니다. ex) https://minhyeong-jang.github.io/sitemap.xml
robots.txt 설정
Bot에게 현재 사이트의 sitemap과 권한 설정 등을 제공합니다.
User-agent: *
Allow: /
Sitemap: https://minhyeong-jang.github.io/sitemap.xml
Google Search Console 생성
이제 마지막으로 Google Search Console 홈페이지에서 속성을 생성합니다.
도메인 / URL 접두어로 나눠져있는데, 따로 Github Pages에 도메인을 설정하지 않은 경우 URL 접두어를 선택합니다.
선택 후에는 설명에 따라 인증을 진행합니다. ( 이전에 작성한 anlytics를 진행하신 분은 바로 인증이 가능합니다. )
Sitemaps 탭으로 이동하여 새 사이트맵에 생성한 sitemap.xml URL을 입력하여 제출합니다.
제출에 성공한 경우 정상적으로 완료된 것 입니다.
-
2020년 01월 06일
create-react-app에서 CSS Module 사용하기
이전 프로젝트에서는 webpack을 eject하여 CSS module을 사용했지만, 이번 프로젝트에서는 eject 작업을 하지 않고 진행하기 때문에 방법을 찾아보았다. ## CSS Module 적응 전에는..? Module을 적용하지 않는다면, 최상단 App.jsx 또는 컴포넌트에서 scss 파일을 호출합니다. ```jsx // index.tsx or App.tsx import "./index.scss"; ``` 또한 클래스명이 기존 html처럼 class="container" 형태로 들어가기 때문에 css/scss 파일을 컴포넌트별로 생성했음에도 스타일 명이 충돌하는 불편함이 있습니다. ## 그렇다면 CRA에서 CSS Module은 어떻게 적용하지? css/scss 파일명을 module.css, module.scss로 변경합니다. 예를들어 index.scss는 `index.module.scss` 가 됩니다. 이후 컴포넌트에서는 다음과 같이 사용합니다. ```tsx import React from "react"; import styles from "./index.module.scss"; ... return ( ) ... ``` scss는 기존처럼 사용하시면 되며, `id, class`의 컴파일 결과를 확인하시면 scss 파일의 이름 혹은 폴더 이름으로 유니크하게 생성된 것을 확인할 수 있습니다. 아래는 컴파일 결과의 예시입니다. ```tsx // components/Pages/index.module.scss #loginPage { display: block; } // components/Pages/LoginPage.tsx import styles from "./index.module.scss" ... return ( ); => ```
-
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 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={{...