노션은 기본적으로 작성한 페이지를 링크로 생성해 다양한 사람들에게 공유를 할 수 있다. 노션은 공식적으로 커스텀 도메인 연결을 지원하지 않고 있으며 추후 지원할 예정이라고 한다. 하지만 아직은 지원하지 않는 게 현실이고 커스텀 도메인 연결 자체를 서비스로 제공하는 기업도 존재한다. 아래 글이 힘들고 적용이 잘 안된다면 마음 편하게 서비스를 제공하는 기업을 이용하는 것도 하나의 방법이다. 이 글은 자신이 보유한 도메인을 노션 페이지에 연동하는 방법을 소개하려 한다. 이 방법은 언제든 노션에서 제재를 가할 수 있으며 갑자기 작동하지 않아도 어쩔 수 없는 글임을 미리 알립니다.

1. 노션 페이지 공개하기

 첫 번째로 노션 페이지를 먼저 모두가 볼 수 있게 해줘야 한다.
노션 상단에 공유 버튼을 클릭 -> 웹에서 공유 토글을 활성화 -> 아래 복사 버튼을 눌러 URL 복사

아래와 같은 링크를 획득할 수 있다. 아래 링크는 개인 링크이며 예시로 공개한 링크입니다.

https://woooo.notion.site/a785b14c1dd4406da8287abf13997bc9

2. CloudFlare 회원 가입 및 도메인 연결

아래 CloudFlare라는 서비스에 회원가입을 합니다.

회원가입 이후 자신이 구매한 도메인을 cloudflare로 연결해줍니다.

ex) 본인이 가비아 등에서 도메인을 구입했다면 설정에 nameserver를 바꿔줄 수 있습니다. 아래 링크를 참조해서 바꿔줍니다.

https://wonderbout.tistory.com/119

3. Workers 등록

CloudFlare의 Workers는 어떤 URL에 접근 시 특정 행동을 해주는 서비스입니다. 예를 들어 저희와 같이 노션을 도메인과 연결을 해주고 싶다면 이 Workers를 통해서 해당 행동을 수행할 수 있습니다.

ex) https://domain.com 접속 => workers 작동 => 노션 페이지 수집 => 노션 페이지 출력

아래 이미지 순서에 맞게 새로운 workers를 생성해 주고 workers의 이름을 notion-worker로 변경해 줍니다.

성공적으로 workers를 만들었다면 이제 코드를 삽입해줄 차례입니다.

예시 코드 링크 https://woooo.notion.site/notion-workers-example-0b7c5e3b4fb844ce8ed98e259ea13867

위 링크에서 크게 봐야 할 건 1~6 LINE의 코드입니다. 아래 코드를 참조해 예제 코드에서 본인에 조건에 맞게 수정을 해준 뒤 이전에 만들었던 workers에 기입해주고 저장버튼을 눌러 저장해줍니다.

// 구매한 도메인 주소 
// ex) google.com
// 연결할 노션의 주소 
// ex) https://woooo.notion.site/a785b14c1dd4406da8287abf13997bc9

// 1. MY_DOMAIN 변수에 구매한 도메인 주소를 넣어줍니다. ex) google.com, naver.com ....
const MY_DOMAIN = 'google.com';

// 2. SLUG_TO_PAGE 변수에는 연결할 노션의 ID값을 넣어줍니다. 
// ex) https://woooo.notion.site/a785b14c1dd4406da8287abf13997bc9 에서는
// https://woooo.notion.site/ 이후 값 즉 a785b14c1dd4406da8287abf13997bc9 이 아이디 입니다.
const SLUG_TO_PAGE = {
  '': 'notionID',
};

// 3. PAGE_TITLE 변수는 크롬과 같은 브라우저 탭에 표시될 내용 입니다. 
const PAGE_TITLE = 'TITLE';

// 4. PAGE_DESCRIPTION 변수는 페이지의 설명을 뜻합니다.
const PAGE_DESCRIPTION = 'DESCRIPTION';

workers 저장 이후 다시 메인에 있는 workers 탭으로 이동한 뒤 아래 사진과 같이 경로 추가 버튼을 클릭합니다.

경로에 아래 이미지와 같이 입력해줍니다. worker에선 우리가 만들었던 notion-worker를 선택해 줍니다.

ex) 구매한 도메인/*, bridecode.kr/* ....

4. 연결 확인하기

 위 1,2,3 스텝을 통해 도메인 연결에 성공했고 가끔은 오류가 나서 코드를 몇 차례 수정해 주었긴 하지만 성공적으로 도메인과 노션 페이지를 연결했습니다.
참고로 저희가 도메인 구입에 사용했던 가비아는 name서버 변경에 하루 이상 소요가 될 수도 있다고 하니 참고하시어 지금 당장 안된다고 걱정하지 마시고 하루 이상 기다려 보는 게 좋습니다.

간단하게 웹서비스를 구축하는 것도 좋으나 공수가 많이 든다면 이렇게 노션을 통해 간단하게 회사 사이트를 구축하는것도 좋은 방법이라고 생각합니다. 하지만 이마저도 어렵거나 공수가 든다고 생각하시면 시중에 노션 페이지에 커스텀 도메인을 연결해주는 서비스도 존재하니 이용하시는 것도 추천드립니다.

5. 참조

이번 포스트는 ES6에서 추가된 파라미터 기본값, Rest 파라미터, Spread 연산, Rest/Spread 프로퍼티에 대해

차례대로 알아보는 시간을 갖도록 하겠습니다. 

1. 파라미터 기본값 ( Default Parameter Value )

첫번째 파라미터 기본값은 코드로 보는게 편할것 같습니다. 

// ES5

function plus(x, y) {
    x = x || 0;   // 매개변수 x에 인수를 할당하지 않으면 기본값으로 0을 할당한다
    y = y || 0;   // 매개변수 x에 인수를 할당하지 않으면 기본값으로 0을 할당한다

    return x + y;
}

console.log(plus());        // 0
console.log(plus(1, 2));    // 3


// ES6

function plus(x = 0, y = 0) {    // 파라미터 x, y에 인수를 할당하지 않으면 기본값으로 0을 할당한다
    return x + y 
}
console.log(plus());        // 0
console.log(plus(1, 2));    // 3

ES6 부터는 함수 내에서 파라미터 기본값을 할당할수 있게 되었습니다.

2. Rest 파리미터

Rest 파라미터(Rest Parameter)는 Spread연산자(...)를 사용하여 파라미터를 정의한 것을 말한다.

Rest 파라미터를 사용하면 인수의 리스트를 함수 내부 에서 배열로 전달 받는다.

// ES6

function prt(...rest) {                     // 인자가 몇개가 오던 배열로 받는다.
    for(let i = 0; i <= rest.length; i++) { // rest를 for문으로 출력해본다
        console.log(rest[i])                // 다음 포스트에서는 ES6에 추가된 for of문을 배우면 좀더 간결하고 쉽게 
    }                                       // 배열 데이터를 확인할수 있다.

    console.log(Array.isArray(rest))        // rest가 배열로 선언이 되어 true를 반환한다.
}

- Rest 파라미터 앞으로 다른 인자가 들어올수 있으며 값은 차례대로 할당된다. 

- Rest 파라미터는 가장 마지막에 선언되어야 한다. (그렇지 않으면 오류를 뱉는다.)

3. Spread 연산자

// ES6

function plus(...arr) {
    return arr
}

let a = plus(1,2,3,4,5)

console.log(a)             // [1, 2, 3, 4, 5]
console.log(...a)          // 1 2 3 4 5

안녕하세요 이번포스트는 티스토리 블로그에 코드 강조하기 입니다.

여러가지 방법으로 코드를 강조 해봤는데 마음에도 안들고 이쁘지도 않더라구요 

근데 이번에 찾아봤는데 highlightjs라는 마음에 드는 JS를 찾았습니다.

이런식으로 사용할수 있습니다.

function calc(x) {
    return x * x;
}

var x = calc(10);

console.log(x);

일단 highlightjs는 기본적으로 사용법이 간단하고

잘만 따라오신다면 적용법도 매우 간단합니다.

그리고 한번 적용만 하신다면 그이후로는 아주 쉽게 사용하실수 있습니다.

1. 원하는 코드, 스타일 찾기

https://highlightjs.org/static/demo/

링크로 들어갑니다. 

Language categories에서 원하시는 언어를 찾습니다.

저는 일단 자바스크립트를 찾았습니다. scripting 섹션 중하단쯤에 있었습니다.

그리고 Stryles에서 원하시는 테마를 입혀봅니다.

저는 Atom One Dark Reasonable이 마음에 들더라구요

원하시는걸 다 고르셨다면 

2. js 다운

https://highlightjs.org/download/

위 링크로 들어가셔서 하단에 custom package 부분에서 

자신이 원하는 언어가 선택되어 있는지 확인합니다.

common부분은 어차피 많이 사용하는 부분이여서

기본적으로 선택하시고 Download 버튼을 누릅니다.

3. 블로그 적용 및 사용법

<link rel="stylesheet" href="./images/atom-one-dark-reasonable.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

var a = 'a'