rss.xml

<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Lazy Nyaong]]></title><description><![CDATA[Code, Lazy, Cat]]></description><link>https://ohseunghyeon.github.io</link><generator>GatsbyJS</generator><lastBuildDate>Thu, 08 Jul 2021 05:09:39 GMT</lastBuildDate><item><title><![CDATA[떠가 자다가 갑자기 엄청 울었다.]]></title><description><![CDATA[요즘 떠는 꽤 컸다. 1…]]></description><link>https://ohseunghyeon.github.io/lavender/cried-so-hard-while-sleeping/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/lavender/cried-so-hard-while-sleeping/</guid><pubDate>Thu, 08 Jul 2021 05:02:26 GMT</pubDate><content:encoded>&lt;p&gt;요즘 떠는 꽤 컸다. 15개월 쯤 됐나? 그래서 딱히 크게 우는 일이 없어졌다. 애기 때는 의사표현을 그걸로 밖에 못 했으니까 그랬지만 최근엔 이거 이거 하면서 원하는 것을 표현한다.&lt;/p&gt;
&lt;p&gt;어제 저녁 일찌 잠드신 떠는 잠든지 한 시간 정도 후일까? 엄청 울면서 깼다. 근데 그 울음이 그쳐지지 않았다. 보통 이런 경우 토닥여주고 엄마나 아빠가 있음을 인지시켜주면 그쳤는데 말이다.&lt;/p&gt;
&lt;p&gt;안겨서도 한참을 울고 도통 울음이 줄어들지 않았다. 한 10분은 운 것 같다. 울음에 관성이 붙었는지 이제는 왜 우는지도 모르겠더라. 한참을 울고 간신히 울음을 그친 아기에게 할머니와의 영통, 수박 조금, 뽀로로를 보여주었다.&lt;/p&gt;
&lt;p&gt;그럼에도 뽀로로를 보다가 중간에 조금씩 울려고 했다. 악몽이었을까? 엄청 무서운 꿈을 꿨을까? 나도 잠자리에 들어서 왜 애기가 그렇게 울었는지 한참 생각하고 마음 아파했다. 온갖 사소한 일이 생각나며 그게 아기에게 악몽을 꾸게 하였을까 생각했다.&lt;/p&gt;
&lt;p&gt;무슨 꿈이었을까. 아픈 게 아닌 것 같아서 다행이다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[연애의 온도를 오랜만에 다시 봤는데]]></title><description><![CDATA[2…]]></description><link>https://ohseunghyeon.github.io/essay/have-watched-very-ordinary-couple/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/essay/have-watched-very-ordinary-couple/</guid><pubDate>Mon, 07 Jun 2021 14:48:29 GMT</pubDate><content:encoded>&lt;p&gt;20대 초반 어렸을 때 이 영화를 꽤나 좋아했었다.&lt;/p&gt;
&lt;p&gt;그 땐 정말 재밌었는데, 공감되는 내용이었으니까 그랬겠지?&lt;/p&gt;
&lt;p&gt;근데 지금 다시 보니까 그 땐 잘 몰랐던 부분들이 보인다. 극중 캐릭터 이동희가 되게 다혈질적인 성격이었구나. 상대를 배려할 줄 모르고, 자기 감정 가는대로 말하고 상처주는 그런 성격.&lt;/p&gt;
&lt;p&gt;어릴 땐 보면서 마냥 타이밍의 문제겠거니, 연애란 다 그런 거겠지 하고 생각했는데..&lt;/p&gt;
&lt;p&gt;근데 아마 그 나이대의 연애는 다 그렇겠지?&lt;/p&gt;</content:encoded></item><item><title><![CDATA[과거를 그리워하는 일]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/essay/missing-old-days/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/essay/missing-old-days/</guid><pubDate>Tue, 27 Apr 2021 08:23:44 GMT</pubDate><content:encoded>&lt;p&gt;뭐가 그리운 건지 잘 모르겠다.&lt;/p&gt;
&lt;p&gt;나른하고 몽환적인 음악을 들으면 예전 시간들이 그리워진다. 그 음악과 예전의 그 시간, 기억 사이에 어떤 연관이 있는걸까?&lt;/p&gt;
&lt;p&gt;그 때 난 그런 기분이었을까? 그 때가 언젠지도 모르는데? 아니면 기억이 흐릿해져서 그 흐릿함이 비슷하다고 느끼는 걸까.&lt;/p&gt;
&lt;p&gt;아니면 이런 노래가 그 시절을 그리워하게 만드는 무언가를 가지고 있는 걸까?&lt;/p&gt;
&lt;p&gt;난 줄곳 언제가 그립다는 생각은 하지 않고 살아왔다. 그런 얘기를 들으면 전혀 이해하지 못하곤 했다. 지금 와서 그런 기분이 드는 건 돌아갈 수 없기 때문일까? 그 땐 항상 그 곳에 있었기 때문일까.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[1 year]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/lavender/1-year/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/lavender/1-year/</guid><pubDate>Wed, 14 Apr 2021 05:47:02 GMT</pubDate><content:encoded>&lt;p&gt;시간이 빠른 건지 느린 건지 모르겠다. 아이의 첫 해는 그만큼 많은 일이 있었던 것 같다.&lt;/p&gt;
&lt;p&gt;말 한 마디 못하던, 아니 우는 소리도 애기애기했던 그 애기가 이제는 조금씩 걷기 시작하고 시도 때도 없이 아빠 아빠 하며 날 괴롭힌다.&lt;/p&gt;
&lt;p&gt;이젠 밥과 반찬도 먹기 시작했다. 물론 엄마가 다 떠먹여주지만.&lt;/p&gt;
&lt;p&gt;애기를 키우다보면 뭐가 옳은 건지 고민되는 부분이 많다. 그렇지만 어쩌면 다 필요 없는 고민일지도 모른다. 내가 워낙 유난이라서 신경을 쓰는 것일 뿐.&lt;/p&gt;
&lt;p&gt;어느덧 하루 세 끼를 먹고 잠도 잘 자는 아기가 되었다니.. 더군다나 생긴 것도 갈수록 더 귀엽고 사랑스럽다.&lt;/p&gt;
&lt;p&gt;앞으로 왠지 더 힘들 것 같다는 생각이 들긴 하지만, 그만큼 사랑스러움이 배가 되고 있으니 상관 없을지도 모르지.&lt;/p&gt;
&lt;p&gt;아래는 연서가 직접 찍은 셀카 ㅎㅎ&lt;/p&gt;
&lt;p&gt;언제 찍었는지 모르지만 자기 엄마 폰으로 찍었다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgP/2gAMAwEAAhADEAAAAanYnTQj/8QAGhAAAwADAQAAAAAAAAAAAAAAAAECERQhMf/aAAgBAQABBQLklMSZcOXPmzg//8QAFhEBAQEAAAAAAAAAAAAAAAAAAAES/9oACAEDAQE/AWq//8QAFhEBAQEAAAAAAAAAAAAAAAAAAAES/9oACAECAQE/AZGX/8QAGxAAAgIDAQAAAAAAAAAAAAAAAAERIiEyQVH/2gAIAQEABj8Cjoq4Kifo3Jqf/8QAHBAAAgMBAAMAAAAAAAAAAAAAAREAITFBUWGx/9oACAEBAAE/IQwKyDXiEISzXhhQ6HvZaSgbm5QUROX3P//aAAwDAQACAAMAAAAQVO//xAAXEQEAAwAAAAAAAAAAAAAAAAABEBEh/9oACAEDAQE/EFy4P//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/EAZ//8QAHhABAAICAQUAAAAAAAAAAAAAAQARITFhQXGhsdH/2gAIAQEAAT8QTIIUYBq16RC3llfCJrvLVTn0OH6S0GAsGgyEQvKTSM6PHqU10MFUxP/Z&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;lavender&quot;
        title=&quot;lavender&quot;
        src=&quot;/static/230bbf556a2a8ed5dafff47e3e776d12/6aca1/lavender_1year.jpg&quot;
        srcset=&quot;/static/230bbf556a2a8ed5dafff47e3e776d12/d2f63/lavender_1year.jpg 163w,
/static/230bbf556a2a8ed5dafff47e3e776d12/c989d/lavender_1year.jpg 325w,
/static/230bbf556a2a8ed5dafff47e3e776d12/6aca1/lavender_1year.jpg 650w,
/static/230bbf556a2a8ed5dafff47e3e776d12/7c09c/lavender_1year.jpg 975w,
/static/230bbf556a2a8ed5dafff47e3e776d12/01ab0/lavender_1year.jpg 1300w,
/static/230bbf556a2a8ed5dafff47e3e776d12/394ef/lavender_1year.jpg 3088w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[10개월]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/lavender/10-months/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/lavender/10-months/</guid><pubDate>Tue, 09 Feb 2021 03:20:34 GMT</pubDate><content:encoded>&lt;p&gt;어느새 이렇게 컸을까. 시간이 빠르게 흘러가는 게 조금 아쉽다. 아무것도 스스로 하지 못하는 아기였던 벌써 이렇게 크다니. 아가의 예전 사진들을 보면 다시 만나고 싶고 그렇다.&lt;/p&gt;
&lt;p&gt;어쩌면 이런 마음이 둘째를 갖게 하는 건지도 모르겠다. 그 한 순간 순간의 모습을 다 뇌리에 담고 싶고, 사진으로 남겨두고 싶다. 그래서 틈나는대로 동영상을 찍고 있지만, 그럼에도 아쉬운 건 어쩔 수가 없구나.&lt;/p&gt;
&lt;p&gt;10개월이 조금 넘은 시점. 연서는 조금 더 사람처럼 안정적으로 설 수 있게 되었다. 이제 조금 있으면 걸을 수 있을 것 같다.&lt;/p&gt;
&lt;p&gt;말은 또 얼마나 늘었는지 모른다. 비록 알 수 없는 옹알이지만 말이다. 아빠, 엄마는 어떻게 하는 건지 신기하다. 다른 말들도 가르치면 금방 할 것 같긴 한데, 그저 많은 말들을 들려주면 되겠지.&lt;/p&gt;
&lt;p&gt;연서는 정말 활발하다. 호기심이 넘치고, 말도 많다. 어쩜 이런 아이가 우리에게 왔는지. 그치만 아마 우릴 닮아가겠지? 아기 때는 다 그런 거니까.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[PostgreSQL, unique index 컬럼에 null 삽입으로 인한 중복 생성 문제]]></title><description><![CDATA[문제의 발단 Unique index가 걸려있는데 데이터가 중복으로 들어가는 현상을 발견했다. 원인은 Null Null은 서로 같지 않기 때문에 unique가 걸려 있는 컬럼이라도 Null…]]></description><link>https://ohseunghyeon.github.io/study/when-the-duplicates-are-created-on-postgreSQL-with-unique-index-by-null/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/study/when-the-duplicates-are-created-on-postgreSQL-with-unique-index-by-null/</guid><pubDate>Mon, 16 Nov 2020 02:57:09 GMT</pubDate><content:encoded>&lt;h2 id=&quot;문제의-발단&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%AC%B8%EC%A0%9C%EC%9D%98-%EB%B0%9C%EB%8B%A8&quot; aria-label=&quot;문제의 발단 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;문제의 발단&lt;/h2&gt;
&lt;p&gt;Unique index가 걸려있는데 데이터가 중복으로 들어가는 현상을 발견했다.&lt;/p&gt;
&lt;p&gt;원인은 Null&lt;/p&gt;
&lt;p&gt;Null은 서로 같지 않기 때문에 unique가 걸려 있는 컬럼이라도 Null이 들어가면 서로 다른 것으로 인지된다.&lt;/p&gt;
&lt;h2 id=&quot;해결-방법&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95&quot; aria-label=&quot;해결 방법 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;해결 방법&lt;/h2&gt;
&lt;p&gt;몇 가지 해결 방법을 생각했다.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Null인 경우 Null이 아닌 특정 문자열(쓰레기 값)을 넣어서 중복을 인지하게 만들자.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;생각 후 바로 기각했다. 우선 쓰레기 값을 넣는 게 마음에 안 들었다. 그 값이 무슨 값인지 다른 사람이 보면 알 방법이 없다.&lt;/p&gt;
&lt;ol start=&quot;2&quot;&gt;
&lt;li&gt;partial query를 사용한 Unique index 생성&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;(참조 - &lt;a href=&quot;https://stackoverflow.com/questions/8289100/create-unique-constraint-with-null-columns&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://stackoverflow.com/questions/8289100/create-unique-constraint-with-null-columns&lt;/a&gt;)&lt;/p&gt;
&lt;p&gt;이 방법도 기각했다. 아마 Null이 허용되는 컬럼이 하나뿐이었으면 이 방법을 고려했을지도 모르겠다.&lt;/p&gt;
&lt;ol start=&quot;3&quot;&gt;
&lt;li&gt;테이블 분리&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;아마 이 방법은 특수한 상황에서만 가능할 것 같다. 대개 2번이 해결방안이 되지 않을까 싶다.&lt;/p&gt;
&lt;p&gt;내 경우 null이 있는 컬럼이 여럿이었다. 예를 들어서 a b c d 컬럼이 있을 때, a 컬럼에 따라서 3가지 경우가 있는 것과 같았다.&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;a&lt;/th&gt;
&lt;th&gt;b&lt;/th&gt;
&lt;th&gt;c&lt;/th&gt;
&lt;th&gt;d&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;O&lt;/td&gt;
&lt;td&gt;null&lt;/td&gt;
&lt;td&gt;null&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;O&lt;/td&gt;
&lt;td&gt;0&lt;/td&gt;
&lt;td&gt;null&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;3&lt;/td&gt;
&lt;td&gt;O&lt;/td&gt;
&lt;td&gt;0&lt;/td&gt;
&lt;td&gt;0&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;만약 이 경우의 수가 좀 더 랜덤했다면 나는 2번도 쓰지 않고 1번을 최후의 보루로 생각했을 것이다.&lt;/p&gt;
&lt;p&gt;그러나 케이스가 좀 깔끔했기 때문에 테이블을 분리하면 더 깔끔한 구조가 될 것이라 생각했다.&lt;/p&gt;
&lt;p&gt;결과는 만족.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[7개월]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/lavender/7-months/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/lavender/7-months/</guid><pubDate>Fri, 13 Nov 2020 13:57:42 GMT</pubDate><content:encoded>&lt;p&gt;아기는 빨리 자란다.&lt;/p&gt;
&lt;p&gt;한참을 더 자라야 어른이 되겠지만, 벌써 한 달, 두 달 전의 사진을 보면 같은 아이가 맞나 싶을 정도다.&lt;/p&gt;
&lt;p&gt;얼굴은 비슷한데, 느낌이 많이 달라서 정말 신기하다.&lt;/p&gt;
&lt;p&gt;그래도 아직은 정말 어린 우리 아기.&lt;/p&gt;
&lt;p&gt;밤에 애앵 하고 깨면 가서 토닥여 준다.&lt;/p&gt;
&lt;p&gt;이 작고 귀여운 아가가 밤에 애앵하고 울면 마음이 왠지 아린다.&lt;/p&gt;
&lt;p&gt;그리고 안아서 토닥여주면 가슴이 정말 아이에 대한 사랑으로 벅차오른다.&lt;/p&gt;
&lt;p&gt;요즘 점퍼루를 정말 잘 타는 귀염둥이.&lt;/p&gt;
&lt;p&gt;아직 서지는 못하지만 곧 서겠지?&lt;/p&gt;
&lt;p&gt;열심히 배를 밀고 다니는 귀염둥이..&lt;/p&gt;
&lt;p&gt;엄마 적당히 괴롭혀.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[아기와 나. 6개월의 여정]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/lavender/6-months-of-babysitting/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/lavender/6-months-of-babysitting/</guid><pubDate>Tue, 13 Oct 2020 14:15:57 GMT</pubDate><content:encoded>&lt;h2 id=&quot;빠른-성장&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%B9%A0%EB%A5%B8-%EC%84%B1%EC%9E%A5&quot; aria-label=&quot;빠른 성장 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;빠른 성장?&lt;/h2&gt;
&lt;p&gt;애는 진짜 빠르게 큰다.&lt;/p&gt;
&lt;p&gt;아니. 크기는 빠르게 크는데, 왜 이렇게 발달 자체는 늦을까?&lt;/p&gt;
&lt;p&gt;우리 애는 기지 못한다. 그래. 다른 애들도 못 기는 건 같다.&lt;/p&gt;
&lt;p&gt;근데 다른 동물들은 보통 태어나면서 기지 않아?..&lt;/p&gt;
&lt;h2 id=&quot;이유식&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%9D%B4%EC%9C%A0%EC%8B%9D&quot; aria-label=&quot;이유식 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;이유식&lt;/h2&gt;
&lt;p&gt;추석 이후로 이유식을 먹고 있다.&lt;/p&gt;
&lt;p&gt;내 딸이 이제 모유, 분유만이 아닌 다른 걸 먹는다는 게 정말 신기하다.&lt;/p&gt;
&lt;p&gt;근데 잘 못 먹는다. 막 입 밑으로 주르륵 한다.&lt;/p&gt;
&lt;p&gt;그치만 먹는 걸 좋아한다! 다 먹는다. 장해&lt;/p&gt;
&lt;h2 id=&quot;길-거야&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EA%B8%B8-%EA%B1%B0%EC%95%BC&quot; aria-label=&quot;길 거야 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;길 거야?&lt;/h2&gt;
&lt;p&gt;기려고 한다. 기고 싶어한다?&lt;/p&gt;
&lt;p&gt;언제 길래?.. 아니 기면 안 되는 걸까? 그럼 더 힘들지도.&lt;/p&gt;
&lt;p&gt;한 번도 경험해보지 못한 것들이라서 뭐가 더 좋을지, 무엇을 바라야 할지도 모르겠다.&lt;/p&gt;
&lt;p&gt;그치만 조만간 길 것 같다.&lt;/p&gt;
&lt;h2 id=&quot;치아가-나려고-해&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%B9%98%EC%95%84%EA%B0%80-%EB%82%98%EB%A0%A4%EA%B3%A0-%ED%95%B4&quot; aria-label=&quot;치아가 나려고 해 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;치아가 나려고 해?&lt;/h2&gt;
&lt;p&gt;치아.. 치아가 나려는 걸까&lt;/p&gt;
&lt;p&gt;새벽에 그냥 깨어서 열심히 울어재낀다. 그래. 울음소리도 커졌어&lt;/p&gt;
&lt;p&gt;너 쎄진 거 알겠어. 힘도 쎄졌고.. 근데 .. ㅠㅜ&lt;/p&gt;
&lt;p&gt;아빠는 왜 울고 싶을까&lt;/p&gt;
&lt;h2 id=&quot;이쁨&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%9D%B4%EC%81%A8&quot; aria-label=&quot;이쁨 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;이쁨&lt;/h2&gt;
&lt;p&gt;잘 크고 있어. 너무 이쁘게. 그래서 고맙다.&lt;/p&gt;
&lt;p&gt;&lt;div class=&quot;gatsby-resp-iframe-wrapper&quot; style=&quot;padding-bottom: 56.42857142857143%; position: relative; height: 0; overflow: hidden; margin-bottom: 1.0725rem&quot; &gt; &lt;div class=&quot;embedVideo-container&quot;&gt; &lt;iframe src=&quot;https://www.youtube.com/embed/fcHfzN9XBHk?rel=0&quot; class=&quot;embedVideo-iframe&quot; style=&quot;border:0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; &quot; allowfullscreen&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;/div&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[가족을 갖는 것]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/essay/having-a-family/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/essay/having-a-family/</guid><pubDate>Fri, 11 Sep 2020 16:11:47 GMT</pubDate><content:encoded>&lt;p&gt;그리운 시간들이 있다. 그 중 가장 그리운 시간은 연애하던 때인 것 같다. 두꺼운 옷을 걸쳐입고 춥지만 여기저기 돌아다니기도 하고, 땀을 뻘뻘 흘리면서 시원한 곳을 찾아 다니기도 했다.&lt;/p&gt;
&lt;p&gt;요즘 우리의 삶은 그저 아가 돌보기 밖에 없다. 둘과 셋은 천지차이다. 어쩌면 셋이 아니기 때문이겠지. 이 아이는 0.1 정도니까. 그럼 2.1인일까 우린..&lt;/p&gt;
&lt;p&gt;아직 기지도 못하는 아이와 함께 있으면 늘 아이에게 신경을 두게 된다. 잠을 자도 잘 자지 못하는 어린 애기이기에, 잘 잘 수 있을까 하는 염려를 갖게 된다.&lt;/p&gt;
&lt;p&gt;그러다가 와이프가 친정에 갔다. 오랜만에 집에 혼자 남아 있으니 뭔가 허전하다. 아기는 같이 있으면 힘들지만 떨어져 있으면 보고 싶다. 그래서 참 웃긴다.&lt;/p&gt;
&lt;p&gt;혼자 남은 나는 게임을 하고 있다. Tell me why라는 작품인데 풍경이 예쁘다. 가족에 대한 스토리라서 나도 내 가족을 생각하게 됐다.&lt;/p&gt;
&lt;p&gt;인생의 많은 것이 바껴버린 나와 내 아내. 특히 아내의 삶은 어쩌면 정말로 사라졌는지도 모르겠다는 생각이 들었다. 이제는 정말 그저 한 아이의 엄마가 되어버린 걸까?&lt;/p&gt;
&lt;p&gt;그건 어쩔 수 없는 듯 한 편으로는 잔인하기도 하고, 한 편으로는 정말 행복한 일이다.&lt;/p&gt;
&lt;p&gt;앞으로는 또 어떨까? 어떤 기분일까. 어떤 느낌일까. 지금 이 때를 또 그리워하겠지? 아닐까?&lt;/p&gt;
&lt;p&gt;행복이란 내일도 오늘 같았으면 하는 거라는데, 나도 그렇다. 그럼에도 나는, 내 아내는 행복하다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[연서가 처음으로 뒤집었다.]]></title><description><![CDATA[늦었다. 쓴다 쓴다 해놓고 좀 지났다. 한 일주일 됐는지도 모른다. 아무튼 연서가 처음으로 뒤집는 걸 본 순간 연서가 정말 자랑스러웠다. 한참을 뒤집으려고 시도하더니 결국엔 뒤집었다. 그리고 그것과 함께 죽음의…]]></description><link>https://ohseunghyeon.github.io/lavender/first-time-she-flipped/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/lavender/first-time-she-flipped/</guid><pubDate>Wed, 26 Aug 2020 06:54:39 GMT</pubDate><content:encoded>&lt;p&gt;늦었다. 쓴다 쓴다 해놓고 좀 지났다. 한 일주일 됐는지도 모른다.&lt;/p&gt;
&lt;p&gt;아무튼 연서가 처음으로 뒤집는 걸 본 순간 연서가 정말 자랑스러웠다.&lt;/p&gt;
&lt;p&gt;한참을 뒤집으려고 시도하더니 결국엔 뒤집었다.&lt;/p&gt;
&lt;p&gt;그리고 그것과 함께 죽음의 4개월차 원더윅스가 끝났다.&lt;/p&gt;
&lt;p&gt;원더윅스 이전에 그나마 잘 잤는데, 최근 원더윅스와 함께 새벽엔 항상 3시간 마다 깼다.&lt;/p&gt;
&lt;p&gt;그리고 뒤집기를 성공한 날부터 갑자기 5~6시간을 잘 수 있게 됐다. 아직 좀 잠 패턴이 엉망인 것 같지만..&lt;/p&gt;
&lt;p&gt;와이프가 수면교육도 동반하면서 아기가 누워서 스스로 잠도 들 수 있게 됐고, 스스로 잠에 대한 조절을 할 수 있는 것 같다.&lt;/p&gt;
&lt;p&gt;아기가 발전한다는 게 참.. 신기하다.&lt;/p&gt;
&lt;p&gt;지금은 다시 원래대로 뒤집는 것과 기어가기를 시도한다. 그러다가 앉고, 서겠지? 정말 귀여울 것 같아서 기대된다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[나와 함께하는 이]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/essay/whom-i-will-walk-by-forever/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/essay/whom-i-will-walk-by-forever/</guid><pubDate>Fri, 14 Aug 2020 15:11:38 GMT</pubDate><content:encoded>&lt;p&gt;최근에 [님아 그 강을 건너지 마요]에 나온 노부부 중 할머니의 근황이 어떠한지 알아보는 유튜브 영상을 봤다. 두 분은 정말 서로를 많이 아끼고 사랑하는 부부였다. 그런데 할아버지가 나이가 들어서 돌아가셨고, 할머니는 혼자 살고 계신다. 마을회관에서 다른 할머니들과 고스톱도 치시고, 잘 계신 것 같다.&lt;/p&gt;
&lt;p&gt;할머니에게 할아버지 안 보고 싶으시고 여쭤본다. 할머니는 할아버지가 항상 보고 싶으시단다. 그 말 한 마디에 가슴이 참 먹먹했다. 나도 내 아내가 늘 보고 싶은데. 옆에 있어도 보고 싶고, 없으면 너무 보고 싶은데, 평생 함께한 사람이 간다면, 그 사람을 보고 싶은 마음은 어찌할 수 있을까. 그저 울 수 밖에. 할머니는 밤에 깨시면 옆에 할아버지가 있을 것만 같은데, 없어서, 베개가 다 젖을만큼 한참을 운다고 하신다. 그 마음이.. 이해가 갔다. 나도 그럴 것만 같아서.&lt;/p&gt;
&lt;p&gt;아마 아무리 사랑해주고 아껴주어도 나중에 후회할 것만 같다. 더 사랑해줄 것을, 더 이해해줄 것을.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[16주차 원더윅스]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/lavender/wonder-weeks/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/lavender/wonder-weeks/</guid><pubDate>Thu, 30 Jul 2020 14:05:01 GMT</pubDate><content:encoded>&lt;h2 id=&quot;발단&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%B0%9C%EB%8B%A8&quot; aria-label=&quot;발단 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;발단&lt;/h2&gt;
&lt;p&gt;요즘 들어 이 아이의 잠투정이 심해졌다. 애기 엄마는 매우 힘들어하고 있다. 스트레스로 인해 정줄이 날아가는 모습이 보일 정도. 도대체 왜 이 아이는 이렇게 뒤척이고 잠들지 못 해 찡찡대는 것인가?&lt;/p&gt;
&lt;h2 id=&quot;원더윅스&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%9B%90%EB%8D%94%EC%9C%85%EC%8A%A4&quot; aria-label=&quot;원더윅스 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;원더윅스&lt;/h2&gt;
&lt;p&gt;그래. 이게 원더윅스일까? 아니.. 아무리 그래도 그렇지. 너는 어느 정도 잘 자던 아이었다. 그런데 갑자기 이렇게 변하다니? 낮잠도 재우기 힘들어, 밤잠은 재워놓으면 금방 금방 꿈틀대다가 깨기 십상이야. 죽어가는 건 애기 엄빠다.&lt;/p&gt;
&lt;h2 id=&quot;스와들업&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%8A%A4%EC%99%80%EB%93%A4%EC%97%85&quot; aria-label=&quot;스와들업 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;스와들업&lt;/h2&gt;
&lt;p&gt;최근에는 스와들업을 입히지 않았다. 답답해 하는 모습이 심했기 때문이다. 그러나 오늘 스와들업을 입혀보니 계속 꿈틀대면서도 잘 자는 모습이 보인다. 역시 꿈틀대는 걸 어느정도 잡아주는 게 잠을 유지하는 데 도움이 되는 걸까? 내일도 입혀봐야겠다. 낮잠 잘 때도 입혀야지.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[life, marriage, baby]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/essay/life,-marriage,-baby/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/essay/life,-marriage,-baby/</guid><pubDate>Fri, 24 Jul 2020 16:09:29 GMT</pubDate><content:encoded>&lt;p&gt;사람들은 그것의 나쁜 점을 안다. 아니, 사실은 모른다. 들었을 뿐이다. 그리고 그것을 안다고 생각한다. 그렇게 막연한 두려움으로 그것을 바라본다. 그것은 뭘까? 내게는 입대가 그러했다. 사람들은 군대에 가는 것을 정말 끔찍한 일인 것처럼 말한다. 애초에 약 2년의 시간을 버린다는 건 작지 않은 공포로 다가오는 법이다. 군에 있던 시간은 실제로 좋은 시간이 아니었다. 내가 그 시간동안 얻은 건 약간의 영어실력일 뿐, 다른 부분에 있어서는 힘들고 안타까운 시간이었다. 어쩔 수 없는 것이, 그런 환경이 만들어지는 곳이기 때문이다. 결혼과 아이는 어떨까? 결혼은 하고 싶어 하는 것 같기도 하다. 그러나 아이는 아닌 것 같다. 아이를 갖는 것에 대해 부정적인 얘기를 많이 들었다. 커리어가 가장 큰 이유인 것 같다. 그리고 집, 돈, 시간, 젊음등 포기할 것이 많다. 그렇지만 지금 결혼을 하고 아이를 가진 입장에서 그건 포기가 아니다. 나는 이로 인해 더 큰 것을 얻었다고 생각한다. 내 삶이 조금 더 나아졌다고 생각한다. 어릴적엔 이런 삶이 평범한 삶일 거라고 생각했는데, 지금와서 보니 결코 평범하지가 않다. 나도 상황이 되었기 때문에 간신히 이뤄낸 것 같다. 이건 행운일까? 나는 그렇게 생각한다. 그렇다면 다른 이들은 불행했을까? 글쎄, 한 편으로는 그들이 노력하지 않았다고 생각한다. 그러나 그건 오만이겠지? 삶은 어떤 걸까. 한 치 앞도 내다볼 수 없다. 분명 선택할 수 있는 것 같지만 그게 선택일까? 결혼과 아이를 갖는 건 선택일까? 나는 좋은 선택을 했다. 행복해지는 선택. 불행한 사람들을 보며 속으로 욕한다. 그러게 좋은 선택을 했어야지. 멍청하게. 정말 그들이 멍청한 걸까? 글쎄.. 나는 아직도 오만한 것 같다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[너와 함께한 100일]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/lavender/100-days-with-you/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/lavender/100-days-with-you/</guid><pubDate>Tue, 21 Jul 2020 09:27:02 GMT</pubDate><content:encoded>&lt;h2 id=&quot;너가-할-수-있게-된-것&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%84%88%EA%B0%80-%ED%95%A0-%EC%88%98-%EC%9E%88%EA%B2%8C-%EB%90%9C-%EA%B2%83&quot; aria-label=&quot;너가 할 수 있게 된 것 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;너가 할 수 있게 된 것&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;머리는 언제나 들었지만, 조금 더 수월해졌다. 엎드린 상태에서 한참동안 고개를 들고 있을 수 있게 되었다.&lt;/li&gt;
&lt;li&gt;토를 좀 덜 하게 되었다. 소화기관이 훨씬 좋아진 것 같다. 트림도 매우 수월해졌다. 그 덕에 잠도 더 잘 잘 수 있게 되었다.&lt;/li&gt;
&lt;li&gt;잠을 더 잘 자게 되었다. 수면 교육의 효과일까? 아니면 그냥 너가 성장해서일까? 잠 드는 과정에 익숙해졌는지 잘 자게 되었다. 특히 엄마가 종종 너를 안고서 자야했는데, 등을 대고 잘 자게 되어서 다행이야. 엄마가 조금 덜 고생해도 되잖아.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&quot;왜-아직도&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%99%9C-%EC%95%84%EC%A7%81%EB%8F%84&quot; aria-label=&quot;왜 아직도 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;왜 아직도?&lt;/h2&gt;
&lt;p&gt;너는 밤에 깨는 걸까? 아니, 정확히 말하자면 생각보다 일찍 깨곤 한다. 소리 때문일까? 통잠을 더 잘 자줬으면 좋겠어!&lt;/p&gt;
&lt;h2 id=&quot;100일-축하해&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#100%EC%9D%BC-%EC%B6%95%ED%95%98%ED%95%B4&quot; aria-label=&quot;100일 축하해 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;100일 축하해&lt;/h2&gt;
&lt;p&gt;널 괴롭히는 게 너무 즐거워. 울 때 나도 옆에서 같이 우는 척 하고.
볼을 부비고, 네 팔을 가지고 놀고. 너를 아바타처럼 조종할 때! 너무 즐거워.&lt;/p&gt;
&lt;p&gt;고마워 딸&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 66.87116564417178%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEAf/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAGpDGjGYS//xAAbEAEAAgIDAAAAAAAAAAAAAAABAAIDERIhIv/aAAgBAQABBQJ3Dy3pjuq74DLdP//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/AUf/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAgEBPwGK/8QAGRAAAQUAAAAAAAAAAAAAAAAAAAIRICFh/9oACAEBAAY/AsLHVD//xAAZEAADAQEBAAAAAAAAAAAAAAAAATERIUH/2gAIAQEAAT8hXwxSzpfzlGs7wXSxuGaf/9oADAMBAAIAAwAAABDjL//EABcRAAMBAAAAAAAAAAAAAAAAAAABETH/2gAIAQMBAT8QTmkH/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERMf/aAAgBAgEBPxB1hR//xAAbEAEBAAIDAQAAAAAAAAAAAAABEQAhMUFhcf/aAAgBAQABPxB7AERyXkOxzM0cjsM1jiQOg5w5pUUez5lWHpLn/9k=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;lavender&quot;
        title=&quot;lavender&quot;
        src=&quot;/static/9ec720539ba828d6c0ef31204c04800e/6aca1/lavender.jpg&quot;
        srcset=&quot;/static/9ec720539ba828d6c0ef31204c04800e/d2f63/lavender.jpg 163w,
/static/9ec720539ba828d6c0ef31204c04800e/c989d/lavender.jpg 325w,
/static/9ec720539ba828d6c0ef31204c04800e/6aca1/lavender.jpg 650w,
/static/9ec720539ba828d6c0ef31204c04800e/7c09c/lavender.jpg 975w,
/static/9ec720539ba828d6c0ef31204c04800e/01ab0/lavender.jpg 1300w,
/static/9ec720539ba828d6c0ef31204c04800e/3acf0/lavender.jpg 2000w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Json gzip stream을 unzip하여 리턴하기]]></title><description><![CDATA[아마존 S3에서 gzip을 받을 일이 있어서 이를 unzip해서 리턴하는 함수를 작성했다.
언젠가 참고할 일이 있을까 하여 적어둠]]></description><link>https://ohseunghyeon.github.io/study/function-that-gunzips-stream-and-returns/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/study/function-that-gunzips-stream-and-returns/</guid><pubDate>Tue, 07 Jul 2020 05:08:45 GMT</pubDate><content:encoded>&lt;p&gt;아마존 S3에서 gzip을 받을 일이 있어서 이를 unzip해서 리턴하는 함수를 작성했다.
언젠가 참고할 일이 있을까 하여 적어둠&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; gzipStream &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; axios&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;default&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;request&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  url&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; error&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;response&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;headers&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;location&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  responseType&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;stream&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; jsonData &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;transformGzipStreamIntoJson&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;gzipstream&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; zlib &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;zlib&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; util &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;util&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; stream &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;stream&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; Writable &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; stream&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; pipeline &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; util&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;promisify&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;stream&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;pipeline&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;async&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;transformGzipStreamIntoJson&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;gzipStream&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; jsonStrArr &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;pipeline&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
    gzipStream&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    zlib&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createGunzip&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Writable&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token function&quot;&gt;write&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;chunk&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; encoding&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; callback&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        jsonStrArr&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;chunk&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toString&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        &lt;span class=&quot;token function&quot;&gt;callback&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;JSON&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;parse&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;jsonStrArr&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;join&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</content:encoded></item><item><title><![CDATA[50일을 함께 보내며]]></title><description><![CDATA[벌써 50일이 지났다. 아니, 어쩌면 아직도 5…]]></description><link>https://ohseunghyeon.github.io/lavender/50-days-with-lavender/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/lavender/50-days-with-lavender/</guid><pubDate>Mon, 01 Jun 2020 08:35:13 GMT</pubDate><content:encoded>&lt;p&gt;벌써 50일이 지났다. 아니, 어쩌면 아직도 50일 정도 밖에 안 됐느냐? 일지도 모르겠다. 육아는 그만큼 고달픈 것 같다. 아이는 아무것도 할 줄 모르고, 아기의 울음이 무엇을 의미하는지 파악하는 건 여전히 어렵다.&lt;/p&gt;
&lt;p&gt;무엇이 원인인지 파악하는 프로세스는 갖춰졌다. 그러나 그 프로세스조차 시간이 걸린다. 즉, 한 눈에 이 아이가 어떤 상태인지는 아직 모르겠다.&lt;/p&gt;
&lt;h2 id=&quot;배가-고픈-상태&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%B0%B0%EA%B0%80-%EA%B3%A0%ED%94%88-%EC%83%81%ED%83%9C&quot; aria-label=&quot;배가 고픈 상태 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;배가 고픈 상태&lt;/h2&gt;
&lt;p&gt;대체로 배가 고프다. 라벤더는 기저귀에는 민감하지 않다. 쉬를 어느 정도 해도 딱히 울지 않는다. 응가를 조금 해도 그러려니 하는 것 같다. 다만 밥을 미친듯이 찾는다. 요즘엔 응애 응애 운다. 말 그대로 소리가 ‘응애’ 인데, 이건 배가 고프다는 뜻이다. 밥을 잘 먹으면 좀 잤으면 좋겠는데, 그것도 아니다. 잘 깨어 있다. 조금 자는 듯 싶더니 일어나서 논다. 아니, 운다.&lt;/p&gt;
&lt;h2 id=&quot;트림---그게-관건이다&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%ED%8A%B8%EB%A6%BC---%EA%B7%B8%EA%B2%8C-%EA%B4%80%EA%B1%B4%EC%9D%B4%EB%8B%A4&quot; aria-label=&quot;트림   그게 관건이다 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;트림 - 그게 관건이다&lt;/h2&gt;
&lt;p&gt;트림을 잘 시키는 것이 가장 중요한 일임을 알게 되었다. 밥을 먹이는 과정부터 잘 챙겨줘야 트림도 수월하게 할 수 있다. 처음엔 다량의 분유를 한 번에 먹였다. 그랬더니 트림을 조금 하더라도 계속 속이 불편해 보였다. 약 30ml 정도를 먹이면 그 때는 잠시 젖병을 빼고 트림을 시켜줘야 한다. 목을 가누지 못하던 어릴 때는 어깨에 올렸는데, 마지막으로 잰 몸무게로 5.5kg이 넘어서 다리에 올려놓고 트림을 시키고 있다. 트림을 시키는 방법은 처음엔 쓰다듬는 것으로 했으나, 요즘엔 톡톡톡톡 두드려 준다. 이게 잘 통하는 것 같다. 조금 빠른 비트로 등을 타격해한다…&lt;/p&gt;
&lt;h2 id=&quot;응가---카레&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%9D%91%EA%B0%80---%EC%B9%B4%EB%A0%88&quot; aria-label=&quot;응가   카레 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;응가 - 카레?&lt;/h2&gt;
&lt;p&gt;응가를 가끔 엄청난 양으로 하곤 한다. 이유는 밝혀지지 않았다. 그러나 이따금 기저귀가 넘칠 정도로 하곤 하는데, 이 떄는 옷에도 카레가 조금 묻는다. 그럼 정말.. 나도 모르게 소스라치며 으악 하고 소리를 지른다. 정말.. 대단하고 끔찍하다.&lt;/p&gt;
&lt;h2 id=&quot;둘째&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%91%98%EC%A7%B8&quot; aria-label=&quot;둘째 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;둘째?&lt;/h2&gt;
&lt;p&gt;이 아이를 보고 있으면, 너무 귀엽다는 생각 밖에 안 든다. 너무 귀엽다. 정말. 너무. 그래서 상상을 해봤다. 둘째는 또 어떨까? 상상만 해도 귀여웠다. 그래서 와이프에게 말했다. 둘째도 정말 귀여울 것 같다고. 그랬더니 나한테 젖을 먹일 거냐고 하는 와이프. 그래. 내가 먹일 건 아니지. 너의 판단에 맡기겠다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[미소 에어컨 청소 후기]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/essay/miso-air-conditioner-cleaning-service/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/essay/miso-air-conditioner-cleaning-service/</guid><pubDate>Fri, 22 May 2020 11:11:53 GMT</pubDate><content:encoded>&lt;h2 id=&quot;에어컨-냄새가-나&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%97%90%EC%96%B4%EC%BB%A8-%EB%83%84%EC%83%88%EA%B0%80-%EB%82%98&quot; aria-label=&quot;에어컨 냄새가 나 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;에어컨 냄새가 나&lt;/h2&gt;
&lt;p&gt;여름이 됐다. 덥다. 에어컨을 틀어보니 곰팽이 냄시가 난다.&lt;/p&gt;
&lt;p&gt;집에는 아가가 생겼다. 아, 청소를 하고 싶다. 쾌적한 에어컨 바람을 원한다. 냉방 도중에 잠시 송풍 때 나는 냄새가 싫다!&lt;/p&gt;
&lt;p&gt;그래. 청소를 해야지. 근데 직접 하기는 싫다. 언제 저걸 뜯고 앉았나.&lt;/p&gt;
&lt;p&gt;미소가 그냥 생각났다. 앱을 키고 에어컨 청소를 신청했다.&lt;/p&gt;
&lt;p&gt;신청이 너무 많아서 내가 예약한 시간이 불가능하다고 전화가 왔다. 시간을 미뤄주면 5천원을 할인해준다고 한다.&lt;/p&gt;
&lt;p&gt;그래봤자 7만원.&lt;/p&gt;
&lt;p&gt;좋다.&lt;/p&gt;
&lt;h2 id=&quot;에어컨-청소해주실-분이-왔어&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%97%90%EC%96%B4%EC%BB%A8-%EC%B2%AD%EC%86%8C%ED%95%B4%EC%A3%BC%EC%8B%A4-%EB%B6%84%EC%9D%B4-%EC%99%94%EC%96%B4&quot; aria-label=&quot;에어컨 청소해주실 분이 왔어 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;에어컨 청소해주실 분이 왔어!&lt;/h2&gt;
&lt;p&gt;기사님이 오셨다. 청소를 좀 해주셨다. 마치고 에어컨을 틀었다. 냄새가 조금 난다.&lt;/p&gt;
&lt;p&gt;말씀드렸다. 송풍 좀 하면 안 날 거라고 하신다. 애기가 있어서 약은 안 쓰셨다고 한다.&lt;/p&gt;
&lt;p&gt;뭐 있으면 전화달라고 하신다 (연락처를 알아야지…)&lt;/p&gt;
&lt;p&gt;그런데 냄새가 계속 안 사라진다. 곰팡이 냄새 여전하시다.&lt;/p&gt;
&lt;p&gt;어떡하지. 계속 틀어보면 괜찮지 않을까 생각하고 계속 틀었다. 근데 여전하다.&lt;/p&gt;
&lt;p&gt;집 안에 퍼지는 꾸리꾸리한 냄시.&lt;/p&gt;
&lt;p&gt;미소에 다시 채팅으로 문의했다. 청소를 받았었는데, 냄새가 난다고.&lt;/p&gt;
&lt;p&gt;AS 접수를 해주신단다. 청소해주셨던 기사분이 전화를 걸어서 스케쥴을 다시 잡아주신단다.&lt;/p&gt;
&lt;p&gt;전화가 왔다. 냄새가 난다 말씀드렸더니, 안에 스펀지에서 나는 냄새라서 어떻게 할 수 없다고 하신다.&lt;/p&gt;
&lt;h2 id=&quot;그럼-뭘-청소한-거야&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EA%B7%B8%EB%9F%BC-%EB%AD%98-%EC%B2%AD%EC%86%8C%ED%95%9C-%EA%B1%B0%EC%95%BC&quot; aria-label=&quot;그럼 뭘 청소한 거야 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;그럼 뭘 청소한 거야?&lt;/h2&gt;
&lt;p&gt;나는 곰팡이 냄새가 나서 그 냄새를 없애려고 청소를 부른 건데.. 냄새가 나면 이건 서비스에 문제가 있는 게 아닌가?&lt;/p&gt;
&lt;p&gt;어이가 없다.&lt;/p&gt;
&lt;p&gt;AS는 전화 한 통으로 끝났다. 응. 냄새가 나고, 나도 어쩔 수 없다.&lt;/p&gt;
&lt;p&gt;그럼 뭐지? 내가 돈 내고 서비스를 제대로 제공받지 못했으면, 환불을 받는 게 맞지 않나?&lt;/p&gt;
&lt;p&gt;환불도 안 돼, AS도 안 돼. 서비스가 왜 이 모양이지?&lt;/p&gt;
&lt;p&gt;난 뭘 위해서 돈을 낸 건데?&lt;/p&gt;
&lt;p&gt;아니, 너넨 무슨 배짱으로 서비스하는 건데?&lt;/p&gt;
&lt;p&gt;미소 진짜 짜증난다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[목욕을 하다가 울었다.]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/lavender/cried-while-having-a-bath/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/lavender/cried-while-having-a-bath/</guid><pubDate>Thu, 07 May 2020 14:55:16 GMT</pubDate><content:encoded>&lt;p&gt;연서가 태어난지 벌써 한 달 정도가 되었다.&lt;/p&gt;
&lt;p&gt;어쩜 이렇게 시간이 빠를까?&lt;/p&gt;
&lt;p&gt;처음엔 트림을 시켜주는 것도 제대로 못 했지만 이제는 익숙해졌다.&lt;/p&gt;
&lt;p&gt;하지만 아직 익숙하지 않은 게 있는데, 바로 거꾸로 드는 것.&lt;/p&gt;
&lt;p&gt;애의 가슴 쪽을 손으로 받치고 등을 씻겨주려고 했다.&lt;/p&gt;
&lt;p&gt;그런데 내가 충분히 높게 들지 않았는지, 얘가 물을 마시고 말았다.&lt;/p&gt;
&lt;p&gt;(더러워. 자기가 씻던 물을… 물론 먹인 건 나지만)&lt;/p&gt;
&lt;p&gt;무튼, 급 얼굴이 빨갛게 변하며 울기 시작했다.&lt;/p&gt;
&lt;p&gt;무슨 태어난 직후의 모습을 보는 듯 했다. 아마 비슷한 경험이었겠지? ^^;&lt;/p&gt;
&lt;p&gt;가 아니라.. 미안하다 ;&lt;/p&gt;
&lt;p&gt;다음엔 목욕 잘 시켜줄게.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[nodejs googleapis에서 service account로 auth 하기]]></title><description><![CDATA[서비스 어카운트 json 파일 사용하여 인증하기 서비스 어카운트 정보를 사용하여 인증하기 Oauth2 token으로 인증하기]]></description><link>https://ohseunghyeon.github.io/study/nodejs-googleapis-auth-with-service-account/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/study/nodejs-googleapis-auth-with-service-account/</guid><pubDate>Thu, 23 Apr 2020 03:55:37 GMT</pubDate><content:encoded>&lt;h2 id=&quot;서비스-어카운트-json-파일-사용하여-인증하기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%96%B4%EC%B9%B4%EC%9A%B4%ED%8A%B8-json-%ED%8C%8C%EC%9D%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EC%9D%B8%EC%A6%9D%ED%95%98%EA%B8%B0&quot; aria-label=&quot;서비스 어카운트 json 파일 사용하여 인증하기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;서비스 어카운트 json 파일 사용하여 인증하기&lt;/h2&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; google &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;googleapis&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; credentials &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;json-file-that-you-downloaded-on-google-console.json&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; jwt &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;google&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;auth&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;JWT&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  scopes&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
    &lt;span class=&quot;token string&quot;&gt;&apos;https://www.googleapis.com/auth/analytics&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token string&quot;&gt;&apos;https://www.googleapis.com/auth/analytics.manage.users&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token string&quot;&gt;&apos;https://www.googleapis.com/auth/analytics.edit&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

jwt&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;fromJSON&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;credentials&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// you can also set auth here&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; analytics &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; google&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;analytics&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; version&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;v3&apos;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; list &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; analytics&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;management&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;accounts&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  auth&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; jwt&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2 id=&quot;서비스-어카운트-정보를-사용하여-인증하기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%96%B4%EC%B9%B4%EC%9A%B4%ED%8A%B8-%EC%A0%95%EB%B3%B4%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EC%9D%B8%EC%A6%9D%ED%95%98%EA%B8%B0&quot; aria-label=&quot;서비스 어카운트 정보를 사용하여 인증하기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;서비스 어카운트 정보를 사용하여 인증하기&lt;/h2&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; google &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;googleapis&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; credentials &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;json-file-that-you-downloaded-on-google-console.json&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; jwt &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;google&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;auth&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;JWT&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  email&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; credentials&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;client_email&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  key&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; credentials&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;private_key&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  scopes&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
    &lt;span class=&quot;token string&quot;&gt;&apos;https://www.googleapis.com/auth/analytics&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token string&quot;&gt;&apos;https://www.googleapis.com/auth/analytics.manage.users&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token string&quot;&gt;&apos;https://www.googleapis.com/auth/analytics.edit&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

jwt&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;fromJSON&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;credentials&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// you can also set auth here&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; analytics &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; google&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;analytics&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; version&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;v3&apos;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; list &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; analytics&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;management&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;accounts&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  auth&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; jwt&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2 id=&quot;oauth2-token으로-인증하기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#oauth2-token%EC%9C%BC%EB%A1%9C-%EC%9D%B8%EC%A6%9D%ED%95%98%EA%B8%B0&quot; aria-label=&quot;oauth2 token으로 인증하기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Oauth2 token으로 인증하기&lt;/h2&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; google &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;googleapis&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; oauth2Client &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;google&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;auth&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;OAuth2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  clientId&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;client-id&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  clientSecret&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;client-secret&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

oauth2Client&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setCredentials&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  access_token&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;access_token&apos;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// optional&lt;/span&gt;
  refresh_token&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;refresh_token&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// This function will refresh accessToken. you can use this when you didn&apos;t put&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// access_token for setCredentials method&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// await oauth2Client.getAccessToken()&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; analytics &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; google&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;analytics&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; version&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;v3&apos;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; list &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; analytics&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;management&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;accounts&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  auth&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; oauth2Client&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</content:encoded></item><item><title><![CDATA[38 weeks]]></title><description><![CDATA[뱃 속에서 엄마를 열심히 때리는 라벤더 갈비뼈를 종종 찬다. 누워서 쉬다가 애기가 차면 악! 소리를 지르는 와이프. 흥미롭다. 의사 선생님 말로는 곧 나올 거라는데, 이번주에도 나오지 않으면 유도분만을 하자고 하신다. 곧 너를 보게 된다니 정말 궁금해]]></description><link>https://ohseunghyeon.github.io/lavender/38-weeks/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/lavender/38-weeks/</guid><pubDate>Mon, 06 Apr 2020 01:30:31 GMT</pubDate><content:encoded>&lt;p&gt;뱃 속에서 엄마를 열심히 때리는 라벤더&lt;/p&gt;
&lt;p&gt;갈비뼈를 종종 찬다.&lt;/p&gt;
&lt;p&gt;누워서 쉬다가 애기가 차면 악! 소리를 지르는 와이프.&lt;/p&gt;
&lt;p&gt;흥미롭다.&lt;/p&gt;
&lt;p&gt;의사 선생님 말로는 곧 나올 거라는데, 이번주에도 나오지 않으면 유도분만을 하자고 하신다.&lt;/p&gt;
&lt;p&gt;곧 너를 보게 된다니 정말 궁금해&lt;/p&gt;</content:encoded></item><item><title><![CDATA[와이프가 자기 손을 찔렀다.]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/essay/wife-cut-her-fingers-by-herself/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/essay/wife-cut-her-fingers-by-herself/</guid><pubDate>Fri, 06 Mar 2020 04:36:41 GMT</pubDate><content:encoded>&lt;p&gt;내 와이프는 마조가 아니다. 하지만 스스로 손을 베였다. 손을 베기 위해 사용한 도구는 과도. 생각보다 많이 베였다. 그래서 피도 조금 철철 났다. 도대체 왜 자신의 손을 벤 걸까?&lt;/p&gt;
&lt;p&gt;내 와이프는 요리를 하고 있었다. 최근 코로나 바이러스의 창궐로 재택근무를 조금씩 하고 있다. 와이프의 경우는 회사 차원에서 아예 재택근무를 장려하고 있기에 집에 종일 있고, 나 같은 경우엔 일주일에 몇 번 재택근무를 캘린더에 등록하여 하고 있다.&lt;/p&gt;
&lt;p&gt;집에서 같이 일을 하고 있었고, 점심 즈음이 되어서 아내가 요리를 하기 시작했다. 나는 와이프가 무얼 하려는 건지 잠시 구경한 후, 라벤더의 침대에 있는 귀여운 양 인형(사실은 가방)을 가지고 놀고(?) 있었다.&lt;/p&gt;
&lt;p&gt;갑자기 들려오는 비명. 나는 와이프가 요리를 하다가 뭔가 잘못 했나? 라고 생각했다. 그런데 손을 베였단다. 조금 깊게 베인 상처라 피부가 조금 들려있는 게 보였다. 그런데 상처가 조금 이상하게 나 있다.&lt;/p&gt;
&lt;p&gt;어떻게 다친 건가하고 보니 얼어 있는 간마늘통과 그 통의 옆을 통과한 과도가 보인다. 그렇구나.. 얼어 있는 간마늘을 과도로 퍼내려고 한 것이다. 그러다가 미끄러졌으니 힘도 어지간히 주고 있었을 터, 그대로 손을 찔러버린 것이다.&lt;/p&gt;
&lt;p&gt;속으로 많은 생각이 지나갔다. 어떻게 그런 생각을 했을까? 상처는 어떤 수준인 거지? 집에서 치료할 수 있을까? 와이프는 병원에 가야겠다고 말한다. 하긴, 이건 살짝 찔리고 베인 정도가 아니다. 피가 조금 많이 난다.&lt;/p&gt;
&lt;p&gt;그대로 병원을 검색해 집 주변의 정형외과로 갔다. 손을 지혈하면서 가는데 와이프가 여전히 놀란 상태인지 횡설수설한다. 엄마가 보고 싶단다.&lt;/p&gt;
&lt;p&gt;병원에 도착해 진료를 봤는데 의사 선생님이 손을 6땀인가 5땀 정도 꼬매야 한다고 했단다. 그런데 와이프가 임신중이라 항생제도 안 쓰고, 마취도 쓰기 좀 그래서 맨 정신에 해야한다고 하니 와이프는 무서워서 꼬매지 않기로 했단다.&lt;/p&gt;
&lt;p&gt;내일 다시 돌아와서 감염이 있는지 보자고 했다는데, 괜찮겠지? 마늘을 찌르던 과도이니.. 마늘이 균을 죽여줬을 것이다. (?)&lt;/p&gt;
&lt;p&gt;아무튼, 집에 와서 아내는 엄마한테 전화를 걸고 울기 시작한다. 어지간히도 놀랐나 보다. 사실 나였다면 이보다는 많이 무덤덤했을 것 같은데. 지금은 또 드레싱한 손으로 일을 하고 있는 내 와이프.&lt;/p&gt;
&lt;p&gt;그저 그런 위험한 행동만 안 했으면 지금 멀쩡히 키보드를 치고 있을 텐데, 안타깝다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[22 weeks]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/lavender/22-weeks/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/lavender/22-weeks/</guid><pubDate>Tue, 17 Dec 2019 01:03:17 GMT</pubDate><content:encoded>&lt;p&gt;라벤더는 아직 아내의 뱃속에 있는 아가의 태명이다.&lt;/p&gt;
&lt;p&gt;뱃속의 아가가 생기고 아내의 배가 조금씩 불러오더니 이제는 임산부구나 싶을 정도로 배가 나왔다.&lt;/p&gt;
&lt;p&gt;어젯밤엔 라벤더가 발차기를 하니까 배에 그 부분이 조금 올라오는 것도 보였다.&lt;/p&gt;
&lt;p&gt;라벤더는 상당히 활발하고 강하다. 발차기를 정말 많이 한다.&lt;/p&gt;
&lt;p&gt;그래서 나는 노래를 불러준다. 열심히 찰 수 있도록.&lt;/p&gt;
&lt;p&gt;나중에 나왔는데 정말 강한 아이면 어떡하지. 조금 걱정되기도 한다.&lt;/p&gt;
&lt;p&gt;하지만 나도 같이 울고 웃으면서 아가랑 동화될 생각이다.&lt;/p&gt;
&lt;p&gt;그래서 누가 더 강한지 겨뤄봐야지&lt;/p&gt;</content:encoded></item><item><title><![CDATA[가족]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/essay/family/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/essay/family/</guid><pubDate>Wed, 20 Nov 2019 10:14:11 GMT</pubDate><content:encoded>&lt;p&gt;퇴근하고 집에 왔다.&lt;/p&gt;
&lt;p&gt;현관문 앞에 서니 집에 불이 켜져 있다. 아내는 운동하러 간다고 했다. 그럼 불은 켜놓고 간 게다.&lt;/p&gt;
&lt;p&gt;문득 집에 누군가 있을 거라는 기대, 그 감정에 대해 생각했다. 이 집에 나의 아내가 있고, 나중에 아이가 생길 것이다. 그럼 이 집은 그저 집이 아니라, 우리집인 거겠지. 예전엔 내가 머무는 곳에 크게 의미가 있다고 생각한 적이 없다. 그런데 지금은 알지 못할 무언가가 느껴진다.&lt;/p&gt;
&lt;p&gt;‘어쩌면 이 집에 오는 게 더욱 행복한 일이 되지 않을까?’&lt;/p&gt;
&lt;p&gt;그 생각과 동시에 아빠 생각이 났다. 아빠도 그랬을까? 내가 아기일 때부터 커가면서 아빠는 일하고 집에 돌아왔겠지. 그 때 아빠의 기분은 어땠을까?&lt;/p&gt;
&lt;p&gt;아마도, 낮에 일을 하느라 정말 힘들었어도, 집에 오는 건 큰 기쁨이 아니었을까? 아빠는 항상 퇴근하고 집에 돌아오면 아들들과 포옹을 했다. 아빠에겐 그게 행복이었을 것이다.&lt;/p&gt;
&lt;p&gt;그리고 나도 그럴 것이다. 집에 돌아와 아내와 포옹한다. 나중에 아이가 생기면 아이에게 인사할 것이다. 아빠가 왔다고. 그리고 아이가 커가면 아이와도 포옹할 것이다. 그러면 정말 기쁘겠지?&lt;/p&gt;
&lt;p&gt;아직 아이가 나오지도 않았고 그게 어떤 기분인지 직접적으로 느끼지 못했지만, 가족이 생긴다는 건 진심으로 행복한 일인 것 같다. 그게 얼마나 행복한 일인지 모르는 사람이 조금 불쌍하게 느껴질 정도로.&lt;/p&gt;
&lt;p&gt;내가 나의 아내를 만난 게 정말 큰 행운이고, 앞으로 태어날 아이들을 만나는 일 또한 큰 행운일 것이다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Summary about Bing Ads API]]></title><description><![CDATA[Bing Ads는 옛날 명칭이며 지금은 Microsoft Advertising 이다. Bing Ads…]]></description><link>https://ohseunghyeon.github.io/study/summary-about-bing-ads-api/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/study/summary-about-bing-ads-api/</guid><pubDate>Thu, 14 Nov 2019 01:04:08 GMT</pubDate><content:encoded>&lt;p&gt;Bing Ads는 옛날 명칭이며 지금은 Microsoft Advertising 이다.&lt;/p&gt;
&lt;h2 id=&quot;bing-ads-개괄&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#bing-ads-%EA%B0%9C%EA%B4%84&quot; aria-label=&quot;bing ads 개괄 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Bing Ads 개괄&lt;/h2&gt;
&lt;h3 id=&quot;어떻게-동작하는가&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%99%EC%9E%91%ED%95%98%EB%8A%94%EA%B0%80&quot; aria-label=&quot;어떻게 동작하는가 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;어떻게 동작하는가&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;유저가 어떤 키워드로 검색&lt;/li&gt;
&lt;li&gt;해당 키워드가 광고와 매치되면, 광고가 검색 결과의 상단 혹은 옆에 나타남&lt;/li&gt;
&lt;li&gt;유저가 광고를 클릭하여 전화를 걸거나, 웹사이트에 방문하거나, 매장으로 찾아감&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id=&quot;ms-advertising이-광고될-수-있는-범위&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#ms-advertising%EC%9D%B4-%EA%B4%91%EA%B3%A0%EB%90%A0-%EC%88%98-%EC%9E%88%EB%8A%94-%EB%B2%94%EC%9C%84&quot; aria-label=&quot;ms advertising이 광고될 수 있는 범위 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;MS Advertising이 광고될 수 있는 범위&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;빙은 미국에서 데스크탑 검색의 36.2퍼센트를 차지한다.&lt;/li&gt;
&lt;li&gt;매달 전 세계에서 112억 건의 검색이 발생 (데스크탑 기준).&lt;/li&gt;
&lt;li&gt;구글이 도달하지 못하는 494억의 검색에 도달할 수 있다.&lt;/li&gt;
&lt;li&gt;Microsoft Search Network에서만 가능한 검색 중 27퍼센트에서 광고 클릭이 발생&lt;/li&gt;
&lt;li&gt;미국에서는 1억 1600만 명이 Microsoft Search Network만 사용한다. (데스크탑)&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;microsoft-search-network란&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#microsoft-search-network%EB%9E%80&quot; aria-label=&quot;microsoft search network란 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Microsoft Search Network란&lt;/h3&gt;
&lt;p&gt;빙, 파트너 사이트, 윈도우 10, 코타나, 오피스, 써드파티 플랫폼, 파트너쉽 등을 아우르는 말&lt;/p&gt;
&lt;h3 id=&quot;광고가-나타나는-곳은&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EA%B4%91%EA%B3%A0%EA%B0%80-%EB%82%98%ED%83%80%EB%82%98%EB%8A%94-%EA%B3%B3%EC%9D%80&quot; aria-label=&quot;광고가 나타나는 곳은 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;광고가 나타나는 곳은?&lt;/h3&gt;
&lt;p&gt;빙, 야후, MSN 검색 결과&lt;/p&gt;
&lt;h3 id=&quot;광고가-나타나는-위치는-어떻게-정해질까&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EA%B4%91%EA%B3%A0%EA%B0%80-%EB%82%98%ED%83%80%EB%82%98%EB%8A%94-%EC%9C%84%EC%B9%98%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%A0%95%ED%95%B4%EC%A7%88%EA%B9%8C&quot; aria-label=&quot;광고가 나타나는 위치는 어떻게 정해질까 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;광고가 나타나는 위치는 어떻게 정해질까?&lt;/h3&gt;
&lt;p&gt;Microsoft Advertising은 pay-per-click(PPC) 광고 시스템을 가지고 있다. 기본적으로 bidding(입찰) 방식으로 광고의 위치가 결정된다. 즉, ‘신발’이라는 키워드에 광고를 달고 싶을 경우 이 키워드로 광고를 하는 다른 광고자가 입찰한 금액과 내 입찰 금액이 비교되어 위치가 결정된다.&lt;/p&gt;
&lt;p&gt;다음은 광고의 위치가 결정되는 매커니즘이다.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;검색 키워드가 당신의 광고와 얼마나 관련성이 있는지&lt;/li&gt;
&lt;li&gt;당신의 입찰가가 다른 입찰가와 비교하여 어떤지 (많은지를 얘기하는 것 같다. 그러나 사이트에 많을 수록 좋은 위치에 나온다는 얘기는 없다.)&lt;/li&gt;
&lt;li&gt;당신의 광고가 과거에 얼마나 영향력이 있었는지, 얼마나 많이 클릭되었는지&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;광고가 이 매커니즘을 잘 만족할수록 상위 위치에 광고가 된다.&lt;/p&gt;
&lt;h3 id=&quot;microsoft-advertising으로-더-많은-사람-끌어모으기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#microsoft-advertising%EC%9C%BC%EB%A1%9C-%EB%8D%94-%EB%A7%8E%EC%9D%80-%EC%82%AC%EB%9E%8C-%EB%81%8C%EC%96%B4%EB%AA%A8%EC%9C%BC%EA%B8%B0&quot; aria-label=&quot;microsoft advertising으로 더 많은 사람 끌어모으기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Microsoft Advertising으로 더 많은 사람 끌어모으기&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;예산과 입찰가를 전략적으로 살펴라. 만약 광고가 계속 정지된다면, 예산 한도가 너무 낮게 설정된 것이다. 경쟁적인 입찰가가 광고를 좋은 위치에 머물게 하고, 이에 사람들이 더 많이 보고, 클릭한다.&lt;/li&gt;
&lt;li&gt;장소나, 기기(컴퓨터, 모바일, 태블릿)의 타겟을 확장해라.&lt;/li&gt;
&lt;li&gt;네 광고와 웹사이트가 입찰하려는 키워드와 관련이 있는지 확인해라.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://ads.microsoft.com/?signout=true&amp;#x26;ccuisrc=4&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;출처&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;overview&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#overview&quot; aria-label=&quot;overview permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Overview&lt;/h2&gt;
&lt;h3 id=&quot;bing-ads-api를-누가-써야할까&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#bing-ads-api%EB%A5%BC-%EB%88%84%EA%B0%80-%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C&quot; aria-label=&quot;bing ads api를 누가 써야할까 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Bing Ads API를 누가 써야할까&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;당신이 광고 매니저인데, 당신의 내부 재고 관리나 전환 추적 시스템과 결합하고 싶어서&lt;/li&gt;
&lt;li&gt;광고 관리 솔루션을 개발하고 싶어서&lt;/li&gt;
&lt;li&gt;광고 에이전시인데, 여러 광고주를 위해 광고 캠패인을 관리하고 싶어서&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;광고가-어디에-나올까&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EA%B4%91%EA%B3%A0%EA%B0%80-%EC%96%B4%EB%94%94%EC%97%90-%EB%82%98%EC%98%AC%EA%B9%8C&quot; aria-label=&quot;광고가 어디에 나올까 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;광고가 어디에 나올까&lt;/h3&gt;
&lt;p&gt;빙, AOL, 야후나 야후의 검색엔진을 사용하는 사이트의 검색 결과 페이지. 광고의 키워드와 검색 키워드에 따라서 나옴.&lt;/p&gt;
&lt;h3 id=&quot;광고를-풍성하게-하는-법&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EA%B4%91%EA%B3%A0%EB%A5%BC-%ED%92%8D%EC%84%B1%ED%95%98%EA%B2%8C-%ED%95%98%EB%8A%94-%EB%B2%95&quot; aria-label=&quot;광고를 풍성하게 하는 법 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;광고를 풍성하게 하는 법&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://docs.microsoft.com/en-us/advertising/guides/ad-extensions?view=bingads-13&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Ad Extensions&lt;/a&gt;를 사용해라. Ad Extensions는 전화, 이미지, 장소, 가격, 리뷰 등 다양하다.&lt;/p&gt;
&lt;p&gt;Microsoft Shopping Campaigns도 있다. 이는 Microsoft Merchant Center Store에 너의 상품을 등록할 수 있게 해준다. Microsoft Shopping Campaigns의 product ads는 상품에 대한 디테일, 이미지, 선택적인 홍보성 문구를 포함할 수 있다. product catalog를 만들 후에, 이를 Microsoft Advertising Content API나 FTP로 제출할 수 있다. For more Information, please see &lt;a href=&quot;https://docs.microsoft.com/en-us/advertising/guides/product-ads?view=bingads-13&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Product Ads&lt;/a&gt;&lt;/p&gt;
&lt;h3 id=&quot;타겟이-되는-사람에게-광고를-보여주기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%ED%83%80%EA%B2%9F%EC%9D%B4-%EB%90%98%EB%8A%94-%EC%82%AC%EB%9E%8C%EC%97%90%EA%B2%8C-%EA%B4%91%EA%B3%A0%EB%A5%BC-%EB%B3%B4%EC%97%AC%EC%A3%BC%EA%B8%B0&quot; aria-label=&quot;타겟이 되는 사람에게 광고를 보여주기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;타겟이 되는 사람에게 광고를 보여주기&lt;/h3&gt;
&lt;p&gt;데스크탑과 모바일 중 어떤 것에 치중해서 보여줄지, 어떤 반경으로 장소를 설정해 보여줄지, 나이, 성별, 특정 날짜 또는 주에 보여줄지 설정할 수 있다.&lt;/p&gt;
&lt;h3 id=&quot;캠패인-최적화하기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%BA%A0%ED%8C%A8%EC%9D%B8-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EA%B8%B0&quot; aria-label=&quot;캠패인 최적화하기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;캠패인 최적화하기&lt;/h3&gt;
&lt;p&gt;Bing Ads API &lt;a href=&quot;https://docs.microsoft.com/en-us/advertising/ad-insight-service/ad-insight-service-reference?view=bingads-13&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Ad Insight&lt;/a&gt; 서비스는 historical performance, 웹 페이지 데이터, 인구학적 데이터를 제공하고, 입찰가를 추천해준다.&lt;/p&gt;
&lt;h2 id=&quot;frequently-asked-questions&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#frequently-asked-questions&quot; aria-label=&quot;frequently asked questions permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Frequently Asked Questions&lt;/h2&gt;
&lt;h3 id=&quot;get-started&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#get-started&quot; aria-label=&quot;get started permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Get Started&lt;/h3&gt;
&lt;p&gt;Q. Bing Ads API 쓰려면 뭐가 필요하죠?&lt;/p&gt;
&lt;p&gt;Microsoft Advertising 계정을 생성하고, 당신의 developer token을 Developer Portal의 Account Tab에서 획득하세요.&lt;/p&gt;
&lt;p&gt;Q. SDK가 지원되는 언어는?&lt;/p&gt;
&lt;p&gt;.NET, Java, PHP, Python&lt;/p&gt;
&lt;p&gt;다른 언어는 지원할 계획 없다.&lt;/p&gt;
&lt;p&gt;Q. API version은 뭘 써야하죠?&lt;/p&gt;
&lt;p&gt;늘 최신 버전을 쓰세요.&lt;/p&gt;
&lt;h3 id=&quot;feature-availability&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#feature-availability&quot; aria-label=&quot;feature availability permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Feature Availability&lt;/h3&gt;
&lt;p&gt;Q. Bulk나 Campaign Management API 중 뭐를 써야 하나요?&lt;/p&gt;
&lt;p&gt;Bulk가 추천됨. 여러 개의 Ads를 생성하거나 업데이트할 때 좋다. Bulk에 없는 API는 Campaign Management API를 써라.&lt;/p&gt;
&lt;p&gt;Q. 어떤 API performance reports가 가능하고, 언제 내 데이터를 볼 수 있나요?&lt;/p&gt;
&lt;p&gt;모두 가능해요.&lt;/p&gt;
&lt;p&gt;데이터는 유저가 광고를 클릭하고 최대 2시간(컨버전은 3시간) 걸리고 reporting이 가능해져요.&lt;/p&gt;
&lt;h3 id=&quot;oauth&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#oauth&quot; aria-label=&quot;oauth permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;OAuth&lt;/h3&gt;
&lt;p&gt;Q. 사용자의 인터렉션이 없는 애플리케이션을 운영하고 싶은데요. Microsoft Advertising credentials를 사용하기 위한 허가를 얻는 절차 없이 어떻게 인증할 수 있죠?&lt;/p&gt;
&lt;p&gt;그렇게 하기 위해서는 최소한 한 번은 웹 앱을 통해서 동의를 얻는 절차를 거쳐야 합니다. 반복되거나 장기적인 인증을 위해서는 &lt;a href=&quot;https://docs.microsoft.com/en-us/advertising/guides/authentication-oauth&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;authorization code grant flow&lt;/a&gt;를 따라 access token과 refresh token을 얻으세요. 그리고 가장 최신의 refresh token으로 새로운 access token과 refresh token을 얻을 수 있습니다. 만약 Microsoft Account의 주인이 계정 복구, 비밀번호 변경 또는 앱의 권한 삭제를 실시한 경우 다시 요청해야 합니다.&lt;/p&gt;
&lt;h2 id=&quot;파이썬으로-bing-ads-api-사용하기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%ED%8C%8C%EC%9D%B4%EC%8D%AC%EC%9C%BC%EB%A1%9C-bing-ads-api-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0&quot; aria-label=&quot;파이썬으로 bing ads api 사용하기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;파이썬으로 Bing Ads API 사용하기&lt;/h2&gt;
&lt;p&gt;Bing Ads API의 인증은 &lt;a href=&quot;https://tools.ietf.org/html/rfc6749&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;OAuth 2.0&lt;/a&gt; 방식으로 이뤄진다. 즉, Microsoft의 계정을 사용하여 Asure에서 생성한 App에게 제한된 권한을 준다. 그럼 앱이 권한을 받았다는 뜻으로 refresh token이 생성된다. 이 refresh token을 잃어버리면 권한을 잃어버린 것과 같다.&lt;/p&gt;
&lt;p&gt;파이썬 SDK의 code example에서는 자동으로 해당 토큰을 파일로 저장한다. 그럼 이 토큰을 바탕으로 SDK의 각종 서비스를 생성하여 사용하면 된다. 나의 경우 account, campaign, ad group, ads를 생성, 수정, 삭제하기 위해 SDK를 사용하였으며, 대부분의 유스케이스가 비슷할 것이다.&lt;/p&gt;
&lt;p&gt;… 계속&lt;/p&gt;
&lt;!-- 아래는 각 

### Authentication

```python

```

### Account

### Campaign

### Ad group

### Budget and Bid Strategies

Ads가 돌아가게 하기 위해서는 Campaign에 예산이 필요하다. 또한 입찰 전략(Bid Strategies)을 설정해야 하고, 선택적으로 keyword에도 설정할 수 있다.

#### Budget Types

예산(Budget)은 campaign에 사용할 돈을 말한다. 캠패인에 daily budget을 설정할 수 있는데, 예산에 도달하면 해당 월의 마지막 날까지 광고가 일시적으로 중지된다. 예산은 목표치다. 실제로 사용되는 광고비는 예산보다 높거나 낮을 수 있고, 이는 다양한 변수에 의해 발생할 수 있다.

shared budget은 동일한 어카운트 내에서 캠페인마다 daily budget을 설정할 수 있게 해준다.

### Report

#### ReportAggregation

- Summary: 
- Hourly: 0 - 23로 hour가 표현되며, 오후 1시 ~ 오후 2시 사이에 발생한 이벤트의 경우 MM/DD/YYYY 12:00:00 AM|13로 통합되어 하나의 row로 표시. 여러 날짜를 보는 거라면, 각 날짜의 각 시가 하나의 row로 표시된다.
- Daily: 각 날짜로 데이터가 통합
- Weekly: 각 주를 하나의 row로 통합
- Monthly: 각 달을 하나의 row로 통합
- Yearly: 각 년도를 하나의 row로 통합
- HourOfDay: 0 - 23으로 hour를 표현, Hourly와 달리 여러 날짜에 대한 특정 시간대가 한 줄로 표현된다. 
- DayOfWeek: 일요일은 1, 토요일은 7로 해당 기간 동안 특정 요일을 모두 합산하여 보여준다. 특정 기간 동안 일요일이 3 번 있었을 경우 이 3번의 일요일을 하나의 row로 합산하여 표시.
- WeeklyStartingMonday: Weekly와 동일하지만 시작 날짜가 월요일이고 끝 날짜가 일요일이다.

--&gt;</content:encoded></item><item><title><![CDATA[고집, 아집]]></title><description><![CDATA[1…]]></description><link>https://ohseunghyeon.github.io/essay/stubborn/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/essay/stubborn/</guid><pubDate>Thu, 31 Oct 2019 03:53:14 GMT</pubDate><content:encoded>&lt;h2 id=&quot;10&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#10&quot; aria-label=&quot;10 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;10&lt;/h2&gt;
&lt;p&gt;어릴 적에 줄곧 생각하던 게 있다.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;결코 아집에 빠지지 말자. 그런 어른이 되지 말자.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;어른들을 보며 그런 생각을 했다. 왜 계속 해온 방식을 유지하려고 할까. 더 효율적인 방법도 있는데. 나는 효율을 중요시했고, 관례를 무시했다. 그런 건 필요 없다고 생각하면서.&lt;/p&gt;
&lt;p&gt;그런 관례를 유지하는 걸 아집이라 여겼다. 동시에, 나는 그런 관례를 다 깨부수고 아집이 없는 사람이 되어야지 생각했다.&lt;/p&gt;
&lt;p&gt;하지만 그걸 유지하는 게 아집일까?&lt;/p&gt;
&lt;p&gt;아직은 모르겠다. 나는 여전히 효율적인 게 좋다.&lt;/p&gt;
&lt;h2 id=&quot;20&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#20&quot; aria-label=&quot;20 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;20&lt;/h2&gt;
&lt;p&gt;20대를 겪으며 생각이 조금 바뀌었다.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;나이가 들면 옳다고 여기는 게 생길 수 밖에 없다.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;나&lt;/strong&gt;라는 정체성에 대해 자주 고민한다. 어떤 사람이 되고 싶은 걸까?&lt;/p&gt;
&lt;p&gt;이런 시간이 쌓인 나이기에, 나에게 나는 소중하다.&lt;/p&gt;
&lt;p&gt;그리고 결국엔 나를 지키기 위해 내가 아닌 걸 배척하게 된다. 이는 자연스러운 일이겠지. 괜찮아.&lt;/p&gt;
&lt;h2 id=&quot;30&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#30&quot; aria-label=&quot;30 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;30&lt;/h2&gt;
&lt;p&gt;요즘들어 드는 생각은, 내가 아집덩어리라는 거다.&lt;/p&gt;
&lt;p&gt;취사선택을 자연스러운 것이었다. 지금의 나는 내가 생각하는 기준들로 가득한 사람이 되었다.&lt;/p&gt;
&lt;p&gt;하나하나 좋은 기준들로 가득 채우면 그게 아집이 아닐 거라고 생각했다. 그 기준도 내 기준이고, 채워진 것도 내 기준인데 말이다.&lt;/p&gt;
&lt;p&gt;내가 세운 아집은, 내가 하는 게 아집이 아닐 거라는 아집이었다.&lt;/p&gt;
&lt;p&gt;나는 결국 아집들과 싸우는 아집이었나 보다.&lt;/p&gt;
&lt;p&gt;아이러니하다.&lt;/p&gt;
&lt;h2 id=&quot;내로남불&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%82%B4%EB%A1%9C%EB%82%A8%EB%B6%88&quot; aria-label=&quot;내로남불 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;내로남불&lt;/h2&gt;
&lt;p&gt;남이 하면 아집, 내가 하면 고집일까&lt;/p&gt;
&lt;p&gt;글쎄.&lt;/p&gt;
&lt;p&gt;아집과 고집은 말장난일지도 모른다.&lt;/p&gt;
&lt;p&gt;어차피 모든 사람은 각자의 아집을 갖고 살아간다.&lt;/p&gt;
&lt;p&gt;웃기다.&lt;/p&gt;
&lt;p&gt;아집을 싫어했는데, 내가 아집덩어리임을 알고서는, 아집을 보편화하다니.&lt;/p&gt;
&lt;p&gt;그래. 저런 추상적인 단어에 얽매이지 않게 된 거겠지.&lt;/p&gt;
&lt;p&gt;내겐 여전히 내가 옳다고 여기는 것들이 많다.&lt;/p&gt;
&lt;p&gt;그냥 다들 스스로 옳다고 여기는 것들이 있을 뿐이다.&lt;/p&gt;
&lt;h2 id=&quot;태도&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%ED%83%9C%EB%8F%84&quot; aria-label=&quot;태도 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;태도&lt;/h2&gt;
&lt;p&gt;아집의 문제점은 이를 얼마나 표출하느냐에 달린 것 같다.&lt;/p&gt;
&lt;p&gt;받아들이지 못하는 아집&lt;/p&gt;
&lt;p&gt;듣지 않는 아집&lt;/p&gt;
&lt;p&gt;무시하는 아집&lt;/p&gt;
&lt;p&gt;이 모든 게 싫다.&lt;/p&gt;
&lt;p&gt;나는 나와 달라도 듣는다.&lt;/p&gt;
&lt;p&gt;받아들인다.&lt;/p&gt;
&lt;p&gt;무시하지 않는다.&lt;/p&gt;
&lt;h2 id=&quot;거짓말&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EA%B1%B0%EC%A7%93%EB%A7%90&quot; aria-label=&quot;거짓말 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;거짓말&lt;/h2&gt;
&lt;p&gt;그래. 거짓말이다.&lt;/p&gt;
&lt;p&gt;나는 받아들이지 않는다.&lt;/p&gt;
&lt;p&gt;그러는 척 할 뿐이다.&lt;/p&gt;
&lt;p&gt;나는 받아들일 수 없다.&lt;/p&gt;
&lt;p&gt;틀린 건 틀린 거다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[[번역] Caching in react]]></title><description><![CDATA[원글: Caching in React Cashing 캐싱은 서버의 성능 향상을 위한 강력한 도구이다. 나는 edge caching, in-memory caching 그리고 persisted caching(Redis와 같이 NoSQL DB…]]></description><link>https://ohseunghyeon.github.io/study/caching-in-react/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/study/caching-in-react/</guid><pubDate>Mon, 28 Oct 2019 05:24:01 GMT</pubDate><content:encoded>&lt;p&gt;원글: &lt;a href=&quot;https://freecontent.manning.com/caching-in-react/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Caching in React&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;cashing&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#cashing&quot; aria-label=&quot;cashing permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Cashing&lt;/h2&gt;
&lt;p&gt;캐싱은 서버의 성능 향상을 위한 강력한 도구이다. 나는 edge caching, in-memory caching 그리고 persisted caching(Redis와 같이 NoSQL DB에 저장) 등 여러 형태의 캐싱을 사용해왔다. 각각의 전략은 tradeoffs가 있으니 이런 점들을 잘 이해하고 당신의 유즈케이스에 맞는 전략을 선택해야 한다.&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;SEO&lt;/th&gt;
&lt;th&gt;User Sessions&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;In memory&lt;/td&gt;
&lt;td&gt;√&lt;/td&gt;
&lt;td&gt;√&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Persisted storage&lt;/td&gt;
&lt;td&gt;√&lt;/td&gt;
&lt;td&gt;(higher overhead, but possible)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Edge caching&lt;/td&gt;
&lt;td&gt;√&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;center&gt;Table 1 Comparing caching options.&lt;/center&gt;
&lt;h2 id=&quot;cashing-on-the-server-in-memory-caching&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#cashing-on-the-server-in-memory-caching&quot; aria-label=&quot;cashing on the server in memory caching permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Cashing on the server: In-memory caching&lt;/h2&gt;
&lt;p&gt;가장 쉬운(가장 naive 한) 방법은 메모리에 직접 컴포넌츠를 저장하는 것이다. 간단한 앱의 경우 기본적인 LRU 캐싱(size-limitied)과 렌더링된 컴포넌츠를 직렬화하는 방법으로 구현할 수 있다. Figure 1은 in-memory 캐시를 사용하는 타임라인을 나타낸다. 첫 번째 유저는 완전히 렌더된 페이지(조금 더 느린)를 얻는다. 그리고 이 페이지는 in-memory 캐시에 저장된다. 그 이후의 유저들은 캐시된 페이지를 얻는다.(캐시가 가득차서 해당 페이지가 캐시에서 밀려나기 전까지)&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://freecontent.manning.com/wp-content/uploads/Gordon_CiR_01.png&quot; alt=&quot;Figure 1 In-memory caching allows some requests to benefit from faster response times.&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;center&gt;Figure 1 In-memory 캐싱은 어떤 요청이 더 빠른 응답 속도를 갖게 한다&lt;/center&gt;&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Listing 1은 간단한 캐싱 모듈을 구현하고 있다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;Listing &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; Add an &lt;span class=&quot;token constant&quot;&gt;LRU&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;in&lt;/span&gt; memory cache – src&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;shared&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;cache&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;es6&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; lru &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;lru-cache&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;                                    ❶
  
 &lt;span class=&quot;token comment&quot;&gt;// maxAge is in ms&lt;/span&gt;
 &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; cache &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;lru&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;                                            ❷
   maxAge&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;300000&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;                                              ❸
   max&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;500000000000&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;                                           ❹
   &lt;span class=&quot;token function-variable function&quot;&gt;length&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;n&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;                                             ❺
     &lt;span class=&quot;token comment&quot;&gt;// n = item passed in to be saved (value)&lt;/span&gt;
     &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; n&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;length &lt;span class=&quot;token operator&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;100&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
   &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  
 &lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;set&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;key&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; value&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;                           ❻
   cache&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;set&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;key&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; value&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  
 &lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;get&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;key&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;                                  ❼
   &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; cache&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;get&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;key&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  
 &lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   get&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
   set
 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;LRU 캐시를 Import&lt;/li&gt;
&lt;li&gt;LRU 캐시 생성&lt;/li&gt;
&lt;li&gt;maxAge는 시간에 기반하여 캐시에 저장된 값의 만기를 설정한다.&lt;/li&gt;
&lt;li&gt;max는 캐시에 저장된 모든 아이템의 총 길이이다.&lt;/li&gt;
&lt;li&gt;length는 각 아이템이 가질 수 있는 최대 길이이다.&lt;/li&gt;
&lt;li&gt;cache에 키/밸류를 set할 수 있는 public set 메서드이다.&lt;/li&gt;
&lt;li&gt;cache로부터 키에 기반하여 값을 가져올 수 있는 public get 메서드이다.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Listing 2는 캐싱 모듈을 renderView.jsx에서 사용한 모습이다. 캐싱 로직이나 스티리밍 로직 중 하나를 사용할 것을 권장하며, 둘을 동시에 사용하지는 마라. 캐시와 스트림을 원한다면, 이 글에 나온 것과는 다른 스트리밍 구현이 필요할 것이다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;Listing &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; Save and fetch cached pages – src&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;middleware&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;renderView&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;jsx&lt;/span&gt;
 &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; cachedPage &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; cache&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;get&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;req&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;url&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;                         ❶
 &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;cachedPage&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;                                              ❷
   &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; res&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;send&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;cachedPage&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;                                 ❷
 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  
 &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; store &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;initRedux&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
 &lt;span class=&quot;token comment&quot;&gt;//...more code&lt;/span&gt;
 Promise&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;all&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;promises&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;then&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token comment&quot;&gt;//...more code&lt;/span&gt;
   cache&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;set&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;req&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;url&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&amp;lt;!DOCTYPE html&gt;&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;html&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;                ❸
   &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; res&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;send&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&amp;lt;!DOCTYPE html&gt;&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;html&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;캐시로부터 값을 가져올 수 있나 보자.&lt;/li&gt;
&lt;li&gt;값이 있다면 이를 응답으로 사용하자.&lt;/li&gt;
&lt;li&gt;만약 렌더링이 필요하다면, 렌더링의 결과를 응답하기 전에 캐시에 저장하자.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;이 방법은 작동한다. 그러나 몇가지 문제가 있다.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;이 방법은 너무 간단하다. 만약 유즈케이스가 더 복잡해지거나, 사용자들을 더하기 시작하거나(역자: 이해 못함), 여러 언어를 지원해야 하거나, 엄청나게 많은 페이지가 있다면 어떻게 될까? 이 방법은 그런 유즈케이스를 잘 감당할만큼 확장될 수 없다.&lt;/li&gt;
&lt;li&gt;메모리에 쓰는 것은 Node.js에서 동기적인 작업이다. 즉 캐시를 사용함으로써 성능을 최적화하려 하는데, 하나의 문제점을 해결하는 동시에 다른 문제를 갖게 된다는 것이다.&lt;/li&gt;
&lt;li&gt;마지막으로 서버가 분산화된 스케일링 전략을 갖고 있다면, 캐시는 각각의 서버나 컨테이너(도커를 쓴다면)에만 적용되고 이는 공통의 캐시를 공유할 수 없다는 뜻이다.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;다음으로 레디스를 사용하여 캐싱하는 방법을 살펴볼 것이다. 이는 비동기적이고 논블로킹인 캐싱을 하게 해준다. 우리는 그리고 더욱 똑똑한 캐싱의 구현을 살펴볼 것인데, 각각의 컴포넌츠를 캐싱하여 더 복잡한 어플리케이션을 위한 스케일링에 용이한 방법이다.&lt;/p&gt;
&lt;h2 id=&quot;caching-on-the-server-persisted-storage&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#caching-on-the-server-persisted-storage&quot; aria-label=&quot;caching on the server persisted storage permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Caching on the server: Persisted Storage&lt;/h2&gt;
&lt;p&gt;내가 첫 번째로 작업했던 isomorphic 리액트 앱은 리덕스나 리액트 라우터가(community best-choice libraries) 안정화되기 전에 작성됐다. 그래서 우리는 많은 코드들을 home-roll하기로 결심했다.(역자: home-roll 이해 못함) 이런 결심과 서버상에서 느린 리액트로 인해, 우리는 서버 렌더를 더 빠르게 할 솔루션이 필요했다.&lt;/p&gt;
&lt;p&gt;우리는 레디스에 스트링 저장소를 구현하여 모든 페이지 스트링으로 저장할 수 있게 했다. 레디스에 모든 페이지를 저장하는 건 더 큰 사이트에 대해서 중요한 트레이드오프를 가지고 있다. 우리는 수백만의 다른 진입점들을 레디스에 저장할 수 있었고, 모두 스트링화 된 HTML 페이지들은 상당히 빠른 속도로 추가되어 공간을 꽤나 차지했다.&lt;/p&gt;
&lt;p&gt;고맙게도, 커뮤니티가 이보다 향상된 방법을 생각해냈다. Walmart Labs는 &lt;a href=&quot;https://github.com/electrode-io/electrode-react-ssr-caching&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;electrode-react-ssr-caching&lt;/a&gt;라는 서버 사이드 렌더링의 캐싱을 사용하기 쉬운 라이브러리를 내놓았다. 이 라이브러리는 두 가지 이유로 인해 강력하다.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;이 라이브러리는 profiler를 갖고 있어서 서버상에서 어떤 컴포넌트가 가장 비싼지 알려줌으로써, 당신이 필요로하는 컴포넌츠만 캐시할 수 있게 해준다.&lt;/li&gt;
&lt;li&gt;이 라이브러리는 렌더링 된 컴포넌츠를 캐시하기 위해서 컴포넌츠를 템플릿화 하여 이후에 props를 넣을 수 있게 해준다.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;우리는 장기적인 측면을 봤을 때, 페이지들의 숫자와 이 페이지들이 100% public-facing content라는 점으로 인해서, edge 캐싱 전략으로 옮겨가게 되었다. 당신의 유즈케이스는 Walmart Labs의 접근법에서 이점을 찾을 수도 있다.&lt;/p&gt;
&lt;h2 id=&quot;cdnedge-strategies&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#cdnedge-strategies&quot; aria-label=&quot;cdnedge strategies permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;CDN/Edge strategies&lt;/h2&gt;
&lt;p&gt;Edge caching은 우리가 현재 직장에서 isomorphic 리액트 앱을 위해 사용하는 방법이다. 이는 (CMS 도구에서와 같이, 시스템 상에서 어떤 시점에 변화가 생길 때) 필요에 따라 컨텐츠가 만기되게 만드는 방법이 필요하기 때문이다. Fastly와 같은 현대의 CDN들은 이런 능력을 바로 사용할 수 있게끔 제공하며 이는 TTL(time to live)를 더 쉽게 관리할 수 있고 웹 페이지가 만기되게(expire) 해준다. Figure 2는 이런 작동 방식을 설명한다.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://freecontent.manning.com/wp-content/uploads/Gordon_CiR_02.png&quot; alt=&quot;Figure 2 Adding an edge server moves the caching in front of the server.&quot;&gt;
&lt;em&gt;&lt;center&gt;Figure 2 edge server는 캐싱이 서버의 앞단에 위치하게 한다.&lt;/center&gt;&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;이걸 구현하는 방법은 이 글의 범위를 벗어난다. 만약에 당신이 SEO(ecommerce, video sites, blogs, etc)가 필요한 public-facing content를 가지고 있다면, 당연히 CDN을 기술 스택에 넣고 싶어할 것이다.&lt;/p&gt;
&lt;p&gt;이 방법에 대해 하나 경고할 게 있다면, 유저의 세션 관리를 복잡하게 만든다는 점이다. 다음 섹션은 유저 세션에 대해 살펴보고 다양한 캐싱 전략들이 가진 트레이드오프들을 다룰 것이다.&lt;/p&gt;
&lt;h2 id=&quot;user-session-management&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#user-session-management&quot; aria-label=&quot;user session management permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;User Session Management&lt;/h2&gt;
&lt;p&gt;최근의 웹 어플리케이션들은 거의 다 브라우저에서 쿠키를 사용한다. 심지어 당신의 메인 프로덕트가 쿠키를 직접적으로 사용하는 게 아니더라도 당신이 사이트 상에서 사용하는 광고, 트래킹, 다른 써드파티 도구가 쿠키의 이점을 얻고 있을 것이다. 쿠키는 웹앱에게 같은 사람이 매번 오는 것을 알게 해준다. Figure 3은 이를 설명한다.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://freecontent.manning.com/wp-content/uploads/Gordon_CiR_03.png&quot; alt=&quot;Figure 3 Repeat visits by the same user on the server. Saving cookies lets you store information about the user that can be retrieved during future sessions.&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;center&gt;Figure 3 서버에 한 유저가 반복적으로 방문. 쿠키를 저장하여 그 유저에 대한 정보를 저장하여 미래에 이를 참조할 수 있다.&lt;/center&gt;&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Listing 3은 브라우저와 서버 양측의 쿠키를 파싱하는 모듈의 예이다. universal cookie를 사용하여 두 환경(client and server)에서의 쿠키 관리를 용이하게 한다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;bash&quot;&gt;&lt;pre class=&quot;language-bash&quot;&gt;&lt;code class=&quot;language-bash&quot;&gt;$ &lt;span class=&quot;token function&quot;&gt;npm&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;install&lt;/span&gt; --save universal-cookie&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;Listing &lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt; Using Isomorphic Cookie Module – src&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;shared&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;cookies&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;es6&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; Cookie &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;universal-cookie&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;                          ❶
  
 &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;initCookie&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;reqHeaders&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; cookies&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
   &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;process&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;env&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;BROWSER&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;                                   ❷
     cookies &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Cookie&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
   &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;reqHeaders&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;cookie&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
     cookies &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Cookie&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;reqHeaders&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;cookie&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;                   ❸
   &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
   &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; cookies&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  
 &lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;get&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;name&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; reqHeaders &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; cookies &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;initCookie&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;reqHeaders&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;                      ❹
   &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;cookies&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
     &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; cookies&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;get&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;                                  ❺
   &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  
 &lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;set&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;name&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; value&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; opts&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; reqHeaders &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; cookies &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;initCookie&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;reqHeaders&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;                      ❹
   &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;cookies&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
     &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; cookies&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;set&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; value&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; opts&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;                     ❻
   &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  
 &lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   get&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
   set
 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;universal cookie library를 임포트하여, 클라이언트와 서버에서 쿠키를 다루는 법의 차이를 쟤가 알아서 하게 하자.&lt;/li&gt;
&lt;li&gt;reqHeaders가 필요한지 결정하기 위해 환경을 체크하자.&lt;/li&gt;
&lt;li&gt;헤더에 쿠키가 있으면, 쿠키 생성자로 넘기자.&lt;/li&gt;
&lt;li&gt;게터와 세터 함수에서, 쿠키 오브젝트를 init하며 reqHeaders를 넘겨서 서버상에서 이게 작동하는지 확인하자.&lt;/li&gt;
&lt;li&gt;찾은 쿠키를 반환.&lt;/li&gt;
&lt;li&gt;쿠키 세팅의 결과를 반환. name과 value에 추가로 standard cookie options를 넘길 수 있다. 대부분의 경우 브라우저에서 set을 호출할 것이다.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;이제 쿠키를 두 환경에서 get, set할 방법을 추가했다. 이제 당신의 앱에서 이에 지속적으로 접근하기 위해서 app state 상에 이 정보를 저장할 필요가 있다.&lt;/p&gt;
&lt;h2 id=&quot;accessing-cookies-universally&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#accessing-cookies-universally&quot; aria-label=&quot;accessing cookies universally permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Accessing cookies universally&lt;/h2&gt;
&lt;p&gt;action으로 쿠키를 가지고 오게 하여, 당신의 앱이 쿠키과 상호 작용하게 있게끔 할 수 있다. Listing 4는 user id를 저장하고 가져오기 위핸 storeUserId action을 추가하는 방법을 보여준다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;Listing &lt;span class=&quot;token number&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; accessing cookies on the server – src&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;shared&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;app&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;action&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;creators&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;es6&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; UAParser &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;ua-parser-js&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; cookies &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;./cookies.es6&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;                            ❶

&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;PARSE_USER_AGENT&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;PARSE_USER_AGENT&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;STORE_USER_ID&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;STORE_USER_ID&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;                   ❷

&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;parseUserAgent&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;requestHeaders&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;storeUserId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;requestHeaders&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;                   ❸
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; userId &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; cookies&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;get&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;userId&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; requestHeaders&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;         ❹
  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    userId&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;                                                     ❺
    type&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;STORE_USER_ID&lt;/span&gt;                                         ❷
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  parseUserAgent&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  storeUserId
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;쿠키 모듈을 임포트한다.&lt;/li&gt;
&lt;li&gt;새로운 액션을 위한 타입을 추가한다.&lt;/li&gt;
&lt;li&gt;requestHeaders를 받아서 서버에서 작동하는지 확인하는 액션을 추가한다.&lt;/li&gt;
&lt;li&gt;쿠키 이름과 requestHeaders를 쿠키 모듈에 넘긴다.&lt;/li&gt;
&lt;li&gt;액션에 userId 값을 넣는다.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;이제 당신의 어플리케이션에서 userId에 접근할 수 있다. 이는 서버상에서 불러와지고 브라우저에서 필요에 따라 업데이트 될 수 있다. 당신은 이런 컨셉을 어떤 유저 세션 정보에든지 적용할 수 있다. 그러나, 모든 유저 세션을 관리하는 건 이 글의 범위를 벗어난다.&lt;/p&gt;
&lt;h2 id=&quot;edge-caching--users&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#edge-caching--users&quot; aria-label=&quot;edge caching  users permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Edge caching + Users&lt;/h2&gt;
&lt;p&gt;내가 처음 isomorphic 어플리케이션을 만들기 시작했을 때, 유저 관리는 간단해보였다. single-page-application처럼 브라우저상에서 쿠키를 사용해 유저 세션을 추적하는 것이다. 서버를 포함하는 건 이를 복잡하게 만들지만, 쿠키를 서버에서 읽을 수 있다. 당신이 캐싱 전략을 사용함으로써 이것은 좀 덜 straightforward해질 수 있다.&lt;/p&gt;
&lt;p&gt;in-memory와 persisted storage 캐싱 전략은 둘 다 유저 세션에 대해 잘 작동한다. 매 유저 요청이 여전히 서버로 가서 유저의 정보가 수집되기 때문이다. 당신은 유저를 식별하는 정보를 캐시의 키로 사용할 수 있다.&lt;/p&gt;
&lt;p&gt;불행히도, edge caching은 잘 작동하지 않는다. 왜냐면, 각각의 유저들에 대해 당신은 각 유저의 데이터를 담은 유니크한 페이지 사본을 유지해야 하기 때문이다. 만약 그렇지 않으면 유저 2에게 유저 1의 정보를 보여주게 될 수도 있다. 그건 나쁠 것이다. Figure 4는 이런 컨셉에 대해 설명한다.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://freecontent.manning.com/wp-content/uploads/Gordon_CiR_04.png&quot; alt=&quot;Figure 4 When the edge has to cache pages per user, the benefit of overlapping requests is lost.&quot;&gt;
&lt;em&gt;&lt;center&gt;edge가 각 유저의 페이지를 캐시해야 한다면, 같은 페이지라도 다른 페이지이기 때문에 이점을 상실하게 된다.&lt;/center&gt;&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;만약 edge caching이 필요하다면, 당신은 유저의 데이터를 가지고 다음의 전략 중 하나 또는 그 이상을 수용해야 한다. (content type과 traffic patterns에 따라서 다르다.)&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;유저의 컨텐츠를 지닌 페이지나 일반적인 콘텐트(public)의 페이지를 생성해라. 그리고 public 페이지만 edge server에 캐시해라.&lt;/li&gt;
&lt;li&gt;만약 유저가 액티브한 유저 세션 상태라면 edge server에게 캐시된 페이지를 제공할지, 서버에게 요청을 보낼지(pass through) 알릴 수 있는 쿠키를 저장하라.&lt;/li&gt;
&lt;li&gt;placeholder content가 있는 페이지를 제공하라(solid shapes that show where content will load). 그리고 브라우저에서 어떤 컨텐츠를 보여줄지 결정되게 하라.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;이제 당신은 캐싱에 대해 약간 더 알게 되었다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Gatsby 블로그에 Dark mode 적용하기]]></title><description><![CDATA[Dark mode 최근 윈도우나 맥OS, 그리고 내가 사용하는 아이폰의 IOS에도 Dark mode가 도입됐다. Dark mode는 말 그대로 전반적인 인터페이스의 색상이 어둡다. 그래서 어두운 환경에서 눈의 피로를 감소시켜준다. dark mode…]]></description><link>https://ohseunghyeon.github.io/blogging/applying-dark-mode-on-gatsby-blog/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/blogging/applying-dark-mode-on-gatsby-blog/</guid><pubDate>Mon, 14 Oct 2019 11:40:40 GMT</pubDate><content:encoded>&lt;h2 id=&quot;dark-mode&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#dark-mode&quot; aria-label=&quot;dark mode permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Dark mode&lt;/h2&gt;
&lt;p&gt;최근 윈도우나 맥OS, 그리고 내가 사용하는 아이폰의 IOS에도 Dark mode가 도입됐다. Dark mode는 말 그대로 전반적인 인터페이스의 색상이 어둡다. 그래서 어두운 환경에서 눈의 피로를 감소시켜준다.&lt;/p&gt;
&lt;h2 id=&quot;dark-mode-in-css&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#dark-mode-in-css&quot; aria-label=&quot;dark mode in css permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;dark mode in CSS&lt;/h2&gt;
&lt;p&gt;CSS에도 dark mode에 대응하기 위한 기능이 추가되었는데, &lt;code class=&quot;language-text&quot;&gt;prefers-color-scheme&lt;/code&gt;이라는 media query이다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;css&quot;&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;prefers-color-scheme&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; dark&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;

&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;이 쿼리를 사용하면 dark mode가 설정된 os와 아닌 os에서의 css 결과가 달라질 것이다.&lt;/p&gt;
&lt;p&gt;아래와 같은 경우 dark mode인 경우 배경과 글의 색이 역전된다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;css&quot;&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;background&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; white&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; black&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;prefers-color-scheme&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; dark&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;background&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; black&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; white&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;여기에 javascript를 사용해서 query를 실시간으로 확인하여 특정 동작을 할 수도 있다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;var&lt;/span&gt; darkQuery &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; window&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;matchMedia&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;(prefers-color-scheme: dark)&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
darkQuery&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addListener&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;alert&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;e&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;matches &lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;dark mode&apos;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;light mode&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;그러나 이 방법으로만 구현하게 되면 OS에서 dark  모드를 사용하지 않는 사용자는 웹에서 dark mode를 사용할 수 없다.&lt;/p&gt;
&lt;h2 id=&quot;css-variables&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#css-variables&quot; aria-label=&quot;css variables permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;CSS Variables&lt;/h2&gt;
&lt;p&gt;switch를 두고 toggle을 하여 mode를 바꾸는 방법은 어떨까?&lt;/p&gt;
&lt;p&gt;switch에 따라 .light 또는 .dark 클래스를 적용하여 사이트의 전체적인 css를 변경하는 것이다.&lt;/p&gt;
&lt;p&gt;그러기 위해서는 변수와 같은 것이 필요하다.&lt;/p&gt;
&lt;p&gt;CSS에도 변수가 있으며 다음과 같이 사용할 수 있다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;css&quot;&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;// 변수의 선언
element&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;--main-bg-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; brown&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token selector&quot;&gt;// 변수의 사용
element&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--main-bg-color&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;이 변수를 활용하면, 다음과 같이 모드에 따라 변수의 값을 바꾸어 사이트 전체의 css에 적용되게 할 수 있다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;css&quot;&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;body.light&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;--main-bg-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; white&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token selector&quot;&gt;body.dark&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;--main-bg-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; black&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;background&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--main-bg-color&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2 id=&quot;추가적인-고려-사항&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%B6%94%EA%B0%80%EC%A0%81%EC%9D%B8-%EA%B3%A0%EB%A0%A4-%EC%82%AC%ED%95%AD&quot; aria-label=&quot;추가적인 고려 사항 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;추가적인 고려 사항&lt;/h2&gt;
&lt;p&gt;단순히 색상만 바꾸는 것으로는 다크 모드를 이쁘게 구현했다고 볼 수 없다.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Andy Clarke의 글&lt;/a&gt;을 참고하면, 색상을 선택하는 것부터, 타이포그래피, 이미지에 필터를 적용하는 것 등 다양한 것들을 고려하여 구현할 수 있음을 알 수 있다.&lt;/p&gt;
&lt;h2 id=&quot;참고&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%B0%B8%EA%B3%A0&quot; aria-label=&quot;참고 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;참고&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Create A Dark/Light Mode Switch with CSS Variables, Ananya Neogi, 2019.4.10&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://css-tricks.com/dark-modes-with-css/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Dark Mode in CSS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Redesigning your product and website for dark mode&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</content:encoded></item><item><title><![CDATA[[여행] 대관령 양떼목장, 강릉]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/essay/gangreung-trip/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/essay/gangreung-trip/</guid><pubDate>Sun, 06 Oct 2019 12:03:18 GMT</pubDate><content:encoded>&lt;p&gt;아내랑 강릉 여행을 왔다.&lt;/p&gt;
&lt;h2 id=&quot;가평-휴게소-호두잣과자&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EA%B0%80%ED%8F%89-%ED%9C%B4%EA%B2%8C%EC%86%8C-%ED%98%B8%EB%91%90%EC%9E%A3%EA%B3%BC%EC%9E%90&quot; aria-label=&quot;가평 휴게소 호두잣과자 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;가평 휴게소 호두잣과자&lt;/h2&gt;
&lt;p&gt;가평 휴게소에 있는 호두잣과자는 정말 인생 호두과자다. 사람들이 늘 사먹어서 구매하면 따끈하게 갓 만들어진 호두과자를 맛볼 수 있는데, 겉은 바삭하고 속은 부드럽고 달달하다. 정말 맛있다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 575px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 133.12883435582822%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAMBAgQF/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAFBowSwVDtcNqdZguR//8QAHRAAAgIBBQAAAAAAAAAAAAAAAQIAEgMQERMhIv/aAAgBAQABBQLyY2BTOlhNg9Um14jipFWnK649P//EABURAQEAAAAAAAAAAAAAAAAAABEg/9oACAEDAQE/AWP/xAAWEQEBAQAAAAAAAAAAAAAAAAARABD/2gAIAQIBAT8BI3//xAAfEAACAgIBBQAAAAAAAAAAAAAAAQIRECEDEjEyUXH/2gAIAQEABj8C8ka18KoXTxrt6E1RdiUUSWEoyrP/xAAeEAADAQACAgMAAAAAAAAAAAAAAREhUWEQMUGBkf/aAAgBAQABPyH4l9+DO/sqNq0it5ie5RQTViZo8umI1ChAuYQrQnRa69b8f//aAAwDAQACAAMAAAAQ8/Gz/8QAGREAAwADAAAAAAAAAAAAAAAAAAEREDFB/9oACAEDAQE/EGz2Uncf/8QAGREAAgMBAAAAAAAAAAAAAAAAAAEQESEx/9oACAECAQE/EMcLDcf/xAAhEAEAAgIBAwUAAAAAAAAAAAABESEAQTEQYXFRkaHR8P/aAAgBAQABPxAhlBoiw/ecXR7U+1zioOpDX3hVutCKHbzkj9q47MODaM2CVYjBiViFa1XjNYVOTQ/Gd94XELgDz65JlUSrt6f/2Q==&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;호두과자&quot;
        title=&quot;호두과자&quot;
        src=&quot;/static/395dfdc407df3da19502b1f35cb5aa27/8c797/IMG_4844.jpg&quot;
        srcset=&quot;/static/395dfdc407df3da19502b1f35cb5aa27/d2f63/IMG_4844.jpg 163w,
/static/395dfdc407df3da19502b1f35cb5aa27/c989d/IMG_4844.jpg 325w,
/static/395dfdc407df3da19502b1f35cb5aa27/8c797/IMG_4844.jpg 575w&quot;
        sizes=&quot;(max-width: 575px) 100vw, 575px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2 id=&quot;가평-휴게소-한우국밥&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EA%B0%80%ED%8F%89-%ED%9C%B4%EA%B2%8C%EC%86%8C-%ED%95%9C%EC%9A%B0%EA%B5%AD%EB%B0%A5&quot; aria-label=&quot;가평 휴게소 한우국밥 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;가평 휴게소 한우국밥&lt;/h2&gt;
&lt;p&gt;강원도 쪽 휴게소엔 다 한우국밥이 있는 것 같다. 먹을 때마다 느끼는 거지만 늘 맛있다. 빨간 국물은 부산의 쇠고기국밥과 똑같아서 입맛에 더 맞다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEAv/EABUBAQEAAAAAAAAAAAAAAAAAAAID/9oADAMBAAIQAxAAAAHKlsm7CAK//8QAGxABAAICAwAAAAAAAAAAAAAAAgEDABMREiL/2gAIAQEAAQUCsSMKXJrfjQ86W8a1n//EABcRAQADAAAAAAAAAAAAAAAAAAABESH/2gAIAQMBAT8B1cv/xAAXEQEAAwAAAAAAAAAAAAAAAAAAARIh/9oACAECAQE/AcVh/8QAGxAAAgIDAQAAAAAAAAAAAAAAAAEhMQISIkH/2gAIAQEABj8C2WUPwlnbkooo/8QAHBABAAIBBQAAAAAAAAAAAAAAAQARIUFhceHx/9oACAEBAAE/ISll8Xhmw30ZiUQ+8i9HDkiHef/aAAwDAQACAAMAAAAQxy//xAAXEQEBAQEAAAAAAAAAAAAAAAABADFh/9oACAEDAQE/EOhgjL//xAAXEQEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAECAQE/EF4iZRt3/8QAHhAAAgICAgMAAAAAAAAAAAAAAREAITFBUWFx0fD/2gAIAQEAAT8QXDEGQdGizzCqHyyJfBxBrDGqILGsdRlq+vdEyn4bUSAmSrpR3uf/2Q==&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;한우국밥&quot;
        title=&quot;한우국밥&quot;
        src=&quot;/static/7900fadcc3878cb34bce3e7eb6181fd1/6aca1/IMG_4845.jpg&quot;
        srcset=&quot;/static/7900fadcc3878cb34bce3e7eb6181fd1/d2f63/IMG_4845.jpg 163w,
/static/7900fadcc3878cb34bce3e7eb6181fd1/c989d/IMG_4845.jpg 325w,
/static/7900fadcc3878cb34bce3e7eb6181fd1/6aca1/IMG_4845.jpg 650w,
/static/7900fadcc3878cb34bce3e7eb6181fd1/d8ebd/IMG_4845.jpg 766w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2 id=&quot;대관령-양떼목장&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%8C%80%EA%B4%80%EB%A0%B9-%EC%96%91%EB%96%BC%EB%AA%A9%EC%9E%A5&quot; aria-label=&quot;대관령 양떼목장 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;대관령 양떼목장&lt;/h2&gt;
&lt;p&gt;사실 이 여행의 목적은 양떼목장이다. 양들은 정말 귀엽다. 지금은 가을이라 그런지 양들의 털이 길었다. 여름엔 꽤 짧아서 더 귀여웠던 것 같은데. 지금은 조금 많이 꼬질꼬질하기도 하다. 양들은 매헤에에 하고 울 때, 목소리가 다 다르다. 어떤 애는 얇고, 어떤 애는 굵다. 그런데 오늘은 양들이 하나도 안 울었다. 여하튼, 양들은 꼭 털을 만져봐야 한다. 정말 푹신푹신한 양털.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQDBf/EABYBAQEBAAAAAAAAAAAAAAAAAAEAAv/aAAwDAQACEAMQAAABsx5rBciF/8QAGhAAAgIDAAAAAAAAAAAAAAAAAQIAFAQRIP/aAAgBAQABBQKysOSd2X4//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFxEBAAMAAAAAAAAAAAAAAAAAAAEREv/aAAgBAgEBPwHS5f/EABkQAAMAAwAAAAAAAAAAAAAAAAABISAxQf/aAAgBAQAGPwLpFDSw/8QAHRAAAgEEAwAAAAAAAAAAAAAAAAERECExQVFhgf/aAAgBAQABPyFp0/hlGzkcgz2TT//aAAwDAQACAAMAAAAQoC//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPxCq/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Qov/EAB0QAQACAgIDAAAAAAAAAAAAAAEAEWGhITFRsdH/2gAIAQEAAT8QuQyShuMfgFi7v1FKixz9lntkAveoONT/2Q==&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;양 1&quot;
        title=&quot;양 1&quot;
        src=&quot;/static/b86878fefc5a596a6445bbd376542134/6aca1/IMG_4846.jpg&quot;
        srcset=&quot;/static/b86878fefc5a596a6445bbd376542134/d2f63/IMG_4846.jpg 163w,
/static/b86878fefc5a596a6445bbd376542134/c989d/IMG_4846.jpg 325w,
/static/b86878fefc5a596a6445bbd376542134/6aca1/IMG_4846.jpg 650w,
/static/b86878fefc5a596a6445bbd376542134/d8ebd/IMG_4846.jpg 766w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUBAgP/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAdrJ5xHInD//xAAaEAACAgMAAAAAAAAAAAAAAAAAAhEUAQQQ/9oACAEBAAEFAsbRZUsITPf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAgEBPwGq/8QAGRAAAgMBAAAAAAAAAAAAAAAAAAEQMTJB/9oACAEBAAY/AqZlnRT/AP/EABkQAAMBAQEAAAAAAAAAAAAAAAABIRGRsf/aAAgBAQABPyGVC/gPSCUJYuiNP//aAAwDAQACAAMAAAAQ2O//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAWEQEBAQAAAAAAAAAAAAAAAAAAEQH/2gAIAQIBAT8QvFv/xAAbEAEAAwEAAwAAAAAAAAAAAAABABEhMUFhof/aAAgBAQABPxATgGNOQAKquoM+wmDPRFkvVKd15iQG+zPan//Z&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;양 2&quot;
        title=&quot;양 2&quot;
        src=&quot;/static/ebb7bf3eaa1b7f642c9d5f274b3b3628/6aca1/IMG_4847.jpg&quot;
        srcset=&quot;/static/ebb7bf3eaa1b7f642c9d5f274b3b3628/d2f63/IMG_4847.jpg 163w,
/static/ebb7bf3eaa1b7f642c9d5f274b3b3628/c989d/IMG_4847.jpg 325w,
/static/ebb7bf3eaa1b7f642c9d5f274b3b3628/6aca1/IMG_4847.jpg 650w,
/static/ebb7bf3eaa1b7f642c9d5f274b3b3628/d8ebd/IMG_4847.jpg 766w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIEAf/EABUBAQEAAAAAAAAAAAAAAAAAAAAC/9oADAMBAAIQAxAAAAGqdtinIw//xAAaEAEAAgMBAAAAAAAAAAAAAAACAAEDERIx/9oACAEBAAEFAvYt1k5UHVRB3bL3/8QAFhEBAQEAAAAAAAAAAAAAAAAAABES/9oACAEDAQE/AdK//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8BiP/EABoQAAMAAwEAAAAAAAAAAAAAAAABIREiMVH/2gAIAQEABj8C1bwY9NeEUE5Cn//EAB0QAQACAQUBAAAAAAAAAAAAAAEAITERQVFhgbH/2gAIAQEAAT8h1bdpGFJTKXCz4R0e6ZFBvzBXE//aAAwDAQACAAMAAAAQjP8A/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8QKf/EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/EKH/xAAbEAEBAQEAAwEAAAAAAAAAAAABESEAMWGBkf/aAAgBAQABPxBIsMyqXqggZBbvPwww+efjasRD2HKiIdfo5CEYSPk7/9k=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;양 3&quot;
        title=&quot;양 3&quot;
        src=&quot;/static/349a83190c15c04cb6c1865412a1b933/6aca1/IMG_4848.jpg&quot;
        srcset=&quot;/static/349a83190c15c04cb6c1865412a1b933/d2f63/IMG_4848.jpg 163w,
/static/349a83190c15c04cb6c1865412a1b933/c989d/IMG_4848.jpg 325w,
/static/349a83190c15c04cb6c1865412a1b933/6aca1/IMG_4848.jpg 650w,
/static/349a83190c15c04cb6c1865412a1b933/d8ebd/IMG_4848.jpg 766w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABAABAv/EABYBAQEBAAAAAAAAAAAAAAAAAAACA//aAAwDAQACEAMQAAABVwPc4THj/8QAGRAAAgMBAAAAAAAAAAAAAAAAABMCEBQh/9oACAEBAAEFAnxNA++H/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFhEAAwAAAAAAAAAAAAAAAAAAAAES/9oACAECAQE/AbZbP//EABkQAAEFAAAAAAAAAAAAAAAAAAABIDEyQf/aAAgBAQAGPwLSFKM//8QAHBAAAwABBQAAAAAAAAAAAAAAAAEhERBRcYGR/9oACAEBAAE/IXteRRSb5mXZzo6P/9oADAMBAAIAAwAAABDsH//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/EKf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ECf/xAAcEAEBAQEAAgMAAAAAAAAAAAABESEAMVFhcYH/2gAIAQEAAT8QghzrVdcH5zfrlrB7Xe0YrfHQoMvIoz8HO//Z&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;양 4&quot;
        title=&quot;양 4&quot;
        src=&quot;/static/baa62707980bf5abad3a9c2dfce658da/6aca1/IMG_4861.jpg&quot;
        srcset=&quot;/static/baa62707980bf5abad3a9c2dfce658da/d2f63/IMG_4861.jpg 163w,
/static/baa62707980bf5abad3a9c2dfce658da/c989d/IMG_4861.jpg 325w,
/static/baa62707980bf5abad3a9c2dfce658da/6aca1/IMG_4861.jpg 650w,
/static/baa62707980bf5abad3a9c2dfce658da/d8ebd/IMG_4861.jpg 766w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2 id=&quot;강릉-해동막국수&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EA%B0%95%EB%A6%89-%ED%95%B4%EB%8F%99%EB%A7%89%EA%B5%AD%EC%88%98&quot; aria-label=&quot;강릉 해동막국수 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;강릉 해동막국수&lt;/h2&gt;
&lt;p&gt;여긴 검색해서 점수가 괜찮은 막국수집이었다. 물막국수와 비빔막국수를 먹었는데, 비빔막국수가 유명한 집인가? 난 물을 먹어서 잘 모르겠다. 무튼, 이 집도 맛있다. 물 막국수의 육수는 약간 고소하면서 달달하다. 그리고 겨자를 넣어서 먹으면 딱 간이 맞다.&lt;/p&gt;
&lt;p&gt;점수는 9/10을 주고 싶다. 밑반찬이 조금 아쉬웠기 때문이다. 김치가 별로였달까&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAgX/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAgP/2gAMAwEAAhADEAAAAcsnXlVxzw//xAAaEAACAwEBAAAAAAAAAAAAAAABAgADERMi/9oACAEBAAEFAhU7ytNmEToyD2obWP8A/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGxAAAgMAAwAAAAAAAAAAAAAAABEBAhIhIlH/2gAIAQEABj8C6k8q3kCZOZRV2Ho//8QAGhABAAMAAwAAAAAAAAAAAAAAAQARUSGBkf/aAAgBAQABPyEpUUbGRfKEX8jFEtsjZIi0GRXC7n//2gAMAwEAAgADAAAAEDj/AP/EABcRAAMBAAAAAAAAAAAAAAAAAAABESH/2gAIAQMBAT8Qdpp//8QAFxEBAQEBAAAAAAAAAAAAAAAAAQARIf/aAAgBAgEBPxATLl//xAAcEAACAwEAAwAAAAAAAAAAAAABEQAhMVFBgaH/2gAIAQEAAT8QND6P54IKuoUJgsH5nYZ0WF7E0ZYLZpKEWgYIPuMzFKjM/9k=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;해동막국수&quot;
        title=&quot;해동막국수&quot;
        src=&quot;/static/3fb28635bd90a2dac552a3072300c661/6aca1/IMG_4853.jpg&quot;
        srcset=&quot;/static/3fb28635bd90a2dac552a3072300c661/d2f63/IMG_4853.jpg 163w,
/static/3fb28635bd90a2dac552a3072300c661/c989d/IMG_4853.jpg 325w,
/static/3fb28635bd90a2dac552a3072300c661/6aca1/IMG_4853.jpg 650w,
/static/3fb28635bd90a2dac552a3072300c661/d8ebd/IMG_4853.jpg 766w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2 id=&quot;영진해수욕장-바빈스-커피&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%98%81%EC%A7%84%ED%95%B4%EC%88%98%EC%9A%95%EC%9E%A5-%EB%B0%94%EB%B9%88%EC%8A%A4-%EC%BB%A4%ED%94%BC&quot; aria-label=&quot;영진해수욕장 바빈스 커피 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;영진해수욕장 바빈스 커피&lt;/h2&gt;
&lt;p&gt;영진 해수욕장 앞에는 카페가 몇 개 있다. 그 중 장사가 조금 안 되는 것처럼 보이는 집에 들어갔다. 그런데 이 카페의 3층이 꽤 괜찮다. 다른 카페가 더 좋을 수 있지만, 이 카페의 3층엔 좌석들이 신발을 벗고 올라가는 평상 같은 형식으로 되어 있고, 그곳에 앉아서 바다를 감상할 수 있다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAQFAwb/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAFB+dodESQ//8QAGRABAAMBAQAAAAAAAAAAAAAAAQIDEQAi/9oACAEBAAEFAt9V3MQdjxF3LV//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAZEAADAAMAAAAAAAAAAAAAAAAAASERQbH/2gAIAQEABj8CqwSoTHTROn//xAAbEAEAAgMBAQAAAAAAAAAAAAABABEhQWExcf/aAAgBAQABPyEBoOzKZoHU7gSjwuXFYP0Yig2rU//aAAwDAQACAAMAAAAQI+//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAeEAEAAgIBBQAAAAAAAAAAAAABABEhMUFhkaHB8P/aAAgBAQABPxAAPs5eY8FfZuH1HQAQaGO8gMBd/Zh6s9RRkg9ClFT/2Q==&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;바빈스 커피 1&quot;
        title=&quot;바빈스 커피 1&quot;
        src=&quot;/static/55b89fee23d70d15fa76dbfc2b603f2f/6aca1/IMG_4859.jpg&quot;
        srcset=&quot;/static/55b89fee23d70d15fa76dbfc2b603f2f/d2f63/IMG_4859.jpg 163w,
/static/55b89fee23d70d15fa76dbfc2b603f2f/c989d/IMG_4859.jpg 325w,
/static/55b89fee23d70d15fa76dbfc2b603f2f/6aca1/IMG_4859.jpg 650w,
/static/55b89fee23d70d15fa76dbfc2b603f2f/d8ebd/IMG_4859.jpg 766w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 575px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 100%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAQDBQL/xAAWAQEBAQAAAAAAAAAAAAAAAAABAgP/2gAMAwEAAhADEAAAAZejBZcasycq0y09CX//xAAcEAABBAMBAAAAAAAAAAAAAAACAAEREgMTIiH/2gAIAQEAAQUCwcrbZSaw+CxdXQk+yGswS3//xAAVEQEBAAAAAAAAAAAAAAAAAAABIP/aAAgBAwEBPwFj/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAEQESH/2gAIAQIBAT8BVGT/AP/EAB8QAAIABQUAAAAAAAAAAAAAAAABAhExQYEDECFCkf/aAAgBAQAGPwKOKcmcQtnVYNQxs1ZspYq/T//EABwQAQADAQADAQAAAAAAAAAAAAEAESExQVFhcf/aAAgBAQABPyFnAOM4CFXuE9b8rMRdQd7Epl55KzY/ILlhKwQNP4p//9oADAMBAAIAAwAAABBA4L//xAAXEQEBAQEAAAAAAAAAAAAAAAARAAEQ/9oACAEDAQE/EEzvDL//xAAXEQEAAwAAAAAAAAAAAAAAAAABABAR/9oACAECAQE/EFZrP//EACAQAQACAgICAwEAAAAAAAAAAAERIQBBMWFRsXGBkaH/2gAIAQEAAT8QgdUwTxwjyYxKgJ2u3XwYOUfh/bJ6xjlwOC1qsFs7nO+siqE+8JJTCQT+Yr4k7C67yzq1C95//9k=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;바빈스 커피 2&quot;
        title=&quot;바빈스 커피 2&quot;
        src=&quot;/static/5f2738b9195150ca9fbebc379c548212/8c797/IMG_4866.jpg&quot;
        srcset=&quot;/static/5f2738b9195150ca9fbebc379c548212/d2f63/IMG_4866.jpg 163w,
/static/5f2738b9195150ca9fbebc379c548212/c989d/IMG_4866.jpg 325w,
/static/5f2738b9195150ca9fbebc379c548212/8c797/IMG_4866.jpg 575w&quot;
        sizes=&quot;(max-width: 575px) 100vw, 575px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2 id=&quot;강릉-노벰버-펜션&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EA%B0%95%EB%A6%89-%EB%85%B8%EB%B2%B0%EB%B2%84-%ED%8E%9C%EC%85%98&quot; aria-label=&quot;강릉 노벰버 펜션 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;강릉 노벰버 펜션&lt;/h2&gt;
&lt;p&gt;이런 느낌의 펜션은 처음이다. 약간 앤틱한 갬성의 인테리어와 건물이 눈을 사로잡는다. 게다가 친절하고 환대받는 느낌의 안내는 서비스를 받고 있다는 느낌을 확실하게 준다. 호텔이구나, 라고 느낄 수 있는 곳이다.&lt;/p&gt;
&lt;p&gt;이 펜션에 체크인을 위해 입구로 들어가면 잠시 로비에서 기다리라고 하신다. 그리고 차와 다과, 방키, 커피가루를 챙겨주시고, 폴라로이드 사진을 한 장 찍어주신다. 커피가루는 방에서 커피 내리는 도구로 내려 마실 수 있다.&lt;/p&gt;
&lt;p&gt;아침엔 조식을 주는데, 양식과 한식을 선택할 수 있다. 양식의 경우엔 조금 가볍다는 생각이 들었고, 한식 같은 경우엔 비교적 아침으로 부담스럽다고 느꼈다. 내가 아침을 안 먹어서 그런 것 같다. 맛은 매우 괜찮다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 575px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 133.12883435582822%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAAQFAwEC/8QAFAEBAAAAAAAAAAAAAAAAAAAAAv/aAAwDAQACEAMQAAABRswvYVokCLDWOQbZwR//xAAfEAACAQMFAQAAAAAAAAAAAAABAgMREiIABBATIxT/2gAIAQEAAQUCB9yvhASkbZN3NaNy2iTfQOPmh4kxKk0//8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAQEf/aAAgBAwEBPwHkkmf/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAgEBPwFVV//EACEQAAIBAwMFAAAAAAAAAAAAAAABEQIQMRIhUSIyQVKh/9oACAEBAAY/At+R+XBA3GTTwoMI9VGDS6aTt+26drf/xAAaEAEBAQEBAQEAAAAAAAAAAAABEQAhMWFx/9oACAEBAAE/IY/txelPWAXJm/RodmSEE4MQmHQhzce6SgznMMCsfi0H3ALEXu//2gAMAwEAAgADAAAAEMQBQv/EABcRAAMBAAAAAAAAAAAAAAAAAAABESH/2gAIAQMBAT8Q1GNbIaRn/8QAFxEBAQEBAAAAAAAAAAAAAAAAEQABQf/aAAgBAgEBPxB5YMLFC//EAB0QAQADAQACAwAAAAAAAAAAAAEAESExUXFhkeH/2gAIAQEAAT8QAh0agcu4MQYdqrgFsFuhsN2ZN2dnpuVrGaJejaeclLEHyw24l1HjY85AO1Ww2ub+yjmNAb6uCEAnNlbtFoOfU77yf//Z&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;노벰버펜션 1&quot;
        title=&quot;노벰버펜션 1&quot;
        src=&quot;/static/9c8f5fe42afe990a123b6a1c11300858/8c797/IMG_4867.jpg&quot;
        srcset=&quot;/static/9c8f5fe42afe990a123b6a1c11300858/d2f63/IMG_4867.jpg 163w,
/static/9c8f5fe42afe990a123b6a1c11300858/c989d/IMG_4867.jpg 325w,
/static/9c8f5fe42afe990a123b6a1c11300858/8c797/IMG_4867.jpg 575w&quot;
        sizes=&quot;(max-width: 575px) 100vw, 575px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDAf/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAFcdYqZET//xAAZEAEBAAMBAAAAAAAAAAAAAAACAQAREyL/2gAIAQEAAQUCHog7cSmcpRxknHP/xAAWEQEBAQAAAAAAAAAAAAAAAAAAEQH/2gAIAQMBAT8Bmq//xAAXEQEAAwAAAAAAAAAAAAAAAAAAARIh/9oACAECAQE/AcVh/8QAGhAAAgIDAAAAAAAAAAAAAAAAAAERMQIQIf/aAAgBAQAGPwI7UjSIxcas/8QAGhABAAMAAwAAAAAAAAAAAAAAAQARITFBUf/aAAgBAQABPyEUbb3ZMBBgs6EXDZg8y4OWq1ysurY58n//2gAMAwEAAgADAAAAEDAP/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERIf/aAAgBAwEBPxBBayn/xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAECAQE/EKhbYf/EAB4QAQEAAQQDAQAAAAAAAAAAAAERACFhcYExQbHx/9oACAEBAAE/EChcaQ8bYsIRyV6/cVRQ5rfmKKDaNi875Wjoo06wcj9CnP/Z&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;노벰버펜션 2&quot;
        title=&quot;노벰버펜션 2&quot;
        src=&quot;/static/5fb7316fc7e22ef98ae2a2b650ecce7c/6aca1/IMG_4868.jpg&quot;
        srcset=&quot;/static/5fb7316fc7e22ef98ae2a2b650ecce7c/d2f63/IMG_4868.jpg 163w,
/static/5fb7316fc7e22ef98ae2a2b650ecce7c/c989d/IMG_4868.jpg 325w,
/static/5fb7316fc7e22ef98ae2a2b650ecce7c/6aca1/IMG_4868.jpg 650w,
/static/5fb7316fc7e22ef98ae2a2b650ecce7c/d8ebd/IMG_4868.jpg 766w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECA//EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/aAAwDAQACEAMQAAABidVZgID/AP/EABkQAAMBAQEAAAAAAAAAAAAAAAECAwAREv/aAAgBAQABBQJeM9fIwJwkBnmG07AJ/8QAFhEAAwAAAAAAAAAAAAAAAAAAARAS/9oACAEDAQE/AbC//8QAFxEBAAMAAAAAAAAAAAAAAAAAAAESE//aAAgBAgEBPwHKVX//xAAaEAACAwEBAAAAAAAAAAAAAAAAAQIRITEQ/9oACAEBAAY/Ao2xyjy88wba05Z//8QAGhABAQEBAQEBAAAAAAAAAAAAAREAITFRYf/aAAgBAQABPyFTBWc1nxwHMK3Q0eedxVCedwYbfu//2gAMAwEAAgADAAAAEG8P/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAx/9oACAEDAQE/EDaFv//EABYRAQEBAAAAAAAAAAAAAAAAAAEAMf/aAAgBAgEBPxBwkX//xAAcEAEBAAIDAQEAAAAAAAAAAAABEQAhMUFhUYH/2gAIAQEAAT8QmHhQ0hyM8wFVWhOvjlSBeabxdoXaqZvKRTG/zDW9j08z/9k=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;노벰버펜션 3&quot;
        title=&quot;노벰버펜션 3&quot;
        src=&quot;/static/317b45a9745188f4fb6eee6f3eb255cb/6aca1/IMG_4869.jpg&quot;
        srcset=&quot;/static/317b45a9745188f4fb6eee6f3eb255cb/d2f63/IMG_4869.jpg 163w,
/static/317b45a9745188f4fb6eee6f3eb255cb/c989d/IMG_4869.jpg 325w,
/static/317b45a9745188f4fb6eee6f3eb255cb/6aca1/IMG_4869.jpg 650w,
/static/317b45a9745188f4fb6eee6f3eb255cb/d8ebd/IMG_4869.jpg 766w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQB/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEAMQAAABxJud0qiP/8QAGxAAAgIDAQAAAAAAAAAAAAAAAQMCEQASITP/2gAIAQEAAQUCX58ialbDqxR7Zz//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEv/aAAgBAwEBPwGUv//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/Aar/xAAbEAACAgMBAAAAAAAAAAAAAAAAASExAhFBgf/aAAgBAQAGPwKzBqYocdPDbLP/xAAbEAACAwADAAAAAAAAAAAAAAABEQAxUSFBcf/aAAgBAQABPyGloMcLL6iFmAGtqh2BehUNYewAHEf/2gAMAwEAAgADAAAAENDf/8QAFREBAQAAAAAAAAAAAAAAAAAAAQD/2gAIAQMBAT8QDN//xAAXEQEAAwAAAAAAAAAAAAAAAAAAESFR/9oACAECAQE/EKoY/8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFBUbH/2gAIAQEAAT8QuVwD6NW8TFFg8G9Ois5iANGC2zg+RCaUUWC9l6tnV0WGSwO0n//Z&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;노벰버펜션 4&quot;
        title=&quot;노벰버펜션 4&quot;
        src=&quot;/static/dc71f1af75ed834abbe38b8484d4885f/6aca1/IMG_4870.jpg&quot;
        srcset=&quot;/static/dc71f1af75ed834abbe38b8484d4885f/d2f63/IMG_4870.jpg 163w,
/static/dc71f1af75ed834abbe38b8484d4885f/c989d/IMG_4870.jpg 325w,
/static/dc71f1af75ed834abbe38b8484d4885f/6aca1/IMG_4870.jpg 650w,
/static/dc71f1af75ed834abbe38b8484d4885f/d8ebd/IMG_4870.jpg 766w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 575px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 133.12883435582822%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAUBAwQC/8QAFwEBAAMAAAAAAAAAAAAAAAAAAgABA//aAAwDAQACEAMQAAAB4p3rgpAC3KGtUvONR5//xAAaEAADAQADAAAAAAAAAAAAAAAAAQIRAzEy/9oACAEBAAEFAnGXp2VLRWKtUjWpJxccVUi0nXk//8QAGREAAgMBAAAAAAAAAAAAAAAAAAECECEx/9oACAEDAQE/AY8po0//xAAYEQADAQEAAAAAAAAAAAAAAAAAASECEP/aAAgBAgEBPwHSvEyH/8QAHhAAAgEEAwEAAAAAAAAAAAAAABEBAhAhcRIxQWH/2gAIAQEABj8Cnju3o4n4KmciqnImjQ1aBR0f/8QAHRABAAIDAQADAAAAAAAAAAAAAQARITFBUWFxgf/aAAgBAQABPyFAnCGU5vfxLchjAovqVblblc/EJg1j3yMb2FmVzfYS0D0n0xon/9oADAMBAAIAAwAAABDABw//xAAYEQADAQEAAAAAAAAAAAAAAAAAAREhMf/aAAgBAwEBPxDiQporVUP/xAAZEQEAAwEBAAAAAAAAAAAAAAABABEhQVH/2gAIAQIBAT8QQZN4SrPYpabn/8QAHxABAAMAAQQDAAAAAAAAAAAAAQARITFBUWGRseHw/9oACAEBAAE/EBuFEx0R+IoQkXJeO4TyxBaAQLy9YusJpYNfvcEzK2iNfcfYzK8u8G8Fntj7IAWRSTcPPe42rjGaoj4riJjCgHQn/9k=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;노벰버펜션 5&quot;
        title=&quot;노벰버펜션 5&quot;
        src=&quot;/static/f4b2028f747e2be8264e4a6f75786013/8c797/IMG_4871.jpg&quot;
        srcset=&quot;/static/f4b2028f747e2be8264e4a6f75786013/d2f63/IMG_4871.jpg 163w,
/static/f4b2028f747e2be8264e4a6f75786013/c989d/IMG_4871.jpg 325w,
/static/f4b2028f747e2be8264e4a6f75786013/8c797/IMG_4871.jpg 575w&quot;
        sizes=&quot;(max-width: 575px) 100vw, 575px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 575px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 133.12883435582822%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQBAgUD/8QAFgEBAQEAAAAAAAAAAAAAAAAAAQAC/9oADAMBAAIQAxAAAAFBi744pQNMdM60QQV//8QAHRAAAgIBBQAAAAAAAAAAAAAAAgMBBDEAEBEhM//aAAgBAQABBQLuSJLRCNVfSwzlA4Q2Fyx4kMYHf//EABgRAAMBAQAAAAAAAAAAAAAAAAABERAh/9oACAEDAQE/AW+lJn//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAcEAABBAMBAAAAAAAAAAAAAAABAAIQERIgIXH/2gAIAQEABj8CoLIjnsEp0OtHh1//xAAaEAEBAQEBAQEAAAAAAAAAAAABABEhQVFh/9oACAEBAAE/IQ7l/CcOBFyWeoLDZ3JxKC78iI1T2cemzF//2gAMAwEAAgADAAAAEOcFDf/EABcRAAMBAAAAAAAAAAAAAAAAAAEQESH/2gAIAQMBAT8QKISDq//EABgRAQEAAwAAAAAAAAAAAAAAAAEAEBEx/9oACAECAQE/EANSXMf/xAAdEAEBAQEAAQUAAAAAAAAAAAABEQAhQRAxUZGx/9oACAEBAAE/EJlaXyYGCVvX1rF0rKEH47qCBDy389HyB8OKYJqAUTSjIia333Q3cG//2Q==&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;노벰버펜션 6&quot;
        title=&quot;노벰버펜션 6&quot;
        src=&quot;/static/887075245057e6ae07b8c0498e0516a7/8c797/IMG_4872.jpg&quot;
        srcset=&quot;/static/887075245057e6ae07b8c0498e0516a7/d2f63/IMG_4872.jpg 163w,
/static/887075245057e6ae07b8c0498e0516a7/c989d/IMG_4872.jpg 325w,
/static/887075245057e6ae07b8c0498e0516a7/8c797/IMG_4872.jpg 575w&quot;
        sizes=&quot;(max-width: 575px) 100vw, 575px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 575px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 133.12883435582822%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQBAgMF/8QAFwEBAQEBAAAAAAAAAAAAAAAAAQACA//aAAwDAQACEAMQAAABwe5d+W2RYRecd5qLEf/EAB4QAAICAQUBAAAAAAAAAAAAAAECAAMRBBITIjEy/9oACAEBAAEFAndlsHauan7rtYV8wEU7zjEFrLK/W8n/xAAXEQADAQAAAAAAAAAAAAAAAAAAARAR/9oACAEDAQE/AVEaf//EABkRAAIDAQAAAAAAAAAAAAAAAAABEBExUf/aAAgBAgEBPwF5D4Uj/8QAHRAAAQQCAwAAAAAAAAAAAAAAAAECERIhgRAgMf/aAAgBAQAGPwJTXGiLGWjrHpCZ6f/EABsQAQACAwEBAAAAAAAAAAAAAAEAESExQVEQ/9oACAEBAAE/IQAQ1uNzX6xLlqp2O0fEhYGX0l+WzEzYpC1AX0mz4O5//9oADAMBAAIAAwAAABDvGn//xAAaEQABBQEAAAAAAAAAAAAAAAAAARARMUFR/9oACAEDAQE/ELMjSXT/xAAaEQEAAQUAAAAAAAAAAAAAAAABABARITFB/9oACAECAQE/ENKUeCL3J//EAB0QAQEBAAICAwAAAAAAAAAAAAERACExEFFBcYH/2gAIAQEAAT8QNtWAXvMxUhQJz6dBxMRf4OvYuFACUaIZYPvZBNbK2R8R6MuDn8189I2TcPq8Djnvf//Z&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;노벰버펜션 7&quot;
        title=&quot;노벰버펜션 7&quot;
        src=&quot;/static/251ad337d3ec4c42cf8cc30b610619f5/8c797/IMG_4873.jpg&quot;
        srcset=&quot;/static/251ad337d3ec4c42cf8cc30b610619f5/d2f63/IMG_4873.jpg 163w,
/static/251ad337d3ec4c42cf8cc30b610619f5/c989d/IMG_4873.jpg 325w,
/static/251ad337d3ec4c42cf8cc30b610619f5/8c797/IMG_4873.jpg 575w&quot;
        sizes=&quot;(max-width: 575px) 100vw, 575px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 575px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 133.12883435582822%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAEDBP/EABYBAQEBAAAAAAAAAAAAAAAAAAACA//aAAwDAQACEAMQAAABmudzuuEMSkYJf//EABsQAAIDAAMAAAAAAAAAAAAAAAECAAMREBMy/9oACAEBAAEFAmxWXzEJuSwuB3mBxWhsJiMMh4//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAwEBPwEh/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8BiKj/xAAgEAACAQIHAQAAAAAAAAAAAAAAAQISIQMQESAiMTJS/9oACAEBAAY/AtHG5VlXORxxE18s8iR0X2f/xAAcEAADAQACAwAAAAAAAAAAAAAAAREhMUFhcaH/2gAIAQEAAT8hZlyPBuScfFGxcobbIRABdn2aBeXDio9iEvp2Jg+T/9oADAMBAAIAAwAAABBjyQ//xAAWEQEBAQAAAAAAAAAAAAAAAAARACH/2gAIAQMBAT8QcmEl/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERECH/2gAIAQIBAT8QwTyEPp//xAAcEAEAAwEBAAMAAAAAAAAAAAABABEhQTFxsdH/2gAIAQEAAT8QeEAbOXzYnlNe43uQR36hKKxRVA4SpojEA+H9lHde1AXdCB6rCUMJ1bKuQsQRcIwQkf/Z&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;노벰버펜션 8&quot;
        title=&quot;노벰버펜션 8&quot;
        src=&quot;/static/afe78ab7e56c9e5275f2455cae683ffd/8c797/IMG_4874.jpg&quot;
        srcset=&quot;/static/afe78ab7e56c9e5275f2455cae683ffd/d2f63/IMG_4874.jpg 163w,
/static/afe78ab7e56c9e5275f2455cae683ffd/c989d/IMG_4874.jpg 325w,
/static/afe78ab7e56c9e5275f2455cae683ffd/8c797/IMG_4874.jpg 575w&quot;
        sizes=&quot;(max-width: 575px) 100vw, 575px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 575px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 133.12883435582822%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQBAgMF/8QAFgEBAQEAAAAAAAAAAAAAAAAAAQIA/9oADAMBAAIQAxAAAAHWy68Uycg2lhR1ILhX/8QAHRAAAgIBBQAAAAAAAAAAAAAAAQIAAxMREiIxMv/aAAgBAQABBQLjkcoJrGFhsvtO92LnIZV5xwRep//EABYRAQEBAAAAAAAAAAAAAAAAABABEf/aAAgBAwEBPwHSH//EABcRAAMBAAAAAAAAAAAAAAAAAAABERD/2gAIAQIBAT8BhBvP/8QAIBAAAgEDBAMAAAAAAAAAAAAAAAERAhIxAyAhYUFRof/aAAgBAQAGPwKLZq9krL6Oavoq9NXGFPTJH4Ht/8QAGxABAQEBAAMBAAAAAAAAAAAAAREAIRAxQVH/2gAIAQEAAT8hIuAjgCgN2Y/pMHiJ3uCh6LKm4h8mFBYnowes7O6Xza7/2gAMAwEAAgADAAAAEAcdzf/EABYRAQEBAAAAAAAAAAAAAAAAAAARAf/aAAgBAwEBPxArCv/EABgRAAIDAAAAAAAAAAAAAAAAAAAQESEx/9oACAECAQE/ENLQQf/EAB0QAQADAQACAwAAAAAAAAAAAAEAESExUXFhgfD/2gAIAQEAAT8QqBiCaS+cIYhWjXnWAVb1zEOSAcqperWbOqMB3fRBtJWA/vMR6ShhfvzKsFQFNAHCLrLPU2l7Eip8T5J//9k=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;노벰버펜션 9&quot;
        title=&quot;노벰버펜션 9&quot;
        src=&quot;/static/9e9f1f3ae8951b4deb044c396141c360/8c797/IMG_4875.jpg&quot;
        srcset=&quot;/static/9e9f1f3ae8951b4deb044c396141c360/d2f63/IMG_4875.jpg 163w,
/static/9e9f1f3ae8951b4deb044c396141c360/c989d/IMG_4875.jpg 325w,
/static/9e9f1f3ae8951b4deb044c396141c360/8c797/IMG_4875.jpg 575w&quot;
        sizes=&quot;(max-width: 575px) 100vw, 575px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 575px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 133.12883435582822%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQBAgMF/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEAMQAAABvK8Z1cBiOPX51JM3Ef/EAB4QAAIBBAMBAAAAAAAAAAAAAAECEgADESIEEzFB/9oACAEBAAEFAlfKve1ByOLsrSoeXVi7XHIr7EdjgS//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAgEBPwGEP//EABwQAAICAwEBAAAAAAAAAAAAAAABAhEQEiEikf/aAAgBAQAGPwLabtHmH0sla4NCNocRTy8f/8QAHRABAAICAwEBAAAAAAAAAAAAAQARIUExUWFx8P/aAAgBAQABPyHNwNEsSldqowLZHQBRt/M1447nG8j0Hw1L237WYLXLKvKNHWDiGwNT/9oADAMBAAIAAwAAABBsGDP/xAAWEQADAAAAAAAAAAAAAAAAAAABEBH/2gAIAQMBAT8QJVq//8QAFhEBAQEAAAAAAAAAAAAAAAAAEQAQ/9oACAECAQE/EAxr/8QAHxABAQACAQQDAAAAAAAAAAAAAREAITFBUXGhgbHR/9oACAEBAAE/ELEVsNG+37h6LlRevOA4CTDpcWb5A4I3YP0zRQ0+HF3MYScA9YiTMi4rB5Z6z8bhoC8OAgKJs74EJqo7ZxIoWPXP/9k=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;노벰버펜션 10&quot;
        title=&quot;노벰버펜션 10&quot;
        src=&quot;/static/7cae5a1033cd4fad43238f0d4069fa11/8c797/IMG_4876.jpg&quot;
        srcset=&quot;/static/7cae5a1033cd4fad43238f0d4069fa11/d2f63/IMG_4876.jpg 163w,
/static/7cae5a1033cd4fad43238f0d4069fa11/c989d/IMG_4876.jpg 325w,
/static/7cae5a1033cd4fad43238f0d4069fa11/8c797/IMG_4876.jpg 575w&quot;
        sizes=&quot;(max-width: 575px) 100vw, 575px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 575px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 133.12883435582822%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAwAEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAL/2gAMAwEAAhADEAAAAcadbGt8VQoMOm8Q/wD/xAAdEAACAgIDAQAAAAAAAAAAAAABAgADEzIQERIh/9oACAEBAAEFAmAyUdZolNbBawG8wsYrK3FuzaA/P//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BH//EABgRAAIDAAAAAAAAAAAAAAAAAAABEBEx/9oACAECAQE/ASh7H//EACEQAAECBAcAAAAAAAAAAAAAAAABAhASIVEgIjJBcYGR/9oACAEBAAY/Aq2OoTKrnc0MvpqL4Jt4f//EABwQAAMAAgMBAAAAAAAAAAAAAAABESFBMVGRcf/aAAgBAQABPyG5Aph2Eick+KFakopbeimnGuj6g8sZq1hiKfUZGT//2gAMAwEAAgADAAAAEDzUsP/EABcRAAMBAAAAAAAAAAAAAAAAAAABERD/2gAIAQMBAT8QKJ1Z/8QAGBEBAQADAAAAAAAAAAAAAAAAAQAQETH/2gAIAQIBAT8QU5EGsP/EAB8QAQACAgICAwAAAAAAAAAAAAEAESExQVFxgWGxwf/aAAgBAQABPxDYm3zVJzHsU/YgJDVutAeeY1TpopR0TUD9olaXFGX5VMwadYT1AWU1x4l5KNJiMrgtnCzbGj6n/9k=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;노벰버펜션 11&quot;
        title=&quot;노벰버펜션 11&quot;
        src=&quot;/static/834086c0b74af599bb44f961ae01cce6/8c797/IMG_4877.jpg&quot;
        srcset=&quot;/static/834086c0b74af599bb44f961ae01cce6/d2f63/IMG_4877.jpg 163w,
/static/834086c0b74af599bb44f961ae01cce6/c989d/IMG_4877.jpg 325w,
/static/834086c0b74af599bb44f961ae01cce6/8c797/IMG_4877.jpg 575w&quot;
        sizes=&quot;(max-width: 575px) 100vw, 575px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 575px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 133.12883435582822%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAMCBAUG/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAIB/9oADAMBAAIQAxAAAAFrsO7FaQwlzNiTWoNI1//EAB0QAAICAgMBAAAAAAAAAAAAAAECAxEAEgQQITH/2gAIAQEAAQUC45BjLe3kOtxBqhbaOsRiMLuCvS/P/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAEQEf/aAAgBAwEBPwF3T//EABYRAQEBAAAAAAAAAAAAAAAAAAAREP/aAAgBAgEBPwFVz//EAB8QAAIBAwUBAAAAAAAAAAAAAAABEQIhMRAgIjJhgf/aAAgBAQAGPwK9WCzMkVtofjzpJ2fw4zGz/8QAHxAAAgMAAAcAAAAAAAAAAAAAAREAITEQQVFhcZGx/9oACAEBAAE/IaYBqgQjK2ItR1yYucO1SAUEMpEUR3ljryICAIfqH+y+FnrL7Puf/9oADAMBAAIAAwAAABBkPcL/xAAYEQEBAAMAAAAAAAAAAAAAAAABABARQf/aAAgBAwEBPxBW2DuH/8QAGREBAQADAQAAAAAAAAAAAAAAAQARIUFR/9oACAECAQE/EA3I8niwPL//xAAeEAEAAgIDAAMAAAAAAAAAAAABABEhQTFRcbHB0f/aAAgBAQABPxBYO0BQs5lIxzA8uiChbEzBRmL7XTMjW+xNcyrZb1gymCG6zQ8EWLqvY/MxTvhS5qvqAXJEEpHjUCKu+/2f/9k=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;노벰버펜션 12&quot;
        title=&quot;노벰버펜션 12&quot;
        src=&quot;/static/cba681690a0c298840a7e8189543e49c/8c797/IMG_4878.jpg&quot;
        srcset=&quot;/static/cba681690a0c298840a7e8189543e49c/d2f63/IMG_4878.jpg 163w,
/static/cba681690a0c298840a7e8189543e49c/c989d/IMG_4878.jpg 325w,
/static/cba681690a0c298840a7e8189543e49c/8c797/IMG_4878.jpg 575w&quot;
        sizes=&quot;(max-width: 575px) 100vw, 575px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 575px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 133.12883435582822%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGQAAAwADAAAAAAAAAAAAAAAAAAMEAQIF/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEAMQAAABxG3SdGk4jqNoCZxgn//EABwQAAICAgMAAAAAAAAAAAAAAAECAAMREgQUIP/aAAgBAQABBQLaXsJWy6sxU2AGdaXcc2Q0jGuPH//EABYRAAMAAAAAAAAAAAAAAAAAAAAQEf/aAAgBAwEBPwEr/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAHBAAAgICAwAAAAAAAAAAAAAAAAECERIhIDJB/9oACAEBAAY/AvSJuRSViyR2FU8aFt64/wD/xAAeEAEAAwABBQEAAAAAAAAAAAABABEhMRBBUXGBkf/aAAgBAQABPyFucH5Lg3NbI5PcyWyr1HClpdXxLug/InQFsqJDQBfmAFHBL6M//9oADAMBAAIAAwAAABDAAXz/xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QRDbVlt//xAAZEQADAAMAAAAAAAAAAAAAAAAAAREhQVH/2gAIAQIBAT8QuiLoncEP/8QAHBABAAMBAAMBAAAAAAAAAAAAAQARITFBUXHh/9oACAEBAAE/EAI+gkT16wHv5DIFuiVRFNHNllKZ6jyBxA9EPO5a4VA9Ft29Y4LSh0h5h4ngF8giti32dT//2Q==&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;노벰버펜션 13&quot;
        title=&quot;노벰버펜션 13&quot;
        src=&quot;/static/1296614cb22e727a747e6243f38a3fa7/8c797/IMG_4881.jpg&quot;
        srcset=&quot;/static/1296614cb22e727a747e6243f38a3fa7/d2f63/IMG_4881.jpg 163w,
/static/1296614cb22e727a747e6243f38a3fa7/c989d/IMG_4881.jpg 325w,
/static/1296614cb22e727a747e6243f38a3fa7/8c797/IMG_4881.jpg 575w&quot;
        sizes=&quot;(max-width: 575px) 100vw, 575px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEAv/EABYBAQEBAAAAAAAAAAAAAAAAAAIAA//aAAwDAQACEAMQAAAB3O2PJrKBX//EABoQAAIDAQEAAAAAAAAAAAAAAAECAAMREhP/2gAIAQEAAQUCrC7cqRlbTYOOtHtk/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BiP/EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwGVr//EAB4QAAIBAwUAAAAAAAAAAAAAAAABEQISISIxMkGh/9oACAEBAAY/AuJKWe4NNJbV4JbQYZ//xAAaEAEAAgMBAAAAAAAAAAAAAAABABEhMXFh/9oACAEBAAE/IVaFNqTDKh20SotpOx+YQCmCr9ZbCg5P/9oADAMBAAIAAwAAABAsz//EABgRAAIDAAAAAAAAAAAAAAAAAAARASFB/9oACAEDAQE/EJe9GP/EABgRAAIDAAAAAAAAAAAAAAAAAAARASEx/9oACAECAQE/EKVOCH//xAAcEAEAAgMBAQEAAAAAAAAAAAABESEAMUFRYYH/2gAIAQEAAT8QajMg9iNnwwEjUFDQUdvmESzIlg6b/Meaawby6ohiVmpfDzHUBwWf/9k=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;노벰버펜션 14&quot;
        title=&quot;노벰버펜션 14&quot;
        src=&quot;/static/c1ad8f83a01d75d10a5f9f78a40c7210/6aca1/november14.jpg&quot;
        srcset=&quot;/static/c1ad8f83a01d75d10a5f9f78a40c7210/d2f63/november14.jpg 163w,
/static/c1ad8f83a01d75d10a5f9f78a40c7210/c989d/november14.jpg 325w,
/static/c1ad8f83a01d75d10a5f9f78a40c7210/6aca1/november14.jpg 650w,
/static/c1ad8f83a01d75d10a5f9f78a40c7210/212bf/november14.jpg 768w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBP/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAGRjtNMKD//xAAaEAACAwEBAAAAAAAAAAAAAAABAgADERIi/9oACAEBAAEFAhb7ZmaCxYToOavAH//EABURAQEAAAAAAAAAAAAAAAAAAAAS/9oACAEDAQE/AUv/xAAWEQEBAQAAAAAAAAAAAAAAAAAAEjH/2gAIAQIBAT8BxT//xAAeEAACAQMFAAAAAAAAAAAAAAAAAVECERIhIjKhsf/aAAgBAQAGPwLc9IHZPLxEiUFPZxP/xAAaEAEAAwEBAQAAAAAAAAAAAAABABEhUUGh/9oACAEBAAE/ISsrRajoyrYU8UdYlABrJoUtla8gofc//9oADAMBAAIAAwAAABADz//EABYRAQEBAAAAAAAAAAAAAAAAAAERAP/aAAgBAwEBPxAiXVv/xAAWEQEBAQAAAAAAAAAAAAAAAAAAEQH/2gAIAQIBAT8Q2kP/xAAdEAEBAAMAAwEBAAAAAAAAAAABEQAhMUFRkYGh/9oACAEBAAE/EEu8K9WE+ZNRFUelQ+bz0kvA83/blte2G1QtwTlINg6Tz3vM3egsqs/M/9k=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;노벰버펜션 15&quot;
        title=&quot;노벰버펜션 15&quot;
        src=&quot;/static/1da7de34b783637315035291375f2e59/6aca1/november15.jpg&quot;
        srcset=&quot;/static/1da7de34b783637315035291375f2e59/d2f63/november15.jpg 163w,
/static/1da7de34b783637315035291375f2e59/c989d/november15.jpg 325w,
/static/1da7de34b783637315035291375f2e59/6aca1/november15.jpg 650w,
/static/1da7de34b783637315035291375f2e59/212bf/november15.jpg 768w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2 id=&quot;주문진항-활어회센터-팔팔&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%A3%BC%EB%AC%B8%EC%A7%84%ED%95%AD-%ED%99%9C%EC%96%B4%ED%9A%8C%EC%84%BC%ED%84%B0-%ED%8C%94%ED%8C%94&quot; aria-label=&quot;주문진항 활어회센터 팔팔 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;주문진항 활어회센터 팔팔&lt;/h2&gt;
&lt;p&gt;여기 회가 맛있다. 참돔을 먹었는데, 쫀득, 고소, 담백하다. 사장님이 회를 잘 썰어주신다. 그리고 밑반찬과 매운탕 또한 맛있었다. 전은 따뜻한 게 금방 해주신 것 같았다. 회를 주시면서 부위들을 설명해주시고, 중간중간 괜찮은지 여쭤봐주신다. 여기도 서비스가 확실한 집인 것 같다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECA//EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAGNE4ZNgf/EABsQAQACAgMAAAAAAAAAAAAAAAEAAgMREhMx/9oACAEBAAEFArBeocBxbX1yTsn/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAYEQACAwAAAAAAAAAAAAAAAAAAAREhQf/aAAgBAgEBPwFTpZ//xAAcEAACAgIDAAAAAAAAAAAAAAAAASExERIiUaH/2gAIAQEABj8C1bnsScqqOKIRjHpR/8QAHBAAAgICAwAAAAAAAAAAAAAAAREAIUFRMXGB/9oACAEBAAE/IeWbqnMhhLS4UOoQGRsmHSELbEWuns//2gAMAwEAAgADAAAAENgv/8QAFhEBAQEAAAAAAAAAAAAAAAAAACFR/9oACAEDAQE/EE1//8QAFxEBAAMAAAAAAAAAAAAAAAAAABFxof/aAAgBAgEBPxCQpr//xAAdEAEBAAICAwEAAAAAAAAAAAABEQAxIUFRYXHR/9oACAEBAAE/ELjMtNDSzImVFqTzbx9y/wBFRiPeCrl3kh8MGQ3NCvrWstoQXV/mf//Z&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;팔팔횟집 1&quot;
        title=&quot;팔팔횟집 1&quot;
        src=&quot;/static/55617680257d664b76bb8189159b37ab/6aca1/IMG_4882.jpg&quot;
        srcset=&quot;/static/55617680257d664b76bb8189159b37ab/d2f63/IMG_4882.jpg 163w,
/static/55617680257d664b76bb8189159b37ab/c989d/IMG_4882.jpg 325w,
/static/55617680257d664b76bb8189159b37ab/6aca1/IMG_4882.jpg 650w,
/static/55617680257d664b76bb8189159b37ab/212bf/IMG_4882.jpg 768w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 575px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 133.12883435582822%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIEAwH/xAAXAQADAQAAAAAAAAAAAAAAAAAAAgMB/9oADAMBAAIQAxAAAAHLGzsHmGKKDsxSIYf/xAAdEAABBAIDAAAAAAAAAAAAAAACAAEDEiEyEBMx/9oACAEBAAEFAs1svUBZIBNdL8x6EiZqRaf/xAAVEQEBAAAAAAAAAAAAAAAAAAARIP/aAAgBAwEBPwEj/8QAGBEAAgMAAAAAAAAAAAAAAAAAAQIRIDH/2gAIAQIBAT8BLQcp/8QAHRAAAgEEAwAAAAAAAAAAAAAAARAAAhEhUUFxgf/aAAgBAQAGPwICnsuo7l+dzBWDZ+L/xAAdEAACAgIDAQAAAAAAAAAAAAAAARFRITFBYYHR/9oACAEBAAE/IXCSmAUNi5aFJzHaioUFPHY29IlPENc2QaNrYin0yEZ+xpys/9oADAMBAAIAAwAAABDb/g7/xAAXEQADAQAAAAAAAAAAAAAAAAABEBEh/9oACAEDAQE/EBQwqr//xAAYEQADAQEAAAAAAAAAAAAAAAAAAREhUf/aAAgBAgEBPxB8njotVRKYf//EACEQAAICAgIBBQAAAAAAAAAAAAERADEhcVGhsUFhgZHh/9oACAEBAAE/EFmQag7rrzFl0gEaewxGJGgmAHp4gs2mbA98bhwJJQV9QbsgQsrJE+B+w8q8g+IsCsR8QYAHAWtIYFkQGp//2Q==&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;팔팔횟집 2&quot;
        title=&quot;팔팔횟집 2&quot;
        src=&quot;/static/37dac29c3296f72685494e8ceb0cf1e7/8c797/IMG_4883.jpg&quot;
        srcset=&quot;/static/37dac29c3296f72685494e8ceb0cf1e7/d2f63/IMG_4883.jpg 163w,
/static/37dac29c3296f72685494e8ceb0cf1e7/c989d/IMG_4883.jpg 325w,
/static/37dac29c3296f72685494e8ceb0cf1e7/8c797/IMG_4883.jpg 575w&quot;
        sizes=&quot;(max-width: 575px) 100vw, 575px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgP/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAL/2gAMAwEAAhADEAAAAYYzBXLmL//EABsQAAICAwEAAAAAAAAAAAAAAAECABEDBBIT/9oACAEBAAEFAlyQC42rbd1PVuTmIP8A/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFhEBAQEAAAAAAAAAAAAAAAAAABJx/9oACAECAQE/AcW//8QAHBAAAwABBQAAAAAAAAAAAAAAAAERIQISQZHB/9oACAEBAAY/Apovhl0b3GEjjoh//8QAGhABAAMBAQEAAAAAAAAAAAAAAQARIXExQf/aAAgBAQABPyGws6hBp1FAetxAx92UJschV6r6z//aAAwDAQACAAMAAAAQs9//xAAXEQADAQAAAAAAAAAAAAAAAAAAARFR/9oACAEDAQE/EJpEf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAcf/aAAgBAgEBPxBSYv/EABsQAQADAAMBAAAAAAAAAAAAAAEAETEhQYFx/9oACAEBAAE/EEVYdtXgdfkPDO9CLBjdCogvTEMKWwOUM9lIL6A5fJ//2Q==&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;팔팔횟집 3&quot;
        title=&quot;팔팔횟집 3&quot;
        src=&quot;/static/67723c558b009f337caed85dee4573d1/6aca1/IMG_4884.jpg&quot;
        srcset=&quot;/static/67723c558b009f337caed85dee4573d1/d2f63/IMG_4884.jpg 163w,
/static/67723c558b009f337caed85dee4573d1/c989d/IMG_4884.jpg 325w,
/static/67723c558b009f337caed85dee4573d1/6aca1/IMG_4884.jpg 650w,
/static/67723c558b009f337caed85dee4573d1/d8ebd/IMG_4884.jpg 766w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;h2 id=&quot;오대산-전나무숲&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%98%A4%EB%8C%80%EC%82%B0-%EC%A0%84%EB%82%98%EB%AC%B4%EC%88%B2&quot; aria-label=&quot;오대산 전나무숲 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;오대산 전나무숲&lt;/h2&gt;
&lt;p&gt;귀여운 다람쥐들이 널린 곳. 걷다보면 계속 다람쥐들이 와서 먹이를 달라고 한다. 삥을 뜯는 건지.. 정말 귀엽다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 74.84662576687117%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAQFAgP/xAAVAQEBAAAAAAAAAAAAAAAAAAABAP/aAAwDAQACEAMQAAAB0zLdDqTgv//EABsQAAIDAAMAAAAAAAAAAAAAAAECAAMRBBQh/9oACAEBAAEFAl5Db2BDeZ5FqbCpB//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEv/aAAgBAgEBPwEbTf/EABkQAAIDAQAAAAAAAAAAAAAAAAAhARAxEf/aAAgBAQAGPwLTBcFA6//EABsQAQACAgMAAAAAAAAAAAAAAAEAESFhMXHR/9oACAEBAAE/IeYubgrTn3GuINzxLGVpmMyf/9oADAMBAAIAAwAAABB8P//EABYRAQEBAAAAAAAAAAAAAAAAAAABIf/aAAgBAwEBPxCsf//EABcRAAMBAAAAAAAAAAAAAAAAAAABMWH/2gAIAQIBAT8Qa4aH/8QAGxABAAMBAAMAAAAAAAAAAAAAAQARITFBUdH/2gAIAQEAAT8QfdE2p5BO1HGz47YXsxcRsJWzwfpHiFj7n//Z&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;월정사 1&quot;
        title=&quot;월정사 1&quot;
        src=&quot;/static/5c60bda488984d06f7578dfd57e85ec6/6aca1/woljeonsa1.jpg&quot;
        srcset=&quot;/static/5c60bda488984d06f7578dfd57e85ec6/d2f63/woljeonsa1.jpg 163w,
/static/5c60bda488984d06f7578dfd57e85ec6/c989d/woljeonsa1.jpg 325w,
/static/5c60bda488984d06f7578dfd57e85ec6/6aca1/woljeonsa1.jpg 650w,
/static/5c60bda488984d06f7578dfd57e85ec6/212bf/woljeonsa1.jpg 768w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 177.91411042944785%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAkABQDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAECAwQF/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAHjr3TlwvRQzQUaLd5IoNX/xAAZEAADAQEBAAAAAAAAAAAAAAAAARECEiH/2gAIAQEAAQUCjIzhkIcozlyzQ8snnhoi45P/xAAYEQACAwAAAAAAAAAAAAAAAAAAEAERIf/aAAgBAwEBPwGjHC//xAAXEQADAQAAAAAAAAAAAAAAAAAAARAR/9oACAECAQE/Abgp/8QAGxAAAQUBAQAAAAAAAAAAAAAAAAEQESExEpH/2gAIAQEABj8CMNbGnqBdUpVLXxrJJhv/xAAeEAEAAwACAgMAAAAAAAAAAAABABEhMWFBcVGBkf/aAAgBAQABPyHo2dyFOKFvcvlshXqfRLVXHgOZdF4/kB3D1EgVdRQRx8Qa+T7jowWS4IXKt6z/2gAMAwEAAgADAAAAEAfATvgP/8QAGhEAAgIDAAAAAAAAAAAAAAAAABEBECExQf/aAAgBAwEBPxCY9EE8iNK//8QAGBEBAQADAAAAAAAAAAAAAAAAABEBEDH/2gAIAQIBAT8QXCVDjX//xAAdEAEBAAMAAwEBAAAAAAAAAAABEQAhMUFhgVGx/9oACAEBAAE/EAk3qFDu8ra29t5m6kfWAhjry9xACDy/3WHNSl2TNvTSTS6d8x55AVPjC9cq1C+riIB7B+vcKbJ42uTqP0XgIPEM5vHZg9k84KSEYF5n/9k=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;월정사 2&quot;
        title=&quot;월정사 2&quot;
        src=&quot;/static/e058fc9f88a396489b4ad87187fe7494/6aca1/woljeonsa2.jpg&quot;
        srcset=&quot;/static/e058fc9f88a396489b4ad87187fe7494/d2f63/woljeonsa2.jpg 163w,
/static/e058fc9f88a396489b4ad87187fe7494/c989d/woljeonsa2.jpg 325w,
/static/e058fc9f88a396489b4ad87187fe7494/6aca1/woljeonsa2.jpg 650w,
/static/e058fc9f88a396489b4ad87187fe7494/212bf/woljeonsa2.jpg 768w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 133.12883435582822%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAMBBAUC/8QAFwEBAQEBAAAAAAAAAAAAAAAAAQACA//aAAwDAQACEAMQAAAB4ZTSFsUDYjQdjpkmkV//xAAcEAADAQACAwAAAAAAAAAAAAAAAQISAxEQFDH/2gAIAQEAAQUClt1V9CmWXtCps10ZdE8GT1myEvD+/wD/xAAXEQADAQAAAAAAAAAAAAAAAAAAARIQ/9oACAEDAQE/AcklH//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/AVVX/8QAGxAAAgIDAQAAAAAAAAAAAAAAACEBEQIgMTL/2gAIAQEABj8CQpHIhHC0VGV2etP/xAAbEAEAAwEAAwAAAAAAAAAAAAABABEhMRBBUf/aAAgBAQABPyF1TL3JZtM9wC9IlxicnPDDm2YE1Ah+4a0ndcgDDw6xP//aAAwDAQACAAMAAAAQlAb9/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAEQMWH/2gAIAQMBAT8QhLZgf//EABgRAAMBAQAAAAAAAAAAAAAAAAABERAx/9oACAECAQE/EOq4tKIs/8QAHRABAAMAAwADAAAAAAAAAAAAAQARITFBUWFxwf/aAAgBAQABPxB0NeqOPF6/Z7phpycV8ZcthF1S1DaATGJX1zOQG67q4FjA7eTtSykwO2GxGk0BlT0ByUMMAhELMiVKip//2Q==&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;월정사 3&quot;
        title=&quot;월정사 3&quot;
        src=&quot;/static/56a3fafe8cc32ad07fae4a381acd02ed/6aca1/woljeonsa3.jpg&quot;
        srcset=&quot;/static/56a3fafe8cc32ad07fae4a381acd02ed/d2f63/woljeonsa3.jpg 163w,
/static/56a3fafe8cc32ad07fae4a381acd02ed/c989d/woljeonsa3.jpg 325w,
/static/56a3fafe8cc32ad07fae4a381acd02ed/6aca1/woljeonsa3.jpg 650w,
/static/56a3fafe8cc32ad07fae4a381acd02ed/212bf/woljeonsa3.jpg 768w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Gatsby 블로그에 카테고리 만들기]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/blogging/making-category-page/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/blogging/making-category-page/</guid><pubDate>Fri, 04 Oct 2019 12:12:41 GMT</pubDate><content:encoded>&lt;h2 id=&quot;발단&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%B0%9C%EB%8B%A8&quot; aria-label=&quot;발단 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;발단&lt;/h2&gt;
&lt;p&gt;카테고리가 필요하다. 인덱스 페이지에는 글 목록만 있다. 심지어 글 목록은 너무 길어서 어디에 무슨 글이 있는지도 알 수가 없다. 정리되지 않은 자료는 솔직히 있으나 마나다. 두고 볼 수가 없다.&lt;/p&gt;
&lt;h2 id=&quot;카테고리-리스트-만들기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC-%EB%A6%AC%EC%8A%A4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0&quot; aria-label=&quot;카테고리 리스트 만들기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;카테고리 리스트 만들기&lt;/h2&gt;
&lt;p&gt;카테고리를 어떻게 만들까? 우선 Gatsby가 데이터를 가져오는 방법을 참고해서 카테고리에 대한 데이터도 가져올 수 있게 해야한다. 가장 쉬운 방법은 각 게시글 markdown의 frontmatter에 category를 넣은 뒤 graphql query로 카테고리 목록을 가져오는 것이다.&lt;/p&gt;
&lt;p&gt;아래와 같이 query로 리스트를 뽑아내면 Nav 정도는 다음과 같이 쉽게 만들 수 있다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;jsx&quot;&gt;&lt;pre class=&quot;language-jsx&quot;&gt;&lt;code class=&quot;language-jsx&quot;&gt;query CategoryQuery &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  categories&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;allMarkdownRemark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;limit&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2000&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;group&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;field&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; frontmatter___category&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      fieldValue
      totalCount
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;nav&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
  &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;categories&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;category&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;category&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;nav&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2 id=&quot;카테고리의-글-목록-페이지-만들기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC%EC%9D%98-%EA%B8%80-%EB%AA%A9%EB%A1%9D-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0&quot; aria-label=&quot;카테고리의 글 목록 페이지 만들기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;카테고리의 글 목록 페이지 만들기&lt;/h2&gt;
&lt;p&gt;카테고리 별 글 목록은 전체 글 목록 파일을 참조하면 된다. &lt;code class=&quot;language-text&quot;&gt;gatsby-starter-blog&lt;/code&gt;의 전체 글 목록은 &lt;code class=&quot;language-text&quot;&gt;src/pages/index.js&lt;/code&gt; 파일이다. 내 경우엔 &lt;code class=&quot;language-text&quot;&gt;src/templates/category-page.js&lt;/code&gt; 파일을 생성했다.&lt;/p&gt;
&lt;p&gt;문제는 이 template 파일로 어떻게 페이지를 만드는가인데, gatsby의 node-api 중 createPage를 사용해야 한다. &lt;code class=&quot;language-text&quot;&gt;gatsby-node.js&lt;/code&gt; 파일을 살펴보면 글 목록을 graphql로 가져와서 posts를 생성하는 부분이 보인다. 해당 graphql query에 category를 가져오게끔 수정을 가하고, 다음과 같이 createPage 함수를 실행하면 된다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// 템플릿 파일을 가져와서&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; categoryPage &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; path&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;resolve&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;./src/templates/category-page.js&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// 카테고리 페이지를 만든다.&lt;/span&gt;
Categories&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;forEach&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;category&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;createPage&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      path&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;category&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      component&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; categoryPage&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      context&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        category&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;^/&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;category&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;위의 createPage에서 context로 넘긴 값을 &lt;code class=&quot;language-text&quot;&gt;category-page.js&lt;/code&gt; 에서 받아 사용해야 한다.&lt;/p&gt;
&lt;p&gt;graphql query에서는 다음과 같이 가져오면 되고&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; pageQuery &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; graphql&lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;
  query CategoryPage($category: String) {
    ...
  }
&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Componet에서는 다음과 같이 가져오면 된다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;CategoryPage&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; data&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; location&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; pageContext &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; category &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; pageContext&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;category
  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2 id=&quot;참고&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%B0%B8%EA%B3%A0&quot; aria-label=&quot;참고 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;참고&lt;/h2&gt;
&lt;h3 id=&quot;메뉴에-쓴-햄버거-버튼---httpscodepeniookawa-hpenxxkzlwm&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%A9%94%EB%89%B4%EC%97%90-%EC%93%B4-%ED%96%84%EB%B2%84%EA%B1%B0-%EB%B2%84%ED%8A%BC---httpscodepeniookawa-hpenxxkzlwm&quot; aria-label=&quot;메뉴에 쓴 햄버거 버튼   httpscodepeniookawa hpenxxkzlwm permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;메뉴에 쓴 햄버거 버튼 - &lt;a href=&quot;https://codepen.io/okawa-h/pen/xxKzLwm&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://codepen.io/okawa-h/pen/xxKzLwm&lt;/a&gt;&lt;/h3&gt;
&lt;h3 id=&quot;width-768px-이하에서-상단-header가-스크롤링에-따라-숨고-나타나게-하는-기능을-가진-js-library----headroomjs&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#width-768px-%EC%9D%B4%ED%95%98%EC%97%90%EC%84%9C-%EC%83%81%EB%8B%A8-header%EA%B0%80-%EC%8A%A4%ED%81%AC%EB%A1%A4%EB%A7%81%EC%97%90-%EB%94%B0%EB%9D%BC-%EC%88%A8%EA%B3%A0-%EB%82%98%ED%83%80%EB%82%98%EA%B2%8C-%ED%95%98%EB%8A%94-%EA%B8%B0%EB%8A%A5%EC%9D%84-%EA%B0%80%EC%A7%84-js-library----headroomjs&quot; aria-label=&quot;width 768px 이하에서 상단 header가 스크롤링에 따라 숨고 나타나게 하는 기능을 가진 js library    headroomjs permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;width 768px 이하에서 상단 Header가 스크롤링에 따라 숨고 나타나게 하는 기능을 가진 JS library -  headroom.js&lt;/h3&gt;</content:encoded></item><item><title><![CDATA[응급실, 새벽 5시]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/essay/record-of-pain/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/essay/record-of-pain/</guid><pubDate>Wed, 25 Sep 2019 09:24:31 GMT</pubDate><content:encoded>&lt;h2 id=&quot;새벽&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%83%88%EB%B2%BD&quot; aria-label=&quot;새벽 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;새벽&lt;/h2&gt;
&lt;p&gt;눈을 떴다&lt;/p&gt;
&lt;p&gt;누군가에겐 하루가 시작될 시간이지만 아직은 해가 뜨기 전. 나는 잠에서 깨어나 생각했다.&lt;/p&gt;
&lt;p&gt;‘왜 깬 거지?’&lt;/p&gt;
&lt;p&gt;복통이 조금 있다. 아마도 화장실을 가라는 신호인 것 같다. 잘 자고 있었던 것 같은데, 조금 아쉽다. 그래도 화장실은 가야지.&lt;/p&gt;
&lt;p&gt;일을 보려고 했다. 그러나 잘 되지 않는다. 아니, 조금의 성과도 없다. 그럼 배는 왜 아팠을까. 그래, 가끔 배가 아프지만 되지 않는 때가 있다. 오늘도 그런 때인가 보다.&lt;/p&gt;
&lt;p&gt;잠깐 상념을 흘려보낸 뒤, 다시 침대로 돌아가 눕는다. 그런데 이상하다. 배가 계속 아프다. 평소보다 훨씬 많이.&lt;/p&gt;
&lt;p&gt;‘조금 지나면 안 아프겠지’&lt;/p&gt;
&lt;p&gt;그러나 고통이 전혀 줄어들지 않는다.&lt;/p&gt;
&lt;p&gt;‘왜 이렇게 아프지?’&lt;/p&gt;
&lt;p&gt;잠들기 전에 내가 뭘 했는지 떠올린다. 기술 문서를 조금 읽고, 내일도 재밌게 게임 할 생각을 했다.&lt;/p&gt;
&lt;p&gt;10초, 20초, 30초.&lt;/p&gt;
&lt;p&gt;고통은 잦아들기는 커녕 커져간다. 내장을 쥐어짜는 듯한 고통.&lt;/p&gt;
&lt;p&gt;이제야 조금 알겠다. 이건 절대 화장실 신호가 아니다. 맹장염 같은 걸까? 장 꼬임 그런 건가? 암 같은 건 아니겠지? 에이.. 설마&lt;/p&gt;
&lt;p&gt;겁(劫)과 찰나(刹那)라고 하던가?&lt;/p&gt;
&lt;p&gt;지금 내 머릿속이 그렇다. 찰나의 시간일진데 내 머릿속은 겁과도 같다.&lt;/p&gt;
&lt;p&gt;고통 때문이겠지. 사람이 죽기 전에 주마등이 스친다던데. 아직 그 정도는 아니지만 거기에 근접할지도 모른다는 생각이 든다.&lt;/p&gt;
&lt;p&gt;이 와중에 고통은 걷잡을 수 없이 커진 상태, 나는 더 이상 누워있기도 힘들다.&lt;/p&gt;
&lt;p&gt;일단 아내를 깨우자. 그리고 119을 부르게 해야할 것 같다.&lt;/p&gt;
&lt;p&gt;“일어나…일어나 봐…”&lt;/p&gt;
&lt;p&gt;아내를 깨웠다. 아내는 이 때 ‘뭐지.. 졸려 죽겠는데 왜 나를 깨우지’ 라고 생각했단다.&lt;/p&gt;
&lt;p&gt;나는 아내에게 오른쪽 옆구리가 아프다고 말한다. 아내도 맹장인가 싶어한다. 나는 아내에게 119를 불러달라고 말한다.&lt;/p&gt;
&lt;p&gt;아내는 잠시 고민하는 듯 한다. 물론 나도 고민했다. 정말 119를 부를 일인지. 119를 한 번도 불러본 적이 없는데. 엄청 위급한 상황에만 부르는 것 아닌가?&lt;/p&gt;
&lt;p&gt;그러나 나는 고통에 몸을 이리저리 뒤틀며 바닥을 구르고 있다. 누워 있지도, 서 있을 수도, 엎드리지도 못한다. 어떤 자세를 해도 고통은 줄어들지 않았기에 그저 119를 불러야 한다는 생각 뿐이다.&lt;/p&gt;
&lt;p&gt;‘죽나?’&lt;/p&gt;
&lt;p&gt;짧은 시간동안 아내에게 이건 119를 불러야 할 상황임을 설득했다. 고통의 몸부림과 입에서 나오는 신음으로. 결국 아내는 119에 전화했고 나의 증상을 설명했다.&lt;/p&gt;
&lt;h2 id=&quot;구급차&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EA%B5%AC%EA%B8%89%EC%B0%A8&quot; aria-label=&quot;구급차 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;구급차&lt;/h2&gt;
&lt;p&gt;전화한 지 약 10분 뒤에 구급차가 도착했다. 정말 빠르게 왔다.&lt;/p&gt;
&lt;p&gt;구급 대원들이 우리집에 왔고, 내게 걸을 수 있겠냐 물어보며 구급차로 안내한다. 잠시 고통이 줄어든 상태다. 왜인지 모르겠지만 걸을 수 있다.&lt;/p&gt;
&lt;p&gt;그러나 구급차로 걸어갈 수록 다시 배가 아파온다. 걸으면 안 되는 것 같다.&lt;/p&gt;
&lt;p&gt;빠르게 구급차에 들어가 침대에 눕는다. 여기에 누워볼 거라곤 평생 상상도 못했다. 눕는 순간부터 병원에 도착할 때까지 왜 내가 아픈지 생각한다.&lt;/p&gt;
&lt;p&gt;그 와중에도 나는 와이프에게 농담을 하고 있다.&lt;/p&gt;
&lt;h2 id=&quot;병원&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%B3%91%EC%9B%90&quot; aria-label=&quot;병원 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;병원&lt;/h2&gt;
&lt;p&gt;구급차는 병원에 도착했다. 아파서 빨랐는지 느렸는지는 잘 모르겠다. 구급대원이 휠체어를 준비해준다. 그래. 걸을 수 없으니 휠체어에 타야지.&lt;/p&gt;
&lt;p&gt;정말 아파 죽겠다. 그렇지만 접수가 필요하다. 다행히 아내가 대신 해주었다. 아내가 없었다면 내가 119까지는 불렀을 수 있는데, 접수는 할 수 있었을까?&lt;/p&gt;
&lt;p&gt;휠체어에 타고 응급실에 오다니. 그래, 들것에 실려오는 것보단 훨씬 낫다.&lt;/p&gt;
&lt;p&gt;잠시 아파하며 기다리니 진료실로 오라고 한다. 의사 선생님이 내게 어디가 아픈지 물어보신다. 나는 오른쪽 배, 옆구리 등이 아프다고 했다. 그러자 그 분이 나의 오른쪽 아랫쪽 등을 주먹으로 두드린다. 그 부분이 많이 아팠다.&lt;/p&gt;
&lt;p&gt;‘뭐지? 여기가 두드려고 아픈 부분이 아닐 텐데?’&lt;/p&gt;
&lt;p&gt;의사가 말한다.&lt;/p&gt;
&lt;p&gt;“요로결석일 가능성이 높은데, 검사들을 해봐야 정확히 알 수 있다.”&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;지금 생각해보면 요로결석은 증상이 뚜렷하다. 우선 외상은 아니다. 사지 멀쩡하다. 그런데 고통이 상당히 크다. 그리고 신장 부분이 아픈 것. 응급실에 젊은 남성이 멀쩡한데 엄청난 고통을 호소하고 있으면 대부분이 요로결석이며, 그 고통은 남성이 겪을 수 있는 top 3에 든다고 한다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;나는 소변검사와 피검사를 마치고 의자에 앉았다. 간호사가 진통제를 놓아준다. 그리고 수액을 놓는다. 바늘이 차갑고 뻐근하다. 난 바늘이 정말 싫다.&lt;/p&gt;
&lt;p&gt;나는 눕고 싶다. 역시 눕는 게 가장 덜 아플 것 같다. 누워서 몸부림치고 싶다. 그런데 누울 곳이 없다. 응급실의 의자는 마치 공원의 노숙자들을 막기 위한 의자처럼 생겼다. 치사하게씨리. 혹시 누울 곳이 없냐고 물어도 없단다. 에휴.&lt;/p&gt;
&lt;p&gt;아내는 내 손이 너무 차다고 말한다. 왜일까, 혈액순환이 잘 안 됐던 걸까. 어쩐지 춥더라. 나는 아내에게 춥다고 얘기한다. 아내는 간호사에게 가서 담요 같은 것을 부탁했다. 담요가 없어서 침대 시트를 받았다. 꽤 따뜻하다.&lt;/p&gt;
&lt;p&gt;정확한 검사를 위해 CT를 찍어야 한단다. 그런데 약 한시간 반인가 두시간 정도를 의자에서 기다리고 있어야 한단다. 미치겠다. 아파 죽겠는데 그 시간을 기다려야 한다니. 믿을 수가 없다. 아니, 죽을 것 같은데 그 시간을 어떻게 기다려?&lt;/p&gt;
&lt;h2 id=&quot;정신이-이상한-여자&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%A0%95%EC%8B%A0%EC%9D%B4-%EC%9D%B4%EC%83%81%ED%95%9C-%EC%97%AC%EC%9E%90&quot; aria-label=&quot;정신이 이상한 여자 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;정신이 이상한 여자&lt;/h2&gt;
&lt;p&gt;갑자기 밖에서 웬 여성의 외침이 들렸다.&lt;/p&gt;
&lt;p&gt;“너 가! 너 필요 없어! 필요 없다고! 엄마, 얘 가라그래. 얘 보내. 그리고 신랑 불러줘!!!”&lt;/p&gt;
&lt;p&gt;이게 영어였다면 대문자로 다 써야 한다. 그래, 이 여자는 고래고래 소리를 지르고 있다. 응급실 앞에서.&lt;/p&gt;
&lt;p&gt;뭐지? 엄청 위급한 일이 있나보다. 응급실이 혼란스럽다. 그런데 저 시끄러운 소리 때문에 더 아프다. 누가 쟤 입 좀 막아줘..&lt;/p&gt;
&lt;p&gt;잠시 소란이 잦아들었다. 그리고 어떤 통통한 여성과 아줌마가 응급실로 들어왔다. 겉보기에 매우 정상적으로 보인다. 간호사가 이들을 빈 진료실로 안내한다. 그런데 진료실 앞에서 그 여성이 갑자기 난리를 피운다.&lt;/p&gt;
&lt;p&gt;“이거 나 가두려는 거 알아. 나 다 알아.”&lt;/p&gt;
&lt;p&gt;이 여자가 아까 그 소리지르던 여자구나. 목소리가 같다. 그런데 왜 저러는 걸까?&lt;/p&gt;
&lt;p&gt;여자와 간호사가 빈 진료실 앞에서 실랑이를 벌이고 있다. 하필이면 내가 앉아있는 곳 근처다.&lt;/p&gt;
&lt;p&gt;아파 죽겠는데 쟤는 도대체 뭐야. 심지어 저 문 미닫이 문인데 가둔다니 어떻게? 갇혔던 적이 있는 건가? 아무래도 정신이 아파보인다.&lt;/p&gt;
&lt;p&gt;의사가 와서 여자를 진정시키려 한다.&lt;/p&gt;
&lt;p&gt;“아니에요. 이 문은 안에서도 열려요. 확인해보세요.”&lt;/p&gt;
&lt;p&gt;그 여자의 어머니로 보이는 분 또한 진료실 안에 들어가서 문을 닫고 열며 그 여성을 안심시키려 한다.&lt;/p&gt;
&lt;p&gt;얼마간의 실랑이 후 그 여성은 진료실로 들어간다. 아무래도 정신이 많이 안 좋아보인다.&lt;/p&gt;
&lt;p&gt;‘새벽 응급실엔 별 사람이 다 있구나.’&lt;/p&gt;
&lt;p&gt;워낙 시끄러운 일이었기에 잠시 쳐다봤을 뿐 사실 쳐다볼 힘도 없다. 아파서 계속 몸을 이리저리 뒤틀고 있다. 이러면 조금 덜 아프다. 죽는 게 나을지도 모르겠다.&lt;/p&gt;
&lt;p&gt;잠시 눈을 들어 그 진료실을 쳐다본다. 그런데 그 여자가 들어간 진료실 문의 작은 창 틈으로 밖을 훔쳐보고 있다. 미친. X나 무섭네.&lt;/p&gt;
&lt;p&gt;나는 바로 눈을 아래로 깐다. 무슨 공포 영화에 나올 듯한 모습이다. 아.. 아프다. 그런데 저 여자 때문에 스트레스를 더 받는다. 미치겠다.&lt;/p&gt;
&lt;p&gt;아내가 곧바로 내게 저 여자가 쳐다보고 있다고 말한다. 그래, 나도 봤다. 아내는 무섭다고 한다. 그래, 나도 무섭다. 아니 아프다. 아니 무섭다..ㅜ&lt;/p&gt;
&lt;p&gt;얼마 후 그 여자의 남편으로 보이는 사람이 와서 의사와 이런저런 얘기를 한다. 여성이 다이어트 약을 먹었단다. 그 뒤로 하나님께 기도를 자주 했다는 얘기 등. 그리고 뭔가에 집착하는 증상이 있나보다. 잘 들어보니 조현병 어쩌고 얘기한다.&lt;/p&gt;
&lt;p&gt;그렇구나. 그렇지 않고서야 저렇게 무서운 행동을 할 수가 없지.&lt;/p&gt;
&lt;h2 id=&quot;진통제를-달라는-여자&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%A7%84%ED%86%B5%EC%A0%9C%EB%A5%BC-%EB%8B%AC%EB%9D%BC%EB%8A%94-%EC%97%AC%EC%9E%90&quot; aria-label=&quot;진통제를 달라는 여자 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;진통제를 달라는 여자&lt;/h2&gt;
&lt;p&gt;다시 아파온다. 진통제가 얼마 가지 않는다. 진통제가 약한 걸까? 내가 너무 아픈 걸까? 아내에게 말해서 간호사에게 진통제를 더 놓아달라고 부탁한다. 진통제를 다시 투여하니 이내 고통이 잦아든다. 그렇다고 아프지 않은 건 아니다. 그냥 참을만한 수준으로 내려갔을 뿐.&lt;/p&gt;
&lt;p&gt;“아파!!!! 아프다고!!!”&lt;/p&gt;
&lt;p&gt;갑자기 응급실 밖에서 웬 여성이 소리지르는 게 들린다.&lt;/p&gt;
&lt;p&gt;그냥 아프다고 소리를 지른다. 엄청 아픈가보다. 나도 아픈데, 저 사람은 더 아픈가보다. 뭘까. 응급환자일까?&lt;/p&gt;
&lt;p&gt;“야이 씨x년아 약 달라고!!”&lt;/p&gt;
&lt;p&gt;여자가 욕을 한다. 간호사에게 하는 것 같다. 무슨 약을 갖다달라고 한다. 자신의 진통제를 돌려달라는 것 같다.&lt;/p&gt;
&lt;p&gt;아쉽다. 나가서 무슨 일인지 보고 싶다. 나는 원래 길에서 사고가 나도 쳐다보고, 고양이가 지나가도 쳐다보고, 비둘기가 바닥에 있는 이상한 걸 쪼고 있어도 쳐다본다. 그래. 호기심이 정말 뛰어나다.&lt;/p&gt;
&lt;p&gt;저 여자는 응급실로 밖에서 10분 정도 소리를 지르고 응급실로 들어왔다. 의사는 빠르게 여자에게 가서 증상을 묻는다. 아, 소리를 지르면 의사가 빨리 오는구나?&lt;/p&gt;
&lt;p&gt;“어디가 아프세요”&lt;/p&gt;
&lt;p&gt;여자는 겉보기에 다친 곳이 없다. 엄청난 사고로 인해 어디가 부러지고 피가 흐르는 장면을 상상했는데, 아닌가보다.&lt;/p&gt;
&lt;p&gt;“아파!! 내 진통제 줘!!”&lt;/p&gt;
&lt;p&gt;의사가 아무리 물어도 여자는 저렇게 대답한다.&lt;/p&gt;
&lt;p&gt;“어디가 아프세요?”&lt;/p&gt;
&lt;p&gt;꾸준히도 묻는다. 여자도 의사가 계속 묻자 조금은 다른 대답을 한다.&lt;/p&gt;
&lt;p&gt;“끄윽… 너무.. 아파서… 말.. 못하겠다고…!!”&lt;/p&gt;
&lt;p&gt;어디가 아프냐고 묻는데 여자는 그저 아프다고, 말을 못 하겠다고 한다. 뭐지. 그럼 지금 하는 건 말이 아닌 건가?&lt;/p&gt;
&lt;p&gt;여자의 일관된 대답에 의사는 조금 상대하는가 싶더니 돌아가버린다. 이게 무슨 상황일까. 의사가 아픈 사람을 방치하고 가버린다니. 하지만 내가 저 의사였더라도 저렇게 행동했을 것 같다. 딱 봐도 정상적인 범주가 아니니까.&lt;/p&gt;
&lt;p&gt;이 여자도 정신이 아픈 경우일 수 있다. 하지만 확실한 건 몸이 아픈 것 같지는 않다. 왜냐하면 소리를 지르다가도 잠잠해지곤 한다. 그렇게 아프면 벌써 실신했을 것 같은데 말이다. 아닌가? 하긴 나도 실신은 안 했는데.&lt;/p&gt;
&lt;h2 id=&quot;두-여인의-만남&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%91%90-%EC%97%AC%EC%9D%B8%EC%9D%98-%EB%A7%8C%EB%82%A8&quot; aria-label=&quot;두 여인의 만남 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;두 여인의 만남&lt;/h2&gt;
&lt;p&gt;여자는 잠시 방치됐다. 그런데 아까 그 여자가 진료실에서 나온다. 그래.. 창문 틈으로 계속 상황을 지켜보고 있었겠지.&lt;/p&gt;
&lt;p&gt;그리고 아픈 여자에게 가서 등에 손을 얹고 기도를 하기 시작한다.&lt;/p&gt;
&lt;p&gt;‘뭐지? 이 뜬금 없는 상황은?… 미쳤네 진짜’&lt;/p&gt;
&lt;p&gt;그러자 아픈 척 하는 여자가 병실이 떠나가라 아프다고 소리를 지른다. 아니, 정확히는 등 뜨겁다고 외치고 있다.&lt;/p&gt;
&lt;p&gt;‘아, 성령의 불인가?’&lt;/p&gt;
&lt;p&gt;아니, 그럴 리가 없지. 성령이 뭐라고 여기에 강림하냐;&lt;/p&gt;
&lt;p&gt;이게 무슨 상황인지 이해가 안 된다. 웬 미친 여자 둘이 있다. 하나는 등이 뜨겁다고 외치고 있고, 다른 하나는 저 뜨거운 여자(?)의 등에 손을 얹고 있다.&lt;/p&gt;
&lt;p&gt;기도를 당하는 여자는 몸에 손을 대면 뜨겁다, 아프다 등을 연발한다.&lt;/p&gt;
&lt;p&gt;어쩌면 어딘가를 만지면 아픈 병일까? TV에서 본 적 있는 것 같다. 감각이 너무 예민해서 스치기만 해도 아프고 심지어는 바람에 의해서도 아플 수 있다고 했던 것 같다.&lt;/p&gt;
&lt;p&gt;그렇다면 저 여인은 어떻게 해서 휠체어에 앉아 있지. 그리고 아까는 잠시동안 왜 아무말도 안 했던 걸까.&lt;/p&gt;
&lt;p&gt;나는 의심을 한다. 저 여자가 진통제를 받기 위해 쇼를 하는 게 아닐까 하고. 아마 내 의심이 맞을 거라고 생각한다. 아무리 봐도 의심스럽다.&lt;/p&gt;
&lt;p&gt;그리고 저 여자도 내가 아는 지식을 갖고 있는 것 같다. 그래서 바람만 스쳐도 아픈 연기를 하는 것 같다. 보호자도 없고, 혼자 응급실에서 진통제를 요구하는 꼴이라니.&lt;/p&gt;
&lt;p&gt;마약성 진통제를 마약처럼 복용하는 약쟁이들에 대해서도 들은 바가 있기 때문에, 이 여자가 그런 류가 아닐까 싶다.&lt;/p&gt;
&lt;p&gt;아무튼, 이런 상황이니 순식간에 간호사들이 달려온다.&lt;/p&gt;
&lt;p&gt;그 조현병 여자의 어머니도 달려와서 그 손을 떼라고 말다. 그러나 그녀는 꾸준히 기도를 해주고 있다.&lt;/p&gt;
&lt;p&gt;배가 아파 죽겠는데 상황이 하도 우스워서 웃음이 난다. 어처구니가 없다.&lt;/p&gt;
&lt;p&gt;저 뜨거운 여자가 정말로 아파서 저러는 건지 모르겠지만 이 무슨 조화란 말인가. 영화를 보고 있는 건가 하고 순간 생각한다.&lt;/p&gt;
&lt;p&gt;그렇지만 이런 상황이 눈 앞에서 펼쳐지고 있다. 응급실에 오길 정말 잘했다. 아니, 그건 아닌가.&lt;/p&gt;
&lt;p&gt;‘아프지 않았다면 더 즐겁게 관람할 수 있었을 텐데.’&lt;/p&gt;
&lt;p&gt;내가 지금 아픈 상태라는 게 너무나도 아쉽다. 결국 운명은 그런 걸까? 이런 장면을 볼 수 있어도 아팠어야만 볼 수 있다. 안 아팠다면 이런 기회조차 없었겠지.&lt;/p&gt;
&lt;h2 id=&quot;요로결석&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%9A%94%EB%A1%9C%EA%B2%B0%EC%84%9D&quot; aria-label=&quot;요로결석 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;요로결석&lt;/h2&gt;
&lt;p&gt;조현병 여자는 진료실로 복귀했다.&lt;/p&gt;
&lt;p&gt;몸이 아픈 여자는 저기 구석에서 앵무새마냥 간호사 욕을 하고 있다.&lt;/p&gt;
&lt;p&gt;다시 조금 잠잠해졌다. 그래, 여기서 제일 아픈 사람은 나다. 제발 다들 조용히 해주세요. 아파 죽겠어요.&lt;/p&gt;
&lt;p&gt;아, 진통제 약빨이 벌써 떨어진다. 왜 이렇게 금방 아픈 거지.&lt;/p&gt;
&lt;p&gt;간호사에게 진통제를 요청하자 이번엔 다른 진통제를 놓아준다고 한다.&lt;/p&gt;
&lt;p&gt;그런데 이 진통제는 빠르게 고통이 사라지지 않는다. 좀 더 오래가는 진통제라는데, 더 오래가는 게 더 천천히 스며든다는 말인가?&lt;/p&gt;
&lt;p&gt;아내가 요로결석에 대해 검색을 하니, 진통제로 모르핀을 놔준단다. 그럼 내가 앞서 맞은 두 방은 모르핀인가? 걔가 원래 한 시간도 안 가는 진통제인가?&lt;/p&gt;
&lt;p&gt;아까보다는 천천히 고통이 줄어들었다. 확실히 다른 진통제인 것 같다.&lt;/p&gt;
&lt;p&gt;나는 몸을 좌우로 흔들고 있다. 정신은 이미 집 나간지 오래다. 눈 앞이 흐리고, 시간은 천천히 흘러간다. 군대에 있을 때도 이보단 빨리 갔겠다. 썩을.&lt;/p&gt;
&lt;p&gt;긴 기다림 끝에 CT실로 안내 받는다. 그리고 CT를 찍고 다시 응급실로 돌아간다.&lt;/p&gt;
&lt;p&gt;그런데 의사가 날 부르지 않는다. CT 찍었는데 왜 아직도 날 안 부르는 건데.&lt;/p&gt;
&lt;p&gt;다시 한 시간은 더 기다렸던 것 같다. 진료실로 날 부른다.&lt;/p&gt;
&lt;p&gt;의사에게 요로결석 판정을 내린다. 그 얘기를 듣자 고통이 조금 경감됐다. 아마도 죽지 않을 병이라는 사실에 안심해서이리라.&lt;/p&gt;
&lt;p&gt;‘하.. 죽는 건 아니구나.’&lt;/p&gt;
&lt;p&gt;그래도 죽을 정도로 아프다. 그런데 죽지 않는다. 차라리 죽는 게 낫겠어.&lt;/p&gt;
&lt;p&gt;그런데 의사 선생님이 청천벽력 같은 말씀을 하신다.&lt;/p&gt;
&lt;p&gt;돌이 작아서 시술보다는 자연배출을 기다리자고 하신다. 원망스럽다. 나는 죽을 것 같은데. 이 아픔을 언제까지 견디란 말이지?&lt;/p&gt;
&lt;p&gt;고통은 새벽에 비해서는 조금 나아졌다. 계속 움직이니까 그런 건지, 약빨인진 모르겠다.&lt;/p&gt;
&lt;p&gt;아무쪼록 나와 아내는 진통제와 약을 처방받고 CT를 CD로 받을 후 병원을 나섰다.&lt;/p&gt;
&lt;p&gt;약간의 안심을 갖고 집으로 향한다. 택시를 타고 갈 수 밖에 없다.&lt;/p&gt;
&lt;p&gt;아내는 나 때문에 회사에 월차를 냈다. 그리고 잠시 산부인과에 다녀왔다. 임신을 한 상태라 나 때문에 새벽부터 놀라서 애기가 잘 있는지 확인하러 간다고 한다.&lt;/p&gt;
&lt;p&gt;나는 집에 와서 종일 잠을 잤다. 중간에 눈을 뜨면 배가 아파서 진통제를 먹고 다시 잤다.&lt;/p&gt;
&lt;h2 id=&quot;경과&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EA%B2%BD%EA%B3%BC&quot; aria-label=&quot;경과 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;경과&lt;/h2&gt;
&lt;p&gt;다음날 우습게도 몸이 괜찮아진 느낌이 들었다. 그러나 오른쪽 신장 부분은 아직 때리면 아팠다. 그리고 종종 통증이 다시 올라온다. 나는 물을 계속 마시며 몸을 막 흔들었다. 검색해보니 헬스장에 가서 물을 엄청 마시고 덜덜이에 몸을 맡기면 돌님이 빠르게 나오신다고 한다.&lt;/p&gt;
&lt;p&gt;그리고 그 다음날, 그러니까 사고 이후 이틀 뒤에 갑자기 혈뇨를 눴다(미안해요. 조금 더럽네). 그리고 중간에 뭔가 나가는 느낌이 들었다. 그건 아마 돌이었으리라. 그러나 확실히 보지 못했고, 신장 부근은 계속 아팠기에 계속 돌님이 몸에 계신 줄 알았다.&lt;/p&gt;
&lt;p&gt;일주일 뒤에 비뇨기과를 찾아가서 검사를 받았다.&lt;/p&gt;
&lt;p&gt;그리고 검사 결과 오줌에서 피가 검출되지 않고, 엑스레이를 통해 돌이 보이지 않음을 확인할 수 있었다.&lt;/p&gt;
&lt;h2 id=&quot;휴&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%ED%9C%B4&quot; aria-label=&quot;휴 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;휴&lt;/h2&gt;
&lt;p&gt;응급실을 간 것도 처음, 그런 이상한 여자들을 본 것도 처음, 비뇨기과를 간 것도 처음이었다.&lt;/p&gt;
&lt;p&gt;앞으로 물을 많이 마셔야겠다고 다짐했다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Gatsby 블로그에 Reading time 추가하기]]></title><description><![CDATA[계기 redux를 만든 Dan Abramov의 블로그에 가면 게시글마다 reading time…]]></description><link>https://ohseunghyeon.github.io/blogging/add-reading-time-of-post/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/blogging/add-reading-time-of-post/</guid><pubDate>Tue, 24 Sep 2019 13:36:30 GMT</pubDate><content:encoded>&lt;h2 id=&quot;계기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EA%B3%84%EA%B8%B0&quot; aria-label=&quot;계기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;계기&lt;/h2&gt;
&lt;p&gt;redux를 만든 Dan Abramov의 &lt;a href=&quot;https://overreacted.io/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;블로그&lt;/a&gt;에 가면 게시글마다 reading time이 표시되어 있다.
사실 나는 이런 기능을 예전에 어딘가에서 본 적이 있지만, 어디가 원조였는지도 모르고, 어떻게 구현하는지도 모르며, 알고 싶지도 않다.&lt;/p&gt;
&lt;p&gt;중요한 건 저게 쿨해보였다는 거다.&lt;/p&gt;
&lt;h2 id=&quot;적용해보기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0&quot; aria-label=&quot;적용해보기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;적용해보기&lt;/h2&gt;
&lt;p&gt;혹시 plugin이 있나? 하고 찾아봤더니 다음과 같은 플러그인이 있었다.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;a href=&quot;https://www.gatsbyjs.org/packages/gatsby-remark-reading-time&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;gatsby-remark-reading-time&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;이걸 발견한 나는 곧바로 설치하고 블로그에 적용했다. 저 이모지는 배껴왔고, 로직은 만들었다가 더 나은 로직이 보여서 그대로 배껴왔다.&lt;/p&gt;
&lt;p&gt;그런데 이상한 점은, Abramov의 블로그 소스에서는 나와 다른 방식으로 reading time을 가져오고 있었는데, 심지어 reading time을 가져오는 plugin이 없었다.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;이게 어떻게 된 일이지?&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;대신 timeToRead가 있다. 얘는 plugin으로 추가하는 게 아닌가?
곧장 &lt;strong&gt;graphiql 도구&lt;/strong&gt;로 가서 다음 쿼리를 실행했다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;graphql&quot;&gt;&lt;pre class=&quot;language-graphql&quot;&gt;&lt;code class=&quot;language-graphql&quot;&gt;  &lt;span class=&quot;token keyword&quot;&gt;query&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    allMarkdownRemark&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      edges &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        node &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;          timeToRead&lt;/span&gt;        &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;그랬더니 &lt;em&gt;분&lt;/em&gt;에 해당하는 number가 고스란히 출력되는 걸 확인할 수 있었다.&lt;/p&gt;
&lt;h2 id=&quot;따라해보기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%94%B0%EB%9D%BC%ED%95%B4%EB%B3%B4%EA%B8%B0&quot; aria-label=&quot;따라해보기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;따라해보기&lt;/h2&gt;
&lt;p&gt;query에 timeToRead를 추가한 파일은 다음과 같다&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;/src/pages/index.js&lt;/li&gt;
&lt;/ol&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;graphql&quot;&gt;&lt;pre class=&quot;language-graphql&quot;&gt;&lt;code class=&quot;language-graphql&quot;&gt;  &lt;span class=&quot;token keyword&quot;&gt;query&lt;/span&gt; BlogPostBySlug&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token variable&quot;&gt;$slug&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; String&lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;
    &lt;span class=&quot;token fragment function&quot;&gt;markdownRemark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;
      &lt;span class=&quot;token fragment function&quot;&gt;timeToRead&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;ol start=&quot;2&quot;&gt;
&lt;li&gt;/src/templates/blog-post.js&lt;/li&gt;
&lt;/ol&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;graphql&quot;&gt;&lt;pre class=&quot;language-graphql&quot;&gt;&lt;code class=&quot;language-graphql&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;query&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;
    &lt;span class=&quot;token fragment function&quot;&gt;allMarkdownRemark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      edges &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        node &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
          &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;
          &lt;span class=&quot;token fragment function&quot;&gt;timeToRead&lt;/span&gt;
          &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;그러면 각각 &lt;strong&gt;1. post.timeToRead&lt;/strong&gt;와 &lt;strong&gt;2. node.timeToRead&lt;/strong&gt;로 값에 접근할 수 있다.&lt;/p&gt;
&lt;p&gt;이 값을 이쁜 커피잔과 도시락으로 변경하는 로직은 overreacted.io 저장소의 &lt;a href=&quot;https://github.com/gaearon/overreacted.io/blob/efdf124152fa5cd5eae44f62e3ba73c27d4a3e38/src/utils/helpers.js#L1&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;/src/utils/helpers.js&lt;/a&gt;에서 확인하면 된다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[gatsby-starter-blog 새로운 글 생성 스크립트 만들기]]></title><description><![CDATA[Gatsby는 새로운 post를 만드는 스크립트가 없다 예전에 Jekyll이나 hexo를 사용해본 바 둘 다 새로운 포스트 생성 명령어가 있었다. 그런데 왜 Gatsby에는 없을까? 아마 Gatsby…]]></description><link>https://ohseunghyeon.github.io/blogging/making-new-post-script/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/blogging/making-new-post-script/</guid><pubDate>Tue, 24 Sep 2019 09:39:24 GMT</pubDate><content:encoded>&lt;h2 id=&quot;gatsby는-새로운-post를-만드는-스크립트가-없다&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#gatsby%EB%8A%94-%EC%83%88%EB%A1%9C%EC%9A%B4-post%EB%A5%BC-%EB%A7%8C%EB%93%9C%EB%8A%94-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EA%B0%80-%EC%97%86%EB%8B%A4&quot; aria-label=&quot;gatsby는 새로운 post를 만드는 스크립트가 없다 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Gatsby는 새로운 post를 만드는 스크립트가 없다&lt;/h2&gt;
&lt;p&gt;예전에 Jekyll이나 hexo를 사용해본 바 둘 다 &lt;strong&gt;새로운 포스트 생성 명령어&lt;/strong&gt;가 있었다. 그런데 왜 Gatsby에는 없을까? 아마 Gatsby는 블로그 생성이 툴의 주 목적이 아니기 때문으로 보인다.&lt;/p&gt;
&lt;p&gt;왜 있는지 없는지는 사실 중요하지 않다. 없다는 점. 그리고 그 사실이 나에게 주는 귀차니즘이 작지 않다는 점이 중요하다. 파일을 만들고, 새로운 frontmatter를 복사하거나 적을 때 오는 상실감(상실감까지야..)은 이루 말할 수 없다.&lt;/p&gt;
&lt;p&gt;그래서 만들기로 했다. 이전에 &lt;a href=&quot;https://jbee.io/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Jbee&lt;/a&gt;님의 &lt;a href=&quot;https://github.com/JaeYeopHan/gatsby-starter-bee&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;gatsby-starter-bee&lt;/a&gt;에서 포스트를 만드는 스크립트를 본 적이 있다. 그걸 따라서 만들기로 했다.&lt;/p&gt;
&lt;h2 id=&quot;스크립트의-로직&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EB%A1%9C%EC%A7%81&quot; aria-label=&quot;스크립트의 로직 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;스크립트의 로직&lt;/h2&gt;
&lt;p&gt;Jbee 님의 스크립트는 다음과 같이 동작한다.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;카테고리 입력: content/blog 내의 .md 파일을 다 찾아서 frontmatter의 category를 모아 그 중에서 하나를 선택하거나, 새로 입력하게 한다&lt;/li&gt;
&lt;li&gt;타이틀 입력&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;생각보다 간단하다. 다만 카테고리를 선택하는 부분을 어떻게 해야하나 고민했는데, 이 부분을 Jbee 님은 &lt;a href=&quot;https://www.npmjs.com/package/inquirer&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;inquirer&lt;/a&gt;라는 라이브러리로 해결하셨더라. 그래서 나도 저걸 사용하기로 했다.&lt;/p&gt;
&lt;p&gt;내 스크립트는 다음과 같이 동작한다.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;카테고리 입력: content/blog 내의 디렉토리만 찾아와서 category로 인식한다.&lt;/li&gt;
&lt;li&gt;타이틀 입력&lt;/li&gt;
&lt;li&gt;폴더와 파일 타입 선택&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Jbee 님의 스크립트와 비교해서 딱 한 부분이 차이난다. 3번이 추가로 이루어지는 점인데, 이는 내가 블로그 포스트를 관리해온 방법에서 차이가 있기 때문이다.&lt;/p&gt;
&lt;p&gt;나는 게시글에 image가 없으면 파일 하나를 생성하고&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;blogging
  └── making-new-post-script.md&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;image가 있으면 디렉토리를 만들어서 아래와 같이 저장한다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;blogging
  ├── making-new-post-script
  │   ├── index.md
  │   └─── image.png&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Jbee님 같은 경우 다음과 같이 image를 디렉토리에 따로 관리하시는 걸 볼 수 있었다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;essay
  ├── images
  │   ├── a.png
  │   ├── b.png
  │   └── c.png
  ├── a.md
  └── b.md&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;이런 차이로 인해 나는 file로만 생성할지, 디렉토리를 생성하고 index.md를 생성할지를 선택하는 부분을 추가했다.&lt;/p&gt;
&lt;p&gt;잠깐동안 ‘Jbee님처럼 할까?’ 생각을 했는데, 아무래도 내 스타일은 ‘한 주제에 대해서는 한 곳에 모아서 보관한다’ 이기에 그대로 두기로 했다. 만약 공예용 가위와 주방용 가위가 있을 때 둘은 가위라서 같이 둘 수도 있지만 내 경우엔 주방용이면 주방에 두고, 공예용이면 공예도구상자에 둔다는 뜻이다. 그래서 어떤 포스트가 있다면 이 포스트와 관련된 자료는 같은 디렉토리에 담아두는 것이다.&lt;/p&gt;
&lt;p&gt;(이에 대해 Jbee 님은 images 디렉토리에서 포스트 별로 이미지를 분리하는 방법을 택하셨다.)&lt;/p&gt;
&lt;p&gt;원본 소스는 &lt;a href=&quot;https://github.com/ohseunghyeon/gatsby-blog/blob/master/cli/create-new-post.js&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;여기&lt;/a&gt;에서 확인할 수 있다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Gatsby 블로그에 Draft 기능 추가하기]]></title><description><![CDATA[…]]></description><link>https://ohseunghyeon.github.io/blogging/add-draft-feature/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/blogging/add-draft-feature/</guid><pubDate>Thu, 19 Sep 2019 11:39:03 GMT</pubDate><content:encoded>&lt;h2 id=&quot;발단&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%B0%9C%EB%8B%A8&quot; aria-label=&quot;발단 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;발단&lt;/h2&gt;
&lt;p&gt;나는 새로운 글을 쓸 때 파일을 만들어 놓고 나중에 쓰곤 한다. 파일을 만들어 놓는 건 일종의 습관인데, 대학에 다니던 시절에 과제가 생기면 일단 파일부터 만들곤 했다. 그리고 어떤 방향으로 갈지, 어떤 내용을 적을지 생각하고 메모하고, 한 번에 다 하지 않고 조금씩 조금씩 나눠서 적었었다.&lt;/p&gt;
&lt;p&gt;블로그 글도 무의식적으로 그렇게 하려고 했는데, 빈 글이 제목만 가지고 빌드가 되었다. 그래서 파일은 일단 지워두고 폴더까지만 두고 draft라고 인식했다. 하지만 이는 상당히 귀찮은 작업이다.&lt;/p&gt;
&lt;p&gt;그래서 마크다운 frontematter에 draft 플래그를 넣고 걔네는 빌드가 안 되게 할 수 없을까 생각했다.&lt;/p&gt;
&lt;h2 id=&quot;시도&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%8B%9C%EB%8F%84&quot; aria-label=&quot;시도 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;시도&lt;/h2&gt;
&lt;p&gt;gatsby-node.js 파일을 보면 graphql query가 있다. 이 query에 filter를 넣어서 draft가 true가 아닌 경우에만 가져오게 했다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;graphql&quot;&gt;&lt;pre class=&quot;language-graphql&quot;&gt;&lt;code class=&quot;language-graphql&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  allMarkdownRemark&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;sort&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;fields&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;frontmatter___date&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;order&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;DESC&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;filter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token attr-name&quot;&gt;frontmatter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;draft&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;ne&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;limit&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1000&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;그랬더니 index 페이지에 (기본적으로 all posts 페이지) 글 목록에선 글 제목이 남아 있고 글을 누르면 빈 화면이 나왔다.&lt;/p&gt;
&lt;p&gt;아, index 페이지에서도 없애야 하는구나. gatsby-node에는 마크다운의 페이지를 만드는 부분이구나.&lt;/p&gt;
&lt;p&gt;그래서 &lt;strong&gt;/src/pages/index.js&lt;/strong&gt;에도 filter를 위와 같이 넣었다. 그랬더니 글이 더 이상 나오지 않는다!&lt;/p&gt;
&lt;h2 id=&quot;뭔가-이상하다&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%AD%94%EA%B0%80-%EC%9D%B4%EC%83%81%ED%95%98%EB%8B%A4&quot; aria-label=&quot;뭔가 이상하다 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;뭔가 이상하다&lt;/h2&gt;
&lt;p&gt;내가 제대로 한 걸까? 내가 한 것과 같은 기능을 구현한 사람들은 어떻게 했는지 검색을 했다. 그리고 &lt;a href=&quot;https://dev.to/cole_ruche/implementing-a-draft-feature-in-a-gatsby-blog-1m7o&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;이 글&lt;/a&gt;을 찾았다.&lt;/p&gt;
&lt;p&gt;기본적으로는 똑같이 구현을 했다. 그런데 이 사람은 RSS feed에 대해서 언급을 해놨다. 아, RSS에서도 없애야겠구나? 그런데 내 블로그엔 sitemap도 있는데? 그리고 앞으로 카테고리 페이지를 넣으면 그 쪽에도 동일한 로직이 들어갈 거다. 그렇게 생각하면 중복이 너무 많다.&lt;/p&gt;
&lt;p&gt;이 로직을 최소 4군데 이상 넣고 앞으로도 다른 곳에 넣을지도 모른다. 아무래도 query를 실행하는 시점이 아닌 파일 시스템에서 md 파일을 긁어오는 부분에서 draft를 걸러낼 수는 없을까?&lt;/p&gt;
&lt;p&gt;그래서 gatsby-config.js에서 gatsby-source-filesystem 부분을 확인하고 이 플러그인의 doc을 참고했다. 그런데 딱히 내가 원하는 기능을 구현할 수 있을 것 같지 않다.&lt;/p&gt;
&lt;h2 id=&quot;포기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%ED%8F%AC%EA%B8%B0&quot; aria-label=&quot;포기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;포기&lt;/h2&gt;
&lt;p&gt;Gatsby 문서를 계속 읽어가며 앞으로 좋은 방법이 보이면 그 방법으로 시도할 생각이다.&lt;/p&gt;
&lt;p&gt;그러나 그 전에는 이 작업을 하지 않기로 했다. 왜냐면 draft를 걸러내는 로직을 여기저기 넣는 건 중복이 너무 많다. 더군다나 그 많은 일을 하고도 내가 draft인지 아닌지를 적고 지우는 작업은 여전히 해야한다.&lt;/p&gt;
&lt;p&gt;가만 생각해보니 md 파일을 만들고 확장자만 잠시 바꿔두면 될 일이다. 왜 진즉에 이 생각을 못 했을까? 그저 파일을 만들거나 지워두는 생각만 했다.&lt;/p&gt;
&lt;p&gt;그냥 확장자를 draft 정도로 하고 다시 복귀하는 방향으로 가야겠다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Github pages를 github actions로 자동 배포하기]]></title><description><![CDATA[나는 Github pages를 운영하기 위해서 다음과 같이 두 개의 저장소를 사용하고 있다. 수동으로 블로그를 배포하기 위해서 블로그의 정적 파일들을 생성하고, 이를 username.github.io…]]></description><link>https://ohseunghyeon.github.io/blogging/deploying-github-pages-with-github-actions/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/blogging/deploying-github-pages-with-github-actions/</guid><pubDate>Tue, 17 Sep 2019 10:22:37 GMT</pubDate><content:encoded>&lt;p&gt;나는 Github pages를 운영하기 위해서 다음과 같이 두 개의 저장소를 사용하고 있다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;- username.github.io 저장소 (static files)
- 블로그 생성기 저장소 (gatsby - static site generater)&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;수동으로 블로그를 배포하기 위해서 블로그의 정적 파일들을 생성하고, 이를 &lt;strong&gt;username.github.io&lt;/strong&gt; 저장소에 푸쉬해 왔다.&lt;br&gt;
이 과정을 어떻게 자동화 할 수 있을까 생각하다가 다음 몇 가지를 찾았다.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;https://www.netlify.com/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Netlify&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://zeit.co/dashboard&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;NOW&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Github Actions&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;요즘 블로깅하시는 개발자 분들을 보면 Netlify라는 서비스를 많이 사용하고 있다. 단순한 호스팅 외에 많은 기능을 제공하는 서비스로 보인다.&lt;/p&gt;
&lt;p&gt;이 서비스를 사용하면 &lt;strong&gt;username.github.io&lt;/strong&gt; 같은 저장소를 사용하여 필요가 없다. 블로그의 호스팅을 github pages가 아닌 netlify로 할 수 있기 때문이다. 그래서 블로그 생성기 저장소에 push하고 netlify 서비스만 연동하면 알아서 정적 파일들을 생성하여 호스팅까지 해줄 수 있다.&lt;/p&gt;
&lt;p&gt;그러므로, 이 글을 보고 이해가 안 되거나, “나는 귀찮은 게 싫어” 라는 분이 계시면 netlify 또는 NOW를 사용하시면 되겠다.&lt;/p&gt;
&lt;h3 id=&quot;github-actions&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#github-actions&quot; aria-label=&quot;github actions permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Github Actions&lt;/h3&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 62.576687116564415%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACSklEQVQ4y32T21LTUBSG+3peeuGNMz6CV144euFT+BZ6gxcOMxRKAHuggByqgyAF2jRt2qQ5NYfm9LmSwIjSYc/8k6zd3a//Wv13DXJWrTzPHz3zB589VFYogzTLqRkO+EGM7/uEYUQQhMRx8vewnCy0uoYkzUoVsCQVYLisfjXLVzt9ahWQ+xWnsEwEeHZ6Sme/y3Zjh1a7Q7PZorHVYEvqi8vfdA8OabU69H785Pz8F9uKQlNqZWeXr+t16psNdr51COOccClATRszGKpomkb5PhjS718zHk9KXcm7qo6YWxa2bXF9c4uuzxhpE4bqmNuhxsXVAD/KWIQCPD3rsbvXEhdter0erWab9Y1NDg6/c3JyxtHRsTi9RFF2+SbuN8X5fveQZrvLRr1yZ9iBOAR7kVHz/QB9OmM2M8SBjSHP0Z1bx3ExzXnpXtencmYmrnW0iY45t1E1ndHEYO5GuAFYngAty2VmCGjuMDUsDNPGlD3b8ZgK3LKdCiwAy3Kk9UrT4juWVzqTkOBJu6XDLA3I0wVZsiBPfOLIlVoiFHgCE/Ad0L6T43rMZX/hRzK3ROaWEi1TiVrKMhbg3rHP57rD2rZb6ovi8knqvlrlKcvyf8Jd1GmpKiqB/LOWG2LKHC0npPbu45Tnb1Revh/x4q3Kqw8az14PWFO8R1mroEVmZV9CHIsiiYsvUMfPMJ2Y2sRIuBI3N1pMf7TkehSXtSvzWHXNHrosbkYR5iJ/vjTkBtLyUzfhvlXy/9rOq5YLaNF24TROsnKGfwCUDtVe4HVDtAAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;sign&quot;
        title=&quot;sign&quot;
        src=&quot;/static/f52a1abea7a6b432697f7c5f4c309a77/a6d36/signup.png&quot;
        srcset=&quot;/static/f52a1abea7a6b432697f7c5f4c309a77/222b7/signup.png 163w,
/static/f52a1abea7a6b432697f7c5f4c309a77/ff46a/signup.png 325w,
/static/f52a1abea7a6b432697f7c5f4c309a77/a6d36/signup.png 650w,
/static/f52a1abea7a6b432697f7c5f4c309a77/a1253/signup.png 657w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;Github Actions는 2018년에 발표됐고, 현재는 beta 버전이다. 사용하기 위해서는 따로 &lt;a href=&quot;https://github.com/features/actions&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;등록&lt;/a&gt;이 필요하며, 2019년 11월 13일부터 공개 버전으로 기본적인 기능으로 사용할 수 있다.&lt;/p&gt;
&lt;p&gt;&lt;div class=&quot;gatsby-resp-iframe-wrapper&quot; style=&quot;padding-bottom: 56.42857142857143%; position: relative; height: 0; overflow: hidden; margin-bottom: 1.0725rem&quot; &gt; &lt;div class=&quot;embedVideo-container&quot;&gt; &lt;iframe src=&quot;https://www.youtube.com/embed/E1OunoCyuhY?rel=0&quot; class=&quot;embedVideo-iframe&quot; style=&quot;border:0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; &quot; allowfullscreen&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;/div&gt;&lt;/p&gt;
&lt;p&gt;Github Actions는 깃헙 저장소의 push, pull request 등 미리 정의된 이벤트에 의해 사용자가 원하는 행동을 취할 수 있다. 이미 존재하는 다른 CI/CD 도구들처럼 빌드, 테스트, 배포 등을 할 수 있다.&lt;/p&gt;
&lt;p&gt;또한 누군가 이슈를 올렸을 때 특정한 로직을 실행(이슈에 올라온 코드를 자동으로 실행하여 에러를 발견하는 등)할 수도 있고, pull request에 대해 PR 된 버전과 기존의 master 버전을 각각 배포한 url을 PR 쓰레드의 댓글로 달게 할 수도 있다.&lt;/p&gt;
&lt;h2 id=&quot;어떻게-배포할까&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%B0%B0%ED%8F%AC%ED%95%A0%EA%B9%8C&quot; aria-label=&quot;어떻게 배포할까 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;어떻게 배포할까&lt;/h2&gt;
&lt;p&gt;앞서 말했듯이 내 경우는 &lt;strong&gt;정적 사이트 생성기&lt;/strong&gt;와 &lt;strong&gt;github pages&lt;/strong&gt; 저장소가 따로 존재한다. (한 저장소에 다른 브랜치로 두면 과정이 더 편했을 것을)&lt;/p&gt;
&lt;p&gt;Gatsby 공식 사이트의 문서에 &lt;a href=&quot;https://www.gatsbyjs.org/docs/how-gatsby-works-with-github-pages/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Github Pages 관련 배포에 대한 문서&lt;/a&gt;가 있으나 이는 한 저장소 내에 정적 사이트 생성기와 정적 파일이 &lt;em&gt;브랜치&lt;/em&gt;로 구분되어 있는 경우를 설명하는 것이기에 나의 경우와는 관련이 없다.&lt;/p&gt;
&lt;p&gt;내 경우 배포 자동화의 과정은 다음과 같다.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;정적 사이트 생성기 저장소에서 push를 한다.&lt;/li&gt;
&lt;li&gt;push된 정적 사이트 생성기 저장소에서 gatsby build 명령어로 정적 파일들을 생성한다. (&lt;code class=&quot;language-text&quot;&gt;/public&lt;/code&gt; 경로에 파일 생성됨)&lt;/li&gt;
&lt;li&gt;생성된 파일을 &lt;strong&gt;username.github.io&lt;/strong&gt; 저장소에 붙여 넣는다.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;username.github.io&lt;/strong&gt; 저장소를 커밋해 푸쉬한다.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;분명 간단한 과정이긴 한데, Github Actions에서 구현하려면 어떻게 하지?&lt;/p&gt;
&lt;h2 id=&quot;github-actions-톺아보기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#github-actions-%ED%86%BA%EC%95%84%EB%B3%B4%EA%B8%B0&quot; aria-label=&quot;github actions 톺아보기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Github actions 톺아보기&lt;/h2&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 430px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 26.380368098159508%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA7UlEQVQY022RW0/DMAyF+/9/HA+TELBCq4E0jY7Uud/bg5PuCRHpU+wk8jl2Bh8ijI3QNsO4DG0S5xnWZzgfsUqGDgTjY0EuFSkf+1+GmDKu3wbjJDBdJF7OCq9vCu+zxjRLPJ0Ip2fCedT4mE0vWupR8D+GHFlVLjDiCk83aO1hXWUKO6yIqSLECh8y2tr2HXXbu5tStx4fbA+H3mL5HHH/GkG3C1IMIJKQUoGYdZUQKyGyuhCEH7H2s9ZZu1/ugnPiN5LH5TA0FRcSzyzwfHJXMcayU8uFVafFrR1jHaTSXawVtI+8GVDaoP3HLxlAgJY4MnCcAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;actions button&quot;
        title=&quot;actions button&quot;
        src=&quot;/static/90f5198d4c3c5ebe80e482f779aef2c1/05ed2/actions_button.png&quot;
        srcset=&quot;/static/90f5198d4c3c5ebe80e482f779aef2c1/222b7/actions_button.png 163w,
/static/90f5198d4c3c5ebe80e482f779aef2c1/ff46a/actions_button.png 325w,
/static/90f5198d4c3c5ebe80e482f779aef2c1/05ed2/actions_button.png 430w&quot;
        sizes=&quot;(max-width: 430px) 100vw, 430px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;위와 같이 깃허브 저장소에 가면 Actions 버튼이 있다.&lt;br&gt;
(Github Actions Beta를 신청하여 승인 이메일을 받은 경우에만 활성화된다.)&lt;/p&gt;
&lt;p&gt;Actions 버튼을 누르면 Workflow 파일을 생성할 수 있는 페이지가 나온다. 해당 페이지에서 &lt;strong&gt;Add a new workflow&lt;/strong&gt; 버튼을 눌러서 workflow 파일을 GUI 상에서 생성해도 되고, 직접 파일을 만들어도 된다. 나의 경우 직접 만들어서 진행하겠다.&lt;/p&gt;
&lt;h3 id=&quot;workflow-생성하기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#workflow-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0&quot; aria-label=&quot;workflow 생성하기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Workflow 생성하기&lt;/h3&gt;
&lt;p&gt;Workflow 파일은 저장소의 root에서 &lt;strong&gt;.github/workflows&lt;/strong&gt; 디렉토리를 생성한 후 그 내부에 &lt;code class=&quot;language-text&quot;&gt;.yml&lt;/code&gt; 또는 &lt;code class=&quot;language-text&quot;&gt;.yaml&lt;/code&gt;로 생성한다. 내 경우 blog deploy를 위해 다음과 같이 만들겠다. yml 파일의 이름은 아무렇게나 해도 되는 것 같다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;/.github/workflows/continuous-deployment-workflow.yml&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;참고로 Github Actions가 나온 당시에는 HCL syntax라는 것을 사용했지만 2019년 9월 30일 이후로 deprecated 된다. 조금 오래된 자료를 찾아보면 yml이 아닌 특이한 syntax를 가진 workflow 또는 action 파일을 찾을 수 있는데 이는 모두 곧 쓸모 없어진다.&lt;/p&gt;
&lt;p&gt;workflow 작성법을 알고 싶다면 &lt;a href=&quot;https://help.github.com/en/articles/configuring-a-workflow&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Configuring a workflow&lt;/a&gt;와 &lt;a href=&quot;https://help.github.com/en/articles/workflow-syntax-for-github-actions&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Workflow syntax for Github Actions&lt;/a&gt;를 참고하길 바란다.&lt;/p&gt;
&lt;p&gt;yml에 대해 빠르게 알고 싶다면 &lt;a href=&quot;https://www.codeproject.com/Articles/1214409/Learn-YAML-in-five-minutes&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Learn YAML in five minutes!&lt;/a&gt;을 참고하라.&lt;/p&gt;
&lt;p&gt;아래는 배포를 위해 만든 workflow 파일이다&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yml&quot;&gt;&lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Blog Deployment

&lt;span class=&quot;token key atrule&quot;&gt;on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;push&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;

&lt;span class=&quot;token key atrule&quot;&gt;jobs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;build&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; build
    &lt;span class=&quot;token key atrule&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ubuntu&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;latest
    &lt;span class=&quot;token key atrule&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; clone gatsby&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;blog
      &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/checkout@master
      &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;token key atrule&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;static-site-generator&apos;&lt;/span&gt;

    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; git config
      &lt;span class=&quot;token key atrule&quot;&gt;env&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;token key atrule&quot;&gt;USER_NAME&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; $&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; github.event.pusher.name &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;token key atrule&quot;&gt;USER_EMAIL&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; $&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; github.event.pusher.email &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
      &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token scalar string&quot;&gt;
        git config --global user.email &quot;$USER_EMAIL&quot;
        git config --global user.name &quot;$USER_NAME&quot;&lt;/span&gt;

    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; make deploy keys
      &lt;span class=&quot;token key atrule&quot;&gt;env&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;token key atrule&quot;&gt;GH_ACTION_DEPLOY_KEY&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; $&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; secrets.GH_ACTION_DEPLOY_KEY &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
      &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token scalar string&quot;&gt;
        mkdir -p ~/.ssh/
        echo &quot;$GH_ACTION_DEPLOY_KEY&quot; &gt; ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com &gt;&gt; ~/.ssh/known_hosts&lt;/span&gt;

    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; clone static_site_repo
      &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token scalar string&quot;&gt;
        cd ..
        git clone git@github.com:ohseunghyeon/ohseunghyeon.github.io.git static_site_repo&lt;/span&gt;


    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; install dependencies &amp;amp; build
      &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token scalar string&quot;&gt;
        yarn
        yarn build&lt;/span&gt;

    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; move build files to static files repo
      &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token scalar string&quot;&gt;
        rm -rf ../static_site_repo/*
        mv ./public/* ../static_site_repo&lt;/span&gt;

    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; push changed files
      &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token scalar string&quot;&gt;
        cd ../static_site_repo
        git add .
        git commit -m &quot;$(git -C ../static-site-generator/ log --format=%B -n 1)&quot;
        git push origin master&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h3 id=&quot;name-on-jobs&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#name-on-jobs&quot; aria-label=&quot;name on jobs permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;name, on, jobs&lt;/h3&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yml&quot;&gt;&lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Blog Deployment

&lt;span class=&quot;token key atrule&quot;&gt;on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;push&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;

&lt;span class=&quot;token key atrule&quot;&gt;jobs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;name&lt;/code&gt;: Workflow의 이름&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;on&lt;/code&gt;: 여기에 기술된 이벤트에 의해 이 workflow가 작동한다. 특정 동작일 수도 있고, schedule이 될 수도 있다. 나의 경우 해당 브랜치에서 push가 발생할 때 이 workflow를 실행한다. 특정 브랜치, 특정 파일에 의한 trigger도 지정 가능하다. 자세한 내용은 &lt;a href=&quot;https://help.github.com/en/articles/events-that-trigger-workflows&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Event Trigger&lt;/a&gt;를 참고하라.&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;jobs&lt;/code&gt;: job이란 workflow에서 실행할 작업의 단위이다.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;job&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#job&quot; aria-label=&quot;job permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;job&lt;/h3&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yml&quot;&gt;&lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;jobs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;build&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; build
    &lt;span class=&quot;token key atrule&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ubuntu&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;latest
    &lt;span class=&quot;token key atrule&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;jobs&lt;/code&gt; 아래에 위치한 &lt;strong&gt;build&lt;/strong&gt;는 job이다. 해당 job 엔 name, runs-on, steps가 있다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;name&lt;/code&gt;: job의 이름. 생략 가능하다.&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;runs-on&lt;/code&gt;: 해당 job을 실행할 가상 환경으로 ubuntu, linux, macOs 로 설정할 수 있다.&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;steps&lt;/code&gt;: step은 Job이 실행되는 하나의 가상 환경에서 이루어질 일련의 작업이다. job이 추상적인 단위라면 step은 좀 더 실질적인 단위로, command나 action을 실행할 수 있다.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;step---name-run&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#step---name-run&quot; aria-label=&quot;step   name run permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;step - name, run&lt;/h3&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yml&quot;&gt;&lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; install dependencies &amp;amp; build
  &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token scalar string&quot;&gt;
    yarn
    yarn build&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;name&lt;/code&gt;과 &lt;code class=&quot;language-text&quot;&gt;run&lt;/code&gt;이 있다. name은 생략 가능하며 이 때 name은 알아서 정해진다. 그리고 run은 command를 실행한다. command는 다음과 같이 한 줄 또는 여러줄로 생성 가능하다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yml&quot;&gt;&lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# single line&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; yarn

&lt;span class=&quot;token comment&quot;&gt;# multiple lines&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token scalar string&quot;&gt;
  yarn
  yarn build
  ...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h3 id=&quot;step---env&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#step---env&quot; aria-label=&quot;step   env permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;step - env&lt;/h3&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yml&quot;&gt;&lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; git config
  &lt;span class=&quot;token key atrule&quot;&gt;env&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;USER_NAME&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; $&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; github.event.pusher.name &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;USER_EMAIL&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; $&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; github.event.pusher.email &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token scalar string&quot;&gt;
    git config --global user.email &quot;$USER_EMAIL&quot;
    git config --global user.name &quot;$USER_NAME&quot;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;env&lt;/code&gt;에는 다음과 같이 아무 값이나 넣어서 설정할 수 있다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yml&quot;&gt;&lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;env&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;USER_NAME&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 게으른 고영이&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;그런데 &lt;code class=&quot;language-text&quot;&gt;${{ github.event.pusher.name }}&lt;/code&gt;는 뭘까? 이건 context와 이를 사용하는 문법이다. 이 경우에는 github이라는 context 객체 아래에 있는 event.pusher.name를 환경변수 &lt;strong&gt;USER_NAME&lt;/strong&gt;과 &lt;strong&gt;USER_EMAIL&lt;/strong&gt;로 각각 설정하는 것이다.  &lt;/p&gt;
&lt;p&gt;다음과 같이 step을 작성하면 github context에 어떤 값이 있는지 확인할 수 있다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yml&quot;&gt;&lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Dump GitHub context
  &lt;span class=&quot;token key atrule&quot;&gt;env&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;GITHUB_CONTEXT&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; $&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; toJson(github) &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; echo &quot;$GITHUB_CONTEXT&quot;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Context와 이를 사용하는 문법에 대한 문서는 &lt;a href=&quot;https://help.github.com/en/articles/contexts-and-expression-syntax-for-github-actions&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Contexts and expression syntax for GitHub Actions&lt;/a&gt;를 참조하라.&lt;/p&gt;
&lt;h3 id=&quot;step---uses&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#step---uses&quot; aria-label=&quot;step   uses permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;step - uses&lt;/h3&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yml&quot;&gt;&lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; clone gatsby&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;blog
  &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/checkout@master
  &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;static-site-generator&apos;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;uses&lt;/code&gt;: Action을 사용한다는 뜻이다. 위에서 서술했듯 step은 command 또는 action을 사용할 수 있다. 위에 있는 action의 경우 &lt;a href=&quot;https://github.com/actions/checkout&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;actions/checkout&lt;/a&gt; 저장소에 있다. 이렇게 action을 다른 저장소에서 가져와 사용하거나, workflow 파일이 존재하는 동일한 저장소에 만들어서 사용할 수도 있다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;actions/checkout&lt;/code&gt;: 이 액션은 workflow를 실행하는 저장소의 최신 내역을 받아온다. 찾아보면 이미 만들어진 다양한 action이 있다. node를 설치해주는 액션도 있고, python 설치하는 애도 있다. 조립하듯 필요한 걸 찾아서 써도 되고, 아니면 만들어도 되겠다.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;with&lt;/code&gt;: Action에게 넘겨주는 파라미터. path라는 파라미터에 ‘static-site-generator’ 값을 넘겨주고 있다. actions/checkout 액션이 받을 수 있는 파라미터 값은 &lt;a href=&quot;https://github.com/actions/checkout/blob/master/action.yml&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;여기&lt;/a&gt;에서 볼 수 있다. path는 ‘Optional path to check out source code’ 이라고 되어 있는데, 내 경우 static-site-generator라는 디렉토리에 해당 저장소를 받겠다는 뜻이고, 설정하지 않을 경우 저장소 이름으로 디렉토리를 만들게 된다.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;steps-설명&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#steps-%EC%84%A4%EB%AA%85&quot; aria-label=&quot;steps 설명 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Steps 설명&lt;/h3&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yml&quot;&gt;&lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;# 정적 생성기 저장소를 fetch한다.&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; clone gatsby&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;blog
  &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/checkout@master
  &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;static-site-generator&apos;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;# git config로 이메일과 이름을 설정한다. 그 값들은 github context에서 가져온다.&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; git config
  &lt;span class=&quot;token key atrule&quot;&gt;env&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;USER_NAME&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; $&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; github.event.pusher.name &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;USER_EMAIL&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; $&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; github.event.pusher.email &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token scalar string&quot;&gt;
    git config --global user.email &quot;$USER_EMAIL&quot;
    git config --global user.name &quot;$USER_NAME&quot;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;# ssh private 키를 job 가상환경에 설치한다.&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;# 정적 사이트 저장소 git을 clone하고 push하기 위해 필요하다&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;# 참고: https://cupfullofcode.com/blog/2018/12/21/deploying-hugo-with-github-actions/&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; install deploy keys
  &lt;span class=&quot;token key atrule&quot;&gt;env&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;GH_ACTION_DEPLOY_KEY&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; $&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; secrets.GH_ACTION_DEPLOY_KEY &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token scalar string&quot;&gt;
    mkdir -p ~/.ssh/
    echo &quot;$GH_ACTION_DEPLOY_KEY&quot; &gt; ~/.ssh/id_rsa
    chmod 600 ~/.ssh/id_rsa
    ssh-keyscan github.com &gt;&gt; ~/.ssh/known_hosts&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;# 정적 사이트를 static_stie_repo라는 directory에 clone한다.&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; clone static_site_repo
  &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token scalar string&quot;&gt;
    cd ..
    git clone git@github.com:ohseunghyeon/ohseunghyeon.github.io.git static_site_repo&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;# static-site-generator 디렉토리에서 yarn과 yarn build를 실행한다.&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;# 바로 위의 step에서 cd ..로 workding directory를 바꿨는데&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;# 각각의 step은 working directory가 초기화되어&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;# 이 step에서 pwd는 static-site-generator directory이다.&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; install dependencies &amp;amp; build
  &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token scalar string&quot;&gt;
    yarn
    yarn build&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;# 빌드한 파일들을 정적 사이트 저장소 디렉토리로 옮긴다.&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; move build files to static files repo
  &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token scalar string&quot;&gt;
    rm -rf ../static_site_repo/*
    mv ./public/* ../static_site_repo&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;# 정적 사이트 저장소를 커밋하고 푸쉬한다.&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;# 커밋 내용은 정적 사이트 생성기의 제일 최근 커밋 메시지&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; push changed files
  &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token scalar string&quot;&gt;
    cd ../static_site_repo
    git add .
    git commit -m &quot;$(git -C ../static-site-generator/ log --format=%B -n 1)&quot;
    git push origin master&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;나는 git 인증을 위해서 ssh key를 설치하는 방법을 택했다. 그러나 이 key는 깃 계정 세팅에서 넣는 키가  아닌 &lt;a href=&quot;https://developer.github.com/v3/guides/managing-deploy-keys/#deploy-keys&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;deploy keys&lt;/a&gt;다. deploy keys를 설정하면 특정 프로젝트에 public key를 추가하여 접근 권한을 설정할 수 있다.&lt;/p&gt;
&lt;p&gt;ssh key를 생성하는 법을 모른다면 &lt;a href=&quot;https://help.github.com/en/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent#generating-a-new-ssh-key&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;여기&lt;/a&gt;를 참고하거나, 다음 명령어를 치면 된다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;shell&quot;&gt;&lt;pre class=&quot;language-shell&quot;&gt;&lt;code class=&quot;language-shell&quot;&gt;ssh-keygen -t rsa -b &lt;span class=&quot;token number&quot;&gt;4096&lt;/span&gt; -C &lt;span class=&quot;token string&quot;&gt;&quot;your_email@example.com&quot;&lt;/span&gt; -f ./ssh-key-name&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Key가 준비되었다면 다음과 같이 저장소에 접근하기 위해 Deploy keys에 생성한 public key를 입력하고, 이 때 &lt;strong&gt;Allow write access&lt;/strong&gt;를 꼭 체크해야 한다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 58.282208588957054%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAA7DAAAOwwHHb6hkAAABZUlEQVQoz5WT3U7DMAyF+/6PwhPwFlwhIS64m7bB+p9fp+nBdtpuBYag0icnaXpiO6fVpXGoW4+mdTi9OxzPlqNF23uESHA+ahQiJYzG4nA8oetHnI8H1O9nDKNVIhGqEAN8KEQeO+dAFHnumQjrSnQ+KDIXYYmm7+DMiGnKSEKaWDBMmOd5w4eMriM+ccIwGDRNo4fdPrLv63yl6gdi5bwtOMfZcpmyRpyJlCEn55yVSeO8E9kJGpN2G2KMoJS4jInLmEopElOBVHyf4e1TdT3pR1vJS69Kdgt6IQvxGsPNWA7TDLvOwVhigSzdUAFjy0X4QAvxF8p7+U5aUrVtv6lnZi3rv2yCRLNmtpa8Ckob1o1/RQUvdc+eCmpgL73g0oNjA7NRQ4jLAekbabu0Ai1OqJrWwkoPdQGozQeeD0/891zg2byBPaj4sI3FCXdv+WrOrPGtecHj6wMM9WUdP1vkng8/AfG7rHQW3/Z+AAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;deploy key&quot;
        title=&quot;deploy key&quot;
        src=&quot;/static/facba1d91f1cdda8999de22b3551f563/a6d36/deploy_key.png&quot;
        srcset=&quot;/static/facba1d91f1cdda8999de22b3551f563/222b7/deploy_key.png 163w,
/static/facba1d91f1cdda8999de22b3551f563/ff46a/deploy_key.png 325w,
/static/facba1d91f1cdda8999de22b3551f563/a6d36/deploy_key.png 650w,
/static/facba1d91f1cdda8999de22b3551f563/e548f/deploy_key.png 975w,
/static/facba1d91f1cdda8999de22b3551f563/1ac29/deploy_key.png 1022w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;그리고 private key를 받아오는 과정이 필요한데, &lt;strong&gt;install deploy keys&lt;/strong&gt;라는 이름을 가진 step에 &lt;code class=&quot;language-text&quot;&gt;${{ secrets.GH_ACTION_DEPLOY_KEY }}&lt;/code&gt; 라는 context가 보인다.&lt;/p&gt;
&lt;p&gt;secrets는 저장소의 settings에서 설정 가능한데, private key를 secret에 추가하여 리눅스 가상환경에 가져가 파일로 생성하는 것이다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 47.239263803680984%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA9UlEQVQoz51SXW/DMAj0//+he9hD1cY2xgbCDi9u02latSKd+FB8cJDUmL1U8lzIb7fildgrcmrs21acIqc2vwk/41L88vnhVDYXNR+idyRm8THUzdRFBN485zwR8b7vTzA7gDhs1k71RE3QUWayHhERahUN0HWMOxhqznnv3VV1vlmWah2QKE/duYfMgjVk+OoN8leT1hrW0b495Adx8I0gh8JEhAkPwkUqigm0w3fIMX9lMV+r1Tv3IFQcY3gQi8TOsORhHnVmO5rYCT/yY5C1z1RLXHA8lv3LIf6DtF2v2Ed/XMxeS/zLksg+/6WzjEX+Dr4Ao8zFd6MUiAwAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;secrets 설정&quot;
        title=&quot;secrets 설정&quot;
        src=&quot;/static/691d92de7831d7019ab09ed71acea147/a6d36/secret.png&quot;
        srcset=&quot;/static/691d92de7831d7019ab09ed71acea147/222b7/secret.png 163w,
/static/691d92de7831d7019ab09ed71acea147/ff46a/secret.png 325w,
/static/691d92de7831d7019ab09ed71acea147/a6d36/secret.png 650w,
/static/691d92de7831d7019ab09ed71acea147/e548f/secret.png 975w,
/static/691d92de7831d7019ab09ed71acea147/350de/secret.png 998w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;이렇게 키까지 모두 세팅하면 저장소를 push할 때마다 자동으로 배포가 실행된다.&lt;/p&gt;
&lt;h3 id=&quot;github-actions-용어-정리&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#github-actions-%EC%9A%A9%EC%96%B4-%EC%A0%95%EB%A6%AC&quot; aria-label=&quot;github actions 용어 정리 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Github Actions 용어 정리&lt;/h3&gt;
&lt;p&gt;아래 용어들은 &lt;a href=&quot;https://help.github.com/en/articles/about-github-actions#workflow&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;About GitHub Actions&lt;/a&gt;의 번역본입니다.&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;여기를 눌러서 보기&lt;/summary&gt;
&lt;h4 id=&quot;workflow&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#workflow&quot; aria-label=&quot;workflow permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Workflow&lt;/h4&gt;
&lt;p&gt;설정 가능한 자동화된 프로세스. 깃허브에 있는 프로젝트를 빌드, 테스트, 패키지, 릴리즈, 배포를 하기 위해서 저장소 내에 셋업할 수 있다. Workflow는 하나 이상의 job들로 이루어져 있으며, 스케쥴 또는 이벤트에 의해 활성화될 수 있다.&lt;/p&gt;
&lt;h4 id=&quot;workflow-run&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#workflow-run&quot; aria-label=&quot;workflow run permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Workflow run&lt;/h4&gt;
&lt;p&gt;workflow의 인스턴스. 미리 설정된 이벤트가 발생했을 때 돌아간다. 매 workflow run에 대해 jobs, actions, logs, statuses를 확인할 수 있다.&lt;/p&gt;
&lt;h4 id=&quot;workflow-file&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#workflow-file&quot; aria-label=&quot;workflow file permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Workflow file&lt;/h4&gt;
&lt;p&gt;YAML 파일. 하나 이상의 job을 포함한 workflow 설정 사항을 정의한다. 이 파일은 당신의 깃허브 저장소 최상단에서 &lt;code class=&quot;language-text&quot;&gt;.github/workflows&lt;/code&gt; 디렉토리 내에 존재한다.&lt;/p&gt;
&lt;h4 id=&quot;job-1&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#job-1&quot; aria-label=&quot;job 1 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Job&lt;/h4&gt;
&lt;p&gt;단계들로 정의된 하나의 작업. 매 작업은 새로 생성되는 가상 환경 인스턴스 내에서 동작한다. workflow file 내에서 job 들이 어떻게 돌아가야 하는지 설정하기 위해 의존성 규칙을 정의할 수 있다. job들을 나란히 돌릴 수도 있고, 이전 job의 상태를 봐가며 순차적으로 돌릴 수도 있다. 예를 들어 하나의 workflow에 &lt;strong&gt;build&lt;/strong&gt;와 &lt;strong&gt;test code&lt;/strong&gt;라는 두 개의 job이 있고, test job이 build job에 의존한다고 정의할 때, build job이 실패하면 test job은 돌아가지 않는다.&lt;/p&gt;
&lt;h4 id=&quot;step&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#step&quot; aria-label=&quot;step permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Step&lt;/h4&gt;
&lt;p&gt;step은 job에 의해 실행되는 task들의 집합이다. 각 스탭은 job이 실행되는 하나의 가상환경 안에서 action들이 filesystem을 사용하여 서로 정보를 교환할 수 있게 한다. step들은 command나 action을 실행할 수 있다.&lt;/p&gt;
&lt;h4 id=&quot;action&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#action&quot; aria-label=&quot;action permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Action&lt;/h4&gt;
&lt;p&gt;각각의 task들. 이를 결합하여 steps를 만들고 이는 곧 하나의 job이 된다. Action은 workflow에서 가장 작은 조립 블록이다. 당신의 actions를 만들 수 있고, 이 action을 깃허브 커뮤니티에 공유하거나, 다른 public action를 커스터마이즈 할 수도 있다. action을 workflow 내에서 사용하기 위해서는 반드시 action을 하나의 step으로써 포함해야 한다. (action === step 인가?)&lt;/p&gt;
&lt;h4 id=&quot;continuous-integration-ci&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#continuous-integration-ci&quot; aria-label=&quot;continuous integration ci permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Continuous integration (CI)&lt;/h4&gt;
&lt;p&gt;공유되는 저장소에 작은 코드를 빈번히 커밋할 때 사용되는 software 개발 방법. Github Actions를 가지고 빌드와 테스트를 자동화하기 위하여 당신만의 CI workflow를 생성할 수 있다. 저장소에서 workflow의 매 action 의 코드의 변화와 상세한 로그를 확인할 수 있다. CI는 버그를 더 빠르게 찾거나 해결하기 위해, 코드 상의 변화에 대한 즉각적인 반응을 제공하여 개발자의 시간을 절약해준다.&lt;/p&gt;
&lt;h4 id=&quot;continuous-deployment-cd&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#continuous-deployment-cd&quot; aria-label=&quot;continuous deployment cd permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Continuous deployment (CD)&lt;/h4&gt;
&lt;p&gt;CI 상에서 빌드하는 것. 새로운 코드가 커밋되어 CI 테스트를 통과할 때, 그 코드는 자동으로 production에 배포된다. Github Actions를 가지고 당신만의 CD workflow를 만들 수 있으며, 이를 통해 자동으로 당신의 코드를 클라우드나, self-hosted service나 플랫폼에 배포할 수 있다. CD는 개발 과정을 자동화하고 테스트되고 안정된 코드 변화를 더 빠르게 고객에게 배포하여 개발자의 시간을 절약해준다.&lt;/p&gt;
&lt;h4 id=&quot;virtual-environment&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#virtual-environment&quot; aria-label=&quot;virtual environment permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Virtual environment&lt;/h4&gt;
&lt;p&gt;Github은 Linux, maxOS, Windows 가상 환경을 제공하여, 당신의 workflow를 돌리게 한다.&lt;/p&gt;
&lt;h4 id=&quot;runner&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#runner&quot; aria-label=&quot;runner permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Runner&lt;/h4&gt;
&lt;p&gt;각 가상 환경 내의 Github 서비스는 가능한 job을 기다린다. runner가 job을 고르면, job의 actions를 실행하고, 경과, 로그, 결과를 깃헙에게 보고한다. runners는 한 번에 하나의 job을 실행한다.&lt;/p&gt;
&lt;h4 id=&quot;event&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#event&quot; aria-label=&quot;event permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Event&lt;/h4&gt;
&lt;p&gt;workflow run을 유발하는 특정 동작. 예를 들어 누군가 저장소에 커밋을 푸쉬하거나 이슈 또는 풀리퀘스트가 생성되는 행위.  또한 repository dispatch webhook을 사용한 외부 이벤트 발생을 이벤트로 설정할 수 있다.&lt;/p&gt;
&lt;h4 id=&quot;artifact&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#artifact&quot; aria-label=&quot;artifact permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Artifact&lt;/h4&gt;
&lt;p&gt;빌드나 코드를 테스트할 때 생성되는 파일. 예를 들어, 바이너리나 패키지 파일, 테스트 결과, 스크린샷, 로그 파일 등이 이에 해당한다. workflow에서 생성된 artifact는 해당 workflow와 관련이 있고, 다른 job에 의해 사용되거나 배포될 수 있다.&lt;/p&gt;
&lt;/details&gt;
&lt;h2 id=&quot;후기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%ED%9B%84%EA%B8%B0&quot; aria-label=&quot;후기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;후기&lt;/h2&gt;
&lt;p&gt;workflow를 만들면서 job을 두 개로 나눠서 build, deploy로 할 수 있을까 생각했다. 그런데 그 둘은 독립된 가상 환경을 갖게 될 텐데 그럼 파일을 어디서 가져오지? 라는 생각이 들었다. 개념적으로 나누고 싶긴 한데, 그럴 방법이 있을지 계속 공부하며 찾아봐야겠다. 그리고 액션이나 docker를 사용하는 것에 대해서도 조금씩 알아가야겠다.&lt;/p&gt;
&lt;p&gt;정적 사이트 저장소를 clone하고 push하는 과정이 조금 힘들었다. 처음에는 해당 저장소를 actions/checkout을 사용해서 가져왔다. 저 액션을 사용하면 https 프로토콜로 저장소를 가져오게 되는데 그러면 아이디와 비밀번호로 인증하여 push를 할 수 있다. 어떻게 할 수 있을지 한참 찾다가 personal access token이라는 걸 알게 됐는데.. 잘 안 됐다.&lt;/p&gt;
&lt;p&gt;내 추측에 이 워크플로우가 동작할 때 어떤 토큰이 자동으로 생기는 것 같다. 그래서 그 토큰을 사용해보려고 했는데 안 됐다. 그렇다고 다른 토큰을 직접 생성해서 해봐도 잘 안 됐다. 명령어의 잘못이든, 내가 찾아내지 못했든.. 혹시 어딘가 다른 방법이 있다면 알고 싶다.&lt;/p&gt;
&lt;h2 id=&quot;참고-자료&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%B0%B8%EA%B3%A0-%EC%9E%90%EB%A3%8C&quot; aria-label=&quot;참고 자료 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;참고 자료&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://blog.outsider.ne.kr/1412&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Outsider - GitHub Actions 소개&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://css-tricks.com/introducing-github-actions/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;css tricks - Introducing GitHub Actions&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://heowc.dev/2019/02/03/deploy-gh-page-with-github-action/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;허원철의 개발 블로그 - GitHub Action을 활용한 GitHub Page 배포&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://lannonbr.com/blog/2019-08-17-gh-actions-js-actions/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;GitHub Actions v2: JS Actions&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</content:encoded></item><item><title><![CDATA[Gatsby Blog에 About 페이지 만들기]]></title><description><![CDATA[Docs에 따르면, Gatsby에서 페이지를 만드는 방법은 3가지가 있다. In your site’s gatsby-node.js by implementing the API createPages Gatsby core automatically turns…]]></description><link>https://ohseunghyeon.github.io/blogging/making-about-pages/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/blogging/making-about-pages/</guid><pubDate>Tue, 10 Sep 2019 08:15:51 GMT</pubDate><content:encoded>&lt;p&gt;Docs에 따르면, Gatsby에서 페이지를 만드는 방법은 3가지가 있다.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;In your site’s gatsby-node.js by implementing the API createPages&lt;/li&gt;
&lt;li&gt;Gatsby core automatically turns React components in src/pages into pages&lt;/li&gt;
&lt;li&gt;Plugins can also implement createPages and create pages for you&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;2번을 보면 Gatsby core는 자동으로 src/pages 폴더 내의 파일을 참조하여 해당 파일 이름의 path로 페이지를 생성한다는 내용이 있다.&lt;br&gt;
즉, &lt;code class=&quot;language-text&quot;&gt;src/pages/about.js&lt;/code&gt; 파일을 생성하면 &lt;code class=&quot;language-text&quot;&gt;/about&lt;/code&gt;이라는 경로로 페이지가 생성되고 &lt;code class=&quot;language-text&quot;&gt;src/pages/abcd.js&lt;/code&gt; 파일을 생성하면 &lt;code class=&quot;language-text&quot;&gt;abcd&lt;/code&gt;라는 경로로 페이지가 생성된다.&lt;/p&gt;
&lt;p&gt;따라서 About 페이지를 만들기 위해서 할 일은 &lt;code class=&quot;language-text&quot;&gt;src/pages/about.js&lt;/code&gt; 파일을 생성하고 다음과 같이 소스를 작성하는 것이다. 그럼 자동으로 &lt;code class=&quot;language-text&quot;&gt;/about&lt;/code&gt; 경로로 페이지가 생성된다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; React &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;react&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; Layout &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;../components/Layout&quot;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;SEO&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;../components/Seo&quot;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;AboutPage&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; location&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; data &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
  &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;Layout location&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;location&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; title&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;site&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;siteMetadata&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;title&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;SEO&lt;/span&gt; title&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;About&quot;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;h1&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;About Me&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;h1&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;안녕하세요 제 블로그에 오신 것을 환영합니다&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;p&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;Layout&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt; AboutPage

&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; pageQuery &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; graphql&lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;src/pages/404.js&lt;/code&gt;와 &lt;code class=&quot;language-text&quot;&gt;src/pages/index.js&lt;/code&gt; 페이지를 참고하여 작성했다.&lt;/p&gt;
&lt;p&gt;페이지의 Wrapper인 Layout 컴포넌트를 최상위에 두고 아래에 SEO 컴포넌트와 제목, 내용 등을 배치했다. 또한 &lt;code class=&quot;language-text&quot;&gt;404.js&lt;/code&gt;에 있던 pageQuery를 그대로 들고와서 Layout 컴포넌트가 필요로 하는 데이터를 가져올 수 있게 만들었다.&lt;/p&gt;
&lt;p&gt;(이 GraphQL Query는 pageQuery라는 변수로 export 되어야 하며, 작성된 컴포넌트의 props로 받게 되는 것 같다)&lt;/p&gt;
&lt;h2 id=&quot;개발-중-graphiql로-생성된-페이지-목록을-확인하기&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EA%B0%9C%EB%B0%9C-%EC%A4%91-graphiql%EB%A1%9C-%EC%83%9D%EC%84%B1%EB%90%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%AA%A9%EB%A1%9D%EC%9D%84-%ED%99%95%EC%9D%B8%ED%95%98%EA%B8%B0&quot; aria-label=&quot;개발 중 graphiql로 생성된 페이지 목록을 확인하기 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;개발 중 GraphiQL로 생성된 페이지 목록을 확인하기&lt;/h2&gt;
&lt;p&gt;개발 서버를 실행하여 &lt;a href=&quot;%60localhost:8000/__graphql%60&quot;&gt;GraphiQL&lt;/a&gt;에 접근한 후 다음의 query를 실행하면 생성되는 페이지들의 path와 plugin 정보를 얻게 된다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;graphql&quot;&gt;&lt;pre class=&quot;language-graphql&quot;&gt;&lt;code class=&quot;language-graphql&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  allSitePage &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    edges &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      node &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        path
        component
        pluginCreator &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
          name
          pluginFilepath
        &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 649px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 92.63803680981594%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAIAAAAf7rriAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACHElEQVQ4y22T2a7bMAxE8/9/1z5cNMhqW960WrucvHRou2k2gBAUI9SQh8OdtUFI60OMMQUfY6CTLvQzxZBjzCmXVGYKXJ5iF1M5X4aq4byTqhWyHmU16k5qJgyTuhGKiUkYJ60zDhovyWWe+0H/OXSs5l01mlEbZLbSauddQKQE8QR9ipTflPNkvdJea6eU8zY4Za2crLIO+ZN/K/Ul2Uw2lxn6FPdbvt3y/Vbud7rcbgXnPG/x2bN1gbVKGxegaTwao/YEySLs0qrTFh+9i+/JuZRLNR7Pfc+EYKOsB1lzQDKdstzoVugFgSZsU/gExoU5XsbruTvtq4EN/aVtT43myk0ealT/vMRn2aCPGfuQKIhnwahp2i4GFzDw7a/pOzBMI+dcNiRl88OiRudXezyU07XmqBxOwGDCorn6LPoEiqic9F8n/B9Y3Yj9oWtrLhgHHtOriRszaEKt3DrtmL8nz1JNVSP6VraNMMIQW0AG8FFbRW4hz4gJtOnk6xeM0NOcIV7Q24KUeqY12N4GrjVegKUnhwkJas5hLo7Ke8L2oPid2c77+Ov38XCqmwtj51pzHeAFcMKQF5+vPQNken6l/Ou5Yfxnz67ntjm3ZLKGYzfV0jN5k17x6wg2C6yXmHZ4AEWPwvadrOuBD2JshrHuh6oTnaDdWvCszHAStuUjytlN1iEfwBDz/Y41wkptsVjysVKP9SILLUT+AruTNq2AY/IRAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;allSitePage query result&quot;
        title=&quot;allSitePage query result&quot;
        src=&quot;/static/4bc9e5b16d3d3ef7fefa59d49e83bd01/7762d/gatsby-plugin-page-creator.png&quot;
        srcset=&quot;/static/4bc9e5b16d3d3ef7fefa59d49e83bd01/222b7/gatsby-plugin-page-creator.png 163w,
/static/4bc9e5b16d3d3ef7fefa59d49e83bd01/ff46a/gatsby-plugin-page-creator.png 325w,
/static/4bc9e5b16d3d3ef7fefa59d49e83bd01/7762d/gatsby-plugin-page-creator.png 649w&quot;
        sizes=&quot;(max-width: 649px) 100vw, 649px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;/about/ 이라는 path로 페이지가 생성된 것이 보인다. 그런데 &lt;code class=&quot;language-text&quot;&gt;404&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;about&lt;/code&gt; 페이지와 위의 두 페이지는 pluginCreator 값이 다르다.&lt;/p&gt;
&lt;p&gt;두 개의 다른 플러그인이 페이지를 생성하고 있는 걸로 보인다. 결국 기존에 있지 않은 페이지를 생성한다는 건 어떤 플러그인을 수정하거나 새로운 플러그인을 만들어야 한다는 뜻일까?&lt;/p&gt;</content:encoded></item><item><title><![CDATA[github 저장소에 now 적용기]]></title><description><![CDATA[발단 난 블로그를 이쁘게 만들고 싶다. 그래서 다른 Gatsby 블로그들을 참고하려고 서핑하고 있었다.
그러다가 Dan Abramov의 블로그 overreacted.io 깃헙 저장소를 보게 됐다.  now 라는 bot이 쓴 댓글를 보면 Now…]]></description><link>https://ohseunghyeon.github.io/blogging/now/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/blogging/now/</guid><pubDate>Thu, 05 Sep 2019 07:34:55 GMT</pubDate><content:encoded>&lt;h2 id=&quot;발단&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%B0%9C%EB%8B%A8&quot; aria-label=&quot;발단 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;발단&lt;/h2&gt;
&lt;p&gt;난 블로그를 이쁘게 만들고 싶다. 그래서 다른 Gatsby 블로그들을 참고하려고 서핑하고 있었다.
그러다가 Dan Abramov의 블로그 &lt;a href=&quot;https://overreacted.io/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;overreacted.io&lt;/a&gt; &lt;a href=&quot;https://github.com/gaearon/overreacted.io&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;깃헙 저장소&lt;/a&gt;를 보게 됐다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 88.34355828220859%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACzUlEQVQ4y21UyW7cMAz15+Zreuwht9566bHovT/QAEXTNgumySyeGVteZFmLZZl9pO1kUtTAA2nZosj3KGamd1RWnhodSNWOToWn/GioN5aG4Ch4R0OMFMcEO84YZ8trYYi0z090PJekO0MZLzStoQ6BW9i6AVRJKt9SWxyAnDqtqdX4x/TUW/diOYDzAfs7QJMPA2URp0WcNiZkMAw4caC4ZBBCxPok7957fI/iB2zkPc55+d8jKK8lxMhKZPP74Y52+x2dzwVttzu6v38Qu9vvKc+PdDjk9PT0RM/Pz7Tb7el4PNKfzQZZtZIZB12f7FH9pI/f39PD+Za62lCpFErsqOs6MiiJ0XWWziqA60AG3DLf5zJQ1Y5U1r1Uxs80TZQlSqT6klrTSuq8GCFCgD+iPIZzTkpiWrhMLt8t3/99ssN2S5u7X/hpEJJ5owXhBsTzJg4gvvAVqe8tBLEiyso38yn8wmZfv3yizx/ekY8JnOV0gvxVo9FCLRTX4juII8ChHnaFxbvFodYxHQ0ZHJIRSk7DnFXf96TBnwZ/nTHCI/sGvqwJn0b+4SyZnrRgWpCJg9qZN+aGeWH5ma+Vw3ThM+Jip5dg9BpwJdMiu8cf30QAzlaIZ9/N/irY/x7nLfgExyFQVhSF9BefNGCBMxWSF3uJcc18QVoQL7LOrq+v6erqCgESFaqRa6SqVsRgUWq8VxBoFuAteoixgvfyXMg4TS6NW6MslTS2UgiIQVEqA7+XA+paS2sNQ5DSYuRmXsRYbHrDIVRTqkKgGpsbDAottq47uSk8QDSs1v08TLRFUL4EPAOS+CmtKi+3g8HtMAtiQTYLkgTOJQiEW+P55oxoMfShfYX3M8fZqlyFbDa48FxOCJguYZ4qIczq8X2dLvpt3sc2yVSyjoPG14AnTJqbmxtpGWuH5WQnVPC1Y55nVacXdVef/9cYGGz/AsCtcGMmzHTXAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;풀 리퀘스트에 있는 특정 브랜치의 자동 배포 링크&quot;
        title=&quot;풀 리퀘스트에 있는 특정 브랜치의 자동 배포 링크&quot;
        src=&quot;/static/fb0e77db2480c32fb56fcc2561487d44/a6d36/0.png&quot;
        srcset=&quot;/static/fb0e77db2480c32fb56fcc2561487d44/222b7/0.png 163w,
/static/fb0e77db2480c32fb56fcc2561487d44/ff46a/0.png 325w,
/static/fb0e77db2480c32fb56fcc2561487d44/a6d36/0.png 650w,
/static/fb0e77db2480c32fb56fcc2561487d44/41d3b/0.png 774w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;now 라는 bot이 쓴 댓글를 보면 Now가 이 풀 리퀘스트를 자동으로 배포했고, 밑에 링크로 가면 해당 브랜치의 배포판이 있다.&lt;/p&gt;
&lt;h2 id=&quot;본론&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EB%B3%B8%EB%A1%A0&quot; aria-label=&quot;본론 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;본론&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://zeit.co/login&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;now 서비스&lt;/a&gt;에 접속&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 341px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 90.18404907975462%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACmUlEQVQ4y61UXUhTcRQfBL0EPkYPPfYUQUQDNaeMKCMiKqv1IeFsyxDqIYNaJmHFekh7SXNubmtzGuZMgza0VjMrHZnbTGPTAqu5Dwlybu5D2O79dXfdx71r64sO/O7v3HPP/8f5n3s4HNBGrj5JMgmw3lM+O4fM+Z2TFiQzyQRB0GD6KWSLMsUYggm9TPBvLGeFmSABy+sx2G12WK0TcM3Pw/jEgC+f5/DcbMb09DScjg9obrqDLrUWmk4dvs676bMEkSWYEjUNDkGr7YT0ZiPejL1Ft0aDqan3MBiNeNTXB6vNBpVKjd4HPbCMv8NyKMSukCkWj8fTV1kOBhFdWcl7xZQlzjB7y8mX+K+9ZFVoMA5CrlBBq+umWIk2mQL3ZHLI2jvSaJcnWAGZXAmlWgNFhxpujyfZR4ItWMYvx+Yt27F33yFs2LgJvNKdKOHtwtZtReDxd6N4RxkKi/goKS0Hl1uIdQXrsWZtAYaemujzsVicLXj1WgMEJwWoPV8LQeVxiM6KKIghFFejSiykWEj7p2tEqKb8imNHsL/iAOyT9nQ/WYKjJjd6Omagvz+Lfu0sHiodNHpVTugppDgR06udeKz7hAHtR3zzRVb7SI0OQ5CEpMYCUXELruyR4lS5CZeqzLgsHMaFEy8gEY2g/swI6iqHUS96hXOHn+Fo8QAOcvthHfUlK8zqYVebA7cvvkRrgxnN9RNovWFDy3UrzXcbrbSfYJl0kuYmyThu1VkwN+NPDzcne2TCkRVq/mKIRqMIh8KIRFY5GAgiHI4gRPmBwDLNiaEmQf48NsxAMLAE/xIFvx+Li99pXljwwu12w+Pxwuv1wufz0exyuag/G2MtDE6+rfHnE81eEJyk98t99zvk2If/z34A98EBRsu7TqgAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;Log in to ZEIT&quot;
        title=&quot;Log in to ZEIT&quot;
        src=&quot;/static/cf6b9ee2b14aec89c229a0dc8930efcf/4c0ad/0.5.png&quot;
        srcset=&quot;/static/cf6b9ee2b14aec89c229a0dc8930efcf/222b7/0.5.png 163w,
/static/cf6b9ee2b14aec89c229a0dc8930efcf/ff46a/0.5.png 325w,
/static/cf6b9ee2b14aec89c229a0dc8930efcf/4c0ad/0.5.png 341w&quot;
        sizes=&quot;(max-width: 341px) 100vw, 341px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;사이트 메인에 접속하니 ZEIT에 로그인을 요구한다. 나는 github으로 로그인 했다. 그리고 프로파일을 설정하라고 한다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 98.15950920245399%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABfklEQVQ4y6WUy1KDMBSGeVzfwaUb1+59HzfawTrWuujC0lLaqVBuJSHhNyfTMBCD1PbMnAmXk4//XIKHkzVNo50sPRzwMplgPp9jsVggWK3wNp1iNvv4FWubZ152g4o8x3K5xEqBNpsNttstwnCNKIraGHufca9LH/rqf2I8W91Bpev7PooiQ7QX+I5zpTiDEAKMMdR1/bdCG0gb0jRVKwfjDTivIdQzKWXrQ7A2ZRt6jXlDdbrUdcqUYpZlej0ej6PFt7PpXntSCgRBgPU6VKPyhd1uN6rSBe4ppEZUJ2XnwCi+LEt9bZpk9mkgpRnHMfKiGK0RGasqXSKp7p3AXJ2MJEnaORsDEiwMw94Y9YCMVSiVykIprBR0qD7GacjJG5dCelBzrmvIKqZVViolqhGVglb7dHQ761TIFVDDTkADNSu9J6jLSWmvy/YcuebvnEY5/zaXmpRN6941x0yrszK6Gkiq/E+Op1eO53d+ecrtqREN7h8T3NztcfsQ4weeTieGI4WC8gAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;set profile&quot;
        title=&quot;set profile&quot;
        src=&quot;/static/268e1cb087ba07a5b0ad7957b4953259/a6d36/1.png&quot;
        srcset=&quot;/static/268e1cb087ba07a5b0ad7957b4953259/222b7/1.png 163w,
/static/268e1cb087ba07a5b0ad7957b4953259/ff46a/1.png 325w,
/static/268e1cb087ba07a5b0ad7957b4953259/a6d36/1.png 650w,
/static/268e1cb087ba07a5b0ad7957b4953259/c4b7c/1.png 903w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;깃헙에 Now를 세팅하라고 한다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 79.75460122699387%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABj0lEQVQ4y51Ta1OCUBD1jzfN9KHH1GTll0bN/EE5lWk2+skiQxQRQy4P4XR3FQYI6MHM5dzHcjh79m4FmScMQ0ZtOoWqqjBNE6vVivF1PIamaQgzscmnkiWLgkbDIe46HXS7T3gZDDAcjdDv9aC8KYh4kvExYbSZPgyw2WzivSAIEMg1oe/7cVz2WxoZhVu0RcgfEqlhGBBCwHGcLbEceamWKnyf+tI3C47ryJS7mEwm0lONf0DE9LNChXmbQL6CslRTKRcdZs+KKltY5TxFfx2cMt0xMj+6b4RRUX5SlBVQoarp+hzmcslE8/mMSf+jNE75/uERRydnOK9eoXpRQ/WyhsPjU+ztH2AhlSevVJk1MWH/eYB6o4VGs4Vmq42b2zau600eur7YXhfXhed5bAWhu1sTJq1hDznIlcFxoIv1eg1hr7l3FUWB+qHK+YzXquzzqNcNaVWKkF5EYts2hCMYeS5oz2MVSZ+S3UL4LeVwR2hZFqv6JOS5K+ek1JYKfM6ibKRSLrA67pjfVpjwC+BO2vHMnecAAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;Github integration&quot;
        title=&quot;Github integration&quot;
        src=&quot;/static/91df95bdc57533e57cfb03f8f30cca5a/a6d36/2.png&quot;
        srcset=&quot;/static/91df95bdc57533e57cfb03f8f30cca5a/222b7/2.png 163w,
/static/91df95bdc57533e57cfb03f8f30cca5a/ff46a/2.png 325w,
/static/91df95bdc57533e57cfb03f8f30cca5a/a6d36/2.png 650w,
/static/91df95bdc57533e57cfb03f8f30cca5a/1e088/2.png 840w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 516px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 163.19018404907973%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAhCAYAAADZPosTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAADtklEQVRIx51WS44URxDtI8xdZgcXwWfgACxYe+uFD2LJkiXEBoS8MiuwQA2YGdD0t779q66srMqs4L2oz1T3dAPjlGKyKrPzZcSLF1EzyotSjm1v7MFcWJoVc2Lv2EanFg8OmEJ+efRIHj58IFdX1+JqkSwvsHcvQKuAxlay3+dyeXkpFxcX8u79ewFeA3gfDwl2a4WMx2N58/atbLa7g/2TgM2GbW+0fSg9f6WTbpSIV73uwY7OYj7rIQ+m661cffkq44+f5ON/1/Lp87VEyfoI9ISHWW6Vl2zwzPVtlksYpxJEicTpRhZhLOlmd0TJoY0oCedr8TDnPJ69vusaMlC34Q5n7pWVk7KsMFft7MRiHjnnZL1aSRzHIH0j681WVnhP0lRts17rvq4lWMPvOPPccNQA9lhTwKKgaAvcVIqFx8YYyGUveZ63ZkB4s7bbZZJhZjR1zcg8IkFEOOsAOqLLFlXAH2dZc4AX/MwgYGccBFbALMtkPpvJ9dUXubmZyHIZtBfAm11jW1Cxx4XHIEN+mYcRk8DhQGoFUhkCny28pOekoVIqrFS4vAMaAvce+tZD8hRGkQRBqBaGkSwWS0nT1Q9DvQPIPznCYyZT2Ha3kzUzC2PIQ49ugzs9mpCRLWaVXu4A1mWRz+SRFGg2T3jVWbfH36psnHcKSo5outbr7DzQHWB6WDlkOd/K5Gaq/EXgksINw1AKdJpznJ3lsKKwrUGlJOBtoxyyB3aVMZTHj0YPuDeZTKYzzS49ow7TpCm9KIolQrkFWOclMd5XyH6cJNhfaVRMZgPoGx06hD1fLHrJxOgw9JgWBAHWUL94jlRagXrOC9hwO6BBlt0Z9/1J0v2JjB9kudI2hEpoq6FAk2Cm/89QQPYyuj+fLxD2XKao6RA8sfQMskzjRdQppcULVbcwNhNqlnrlujYHJoXczGfzBlSBlzKdTmSGteVyqdxOkTTuTSZTLVOjgFkDimJgi1NA7dIqZN8LuhO7Ct01YmckOqvw/fmQeWBfZLJE9igLdm2WHWVDfr/XC4dVdJDlGg8FPjDWWG2u5Iwh6V59n9Jra7n0API5jDy4Ay9467FE/PcADcru99dP5bd/nsivfz+Wl1//FIcSTlaF1PeWDUK2pZVXH57Ji/Ff8vzdH/Jh9q8UeQUub2XSd2/+F1Y0tPD5bnPwTZalRHgWi9BzaZCkjB8qo9+QHI2C8uBsctN/Z9hAjhsH3/VDrx/rCpVSlb0sqlZKnKt+7uTVvJetjDrjh/4bn8wCF3uX5VUAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;Install Now&quot;
        title=&quot;Install Now&quot;
        src=&quot;/static/507bcea985f7c21e3150cdc963a0a5b2/75dcb/3.png&quot;
        srcset=&quot;/static/507bcea985f7c21e3150cdc963a0a5b2/222b7/3.png 163w,
/static/507bcea985f7c21e3150cdc963a0a5b2/ff46a/3.png 325w,
/static/507bcea985f7c21e3150cdc963a0a5b2/75dcb/3.png 516w&quot;
        sizes=&quot;(max-width: 516px) 100vw, 516px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;나는 Only select repositories에 체크해서 &lt;code class=&quot;language-text&quot;&gt;Gatsby-blog&lt;/code&gt; 라는 내 정적 파일 생성기 저장소에 설치했다.&lt;/p&gt;
&lt;p&gt;그리고 프로젝트를 만들라고 한다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 100%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACP0lEQVQ4y51Uf2/TMBDNZ0cICY0B3wP4JjBpgzH+WroR0q6JncaJE8eJc9y7NlFBbffD0imOfX6+u/fOkdaafl5f0939Hd2zxYsF3fy6oTiOaRrjOD7ZomEIZG1LbdtR13XkOsfzlrz3M9hzRtQzIOOI/X/4OZHNERpTUpqmtF4/UJIktFwuSSn9ckCkVtcVW01N03CkTmwcAyBPpncEMJDSALMCWNct17Qj34/Us3nPteVLnXNyaWWM+PV9f4yUkWrrqbGWgSwT4gVQKUO6qChXOWVZLnubzYbXlcwPkSaAcHp3/oHenr2ns/OP9Or1G/r0+Ys4hDDMNz9lzDW8+v6DLi+v5Pv12wXd3sYHaxRCEDtNCutlGDgSdux7/yLJ7PuzbIzIZsm24C6BuI+xeWi95ww75+b9CCmgM/bH1Cn4gt1pIJOJYRCDs9PAP9YjaC5N/1DFWmzaVkCyLJODGYs9XaZkWVJVVQnLlalkL0l+71SxPQP2EYRE6FxgMC8LsKn46HGlDZVclrIs+b+RaLrOM3jN5/r5zMyyPA7NwE5b9vCP1GCuQ4rb+XQJ5t7zehsEENKa/LEfgdlCK9Iccp7nUgdEg7TQ59bWc51Qz6IopDWLQv8jbKQMQkWHq9WK7UHYVrkSwO1Fmh+NtYAUuiDDdcSFOIh3FK0IQy2xtotw4PbitiobiQCRIW2kYkzLUdvde9nuRB0k5apmdbhhV4YwCz+aarNv+zWB4XZkMq0fMwF8rAvghKjdnnhPdcxfDtUXfRZaX5sAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;Create a new project&quot;
        title=&quot;Create a new project&quot;
        src=&quot;/static/cca312b8a990d0b68aefd7bf98aadae2/a6d36/5.png&quot;
        srcset=&quot;/static/cca312b8a990d0b68aefd7bf98aadae2/222b7/5.png 163w,
/static/cca312b8a990d0b68aefd7bf98aadae2/ff46a/5.png 325w,
/static/cca312b8a990d0b68aefd7bf98aadae2/a6d36/5.png 650w,
/static/cca312b8a990d0b68aefd7bf98aadae2/e548f/5.png 975w,
/static/cca312b8a990d0b68aefd7bf98aadae2/eba85/5.png 1054w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;두 메뉴가 보인다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;From your exsting code&lt;/li&gt;
&lt;li&gt;From a template&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;From a template은 저장소를 새로 만드는 것 같다.
나는 From your exsting code에서 &lt;code class=&quot;language-text&quot;&gt;Gatsby-blog&lt;/code&gt; 저장소를 선택했다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 36.19631901840491%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAA7DAAAOwwHHb6hkAAABIUlEQVQoz32RTW6DMBCFOT47boDYcwQ26QVYgsQuilQgMZJx/IMx+HVsQpWqakcaYXnG37x5JB4U24ZlWcAYwziO6Psej8eI2yfHLEODh/dHhtj3PX7rukaWZUjTFGVZxrtkWwwcu0NJiaZp0HUdrtdbBPajIKD/AQx5Atu2RVEUyPMcVVUdQL+uAEE3Usk5hxAzDh3/xwl9jzAs2bYd2hgYgr6V4GiQofvFWgzDEJstnadpglL6GxCEnBkVGq2jZ8G78OBYC3g+JdjEourL5SM+8KTK0mC7WqzOwb0y1l52JLszEDOPk0POs8CdGSi9/1onAI22kIrqSkGTGK0VVtomWBCBbl0IwknJTP4JSPo5Z9OpwNLqARa2ksqTPX97+wUpcxtERpmBjwAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;gatsby-blog on dashboard&quot;
        title=&quot;gatsby-blog on dashboard&quot;
        src=&quot;/static/c84ea2f49a4d12f4cd09d48395330c95/a6d36/6.png&quot;
        srcset=&quot;/static/c84ea2f49a4d12f4cd09d48395330c95/222b7/6.png 163w,
/static/c84ea2f49a4d12f4cd09d48395330c95/ff46a/6.png 325w,
/static/c84ea2f49a4d12f4cd09d48395330c95/a6d36/6.png 650w,
/static/c84ea2f49a4d12f4cd09d48395330c95/e548f/6.png 975w,
/static/c84ea2f49a4d12f4cd09d48395330c95/2cffa/6.png 1092w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;그랬더니 알아서 빌드를 하고 배포를 해줬다…?!&lt;/p&gt;
&lt;p&gt;저 노란 서클은 배포가 완료되면 초록색으로 바뀐다.&lt;/p&gt;
&lt;p&gt;그리고 해당 프로젝트를 선택하게 되면 아래와 같은 화면이 나온다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 31.901840490797547%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAxUlEQVQY03VRyw7CIBDk/88m/oIx/oGfoCejMfHg3aRGS3kUFhi7NGBT6ySTZZdlWAahlELbtiAipJQqC8p6Wiv5vMYQXIwxIgTKsTQ57+C9z3nf9zk652CtzXkIMfdd74TjxeNw9ng8IwQXebrXe5yyQGkNnp4hpayCfAmFUC/e7S3WW4PVRuN0o1HQU8icPk0ONjRNg67roJWGMToLsz0cjTFYghgU8vg0EfzaEH7Ir2DyPiPGVMnnqofFv6WP+Yd5P/MDw3zWbiQT9VkAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;gatsby-blog project&quot;
        title=&quot;gatsby-blog project&quot;
        src=&quot;/static/0d7299a4efa05c352fc39639bbdc6cf1/a6d36/7.png&quot;
        srcset=&quot;/static/0d7299a4efa05c352fc39639bbdc6cf1/222b7/7.png 163w,
/static/0d7299a4efa05c352fc39639bbdc6cf1/ff46a/7.png 325w,
/static/0d7299a4efa05c352fc39639bbdc6cf1/a6d36/7.png 650w,
/static/0d7299a4efa05c352fc39639bbdc6cf1/e548f/7.png 975w,
/static/0d7299a4efa05c352fc39639bbdc6cf1/fd84e/7.png 1056w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;Visit을 누르거나 저 url로 이동하니 내 블로그가 나왔다.&lt;/p&gt;
&lt;p&gt;다시 한 번 푸쉬를 했더니 자동으로 배포를 해줬다. &lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 42.94478527607362%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABKUlEQVQoz21Ry26DMBD0r+fAkajhz5I0x/RADlH6AETBgF/THVNXQGpp8JrdHc+Olfcefd/DWou0GDdNg7ZtUdU1xnGM/0MIq11rjaIo8HI4IMsynM9nKOccvruZMBWS7HQ64Xp9w+vlgvv9viAKf3UUkuc59vs9drsdjscjlLUOwzixenX78wr/qtwuZUXhNJmnUcqyxK284fF4oK5qTCZgy8F6TpZA+xQ/CYmQMQuMMXLZFOHcnH/CopdQWnygF/St6zoMwxAfIYGkJO97LWcTwYmsnf9rqde/PXwPNUlgpYljsonkVDSfO4lHURDw+eXw/uHiXlVOcl4IAnxYT6gcFQg6IaJCElIlC5ZekXQJkgXuwUdlRCRMPizNZXLpyxbzi8+x3+R+AH13ug/q4QP0AAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;gatsby-blog project after push&quot;
        title=&quot;gatsby-blog project after push&quot;
        src=&quot;/static/23954a5612c8e395bd246865d41704ef/a6d36/8.png&quot;
        srcset=&quot;/static/23954a5612c8e395bd246865d41704ef/222b7/8.png 163w,
/static/23954a5612c8e395bd246865d41704ef/ff46a/8.png 325w,
/static/23954a5612c8e395bd246865d41704ef/a6d36/8.png 650w,
/static/23954a5612c8e395bd246865d41704ef/e548f/8.png 975w,
/static/23954a5612c8e395bd246865d41704ef/e996b/8.png 1050w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;좋다.&lt;/p&gt;
&lt;p&gt;이제 풀 리퀘스트를 했을 때 어떻게 되는지 보고 싶다.&lt;/p&gt;
&lt;p&gt;그래서 풀 리퀘스트를 만들어 봤다.&lt;/p&gt;
&lt;p&gt;now가 배포중이라고 밑에 달린다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 111.65644171779141%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAACXBIWXMAAA7DAAAOwwHHb6hkAAADL0lEQVQ4y4VU227jNhT0f+dPGqBf0H/oU18LFAukySZG0018SWzLkngVRWk6Q2rtTYugBCaHpsI5tzlchejx5/oOX+6+YLvd4/n5GS+vG5xODZ6e1nj4+lh+//3tBU1zRowDphmY+EcAZszzFas2nvDL3U/4ffMbXO9xPrew1iL4AGssTG8QQkDbJzgfYX3GuZ+IDOvCQoSLXU3zhN726E0P5xy9ThjHkYQeY0rIOVcHJNU37a11cMQ4JnxcjFDMEy/6ODIKR3JFMRRraMMwwfGbjxkhcR/qXojLb+sTbEgYRhFOGZOvRK+7E152Rxwag1PL9E2EG2aQt9jrHpf92QxouoCmD3S+RKgVYyzp9H0PYwy+n2P+WPR/48elJhVC1WnME63qlwvKGWup80ll+Qyl21OpZ6ZdXdknzCRQpMNQm+GcL/v/XwxqjCWQ1Wazwe3tbblsCSe5yIosjUh0IvsZEkkCnVreK4Tr9Ro3NzeUjUXXU3eUQ2fYJOMR2N048EJMBQMvCCIRWSRRpPUhlrs6u6Q8DOxW0+B4POLUtGjZ5fdDj8PR8Lyj4A08ha2SeGo0peG/ic9LU0rxFTo9eQrYM3xdDAtURznUd42ezhKj0cqlmXnBVAkFXUgUuMhlk9LhZZEbyklWZ47R1WmhxCgvNfN7Yy4RznMuKVhr0LUdtUjb9UsJToVQ5HIUSga+ONA+ss5B0xOU5QfZcJy8wfs7J+VwKkRd17HYpujtszVy3BJHUCgpj7HBefcrdRR4MPAfqKck8DHIiahnWftprMhXO9PmfMUq2lfsvv4M197Dne/5XDVoDi9w5ojoW9pD2Uu4tU6sGVFt/e0ca+vGUrbVtecZb297PqZb6ksTk4retB+GKuLMMRM0jj9CjZFeC+G8eEk54OmvBzw+rsuUqCmqnx7cAjZLEyQRp2Xe0wLtna9je3ltvnUPuH//g+m22O622O/fsNls8crnf7/bs/MS95kl6T+f6HmZFJFKEho7jaCsIomLmDV2pZtLR1WOWpZaEqGkzxdnVQPkYxk8I3vD/u1Q0DLd6oCa5OPZG81rhZz2RmdDgbFDfShYw38AjcCuTLabxKEAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;being deployed&quot;
        title=&quot;being deployed&quot;
        src=&quot;/static/b60b8bd046a2bcfc7ef3693453a70839/a6d36/9.png&quot;
        srcset=&quot;/static/b60b8bd046a2bcfc7ef3693453a70839/222b7/9.png 163w,
/static/b60b8bd046a2bcfc7ef3693453a70839/ff46a/9.png 325w,
/static/b60b8bd046a2bcfc7ef3693453a70839/a6d36/9.png 650w,
/static/b60b8bd046a2bcfc7ef3693453a70839/7fee5/9.png 781w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;그리고 now 사이트의 &lt;code class=&quot;language-text&quot;&gt;gatsby-blog project&lt;/code&gt; 화면에서도 자동으로 배포중인 내역이 보인다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 50.306748466257666%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABMUlEQVQoz61Sy26EMAzk/1V6R4Lf6p5YLTcOLEuAAAlJZm3zUNrSWyONkjj22GMnCSHAOQdjDLz34DuvaZrQdR36vsc4jmLjtwO8+D3Pc2RZhqIooJRCwg/rumKgoJiwqh74ut1QliXu9xLhgrBtW3ykKVLCJ4HvQmjsKpAq9sCrFZP95bNVSJJZduz4bBpUjwp1XaOh8zRbhIsErO4A3xOW+dPI8M5LksPu3ObH/jEOn6NdibUWk9bSeB7APM9YloWGtMjO4AFtNkME6wlWZhbypxjmEUJHzIYCmEj1CqpTMiBNSRQlGIZBzkxGhdAeKJilbg3wfiM/KxTJ5CyVEnFcjdntx+o6h+bp8HoR6Ky1h3XhlH8Shv0fjnoU+UzKffk93e+QPxy2Pp6E8d/6D7wBNpcKpqXLJuYAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;gatsby-blog project after PR&quot;
        title=&quot;gatsby-blog project after PR&quot;
        src=&quot;/static/58d42d36bc6420d48b08afdd757845ca/a6d36/10.png&quot;
        srcset=&quot;/static/58d42d36bc6420d48b08afdd757845ca/222b7/10.png 163w,
/static/58d42d36bc6420d48b08afdd757845ca/ff46a/10.png 325w,
/static/58d42d36bc6420d48b08afdd757845ca/a6d36/10.png 650w,
/static/58d42d36bc6420d48b08afdd757845ca/e548f/10.png 975w,
/static/58d42d36bc6420d48b08afdd757845ca/705cc/10.png 1071w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;마지막으로 배포가 완료된 후 now bot이 단 댓글이 수정되며 해당 브랜치의 주소가 생성된다.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 20.858895705521473%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAt0lEQVQY0y2PWxKFIAxDXaqb9cO1CCq0PAVzA1dmDmk7kLbLtm1Y1xVeAs7b4/aK8/K4nGfumAsu1mMqSLki5kI+Tf9YY4Y5b+RSsRzHgX3fEWLkRxoMnJLEOH4qbJhQa8PzfLSG1vpkxIVmQxd8J+cMay2MMdRrTmWtg7F+Gt5OINxCNcBz6hgT3hfo/aW+02PoMq7eOzuU+dCLQENAUIWoIASupA9rROtUL5XmlVv964HU2qfhD2+WM16sB2GRAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;deploy complete&quot;
        title=&quot;deploy complete&quot;
        src=&quot;/static/f38b307674179b9ceff91c3ffa035d22/a6d36/11.png&quot;
        srcset=&quot;/static/f38b307674179b9ceff91c3ffa035d22/222b7/11.png 163w,
/static/f38b307674179b9ceff91c3ffa035d22/ff46a/11.png 325w,
/static/f38b307674179b9ceff91c3ffa035d22/a6d36/11.png 650w,
/static/f38b307674179b9ceff91c3ffa035d22/167b5/11.png 776w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[[번역] SSL Pinning]]></title><description><![CDATA[원글: Explain SSL Pinning with simple codes - Zhang QiChuan HTTPS…]]></description><link>https://ohseunghyeon.github.io/study/ssl-pinning/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/study/ssl-pinning/</guid><pubDate>Thu, 05 Sep 2019 03:40:10 GMT</pubDate><content:encoded>&lt;p&gt;원글: &lt;a href=&quot;https://medium.com/@zhangqichuan/explain-ssl-pinning-with-simple-codes-eaee95b70507&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Explain SSL Pinning with simple codes - Zhang QiChuan&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;HTTPS 연결에는 두 가지 요소가 있는데, 핸드셰이킹 시 서버가 제시하는 &lt;code class=&quot;language-text&quot;&gt;유효한 증명서(certificate)&lt;/code&gt;와 데이터 전달 시 데이터 암호화에 사용되는 &lt;code class=&quot;language-text&quot;&gt;암호화 스위트(Cipher suite)&lt;/code&gt;이다. 증명서는 반드시 필요한 요소이고, 이는 서버 스스로를 증명하는 역할을 한다. 유효한 증명서란 Certificate Authorities(CA) 중 하나에 의해 서명된 경우를 말하며, 클라이언트는 서버가 유효한 증명서를 제시할 때만 이를 신뢰하고 통신을 할 것이다. (CA는 클라이언트 쪽에 미리 설치된다)&lt;/p&gt;
&lt;p&gt;공격자는 이런 방식을 악용할 수 있는데, 클라이언트 쪽에 악의적인 CA 증명서를 심어, 공격자가 서명한 어떤 증명서든 신뢰하게 만들 수 있고, 심지어 CA를 무력화 할 수 있다. 그러므로 서버가 클라이언트에게 제시하는 증명서는 서버의 진위성을 판단하기에 부족할 수 있으며, 잠재적인 중간자 공격에 대한 취약성을 갖고 있다.&lt;/p&gt;
&lt;p&gt;SSL Pinning은 클라이언트 측에서 사용하는 기법으로, SSL 핸드셰이킹 이후에도 서버의 증명서를 다시 확인하여 중간자 공격을 피할 수 있다. 개발자는 개발 시 클라이언트 측에 신뢰할 수 있는 증명서들을 저장(embed or pin)하고, 이는 이후 실제 통신 과정에서 서버가 제공하는 증명서와 비교하는 데 사용된다. 만약 이 과정에서 &lt;code class=&quot;language-text&quot;&gt;미리 저장된 증명서&lt;/code&gt;와 &lt;code class=&quot;language-text&quot;&gt;서버가 제시한 증명서&lt;/code&gt;가 일치하지 않는다면, 연결은 중단될 것이고, 유저의 정보가 서버로 전송되지 않을 것이다. 이런 강제로 인해 클라이언트는 원래의 서버와 통신할 수 있도록 보장된다.&lt;/p&gt;
&lt;p&gt;그러나 SSL Pinning에 대해서 각별히 주의해야 할 경우가 있는데, 클라이언트 측에 미리 저장된 증명서가 만기되거나, 서버 측에서 새로운 증명서를 갖게 되어 클라이언트 측의 저장된 증명서와 다르게 될 경우이다. 이 때, 클라이언트는 더 이상 서버를 믿을 수 없고, 연결을 끊게 되며, 클라이언트 어플리케이션은 그냥 벽돌이 된다(고장난다). 그러므로 이런 상황을 피하기 위해서 릴리즈 이전에 클라이언트 어플리케이션에 미래의 증명서를 저장하는 것(pinning)을 권장한다.&lt;/p&gt;
&lt;p&gt;클라이언트 어플리케이션에서 SSL Pinning을 하는 방식엔 주로 두 가지가 있다. 하나는 완전한 증명서를 저장하는 것이고 하나는 해쉬된 공개키(hashed public key)를 저장하는 것이다. 해쉬된 공개키를 저장하는 접근법은 더욱 선호되는데, 하나의 개인키(private key)가 업데이트할 증명서를 사인하는 데 사용될 수 있고, 이에 따라 새로운 증명서를 만들 때 새로운 해쉬된 공개키를 만들 필요가 없고, 앱이 벽돌이 될 위험을 낮출 수 있다.&lt;/p&gt;
&lt;h3 id=&quot;codes-in-action&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#codes-in-action&quot; aria-label=&quot;codes in action permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Codes In Action&lt;/h3&gt;
&lt;p&gt;나는 www.google.com과 통신하는 간단한 안드로이드 어플리케이션을 만들고, Charles proxy를 중간자 공격 서버로 사용할 것이다. 그리고 SSL Pinning이 어떻게 중간자 공격을 막을 수 있는지 보자.&lt;/p&gt;
&lt;p&gt;다음 코드는 교육의 목적으로 만들어졌으며, production에서 사용하라는 뜻이 아니다. 부디 &lt;a href=&quot;https://square.github.io/okhttp/3.x/okhttp/okhttp3/CertificatePinner.html&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;okhttp&lt;/a&gt; 같은 유명한 라이브러리를 사용하여 더욱 성숙한 해결법을 사용하는 걸 고려해라.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;kotlin&quot;&gt;&lt;pre class=&quot;language-kotlin&quot;&gt;&lt;code class=&quot;language-kotlin&quot;&gt;  &lt;span class=&quot;token comment&quot;&gt;// Read the pinned certificate from local (i.e., assets folder)&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;val&lt;/span&gt; inputStream &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; context&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;assets&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;open&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;google.crt&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;val&lt;/span&gt; pinnedCertificate &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; CertificateFactory&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getInstance&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;X.509&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;generateCertificate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;inputStream&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

  &lt;span class=&quot;token comment&quot;&gt;// Create a request to www.google.com&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;val&lt;/span&gt; url &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;URL&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;https://www.google.com&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;val&lt;/span&gt; httpsUrlConnection &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; url&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;openConnection&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;as&lt;/span&gt; HttpsURLConnection

  &lt;span class=&quot;token comment&quot;&gt;// Establish the connection&lt;/span&gt;
  httpsUrlConnection&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;connect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

  &lt;span class=&quot;token comment&quot;&gt;// Check the certificates and see if one of the server certificates &lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;// matches the pinned certificate&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;httpsUrlConnection&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;serverCertificates&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;contains&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;pinnedCertificate&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token comment&quot;&gt;// Open stream&lt;/span&gt;
      httpsUrlConnection&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;inputStream
      Log&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;d&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;Pinning&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Server certificates validation successful&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      Log&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;d&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;Pinning&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Server certificates validation failed&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;throw&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;SSLException&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;Server certificates validation failed for google.com&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;위의 코드는 딱 보면 알 수 있다. &lt;code class=&quot;language-text&quot;&gt;HttpsUrlConnection&lt;/code&gt;로부터 받은 서버 증명서는 로컬에 pinned 증명서에 의해 체크되고, 증명서가 일치하면 connection input stream은 열리고, 아니면 &lt;code class=&quot;language-text&quot;&gt;SSLException&lt;/code&gt;이 발생할 것이다.&lt;/p&gt;
&lt;p&gt;나는 www.google.com 증명서를 다운받기 위해 openssl command를 사용하고, 이 증명서는 assets 폴더에 저장한다. 그냥 이 코드를 실행하면 &lt;code class=&quot;language-text&quot;&gt;Server certificates validation successful&lt;/code&gt; 메시지를 로그에서 확인할 수 있다.&lt;/p&gt;
&lt;p&gt;이제 Charles를 실행하고, Charles 루트 증명서(root certificate)를 테스트할 기기에 설치한 후, 기기의 proxy 세팅을 Charles service의 IP로 설정한다. Charles 루트 증명서가 신뢰된 CA로서 설치된 상태로, Charles는 이제 중간자가 된다. 그리고 Charles에 의해 서명된 모든 증명서는 클라이언트 시스템에 의해 기본적으로 신뢰받게 된다 (Android 7.0 버전 이상을 제외, 이에 대한 자세한 정보는 &lt;a href=&quot;https://developer.android.com/about/versions/nougat/android-7.0.html#default_trusted_ca&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;여기&lt;/a&gt;로). 그러나 우리는 미리 www.google.com의 증명서를 pin 해놨기 때문에, 이 경우 서버의 증명서를 확인하는 과정은 실패하게 된다.&lt;/p&gt;
&lt;p&gt;Charles proxy를 실행한 상태로 테스트 어플리케이션을 실행하면, 예상한대로 로그에서 &lt;code class=&quot;language-text&quot;&gt;SSLException&lt;/code&gt;과 에러메시지 &lt;code class=&quot;language-text&quot;&gt;Server certificates validation failed for google.com&lt;/code&gt;를 보게 될 것이다.&lt;/p&gt;
&lt;h2 id=&quot;further-reading&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#further-reading&quot; aria-label=&quot;further reading permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Further reading&lt;/h2&gt;
&lt;p&gt;이 포스트의 목적은 SSL Pinning 기법에 대한 입문 레벨의 정보를 제공하는 것이며, 페이팔 엔지니어링 팀에서 &lt;a href=&quot;https://www.paypal-engineering.com/2015/10/14/key-pinning-in-mobile-applications/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;처음 제안한 문서&lt;/a&gt;를 읽을 수도 있고, 자바/안드로이드 상에서의 효과적이지 않은 SSL Pinning에 의한 &lt;a href=&quot;https://www.synopsys.com/blogs/software-security/ineffective-certificate-pinning-implementations/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;버그&lt;/a&gt;에 대해서도 배울 수 있다.&lt;/p&gt;
&lt;h2 id=&quot;참고자료&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#%EC%B0%B8%EA%B3%A0%EC%9E%90%EB%A3%8C&quot; aria-label=&quot;참고자료 permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;참고자료&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://en.wikipedia.org/wiki/HTTP_Public_Key_Pinning&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;위키피디아&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.thesslstore.com/blog/an-introduction-to-pinning/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;An Introduction to SSL Pinning&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://medium.com/@zhangqichuan/explain-ssl-pinning-with-simple-codes-eaee95b70507&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Explain SSL Pinning with simple codes&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://rsec.kr/?p=455&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;SSL TLS에서 사용되는 암호화 스위트 (Cipher Suite) 란 무엇일까?&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://medium.com/@appmattus/android-security-ssl-pinning-1db8acb6621e&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Android Security: SSL Pinning written by Matthew Dolan&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</content:encoded></item><item><title><![CDATA[APIs: The Good, The Bad, The Ugly]]></title><description><![CDATA[APIs에 대하여 documentation, URLs, Payloads, Authentication, Authorization, Errors, Caching를 주제로 각각의 The good, The bad, The ugly…]]></description><link>https://ohseunghyeon.github.io/study/APIs-The-Good-The-Bad-The-Ugly/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/study/APIs-The-Good-The-Bad-The-Ugly/</guid><pubDate>Wed, 04 Sep 2019 09:20:08 GMT</pubDate><content:encoded>&lt;p&gt;&lt;div class=&quot;gatsby-resp-iframe-wrapper&quot; style=&quot;padding-bottom: 56.42857142857143%; position: relative; height: 0; overflow: hidden; margin-bottom: 1.0725rem&quot; &gt; &lt;div class=&quot;embedVideo-container&quot;&gt; &lt;iframe src=&quot;https://www.youtube.com/embed/t0nl5aUfAvY?rel=0&quot; class=&quot;embedVideo-iframe&quot; style=&quot;border:0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; &quot; allowfullscreen&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;/div&gt;&lt;/p&gt;
&lt;p&gt;APIs에 대하여 documentation, URLs, Payloads, Authentication, Authorization, Errors, Caching를 주제로 각각의 The good, The bad, The ugly 케이스를 얘기한다.&lt;/p&gt;
&lt;h2 id=&quot;documentation&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#documentation&quot; aria-label=&quot;documentation permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Documentation&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;The Good: It Exists&lt;/li&gt;
&lt;li&gt;The Bad: Not up to date&lt;/li&gt;
&lt;li&gt;The Ugly: Where is the documentation?&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;urls&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#urls&quot; aria-label=&quot;urls permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;URLs&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;The Good: &lt;strong&gt;Consistency&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;if it respects REST Conventions&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;  /users/22445
  /products/3156
  /movies/127/times&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;The Bad: Inconsistency&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;  /users/22445
  /reviews/3156  &amp;lt;== Not review or time id&amp;#39;s
  /times/127&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;The Ugly:&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;  GET /remove  &amp;lt;==used GET method to delete something&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2 id=&quot;payloads&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#payloads&quot; aria-label=&quot;payloads permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Payloads&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;The Good&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;하나의 Endpoint에 필요한 모든 데이터가 있는 경우&lt;/li&gt;
&lt;li&gt;Content-Type을 잘 지키는 경우&lt;/li&gt;
&lt;li&gt;Versioning이 필요할 때 하는 경우 (그렇지 않을 경우, 어느 순간 Breaking change로 인해 payload에 변동이 있을 경우 client는 고장난다)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;The Bad&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;같은 값에 대해 Endpoint마다 다른 property로 전달하는 경우&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Endpoint&lt;/th&gt;
&lt;th&gt;“id” field&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;/products&lt;/td&gt;
&lt;td&gt;id&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;/products/:id&lt;/td&gt;
&lt;td&gt;productID&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;/cart&lt;/td&gt;
&lt;td&gt;product_id&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;(이런 경우는 나도 자주 봤는데, 특히 각각의 Endpoint를 개발한 사람이 다른 경우 발생하기 쉽다.)&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Payload가 자주 변하는 경우: 이미지의 경로가 &lt;a href=&quot;http://images~&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;http://images~&lt;/a&gt; 였는데 암묵적으로 http:// 를 빠지게 되어서 client에서 이미지가 나오지 않게 되었다.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;The Ugly&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;JSON containing HTML | XML containing HTML&lt;/li&gt;
&lt;li&gt;Unstable: &lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;authentication-who-are-you&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#authentication-who-are-you&quot; aria-label=&quot;authentication who are you permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Authentication: Who are you?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;The Good&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;SSL&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/study/ssl-pinning/&quot;&gt;SSL Pinning&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;OAuth&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;The Bad&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;OAuth (she says OAuth is very controversial)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;The Ugly: 직접 다 만드는 경우&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;authorization-what-are-you-allowed-to-do&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#authorization-what-are-you-allowed-to-do&quot; aria-label=&quot;authorization what are you allowed to do permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Authorization: What are you allowed to do?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;The Good&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;App Requests Permissions
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; margin-bottom: 10px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 32.515337423312886%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAA7DAAAOwwHHb6hkAAABJUlEQVQoz6XP6U7CQBQF4L7/IyhKQowRsI0IapCC5SVkaVGkG7SlZbN7Pd5pocafxkm+nDN/7szldgCY/TFjpPjP4a67A9TFIW56Uq7Re4HQl3ArSuD7fyMMhuAqjRbOm+SYZ3XW27jqiKjdd3+0n1G9e8IF30FVeMxd8g+lSrODWqsLTtN1LDQNumHAME2wO+uWbePg+wjCEH4YIIgibPc7uJ4Hb7MprV0X3naDOEmKlcfKDCNZwYRyMpthTJ1R3udY2g6Wzpo4WFFq5hILeoz5YB8xTOirFbFg0eADPc6xYa/TKcbHgSNZzr0tVNj0A8tjvLxrtMGctjkNnKsq3O0OUZbBj2N80hZckIQIkghBGiFMizwJ0/iXKCvEWVL2/P6VlL4B4074jtboDQ0AAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;Google Cloud Storage JSON API, v1&quot;
        title=&quot;Google Cloud Storage JSON API, v1&quot;
        src=&quot;/static/457cdb7f5119b90ab3266b8bbddd9539/a6d36/authorization.png&quot;
        srcset=&quot;/static/457cdb7f5119b90ab3266b8bbddd9539/222b7/authorization.png 163w,
/static/457cdb7f5119b90ab3266b8bbddd9539/ff46a/authorization.png 325w,
/static/457cdb7f5119b90ab3266b8bbddd9539/a6d36/authorization.png 650w,
/static/457cdb7f5119b90ab3266b8bbddd9539/e548f/authorization.png 975w,
/static/457cdb7f5119b90ab3266b8bbddd9539/5b587/authorization.png 1010w&quot;
        sizes=&quot;(max-width: 650px) 100vw, 650px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;The Bad: A Single Api Key =&gt; 키가 탈취당할 경우 &lt;/li&gt;
&lt;li&gt;The Ugly: Authorization? 만약 Authentication(인증)만 있고 그걸로 모든 권한을 준다면, 결국 어딘가 잘못될 것이다.
모바일 앱이라고 해도 Charles(Web Debugging Proxy) 같은 HTTP debugger로 해킹은 가능하다.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;errors&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#errors&quot; aria-label=&quot;errors permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Errors&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;The Good&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;proper HTTP status code&lt;/li&gt;
&lt;li&gt;error message in response&lt;/li&gt;
&lt;li&gt;human readable error message&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;The Bad&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;messages like “There was an error” =&gt; 불친절한 메시지&lt;/li&gt;
&lt;li&gt;status code는 200인데, error code를 response body에 담는 경우&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;The Ugly&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;HTML page를 return하는 경우&lt;/li&gt;
&lt;li&gt;404 page를 200 code와 함께 return하는 경우&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;caching&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#caching&quot; aria-label=&quot;caching permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Caching&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;The Good&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Using one of the standards&lt;/li&gt;
&lt;li&gt;Cache-Control&lt;/li&gt;
&lt;li&gt;etags&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;The Bad&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;no caching but Manually processing data&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;The Ugly: cache? i don’t care&lt;/li&gt;
&lt;/ul&gt;
&lt;h1 id=&quot;trdl&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#trdl&quot; aria-label=&quot;trdl permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;TR;DL&lt;/h1&gt;
&lt;h3 id=&quot;whats-needed-in-your-api&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#whats-needed-in-your-api&quot; aria-label=&quot;whats needed in your api permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;What’s needed in your API&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Consistency&lt;/li&gt;
&lt;li&gt;Conventions&lt;/li&gt;
&lt;li&gt;Simple&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;qa&quot; style=&quot;position:relative;&quot;&gt;&lt;a href=&quot;#qa&quot; aria-label=&quot;qa permalink&quot; class=&quot;anchor before&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Q&amp;#x26;A&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;api endpoint의 versioning에 대해 선호하는 방법: Path로 버전을 설정하는 걸 좋아한다. header나 date를 가지고 versioning을 할 수도 있을 것이다.&lt;/li&gt;
&lt;li&gt;HTTP2를 사용해도 여러개의 Api를 합쳐서 하나로 만들 필요가 있을까? (payload에서 the good에 해당하는 질문): 여러개의 api를 호출하면 그 중 하나는 실패할 수 있다. 그게 서버상의 문제일 수도 있고 인터넷 환경에 의한 경우일 수 있다.&lt;/li&gt;
&lt;/ul&gt;</content:encoded></item><item><title><![CDATA[Blog 꾸미기]]></title><description><![CDATA[본격적인 일기를 쓰기 위해서 블로그를 새로 만들었다. 블로그를 만들기 위해서 사용한 도구는 Gatsby이다. Gatsby는 이고, React를 기반으로 작동한다. 최근에 React…]]></description><link>https://ohseunghyeon.github.io/blogging/blog-todo-list/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/blogging/blog-todo-list/</guid><pubDate>Tue, 03 Sep 2019 09:19:59 GMT</pubDate><content:encoded>&lt;p&gt;본격적인 일기를 쓰기 위해서 블로그를 새로 만들었다.&lt;/p&gt;
&lt;p&gt;블로그를 만들기 위해서 사용한 도구는 Gatsby이다. Gatsby는 &lt;code class=&quot;language-text&quot;&gt;정적 사이트 생성기&lt;/code&gt;이고, React를 기반으로 작동한다. 최근에 React를 공부하고 있기 떄문에, 이 도구를 쓰는 게 도움이 되지 않을까 생각했다.&lt;/p&gt;
&lt;p&gt;블로그를 생성하기 위한 기본 틀은 &lt;a href=&quot;https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;gatsby-starter-blog&lt;/a&gt;를 사용했다. gatsby에서 제공하는 템플릿인데, starter라는 이름에 맞게 레이아웃이나 스타일이 정말 기본적이고, 아무것도 없다.&lt;/p&gt;
&lt;p&gt;그래서 나는 고치고 싶은 부분들을 리스트로 정리해서 하나하나 하기로 했다.&lt;/p&gt;
&lt;ul&gt;
&lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; checked disabled&gt; emoji 적용하기 &lt;img class=&quot;emoji-icon&quot; alt=&quot;emoji-cat&quot; data-icon=&quot;emoji-cat&quot; style=&quot;display: inline; margin: 0; margin-top: 1px; position: relative; top: 5px; width: 25px&quot; src=&quot;data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAXKklEQVR4Xu17CYxeV3X/727vfet4xjO2x1u8jCdO7DirV/LP4iwOBP6EJISkISAQIa0q0ZSKthKKoGpBapFAFIoKQi00CgqFkLUoRRE4IWm8ZCGxs48dJw5J7HgZe7Zvee/e23PPezMPOykJ9teN8qyjc+d733fu7/zuOeeet1h47/F/+ZDvyMDvCPgdAb8jYOVKYa44p3zvNRfWfvah86s3XHG2mIn/IUfAEjAFbAFjwNpxAmZH5ozuunn3jB6zfsb06Fvd3fUnr7mw+rUPvCtegf+mI8wdMAQsAVPAFjAGrB0nINb67HJZYc6sCEsXlXDGydX+M5ZWP7VkYXXrRy+pfe+D51TW4L/oCHOFOcPcAUPAQpgYG2FkrB0nQGuxoq9bY0aPRl+PQX9fhMFFFZx+UrV01vLatYsWlB68bkPt5v/MiAi2wxxhrjBnmJswMBbCxNgII2PtOAFGiwU9dYVpVQ0pJIRXiKRCT1eEhXPLOG1p1Zy1rPaRgQXVTddeWPvqZWvFLHToCLaCzWA7zBHmojl5bsLAWAgTYyOMjLWjBFw6KOJySc6qViRMJFEyErUwJg0vIKHQVQ1ElLDixEr11KWVG+fOmbblqvPKH8ZxHsFGsBVsBts0B88loXhuw1gYE2MLGAPWgLljBMTzyKYR0yMjoYRAqaRQLSvUKwo1ktgICAd4T6tQi7B4fgWnnlhZsHRR9ZaPXFK/7bJ3lZbgNzzCb8Jvg41gi2wG2zyHcOA5axXGwFgIE2MLGAPWgLljBLgGYqVkTUpAhkm0RBQpEklAmHFiXvHYWQF4SeEZY3BhORBx5bxZ8UNXnFu5Bu/wCN8Nvwm/JRtsCz6zHRuei+ekMWNgLFoytoAxYA2YO0ZAW5TKSnkDAF4I6DCZFFCStCKtFRTpOKRHLKBpnCQeQkjM6ith6UB11sD80q1XnV/9oqDjPwITzoXvhO+G39Bv2QbZYptkm+dQ+ZxS5RhkhsnnpgPWgPkdFfd39CXPzocZ4B3gQeJJBCADAOcBIeHDSQgI4RlUo+HRShwXqP4ZcQD72U+8Tw/88e/13pGmqFsvSgxY+KYQGP3EpV2X903XV8/ojSCFwsiY51CvloNNsG3vBanJ1RaMgbEAjI1BAZIxd4oAqSElBIKf1pFYEg8gaOeRpCQWU9JIPBotD8ChWgp5qRDHEeb3V9FOcXU79VcnKf82sy88jAaJgFE+EIJmyyFJHJwnItuBaR/8zsSSCM++Ki8YC2NyYIwSgjF3jADbFomFd8F4ajOHdeKRSiBNHVo0brUdJpoe440UWnnMmi7R2xOjXjVQxsA6Rc7LXICUJPPfMQFaApFxiBSNlYWEJdspxsYSHDiU4uC4JfugaAAq1iMN9cfloZ8vAmFjmwFrwNwxAoRuttK05Fw+UTNxGTE5IY2Ww+ExB2ctZvcKLJhdQnd3jLgUQ0gSYWC9QeoUgRQszns4NuPBxRUOWgWx0NJC+TYcSd/0lOpIgkMjTbyyp429hyxGJzTtCB7lWDLZSiBgYmwBY5oKFzB3jABj0Uytm6AJKkxA28HaLOwnGg7DIym6Kg7LFkeYM7OMSjVGFJUhdYkJgCKBhvMKEIq0YOd9HgEikCBIB/EpJNoAUnjbAkhKUQvlkqJo0pi+r4EXXmni1TcMNz2VsoRRQMKRmUnAGjB3jIDhcbRmJBhpJ75PKofUZtvhWNNjdDzF/BnAiiVl9PSUCVAMw87nEpwXEYTUpDWEUMFdksnDZyRwOCSAs7nzbXhnSDRUqqBVE0oLGK1QK0/g6V1tvHYgNGCa64zz7DgII1LCGjB3jID7n8bE/Ll2HxWmxeCVQshjdn7pfODUwSqmTauQ8xF0XIXSFUhVYudFEGlIRxAikCCP2n09C5dwl8D7FPCkpYQPqeIkhAgiUBHgcJeSGi0aqJ0N7HjdoUkkRBq8CxFGNNp2X8DcMQI8Wb76gureRtvBCcf78kTTYtkCQc7XyPmw8gYmLkNpDn1efSGjKYE0ufOZMwAJH3kuCAcvJKmsvRbwQUFYGjNlPk+VTHtfxikDQGon8PwvHc2vYHQoxlyU9wbMnSKApd32u0O+W2cxPOaxZDYo52uo1WKaXMNEpeA8SQyps1VHvvIQpIUiza4UzrModh4+29rAKWL5c/5bOd4RPKIsVUji2ME7Eh/j5IUWBw9PYNc+j+k1hAhgrB2+GmTDT42MWxwac6hGFssXx+w8M28iqDzkZXBaKhIOXXaWV5zHikQeJYJ1Hh0FSVLxZwIk3Igoti2VgSaJY8Vz1+pEwiKDsm4zNsLIWDtOwERqtx84lPhGM8HgXIkumrgUSxitoRhYACkz59nRSQcEMCUonOWIKEhgEZkWU2QUn7Et7v50RoLWiLVAKVKYVi9hYI6ktOSewQesHSfgwP70ueFRt7e3BtqbS9kFiJHQetJ5BSkUgy9AZ1IcR50rvluIKFKk0DzmqJKCNc9pjEQcCY6GGT0RuisWw6N2b8DacQKeesUfFLCPzOrVKJVC1RXQWvGKkBzpOMBjkY8L8YV4Ln5HfY5CF+OCR5/ZlyJIICG7CjQkcWzQP90gYAxYAaCTRZBlyTwT1aqGV94YAa3U5BbFUoBmnVd3HufiMgX5ZkKAgpSChCNNsv+ySAehuBWONBBFArWqxsBcHXX+tjjfmTHv6u7SF1VihVIEzj8piz0a8Ec56uDhCiJ4jOJ8QcqbPvP+TZ+xDZGTI4Ap0pUS7HwpkiiXNLpr+qIPENaOExDF8pNdVaPKZZUVPyOgpIBUxTKJAmxBgrPZmDWPc7GZFITl2uZj1pkU54u0QFgAxsDpWI4FKiWJes2oqpaf7CQB/OChVjbvrVU0KnFgu7gpcoTTDNjm4NNCkxTO2cKRwuFMXEoq/50j8ZPijvpNNhbcFYJTIDagCMjSoFrR772EMHeuE5TRhdPqeka1LIllgdgEArgYTTkuhCsI8FzJ2SEID++408tbYZU5MFUyJgm0hfM+YSnISVl7XzifiYAEY8lulZUES8BaOaAuBHBrRwgoRbi0XtEgAmicEyBl3pYWIc1e+SDyLSs/Q/a22AZzAjwsa7AmcUnutM11kTLwrIu6IACjGCNjq1UkXyBFsbq0IwRccpqozp1XXlerqGz1YwGjAcW73mToW1ICIieAwQmTJ1h2HjInYbLz80cSVDjLOhPHmsVPRdeRtUFy0ygQGXBtKpMQCWGx1gXsP3nSjx8XAaUyBmpleUIoMCUjuPorxbl/ZB47AS9FtmdPOucc/GTYO15hHk82QUX4u8JxONYcBZMpAVdExVvUDwnGlHeGYBIqhDlgB7DtuAhQRp1eLWtDRrnrMjq7ZydFDly4Ipedh9QeIgZ820JEBkgdrJW544UUR1HYjl51pRxA4lsJ2STdTmHTYlcQpD2JFA5aAVp7XqRy2A0q2gTsx02AMfJ0Xv04hFkgQEDJkHtF6E46ohS4H//Lr76CuzbuwfrVM/GFG09Cb3eJgE+SoEkkS05A4Xye/560UhYHhhu46esvYuPWN3DZ+ln43A1zUIlBtlKeuugUPaQE4yPhCCBh7ABuPi4CKrE6s8zhD8QaMCqbTCAHDZUXIwGhHD7z5d345m37sXzFqaSfwZ4D2/DDLy+HhIb3BhApSdASmNpFilX3rg2JBDZJcf1fDOHO+8fJ1un40s3b+Urv7z87G4Jrjp+KPAFACcBIfmLEUikrxn5cfcB7V4t+YvIUMpRvfcguRiYnnlq5NpRO8MT2w/j2Hftw8YaLcMePvo9rr70Sd27cj40P74XUDXhH4luAa5MkLPk4OE7SBGwDUjWwcfN+cv4g2yBbZPNCfPvOA3jimTEow3VgKg3YEQFuirTBVB0I2IMPxxwBJlarKiXVG0d5+CvBYS457+WRFzUKuP/xMThR5jS55557kCREjKnhp48cxsVnG8CWAF/iXVLw1LLY4pgIJoB0Cz/dOgpl6myDbLFNJyo0RwOnL1NFCuQ4OA0UEKkMaxxxZ9gbfABwzzFFgPRifakk88tesKiixBd5m1ft3XstKtU6hoZ24NZbb8W2bdtQq9fx8uspkIznzrXz1Cm6Qu/y5sc26VQDaDawa4+j39bYBtlim5VqLbNlE26aOA1yG/BZYVZacEGMtUSppNiHY48Ao1bzA0gDkOLix+2vKIoXgWBBmlVjY2IopTA2NsZ1wRgDKdrwLRLI7FaZ0/BC8XmfpVFOTAtp2oYgkbAwpsI2yBbbNEZDyUCAg7PBloMv7jdwCqhsR2DMhJ19OOYaoLVYRAItRdZw8O6fO+0sa0dirQUSh8X9Du1Wiw3EcczgG802Fs5swyYJnOVImVqx4nAsns6nSYp2O/tNs9kONtgWALLdxuLZ2XbrnIMn7XPNB2/P4EVSivGzD8dMgFKoBVaF9IDIJoBHMbknYTDZzcjzVgA1M469bwxjeHgY+/YPwycjWH+qRattYW3h+JF3injM0UC2iQCL809J4NMRssG22GYtGsN5pwKtlmPiGQdpD7BGIUVEkA/HnAIS0PCAtb6od+y0gONakBEwMu4wNp5dBN14ucbN940jNi3UlceV71FYsVijlUiUI0zdHBWQPOaeUqgjSGkmEisGyvjTqzzu3tSCUQl6Syk+dF6EJFF47qUU9Vp4PUdx/4+AiRfGH91hsw/HTEBqfZukQoZ59VIr4bwggA4PPjaB3a8n0Dp0XRLTuwRiA6xZFmH6NIHRhsHC2SUsIjnQrBAZEaTzMLIByLwhAolwJAmPhVAQZj5cHBOhbbz/3AmcdmITu15rol5KMDDXY/9hxkVPhhIcONzk55JdZYHzVlYwo1fDph6Ml4Qf5FqRHDMBbYuRduq7kxT8BHj7ziaGXmrz46c5MxUuO7+GiaajZscSEM+fe68wOFfwU9xS1IZUEloG50wW6KRZ8kdl8I7P+fAdEkl4BQyUaMKoFgb6W5jf5zA2oTDWdJzzFiDCJU5aqDF3hsKm7S384L5RpBaYO1NjwdyInxG2SdLUjRwzAa22e2Gi5U7Y/Xobjz2dYv4sjQtWVzC9LvH0iy3cdf8YrBNYutBgVo/E/uEwqUDqJZEnUZZERClBtTKGEulyHJyv5w9NopwAm4mMWCI9ilg3ANOCsCkmWkArVUjsVKGjuQQ7+/PHm7wws3sVPrC+RvYFHnqiiXsfJBuxhNAcrc8fMwFJ2z/84u7WRTN7DC5eW0V3TWDjIxOUgy1ceUEN///cKvbS6u941fL+PLNHY9lCkE4g4DmnldYwQQIgU4FSmouqhS9ubghAS8ApDWiDcjQBhRSxTjCtSg5OB+8Ghyc0hb7EY8+miCKPFYOGnNc4OOLwrR8d4mbpvLMqWL+qhi1PN/DcrhZFqN9+TASctkTMrEcyrVRcOqtP659tHce+4RTXXdqFD22o4oHHmvj6Px+mpzIRzj6thAWzFRfITGTmF2+fEtoEpyO+bh9pVPDqyKmwei6gyhkBlhxOXsHc2qOoRw1oreF9tp1556fuIvR1S5x/puD0eX2/w+ZtTdz9wAS/jPHpD3fzZ/90zwiabY+F8yJUyj7ZP+yGVw6KMx8d8o/jLY63/A8TKwfENCWxbMuQ33TxWebnsVLnnDxQwurlMQ4Op7QCLSyYo3HNhhrlopq8GiNNkpkNY9ZcA3QEaUpoJRE2blsJ1XM2avXceT5Cs9NAevBBXLDsQcRxiqSdwqUWHpOkHnUBzTuSQCv1uO2+MaoDTQyeEGH5khjPv5xg6/YGFeL0qY1PJivWLBaneYvRrS/7F982AoQQcsUJkNte9pvWDuoPSomXeudhtZQivvXeEcybqSkC6ujrkRjaHSpxmxwDsvsFinJekZYh9EkbVMsRKiWDrrqBFCle3r0X8TCtdFcVUiqAnSF0IxNojb6BZNCgmdQxOu4w0UgwTtJqJ0jTBO3U8nbbaJJuWFjnaCsUtFPE9O5yjB8/NIHv3nWYV79c9a2Dh3H7ukH151te9H9zWr+okm+ayEx/LQH5Y+XhNUv05V5Abn4+/ej6Fbpy4OD4lScvLlF+K/xk0zgOHrY88eD8EGqSi6G1gslwbaDLAEaDoyO1kpwxqFVi9NeH8PgLDfT1RnB5vEh47D+Q4IzFO6FNL8bHDZxvcq2IjOVtrdESRARf6dF8Av19CtZKvLovxXcp7MPRN13j5IEY24eaYXd69KFnk8+H1V8zqD5t9+Ib7Pw76QTXDoq1EHbP1qH0B+uW6E/S5C9a6x/fsbuFF3a30T1NYd3pZXb8YcrDf3uyRfXBcu5J4fNmRiBJs1A1OkVkEkRxAxvWjKAx8Qvcff9zODw8gsOHRmj8PBrjj+GStfuh1Agi1YKSCeA92RDsfJpm1yKJzRqvJ15I8a+bmzg87rF6RRlLF8UYHnF4ekeTiHLPJS13B0Xw39HqP9n07nvVQbVh5VxRedsUWL1I9AuJg1t2+hfWLtHXCCFOFg4J7fNfikv2Y96rdz/2TJNvkC7oj3hrjIzAa/ssUivQ3yupR7CYVgOFf8rv9xijoHQT1seIK934o2texWe/+QIOHdKc0bN7nsOnrq7AVOagmTpYHIQQKYx2NI/LukXv8MZBT1ecHjYNoQ+ceILmCNj1akI7geXI8MLem7Tt5yH05QBG1y1RNz25w3+BnN9sDBYAePbXFsGTZoj6c/v86LpFYg2UvsIL9/rmIfvV1UvEfCnU14wRgzN71fL+PoNmi9tifkV9/mxF6ZG/vmoECelIso5jhXJZUwoYGseolQHt9uO2O/ZxY/PBy7thZS9GJgSaTcu53yDdbFu0257EIUkd2ik3W+QsEbHHYu/+hCOiFAscGkuwZ599ImmjIeD/etNQeveaE/X7pBfrPNxr5MM3hBCK/LVvuwucOShmRJDXW+tuf+RF//zaE9WNAuIMa+03tu70j5xzsv5HB1zT16PL8/oNt8KVUv6oWovMcS3Y8eJWtUG9ZmgsKAUm8PJL+3HTtxuABz7/8RgLFvWiWqmg0fZU6FJ+37DJJHgShxZJ3t0x8Y1W6A4dbX0pXSglDefx8FjTXlWJYAH9OQiYhku/aDxaWsjrHdymrTv8w2+7DQaW1gzocw+I9OG4iWqtrL4Mh59s3pF+n3LqOiHwMef8nZW6u0ULdYU24upqLFdVyqonnlxxwyTkDywlO22UR9JOcHi0CZ8m1E2CX3uj+Tl8qcfnnaOnu0SkGaSOiGp6UCeKVpCEhCMgkEEENOzweMs9kqb++2nL/rDZUBu8xKcA8djmoeQzaxaKRdKoL6TW/i0t4ta1g2ZDK023/mKXP/R2EcCShby+PnXpVx7d6Q+HgiIEansS+we7dvkmioMug8X8WKsVQskFWvtuqWRklKhGWpwQa78s0n6FEBYSIacFv9/XVZW04hETMDbRxqHR8HLD5Cu2Ag78Zun2xIpnaNV3J4kfT71ru9Qd8la83Ert9ge2+1eOxh22PQ+x3rXtH4Z9n/7+E3jx7KYd6b3vtBFi54VQG7YMpf+wdrGYJZT6uge+t3kovQu/4XHKKSI6oYJ1cWQ+XolxRbUs61m6KBgt2UA7STnMG01Hoe9Gx5v+9iS139k9gU1PPeXb+A2PtQNiEFL9lRe4ZcsL6b+sG9TvR2r3btrlt7wNAbwFdjngjK1D/oEzF4sFkVKfSxN706Mv+ddxnMd7VomlQkYfj2N5RWTkoFGCTyQ25LkdotC+Xbj2d+59xD+PDhzrBs1XPPwDYeFWLRarlcDw5p1+6OjG5whZtRD9Qa9Zgq7Vg/LPls9Ajc91UM5eivpFZ+n/t2FV6YYNq8wNYRw+4/MdltUD8vfJl7VhvHweph99niPgrdrh1QPqOjTtj7f80h/A//KDmrmPtYT98eNDft876gRXLsKgTe19vwXOs2zeaW9RFouEEPptCVgphPEOI5zzvyWH9z5tWQxRKrypFf53AYVUUst5QCwAAAAASUVORK5CYII=&quot; title=&quot;emoji-cat&quot;&gt; - &lt;a href=&quot;https://www.gatsbyjs.org/packages/gatsby-remark-emojis/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;gatsby-remark-emojis&lt;/a&gt; 2019.9.3&lt;/li&gt;
&lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; checked disabled&gt; font 가독성 좋게 바꾸기&lt;/li&gt;
&lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; checked disabled&gt; now 연동해서 풀 리퀘스트 자동 배포하기&lt;/li&gt;
&lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; checked disabled&gt; &lt;a href=&quot;https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;code block theme 설정&lt;/a&gt; - gatsby-browser.js - import “prismjs/themes/prism-tomorrow.css”&lt;/li&gt;
&lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; checked disabled&gt; &lt;a href=&quot;https://www.gatsbyjs.org/packages/gatsby-remark-images-medium-zoom/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;이미지 클릭 시 새 창이 아닌 블로그 내에서 띄우기&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; checked disabled&gt; &lt;a href=&quot;/blogging/deploying-github-pages-with-github-actions/&quot;&gt;github actions로 자동 배포하기&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; checked disabled&gt; &lt;a href=&quot;/blogging/add-draft-feature/&quot;&gt;excluding draft blog on build&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; checked disabled&gt; &lt;a href=&quot;/blogging/making-about-pages/&quot;&gt;about 페이지 만들기&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; checked disabled&gt; &lt;a href=&quot;/blogging/making-new-post-script/&quot;&gt;새로운 게시글을 만드는 script 생성&lt;/a&gt; - &lt;a href=&quot;https://jbee.io/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Jbee&lt;/a&gt; 님의 스크립트를 참고하여 생성 (감사합니다)&lt;/li&gt;
&lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; checked disabled&gt; &lt;a href=&quot;/blogging/add-reading-time-of-post&quot;&gt;몇 분짜리 글인지 표시&lt;/a&gt; - &lt;a href=&quot;https://www.gatsbyjs.org/packages/gatsby-remark-reading-time&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;gatsby-remark-reading-time&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; checked disabled&gt; &lt;a href=&quot;/blogging/making-category-page/&quot;&gt;카테고리 넣기&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; checked disabled&gt; 댓글 달기 - &lt;a href=&quot;https://utteranc.es/&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://utteranc.es/&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; checked disabled&gt; &lt;a href=&quot;/blogging/applying-dark-mode-on-gatsby-blog/&quot;&gt;Light/Dark Theme 넣기&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; checked disabled&gt; 글 내의 목차&lt;/li&gt;
&lt;/ul&gt;</content:encoded></item><item><title><![CDATA[npm 모듈 설치 시 node-gyp rebuild 에러]]></title><description><![CDATA[npm install —global —production windows-build-tools]]></description><link>https://ohseunghyeon.github.io/reference/npm-모듈-설치-시-node-gyp-rebuild-에러/</link><guid isPermaLink="false">https://ohseunghyeon.github.io/reference/npm-모듈-설치-시-node-gyp-rebuild-에러/</guid><pubDate>Tue, 26 Jun 2018 05:54:08 GMT</pubDate><content:encoded>&lt;p&gt;npm install —global —production windows-build-tools&lt;/p&gt;</content:encoded></item></channel></rss>