<h1>개요</h1>Notion Database를 CMS로 활용하여 손쉽게 블로그를 만들고자 하였고, 블로그를 만들며 겪언던 이슈들을 정리하고자 한다.<h1>사용한 라이브러리</h1><ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/makenotion/notion-sdk-js">notion-sdk-js (official)</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/NotionX/react-notion-x">react-notion-x (unofficial)</a></li></ul>notion-sdk-js는 data-fetching을 담당하는 라이브러리고, react-notion-x는 불러온 데이터를 노션과 유사한 화면으로 손쉽게 리액트에 그려주는 라이브러리이다.react-notion-x에서 제공하는 <code spellcheck="false">&lt;NotionRenderer /&gt;</code> 컴포넌트에 노션 페이지의 데이터가 담긴 <code spellcheck="false">recordMap</code> 이라는 객체를 <code spellcheck="false">props</code>로 내려주면 되는데, 이 <code spellcheck="false">recordMap</code>을 가져오기 위해서는 공식 API가 아닌 notion-sdk-js에서 제공하는 방법이 아닌, react-notion-x 라이브러리 안에 담겨 있는 notion-client라는 unoffical API를 사용해야 한다.따라서, 일반적인 경우에는 notion-sdk-js를 사용하지 않아도 노션 페이지 데이터를 가져와 화면에 뿌려줄 수 있다. 그럼에도 나는 두 라이브러리를 혼용해서 사용했는데, 이유는 아래에서 설명하겠다.<h1>시작하기</h1>우선 나는 화면 렌더링에 필요한 <code spellcheck="false">recordMap</code> 을 제외하면, 모든 필요한 데이터는 official API (notion-sdk-js)를 통해 가져왔다. 예를 들어, 데이터베이스 내의 모든 태그 항목이라던가, Page의 unique Id, 최근 Page 등을 가져오는데 사용했다.사실 그냥 데이터만 가져와서 화면에 보여줄 거라면 react-notion-xd의 readme만 잘 읽어도 구현할 수 있다. 내가 글을 쓰는 이유는 헤맸던 점들을 공유하기 위해서다.<blockquote>💡 Good to Know:<ul><li>notion-sdk-js는 서버사이드(node.js)에서만 동작한다.</li><li>database는 page의 묶음, page는 blocks의 묶음, block들이 페이지 내부에서 실제 보여지는 데이터들이다.</li></ul></blockquote><h2>1. 타입 설정</h2>Notion API를 사용하면 데이터베이스를 하나 정하고, 그 데이터베이스내에 항목들을 설정하여 데이터들을 가져올 텐데, 타입스크립트를 사용해서 내가 지정한 데이터베이스에 어떠한 이름의 항목들이 있고, 그 항목들은 무슨 속성을 가지는지 설정이 필요했다.<pre spellcheck="false"><code class="language-typescript">// database에 정해진 속성 이름들
type DatabaseProperties =
 &nbsp;| "title"
 &nbsp;| "post"
 &nbsp;| "create_date"
 &nbsp;| "author"
 &nbsp;| "tag";
​
// notion sdk에서 type 추출.....
export type PostResult = Extract&lt;QueryDatabaseResponse["results"][number],{ properties: Record&lt;string, unknown&gt; }&gt;;
​
type PropertyValueMap = DatabaseObjectResponse["properties"] &amp; PageObjectResponse["properties"];
type PropertyValue = PropertyValueMap[string];
type PropertyValueType = PropertyValue["type"];
​
type ExtractedPropertyValue&lt;T extends PropertyValueType&gt; = Extract&lt;
 &nbsp;PropertyValue,
 { type: T }
&gt;;
// ...
​
export type RichText = ExtractedPropertyValue&lt;"rich_text"&gt;;
export type Date = ExtractedPropertyValue&lt;"date"&gt;;
export type Title = ExtractedPropertyValue&lt;"title"&gt;;
export type MultiSelect = ExtractedPropertyValue&lt;"multi_select"&gt;;
export type Files = ExtractedPropertyValue&lt;"files"&gt;;
export type Id = ExtractedPropertyValue&lt;"unique_id"&gt;;
​
// notion api custom response
export type BlogDatabaseObjectResponse = PostResult &amp; {
 &nbsp;properties: {
 &nbsp; &nbsp;post: IDatabaseProperty.Title;
 &nbsp; &nbsp;create_date: IDatabaseProperty.Date;
 &nbsp; &nbsp;author: IDatabaseProperty.RichText;
 &nbsp; &nbsp;tag: IDatabaseProperty.MultiSelect;
 &nbsp; &nbsp;// ...
 };
};</code></pre>위와 같이 타입 파일을 따로 만들어 관리했다.<h2>2. Private Page 이미지 문제</h2><img src="https://image.until.blog/love/article/1722432451503" alt="until-1167">notion의 데이터베이스가 private page에 설정되어 있는 경우에, 이미지를 가져올 수 없는 문제가 있었다. 이유는 다음과 같다. private page의 이미지 url은 signed되어, 다른 도메인에서 접근시 인가 에러를 발생시킨다.<blockquote>참조: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/NotionX/react-notion-x/issues/529">https://github.com/NotionX/react-notion-x/issues/529</a></blockquote>하지만! notion official API를 사용하면 외부에서 접근할 수 있는 URL을 반환해준다.따라서 다음과 같이 함수를 작성하여 <code spellcheck="false">recordMap</code>에 접근이 가능한 새로운 url image를 넣어 줬다.<pre spellcheck="false"><code>/**
 * Block List로부터 file(image) sigend url을 가져온다.
 * 하위 블록에 이미지가 있을 경우를 고려해 재귀를 통해 전부 탐색한다.
 */
async function getSigendUrlFromBlocks(
 &nbsp;blockList: (PartialBlockObjectResponse | BlockObjectResponse)[],
 &nbsp;signedMap: Record&lt;string, string&gt;,
) {
 &nbsp;const promises = blockList.map(async block =&gt; {
 &nbsp; &nbsp;if ("image" in block &amp;&amp; block.image.type === "file") {
 &nbsp; &nbsp; &nbsp;signedMap[block.id] = block.image.file.url;
 &nbsp; } else if ("has_children" in block &amp;&amp; block.has_children) {
 &nbsp; &nbsp; &nbsp;// 자식의 blockList를 다시 가져와야함...
 &nbsp; &nbsp; &nbsp;const children = await this.getBlockList(block.id);
 &nbsp; &nbsp; &nbsp;// 재귀!
 &nbsp; &nbsp; &nbsp;await this.getSigendUrlFromBlocks(children.results, signedMap);
 &nbsp; }
 });
 &nbsp;await Promise.all(promises);
 &nbsp;return signedMap;
}</code></pre><code spellcheck="false">NotionRenderer</code> 에서도 추가 설정을 해줘야 한다.<pre spellcheck="false"><code class="language-typescript"> &nbsp;&lt;NotionRenderer
 &nbsp; &nbsp;recordMap={recordMap}
 &nbsp; &nbsp;// ...
 &nbsp; &nbsp;// image url을 notion api를 통해 가져온 url로 교체 해준다.
 &nbsp; &nbsp;mapImageUrl={(url, block) =&gt; {
 &nbsp; &nbsp; &nbsp;if (recordMap.signed_urls[block.id]) {
 &nbsp; &nbsp; &nbsp; &nbsp;return recordMap.signed_urls[block.id];
 &nbsp; &nbsp; }
 &nbsp; &nbsp; &nbsp;return url;
 &nbsp; }}
 &nbsp;/&gt;</code></pre>이제 private page의 이미지도 잘 가져와진다!<h2>3. 이미지 로딩 속도 문제</h2>notion에 직접 업로드한 이미지를 불러오는 것은 굉장히 시간이 오래걸린다. 이유는 CDN을 제공하지 않기 때문이라고 한다.아래는 똑같은 이미지 파일을 노션에 직접 업로드한 이미지를 가져올 때와, CDN을 제공하는 스토리지에서 가져왔을 때의 속도차이다.<img src="https://image.until.blog/love/article/1722432465464" alt="until-1168">거의 20배 차이가 난다...따라서 CDN을 제공하는 서버에 이미지를 업로드한 뒤, 그 링크를 임베딩하여 가져오는 것이 더 나은 성능을 제공하겠다.<h2>4. 이미지 502 에러</h2>배포(SSG) 후 일정 시간이 지나면 502 에러가 발생한다. 이는 노션에서 주기적으로 이미지 URL을 변경해서 그런 문제 같다.<img src="https://image.until.blog/love/article/1722432432857" alt="until-1166">이 문제는 이미지를 노션에 업로드 하는 것이 아닌 다른 곳에 업로드한 후 가져오면 해결 된다..

Notion API를 사용한 블로그 개발 이슈 정리

Toolog

<img src="https://image.until.blog/tooearly/article/1727588180666.png" alt="until-1617">아티스트: Leyla McCalla 앨범: Sun Without The Heat 발매일: 24.04.12 장르: 포크, 스쿠스 <a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/hEWxTUksc0s">https://youtu.be/hEWxTUksc0s</a> * 본 앨범은 5월 19일에 청취했던 앨범입니다.

[TOOLOG] #9 Leyla McCalla - Sun Without The Heat

Notice

<img src="https://image.until.blog/tooearly/article/1716209723128" alt="until-102">아티스트: Lizzy McAlpine 앨범: Older 발매일: 24.04.05 장르: 포크, 챔버팝&nbsp;&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/9Ll9kA-avgI">https://youtu.be/9Ll9kA-avgI</a>* 본 앨범은 4월 13일에 청취했던 앨범입니다.

[TOOLOG] #2 Lizzy McAlpine - Older

<img src="https://image.until.blog/tooearly/article/1727588655799.png" alt="until-1624">아티스트: Cassandra Jenkins 앨범: My Light, My Destroyer 발매일: 24.07.12 장르: 소피스티팝, 인디락 <a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/Tb-rXdpMiXY">https://youtu.be/Tb-rXdpMiXY</a> * 본 앨범은 9월 22일에 청취했던 앨범입니다.

[TOOLOG] #16 Cassandra Jenkins - My Light, My Destroyer

<img src="https://image.until.blog/tooearly/article/1716386258361" alt="until-158">아티스트: Tori Kelly 앨범: Tori 발매일: 24.04.05 장르: 알앤비, 알트팝<a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/o4qcg0okzRw">https://youtu.be/o4qcg0okzRw</a> * 본 앨범은 4월 20일에 청취했던 앨범입니다.

[TOOLOG] #3 Tori Kelly - Tori

Lyrics

<a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/tCp0vukTNMo">https://youtu.be/tCp0vukTNMo</a> Sweet baby 사랑스러운 아가야 Like you, I emerged 나도 너처럼 어떤 불확실한 From a certain uncertain chaos 혼돈으로부터 태어났지 They say those who are quickest, survive 사람들은 말해, 가장 빠른 자가 살아남고 And those who are strongest, thrive 가장 강한 자가 번성한다고 But I never want to get all the things that I want 하지만 난 원하는 모든 걸 얻고 싶진 않아 How awful would that be for me? 그건 내게 얼마나 끔찍할까? I’m happier here, slow 나는 여기서 행복해, 느리게 And indulgent in the sun 태양아래 느긋하게 I’m happier here, weak 나는 여기서 행복해, 약하게 Let the night come when it comes 밤이 오면 그냥 오게 둬 Sweet baby 사랑스러운 아가야 Never thought I’d be the one 내 스스로 내 패배를 To accept my own defеat 받아들일 줄 몰랐어 I know if I’d been quicker, I’d have survived 알아, 내가 더 빨랐다면 살아남았고 And if I’d been strongеr, I’d have thrived 더 강했다면 번성했겠지 But I never want to get all the things that I want 하지만 난 원하는 모든 걸 얻고 싶진 않아 How awful would that be for me? 그건 내게 얼마나 끔찍할까? I’m happier here, slow 나는 여기서 행복해, 느리게 And indulgent in the sun 태양아래 느긋하게 I’m happier here, weak 나는 여기서 행복해, 약하게 Let the night come when it comes 밤이 오면 그냥 오게 둬<hr> * Toolog 번역 시리즈는 Deepl, 파파고, Gemini, Mistral, Claude, Chatgpt, Perplexity, Pi, Hugging Chat, Hinative, Khoj 등의 번역기 및 플랫폼의 도움을 받습니다.(번역 자체가 부정확할 수 있습니다.)

https://youtu.be/tCp0vukTNMoSweet baby사랑스러운 아가야Like you, I emerged나도 너처럼 어떤 불확실한From a certain uncertain chaos혼돈으로부터 태어났지They say those who are quickest, survive사람들은 말해, 가장 빠른 자가 살아남고And those who are

Lightning Bug - On Paradise(가사 번역)

<img src="https://image.until.blog/tooearly/article/1727588015162.png" alt="until-1616">아티스트: Hill Valley Hero 앨범: Electric Outlands 발매일: 24.01.12 장르: 신스웨이브 <a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/X8UkOApemH4">https://youtu.be/X8UkOApemH4</a> * 본 앨범은 5월 15일에 청취했던 앨범입니다.

[TOOLOG] #8 Hill Valley Hero - Electric Outlands