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[GoodGoodMan's blog]]></title><description><![CDATA[Blog]]></description><link>https://goodgoodjm.github.io</link><generator>GatsbyJS</generator><lastBuildDate>Sun, 20 Dec 2020 02:36:27 GMT</lastBuildDate><item><title><![CDATA[사이드 프로젝트 [FathFinder] - 0]]></title><description><![CDATA[최근 하루에 한시간은 반드시 재태크 공부에 시간을 투자하고 있다. 나름 나의 지식이 닿는 테크, 클라우드 기업만 손을 대고 있었는데, 수익이 쏠쏠했지만 투자금이 점점 많아지면서 소비재 같은 섹터에 분산해서 보유하려 한다. 처음엔 ETF…]]></description><link>https://goodgoodjm.github.io/side-project-fath-finder/</link><guid isPermaLink="false">https://goodgoodjm.github.io/side-project-fath-finder/</guid><pubDate>Sun, 20 Dec 2020 10:21:55 GMT</pubDate><content:encoded>&lt;p&gt; 최근 하루에 한시간은 반드시 재태크 공부에 시간을 투자하고 있다. 나름 나의 지식이 닿는 테크, 클라우드 기업만 손을 대고 있었는데, 수익이 쏠쏠했지만 투자금이 점점 많아지면서 소비재 같은 섹터에 분산해서 보유하려 한다. 처음엔 ETF를 사서 단일 항목으로 비율을 보기 편했으나, 점점 개별주로 관심이 가게되면서 항목들의 비율이 너무 나뉘어 내가 ‘아 A는 친환경 관련 종목으로 모아야지’ 같이 나름 자신의 기준으로 분류한 종목들의 비율을 계산하기 너무 복잡했다.&lt;/p&gt;
&lt;p&gt; 일일히 머릿속으로 외워놓고 비율을 더하는 것도 한계가 있던참에, 혹시 관련 제품이 있지 않을까 해서 찾아봤었다. 조건은 다음과 같았다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;OSX, Windows 환경이 지원되어야 한다. 여기서 HTS는 걸러진다..&lt;/li&gt;
&lt;li&gt;내가 태그(ex. 소비재-식품, 소비재-의류)그룹을 만들고 태그를 포트폴리오의 주식에 달면, 해당 그룹의 태그 별 비율을 보여주는 기능이 있어야 한다.&lt;/li&gt;
&lt;li&gt;주식별로 메모를 달 수 있어야 한다.&lt;/li&gt;
&lt;li&gt;포트폴리오의 각 항목에 메모를 달 수 있어야 한다.&lt;/li&gt;
&lt;li&gt;가능하면 Navtive(Electron은 Native로 간주)였으면 좋겠다. Chrome은 나도 모르게 끄는 경우가 많으므로…&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt; 나름 열심히 찾아보았지만 원하는 것은 찾지 못했다… 때문에 퇴근 후, 주말에 어차피 커뮤니티 따위나 하릴없이 바라보는 비생산적인 활동 대신 이러한 사이드 프로젝트를 진행하는 것이 좀더 견실하다 생각하여 사이드 프로젝트를 진행하게 되었다. 나는 사이드 프로젝트를 진행할때는 최대한 본업에 도움이 되는 방향으로 진행하므로, 현재 회사에서 사용중인 프론트엔드 스택과, 앞으로 쓸 예정인 Elixir를 이용해 백엔드를 구성할 생각이다.&lt;/p&gt;
&lt;h3&gt;개발 스택&lt;/h3&gt;
&lt;h4&gt;Front-end&lt;/h4&gt;
&lt;p&gt; 프론트엔드는 TS+React와 Electron 환경으로 개발할 예정이다. 모바일도 욕심이 나 Flutter도 고려하긴 했었다. 하지만 당장 사용처가 없고 웹 프론트 감도 되찾을겸 React를 사용하기로 했다.&lt;/p&gt;
&lt;h4&gt;Back-end&lt;/h4&gt;
&lt;p&gt; 회사에서 외부 서드파티 연동 기능을 Elixir로 작업할 예정이므로, Pheonix를 사용하여 개발할 예정이다. DB로는 PostgreSQL, 로그인 서버는 직접 구현하지 않고 Cognito같은 서드파티를 이용할 예정이다.&lt;/p&gt;
&lt;p&gt; 주가나 주식에 대한 정보를 어떻게 가져올지 고민했었는데, IEX Cloud 를 이용하면 큰 비용 없이 처리할 수 있을것 같다.&lt;/p&gt;
&lt;p&gt; 목표한 작업이 대충 마무리되면, 공인인증서로 실제 보유한 주식 데이터들을 가져오는 처리도 고려할 예정이다, Tretri 개발 때 보유 카드를 가져오는 처리를 하면서 테스트 해보았는데 그렇게 핸들링이 어렵진 않았다.&lt;/p&gt;
&lt;h3&gt;Prototype&lt;/h3&gt;
&lt;p&gt; 간단한 UI 프로토타입을 만들고 이를 참조해서 만들려고 했는데,,, 이게 쉽지 않다. 생각보다 시간도 많이들고 이쁘게 나오질 않는다. 일단 내가 머릿속에 생각해둔건 안잊기 위해 각 페이지별로 만들어놓을 생각인데.. 쉽지않다.&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: 630px; &quot;
    &gt;
      &lt;a
    class=&quot;gatsby-resp-image-link&quot;
    href=&quot;/static/28be36c82f3e71b0a801b332f459d416/df51d/menu_template.jpg&quot;
    style=&quot;display: block&quot;
    target=&quot;_blank&quot;
    rel=&quot;noopener&quot;
  &gt;
    &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 50%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB2YuAD//EABYQAQEBAAAAAAAAAAAAAAAAABABAv/aAAgBAQABBQLTX//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABcQAQADAAAAAAAAAAAAAAAAABABMUH/2gAIAQEAAT8htDl//9oADAMBAAIAAwAAABCQz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAQABBQEAAAAAAAAAAAAAAAEQABEhMUGB/9oACAEBAAE/ECFg5SDsIz8z/9k=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;MenuTemplate&quot;
        title=&quot;MenuTemplate&quot;
        src=&quot;/static/28be36c82f3e71b0a801b332f459d416/828fb/menu_template.jpg&quot;
        srcset=&quot;/static/28be36c82f3e71b0a801b332f459d416/ff44c/menu_template.jpg 158w,
/static/28be36c82f3e71b0a801b332f459d416/a6688/menu_template.jpg 315w,
/static/28be36c82f3e71b0a801b332f459d416/828fb/menu_template.jpg 630w,
/static/28be36c82f3e71b0a801b332f459d416/0ede0/menu_template.jpg 945w,
/static/28be36c82f3e71b0a801b332f459d416/3ac88/menu_template.jpg 1260w,
/static/28be36c82f3e71b0a801b332f459d416/df51d/menu_template.jpg 2400w&quot;
        sizes=&quot;(max-width: 630px) 100vw, 630px&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;/a&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: 630px; &quot;
    &gt;
      &lt;a
    class=&quot;gatsby-resp-image-link&quot;
    href=&quot;/static/3295111eeade0c3d96c1bc90452ad700/df51d/dash_board.jpg&quot;
    style=&quot;display: block&quot;
    target=&quot;_blank&quot;
    rel=&quot;noopener&quot;
  &gt;
    &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 50%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAdqVVGGD/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAFBESL/2gAIAQEAAQUCS5uIkP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAQEBAAAAAAAAAAAAAAAAABEAIP/aAAgBAQAGPwKDP//EABkQAAMBAQEAAAAAAAAAAAAAAAABEUExUf/aAAgBAQABPyFDqFaeEmYPyEH0M//aAAwDAQACAAMAAAAQsw//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAaEAEAAwEBAQAAAAAAAAAAAAABABEhMUFx/9oACAEBAAE/ECi1HoiI2unF82PRRyNAGEbXeUzx8J//2Q==&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;DashBoard&quot;
        title=&quot;DashBoard&quot;
        src=&quot;/static/3295111eeade0c3d96c1bc90452ad700/828fb/dash_board.jpg&quot;
        srcset=&quot;/static/3295111eeade0c3d96c1bc90452ad700/ff44c/dash_board.jpg 158w,
/static/3295111eeade0c3d96c1bc90452ad700/a6688/dash_board.jpg 315w,
/static/3295111eeade0c3d96c1bc90452ad700/828fb/dash_board.jpg 630w,
/static/3295111eeade0c3d96c1bc90452ad700/0ede0/dash_board.jpg 945w,
/static/3295111eeade0c3d96c1bc90452ad700/3ac88/dash_board.jpg 1260w,
/static/3295111eeade0c3d96c1bc90452ad700/df51d/dash_board.jpg 2400w&quot;
        sizes=&quot;(max-width: 630px) 100vw, 630px&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;/a&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: 630px; &quot;
    &gt;
      &lt;a
    class=&quot;gatsby-resp-image-link&quot;
    href=&quot;/static/c1d2f15b0179b08b489afb0c2f259272/df51d/portfolio.jpg&quot;
    style=&quot;display: block&quot;
    target=&quot;_blank&quot;
    rel=&quot;noopener&quot;
  &gt;
    &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 50%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAECAwX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHs6QyBh//EABgQAAIDAAAAAAAAAAAAAAAAAAABERIg/9oACAEBAAEFAkVRGP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABoQAQEAAgMAAAAAAAAAAAAAAAEAEBEhUWH/2gAIAQEAAT8hInJeEjrG2b//2gAMAwEAAgADAAAAEIPP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAHBABAAIBBQAAAAAAAAAAAAAAAQAhMRFhcZGx/9oACAEBAAE/EKkNvsBwY91RCsVxNx7mU//Z&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;Portfolio&quot;
        title=&quot;Portfolio&quot;
        src=&quot;/static/c1d2f15b0179b08b489afb0c2f259272/828fb/portfolio.jpg&quot;
        srcset=&quot;/static/c1d2f15b0179b08b489afb0c2f259272/ff44c/portfolio.jpg 158w,
/static/c1d2f15b0179b08b489afb0c2f259272/a6688/portfolio.jpg 315w,
/static/c1d2f15b0179b08b489afb0c2f259272/828fb/portfolio.jpg 630w,
/static/c1d2f15b0179b08b489afb0c2f259272/0ede0/portfolio.jpg 945w,
/static/c1d2f15b0179b08b489afb0c2f259272/3ac88/portfolio.jpg 1260w,
/static/c1d2f15b0179b08b489afb0c2f259272/df51d/portfolio.jpg 2400w&quot;
        sizes=&quot;(max-width: 630px) 100vw, 630px&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;/a&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: 630px; &quot;
    &gt;
      &lt;a
    class=&quot;gatsby-resp-image-link&quot;
    href=&quot;/static/551d089d5aa26c906c5ed8ee0f947032/df51d/portfolio_selected.jpg&quot;
    style=&quot;display: block&quot;
    target=&quot;_blank&quot;
    rel=&quot;noopener&quot;
  &gt;
    &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 50%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAgADBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAenqWOEf/8QAGRAAAwADAAAAAAAAAAAAAAAAAAEQAhES/9oACAEBAAEFAnsxOVFP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFxAAAwEAAAAAAAAAAAAAAAAAASAhgf/aAAgBAQAGPwKHG//EABwQAAICAgMAAAAAAAAAAAAAAAERACEQQTFRYf/aAAgBAQABPyG4Ej0leuAGY3WOEJPc/9oADAMBAAIAAwAAABAgz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EAB4QAQACAgEFAAAAAAAAAAAAAAEAESFBMRBRYZHh/9oACAEBAAE/ECXRJTkLyX043EBQgmvEcxN9BRTl3O4e5//Z&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;PortfolioSelected&quot;
        title=&quot;PortfolioSelected&quot;
        src=&quot;/static/551d089d5aa26c906c5ed8ee0f947032/828fb/portfolio_selected.jpg&quot;
        srcset=&quot;/static/551d089d5aa26c906c5ed8ee0f947032/ff44c/portfolio_selected.jpg 158w,
/static/551d089d5aa26c906c5ed8ee0f947032/a6688/portfolio_selected.jpg 315w,
/static/551d089d5aa26c906c5ed8ee0f947032/828fb/portfolio_selected.jpg 630w,
/static/551d089d5aa26c906c5ed8ee0f947032/0ede0/portfolio_selected.jpg 945w,
/static/551d089d5aa26c906c5ed8ee0f947032/3ac88/portfolio_selected.jpg 1260w,
/static/551d089d5aa26c906c5ed8ee0f947032/df51d/portfolio_selected.jpg 2400w&quot;
        sizes=&quot;(max-width: 630px) 100vw, 630px&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;/a&gt;
    &lt;/span&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[AWS Lambda 와 Firebase Auth 를 이용하여 Kakao, Naver 로그인 구현하기 - 1 [AWS Lambda 배포 설정]]]]></title><description><![CDATA[AWS Lambda 와 Firebase Auth 를 이용하여 Kakao, Naver 로그인 구현하기 AWS Lambda 와 Firebase Auth 를 이용하여 Kakao, Naver 로그인 구현하기 - 0 [전굽기] AWS Lambda…]]></description><link>https://goodgoodjm.github.io/kakao-and-naver-login-with-firebase-1/</link><guid isPermaLink="false">https://goodgoodjm.github.io/kakao-and-naver-login-with-firebase-1/</guid><pubDate>Thu, 12 Mar 2020 15:30:14 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;AWS Lambda 와 Firebase Auth 를 이용하여 Kakao, Naver 로그인 구현하기&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;/kakao-and-naver-login-with-firebase-0&quot;&gt;AWS Lambda 와 Firebase Auth 를 이용하여 Kakao, Naver 로그인 구현하기 - 0 [전굽기]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/kakao-and-naver-login-with-firebase-1&quot;&gt;AWS Lambda 와 Firebase Auth 를 이용하여 Kakao, Naver 로그인 구현하기 - 1 [AWS Lambda 배포 설정]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/kakao-and-naver-login-with-firebase-2&quot;&gt;AWS Lambda 와 Firebase Auth 를 이용하여 Kakao, Naver 로그인 구현하기 - 2 [Kakao, Naver 로그인 적용]&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;
&lt;hr&gt;
&lt;p&gt;해당 포스트에선&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Serverless Framework 을 이용하여 쉽게 AWS Lambda 와 API Gateway 에 프로젝트를 배포한다.&lt;/li&gt;
&lt;li&gt;GitLab Runner 를 이용하여 master 브랜치에 변경점이 생긴 경우 자동으로 (1.)을 실행한다.&lt;/li&gt;
&lt;/ol&gt;
&lt;hr&gt;
&lt;p&gt;해당 포스트는 &lt;a href=&quot;serverless.com&quot;&gt;Serverless Framework&lt;/a&gt;를 이용하여 레포지토리에 변경사항이 생길 경우 AWS Lambda 와 API Gateway 에 자동으로 배포하는 설정에 대한 포스트이다. NodeJS 에서 Firebase 에 Kakao, Naver 인증을 연동하는 내용은 &lt;a href=&quot;/programming/kakao-and-naver-login-with-firebase-2&quot;&gt;다음 포스트&lt;/a&gt;를 참고한다.&lt;/p&gt;
&lt;h2&gt;프로젝트 설정&lt;/h2&gt;
&lt;p&gt;각 요소(Serverless Framework, AWS Lambda, API Gateway)에 대해 깊은 이해는 필요없지만, 각각 어떤 기능을 제공하는지 간단하게라도 알아야 포스트를 읽기 수월할 것이라고 생각한다.&lt;/p&gt;
&lt;p&gt;본인은 레포지토리로 GitLab을 자주 사용한다. 그래서 GitLab과 &lt;a href=&quot;https://docs.gitlab.com/runner/&quot;&gt;GitLab Runner&lt;/a&gt;를 사용하여 자동화를 할 예정이다. 이는 자신이 선호하는 조합(Github + action, Github + Travis 등)을 사용하면 된다.&lt;/p&gt;
&lt;p&gt;GitLab 레포지토리를 생성하고 clone 받은 뒤 npm 프로젝트로 초기화(&lt;code class=&quot;language-text&quot;&gt;npm init&lt;/code&gt;) 한 뒤, eslint 같은 정적 분석 툴이나 의존 패키지들을 설치하면 된다.&lt;/p&gt;
&lt;p&gt;Kakao, Naver API 에 Request 를 날릴 &lt;a href=&quot;https://www.npmjs.com/package/request&quot;&gt;request&lt;/a&gt; 와 &lt;a href=&quot;https://www.npmjs.com/package/request-promise-native&quot;&gt;request-promise-native&lt;/a&gt;도 install 하자. 20년 들어오면서 Depreacted 되었지만 별달리 괜찮은 대체제를 찾지 못했다. 꼭 &lt;code class=&quot;language-text&quot;&gt;request&lt;/code&gt;를 써야 할 필요는 없다, 자신이 편한걸 사용하면 된다.&lt;/p&gt;
&lt;p&gt;마지막으로 Firebase auth 에 새 유저를 추가하고 CustomToken을 발급하는데 필요한 &lt;a href=&quot;https://www.npmjs.com/package/firebase-admin&quot;&gt;firebase-admin&lt;/a&gt;을 install 하자.&lt;/p&gt;
&lt;p&gt;AWS Lambda 를 사용할 것이므로 기본적으로 위 &lt;code class=&quot;language-text&quot;&gt;request&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;request-promise-native&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;firebase-admin&lt;/code&gt; 세개만 있어도 충분하다. 이것저것 의존할거 없이 쉽게 프로젝트를 구성할 수 있는것도 AWS Lambda 의 장점이라고 생각한다.&lt;/p&gt;
&lt;h2&gt;Handler 생성&lt;/h2&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;src/index.js&lt;/code&gt; 파일을 생성하고 아래와 같이 기본 handler 를 선언한다.&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;handler&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;async&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;event&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; body &lt;span class=&quot;token operator&quot;&gt;=&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;event&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;body&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;
    statusCode&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;200&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    body&lt;span class=&quot;token operator&quot;&gt;:&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;stringify&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;body&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;

exports&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;handler &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; handler&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;AWS Lambda 만 사용할 때와 API Gateway 와 같이 사용할 때 handler 의 인자로 주입되는 event 값과 반환되어야 할 return 값이 다르다. event 에 어떤 구조의 값이 주입되는지는 &lt;a href=&quot;https://docs.aws.amazon.com/lambda/latest/dg/lambda-services.html&quot;&gt;Using AWS Lambda with Other Services&lt;/a&gt;를 참조한다.&lt;/p&gt;
&lt;p&gt;handler 를 async 함수로 한 이유는 어차피 http request 를 보내는데 비동기 처리가 들어갈 것이기 때문에 미리 선언한다. Lambda 는 Promise 객체의 반환도 지원하므로 async 를 사용하거나 Promise 객체를 직접 반환하여도 문제없이 동작한다.&lt;/p&gt;
&lt;p&gt;나중에 코드가 점점 추가되겠지만, 자동화 테스트에는 이정도의 코드만 있어도 충분하다.&lt;/p&gt;
&lt;h2&gt;Serverless 설정 생성&lt;/h2&gt;
&lt;p&gt;프로젝트 루트 디렉토리에 &lt;code class=&quot;language-text&quot;&gt;serverless.yml&lt;/code&gt;을 생성하고 아래의 설정을 입력한다.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Serverless framework의 AWS Lambda와 API Gateway 설정을 보다 깊게 알고 싶다면 &lt;a href=&quot;https://serverless.com/framework/docs/providers/aws/events/apigateway/&quot;&gt;해당 문서&lt;/a&gt;를 참고한다.&lt;/p&gt;
&lt;/blockquote&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;service&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; exampleProject &lt;span class=&quot;token comment&quot;&gt;#1&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;provider&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; aws
  &lt;span class=&quot;token key atrule&quot;&gt;runtime&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; nodejs10.x &lt;span class=&quot;token comment&quot;&gt;#2&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;region&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ap&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;northeast&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;  &lt;span class=&quot;token comment&quot;&gt;#3&lt;/span&gt;

&lt;span class=&quot;token key atrule&quot;&gt;functions&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;custom_token&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;handler&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; src/index.handler &lt;span class=&quot;token comment&quot;&gt;#4&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;events&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;http&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; POST custom_token &lt;span class=&quot;token comment&quot;&gt;#5&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;environment&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
      &lt;span class=&quot;token key atrule&quot;&gt;SERVICE_ACCOUNT_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;env&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;SERVICE_ACCOUNT_KEY&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;#6&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;설명할 설정이 많아 주석마다 라벨을 지정하고 설명을 달도록 하겠다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;#1 에는 프로젝트의 이름을 지정해 주면 된다.&lt;/li&gt;
&lt;li&gt;#2 에는 사용할 NodeJS 런타임을 지정하면 된다. &lt;a href=&quot;https://docs.aws.amazon.com/ko_kr/lambda/latest/dg/lambda-runtimes.html&quot;&gt;lambda-runtimes&lt;/a&gt; 참고한다.&lt;/li&gt;
&lt;li&gt;#3 에는 AWS Lambda 가 배치 될 region 을 지정해주면 된다. &lt;a href=&quot;https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/using-regions-availability-zones.html&quot;&gt;using-regions-availability-zones&lt;/a&gt; 참고한다.&lt;/li&gt;
&lt;li&gt;#4 에는 handler 를 export 하는 파일을 지정해주면 된다. &lt;code class=&quot;language-text&quot;&gt;src/&amp;lt;fileName&amp;gt;.&amp;lt;handlerName&amp;gt;&lt;/code&gt;의 포맷이며, 위 &lt;a href=&quot;#Handler-%EC%83%9D%EC%84%B1&quot;&gt;Handler 생성&lt;/a&gt; 기준으로는 &lt;code class=&quot;language-text&quot;&gt;src/index.handler&lt;/code&gt; 이다.&lt;/li&gt;
&lt;li&gt;#5 사용할 Resource 를 지정한다, 이는 API Gateway 를 생성하는데 사용된다. 위 예제에선 POST Method 만 custom&lt;em&gt;token이라는 경로로 받을 것이기 떄문에 `POST custom&lt;/em&gt;token`만 설정하였다.&lt;/li&gt;
&lt;li&gt;#6 추후 Firebase Admin 에서 필요한 serviceAccountKey 의 값을 환경변수로 넣어준다. serviceAccountKey 발급에 대해서는 &lt;a href=&quot;https://firebase.google.com/docs/admin/setup?hl=ko#initialize_the_sdk&quot;&gt;해당 링크&lt;/a&gt;를 참고한다.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;#6 에 대해 부가적인 설명이 필요한데, serviceAccountKey 는 그냥 json 파일째로 프로젝트에 넣어 &lt;code class=&quot;language-text&quot;&gt;require&lt;/code&gt; 할 수 있지만, 그러면 레포지토리에 serviceAccountKey 가 노출되기때문에 보안을 위해 &lt;code class=&quot;language-text&quot;&gt;.gitignore&lt;/code&gt;에 등록하고 작업자들에게 직접 키를 배포한다거나 하는작업이 필요할 수 있다.
때문에 파일을 노출하지 않기위해 환경변수에서 받아 역직렬화하여 사용하는게 보다 관리하기 편하다. 이 환경변수는 local에서 테스트 할 경우에는 직접 추가하면 되고, 추후 배포시에는 GitLab Runner 의 설정으로 주입할 것이다. 해당 설정으로 주입한 환경변수는 AWS Lambda 의 환경변수로 전달되어 사용된다.(&lt;code class=&quot;language-text&quot;&gt;process.env.SERVICE_ACCOUNT_KEY&lt;/code&gt;로 사용할 예정)&lt;/p&gt;
&lt;p&gt;해당 설정이 끝나면 &lt;code class=&quot;language-text&quot;&gt;npx serverless deploy --stage production&lt;/code&gt;로 배포할 수 있다. &lt;code class=&quot;language-text&quot;&gt;serverless.yml&lt;/code&gt;에 명시한 대로 AWS Lambda 와 API Gateway 에 배포, 설정될 것이다.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;npx serverless deploy&lt;/code&gt;를 하기 위해선 IAM에서 KEY ID 와 Secret 을 각각 환경변수 &lt;code class=&quot;language-text&quot;&gt;AWS_ACCESS_KEY_ID&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;AWS_SECRET_ACCESS_KEY&lt;/code&gt;에 추가해주어야 한다. 이는 추후 &lt;code class=&quot;language-text&quot;&gt;SERVICE_ACCOUNT_KEY&lt;/code&gt;와 같이 GitLab Runner 의 설정에서 주입될 예정이다.
Serverless 를 위한 IAM 키 할당, 발급은 &lt;a href=&quot;https://helloinyong.tistory.com/135&quot;&gt;해당 문서&lt;/a&gt;에 너무 잘 설명되어 있으니 참고한다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;GitLab Runner 설정&lt;/h2&gt;
&lt;p&gt;우선 &lt;a href=&quot;#Serverless-%EC%84%A4%EC%A0%95-%EC%83%9D%EC%84%B1&quot;&gt;Serverless 설정 생성&lt;/a&gt;에 사용한 환경변수들은 GitLab Runner 의 환경변수에 넣어보자.&lt;/p&gt;
&lt;p&gt;브라우저로 해당 프로젝트의 GitLab Repository로 이동한다음 Settings-&gt;CI/CD 페이지로 이동하여 &lt;code class=&quot;language-text&quot;&gt;Variables&lt;/code&gt;에 &lt;code class=&quot;language-text&quot;&gt;SERVICE_ACCOUNT_KEY&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;AWS_ACCESS_KEY_ID&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;AWS_SECRET_ACCESS_KEY&lt;/code&gt;를 환경변수로 등록한다.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;환경변수 설정에 대해 더 알고싶으면 &lt;a href=&quot;https://docs.gitlab.com/ee/ci/variables/README.html#via-the-ui&quot;&gt;GitLab CI/CD environment variables#via-the-ui&lt;/a&gt;문서를 참고한다.&lt;/p&gt;
&lt;/blockquote&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: 630px; &quot;
    &gt;
      &lt;a
    class=&quot;gatsby-resp-image-link&quot;
    href=&quot;/static/2d7ae849525015de39cb438bf4e5af2e/35a31/variables.png&quot;
    style=&quot;display: block&quot;
    target=&quot;_blank&quot;
    rel=&quot;noopener&quot;
  &gt;
    &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 50%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAABjklEQVQoz41Sy07kMBCc/z/xIXviGxCHFQeEhEDLLJDJJJkNQ+w87DzscdHVMLPDntZSqdxJd3W17ZXzHsV2i7I2iIeEdDjgcIaUiPS1T9/Ab1zTNGG/32u8arsO6/Uav19eUZQl8jxHKVwUBcqqEuxkv9WY2Gw2glzziLquEULAOI7aZOXFYSWFOxaL0AkSN3mGJnvB7s2gfjewbYtODPihU24lHoYB52tFZX6kOnmeZx2h63ukGOGFB+exl7olRFhr8N7LyFI8yD/m/z0ecbgsi3aLUuycQ9M0ykQvDTiBsR1unhf4ibktfq4n+Dlh9J/5NEUdFTwKkemsl67ko1Oy8yOeqoB5iVr8q1owhyQis+Yzh/Unh610DTGosLVWiyimLGi7HreZiM1BHDuUcjl0TiHmM5cXo4KIchpj1AMN0tG74STGouMZF3LbbMi4OBM0xmg+lwr+8Q2uyjs8mg06H9C6T/vfIN3plC4YU5TMi+CEx/eogg82w8X9D1xm17AuwrigD/x/FgX+3X8A9yUEHi4evTkAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;Variables&quot;
        title=&quot;Variables&quot;
        src=&quot;/static/2d7ae849525015de39cb438bf4e5af2e/f058b/variables.png&quot;
        srcset=&quot;/static/2d7ae849525015de39cb438bf4e5af2e/c26ae/variables.png 158w,
/static/2d7ae849525015de39cb438bf4e5af2e/6bdcf/variables.png 315w,
/static/2d7ae849525015de39cb438bf4e5af2e/f058b/variables.png 630w,
/static/2d7ae849525015de39cb438bf4e5af2e/40601/variables.png 945w,
/static/2d7ae849525015de39cb438bf4e5af2e/35a31/variables.png 1028w&quot;
        sizes=&quot;(max-width: 630px) 100vw, 630px&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;/a&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;위 사진과 같이 각 환경변수들을 설정하고 나면 &lt;code class=&quot;language-text&quot;&gt;.gitlab-ci.yml&lt;/code&gt;을 작성해야한다. 프로젝트 루트 디렉토리에 &lt;code class=&quot;language-text&quot;&gt;.gitlab-ci.yml&lt;/code&gt;파일을 만들고 아래와 같이 설정을 입력한다.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;아래 설정은 &lt;a href=&quot;https://docs.gitlab.com/ee/user/project/clusters/serverless/aws.html#crafting-the-gitlab-ciyml-file&quot;&gt;Deploying AWS Lambda function using GitLab CI/CD#crafting-the-gitlab-ciyml-file&lt;/a&gt;에 잘 설명되어있다.&lt;/p&gt;
&lt;/blockquote&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;image&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; node&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;latest

&lt;span class=&quot;token key atrule&quot;&gt;stages&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; deploy

&lt;span class=&quot;token key atrule&quot;&gt;production&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;only&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; master
  &lt;span class=&quot;token key atrule&quot;&gt;stage&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; deploy
  &lt;span class=&quot;token key atrule&quot;&gt;before_script&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; npm config set prefix /usr/local
    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; npm install &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;g serverless
  &lt;span class=&quot;token key atrule&quot;&gt;script&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; serverless deploy &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;stage production &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;verbose
  &lt;span class=&quot;token key atrule&quot;&gt;environment&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; production&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;위 설정에서 master 브랜치에 변경이 가해질 경우 &lt;code class=&quot;language-text&quot;&gt;production&lt;/code&gt; Job 이 동작하도록 설정하였으므로, 커밋&amp;#x26;푸시하여 GitLab 레포지토리의 master 브랜치에 수정을 가해 자동으로 &lt;code class=&quot;language-text&quot;&gt;serverless deploy --stage production --verbose&lt;/code&gt;를 실행하게 할 수 있다.&lt;/p&gt;
&lt;h2&gt;GitLab Runner 실행&lt;/h2&gt;
&lt;p&gt;GitLab 레포지토리에 커밋을 푸시해보자&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;웹 페이지에서 CI/CD -&gt; Pipeline 페이지으로 이동한다음 Run Pipeline을 이용해 수동으로 실행할수도 있다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;푸시하고 브라우저에서 프로젝트 레포지토리로 이동한다음 좌측 탭 CI/CD의 Pipeline 페이지로 이동해보자.&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: 630px; &quot;
    &gt;
      &lt;a
    class=&quot;gatsby-resp-image-link&quot;
    href=&quot;/static/973748bdc8c65d8e4b8f8238ffc468f2/c1328/pipeline.png&quot;
    style=&quot;display: block&quot;
    target=&quot;_blank&quot;
    rel=&quot;noopener&quot;
  &gt;
    &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 16.455696202531648%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAAAsSAAALEgHS3X78AAAAiUlEQVQI12VOQQ7DMAjr/7+1F+wRW7s1S6W2IUBIvQSpO3Qgy0JgmyFThoqil7Cg1orjOLCnBDNzMDPO6rsOIkIp5TefGLIyVmniahjDC/Mn+EIoOasqlhhbQEbcuAU2YWtW+TNzw00JE0WwKW6PO57r7J+UffMDE8E8jS0o4h0W/7gbZhPnq+EXoirqsIecnJkAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;Pipeline&quot;
        title=&quot;Pipeline&quot;
        src=&quot;/static/973748bdc8c65d8e4b8f8238ffc468f2/f058b/pipeline.png&quot;
        srcset=&quot;/static/973748bdc8c65d8e4b8f8238ffc468f2/c26ae/pipeline.png 158w,
/static/973748bdc8c65d8e4b8f8238ffc468f2/6bdcf/pipeline.png 315w,
/static/973748bdc8c65d8e4b8f8238ffc468f2/f058b/pipeline.png 630w,
/static/973748bdc8c65d8e4b8f8238ffc468f2/c1328/pipeline.png 866w&quot;
        sizes=&quot;(max-width: 630px) 100vw, 630px&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;/a&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;위 이미지대로 Pipeline 이 생성되어있을 것이고, 해당 파이프라인을 눌러 상세 정보와 로그를 볼 수 있다.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;각 Job의 로그는 파이프라인을 눌러 파이프라인 페이지로 이동한 다음 해당 Job을 누르면 확인할 수 있다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;hr&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;GitLab Runner 실행&lt;/code&gt; 까지 진행했다면, 앞으로 코드 수정사항에 있어 귀찮은 작업 없이 커밋&amp;#x26;푸시 만으로 코드를 갱신할 수 있다.&lt;/p&gt;
&lt;p&gt;이러한 작업들이 없다고 AWS Lambda 를 사용할 수 없는 것은 아니다. 직접 손으로 Lambda Function 을 만들고 프로젝트를 압축하여 업로드 할 수 있고, Function 설정에서 직접 API Gateway를 연결한 뒤 배포하여 사용할 수 있다.&lt;/p&gt;
&lt;p&gt;그러나 코드 하나를 바꾸는 수정에도 직접 프로젝트를 압축하여(이것도 50MB 가 넘는 경우에는 S3를 통해 업로드 해야한다) 배포한다거나, serviceAccountKey 를 관리한다거나 하는 귀찮은 작업들을 자동화 시키면, 처음에는 귀찮고 짜증날지 몰라도 이후 진행되는 작업은 수월하게 진행할 수 있을 것이다.&lt;/p&gt;
&lt;h2&gt;참고문서&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-create-api-as-simple-proxy-for-lambda.html&quot;&gt;TUTORIAL: Build a Hello World API with Lambda Proxy Integration&lt;/a&gt;
&lt;a href=&quot;https://firebase.google.com/docs/admin/setup?hl=ko#initialize_the_sdk&quot;&gt;서버에 Firebase Admin SDK 추가&lt;/a&gt;
&lt;a href=&quot;https://helloinyong.tistory.com/135&quot;&gt;[2019.06.10] Serverless framework를 이용하여 lambda 배포하는 법&lt;/a&gt;
&lt;a href=&quot;https://docs.gitlab.com/ee/ci/variables/README.html#via-the-ui&quot;&gt;GitLab CI/CD environment variables#via-the-ui&lt;/a&gt;
&lt;a href=&quot;https://docs.gitlab.com/ee/user/project/clusters/serverless/aws.html&quot;&gt;Deploying AWS Lambda function using GitLab CI/CD&lt;/a&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[AWS Lambda 와 Firebase Auth 를 이용하여 Kakao, Naver 로그인 구현하기 - 0 [전굽기]]]></title><description><![CDATA[AWS Lambda 와 Firebase Auth 를 이용하여 Kakao, Naver 로그인 구현하기 AWS Lambda 와 Firebase Auth 를 이용하여 Kakao, Naver 로그인 구현하기 - 0 [전굽기] AWS Lambda…]]></description><link>https://goodgoodjm.github.io/kakao-and-naver-login-with-firebase-0/</link><guid isPermaLink="false">https://goodgoodjm.github.io/kakao-and-naver-login-with-firebase-0/</guid><pubDate>Tue, 10 Mar 2020 10:37:32 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;AWS Lambda 와 Firebase Auth 를 이용하여 Kakao, Naver 로그인 구현하기&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;/kakao-and-naver-login-with-firebase-0&quot;&gt;AWS Lambda 와 Firebase Auth 를 이용하여 Kakao, Naver 로그인 구현하기 - 0 [전굽기]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/kakao-and-naver-login-with-firebase-1&quot;&gt;AWS Lambda 와 Firebase Auth 를 이용하여 Kakao, Naver 로그인 구현하기 - 1 [AWS Lambda 배포 설정]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/kakao-and-naver-login-with-firebase-2&quot;&gt;AWS Lambda 와 Firebase Auth 를 이용하여 Kakao, Naver 로그인 구현하기 - 2 [Kakao, Naver 로그인 적용]&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;
&lt;p&gt;관리하기 쉬운 코드는 내가 관리할 코드가 적은 코드라고 생각한다, 때문에 나는 관리하는 코드를 줄이는 것을 좋아한다.&lt;/p&gt;
&lt;p&gt;예전에는 어지간한 기능은 전부 만들었던 것 같다. 예를들면 gitlab-runner 같은 솔루션들이 있음에도 불구하고, git 의 hooks 를 이용하여 직접 CI/CD를 만들거나 사용할 기능에 비해 라이브러리에 기능이 많으면 해당 기능만 직접 구현해서 쓰거나 했었다.&lt;/p&gt;
&lt;p&gt;직접 작성한 코드는 작성자가 나이므로 문제의 발생 원인이나 수정이 매우 쉽다. 하지만 동시에 관리하는 코드가 많아지고, 결과적으로는 의도와 다르게 이런 저런 기능들이 들어가면서 기존에 봤던 라이브러리의 하위호환따위가 되고는 한다. 작성했던 코드에서 문제가 발생하면 더욱 답이 없다, 내가 작성한 모든 코드들은 나의 관리(책임)이므로 사소한 모든 에러사항이나 잘못된 동작은 나를 더욱 힘들게 한다.&lt;/p&gt;
&lt;p&gt;외주를 간간히 받게되면서, 유지보수에 많은 시간을 할애하기 힘든 나는 필연적으로 내가 관리하는 코드를 줄이고 보다 관리하기 쉬운 코드를 만들려고 노력하게 되었다.&lt;/p&gt;
&lt;h2&gt;Firebase Auth&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://firebase.google.com/docs/auth/?gclid=Cj0KCQjw0pfzBRCOARIsANi0g0urbOcQ-rnyQ6_bUJgg76RpcxQ0cw-i2uMquzpJkEOPk2ygrYzRUGgaAmwCEALw_wcB&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;Firebase Auth&lt;/code&gt;&lt;/a&gt;는 Firebase 에서 제공하는 유저인증 솔루션이다. 모바일, 웹 플랫폼에 관계없이 누구나 쉽고 빠르게 로그인, 회원가입을 구현할 수 있고 여러 인증(SMS, Email)과 Social Login 들을 지원한다. 유저의 구분이 필요한 거의 모든 프로그램은 인증 기능이 필요하므로 &lt;code class=&quot;language-text&quot;&gt;Firebase Auth&lt;/code&gt;에 익숙하면 프로그래머가 굳이 인증기능을 만드는데 시간을 할애할 필요없이 곧바로 메인 로직을 작업할 수 있다.&lt;/p&gt;
&lt;p&gt;인증은 상당히 간단해 보이면서 귀찮은 절차가 많다. 간단하게 ‘유저의 아이디와 비밀번호를 조회하여 검증한다’의 뒤에 별개의 프로젝트로 구성하여 따로 서버를 구동시켜야 하는 경우도 있고, 유저 가입 처리, 로그인 처리, 수정, 탈퇴, SMS/Email 인증, 서드파티 인증, 토큰발급… 이미 구성해놓은 솔루션 없이 새로 작업하다보면 작업하다 지치는 경우도 많았다.&lt;/p&gt;
&lt;p&gt;뿐만 아니라 Kakao, Naver 같이 다른 제공업체를 이용해야 하는 경우는 로그인 프로세스가 1000ms 이상(네트워크 환경에 따라 다를 수 있음.)의 긴 실행시간을 가지는 경우가 많다. 때문에 여러 유저가 가입/접속/수정 할 때를 대비하여 확장 가능하고 안정성 있는 인프라를 구축하기 위해 Load Balancing 이나 Health Check 등을 구현해서 작업해야할 필요가 있는데, 이는 너무나도 할게 많아 그냥 &lt;code class=&quot;language-text&quot;&gt;에이 나중에 하지&lt;/code&gt; 라는 생각으로 넘어갔다가 다시 작업하는 경우도 있었다.&lt;/p&gt;
&lt;p&gt;당장 위에 적은 작업들만 봐도 인증을 구현하는데 필요한 작업은 너무나도 많다. 더군다나 개인 프로젝트로 하다보면 2~3주가 지났는데 아직까지 메인 기능을 작업하지 못하는 상황에 직면하다 지쳐 그만둬 버리는 경우가 많다.&lt;/p&gt;
&lt;p&gt;때문에 나는 인증을 구현할때 &lt;code class=&quot;language-text&quot;&gt;Firebase Auth&lt;/code&gt;와 &lt;code class=&quot;language-text&quot;&gt;AWS Lambda(혹은 이와 같은 서비스)&lt;/code&gt;를 같이 사용하고 이런 방식으로 사용하는것을 추천한다.&lt;/p&gt;
&lt;h2&gt;왜 Firebase Auth를 선택했나.&lt;/h2&gt;
&lt;p&gt;Kakao 나 Naver 로그인 같은 경우는 아직 솔루션 단에서 바로 제공하는 곳이 없다. 어느정도 추가 작업이 필요하다.
&lt;code class=&quot;language-text&quot;&gt;Cognito&lt;/code&gt;에서 작업한다고 하면 &lt;code class=&quot;language-text&quot;&gt;Identity Pool 과 User Pool&lt;/code&gt;과 AWS Labmda 를 같이 써서 인증을 해야하는데 이러한 부부에서 Firebase Auth 는 CustomToken 을 발급해버리면 끝이므로 비교적 쉽게 작업할 수 있다.
나는 Firebase Auth 를 선호하여 사용하였지만 굳이 강제될 필요는 없다, 각자 자기가 편한 스택을 사용하면 된다고 생각한다.&lt;/p&gt;
&lt;h2&gt;왜 AWS Lambda인가?&lt;/h2&gt;
&lt;p&gt;관리하기 쉽다, 메모리 할당과 제한 시간을 설정할 수도 있고, 각종 AWS 스택을 가져다 붙일 수도 있다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;API Gateway&lt;/code&gt;를 이용하여 Key별로 요청 가능한 할당량을 준다거나, 권한제어를 할 수 있다. &lt;code class=&quot;language-text&quot;&gt;X-Ray&lt;/code&gt;같은 기능을 붙일수도 있으며 Swgger로 API 명세를 뽑아줄 수도 있다.&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;CloudWatch&lt;/code&gt;로 로깅을 하거나 Cronjob을 스케쥴 할 수 있다.&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;VPC&lt;/code&gt;에 묶어 다른 AWS 스택(&lt;code class=&quot;language-text&quot;&gt;EC2&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;RDS&lt;/code&gt; 등등..)에 접근할 수 있다.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;꼭 AWS에 묶일 필요는 없다. GCP 스택을 선호하면 &lt;code class=&quot;language-text&quot;&gt;Cloud Functions&lt;/code&gt;를 사용하면 되고, Azure 스택을 선호하면 &lt;code class=&quot;language-text&quot;&gt;Azure Functions&lt;/code&gt;를 사용하면 된다.&lt;/p&gt;
&lt;p&gt;포스팅은 해당 포스트를 포함하여 3개로 진행될 예정이며 각 &lt;code class=&quot;language-text&quot;&gt;AWS Lambda&lt;/code&gt;나 &lt;code class=&quot;language-text&quot;&gt;Firabase Auth&lt;/code&gt; 자체에 대해 설명하거나 사용방법을 글에 쓰진 않을 예정이다.
내가 작성할 수 있는 것보다 훨씬 좋은 내용의 포스트들이 많으므로 해당 포스트들을 링크할 것이며, 진행중에 마주친 일반적이지 않은 에러에 대해선 간단하게 작성할 예정이다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[log-20191024]]></title><description><![CDATA[참고문서 시험기간에 가장 재미있는 공부는 시험과목 외의 공부다. 일본어 1…]]></description><link>https://goodgoodjm.github.io/log-20191024/</link><guid isPermaLink="false">https://goodgoodjm.github.io/log-20191024/</guid><pubDate>Thu, 24 Oct 2019 21:22:00 GMT</pubDate><content:encoded>&lt;h2&gt;참고문서&lt;/h2&gt;
&lt;p&gt;시험기간에 가장 재미있는 공부는 시험과목 외의 공부다.&lt;/p&gt;
&lt;p&gt;일본어 14학점의 압박을 견디는 중, 단어를 암기할 암기장을 만드는데 너무 불필요한 짜증남을 느끼던중, 단어장을 쉽게 만들고 이를 이용해 단어 시험을 출제해주는 프로그램이 필요하다고 생각했다.&lt;/p&gt;
&lt;p&gt;절대 시험공부를 하기 싫어서가 아니다.&lt;/p&gt;
&lt;p&gt;목표하는 기능은 다음과 같다&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;단어 추가 창에 히라가나(or 알파벳 발음기호)입력 시 네이버 사전을 이용하여 검색되는 단어 출력&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;이를 그대로 사용하거나, 직접 입력 가능&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;지문을 카피해서 붙여넣기 할 시 지문에서 단어 요소들을 전부 위 과정을 통해 저장&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;자연어 처리를 Google Cloud의 Natural Language 사용&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;프로젝트 이름은 &lt;code class=&quot;language-text&quot;&gt;Nihon-GO&lt;/code&gt;로 정했다, 빨리 만들어서 단어나 외워야겠다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[log-20191018]]></title><description><![CDATA[참고문서 행복했던 휴식기가 끝나고 나름 꽤나 힘들거라고 생각하고 복학을했지만, 현실은 생각보다 더욱 힘들었다. 1…]]></description><link>https://goodgoodjm.github.io/log-20191018/</link><guid isPermaLink="false">https://goodgoodjm.github.io/log-20191018/</guid><pubDate>Fri, 18 Oct 2019 12:20:00 GMT</pubDate><content:encoded>&lt;h2&gt;참고문서&lt;/h2&gt;
&lt;p&gt;행복했던 휴식기가 끝나고 나름 꽤나 힘들거라고 생각하고 복학을했지만, 현실은 생각보다 더욱 힘들었다.&lt;/p&gt;
&lt;p&gt;14학점의 일본어 수업은 나를 지레 겁먹게했고 각 수업마다 쏟아지는 단어시험이 날 쉽게 포기하게했다. 거기에 전필때문에 졸업을 위해 신청한 3~4학년 수업들은, 잘해봐야 1학년 수준의 일본어를 가진 나를 정신적으로 괴롭혔다.&lt;/p&gt;
&lt;p&gt;이때 마침 웹 클라이언트 외주가 들어왔고, 학기중이라면 하지않는 외주를 현실도피하듯 덥썩 물어 외주를 진행했다.&lt;/p&gt;
&lt;p&gt;작업은 React를 이용해서 베팅 게임 페이지를 구현하는 것이었다. 동료를 구해와서 진행했고, 별 무리 없이 개발을 끝마칠수 있었다.&lt;/p&gt;
&lt;p&gt;React를 꽤 오래 전 부터 눈독을 들여왔고, 간간히 사이드 프로젝트로는 진행해보았지만 실제 런칭될 상용페이지는 처음 제작하기때문에 기술 스택에서부터 많은 고민을 했었다.&lt;/p&gt;
&lt;h2&gt;Styled Components&lt;/h2&gt;
&lt;p&gt;스타일관련 처리를 어떻게 할지 조사할때, 수많은 경쟁군이 있었다.&lt;/p&gt;
&lt;p&gt;SASS(SCSS), CSS Module, JSS .. 정말 생각해보지 않은 많은 처리기들이 있었고, 여러 프로젝트들이 각기 입맛에 맞게 다르게 쓰고있었기 때문에 방향을 잡기 힘들었다. 당장 내가 주로 사용하던 &lt;a href=&quot;https://material-ui.com/#/&quot;&gt;Material-UI&lt;/a&gt;만 봐도 JSS를 사용하는데, &lt;a href=&quot;http://react-toolbox.com/#/&quot;&gt;React Toolbox&lt;/a&gt;는 CSS Module를 사용한다. 큰 프로젝트들을 분석하면서 공통점을 찾기가 힘들었고, 명확히 어떤 상황에서 어떤 처리기를 쓰고 안쓰는지 명확한 구분은 따로 없이, 그냥 작업자가 편한 처리기를 사용하는거 같다는 생각을 가지게 되었다.&lt;/p&gt;
&lt;p&gt;때문에 더이상의 고민은 멈추고, 가장 내가 편하게 쓸 수 있을 것 같은 처리기를 찾았고 그게 Style-Components다.&lt;/p&gt;
&lt;p&gt;Styled-Components를 선택한 이유는 &lt;code class=&quot;language-text&quot;&gt;JS 프로그래밍 하듯 스타일을 작성할 수 있어서&lt;/code&gt; 이다. 왜 이렇게 느꼈는지는 &lt;a href=&quot;&amp;#x27;&amp;#x27;&quot;&gt;‘Styled-Components’&lt;/a&gt;에 추후 포스팅 할 예정이다.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://tech.decisiv.com/structuring-our-styled-components-part-i-2bf21fa64b28&quot;&gt;Structuring our Styled Components&lt;/a&gt;를 많이 참고하여 프로젝트의 스타일을 구성하였다.&lt;/p&gt;
&lt;p&gt;프로젝트 하나를 진행 완료 해보고 나서 Styled Components가 어떠했느냐 묻는다면, 솔직히 너무 좋다고는 할 수 없었다.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;JS 프로그래밍 하듯 스타일을 작성할 수 있어서&lt;/code&gt;의 목표는 완벽하게 달성할 수 있었으나, 중간중간 JS 처리가 들어가는 것이 컴포넌트의 크기가 커짐에 따라 확인과 수정이 어려워 졌다.&lt;/p&gt;
&lt;p&gt;아마 다음 프로젝트에 별다른 Material-UI같은 Style Framework을 사용하지 않는다면, 다시 Styled-Components를 사용하겠으나, 만약 Styled Framework을 사용한다면 굳이 Styled-Components를 사용하기 위해 이런저런짓을 하진 않을 것 같다.&lt;/p&gt;
&lt;h2&gt;Redux&lt;/h2&gt;
&lt;p&gt;Redux는 과연 필요한가. 프로젝트를 구성하면서 수없이 든 생각이었다.&lt;/p&gt;
&lt;p&gt;React 가 버전업 되면서 16.3 16.8에 각 ContextAPI와 Hooks가 추가되며, Redux가 프로젝트에 반드시 추가되어야 하는지에 대해 고민을 하게되었다. 그리고 많은 고민끝에, Redux를 넣어서 나쁠게 없다는 것도 충분히 인지하게 되었다.&lt;/p&gt;
&lt;p&gt;하지만 이번 프로젝트에는 Redux를 도입하지 않았다. ContextAPI와 Hooks만으로 프로젝트를 진행하였다.&lt;/p&gt;
&lt;p&gt;도입하지 않은 이유는 팀원의 숙련도 때문이었다. 당시 팀원은 프론트 개발에 미숙한 상태였다. React와 Styled-Components만으로도 힘겨워 했기 때문에, Redux를 공부해서 프로젝트에 추가하기엔 너무 시간이 부족했다.&lt;/p&gt;
&lt;p&gt;때문에 당장 React 에 빌트인 되어있는 ContextAPI 와 Hooks를 사용하여 전역 상태를 관리하는 것이 보다 받아들이기 쉬울 것이라 생각하고 Redux를 제하고 프로젝트를 완성했다.&lt;/p&gt;
&lt;p&gt;외주가 마무리되면서, 이땐 왜 이렇게 했었지, 왜 이런 코드를 만들었지 하는 생각이 들기도 한다. 그와 동시에 미뤄놨던 학교 수업을 따라갈 생각에 머리가 아프기도 한다. 외주를 진행하면서, 거의 모든 수업을 낙제 직전까지 결석하였고, 과제와 매일있는 단어시험을 한번도 준비하지 못했다. 일과 학습을 병행하는 나의 사정을 이해하여 주시는 교수님들도 계시겠지만, 좋지 않게 보시는 교수님들도 많을 것이다.&lt;/p&gt;
&lt;p&gt;후회하냐고 묻는다면, 그저 아쉽다고 생각한다. 도피하듯 덥썩 일을 받아서 진행한 벌인가보다.&lt;/p&gt;
&lt;p&gt;남은학기, &lt;a href=&quot;/log-20190612&quot;&gt;log-20190612&lt;/a&gt; 에 목표로한 일들을 마무리하고, 남은 수업을 따라가기위해 노력해봐야겠다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[log-20190612]]></title><description><![CDATA[길었던 병특 복무가…]]></description><link>https://goodgoodjm.github.io/log-20190612/</link><guid isPermaLink="false">https://goodgoodjm.github.io/log-20190612/</guid><pubDate>Wed, 12 Jun 2019 01:20:00 GMT</pubDate><content:encoded>&lt;p&gt;길었던 병특 복무가 5월에 끝나고, &lt;code class=&quot;language-text&quot;&gt;Tower Of Aden&lt;/code&gt;과 다른 작업들을 들어가기에 앞서 잠시 일본에 오게되었다.&lt;/p&gt;
&lt;p&gt;후쿠오카에서 도쿄까지 대부분의 경로를 버스로 이동하는데, 오사카-도쿄 같은 장거리버스는 나같이 지나가는 풍경을 바라보는 것을 좋아하는 사람한테는 제격이다. 20시부터 다음날 07시 까지 이동하는 이 심야버스들은, 그저 앉아서 창문 밖을 바라보는 것 만으로도 시간을 감춰버리는 매력을 가지고 있다.&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: 630px; &quot;
    &gt;
      &lt;a
    class=&quot;gatsby-resp-image-link&quot;
    href=&quot;/static/bfc42c584ce2a6accd3cce793f95bc1d/d2602/coding_in_bus_00.jpg&quot;
    style=&quot;display: block&quot;
    target=&quot;_blank&quot;
    rel=&quot;noopener&quot;
  &gt;
    &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 75.31645569620254%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAEEAwX/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAYHmk6BMaf/EABsQAAEEAwAAAAAAAAAAAAAAAAEAAhESAxMi/9oACAEBAAEFAtRLWc5ZV3lTQgyv/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGhAAAgIDAAAAAAAAAAAAAAAAABEBMRAhUf/aAAgBAQAGPwJuxcjFjnbGf//EABgQAQEBAQEAAAAAAAAAAAAAAAEAETEh/9oACAEBAAE/IQLEBvI4dR5jwGCV0ghM/9oADAMBAAIAAwAAABAv3//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABYRAQEBAAAAAAAAAAAAAAAAAAEQMf/aAAgBAgEBPxAHZ//EAB0QAQEAAgIDAQAAAAAAAAAAAAERACExQXGB4fD/2gAIAQEAAT8QUZgClD8YFaWLJdfcnQ14cBOcShSt595XtcvYiZvpB411n//Z&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/bfc42c584ce2a6accd3cce793f95bc1d/828fb/coding_in_bus_00.jpg&quot;
        srcset=&quot;/static/bfc42c584ce2a6accd3cce793f95bc1d/ff44c/coding_in_bus_00.jpg 158w,
/static/bfc42c584ce2a6accd3cce793f95bc1d/a6688/coding_in_bus_00.jpg 315w,
/static/bfc42c584ce2a6accd3cce793f95bc1d/828fb/coding_in_bus_00.jpg 630w,
/static/bfc42c584ce2a6accd3cce793f95bc1d/0ede0/coding_in_bus_00.jpg 945w,
/static/bfc42c584ce2a6accd3cce793f95bc1d/3ac88/coding_in_bus_00.jpg 1260w,
/static/bfc42c584ce2a6accd3cce793f95bc1d/d2602/coding_in_bus_00.jpg 4032w&quot;
        sizes=&quot;(max-width: 630px) 100vw, 630px&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;/a&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;버스에서 노트북을 하는게 익숙하다면 심야버스에서 창밖을 보며 개발하는거도 꽤나 재밌는 경험이다. 지스타 덕분에 부산행 버스에서 버스에서 노트북을 하는법을 체득해 버렸다.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;버스에서 노트북을 만지작 거리던 중, 복무중에 복무가 끝나고 나서 하려 했던일들이 떠올라 간단하게 정리해 놓으려고 한다.&lt;/p&gt;
&lt;h2&gt;Formicary의 개발과 Akka.NET로 개발된 &lt;code class=&quot;language-text&quot;&gt;Tower of Aden&lt;/code&gt; 서버의 퍼포먼스 비교&lt;/h2&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Tower of Aden&lt;/code&gt;의 서버는 한창 경량 DI Container를 만들겠다고 &lt;a href=&quot;https://github.com/goodgoodmangames/GGM.Context&quot;&gt;GGM.Context&lt;/a&gt;를 만들었을 때 같이 만들었던 TCP서비스인 &lt;a href=&quot;https://github.com/GoodGoodManGames/GGM.TCPService&quot;&gt;GGM.TCPService&lt;/a&gt;로 만들어져 있었다.&lt;/p&gt;
&lt;p&gt;이후 자신의 모자람을 깨닿고 &lt;a href=&quot;https://github.com/kerryjiang/SuperSocket&quot;&gt;SuperSocket&lt;/a&gt;을 사용하다가, Elixir 의 액터패턴에 빠져버러서 &lt;code class=&quot;language-text&quot;&gt;Akka.NET&lt;/code&gt;으로 수정하였다.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Akka.NET&lt;/code&gt;은 “당시의 내 생각”에는 대전 카드게임 서버를 만드는데 최적으로 보였다. 유저의 세션들과 게임 룸들을 각각 하나의 액터로 구성하여 개발하면 의존성을 최소화 시키고, 각 액터의 메세지 처리의 동기를 보장하며, 필요에 따라 Persistence 액터로서 복구하거나 하는 등의 개발이 가능할거라 생각했었다. 실제로 &lt;code class=&quot;language-text&quot;&gt;처음 비동기에 대한 거한 삽질&lt;/code&gt;을 제외하곤 개발이 매우 쉬웠다.&lt;/p&gt;
&lt;p&gt;하지만 &lt;code class=&quot;language-text&quot;&gt;Akka.NET&lt;/code&gt;을 사용하며 이해할수록 &lt;code class=&quot;language-text&quot;&gt;Akka&lt;/code&gt;가 바라보는 방향이 나와는 달랐고, (내 능력의 부족이겠지만) 강력하다 생각하는 기능들이 &lt;code class=&quot;language-text&quot;&gt;Tower of Aden&lt;/code&gt;에는 크게 사용되기 힘들다는 생각이 들게되었다. 또한, (아직 잘 모를때 해서 정확하진 않지만) 이전 서버보다 처리량이 줄은 것 같아 살짝 기분이 상했다.&lt;/p&gt;
&lt;p&gt;그러다보니 점점 더 욕심이 났다, &lt;code class=&quot;language-text&quot;&gt;Tower of Aden&lt;/code&gt;에 보다 맞는 TCG 혹은 SRPG 에 맞는 구조의 서버를 만들고 싶어지게 되어, 없는 시간을 짜내서 &lt;a href=&quot;https://github.com/GoodGoodJM/Formicary&quot;&gt;Formicary(개미집)&lt;/a&gt;을 만들게 되었다.&lt;/p&gt;
&lt;p&gt;(언제가 될지는 모르겠지만) &lt;code class=&quot;language-text&quot;&gt;Formicary&lt;/code&gt;가 어느정도 형태를 가지게 되면 &lt;code class=&quot;language-text&quot;&gt;Akka.NET&lt;/code&gt;로 만들어진 &lt;code class=&quot;language-text&quot;&gt;Tower of Aden&lt;/code&gt;서버의 퍼포먼스 비교를 해서 비교해볼 예정이다.&lt;/p&gt;
&lt;h2&gt;Tower of Aden의 매칭서버 개발&lt;/h2&gt;
&lt;p&gt;솔직하게 말하자면, 개발 초창기부터 너무 안일하게 생각해왔다.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;AWS GameLift&lt;/code&gt;에 올려서 매칭 날먹해야지, &lt;a href=&quot;https://cloud.google.com/blog/products/open-source/open-match-flexible-and-extensible-matchmaking-for-games&quot;&gt;OpenMatch&lt;/a&gt;같은 라이브러리가 나와서 날 행복하게 해주겠지 같은 생각으로 메칭을 요청한 순서대로 2명씩 게임을 잡아줘놓고 신경을 아예 꺼두고 살았다. 하지만 이번 BIC 지원 빌드 중 종종 게임이 안잡히는 현상을 확인했고, 이왕 고치는거 제대로 만들자 하면서 본격적으로 하려다가 생각보다 난이도가 있는 것을 알게되어 적잖이 당황했다.&lt;/p&gt;
&lt;p&gt;다음 로드맵에 추가해놓고 본격적으로 파볼려고 벼르고있다.&lt;/p&gt;
&lt;h2&gt;Tower of Aden의 AMQPS 지원과 GGM.Message 수정&lt;/h2&gt;
&lt;p&gt;내가 &lt;a href=&quot;https://github.com/goodgoodmangames/ggm.message&quot;&gt;GGM.Message&lt;/a&gt;를 너무 개떡같이 짜놔서 오히려 개발만 더 힘들어 지는거 같다. 특히 이번에 서버(프리티어) 성능의 한계때문에 &lt;code class=&quot;language-text&quot;&gt;RabbitMQ&lt;/code&gt;를 &lt;code class=&quot;language-text&quot;&gt;AmazonMQ&lt;/code&gt;로 이전하려 할때 &lt;code class=&quot;language-text&quot;&gt;AMQPS&lt;/code&gt;가 지원이 안돼서 적용을 못한게 너무 충격적이었다. 결국 자꾸 터지는걸 견디지 못해 월 40$라는 거금을 내고 개발서버를 돌리고있다.&lt;/p&gt;
&lt;p&gt;반드시 청산해야할 기술 부채이다. 사실 GGM.Message가 필요한거같지도 않다.. 제대로 수정해서 쓰기 좋게 만들거나 지우거나 해야겠다.&lt;/p&gt;
&lt;h2&gt;언어공부&lt;/h2&gt;
&lt;p&gt;이제 곧 학교로 돌아가게 되는데, 이중전공인 일본어가 매우 위험하다. 사실 일본에 와서 심각성을 더욱 느꼈다. 이대로 가면 학점을 전부 F로 도배할 것 같아 미리 공부하도록 해야겠다.&lt;/p&gt;
&lt;p&gt;이와 별개로 평생 공부할 생각 없었던 영어회화도 공부해야 한다는 생각이 들었다. 사실 별견없고 같이 여행온 진우형이 영어로 말하는 모습보니 멋있더라.&lt;/p&gt;
&lt;h2&gt;아니 왜이렇게 많어..&lt;/h2&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[Travis-CI로 Hexo블로그 Deploy 자동화 하기]]></title><description><![CDATA[Hexo와 NEXT 테마를 사용하는 블로그 시작. 포스트에 언급한대로, 나는 PC의 포맷이 잦고, 여러 기기에서 작업을 하는지라 (이곳 저곳 돌아다니면서 작업하는 것을 좋아하기 때문에)  프로젝트 자체를 깃헙 레포에 올려놓고 그때 그때 Clone…]]></description><link>https://goodgoodjm.github.io/hexo-deploy-travis-ci/</link><guid isPermaLink="false">https://goodgoodjm.github.io/hexo-deploy-travis-ci/</guid><pubDate>Sun, 12 May 2019 13:48:39 GMT</pubDate><content:encoded>&lt;p&gt;&lt;a href=&quot;/create-blog-by-hexo&quot;&gt;Hexo와 NEXT 테마를 사용하는 블로그 시작.&lt;/a&gt; 포스트에 언급한대로, 나는 PC의 포맷이 잦고, 여러 기기에서 작업을 하는지라 (이곳 저곳 돌아다니면서 작업하는 것을 좋아하기 때문에) &lt;code class=&quot;language-text&quot;&gt;Hexo&lt;/code&gt; 프로젝트 자체를 깃헙 레포에 올려놓고 그때 그때 Clone || Pull 받아 포스트를 작성한다.&lt;/p&gt;
&lt;p&gt;이렇게 작업하던 중 page의 레포지토리의 commit이 계속해서 증발하는 현상을 발견했고, 검색 후에 이러한 현상이 새 프로젝트로 clone받아 deploy할때 발생한다는 것을 알게되었다.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Hexo&lt;/code&gt;에서 고쳐줄 생각은 없어보이고, 나 또한 고쳐서 쓸 생각이 없었다. 그 중, CI/CD 로 &lt;code class=&quot;language-text&quot;&gt;Hexo&lt;/code&gt; 레포지토리에 푸시할때마다 자동으로 deploy 하게 하면 commit이 증발할 일이 없을거 같다는 생각이 들었다.&lt;/p&gt;
&lt;p&gt;사실 중간부턴 커밋 로그가 증발한다는 문제보다, 그냥 CI/CD 붙이면 편할거 같다는 생각때문에 작업했다.&lt;/p&gt;
&lt;h2&gt;CI/CD&lt;/h2&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Hexo&lt;/code&gt;레포지토리에는 Deploy를 위한 정보들이 들어갈 수 있으므로, private으로 하고싶었다. 때문에 &lt;code class=&quot;language-text&quot;&gt;UDG&lt;/code&gt;개발에 주로 사용하던 &lt;code class=&quot;language-text&quot;&gt;Gitlab&lt;/code&gt;에서 &lt;code class=&quot;language-text&quot;&gt;GitlabRunner&lt;/code&gt;로 CI/CD를 하려 했었다.&lt;/p&gt;
&lt;p&gt;하지만 문서 작성 중, 막상 설정을 뒤져보니 새 환경에서 &lt;code class=&quot;language-text&quot;&gt;git push&lt;/code&gt;시 &lt;code class=&quot;language-text&quot;&gt;Github&lt;/code&gt;에 로그인 해야하는 부분 말고는 그다지 private한 정보가 없었고 환경변수로 &lt;code class=&quot;language-text&quot;&gt;GithubToken&lt;/code&gt;따위를 넘겨서 인증을 하면 될거같다는 점에서 그냥 &lt;code class=&quot;language-text&quot;&gt;Travis-CI&lt;/code&gt;를 이용하면 될거 같다는 생각이 들어 &lt;code class=&quot;language-text&quot;&gt;Github + Travis-CI&lt;/code&gt;의 조합을 밀어 사용하기로 마음먹었다.&lt;/p&gt;
&lt;p&gt;때문에 &lt;code class=&quot;language-text&quot;&gt;Travis-CI&lt;/code&gt;를 사용하여 비슷한 처리를 하는것을 구글링하였고, 아니나 다를까 &lt;a href=&quot;https://e.printstacktrace.blog/hexo-git-deployer-removes-commits-history-lets-do-something-about-that/&quot;&gt;더이상 좋게 쓰지 못할정도로 잘 설명된 문서&lt;/a&gt;를 발견했다.&lt;/p&gt;
&lt;p&gt;위 문서때문에 더이상 문서를 쓸 필요는 없겠지만, 지워진 &lt;code class=&quot;language-text&quot;&gt;hexo-deploy-with-gitlab-ci&lt;/code&gt;문서를 기리기 위해서라도 문서를 마무리 지어야겠다.&lt;/p&gt;
&lt;h3&gt;Travis-CI&lt;/h3&gt;
&lt;p&gt;내가 &lt;code class=&quot;language-text&quot;&gt;Travis-CI&lt;/code&gt;에게 요구할 기능은 간단하다.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;edit&lt;/code&gt; branch에 푸시할 경우, 자동으로 스크립트에 따라 빌드하는것.&lt;/li&gt;
&lt;li&gt;빌드된 결과를 &lt;code class=&quot;language-text&quot;&gt;hexo deploy&lt;/code&gt;하여 &lt;code class=&quot;language-text&quot;&gt;master&lt;/code&gt; branch에 푸시하는 것.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;위 내용에 대한 아래의 build script와 &lt;code class=&quot;language-text&quot;&gt;.travis.yml&lt;/code&gt;를 추가한다음 커밋을 하면 끝이다.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;deploy.sh&lt;/code&gt;&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 shebang important&quot;&gt;#!/bin/bash&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;# Initialize target with currently deployed files&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;git&lt;/span&gt; clone --depth &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt; --branch&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;master https://github.com/GoodGoodJM/GoodGoodJM.github.io.git .deploy_git

&lt;span class=&quot;token builtin class-name&quot;&gt;cd&lt;/span&gt; .deploy_git

&lt;span class=&quot;token comment&quot;&gt;# Remove all files before they get copied from ../public/&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;# so git can track files that were removed in the last commit&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;find&lt;/span&gt; &lt;span class=&quot;token builtin class-name&quot;&gt;.&lt;/span&gt; -path ./.git -prune -o -exec &lt;span class=&quot;token function&quot;&gt;rm&lt;/span&gt; -rf &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 operator&quot;&gt;&lt;span class=&quot;token file-descriptor important&quot;&gt;2&lt;/span&gt;&gt;&lt;/span&gt; /dev/null

&lt;span class=&quot;token builtin class-name&quot;&gt;cd&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;..&lt;/span&gt;/

&lt;span class=&quot;token comment&quot;&gt;# Run deployment&lt;/span&gt;
hexo clean
hexo deploy&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;.travis.yml&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;language&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; node_js

&lt;span class=&quot;token key atrule&quot;&gt;node_js&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 string&quot;&gt;&quot;6&quot;&lt;/span&gt;

&lt;span class=&quot;token key atrule&quot;&gt;cache&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;directories&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; node_modules

&lt;span class=&quot;token key atrule&quot;&gt;branches&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;only&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; edit

&lt;span class=&quot;token key atrule&quot;&gt;before_install&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; npm install hexo&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;cli &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;g
  &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; npm install hexo &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;save
  &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; npm install

&lt;span class=&quot;token key atrule&quot;&gt;before_script&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; git config &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;global user.name &apos;Travis CI&apos;
  &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; git config &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;global user.email &apos;bot@travis&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;ci.org&apos;
  &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; sed &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;i&apos;&apos; &quot;s~https&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;//github.com/GoodGoodJM/GoodGoodJM.github.io.git~https&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;//$&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;GH_TOKEN&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;x&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;oauth&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;basic@github.com/goodgoodjm/GoodGoodJM.github.io.git~&quot; _config.yml &lt;span class=&quot;token comment&quot;&gt;# 주의!&lt;/span&gt;

&lt;span class=&quot;token key atrule&quot;&gt;script&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; hexo generate

&lt;span class=&quot;token key atrule&quot;&gt;deploy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;skip_cleanup&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean important&quot;&gt;true&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;provider&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; script
  &lt;span class=&quot;token key atrule&quot;&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; sh deploy.sh
  &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 key atrule&quot;&gt;branch&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; edit&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;npm install -g&lt;/code&gt;는 쓰지않는 성격이지만 어차피 나의 머신이 아니라 관심 없고, 원작자를 존중하기 위해 그냥 사용했다.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;before_script&lt;/code&gt;의 맨 아래 커맨드(&lt;code class=&quot;language-text&quot;&gt;# 주의!&lt;/code&gt; 주석이 달린 부분)은, &lt;code class=&quot;language-text&quot;&gt;sed&lt;/code&gt;라는 명령어를 이용하여 문자열을 치환해주는 명령이다. 본인의 &lt;code class=&quot;language-text&quot;&gt;_config.yml&lt;/code&gt;의 &lt;code class=&quot;language-text&quot;&gt;deploy.repo&lt;/code&gt; 값이 &lt;code class=&quot;language-text&quot;&gt;https://github.com/GoodGoodJM/GoodGoodJM.github.io.git&lt;/code&gt;으로 되어있기 때문에 위 같이 작성하였는데, &lt;code class=&quot;language-text&quot;&gt;~{origin_url}~{changed_url}~&lt;/code&gt;의 &lt;code class=&quot;language-text&quot;&gt;origin_url&lt;/code&gt; 부분에 자신의 &lt;code class=&quot;language-text&quot;&gt;deploy.repo&lt;/code&gt;에 지정된 url을 추가해주면 된다. &lt;code class=&quot;language-text&quot;&gt;changed_url&lt;/code&gt;의 &lt;code class=&quot;language-text&quot;&gt;${GH_TOKEN}&lt;/code&gt;은 &lt;code class=&quot;language-text&quot;&gt;Travis-CI&lt;/code&gt;의 환경변수에 &lt;code class=&quot;language-text&quot;&gt;GH_TOKEN&lt;/code&gt;을 추가해 주어야 한다.&lt;/p&gt;
&lt;p&gt;환경변수 설정은 &lt;code class=&quot;language-text&quot;&gt;Travis-CI&lt;/code&gt;에서 레포지토리를 지정한 다음, setting에서 변경할 수 있으며, Token은 &lt;a href=&quot;https://github.com/settings/tokens&quot;&gt;해당 페이지&lt;/a&gt;에서 발급 받을 수 있다.&lt;/p&gt;
&lt;p&gt;이후 &lt;code class=&quot;language-text&quot;&gt;Travis-CI&lt;/code&gt;를 레포지토리에 붙인 뒤, 이후 edit 브랜치에 푸시를 할 때 마다 제대로 갱신되는지 확인해 주면 된다.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://i.imgur.com/C6Icwvv.png&quot; alt=&quot;success&quot;&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;h2&gt;참고문서&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://e.printstacktrace.blog/hexo-git-deployer-removes-commits-history-lets-do-something-about-that/&quot;&gt;Hexo git deployer removes commits history? Let’s do something about that!&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://withcoding.com/97&quot;&gt;리눅스 find 명령어 사용법 정리 (파일, 디렉토리 검색, 찾기)&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</content:encoded></item><item><title><![CDATA[Hexo NEXT 템플릿 블로그에 Disqus 댓글 기능 추가하기]]></title><description><![CDATA[Hexo와 NEXT 테마를 사용하는 블로그 시작. 포스트에서 블로그를 생성하였지만, 댓글 기능이 있으면 좋을 것 같아서 추가하려고 한다. NEXT테마는 gitment와 disqus…]]></description><link>https://goodgoodjm.github.io/disqus-with-hexo-next/</link><guid isPermaLink="false">https://goodgoodjm.github.io/disqus-with-hexo-next/</guid><pubDate>Sun, 14 Apr 2019 15:35:58 GMT</pubDate><content:encoded>&lt;p&gt;&lt;a href=&quot;/create-blog-by-hexo&quot;&gt;Hexo와 NEXT 테마를 사용하는 블로그 시작.&lt;/a&gt; 포스트에서 블로그를 생성하였지만, 댓글 기능이 있으면 좋을 것 같아서 추가하려고 한다.&lt;/p&gt;
&lt;p&gt;NEXT테마는 gitment와 disqus같은 댓글 추가 기능들을 설정만으로 추가, 제거할 수 있게 할수 있도록 기능을 미리 제공한다. 때문에 별다른 추가작업(템플릿을 고친다거나) 이 없이 붙일 수 있다는 점에서 다시한번 놀랐다.&lt;/p&gt;
&lt;p&gt;원래는 &lt;a href=&quot;https://github.com/imsun/gitment&quot;&gt;gitment&lt;/a&gt;가 좀 더 Gick 해보여서 사용하려 했었지만, AutoBuild때문에 추후 Gitlab으로 넘어갈 생각이라 플랫폼을 덜타는 Disqus를 사용하기로 했다.&lt;/p&gt;
&lt;h2&gt;Disqus 가입&lt;/h2&gt;
&lt;p&gt;Disqus를 가입, 로그인 한 뒤 우 상단의 메뉴들 중 &lt;code class=&quot;language-text&quot;&gt;Add Disqus To Site&lt;/code&gt;를 눌러 설정 페이지로 들어간다.&lt;/p&gt;
&lt;p&gt;19/04/14 현재는 중간에 간단한 설명 페이지가 나타나며, 맨 아래의 &lt;code class=&quot;language-text&quot;&gt;GET STARTED&lt;/code&gt;를 눌러 다음 페이지로 이동한 다음 &lt;code class=&quot;language-text&quot;&gt;I want to install Disqus on my site&lt;/code&gt;를 눌러 설정을 해야한다.&lt;/p&gt;
&lt;p&gt;설정을 어떻게 해야할 지 잘 모르겠다면 &lt;a href=&quot;https://devmjun.github.io/archive/addComments&quot;&gt;Github Blog에 댓글(disqus) 기능 추가하기&lt;/a&gt;문서에 잘 나와 있어 참고하면 좋을 듯 하다.&lt;/p&gt;
&lt;h2&gt;NEXT의 &lt;code class=&quot;language-text&quot;&gt;_config.yml&lt;/code&gt;에 Disqus설정 추가&lt;/h2&gt;
&lt;p&gt;자신 페이지의 &lt;code class=&quot;language-text&quot;&gt;shortname&lt;/code&gt;이 뭔지 확인되었으면, NEXT 테마의 &lt;code class=&quot;language-text&quot;&gt;_config.yml&lt;/code&gt;의 &lt;code class=&quot;language-text&quot;&gt;disqus.enable&lt;/code&gt;. &lt;code class=&quot;language-text&quot;&gt;disqus.shortname&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 comment&quot;&gt;# _config.yml&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;...&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;# Disqus&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;disqus&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;enable&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean important&quot;&gt;true&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;shortname&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &amp;lt;short_name&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2&gt;확인&lt;/h2&gt;
&lt;p&gt;위 설정을 마친 다음 다시 페이지를 확인하면 하단에 disqus댓글 기능이 추가되어 있는 걸 확인할 수 있다.&lt;/p&gt;
&lt;h2&gt;참고문서&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://equalsequals.io/2017/12/13/how-to-add-disqus-comments-to-hexo-blog/&quot;&gt;Add Disqus Comments to Your Hexo Site&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://devmjun.github.io/archive/addComments&quot;&gt;Github Blog에 댓글(disqus) 기능 추가하기&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://www.cylong.com/blog/2017/03/26/hexo-next-disqus/&quot;&gt;Hexo 集成 Disqus 评论&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</content:encoded></item><item><title><![CDATA[Hexo와 NEXT 테마를 사용하는 블로그 시작]]></title><description><![CDATA[회사를 6월에 퇴사하기로 하고, 공부하면서 Notion에 끄적여 놨던 내용들을 한번 되새김질 하는 시간을 가져보려고 한다. 포트폴리오도 다시 정리할 겸, 이왕 정리하는 거 블로그로 정리해보면 재밌겠다는 생각이 들어 Hexo…]]></description><link>https://goodgoodjm.github.io/create-blog-by-hexo/</link><guid isPermaLink="false">https://goodgoodjm.github.io/create-blog-by-hexo/</guid><pubDate>Wed, 10 Apr 2019 12:22:54 GMT</pubDate><content:encoded>&lt;p&gt;회사를 6월에 퇴사하기로 하고, 공부하면서 Notion에 끄적여 놨던 내용들을 한번 되새김질 하는 시간을 가져보려고 한다.&lt;/p&gt;
&lt;p&gt;포트폴리오도 다시 정리할 겸, 이왕 정리하는 거 블로그로 정리해보면 재밌겠다는 생각이 들어 &lt;a href=&quot;https://hexo.io/&quot;&gt;Hexo&lt;/a&gt;로 블로그를 만드려고 한다.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Hexo&lt;/code&gt;를 선택한 이유는 단 하나 “JS로 만들어져서” 이다.&lt;/p&gt;
&lt;p&gt;최근 다시 웹을 공부하면서 JS가 익숙하기도 하고, 직접 코드를 만지거나 테마를 만들면서 프로그램을 파악할 수 있다는게 큰 장점으로 다가왔다, 만일 &lt;code class=&quot;language-text&quot;&gt;Jekyll&lt;/code&gt;가 Ruby가 아니라 JS였다면 Jekyll를 사용했을 것이다.&lt;/p&gt;
&lt;p&gt;블로그의 생성은 &lt;a href=&quot;https://enesto.github.io/2018/11/18/181118_hexo%20%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/&quot;&gt;hexo 블로그 시작하기&lt;/a&gt;를 참고하였다. 당장 마음에 드는 테마가 없어 해당 포스트의 테마를 썼다.&lt;/p&gt;
&lt;h2&gt;기본 설정&lt;/h2&gt;
&lt;p&gt;나는 될 수 있으면 &lt;code class=&quot;language-text&quot;&gt;npm install {name} -g&lt;/code&gt;를 하지않고 &lt;code class=&quot;language-text&quot;&gt;npx&lt;/code&gt;를 쓰려고 한다. 전역으로 모듈을 설치해두고, 잊어버린다음 build script를 짯다가 나중에 원인을 찾는게 한참을 걸리는 바보같은 실수를 범한 적이 있어 될수있으면 전역 모듈은 설치하지 않으려 노력한다. (사실 익숙해지면 느린거 빼곤 편하다)&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;$ npx hexo init blog
$ &lt;span class=&quot;token builtin class-name&quot;&gt;cd&lt;/span&gt; blog
$ &lt;span class=&quot;token function&quot;&gt;npm&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;install&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;이후 원한다면 &lt;code class=&quot;language-text&quot;&gt;_config.yml&lt;/code&gt;의 내용을 수정해 주면된다 나같은 경우는 &lt;code class=&quot;language-text&quot;&gt;title&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;author&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;language&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;timezone&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;url&lt;/code&gt; 정도만 수정했다. 자세한 내용은 &lt;a href=&quot;https://hexo.io/docs/configuration&quot;&gt;공식 문서&lt;/a&gt;를 참고하면 된다.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;_config.yml&lt;/code&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;$ npx hexo server&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2&gt;NEXT 테마 설치&lt;/h2&gt;
&lt;p&gt;생각보다 &lt;code class=&quot;language-text&quot;&gt;Hexo&lt;/code&gt;의 기본 테마가 훌륭해서 그냥 쓸까 고민했지만, 살짝 허전해서 마저 테마를 설치했다.&lt;/p&gt;
&lt;p&gt;해당 내용은 위에 적은 &lt;a href=&quot;https://enesto.github.io/2018/11/18/181118_hexo%20%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/&quot;&gt;hexo 블로그 시작하기&lt;/a&gt;에 너무 잘 나와있어서 별달리 쓸 내용이 없다.&lt;/p&gt;
&lt;p&gt;그냥 거슬려서 기본 테마인 landscape 테마 폴더를 지우는 것 정도만 하였다.&lt;/p&gt;
&lt;h2&gt;배포&lt;/h2&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Hexo&lt;/code&gt;는 몇가지 추가적인 설정으로 쉽게 github page에 build된 블로그를 배포할 수 있다.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;_config.yml&lt;/code&gt;의 Depoly를 설정하고, git인 경우엔 &lt;code class=&quot;language-text&quot;&gt;$ npm install --save hexo-depolyer-git&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 comment&quot;&gt;# _config.yml&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;...&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;depoly&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; git
  &lt;span class=&quot;token key atrule&quot;&gt;repo&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; https&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;/github.com/&amp;lt;UserName&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;/&amp;lt;UserName&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;.github.io
  &lt;span class=&quot;token key atrule&quot;&gt;branch&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; master&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;이후 depoly 명령어 &lt;code class=&quot;language-text&quot;&gt;$ npx hexo deploy -g&lt;/code&gt;를 호출하면 &lt;code class=&quot;language-text&quot;&gt;deploy.repo&lt;/code&gt;에 해당하는 레포지토리에 depoly 된다.&lt;/p&gt;
&lt;h2&gt;Categories, About 같은 추가 페이지 생성&lt;/h2&gt;
&lt;p&gt;Theme의 &lt;code class=&quot;language-text&quot;&gt;_config.yml&lt;/code&gt;를 살펴보다보면, Categories나 About기능을 지원해준다. 해당 설정의 주석을 해제해 줌으로서 기능을 활성화 할 수 있다.&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;menu&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;# 활성화 할 기능들의 주석을 해제&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;about&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; /about/ &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt; user
  &lt;span class=&quot;token key atrule&quot;&gt;categories&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 punctuation&quot;&gt;|&lt;/span&gt; th
  &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;주석을 해제하면 블로그에 Catrgories와 About 메뉴가 나타난다. 하지만 해당하는 페이지가 존재하지 않아 다음과 같은 명령어로 페이지를 추가해주어야 한다.&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;$ npx hexo new page categories &lt;span class=&quot;token comment&quot;&gt;# {root}/source/categories/index.md 생성&lt;/span&gt;
$ npx hexo new page about &lt;span class=&quot;token comment&quot;&gt;# {root}/source/about/index.md 생성&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;이후 다시 서버를 실행해 확인해 보면 페이지가 정상적으로 표시된다.&lt;/p&gt;
&lt;p&gt;하지만 카테고리의 경우 그냥 빈 페이지만 나타나는데, categories/index.md의 메타정보(헤더)를 아래와 같이 수정해 주면 된다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;md&quot;&gt;&lt;pre class=&quot;language-md&quot;&gt;&lt;code class=&quot;language-md&quot;&gt;&lt;span class=&quot;token hr punctuation&quot;&gt;---&lt;/span&gt;
&lt;span class=&quot;token title important&quot;&gt;type: categories
&lt;span class=&quot;token punctuation&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;type&lt;/code&gt;을 &lt;code class=&quot;language-text&quot;&gt;categories&lt;/code&gt;로 변경해 주면 원하는 대로 카테고리 페이지가 나타난다.&lt;/p&gt;
&lt;h2&gt;기타&lt;/h2&gt;
&lt;p&gt;본인은 여러 포맷을 자주하고, 여러 기기에서 작업을 하는 경우가 많아, Project페이지를 깃으로 올려놓고 작업을 한다.&lt;/p&gt;
&lt;p&gt;여기서, 그냥 git으로 github같은 레포지토리에 올리다보면, &lt;code class=&quot;language-text&quot;&gt;themes/&lt;/code&gt;디렉토리 아래의 테마가 다른 git레포지토리의 프로젝트이기 때문에 submodule로 취급된다.&lt;/p&gt;
&lt;p&gt;그냥 테마의 &lt;code class=&quot;language-text&quot;&gt;.git&lt;/code&gt;폴더를 지우고 째로 관리해 버리는 방법도 있지만, 굳이 그러기보단 submodule을 사용하여 관리하면, 주기적으로 원본 레포지토리에서 pull 받아 테마를 최신화 시키기 편하다.&lt;/p&gt;
&lt;p&gt;submodule로 선언하고 레포지토리에 푸시를 한다음, 새로 clone 받을때는 submodule디렉토리가 비어있다. 때문에 &lt;code class=&quot;language-text&quot;&gt;git submodule init &amp;amp;&amp;amp; git submodule update&lt;/code&gt; 같은 명령어를 사용하여 submodule을 받아와 줘야한다.&lt;/p&gt;
&lt;p&gt;submodule의 파일에 수정을 가할경우(&lt;code class=&quot;language-text&quot;&gt;_config.yml&lt;/code&gt;) submodule에서 먼저 commit 하고 바깥 레포지토리에서 다시 commit해주어야 한다. submodule기능은 git의 기능이므로 해당 레포지토리에서 다루지 않는다.&lt;/p&gt;
&lt;h2&gt;참고문서&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://hexo.io/docs/configuration&quot;&gt;공식 문서&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://enesto.github.io/2018/11/18/181118_hexo%20%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/&quot;&gt;hexo 블로그 시작하기&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</content:encoded></item></channel></rss>