From 0848fa94dbcae099a8d80866500dd4ccaa0f14f4 Mon Sep 17 00:00:00 2001
From: Choi-JJunho <junho5336@gmail.com>
Date: Thu, 10 Aug 2023 14:31:57 +0000
Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20pium-off?=
 =?UTF-8?q?icial/pium-official.github.io@3a98641fc11d720e1cb808dc458d04d9b?=
 =?UTF-8?q?e40c4e1=20=F0=9F=9A=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apply-https/index.html                        |   2 +-
 blog-starter/index.html                       |   2 +-
 bundle-analyze/index.html                     |   2 +-
 db-drop-stop/index.html                       |   2 +-
 index.html                                    |   2 +-
 jenkins-hook-by-label/index.html              |   2 +-
 jenkins-setting/index.html                    |   2 +-
 jpa-notnull-nullable/index.html               |   2 +-
 page-data/OAuth2.0/page-data.json             |   2 +-
 .../acceptance-test-resolve/page-data.json    |   2 +-
 page-data/apply-https/page-data.json          |   2 +-
 page-data/blog-starter/page-data.json         |   2 +-
 page-data/bundle-analyze/page-data.json       |   2 +-
 page-data/ci-cd-setting/page-data.json        |   2 +-
 page-data/db-drop-stop/page-data.json         |   2 +-
 page-data/fe-tanstack-query/page-data.json    |   2 +-
 page-data/index/page-data.json                |   2 +-
 .../jenkins-hook-by-label/page-data.json      |   2 +-
 page-data/jenkins-setting/page-data.json      |   2 +-
 page-data/jpa-notnull-nullable/page-data.json |   2 +-
 page-data/pium-deploy-step/page-data.json     |   2 +-
 .../react-setting-without-cra/page-data.json  |   2 +-
 page-data/restdocs-start/page-data.json       |   2 +-
 page-data/search/page-data.json               |   2 +-
 page-data/series/page-data.json               |   2 +-
 page-data/sprint-idea/page-data.json          |   2 +-
 page-data/stylelint-and-husky/page-data.json  |   2 +-
 page-data/tags/page-data.json                 |   2 +-
 .../page-data.json                            |   2 +-
 pium-deploy-step/index.html                   |   2 +-
 restdocs-start/index.html                     |   6 +-
 rss.xml                                       | 396 +++++++++---------
 search/index.html                             |   4 +-
 sitemap-0.xml                                 |   2 +-
 34 files changed, 232 insertions(+), 236 deletions(-)

diff --git a/apply-https/index.html b/apply-https/index.html
index 9950d92e..f73a7827 100644
--- a/apply-https/index.html
+++ b/apply-https/index.html
@@ -312,7 +312,7 @@ <h2>NGINX 설정 확인</h2>
   </a>
     </span></p>
 <h2>Reference</h2>
-<p><a href="https://certbot.eff.org/instructions">https://certbot.eff.org/instructions</a></p></div></div><div class="Footer__ArticleButtonContainer-sc-zqxmks-0 becwQW"><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 OEEnV"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Previous Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">PR 라벨로 젠킨스 빌드유발을 구분하기</div></div></div></div><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 cCfvHe"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Next Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">bundle-analyze를 통한 bundle 크기 분석</div></div></div></div></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><div class="Footer__CommentWrapper-sc-zqxmks-7 cRSPGb"><hr class="Divider-sc-1jz0jl-0 dsTUYW"/><div class="Footer__SpinnerWrapper-sc-zqxmks-8 XZnrl"><span style="display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;font-size:0;animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite;-webkit-animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite"><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span></span></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div></div></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 ivqWaF"><div></div></div></div></div></article></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/apply-https/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
+<p><a href="https://certbot.eff.org/instructions">https://certbot.eff.org/instructions</a></p></div></div><div class="Footer__ArticleButtonContainer-sc-zqxmks-0 becwQW"><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 OEEnV"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Previous Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">bundle-analyze를 통한 bundle 크기 분석</div></div></div></div><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 cCfvHe"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Next Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">Table Drop 못하게 막아버리기</div></div></div></div></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><div class="Footer__CommentWrapper-sc-zqxmks-7 cRSPGb"><hr class="Divider-sc-1jz0jl-0 dsTUYW"/><div class="Footer__SpinnerWrapper-sc-zqxmks-8 XZnrl"><span style="display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;font-size:0;animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite;-webkit-animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite"><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span></span></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div></div></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 ivqWaF"><div></div></div></div></div></article></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/apply-https/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
           <script
             id="gatsby-chunk-mapping"
           >
diff --git a/blog-starter/index.html b/blog-starter/index.html
index 87d9fb79..8e7fd9c9 100644
--- a/blog-starter/index.html
+++ b/blog-starter/index.html
@@ -540,7 +540,7 @@ <h2>결론</h2>
 <h2>Reference</h2>
 <p><a href="https://hoodie.gatsbyjs.io/">https://hoodie.gatsbyjs.io/</a>
 <a href="https://docs.github.com/ko/actions/using-workflows/workflow-syntax-for-github-actions">https://docs.github.com/ko/actions/using-workflows/workflow-syntax-for-github-actions</a>
-<a href="https://studium-anywhere.tistory.com/21">https://studium-anywhere.tistory.com/21</a></p></div></div><div class="Footer__ArticleButtonContainer-sc-zqxmks-0 becwQW"><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 OEEnV"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Previous Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">구글 스프린트 기반 아이디어 도출</div></div></div></div><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 cCfvHe"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Next Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">젠킨스 설치하기</div></div></div></div></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><div class="Footer__CommentWrapper-sc-zqxmks-7 cRSPGb"><hr class="Divider-sc-1jz0jl-0 dsTUYW"/><div class="Footer__SpinnerWrapper-sc-zqxmks-8 XZnrl"><span style="display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;font-size:0;animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite;-webkit-animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite"><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span></span></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div></div></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 ivqWaF"><div></div></div></div></div></article></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/blog-starter/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
+<a href="https://studium-anywhere.tistory.com/21">https://studium-anywhere.tistory.com/21</a></p></div></div><div class="Footer__ArticleButtonContainer-sc-zqxmks-0 becwQW"><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 OEEnV"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Previous Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">구글 스프린트 기반 아이디어 도출</div></div></div></div><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 cCfvHe"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Next Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">@NotNull과 nullable = false는 어떤 차이가 있을까?</div></div></div></div></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><div class="Footer__CommentWrapper-sc-zqxmks-7 cRSPGb"><hr class="Divider-sc-1jz0jl-0 dsTUYW"/><div class="Footer__SpinnerWrapper-sc-zqxmks-8 XZnrl"><span style="display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;font-size:0;animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite;-webkit-animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite"><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span></span></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div></div></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 ivqWaF"><div></div></div></div></div></article></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/blog-starter/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
           <script
             id="gatsby-chunk-mapping"
           >
diff --git a/bundle-analyze/index.html b/bundle-analyze/index.html
index 894aa5db..f23f6543 100644
--- a/bundle-analyze/index.html
+++ b/bundle-analyze/index.html
@@ -256,7 +256,7 @@ <h2>Webpack Bundle Analyzer</h2>
 <p><img src="https://github.com/pium-official/pium-official.github.io/assets/50974359/6bc524c4-4866-4ebe-9daa-95035e0c0dd5" alt="image"></p>
 <p>실행한 뒤에 bundle을 분석해 봤더니 react-icons에서 15.3m나 차지하고 있었습니다. 드디어 문제의 원흉을 찾아냈습니다. 그렇다면 react-icons를 대체할 수 있는 방법이 있을까요?</p>
 <h3>Icons</h3>
-<p><a href="https://icones.js.org/collection/all?s=material-symbols:cancel">여기</a>에 가시면 다양한 아이콘들을 찾아볼 수 있습니다. 원하는 아이콘을 선택한 다음에 SVG, Component 등으로 코드를 반환해 줍니다. 이를 통해서 react-icons를 제거하고 icons를 사용해서 아이콘을 대체할 수 있었습니다.</p></div></div><div class="Footer__ArticleButtonContainer-sc-zqxmks-0 becwQW"><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 OEEnV"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Previous Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">내 서버에 HTTPS 설정하기</div></div></div></div><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 cCfvHe"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Next Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">Table Drop 못하게 막아버리기</div></div></div></div></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><div class="Footer__CommentWrapper-sc-zqxmks-7 cRSPGb"><hr class="Divider-sc-1jz0jl-0 dsTUYW"/><div class="Footer__SpinnerWrapper-sc-zqxmks-8 XZnrl"><span style="display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;font-size:0;animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite;-webkit-animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite"><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span></span></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div></div></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 ivqWaF"><div></div></div></div></div></article></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/bundle-analyze/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
+<p><a href="https://icones.js.org/collection/all?s=material-symbols:cancel">여기</a>에 가시면 다양한 아이콘들을 찾아볼 수 있습니다. 원하는 아이콘을 선택한 다음에 SVG, Component 등으로 코드를 반환해 줍니다. 이를 통해서 react-icons를 제거하고 icons를 사용해서 아이콘을 대체할 수 있었습니다.</p></div></div><div class="Footer__ArticleButtonContainer-sc-zqxmks-0 becwQW"><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 OEEnV"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Previous Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">PR 라벨로 젠킨스 빌드유발을 구분하기</div></div></div></div><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 cCfvHe"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Next Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">내 서버에 HTTPS 설정하기</div></div></div></div></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><div class="Footer__CommentWrapper-sc-zqxmks-7 cRSPGb"><hr class="Divider-sc-1jz0jl-0 dsTUYW"/><div class="Footer__SpinnerWrapper-sc-zqxmks-8 XZnrl"><span style="display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;font-size:0;animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite;-webkit-animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite"><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span></span></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div></div></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 ivqWaF"><div></div></div></div></div></article></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/bundle-analyze/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
           <script
             id="gatsby-chunk-mapping"
           >
diff --git a/db-drop-stop/index.html b/db-drop-stop/index.html
index f9fab900..fbb20f27 100644
--- a/db-drop-stop/index.html
+++ b/db-drop-stop/index.html
@@ -338,7 +338,7 @@ <h2>Reference</h2>
 <ul>
 <li>Chat GTP 4</li>
 <li>피움 백엔드 팀의 집단지성</li>
-</ul></div></div><div class="Footer__ArticleButtonContainer-sc-zqxmks-0 becwQW"><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 OEEnV"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Previous Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">bundle-analyze를 통한 bundle 크기 분석</div></div></div></div><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 cCfvHe"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Next Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)</div></div></div></div></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><div class="Footer__CommentWrapper-sc-zqxmks-7 cRSPGb"><hr class="Divider-sc-1jz0jl-0 dsTUYW"/><div class="Footer__SpinnerWrapper-sc-zqxmks-8 XZnrl"><span style="display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;font-size:0;animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite;-webkit-animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite"><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span></span></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div></div></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 ivqWaF"><div></div></div></div></div></article></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/db-drop-stop/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
+</ul></div></div><div class="Footer__ArticleButtonContainer-sc-zqxmks-0 becwQW"><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 OEEnV"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Previous Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">내 서버에 HTTPS 설정하기</div></div></div></div><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 cCfvHe"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Next Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)</div></div></div></div></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><div class="Footer__CommentWrapper-sc-zqxmks-7 cRSPGb"><hr class="Divider-sc-1jz0jl-0 dsTUYW"/><div class="Footer__SpinnerWrapper-sc-zqxmks-8 XZnrl"><span style="display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;font-size:0;animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite;-webkit-animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite"><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span></span></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div></div></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 ivqWaF"><div></div></div></div></div></article></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/db-drop-stop/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
           <script
             id="gatsby-chunk-mapping"
           >
diff --git a/index.html b/index.html
index d0218def..1a460dd3 100644
--- a/index.html
+++ b/index.html
@@ -82,7 +82,7 @@
 .eplOOa:hover{color:#191919;}/*!sc*/
 .eplOOa > a{color:inherit;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/
 data-styled.g68[id="SideTagList__Tag-sc-11pn9fc-3"]{content:"eplOOa,"}/*!sc*/
-</style><title data-react-helmet="true">pium.log</title><link rel="icon" href="/favicon-32x32.png?v=5f58a3c3ae96bf65023757c195615b2f" type="image/png"/><link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="sitemap" type="application/xml" href="/sitemap-index.xml"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><header class="Header__HeaderWrapper-sc-12xtq5x-0 eJajUG"><div class="Header__Inner-sc-12xtq5x-1 kPhrIW"><span class="Header__BlogTitle-sc-12xtq5x-2 ylZeC"><a aria-current="page" class="" href="/">pium.log</a></span><div class="Header__Menu-sc-12xtq5x-3 gpugdO"><div class="Header__ToggleWrapper-sc-12xtq5x-4 kbdpAg"><div class="Header__IconRail-sc-12xtq5x-5 bbKKxv"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg></div></div><a href="/tags/"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"></path></svg></a><a href="/series/"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"></path></svg></a><a href="/rss.xml"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M128.081 415.959c0 35.369-28.672 64.041-64.041 64.041S0 451.328 0 415.959s28.672-64.041 64.041-64.041 64.04 28.673 64.04 64.041zm175.66 47.25c-8.354-154.6-132.185-278.587-286.95-286.95C7.656 175.765 0 183.105 0 192.253v48.069c0 8.415 6.49 15.472 14.887 16.018 111.832 7.284 201.473 96.702 208.772 208.772.547 8.397 7.604 14.887 16.018 14.887h48.069c9.149.001 16.489-7.655 15.995-16.79zm144.249.288C439.596 229.677 251.465 40.445 16.503 32.01 7.473 31.686 0 38.981 0 48.016v48.068c0 8.625 6.835 15.645 15.453 15.999 191.179 7.839 344.627 161.316 352.465 352.465.353 8.618 7.373 15.453 15.999 15.453h48.068c9.034-.001 16.329-7.474 16.005-16.504z"></path></svg></a><a href="/search/"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" style="margin-right:0" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></a></div></div></header><div class="Body__BodyWrapper-sc-v34kqr-0 oVFRU"><div size="48" class="VerticalSpace-sc-fbwjqc-0 cUedeU"></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><hr class="Divider-sc-1jz0jl-0 dUqLxz"/><div class="SideTagList__RelativeWrapper-sc-11pn9fc-0 jCYmBW"><aside class="SideTagList__Wrapper-sc-11pn9fc-1 fhiNKx"><div class="SideTagList__Title-sc-11pn9fc-2 hJSGhN">TAG LIST</div><ul><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/">all (<!-- -->17<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=젠킨스">젠킨스<!-- --> (<!-- -->3<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=테스트">테스트<!-- --> (<!-- -->2<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=설정">설정<!-- --> (<!-- -->2<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=RestDocs">RestDocs<!-- --> (<!-- -->2<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=CI/CD">CI/CD<!-- --> (<!-- -->2<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=컨벤션">컨벤션<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=최적화">최적화<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=인프라">인프라<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=인수테스트">인수테스트<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=아이디어">아이디어<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=세팅">세팅<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=블로그">블로그<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=배포">배포<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=문서화">문서화<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=리액트 쿼리">리액트 쿼리<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=기획">기획<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=stylelint">stylelint<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=nullable">nullable<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=husky">husky<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=bundle">bundle<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=Webpack">Webpack<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=Webhook">Webhook<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=Validation">Validation<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=Transaction">Transaction<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=Tanstack Query">Tanstack Query<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=SpringbootTest">SpringbootTest<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=React Query">React Query<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=React">React<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=OAuth2.0">OAuth2.0<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=MySQL">MySQL<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=JPA">JPA<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=HTTPS">HTTPS<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=DB">DB<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=CI">CI<!-- --> (<!-- -->1<!-- -->)</a></li></ul></aside></div><div class="PostList__PostListWrapper-sc-1oqnm6-0 euTAqz"><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/restdocs-start/">RestDocs로 API 문서화하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">August 11, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">RestDocs를 시작해봅시다.</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=문서화"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">문서화</div></a><a href="/tags/?q=RestDocs"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">RestDocs</div></a><a href="/tags/?q=테스트"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">테스트</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/OAuth2.0/">내가 이해한 OAuth2.0</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">August 10, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">OAuth2.0의 개념과 동작 원리에 대해 알아보자</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=OAuth2.0"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">OAuth2.0</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/stylelint-and-husky/">stylelint와 husky를 통해 컨벤션 통일하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">August 07, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">stylelint를 통해 css 컨벤션을 통일하고, husky를 통해 git 컨벤션을 통일할 수 있습니다.</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=stylelint"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">stylelint</div></a><a href="/tags/?q=husky"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">husky</div></a><a href="/tags/?q=컨벤션"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">컨벤션</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/react-setting-without-cra/">webpack으로만 React 설정하기 (without CRA)</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">August 06, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">피움 팀의 프론트엔드 초기 세팅 과정입니다.</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=React"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">React</div></a><a href="/tags/?q=Webpack"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">Webpack</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/acceptance-test-resolve/">인수테스트 데이터 초기화하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">August 03, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">인수테트스에서 DB 데이터를 깔끔하게 초기화해봅시다.</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=인수테스트"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">인수테스트</div></a><a href="/tags/?q=RestDocs"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">RestDocs</div></a><a href="/tags/?q=테스트"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">테스트</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/transactional-not-in-restassured/">[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 31, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">@SpringbootTest의 RANDOM_PORT 환경에서 @Transactional을 사용할 때의 주의점과 트랜잭션의 격리를 이해합시다</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=Transaction"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">Transaction</div></a><a href="/tags/?q=SpringbootTest"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">SpringbootTest</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/apply-https/">내 서버에 HTTPS 설정하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 28, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">HTTP로 연결하던 서버를 HTTPS로 변환해봅시다.</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=HTTPS"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">HTTPS</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/bundle-analyze/">bundle-analyze를 통한 bundle 크기 분석</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 28, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">bundle-anaalyze를 라이브러리를 통해 번들 크기 분석하기</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=bundle"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">bundle</div></a><a href="/tags/?q=최적화"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">최적화</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/db-drop-stop/">Table Drop 못하게 막아버리기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 28, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">유저를 생성하여 Table Drop 권한을 없애봅니다.</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=DB"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">DB</div></a><a href="/tags/?q=MySQL"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">MySQL</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/jenkins-hook-by-label/">PR 라벨로 젠킨스 빌드유발을 구분하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 25, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">PR의 라벨로 젠킨스의 빌드 유발을 구분해봅니다.</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=젠킨스"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">젠킨스</div></a><a href="/tags/?q=CI"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">CI</div></a></div></div></div></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
+</style><title data-react-helmet="true">pium.log</title><link rel="icon" href="/favicon-32x32.png?v=5f58a3c3ae96bf65023757c195615b2f" type="image/png"/><link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="sitemap" type="application/xml" href="/sitemap-index.xml"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><header class="Header__HeaderWrapper-sc-12xtq5x-0 eJajUG"><div class="Header__Inner-sc-12xtq5x-1 kPhrIW"><span class="Header__BlogTitle-sc-12xtq5x-2 ylZeC"><a aria-current="page" class="" href="/">pium.log</a></span><div class="Header__Menu-sc-12xtq5x-3 gpugdO"><div class="Header__ToggleWrapper-sc-12xtq5x-4 kbdpAg"><div class="Header__IconRail-sc-12xtq5x-5 bbKKxv"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg></div></div><a href="/tags/"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"></path></svg></a><a href="/series/"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"></path></svg></a><a href="/rss.xml"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M128.081 415.959c0 35.369-28.672 64.041-64.041 64.041S0 451.328 0 415.959s28.672-64.041 64.041-64.041 64.04 28.673 64.04 64.041zm175.66 47.25c-8.354-154.6-132.185-278.587-286.95-286.95C7.656 175.765 0 183.105 0 192.253v48.069c0 8.415 6.49 15.472 14.887 16.018 111.832 7.284 201.473 96.702 208.772 208.772.547 8.397 7.604 14.887 16.018 14.887h48.069c9.149.001 16.489-7.655 15.995-16.79zm144.249.288C439.596 229.677 251.465 40.445 16.503 32.01 7.473 31.686 0 38.981 0 48.016v48.068c0 8.625 6.835 15.645 15.453 15.999 191.179 7.839 344.627 161.316 352.465 352.465.353 8.618 7.373 15.453 15.999 15.453h48.068c9.034-.001 16.329-7.474 16.005-16.504z"></path></svg></a><a href="/search/"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" style="margin-right:0" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></a></div></div></header><div class="Body__BodyWrapper-sc-v34kqr-0 oVFRU"><div size="48" class="VerticalSpace-sc-fbwjqc-0 cUedeU"></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><hr class="Divider-sc-1jz0jl-0 dUqLxz"/><div class="SideTagList__RelativeWrapper-sc-11pn9fc-0 jCYmBW"><aside class="SideTagList__Wrapper-sc-11pn9fc-1 fhiNKx"><div class="SideTagList__Title-sc-11pn9fc-2 hJSGhN">TAG LIST</div><ul><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/">all (<!-- -->17<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=젠킨스">젠킨스<!-- --> (<!-- -->3<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=테스트">테스트<!-- --> (<!-- -->2<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=설정">설정<!-- --> (<!-- -->2<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=RestDocs">RestDocs<!-- --> (<!-- -->2<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=CI/CD">CI/CD<!-- --> (<!-- -->2<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=컨벤션">컨벤션<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=최적화">최적화<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=인프라">인프라<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=인수테스트">인수테스트<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=아이디어">아이디어<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=세팅">세팅<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=블로그">블로그<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=배포">배포<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=문서화">문서화<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=리액트 쿼리">리액트 쿼리<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=기획">기획<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=stylelint">stylelint<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=nullable">nullable<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=husky">husky<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=bundle">bundle<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=Webpack">Webpack<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=Webhook">Webhook<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=Validation">Validation<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=Transaction">Transaction<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=Tanstack Query">Tanstack Query<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=SpringbootTest">SpringbootTest<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=React Query">React Query<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=React">React<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=OAuth2.0">OAuth2.0<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=MySQL">MySQL<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=JPA">JPA<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=HTTPS">HTTPS<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=DB">DB<!-- --> (<!-- -->1<!-- -->)</a></li><li class="SideTagList__Tag-sc-11pn9fc-3 eplOOa"><a href="/tags/?q=CI">CI<!-- --> (<!-- -->1<!-- -->)</a></li></ul></aside></div><div class="PostList__PostListWrapper-sc-1oqnm6-0 euTAqz"><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/restdocs-start/">RestDocs로 API 문서화하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">August 11, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">RestDocs를 시작해봅시다.</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=문서화"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">문서화</div></a><a href="/tags/?q=RestDocs"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">RestDocs</div></a><a href="/tags/?q=테스트"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">테스트</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/OAuth2.0/">내가 이해한 OAuth2.0</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">August 10, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">OAuth2.0의 개념과 동작 원리에 대해 알아보자</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=OAuth2.0"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">OAuth2.0</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/stylelint-and-husky/">stylelint와 husky를 통해 컨벤션 통일하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">August 07, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">stylelint를 통해 css 컨벤션을 통일하고, husky를 통해 git 컨벤션을 통일할 수 있습니다.</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=stylelint"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">stylelint</div></a><a href="/tags/?q=husky"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">husky</div></a><a href="/tags/?q=컨벤션"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">컨벤션</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/react-setting-without-cra/">webpack으로만 React 설정하기 (without CRA)</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">August 06, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">피움 팀의 프론트엔드 초기 세팅 과정입니다.</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=React"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">React</div></a><a href="/tags/?q=Webpack"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">Webpack</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/acceptance-test-resolve/">인수테스트 데이터 초기화하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">August 03, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">인수테트스에서 DB 데이터를 깔끔하게 초기화해봅시다.</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=인수테스트"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">인수테스트</div></a><a href="/tags/?q=RestDocs"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">RestDocs</div></a><a href="/tags/?q=테스트"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">테스트</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/transactional-not-in-restassured/">[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 31, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">@SpringbootTest의 RANDOM_PORT 환경에서 @Transactional을 사용할 때의 주의점과 트랜잭션의 격리를 이해합시다</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=Transaction"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">Transaction</div></a><a href="/tags/?q=SpringbootTest"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">SpringbootTest</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/bundle-analyze/">bundle-analyze를 통한 bundle 크기 분석</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 28, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">bundle-anaalyze를 라이브러리를 통해 번들 크기 분석하기</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=bundle"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">bundle</div></a><a href="/tags/?q=최적화"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">최적화</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/apply-https/">내 서버에 HTTPS 설정하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 28, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">HTTP로 연결하던 서버를 HTTPS로 변환해봅시다.</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=HTTPS"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">HTTPS</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/db-drop-stop/">Table Drop 못하게 막아버리기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 28, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">유저를 생성하여 Table Drop 권한을 없애봅니다.</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=DB"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">DB</div></a><a href="/tags/?q=MySQL"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">MySQL</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/jenkins-hook-by-label/">PR 라벨로 젠킨스 빌드유발을 구분하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 25, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">PR의 라벨로 젠킨스의 빌드 유발을 구분해봅니다.</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=젠킨스"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">젠킨스</div></a><a href="/tags/?q=CI"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">CI</div></a></div></div></div></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
           <script
             id="gatsby-chunk-mapping"
           >
diff --git a/jenkins-hook-by-label/index.html b/jenkins-hook-by-label/index.html
index 6f5f1814..4e45e8dc 100644
--- a/jenkins-hook-by-label/index.html
+++ b/jenkins-hook-by-label/index.html
@@ -565,7 +565,7 @@ <h3>설정 과정에서 참고한 글</h3>
 <p><a href="https://velog.io/@zayson/Jenkins-CICD-4.-WebHook%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC">https://velog.io/@zayson/Jenkins-CICD-4.-WebHook%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC</a></p>
 <h3>트러블 슈팅 과정에서 참고한 글</h3>
 <p><a href="https://georgik.rocks/jenkins-generic-webhook-plugin-failed-with-did-not-find-any-jobs-with-generictrigger-configured/">https://georgik.rocks/jenkins-generic-webhook-plugin-failed-with-did-not-find-any-jobs-with-generictrigger-configured/</a></p>
-<p><a href="https://pikachu987.tistory.com/61">https://pikachu987.tistory.com/61</a></p></div></div><div class="Footer__ArticleButtonContainer-sc-zqxmks-0 becwQW"><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 OEEnV"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Previous Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">Jenkins와 Github Webhook을 이용해 CI/CD 구축하기</div></div></div></div><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 cCfvHe"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Next Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">내 서버에 HTTPS 설정하기</div></div></div></div></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><div class="Footer__CommentWrapper-sc-zqxmks-7 cRSPGb"><hr class="Divider-sc-1jz0jl-0 dsTUYW"/><div class="Footer__SpinnerWrapper-sc-zqxmks-8 XZnrl"><span style="display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;font-size:0;animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite;-webkit-animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite"><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span></span></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div></div></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 ivqWaF"><div></div></div></div></div></article></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/jenkins-hook-by-label/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
+<p><a href="https://pikachu987.tistory.com/61">https://pikachu987.tistory.com/61</a></p></div></div><div class="Footer__ArticleButtonContainer-sc-zqxmks-0 becwQW"><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 OEEnV"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Previous Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">Jenkins와 Github Webhook을 이용해 CI/CD 구축하기</div></div></div></div><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 cCfvHe"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Next Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">bundle-analyze를 통한 bundle 크기 분석</div></div></div></div></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><div class="Footer__CommentWrapper-sc-zqxmks-7 cRSPGb"><hr class="Divider-sc-1jz0jl-0 dsTUYW"/><div class="Footer__SpinnerWrapper-sc-zqxmks-8 XZnrl"><span style="display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;font-size:0;animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite;-webkit-animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite"><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span></span></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div></div></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 ivqWaF"><div></div></div></div></div></article></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/jenkins-hook-by-label/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
           <script
             id="gatsby-chunk-mapping"
           >
diff --git a/jenkins-setting/index.html b/jenkins-setting/index.html
index 18838c67..02e598b2 100644
--- a/jenkins-setting/index.html
+++ b/jenkins-setting/index.html
@@ -383,7 +383,7 @@ <h2>jenkins 접속하기 &#x26; 초기설정</h2>
     </span></p>
 <p>이렇게 Jenkins를 설치할 수 있다.</p>
 <h2>Reference</h2>
-<p><a href="https://www.jenkins.io/doc/book/installing/linux/">https://www.jenkins.io/doc/book/installing/linux/</a></p></div></div><div class="Footer__ArticleButtonContainer-sc-zqxmks-0 becwQW"><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 OEEnV"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Previous Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">피움 블로그 생성과정</div></div></div></div><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 cCfvHe"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Next Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">@NotNull과 nullable = false는 어떤 차이가 있을까?</div></div></div></div></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><div class="Footer__CommentWrapper-sc-zqxmks-7 cRSPGb"><hr class="Divider-sc-1jz0jl-0 dsTUYW"/><div class="Footer__SpinnerWrapper-sc-zqxmks-8 XZnrl"><span style="display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;font-size:0;animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite;-webkit-animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite"><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span></span></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div></div></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 ivqWaF"><div></div></div></div></div></article></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/jenkins-setting/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
+<p><a href="https://www.jenkins.io/doc/book/installing/linux/">https://www.jenkins.io/doc/book/installing/linux/</a></p></div></div><div class="Footer__ArticleButtonContainer-sc-zqxmks-0 becwQW"><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 OEEnV"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Previous Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">@NotNull과 nullable = false는 어떤 차이가 있을까?</div></div></div></div><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 cCfvHe"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Next Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">피움의 배포과정</div></div></div></div></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><div class="Footer__CommentWrapper-sc-zqxmks-7 cRSPGb"><hr class="Divider-sc-1jz0jl-0 dsTUYW"/><div class="Footer__SpinnerWrapper-sc-zqxmks-8 XZnrl"><span style="display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;font-size:0;animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite;-webkit-animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite"><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span></span></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div></div></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 ivqWaF"><div></div></div></div></div></article></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/jenkins-setting/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
           <script
             id="gatsby-chunk-mapping"
           >
diff --git a/jpa-notnull-nullable/index.html b/jpa-notnull-nullable/index.html
index 9284bd1a..59816599 100644
--- a/jpa-notnull-nullable/index.html
+++ b/jpa-notnull-nullable/index.html
@@ -426,7 +426,7 @@ <h2>정리</h2>
 <p>하이버네이트에서는 nullable=false보다 @NotNull 사용을 조금 더 권장하고 있다.</p>
 <h2>레퍼런스</h2>
 <p><a href="https://www.baeldung.com/hibernate-notnull-vs-nullable">https://www.baeldung.com/hibernate-notnull-vs-nullable</a></p>
-<p><a href="https://kafcamus.tistory.com/15">https://kafcamus.tistory.com/15</a></p></div></div><div class="Footer__ArticleButtonContainer-sc-zqxmks-0 becwQW"><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 OEEnV"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Previous Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">젠킨스 설치하기</div></div></div></div><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 cCfvHe"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Next Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">피움의 배포과정</div></div></div></div></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><div class="Footer__CommentWrapper-sc-zqxmks-7 cRSPGb"><hr class="Divider-sc-1jz0jl-0 dsTUYW"/><div class="Footer__SpinnerWrapper-sc-zqxmks-8 XZnrl"><span style="display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;font-size:0;animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite;-webkit-animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite"><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span></span></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div></div></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 ivqWaF"><div></div></div></div></div></article></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/jpa-notnull-nullable/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
+<p><a href="https://kafcamus.tistory.com/15">https://kafcamus.tistory.com/15</a></p></div></div><div class="Footer__ArticleButtonContainer-sc-zqxmks-0 becwQW"><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 OEEnV"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Previous Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">피움 블로그 생성과정</div></div></div></div><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 cCfvHe"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Next Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">젠킨스 설치하기</div></div></div></div></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><div class="Footer__CommentWrapper-sc-zqxmks-7 cRSPGb"><hr class="Divider-sc-1jz0jl-0 dsTUYW"/><div class="Footer__SpinnerWrapper-sc-zqxmks-8 XZnrl"><span style="display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;font-size:0;animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite;-webkit-animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite"><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span></span></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div></div></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 ivqWaF"><div></div></div></div></div></article></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/jpa-notnull-nullable/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
           <script
             id="gatsby-chunk-mapping"
           >
diff --git a/page-data/OAuth2.0/page-data.json b/page-data/OAuth2.0/page-data.json
index d58aac33..cef26ebc 100644
--- a/page-data/OAuth2.0/page-data.json
+++ b/page-data/OAuth2.0/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/OAuth2.0/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. OAuth란? 현재 개발하고 있는 서비스에서 구글 캘린더에 접근을 한다고 가정을 해봅시다. 현재 접근하는 사용자의 구글 캘린더 정보를 얻고자 한다면 구글 계정으로 로그인을 해야합니다. 진짜 간단한 방법이 있습니다. 사용자로부터 구글 id와 password를 받고 저희가 대신 로그인 해서 해당 사용자의 …","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/hozzijeong\">클린</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>OAuth란?</h2>\n<p>현재 개발하고 있는 서비스에서 구글 캘린더에 접근을 한다고 가정을 해봅시다. 현재 접근하는 사용자의 구글 캘린더 정보를 얻고자 한다면 구글 계정으로 로그인을 해야합니다. 진짜 간단한 방법이 있습니다. 사용자로부터 구글 id와 password를 받고 저희가 대신 로그인 해서 해당 사용자의 계정 정보를 받아오는 것입니다.</p>\n<p>하지만 이 방법은 매우 위험합니다. 계정 정보가 탈취당할 수도 있고, 애초에 <strong>대리 로그인</strong>이라니 신개념 보이스피싱으로 오해받을 수도 있습니다.</p>\n<p>제일 괜찮은 방법은 구글 자체에서 로그인 서비스를 대체할 수 있는 방식을 만들어서 제공을 하는 것입니다. 실제로  과거에 AuthSub라는 자체 개발한 방법을 통해 구현을 했지만 이 정형화 되지 않은 방법은 다양한 문제를 야기할 수 있었습니다. 흔히 카카오 로그인, 구글 로그인, 깃헙 로그인 등등 여러가지의 방식이 존재하는데 형식이 통일되어 있지 않다면 이 모든 것들을 각각 구현해서 사용을 해야하는 문제점이 있습니다. </p>\n<p>이러한 문제점을 해결하기 위해 나타난 개념이 OAuth입니다. 초기 버전인 1.0은 범위문제, 불확실한 역할, 보안 문제등으로 인해서 많이 사용 되지 않고 OAuth 2.0이 통상적으로 많이 사용 되고 있습니다. </p>\n<blockquote>\n<p>💡 <strong>인증과 인가</strong>: 인증은 요청자의 신원을 확인하는 것이고, 인가는 신원이 확인된 어느 사람이 권한이 있는지를 확인하는 것입니다. 개인적으로 생각했을때 인증은 사람의 직업 검증하는 것이고 인가는 그 사람의 직책을 통해 권한을 접근한다고 생각합니다. (직책에 따른 정보 접근 권한이 다르기 때문)</p>\n</blockquote>\n<h2>OAuth 2.0</h2>\n<p>OAuth2.0을 이해하기 위해서는 크게 4가지 용어를 알고 있으면 됩니다. 바로 Resource Owner, Client, Resource Server, Authorization Server입니다. 각각의 역할과 설명은 다음과 같습니다.</p>\n<p><img src=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/c65c8e80-b04a-4b51-b66a-dbdd6d43b543\" alt=\"image\"></p>\n<ul>\n<li><code class=\"language-text\">Resource Owner</code><strong>:</strong> 리소스(정보)의 주인. 즉,서비스를 이용하고자 하는 사용자를 의미합니다.</li>\n<li><code class=\"language-text\">Client</code>: 리소스(정보)를 가공 혹은 Resource Owner에게 제공하는 주체. OAuth 2.0을 개발하는 어플리케이션(서비스)을 의미한다.</li>\n<li><code class=\"language-text\">Resource Server</code>: 리소스(정보)를 갖고 있는 주체. 흔히 카카오, 구글, Github등 사용자 정보를 제공하는 주체를 의미한다.</li>\n<li><code class=\"language-text\">Authorization Server</code>: Resource Owner를 인증하고, Client에 인가를 할당하는 역할이다.</li>\n</ul>\n<p>OAuth를 가장 많이 도입한 기능 중 하나는 소셜 로그인입니다. 하나의 예시를 들어보겠습니다. 사용자가 Todo앱에 접근하려고 합니다. 사용자의 Todo인지를 확인하기 위해서는 로그인 기능이 필요합니다. 그런데 사용자는 회원가입을 하기 귀찮습니다. 이 과정에서 사용자의 기본 정보 (이메일, 닉네임, 프로필 사진 등)를 갖고 있는 소셜 네트워크가 있다고 생각해 봅시다. Client는 이 소셜 네트워크를 통해서 사용자에게 간단한 회원가입/로그인 기능을 제공할 수 있습니다. 이제 본인이 Todo앱에 회원가입을 하고, 나의 Todo를 카카오 스토리에 공유한다고 상상하고 OAuth의 동작과정에 대해 한번 알아보겠습니다.</p>\n<blockquote>\n<p>💡 OAuth에는 크게 4가지 grant(승인 방식)가 있는데, 이번에 다루는 승인 방식은 기본적으로 사용되고 있는 <strong>Authorization Code Grant(권한 부여 승인 코드 방식)</strong> 을 통해 기준으로 설명하겠습니다.</p>\n</blockquote>\n<p><img src=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/e4f90a4b-6783-4d32-974a-2fdc2c5d3ae3\" alt=\"image\"></p>\n<ul>\n<li>\n<p>첫 번째는 로그인 요청입니다. 흔히 우리가 알고있는 “카카오로 로그인하기”를 클릭 했을 때 나오는 설정되는 방식입니다. 이때 Authorization Server에 4가지 파라미터를 동봉해서 보냅니다.</p>\n<ul>\n<li>client_id(required): Server에서 발급받은 인증 id입니다.</li>\n<li>redirect<em>uri(optional): Server에 등록할 때 함께 입력한 redirect</em>uri입니다.</li>\n<li>response_type(required): 반드시<code class=\"language-text\">code</code>로 설정해야 합니다.</li>\n<li>scope(optional): 제공하는 정보 범위를 설정합니다.</li>\n</ul>\n</li>\n<li>Authorization Server에서 Resource Owner에게 아이디와 비밀번호를 요구합니다. 사용자 인증이 된다면, 미리 입력받은 redierct_uri로 이동합니다.</li>\n<li>해당 uri로 리다이렉트 되면서 함께 동봉되어 온 Authorization Code를 받고 이 코드를 Access Token으로 교환합니다.</li>\n<li>교환한 Access Token을 통해서 Resource Server에서 원하는 데이터를 얻을 수 있습니다. (Todo일정을 카카오 스토리에 공유할 수 있습니다!!)</li>\n</ul>\n<p>위와 같은 과정을 통해서 OAuth를 통해서 제 3의 서비스에서 사용자의 정보에 인가를 받아서 가공하거나 직접적으로 제공할 수 있습니다.</p>\n<p>사용자로부터 로그인 정보를 받아서 로그인을 하고 사용자의 권한을 부여받은 Access Token을 통해서 Reource Server로부터 데이터를 얻는 것입니다.</p>\n<hr>\n<h3>OAuth공부를 하면서 들었던 의문점</h3>\n<p>Access Token을 통해서 Resource에 있는 데이터를 얻는 것은 알겠는데, 그래서 이게 로그인이랑 어떤 관련이 있는가? 그리고, Client DB에 있는 데이터나 API랑도 관련이 있나?</p>\n<p>Authorization Server를 통해서 넘겨받은 Access Token을 활용하면 소셜 로그인을 구현할 수 있었고, 해당 토큰을 통해서 모든 정보에 접근이 가능하겠구나 생각을 했었습니다. 하지만, 이 Access Token은 Resource Server에 있는 데이터를 얻는데 필요한 Access Token이고 <strong>Client 내부에서 접근하는 DB와 API랑은 관련이 없다는 것입니다.</strong></p>\n<p>Client에서는 넘겨받은 Access Token을 통해서 개별적으로 구축한 member DB에서 해당 유저를 식별하고, 그에 맞는 로그인 기능을 구현해야 합니다.</p>\n<p><img src=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/e6c1a44b-6e6e-4034-bca6-cfe9e2c5d8c0\" alt=\"image\"></p>\n<p>로그인 기능을 개별적으로 구현해야 한다는 얘기를 듣고, Client의 역할을 어떻게 분리가 되는지에 대해 의문이 들었습니다. 여기서 Client는 사용자가 이용하는 앱 서비스인데, 사용자와 직접적인 인터렉션을 하는 Client(FE)와 데이터를 제공하는 Sever(BE)로 분리가 됩니다. </p>\n<p>그렇다면 OAuth를 이용한 서비스를 구현할 때 Client안에서는 어떤 일이 일어날까요?</p>\n<ol>\n<li>사용자 로그인 페이지 제공 (FE)</li>\n<li>redirect_uri로 이동시키고, 넘겨받은 Autorization Code를 BE로 넘겨줌 (FE)</li>\n<li>FE로부터 넘겨받은 Autorization Code를 Authorization Server에 전달하고, Access Token과 Refresh Token을 받음(BE)</li>\n<li>넘겨 받은 Access Token을 통해 Resource Owner 정보 조회(BE)</li>\n<li>DB Table에 해당 유저 확인 후 Client Session이나 Client Token 전달(BE)</li>\n<li>전달 받은 Session이나 Token을 통해서 유저 로그인 유지 (FE)</li>\n<li>사용자가 Client의 서비스를 이용하고자 할 때 Client Session을 통해 인증을 함 (FE)</li>\n<li>Client에서 제공하고자 하는 데이터가 Resource Server에서 얻어야 하는 데이터라면, 저장해 놓았던 Access Token을 통해 Resource Server로 부터 데이터를 받아옴. 그리고 Client에서 제공하는 API와 잘 조합해서 데이터 제공(BE)</li>\n<li>사용자가 확인 가능하게 UI제공 (FE)</li>\n</ol>\n<p><img src=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/a668a660-8b62-4fbd-8caf-e3998c570a1c\" alt=\"image\"></p>\n<p>Client에서의 역할을 나눠보면 다음과 같습니다.</p>\n<h3>FE</h3>\n<ul>\n<li>로그인 페이지 제공</li>\n<li>redirect_uri를 통해 Authorization Code 전달</li>\n<li>Resource Server에 맞는 UI 제공</li>\n</ul>\n<h3>BE</h3>\n<ul>\n<li>전달받은 Authorization Code를 통해 Access Token 교환</li>\n<li>Access Token을 통해 Resource Server에 있는 데이터 요청 및 가공</li>\n<li>Access Token만료 시 Refresh Token으로 Access Token 갱신</li>\n</ul>\n<hr>\n<h3>참조</h3>\n<p><a href=\"https://blog.naver.com/mds_datasecurity/222182943542\">OAuth의 인증 종류</a></p>\n<p><a href=\"https://hudi.blog/oauth-2.0/\">OAuth의 개념과 동작 원리</a></p>","frontmatter":{"title":"내가 이해한 OAuth2.0","date":"August 10, 2023","update":"August 10, 2023","tags":["OAuth2.0"],"series":null},"fields":{"slug":"/OAuth2.0/","readingTime":{"minutes":10.725}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}},"next":{"fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}},"pageContext":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","series":null,"previousPostId":"66383c86-e2c8-533a-90e0-2effae572742","nextPostId":"45eeb9a3-557d-5704-8fd9-925283e1e27b"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/OAuth2.0/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. OAuth란? 현재 개발하고 있는 서비스에서 구글 캘린더에 접근을 한다고 가정을 해봅시다. 현재 접근하는 사용자의 구글 캘린더 정보를 얻고자 한다면 구글 계정으로 로그인을 해야합니다. 진짜 간단한 방법이 있습니다. 사용자로부터 구글 id와 password를 받고 저희가 대신 로그인 해서 해당 사용자의 …","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/hozzijeong\">클린</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>OAuth란?</h2>\n<p>현재 개발하고 있는 서비스에서 구글 캘린더에 접근을 한다고 가정을 해봅시다. 현재 접근하는 사용자의 구글 캘린더 정보를 얻고자 한다면 구글 계정으로 로그인을 해야합니다. 진짜 간단한 방법이 있습니다. 사용자로부터 구글 id와 password를 받고 저희가 대신 로그인 해서 해당 사용자의 계정 정보를 받아오는 것입니다.</p>\n<p>하지만 이 방법은 매우 위험합니다. 계정 정보가 탈취당할 수도 있고, 애초에 <strong>대리 로그인</strong>이라니 신개념 보이스피싱으로 오해받을 수도 있습니다.</p>\n<p>제일 괜찮은 방법은 구글 자체에서 로그인 서비스를 대체할 수 있는 방식을 만들어서 제공을 하는 것입니다. 실제로  과거에 AuthSub라는 자체 개발한 방법을 통해 구현을 했지만 이 정형화 되지 않은 방법은 다양한 문제를 야기할 수 있었습니다. 흔히 카카오 로그인, 구글 로그인, 깃헙 로그인 등등 여러가지의 방식이 존재하는데 형식이 통일되어 있지 않다면 이 모든 것들을 각각 구현해서 사용을 해야하는 문제점이 있습니다. </p>\n<p>이러한 문제점을 해결하기 위해 나타난 개념이 OAuth입니다. 초기 버전인 1.0은 범위문제, 불확실한 역할, 보안 문제등으로 인해서 많이 사용 되지 않고 OAuth 2.0이 통상적으로 많이 사용 되고 있습니다. </p>\n<blockquote>\n<p>💡 <strong>인증과 인가</strong>: 인증은 요청자의 신원을 확인하는 것이고, 인가는 신원이 확인된 어느 사람이 권한이 있는지를 확인하는 것입니다. 개인적으로 생각했을때 인증은 사람의 직업 검증하는 것이고 인가는 그 사람의 직책을 통해 권한을 접근한다고 생각합니다. (직책에 따른 정보 접근 권한이 다르기 때문)</p>\n</blockquote>\n<h2>OAuth 2.0</h2>\n<p>OAuth2.0을 이해하기 위해서는 크게 4가지 용어를 알고 있으면 됩니다. 바로 Resource Owner, Client, Resource Server, Authorization Server입니다. 각각의 역할과 설명은 다음과 같습니다.</p>\n<p><img src=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/c65c8e80-b04a-4b51-b66a-dbdd6d43b543\" alt=\"image\"></p>\n<ul>\n<li><code class=\"language-text\">Resource Owner</code><strong>:</strong> 리소스(정보)의 주인. 즉,서비스를 이용하고자 하는 사용자를 의미합니다.</li>\n<li><code class=\"language-text\">Client</code>: 리소스(정보)를 가공 혹은 Resource Owner에게 제공하는 주체. OAuth 2.0을 개발하는 어플리케이션(서비스)을 의미한다.</li>\n<li><code class=\"language-text\">Resource Server</code>: 리소스(정보)를 갖고 있는 주체. 흔히 카카오, 구글, Github등 사용자 정보를 제공하는 주체를 의미한다.</li>\n<li><code class=\"language-text\">Authorization Server</code>: Resource Owner를 인증하고, Client에 인가를 할당하는 역할이다.</li>\n</ul>\n<p>OAuth를 가장 많이 도입한 기능 중 하나는 소셜 로그인입니다. 하나의 예시를 들어보겠습니다. 사용자가 Todo앱에 접근하려고 합니다. 사용자의 Todo인지를 확인하기 위해서는 로그인 기능이 필요합니다. 그런데 사용자는 회원가입을 하기 귀찮습니다. 이 과정에서 사용자의 기본 정보 (이메일, 닉네임, 프로필 사진 등)를 갖고 있는 소셜 네트워크가 있다고 생각해 봅시다. Client는 이 소셜 네트워크를 통해서 사용자에게 간단한 회원가입/로그인 기능을 제공할 수 있습니다. 이제 본인이 Todo앱에 회원가입을 하고, 나의 Todo를 카카오 스토리에 공유한다고 상상하고 OAuth의 동작과정에 대해 한번 알아보겠습니다.</p>\n<blockquote>\n<p>💡 OAuth에는 크게 4가지 grant(승인 방식)가 있는데, 이번에 다루는 승인 방식은 기본적으로 사용되고 있는 <strong>Authorization Code Grant(권한 부여 승인 코드 방식)</strong> 을 통해 기준으로 설명하겠습니다.</p>\n</blockquote>\n<p><img src=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/e4f90a4b-6783-4d32-974a-2fdc2c5d3ae3\" alt=\"image\"></p>\n<ul>\n<li>\n<p>첫 번째는 로그인 요청입니다. 흔히 우리가 알고있는 “카카오로 로그인하기”를 클릭 했을 때 나오는 설정되는 방식입니다. 이때 Authorization Server에 4가지 파라미터를 동봉해서 보냅니다.</p>\n<ul>\n<li>client_id(required): Server에서 발급받은 인증 id입니다.</li>\n<li>redirect<em>uri(optional): Server에 등록할 때 함께 입력한 redirect</em>uri입니다.</li>\n<li>response_type(required): 반드시<code class=\"language-text\">code</code>로 설정해야 합니다.</li>\n<li>scope(optional): 제공하는 정보 범위를 설정합니다.</li>\n</ul>\n</li>\n<li>Authorization Server에서 Resource Owner에게 아이디와 비밀번호를 요구합니다. 사용자 인증이 된다면, 미리 입력받은 redierct_uri로 이동합니다.</li>\n<li>해당 uri로 리다이렉트 되면서 함께 동봉되어 온 Authorization Code를 받고 이 코드를 Access Token으로 교환합니다.</li>\n<li>교환한 Access Token을 통해서 Resource Server에서 원하는 데이터를 얻을 수 있습니다. (Todo일정을 카카오 스토리에 공유할 수 있습니다!!)</li>\n</ul>\n<p>위와 같은 과정을 통해서 OAuth를 통해서 제 3의 서비스에서 사용자의 정보에 인가를 받아서 가공하거나 직접적으로 제공할 수 있습니다.</p>\n<p>사용자로부터 로그인 정보를 받아서 로그인을 하고 사용자의 권한을 부여받은 Access Token을 통해서 Reource Server로부터 데이터를 얻는 것입니다.</p>\n<hr>\n<h3>OAuth공부를 하면서 들었던 의문점</h3>\n<p>Access Token을 통해서 Resource에 있는 데이터를 얻는 것은 알겠는데, 그래서 이게 로그인이랑 어떤 관련이 있는가? 그리고, Client DB에 있는 데이터나 API랑도 관련이 있나?</p>\n<p>Authorization Server를 통해서 넘겨받은 Access Token을 활용하면 소셜 로그인을 구현할 수 있었고, 해당 토큰을 통해서 모든 정보에 접근이 가능하겠구나 생각을 했었습니다. 하지만, 이 Access Token은 Resource Server에 있는 데이터를 얻는데 필요한 Access Token이고 <strong>Client 내부에서 접근하는 DB와 API랑은 관련이 없다는 것입니다.</strong></p>\n<p>Client에서는 넘겨받은 Access Token을 통해서 개별적으로 구축한 member DB에서 해당 유저를 식별하고, 그에 맞는 로그인 기능을 구현해야 합니다.</p>\n<p><img src=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/e6c1a44b-6e6e-4034-bca6-cfe9e2c5d8c0\" alt=\"image\"></p>\n<p>로그인 기능을 개별적으로 구현해야 한다는 얘기를 듣고, Client의 역할을 어떻게 분리가 되는지에 대해 의문이 들었습니다. 여기서 Client는 사용자가 이용하는 앱 서비스인데, 사용자와 직접적인 인터렉션을 하는 Client(FE)와 데이터를 제공하는 Sever(BE)로 분리가 됩니다. </p>\n<p>그렇다면 OAuth를 이용한 서비스를 구현할 때 Client안에서는 어떤 일이 일어날까요?</p>\n<ol>\n<li>사용자 로그인 페이지 제공 (FE)</li>\n<li>redirect_uri로 이동시키고, 넘겨받은 Autorization Code를 BE로 넘겨줌 (FE)</li>\n<li>FE로부터 넘겨받은 Autorization Code를 Authorization Server에 전달하고, Access Token과 Refresh Token을 받음(BE)</li>\n<li>넘겨 받은 Access Token을 통해 Resource Owner 정보 조회(BE)</li>\n<li>DB Table에 해당 유저 확인 후 Client Session이나 Client Token 전달(BE)</li>\n<li>전달 받은 Session이나 Token을 통해서 유저 로그인 유지 (FE)</li>\n<li>사용자가 Client의 서비스를 이용하고자 할 때 Client Session을 통해 인증을 함 (FE)</li>\n<li>Client에서 제공하고자 하는 데이터가 Resource Server에서 얻어야 하는 데이터라면, 저장해 놓았던 Access Token을 통해 Resource Server로 부터 데이터를 받아옴. 그리고 Client에서 제공하는 API와 잘 조합해서 데이터 제공(BE)</li>\n<li>사용자가 확인 가능하게 UI제공 (FE)</li>\n</ol>\n<p><img src=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/a668a660-8b62-4fbd-8caf-e3998c570a1c\" alt=\"image\"></p>\n<p>Client에서의 역할을 나눠보면 다음과 같습니다.</p>\n<h3>FE</h3>\n<ul>\n<li>로그인 페이지 제공</li>\n<li>redirect_uri를 통해 Authorization Code 전달</li>\n<li>Resource Server에 맞는 UI 제공</li>\n</ul>\n<h3>BE</h3>\n<ul>\n<li>전달받은 Authorization Code를 통해 Access Token 교환</li>\n<li>Access Token을 통해 Resource Server에 있는 데이터 요청 및 가공</li>\n<li>Access Token만료 시 Refresh Token으로 Access Token 갱신</li>\n</ul>\n<hr>\n<h3>참조</h3>\n<p><a href=\"https://blog.naver.com/mds_datasecurity/222182943542\">OAuth의 인증 종류</a></p>\n<p><a href=\"https://hudi.blog/oauth-2.0/\">OAuth의 개념과 동작 원리</a></p>","frontmatter":{"title":"내가 이해한 OAuth2.0","date":"August 10, 2023","update":"August 10, 2023","tags":["OAuth2.0"],"series":null},"fields":{"slug":"/OAuth2.0/","readingTime":{"minutes":10.725}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}},"next":{"fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}},"pageContext":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","series":null,"previousPostId":"66383c86-e2c8-533a-90e0-2effae572742","nextPostId":"45eeb9a3-557d-5704-8fd9-925283e1e27b"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/acceptance-test-resolve/page-data.json b/page-data/acceptance-test-resolve/page-data.json
index e931a68e..984b8908 100644
--- a/page-data/acceptance-test-resolve/page-data.json
+++ b/page-data/acceptance-test-resolve/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/acceptance-test-resolve/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 인수테스트를 작성하면서 다음과 같은 문제가 발생했다. RestAssured를 사용하고 있다. 각 테스트별로 (DB)데이터가 격리된 테스트를 수행하고 싶다. 이에 다음과 같은 시행착오를 거쳤다. 최종적으로 작성된 코드를 보고싶다면 최종코드를 확인해주세요. 시행착오 JPA를 사용하고 있는 현 시점에서…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p>인수테스트를 작성하면서 다음과 같은 문제가 발생했다.</p>\n<ul>\n<li>RestAssured를 사용하고 있다.</li>\n<li>각 테스트별로 (DB)데이터가 격리된 테스트를 수행하고 싶다.</li>\n</ul>\n<p>이에 다음과 같은 시행착오를 거쳤다.</p>\n<blockquote>\n<p>최종적으로 작성된 코드를 보고싶다면 최종코드를 확인해주세요.</p>\n</blockquote>\n<h2>시행착오</h2>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@Transactional</span>\n<span class=\"token annotation punctuation\">@SpringBootTest</span><span class=\"token punctuation\">(</span>webEnvironment <span class=\"token operator\">=</span> <span class=\"token class-name\">SpringBootTest<span class=\"token punctuation\">.</span>WebEnvironment</span><span class=\"token punctuation\">.</span><span class=\"token constant\">RANDOM_PORT</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">DictionaryPlantApiTest</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>JPA를 사용하고 있는 현 시점에서<code class=\"language-text\">@Transactional</code>을 이용해서 하나의 테스트(트랜잭션)이 끝날 때 데이터가 롤백되는 현상을 기대했다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@Test</span>\n<span class=\"token keyword\">void</span> 사전_식물_상세정보_조회_시_사전_식물_정보_반환<span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token comment\">// dictionaryPlantRepository.save() 에 대한 Fixture</span>\n    <span class=\"token class-name\">DictionaryPlant</span> <span class=\"token constant\">REQUEST</span> <span class=\"token operator\">=</span> dictionaryPlantSupport<span class=\"token punctuation\">.</span><span class=\"token function\">builder</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">build</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token class-name\">DictionaryPlantResponse</span> <span class=\"token constant\">RESPONSE</span> <span class=\"token operator\">=</span> <span class=\"token class-name\">RestAssured</span>\n            <span class=\"token punctuation\">.</span><span class=\"token function\">given</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">all</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n            <span class=\"token punctuation\">.</span><span class=\"token function\">when</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n            <span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"/dictionary-plants/{id}\"</span><span class=\"token punctuation\">,</span> <span class=\"token constant\">REQUEST</span><span class=\"token punctuation\">.</span><span class=\"token function\">getId</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n            <span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n            <span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">all</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n            <span class=\"token punctuation\">.</span><span class=\"token function\">statusCode</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">HttpStatus</span><span class=\"token punctuation\">.</span><span class=\"token constant\">OK</span><span class=\"token punctuation\">.</span><span class=\"token function\">value</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n            <span class=\"token punctuation\">.</span><span class=\"token function\">extract</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">as</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">DictionaryPlantResponse</span><span class=\"token punctuation\">.</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    \n    <span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6a7264de6762b8d1cca647aaf3a1fff8/06e4e/807f392f.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 33.529411764705884%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAz0lEQVR42o2QS4LEIAhEc5L4AY3amdhq7n+1moo9vZ1k8UQQCnDZi+JsBeP9Qqu0bUd/F7QjY9BP0cG55yxtT0jlQAwOSQ1q8Mgq9D+IZ6L3zwVLjnASoaoIRKyDMRaWj9ZarMZgXVfGzPTvJ6wJrbXJljhtzujjRC5lxvoY6OeJo9YZEzZ1/wgvOSl6/xPcNliuKIFF4mfxNbmGMO8iAn+z/mK54rXSRXAeI2zo+mEXijDpi3/yh9cxu5KNAo1CVePkID/kpYE2QJljbwR/AcR4xxodFiVIAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='807f392f' title='' src='/static/6a7264de6762b8d1cca647aaf3a1fff8/ca1dc/807f392f.png' srcset='/static/6a7264de6762b8d1cca647aaf3a1fff8/e7570/807f392f.png 170w,\n/static/6a7264de6762b8d1cca647aaf3a1fff8/f46e7/807f392f.png 340w,\n/static/6a7264de6762b8d1cca647aaf3a1fff8/ca1dc/807f392f.png 680w,\n/static/6a7264de6762b8d1cca647aaf3a1fff8/02d09/807f392f.png 1020w,\n/static/6a7264de6762b8d1cca647aaf3a1fff8/9d567/807f392f.png 1360w,\n/static/6a7264de6762b8d1cca647aaf3a1fff8/06e4e/807f392f.png 2054w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>하지만 테스트를 수행할 때 JPARepository로 save한 값을 RestAssured를 이용해 조회하면 데이터가 반영되지 않는 문제가 발생했다.</p>\n<h3>문제 인식</h3>\n<p><a href=\"https://stackoverflow.com/questions/41763417/api-test-transactional-rollback\">Stack Overflow</a>의 다음 글을 읽어본 뒤 다음과 같은 지식을 얻었다.</p>\n<blockquote>\n<p>@Transactional only works within the same thread, and as such the rollback provided by Spring will only work on the objects that were persisted on the thread where the transaction was started.\nYour rest-assured test will perform an integration test and will hit your Spring context on another thread. So although your rest-assured test would be able to see the objects persisted in your test setup, Spring will never be able to cleanup resources persisted in your rest-assured test automatically.\nThe only way to tackle this is to delete the entities yourself in your test (Using an Junit Rule, or cleaning up any state in your test setup).</p>\n</blockquote>\n<p>요약하면 다음과 같다.</p>\n<blockquote>\n<p>트랜잭션은 동일한 스레드 내에서 동작한다.\nSpring에서 제공하는 롤백은 트랜잭션이 시작된 스레드 내에서 생긴 객체에 대해서만 동작한다.\nRestAssured는 별도의 스레드를 통해 Spring 컨텍스트를 이용한다.\n이 때문에 RestAssured는 전역적으로 설정된 데이터 (Data.sql과 같은 설정으로 생긴 데이터)에는 접근할 수 있으나 Transaction과 같이 별도의 스레드에서만 제공되는 값에 대해서는 접근할 수 없다.\n... (해결방법 후략)</p>\n</blockquote>\n<p>위와 같이 별도의 RestAssured의 요청이 스레드로 동작하기 때문에 하나의 트랜잭션에서 별개로 저장한 값에 접근할 수 없다는 결론이 나왔다.</p>\n<blockquote>\n<p>자세한 내용은 <a href=\"https://pium-official.github.io/transactional-not-in-restassured/\">하마드의 트러블슈팅 글</a>을 참고해주세요~</p>\n</blockquote>\n<h2>해결방법</h2>\n<p>이 문제에 대해서 다양한 해결방법이 존재하고 각각의 장단점을 비교한 뒤 최종적으로 어떤 방식을 선택할지 고민해보자.</p>\n<h3>1️⃣ DirtiesContext 사용하기</h3>\n<p>매 테스트마다 Context를 새롭게 띄워서 데이터를 매번 초기화하는 방법을 생각해볼 수 있다.</p>\n<h4>장점</h4>\n<p>컨텍스트를 다시 로드하면서 테스트간 격리 환경을 명확하게 구분할 수 있다.</p>\n<h4>단점</h4>\n<ul>\n<li>매 테스트마다 컨텍스트를 다시 로드하기 때문에 속도가 상대적으로 느리다.</li>\n<li>@Nested 내부에 정의되어있는 테스트에 대해 DirtiesContext가 적용되지 않는 문제가 있다.\n<a href=\"https://docs.spring.io/spring-framework/reference/testing/testcontext-framework/support-classes.html#testcontext-junit-jupiter-nested-test-configuration\">Spring @Nested 관련 공식 문서</a>\n@Nested 내부에 정의된 테스트에 DirtiesContext를 전파하기 위해 아래 설정을 추가해줘야한다.</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token comment\">// 클래스레벨에 다음 어노테이션을 추가해주거나</span>\n<span class=\"token annotation punctuation\">@NestedTestConfiguration</span><span class=\"token punctuation\">(</span>value <span class=\"token operator\">=</span> <span class=\"token class-name\">NestedTestConfiguration<span class=\"token punctuation\">.</span>EnclosingConfiguration</span><span class=\"token punctuation\">.</span><span class=\"token constant\">OVERRIDE</span><span class=\"token punctuation\">)</span></code></pre></div>\n<p>혹은 properteis 설정을 변경해주는 방식도 존재한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"properties\"><pre class=\"language-properties\"><code class=\"language-properties\"><span class=\"token comment\"># properties 파일에 다음 설정을 추가해주어 전역적으로 @Nested 기본 전략을 설정할 수 있다.</span>\n<span class=\"token key attr-name\">spring.test.enclosing.configuration</span><span class=\"token punctuation\">=</span><span class=\"token value attr-value\">OVERRIDE</span></code></pre></div>\n<blockquote>\n<p>참고 문서 : <a href=\"https://docs.spring.io/spring-framework/reference/testing/annotations/integration-junit-jupiter.html#integration-testing-annotations-nestedtestconfiguration\">Changing the default enclosing configuration inheritance mode</a></p>\n</blockquote>\n<h3>2️⃣ @SQL 사용하기</h3>\n<p>@SQL 어노테이션을 사용하여 매 테스트 실행 전 SQL 스크립트를 실행하여 테이블을 다시 만들 수 있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@Sql</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"classpath:init.sql\"</span><span class=\"token punctuation\">)</span>\n<span class=\"token annotation punctuation\">@SpringBootTest</span><span class=\"token punctuation\">(</span>webEnvironment <span class=\"token operator\">=</span> <span class=\"token class-name\">SpringBootTest<span class=\"token punctuation\">.</span>WebEnvironment</span><span class=\"token punctuation\">.</span><span class=\"token constant\">RANDOM_PORT</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">DictionaryPlantApiTest</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h4>장점</h4>\n<ul>\n<li>여러 스크립트를 수행할 수 있다.</li>\n<li>스키마 초기화 후 테이터도 함께 넣을 수 있다.</li>\n</ul>\n<h4>단점</h4>\n<ul>\n<li>테스트에 사용하는 DB가 변경되었을 때 해당 벤더사의 Dialect에 맞게 SQL문을 고쳐줘야한다.</li>\n<li>쿼리를 텍스트로 관리하다보니 컴파일타임에 오류를 잡기 어렵다.</li>\n<li>테이블 연관관계가 존재하는 경우 쿼리문 작성 순서에 신경을 많이 써야한다.</li>\n</ul>\n<h3>3️⃣ InitializingBean 사용하기</h3>\n<p><code class=\"language-text\">InitializingBean</code>을 이용하여 스프링 Bean이 초기화, 소멸 될 때 행위를 추가할 수 있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token comment\">// InitializingBean의 생김새</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">interface</span> <span class=\"token class-name\">InitializingBean</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token keyword\">void</span> <span class=\"token function\">afterPropertiesSet</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">throws</span> <span class=\"token class-name\">Exception</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>이를 이용해 @Test 어노테이션으로 Bean이 등록될 때 마다 DB을 초기화하는 상황을 기대할 수 있다.</p>\n<p><strong>Entity Manager를 이용해 DB 초기화하기</strong></p>\n<p>JPA를 사용하는 입장으로 SQL문을 작성하기 보다는 EntityManager를 이용해보는것이 정적인 쿼리 관리에 들이는 소요가 적을 것이라고 생각된다.</p>\n<p>이에 EntityManager를 이용하여 DB를 초기화하는 방법을 알아보자.</p>\n<blockquote>\n<p>아래부터는 <a href=\"https://ttl-blog.tistory.com/1407\">https://ttl-blog.tistory.com/1407</a> 를 참고하여 진행된 글입니다.</p>\n</blockquote>\n<h4>table 이름 조회하기</h4>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@Component</span>\n<span class=\"token annotation punctuation\">@Profile</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"test\"</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">DatabaseCleaner</span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\">InitializingBean</span> <span class=\"token punctuation\">{</span>\n\n\t<span class=\"token comment\">// 테이블 이름들을 저장할 List</span>\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">final</span> <span class=\"token class-name\">List</span><span class=\"token generics\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">></span></span> tables <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">ArrayList</span><span class=\"token generics\"><span class=\"token punctuation\">&lt;</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n\t<span class=\"token comment\">// 엔티티 매니저를 선언한다</span>\n    <span class=\"token annotation punctuation\">@PersistenceContext</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">EntityManager</span> entityManager<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@SuppressWarnings</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"unchecked\"</span><span class=\"token punctuation\">)</span>\n    <span class=\"token annotation punctuation\">@PostConstruct</span>\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">void</span> <span class=\"token function\">findDatabaseTableNames</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">List</span><span class=\"token operator\">&lt;</span><span class=\"token class-name\">Object</span><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token operator\">></span> tableInfos <span class=\"token operator\">=</span> entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SHOW TABLES\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">getResultList</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">Object</span><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span> tableInfo <span class=\"token operator\">:</span> tableInfos<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token class-name\">String</span> tableName <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">)</span> tableInfo<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n            tableNames<span class=\"token punctuation\">.</span><span class=\"token function\">add</span><span class=\"token punctuation\">(</span>tableName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>EntityManager를 이용하여 모든 테이블의 이름을 가져온다.</p>\n<h4>테이블 초기화하기 &#x26; 실행하기</h4>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@Component</span>\n<span class=\"token annotation punctuation\">@Profile</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"test\"</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">DatabaseCleaner</span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\">InitializingBean</span> <span class=\"token punctuation\">{</span>\n\n\t<span class=\"token comment\">// 테이블 이름들을 저장할 List</span>\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">final</span> <span class=\"token class-name\">List</span><span class=\"token generics\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">></span></span> tables <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">ArrayList</span><span class=\"token generics\"><span class=\"token punctuation\">&lt;</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n\t<span class=\"token comment\">// 엔티티 매니저를 선언한다</span>\n    <span class=\"token annotation punctuation\">@PersistenceContext</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">EntityManager</span> entityManager<span class=\"token punctuation\">;</span>\n\n\t<span class=\"token comment\">// 테이블 이름을 조회한다</span>\n    <span class=\"token annotation punctuation\">@SuppressWarnings</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"unchecked\"</span><span class=\"token punctuation\">)</span>\n    <span class=\"token annotation punctuation\">@PostConstruct</span>\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">void</span> <span class=\"token function\">findDatabaseTableNames</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span>\n    <span class=\"token punctuation\">}</span>\n    \n    <span class=\"token comment\">// 테이블을 초기화한다</span>\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">void</span> <span class=\"token function\">truncate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SET FOREIGN_KEY_CHECKS %d\"</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span> tableName <span class=\"token operator\">:</span> tableNames<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"TRUNCATE TABLE %s\"</span><span class=\"token punctuation\">,</span> tableName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SET FOREIGN_KEY_CHECKS %d\"</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token annotation punctuation\">@Override</span>\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">void</span> <span class=\"token function\">afterPropertiesSet</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">throws</span> <span class=\"token class-name\">Exception</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token function\">findDatabaseTableNames</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token annotation punctuation\">@Transactional</span>\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">void</span> <span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token function\">truncate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>truncate를 수행하여 모든 테이블의 데이터를 초기화하고 실행한다.</p>\n<p>결과적으로 봤을 때 다음과 같은 흐름으로 데이터베이스 초기화가 수행된다.</p>\n<ul>\n<li>Bean이 생성된 이후 Table 이름을 찾는다.</li>\n<li>영속성 컨텍스트의 1차 캐시를 비우고 테이블을 초기화한다.</li>\n</ul>\n<h4>테스트코드에 적용하기</h4>\n<p>인수테스트를 <code class=\"language-text\">AcceptanceTest</code>로 분리하고 상속받는 구조로 변경했다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@SpringBootTest</span><span class=\"token punctuation\">(</span>webEnvironment <span class=\"token operator\">=</span> <span class=\"token class-name\">SpringBootTest<span class=\"token punctuation\">.</span>WebEnvironment</span><span class=\"token punctuation\">.</span><span class=\"token constant\">RANDOM_PORT</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">AcceptanceTest</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token annotation punctuation\">@LocalServerPort</span>\n    <span class=\"token keyword\">int</span> port<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@Autowired</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">DatabaseCleaner</span> databaseCleaner<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@BeforeEach</span>\n    <span class=\"token keyword\">void</span> <span class=\"token function\">setUp</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">RestAssured</span><span class=\"token punctuation\">.</span>port <span class=\"token operator\">=</span> port<span class=\"token punctuation\">;</span>\n        databaseCleaner<span class=\"token punctuation\">.</span><span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>작업한 내용을 적용하면 위와 같이 코드를 작성할 수 있다.</p>\n<h4>장점</h4>\n<ul>\n<li>테스트 코드가 쿼리에 의존적이지 않다.</li>\n<li>설정을 분리하여 관리할 수 있다.</li>\n</ul>\n<h4>단점</h4>\n<ul>\n<li>JPA에 종속적인 설정이기 때문에 JPA를 사용하지 않거나 ORM을 제외하는 상황을 고려한다면 해당 방식의 도입을 생각해볼 필요가 있다.</li>\n<li>AcceptenceTest 이외에 다른 통합테스트에서 사용하려면 중복된 코드를 작성해야한다.</li>\n<li>\n<p>Bean 생성 주기에 대한 설정이기 때문에 해당 클래스를 프로덕션에 남용할 수 있는 가능성이 존재한다.</p>\n<ul>\n<li>테스트 코드지만 프로덕션에도 적용될 수 있는 설정이 그닥 마음에 들진 않는다.</li>\n</ul>\n</li>\n</ul>\n<h3>4️⃣ JUnit5 Extension 사용하기</h3>\n<p>현재 코드는 AcceptenceTest를 사용하는 코드에 대해서만 DB 초기화를 진행하고있다.</p>\n<p>RestAssured가 별도의 스레드에서 동작하기 때문에 위와같이 구성했지만 별도의 통합 테스트에서도 DB 초기화 설정이 필요할 수 있다.</p>\n<p>@BeforeEach 내부에 clear를 선언하지 않고도 간단한 설정만으로 DB 초기화 로직을 적용하도록 개선해보자.</p>\n<p>이를 위해 JUnit5의 Extension을 사용하여 해당 설정을 리팩터링해볼 것이다.</p>\n<h4>JUnit5 Extension이란?</h4>\n<p>Junit5에서 제공하는 테스트의 생명주기에 대해 각각의 환경에 대해 확장할 수 있도록 제공하는 인터페이스다.</p>\n<p>다음과 같은 생성주기에 대한 확장을 제공한다.</p>\n<ul>\n<li>BeforeAllCallback - @BeforeAll 실행 전에 실행된다.</li>\n<li>BeforeEachCallback - @BeforeEach 실행 전에 실행된다.</li>\n<li>BeforeTestExecutionCallback - 각 테스트가 실행되기 직전에 실행된다.</li>\n<li>AfterTestExecutionCallback : 각 테스트가 종료된 후 실행된다.</li>\n<li>AfterEachCallback : @AfterEach 실행 이후에 실행된다.</li>\n<li>AfterAllCallback : @AfterAll 실행 이후에 실행된다.</li>\n</ul>\n<blockquote>\n<p>Referenced By <a href=\"https://ttl-blog.tistory.com/1407\">https://ttl-blog.tistory.com/1407</a></p>\n</blockquote>\n<h4>BeforeEachCallback 이용하기</h4>\n<p>현재 <code class=\"language-text\">@BeforeEach</code>에서 DatabaseCleaner가 수행되고 있으므로 <code class=\"language-text\">@BeforeEach</code> 이전에 실행될 수 있도록 <code class=\"language-text\">BeforeEachCallback</code>을 이용해보자.</p>\n<p>Extension을 이용하기 위해 기존에 DatabaseCleaner에 붙어있던 <code class=\"language-text\">implements InitializingBean</code>은 제거해줬다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@Component</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">DatabaseCleaner</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">final</span> <span class=\"token class-name\">List</span><span class=\"token generics\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">></span></span> tableNames <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">ArrayList</span><span class=\"token generics\"><span class=\"token punctuation\">&lt;</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@PersistenceContext</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">EntityManager</span> entityManager<span class=\"token punctuation\">;</span>\n\n\t<span class=\"token comment\">// 바뀐부분 : 의존성 주입이후 초기화 수행 시 Table을 조회한다.</span>\n    <span class=\"token annotation punctuation\">@PostConstruct</span>\n    <span class=\"token annotation punctuation\">@SuppressWarnings</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"unchecked\"</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">void</span> <span class=\"token function\">findDatabaseTableNames</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">List</span><span class=\"token operator\">&lt;</span><span class=\"token class-name\">Object</span><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token operator\">></span> tableInfos <span class=\"token operator\">=</span> entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SHOW TABLES\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">getResultList</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">Object</span><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span> tableInfo <span class=\"token operator\">:</span> tableInfos<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token class-name\">String</span> tableName <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">)</span> tableInfo<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n            tableNames<span class=\"token punctuation\">.</span><span class=\"token function\">add</span><span class=\"token punctuation\">(</span>tableName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">void</span> <span class=\"token function\">truncate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SET FOREIGN_KEY_CHECKS %d\"</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span> tableName <span class=\"token operator\">:</span> tableNames<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"TRUNCATE TABLE %s\"</span><span class=\"token punctuation\">,</span> tableName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SET FOREIGN_KEY_CHECKS %d\"</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token annotation punctuation\">@Transactional</span>\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">void</span> <span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token function\">truncate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>이후 <code class=\"language-text\">DatabaseClearExtension</code> 클래스를 다음과 같이 생성해준다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">DatabaseClearExtension</span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\">BeforeEachCallback</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token annotation punctuation\">@Override</span>\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">void</span> <span class=\"token function\">beforeEach</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">ExtensionContext</span> context<span class=\"token punctuation\">)</span> <span class=\"token keyword\">throws</span> <span class=\"token class-name\">Exception</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">DatabaseCleaner</span> databaseCleaner <span class=\"token operator\">=</span> <span class=\"token function\">getDataCleaner</span><span class=\"token punctuation\">(</span>context<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        databaseCleaner<span class=\"token punctuation\">.</span><span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">DatabaseCleaner</span> <span class=\"token function\">getDataCleaner</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">ExtensionContext</span> extensionContext<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token class-name\">SpringExtension</span><span class=\"token punctuation\">.</span><span class=\"token function\">getApplicationContext</span><span class=\"token punctuation\">(</span>extensionContext<span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">.</span><span class=\"token function\">getBean</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">DatabaseCleaner</span><span class=\"token punctuation\">.</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h4>간결해진 테스트코드</h4>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@ExtendWith</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">DatabaseClearExtension</span><span class=\"token punctuation\">.</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">)</span>\n<span class=\"token annotation punctuation\">@SpringBootTest</span><span class=\"token punctuation\">(</span>webEnvironment <span class=\"token operator\">=</span> <span class=\"token class-name\">SpringBootTest<span class=\"token punctuation\">.</span>WebEnvironment</span><span class=\"token punctuation\">.</span><span class=\"token constant\">RANDOM_PORT</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">AcceptanceTest</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token annotation punctuation\">@LocalServerPort</span>\n    <span class=\"token keyword\">int</span> port<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@BeforeEach</span>\n    <span class=\"token keyword\">void</span> <span class=\"token function\">setUp</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">RestAssured</span><span class=\"token punctuation\">.</span>port <span class=\"token operator\">=</span> port<span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>이제 <code class=\"language-text\">@ExtendWith(DatabaseClearExtension.class)</code> 어노테이션만 붙여주면 테스트별로 DB를 초기화할 수 있다.</p>\n<p>각 테스트별로 truncate 문도 잘 수행되는 것을 확인할 수 있다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/88196dd40428e63ada6cbdf9a9d9b518/0ea77/086045e1.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 130.58823529411765%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAACXBIWXMAAAsTAAALEwEAmpwYAAACfklEQVR42qWVx5LiYAyE/RhDMjmazJBzThOOe5j3fw6tPpXNQC0srpmDSr8NbkvdLdlZbjayP59ls9/L/nSSQrEoqVRK0un0j8IplUpSqVSk7Ec2m/0xmAHGYjFJxOOSTCbFdV1J/6I6AxyMx9JoNiUJ2C+ALoDdXk88z7MKuUEm4PEmwgJGIxEDOH9+yun9XQ5vb3JQkSazmZw+PuSo9+bLpZTL5VBiORWtzqtWpdVuS7PVMmGKqnShUJBiqXg5I1Ymk7GHgnwXcKZv3+x2MppMrCqqiKtQsWjUsp2DaxUP4RDRTSTuA7q+GLPFQpbrtUzmc2m/vtq5NxhIfziUqd5b60sX3Ov37b/8FvB+A0j5VAXIYDSyDA0AQQHR0XtDdQNg9UZDevob+R6nzny1ku3xKGNtl0qsZW0p8vJimZYRjmsXv9Kytus+sJmTy+WU/JK1MNQKTRhVtNXpiFerSU0DwQh7SDuiq8wjURI+0XBGpfD0qt5krsfTqQVnZj2UD0f6ACR3lZ+AaFqNqqq0FrTMdShAyIV0CEcIFkU+nzf/Bbnk3wu3HHy/rbZba22tGfCzTgkW2ikNf76+zAFQ8z9TGyDkYxWCtvM6FfyQ04qyKhgTkvPzMzADxF9Yh8y08ND1NHAmm1UeTMe/LevDCwVlBNngbCAWBDZCMF623m1tSTxbEA6kE51u11SuqUj4sqF+rKoHmRoy4nF+WiFv3RwO1jZehC+m4RL+fgzOTwHhLCD85ntyLUAIMb4nRYkO8+bQgIiAsdl5qaA9Qsm//hyEBmQRsJFr9fpFBDY4wnjBWUXLhGzbCdyPTeyDrwKxCPDkTidnq9fYh9ELU+lfMu735eWYN0YAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='086045e1' title='' src='/static/88196dd40428e63ada6cbdf9a9d9b518/ca1dc/086045e1.png' srcset='/static/88196dd40428e63ada6cbdf9a9d9b518/e7570/086045e1.png 170w,\n/static/88196dd40428e63ada6cbdf9a9d9b518/f46e7/086045e1.png 340w,\n/static/88196dd40428e63ada6cbdf9a9d9b518/ca1dc/086045e1.png 680w,\n/static/88196dd40428e63ada6cbdf9a9d9b518/0ea77/086045e1.png 682w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h2>🚀 정리</h2>\n<p>다양한 방법을 시도해보면서 결론적으로 BeforeEachCallback을 사용하는 방식까지 적용해봤다.\n깔끔하게 정리된 테스트를 보니 기분이 좋다. 👍</p>\n<h3>최종 코드</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 648px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/734e673304a268069acc4801e92b549c/244f0/21f5d279.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 129.99999999999997%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAACXBIWXMAAAsTAAALEwEAmpwYAAADXUlEQVR42p1V2XbaSBTkMxIQ6kVra2eVhFgtGbBPMjPJ5NgnXuZp/v8Xam6LwYfE2HH8UOd2Q3dRfZeik6cB0osSxV+fcHdzi2o+RxRFSNMUSZK8Gfp8GIboRMqDN8mQrZfY1ZfIsgye50Ep9dvQ9zpcCAjOMHHHmCVzBJGC67pgjIFz/gOEPvsLdI4Lx3GQxAO4ftCuLctqo23b7VpHKeXbCaXgCJIp4iHlMFBtPo750TnVUZP+SmnndMPp6X6QQqUFLMqH7flwfAXb98EtG6aQMOUJ6I4Gf4lQP0kTjqMMlW+jChWqwMdM+RgKhqTfQ2IaT0i52X7u0uv4WYWkwOp38UcSYv/lGy5nIzTlBHUxwm5RYL8osZvn2C9nuF5VKEMfV6yLuTTRo7vyOaGARSq3dLCZ5mgShToJ0KQH1LFCk4VP67krccW7yInQeE4oYZt9iOUF4tsHVJaJUheD8qq6XQS9HgKjB0Ux7BuIWJ++MxEJ/kpRCDYduCSF65wUDlyCh4vUeUKduag8gcKi3iU00sCEFPbPPlkeVH6NQ3y5/hN3qwD3dYr7TYzvqwPuNgkal6HqfkBp9vC3+IiF6L+UQyoKM3FDCm/rGg+Fi4dS4S73KPptvC+8Nj7S/tvExaPdxVIYLxNKZmBN7TLbbKnKCvtViqtNimYWUaUTbKsY23mMK/p8XUa4cExMSeGzouiNKTlWToZ/VYHS4yipqSsVYEDTEVExYsM4gNbH/YD60Dlp7h8UMipI7CoUyQhSTwqZhE1R0Cwzyq/O8TEe169OCqf8DaczXH7+ijgKMRgMoGjsBCmU/7/iHF6ZZUmOY6MsfPI2Hz6RaUN4i22dJWRMYjxysG0iMswQQRC086298V2E3BRI8wCL6zF872BhGtpw30fIBEKahHKdkMKgVait/Z2EuqkN8GkDtv0HCf3XRFQY33Pph9ibCvJModAX0wzWbAGu3dn1wBwXBuXRkFbbvD+DvVoUk2aU/O7x5jN2NH57sq6NZyM3yaKMjygozmgqjqgI6sRcxc+TYpDCHY3dcrHCiAxiOswI5OBphDIfY5xEiMmyYpqOkDAWJjbkNuwsoX4WOc2Omnm7+4TFOEVNzlzPCywnA9Tk1otRhiHvYyS09ZNfksIl4ZTwP0Yo+/6QNT1iAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='21f5d279' title='' src='/static/734e673304a268069acc4801e92b549c/244f0/21f5d279.png' srcset='/static/734e673304a268069acc4801e92b549c/e7570/21f5d279.png 170w,\n/static/734e673304a268069acc4801e92b549c/f46e7/21f5d279.png 340w,\n/static/734e673304a268069acc4801e92b549c/244f0/21f5d279.png 648w' sizes='(max-width: 648px) 100vw, 648px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>패키지 구조는 위와 같이 구성되었고 각각의 코드는 다음과 같다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token comment\">// DatabaseCleaner.java</span>\n<span class=\"token annotation punctuation\">@Component</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">DatabaseCleaner</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">final</span> <span class=\"token class-name\">List</span><span class=\"token generics\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">></span></span> tableNames <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">ArrayList</span><span class=\"token generics\"><span class=\"token punctuation\">&lt;</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@PersistenceContext</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">EntityManager</span> entityManager<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@SuppressWarnings</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"unchecked\"</span><span class=\"token punctuation\">)</span>\n    <span class=\"token annotation punctuation\">@PostConstruct</span>\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">void</span> <span class=\"token function\">findDatabaseTableNames</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">List</span><span class=\"token operator\">&lt;</span><span class=\"token class-name\">Object</span><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token operator\">></span> tableInfos <span class=\"token operator\">=</span> entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SHOW TABLES\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">getResultList</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">Object</span><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span> tableInfo <span class=\"token operator\">:</span> tableInfos<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token class-name\">String</span> tableName <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">)</span> tableInfo<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n            tableNames<span class=\"token punctuation\">.</span><span class=\"token function\">add</span><span class=\"token punctuation\">(</span>tableName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">void</span> <span class=\"token function\">truncate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SET FOREIGN_KEY_CHECKS %d\"</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span> tableName <span class=\"token operator\">:</span> tableNames<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"TRUNCATE TABLE %s\"</span><span class=\"token punctuation\">,</span> tableName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SET FOREIGN_KEY_CHECKS %d\"</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token annotation punctuation\">@Transactional</span>\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">void</span> <span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token function\">truncate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">// DatabaseClearExtension.java</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">DatabaseClearExtension</span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\">BeforeEachCallback</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token annotation punctuation\">@Override</span>\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">void</span> <span class=\"token function\">beforeEach</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">ExtensionContext</span> context<span class=\"token punctuation\">)</span> <span class=\"token keyword\">throws</span> <span class=\"token class-name\">Exception</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">DatabaseCleaner</span> databaseCleaner <span class=\"token operator\">=</span> <span class=\"token function\">getDataCleaner</span><span class=\"token punctuation\">(</span>context<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        databaseCleaner<span class=\"token punctuation\">.</span><span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">DatabaseCleaner</span> <span class=\"token function\">getDataCleaner</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">ExtensionContext</span> extensionContext<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token class-name\">SpringExtension</span><span class=\"token punctuation\">.</span><span class=\"token function\">getApplicationContext</span><span class=\"token punctuation\">(</span>extensionContext<span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">.</span><span class=\"token function\">getBean</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">DatabaseCleaner</span><span class=\"token punctuation\">.</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">// AcceptanceTest.java</span>\n<span class=\"token annotation punctuation\">@ExtendWith</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">DatabaseClearExtension</span><span class=\"token punctuation\">.</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">)</span>\n<span class=\"token annotation punctuation\">@SpringBootTest</span><span class=\"token punctuation\">(</span>webEnvironment <span class=\"token operator\">=</span> <span class=\"token class-name\">SpringBootTest<span class=\"token punctuation\">.</span>WebEnvironment</span><span class=\"token punctuation\">.</span><span class=\"token constant\">RANDOM_PORT</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">AcceptanceTest</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token annotation punctuation\">@LocalServerPort</span>\n    <span class=\"token keyword\">int</span> port<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@BeforeEach</span>\n    <span class=\"token keyword\">void</span> <span class=\"token function\">setUp</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">RestAssured</span><span class=\"token punctuation\">.</span>port <span class=\"token operator\">=</span> port<span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n\n<span class=\"token comment\">// DictionaryPlantApiTest.java</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">DictionaryPlantApiTest</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">AcceptanceTest</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h2>Reference</h2>\n<p><a href=\"https://ttl-blog.tistory.com/1407\">https://ttl-blog.tistory.com/1407</a>\n<a href=\"https://mangkyu.tistory.com/264\">https://mangkyu.tistory.com/264</a>\n<a href=\"https://stackoverflow.com/questions/41763417/api-test-transactional-rollback\">https://stackoverflow.com/questions/41763417/api-test-transactional-rollback</a>\n<a href=\"https://stackoverflow.com/questions/62142428/dirtiescontext-does-not-work-with-nested-tests\">https://stackoverflow.com/questions/62142428/dirtiescontext-does-not-work-with-nested-tests</a>\n<a href=\"https://unluckyjung.github.io/testcode/2021/05/08/Independent-Test-Mehod/\">https://unluckyjung.github.io/testcode/2021/05/08/Independent-Test-Mehod/</a>\n<a href=\"https://www.baeldung.com/junit-5-extensions\">https://www.baeldung.com/junit-5-extensions</a></p>","frontmatter":{"title":"인수테스트 데이터 초기화하기","date":"August 03, 2023","update":"August 03, 2023","tags":["인수테스트","RestDocs","테스트"],"series":null},"fields":{"slug":"/acceptance-test-resolve/","readingTime":{"minutes":13.81}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}},"next":{"fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},"pageContext":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","series":null,"previousPostId":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","nextPostId":"15def1d5-c20f-5d07-b46e-24a14661365f"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/acceptance-test-resolve/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 인수테스트를 작성하면서 다음과 같은 문제가 발생했다. RestAssured를 사용하고 있다. 각 테스트별로 (DB)데이터가 격리된 테스트를 수행하고 싶다. 이에 다음과 같은 시행착오를 거쳤다. 최종적으로 작성된 코드를 보고싶다면 최종코드를 확인해주세요. 시행착오 JPA를 사용하고 있는 현 시점에서…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p>인수테스트를 작성하면서 다음과 같은 문제가 발생했다.</p>\n<ul>\n<li>RestAssured를 사용하고 있다.</li>\n<li>각 테스트별로 (DB)데이터가 격리된 테스트를 수행하고 싶다.</li>\n</ul>\n<p>이에 다음과 같은 시행착오를 거쳤다.</p>\n<blockquote>\n<p>최종적으로 작성된 코드를 보고싶다면 최종코드를 확인해주세요.</p>\n</blockquote>\n<h2>시행착오</h2>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@Transactional</span>\n<span class=\"token annotation punctuation\">@SpringBootTest</span><span class=\"token punctuation\">(</span>webEnvironment <span class=\"token operator\">=</span> <span class=\"token class-name\">SpringBootTest<span class=\"token punctuation\">.</span>WebEnvironment</span><span class=\"token punctuation\">.</span><span class=\"token constant\">RANDOM_PORT</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">DictionaryPlantApiTest</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>JPA를 사용하고 있는 현 시점에서<code class=\"language-text\">@Transactional</code>을 이용해서 하나의 테스트(트랜잭션)이 끝날 때 데이터가 롤백되는 현상을 기대했다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@Test</span>\n<span class=\"token keyword\">void</span> 사전_식물_상세정보_조회_시_사전_식물_정보_반환<span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token comment\">// dictionaryPlantRepository.save() 에 대한 Fixture</span>\n    <span class=\"token class-name\">DictionaryPlant</span> <span class=\"token constant\">REQUEST</span> <span class=\"token operator\">=</span> dictionaryPlantSupport<span class=\"token punctuation\">.</span><span class=\"token function\">builder</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">build</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token class-name\">DictionaryPlantResponse</span> <span class=\"token constant\">RESPONSE</span> <span class=\"token operator\">=</span> <span class=\"token class-name\">RestAssured</span>\n            <span class=\"token punctuation\">.</span><span class=\"token function\">given</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">all</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n            <span class=\"token punctuation\">.</span><span class=\"token function\">when</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n            <span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"/dictionary-plants/{id}\"</span><span class=\"token punctuation\">,</span> <span class=\"token constant\">REQUEST</span><span class=\"token punctuation\">.</span><span class=\"token function\">getId</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n            <span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n            <span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">all</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n            <span class=\"token punctuation\">.</span><span class=\"token function\">statusCode</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">HttpStatus</span><span class=\"token punctuation\">.</span><span class=\"token constant\">OK</span><span class=\"token punctuation\">.</span><span class=\"token function\">value</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n            <span class=\"token punctuation\">.</span><span class=\"token function\">extract</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">as</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">DictionaryPlantResponse</span><span class=\"token punctuation\">.</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    \n    <span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6a7264de6762b8d1cca647aaf3a1fff8/06e4e/807f392f.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 33.529411764705884%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAz0lEQVR42o2QS4LEIAhEc5L4AY3amdhq7n+1moo9vZ1k8UQQCnDZi+JsBeP9Qqu0bUd/F7QjY9BP0cG55yxtT0jlQAwOSQ1q8Mgq9D+IZ6L3zwVLjnASoaoIRKyDMRaWj9ZarMZgXVfGzPTvJ6wJrbXJljhtzujjRC5lxvoY6OeJo9YZEzZ1/wgvOSl6/xPcNliuKIFF4mfxNbmGMO8iAn+z/mK54rXSRXAeI2zo+mEXijDpi3/yh9cxu5KNAo1CVePkID/kpYE2QJljbwR/AcR4xxodFiVIAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='807f392f' title='' src='/static/6a7264de6762b8d1cca647aaf3a1fff8/ca1dc/807f392f.png' srcset='/static/6a7264de6762b8d1cca647aaf3a1fff8/e7570/807f392f.png 170w,\n/static/6a7264de6762b8d1cca647aaf3a1fff8/f46e7/807f392f.png 340w,\n/static/6a7264de6762b8d1cca647aaf3a1fff8/ca1dc/807f392f.png 680w,\n/static/6a7264de6762b8d1cca647aaf3a1fff8/02d09/807f392f.png 1020w,\n/static/6a7264de6762b8d1cca647aaf3a1fff8/9d567/807f392f.png 1360w,\n/static/6a7264de6762b8d1cca647aaf3a1fff8/06e4e/807f392f.png 2054w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>하지만 테스트를 수행할 때 JPARepository로 save한 값을 RestAssured를 이용해 조회하면 데이터가 반영되지 않는 문제가 발생했다.</p>\n<h3>문제 인식</h3>\n<p><a href=\"https://stackoverflow.com/questions/41763417/api-test-transactional-rollback\">Stack Overflow</a>의 다음 글을 읽어본 뒤 다음과 같은 지식을 얻었다.</p>\n<blockquote>\n<p>@Transactional only works within the same thread, and as such the rollback provided by Spring will only work on the objects that were persisted on the thread where the transaction was started.\nYour rest-assured test will perform an integration test and will hit your Spring context on another thread. So although your rest-assured test would be able to see the objects persisted in your test setup, Spring will never be able to cleanup resources persisted in your rest-assured test automatically.\nThe only way to tackle this is to delete the entities yourself in your test (Using an Junit Rule, or cleaning up any state in your test setup).</p>\n</blockquote>\n<p>요약하면 다음과 같다.</p>\n<blockquote>\n<p>트랜잭션은 동일한 스레드 내에서 동작한다.\nSpring에서 제공하는 롤백은 트랜잭션이 시작된 스레드 내에서 생긴 객체에 대해서만 동작한다.\nRestAssured는 별도의 스레드를 통해 Spring 컨텍스트를 이용한다.\n이 때문에 RestAssured는 전역적으로 설정된 데이터 (Data.sql과 같은 설정으로 생긴 데이터)에는 접근할 수 있으나 Transaction과 같이 별도의 스레드에서만 제공되는 값에 대해서는 접근할 수 없다.\n... (해결방법 후략)</p>\n</blockquote>\n<p>위와 같이 별도의 RestAssured의 요청이 스레드로 동작하기 때문에 하나의 트랜잭션에서 별개로 저장한 값에 접근할 수 없다는 결론이 나왔다.</p>\n<blockquote>\n<p>자세한 내용은 <a href=\"https://pium-official.github.io/transactional-not-in-restassured/\">하마드의 트러블슈팅 글</a>을 참고해주세요~</p>\n</blockquote>\n<h2>해결방법</h2>\n<p>이 문제에 대해서 다양한 해결방법이 존재하고 각각의 장단점을 비교한 뒤 최종적으로 어떤 방식을 선택할지 고민해보자.</p>\n<h3>1️⃣ DirtiesContext 사용하기</h3>\n<p>매 테스트마다 Context를 새롭게 띄워서 데이터를 매번 초기화하는 방법을 생각해볼 수 있다.</p>\n<h4>장점</h4>\n<p>컨텍스트를 다시 로드하면서 테스트간 격리 환경을 명확하게 구분할 수 있다.</p>\n<h4>단점</h4>\n<ul>\n<li>매 테스트마다 컨텍스트를 다시 로드하기 때문에 속도가 상대적으로 느리다.</li>\n<li>@Nested 내부에 정의되어있는 테스트에 대해 DirtiesContext가 적용되지 않는 문제가 있다.\n<a href=\"https://docs.spring.io/spring-framework/reference/testing/testcontext-framework/support-classes.html#testcontext-junit-jupiter-nested-test-configuration\">Spring @Nested 관련 공식 문서</a>\n@Nested 내부에 정의된 테스트에 DirtiesContext를 전파하기 위해 아래 설정을 추가해줘야한다.</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token comment\">// 클래스레벨에 다음 어노테이션을 추가해주거나</span>\n<span class=\"token annotation punctuation\">@NestedTestConfiguration</span><span class=\"token punctuation\">(</span>value <span class=\"token operator\">=</span> <span class=\"token class-name\">NestedTestConfiguration<span class=\"token punctuation\">.</span>EnclosingConfiguration</span><span class=\"token punctuation\">.</span><span class=\"token constant\">OVERRIDE</span><span class=\"token punctuation\">)</span></code></pre></div>\n<p>혹은 properteis 설정을 변경해주는 방식도 존재한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"properties\"><pre class=\"language-properties\"><code class=\"language-properties\"><span class=\"token comment\"># properties 파일에 다음 설정을 추가해주어 전역적으로 @Nested 기본 전략을 설정할 수 있다.</span>\n<span class=\"token key attr-name\">spring.test.enclosing.configuration</span><span class=\"token punctuation\">=</span><span class=\"token value attr-value\">OVERRIDE</span></code></pre></div>\n<blockquote>\n<p>참고 문서 : <a href=\"https://docs.spring.io/spring-framework/reference/testing/annotations/integration-junit-jupiter.html#integration-testing-annotations-nestedtestconfiguration\">Changing the default enclosing configuration inheritance mode</a></p>\n</blockquote>\n<h3>2️⃣ @SQL 사용하기</h3>\n<p>@SQL 어노테이션을 사용하여 매 테스트 실행 전 SQL 스크립트를 실행하여 테이블을 다시 만들 수 있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@Sql</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"classpath:init.sql\"</span><span class=\"token punctuation\">)</span>\n<span class=\"token annotation punctuation\">@SpringBootTest</span><span class=\"token punctuation\">(</span>webEnvironment <span class=\"token operator\">=</span> <span class=\"token class-name\">SpringBootTest<span class=\"token punctuation\">.</span>WebEnvironment</span><span class=\"token punctuation\">.</span><span class=\"token constant\">RANDOM_PORT</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">DictionaryPlantApiTest</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h4>장점</h4>\n<ul>\n<li>여러 스크립트를 수행할 수 있다.</li>\n<li>스키마 초기화 후 테이터도 함께 넣을 수 있다.</li>\n</ul>\n<h4>단점</h4>\n<ul>\n<li>테스트에 사용하는 DB가 변경되었을 때 해당 벤더사의 Dialect에 맞게 SQL문을 고쳐줘야한다.</li>\n<li>쿼리를 텍스트로 관리하다보니 컴파일타임에 오류를 잡기 어렵다.</li>\n<li>테이블 연관관계가 존재하는 경우 쿼리문 작성 순서에 신경을 많이 써야한다.</li>\n</ul>\n<h3>3️⃣ InitializingBean 사용하기</h3>\n<p><code class=\"language-text\">InitializingBean</code>을 이용하여 스프링 Bean이 초기화, 소멸 될 때 행위를 추가할 수 있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token comment\">// InitializingBean의 생김새</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">interface</span> <span class=\"token class-name\">InitializingBean</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token keyword\">void</span> <span class=\"token function\">afterPropertiesSet</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">throws</span> <span class=\"token class-name\">Exception</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>이를 이용해 @Test 어노테이션으로 Bean이 등록될 때 마다 DB을 초기화하는 상황을 기대할 수 있다.</p>\n<p><strong>Entity Manager를 이용해 DB 초기화하기</strong></p>\n<p>JPA를 사용하는 입장으로 SQL문을 작성하기 보다는 EntityManager를 이용해보는것이 정적인 쿼리 관리에 들이는 소요가 적을 것이라고 생각된다.</p>\n<p>이에 EntityManager를 이용하여 DB를 초기화하는 방법을 알아보자.</p>\n<blockquote>\n<p>아래부터는 <a href=\"https://ttl-blog.tistory.com/1407\">https://ttl-blog.tistory.com/1407</a> 를 참고하여 진행된 글입니다.</p>\n</blockquote>\n<h4>table 이름 조회하기</h4>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@Component</span>\n<span class=\"token annotation punctuation\">@Profile</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"test\"</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">DatabaseCleaner</span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\">InitializingBean</span> <span class=\"token punctuation\">{</span>\n\n\t<span class=\"token comment\">// 테이블 이름들을 저장할 List</span>\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">final</span> <span class=\"token class-name\">List</span><span class=\"token generics\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">></span></span> tables <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">ArrayList</span><span class=\"token generics\"><span class=\"token punctuation\">&lt;</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n\t<span class=\"token comment\">// 엔티티 매니저를 선언한다</span>\n    <span class=\"token annotation punctuation\">@PersistenceContext</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">EntityManager</span> entityManager<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@SuppressWarnings</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"unchecked\"</span><span class=\"token punctuation\">)</span>\n    <span class=\"token annotation punctuation\">@PostConstruct</span>\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">void</span> <span class=\"token function\">findDatabaseTableNames</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">List</span><span class=\"token operator\">&lt;</span><span class=\"token class-name\">Object</span><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token operator\">></span> tableInfos <span class=\"token operator\">=</span> entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SHOW TABLES\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">getResultList</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">Object</span><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span> tableInfo <span class=\"token operator\">:</span> tableInfos<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token class-name\">String</span> tableName <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">)</span> tableInfo<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n            tableNames<span class=\"token punctuation\">.</span><span class=\"token function\">add</span><span class=\"token punctuation\">(</span>tableName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>EntityManager를 이용하여 모든 테이블의 이름을 가져온다.</p>\n<h4>테이블 초기화하기 &#x26; 실행하기</h4>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@Component</span>\n<span class=\"token annotation punctuation\">@Profile</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"test\"</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">DatabaseCleaner</span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\">InitializingBean</span> <span class=\"token punctuation\">{</span>\n\n\t<span class=\"token comment\">// 테이블 이름들을 저장할 List</span>\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">final</span> <span class=\"token class-name\">List</span><span class=\"token generics\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">></span></span> tables <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">ArrayList</span><span class=\"token generics\"><span class=\"token punctuation\">&lt;</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n\t<span class=\"token comment\">// 엔티티 매니저를 선언한다</span>\n    <span class=\"token annotation punctuation\">@PersistenceContext</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">EntityManager</span> entityManager<span class=\"token punctuation\">;</span>\n\n\t<span class=\"token comment\">// 테이블 이름을 조회한다</span>\n    <span class=\"token annotation punctuation\">@SuppressWarnings</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"unchecked\"</span><span class=\"token punctuation\">)</span>\n    <span class=\"token annotation punctuation\">@PostConstruct</span>\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">void</span> <span class=\"token function\">findDatabaseTableNames</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span>\n    <span class=\"token punctuation\">}</span>\n    \n    <span class=\"token comment\">// 테이블을 초기화한다</span>\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">void</span> <span class=\"token function\">truncate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SET FOREIGN_KEY_CHECKS %d\"</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span> tableName <span class=\"token operator\">:</span> tableNames<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"TRUNCATE TABLE %s\"</span><span class=\"token punctuation\">,</span> tableName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SET FOREIGN_KEY_CHECKS %d\"</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token annotation punctuation\">@Override</span>\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">void</span> <span class=\"token function\">afterPropertiesSet</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">throws</span> <span class=\"token class-name\">Exception</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token function\">findDatabaseTableNames</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token annotation punctuation\">@Transactional</span>\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">void</span> <span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token function\">truncate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>truncate를 수행하여 모든 테이블의 데이터를 초기화하고 실행한다.</p>\n<p>결과적으로 봤을 때 다음과 같은 흐름으로 데이터베이스 초기화가 수행된다.</p>\n<ul>\n<li>Bean이 생성된 이후 Table 이름을 찾는다.</li>\n<li>영속성 컨텍스트의 1차 캐시를 비우고 테이블을 초기화한다.</li>\n</ul>\n<h4>테스트코드에 적용하기</h4>\n<p>인수테스트를 <code class=\"language-text\">AcceptanceTest</code>로 분리하고 상속받는 구조로 변경했다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@SpringBootTest</span><span class=\"token punctuation\">(</span>webEnvironment <span class=\"token operator\">=</span> <span class=\"token class-name\">SpringBootTest<span class=\"token punctuation\">.</span>WebEnvironment</span><span class=\"token punctuation\">.</span><span class=\"token constant\">RANDOM_PORT</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">AcceptanceTest</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token annotation punctuation\">@LocalServerPort</span>\n    <span class=\"token keyword\">int</span> port<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@Autowired</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">DatabaseCleaner</span> databaseCleaner<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@BeforeEach</span>\n    <span class=\"token keyword\">void</span> <span class=\"token function\">setUp</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">RestAssured</span><span class=\"token punctuation\">.</span>port <span class=\"token operator\">=</span> port<span class=\"token punctuation\">;</span>\n        databaseCleaner<span class=\"token punctuation\">.</span><span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>작업한 내용을 적용하면 위와 같이 코드를 작성할 수 있다.</p>\n<h4>장점</h4>\n<ul>\n<li>테스트 코드가 쿼리에 의존적이지 않다.</li>\n<li>설정을 분리하여 관리할 수 있다.</li>\n</ul>\n<h4>단점</h4>\n<ul>\n<li>JPA에 종속적인 설정이기 때문에 JPA를 사용하지 않거나 ORM을 제외하는 상황을 고려한다면 해당 방식의 도입을 생각해볼 필요가 있다.</li>\n<li>AcceptenceTest 이외에 다른 통합테스트에서 사용하려면 중복된 코드를 작성해야한다.</li>\n<li>\n<p>Bean 생성 주기에 대한 설정이기 때문에 해당 클래스를 프로덕션에 남용할 수 있는 가능성이 존재한다.</p>\n<ul>\n<li>테스트 코드지만 프로덕션에도 적용될 수 있는 설정이 그닥 마음에 들진 않는다.</li>\n</ul>\n</li>\n</ul>\n<h3>4️⃣ JUnit5 Extension 사용하기</h3>\n<p>현재 코드는 AcceptenceTest를 사용하는 코드에 대해서만 DB 초기화를 진행하고있다.</p>\n<p>RestAssured가 별도의 스레드에서 동작하기 때문에 위와같이 구성했지만 별도의 통합 테스트에서도 DB 초기화 설정이 필요할 수 있다.</p>\n<p>@BeforeEach 내부에 clear를 선언하지 않고도 간단한 설정만으로 DB 초기화 로직을 적용하도록 개선해보자.</p>\n<p>이를 위해 JUnit5의 Extension을 사용하여 해당 설정을 리팩터링해볼 것이다.</p>\n<h4>JUnit5 Extension이란?</h4>\n<p>Junit5에서 제공하는 테스트의 생명주기에 대해 각각의 환경에 대해 확장할 수 있도록 제공하는 인터페이스다.</p>\n<p>다음과 같은 생성주기에 대한 확장을 제공한다.</p>\n<ul>\n<li>BeforeAllCallback - @BeforeAll 실행 전에 실행된다.</li>\n<li>BeforeEachCallback - @BeforeEach 실행 전에 실행된다.</li>\n<li>BeforeTestExecutionCallback - 각 테스트가 실행되기 직전에 실행된다.</li>\n<li>AfterTestExecutionCallback : 각 테스트가 종료된 후 실행된다.</li>\n<li>AfterEachCallback : @AfterEach 실행 이후에 실행된다.</li>\n<li>AfterAllCallback : @AfterAll 실행 이후에 실행된다.</li>\n</ul>\n<blockquote>\n<p>Referenced By <a href=\"https://ttl-blog.tistory.com/1407\">https://ttl-blog.tistory.com/1407</a></p>\n</blockquote>\n<h4>BeforeEachCallback 이용하기</h4>\n<p>현재 <code class=\"language-text\">@BeforeEach</code>에서 DatabaseCleaner가 수행되고 있으므로 <code class=\"language-text\">@BeforeEach</code> 이전에 실행될 수 있도록 <code class=\"language-text\">BeforeEachCallback</code>을 이용해보자.</p>\n<p>Extension을 이용하기 위해 기존에 DatabaseCleaner에 붙어있던 <code class=\"language-text\">implements InitializingBean</code>은 제거해줬다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@Component</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">DatabaseCleaner</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">final</span> <span class=\"token class-name\">List</span><span class=\"token generics\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">></span></span> tableNames <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">ArrayList</span><span class=\"token generics\"><span class=\"token punctuation\">&lt;</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@PersistenceContext</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">EntityManager</span> entityManager<span class=\"token punctuation\">;</span>\n\n\t<span class=\"token comment\">// 바뀐부분 : 의존성 주입이후 초기화 수행 시 Table을 조회한다.</span>\n    <span class=\"token annotation punctuation\">@PostConstruct</span>\n    <span class=\"token annotation punctuation\">@SuppressWarnings</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"unchecked\"</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">void</span> <span class=\"token function\">findDatabaseTableNames</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">List</span><span class=\"token operator\">&lt;</span><span class=\"token class-name\">Object</span><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token operator\">></span> tableInfos <span class=\"token operator\">=</span> entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SHOW TABLES\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">getResultList</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">Object</span><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span> tableInfo <span class=\"token operator\">:</span> tableInfos<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token class-name\">String</span> tableName <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">)</span> tableInfo<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n            tableNames<span class=\"token punctuation\">.</span><span class=\"token function\">add</span><span class=\"token punctuation\">(</span>tableName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">void</span> <span class=\"token function\">truncate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SET FOREIGN_KEY_CHECKS %d\"</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span> tableName <span class=\"token operator\">:</span> tableNames<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"TRUNCATE TABLE %s\"</span><span class=\"token punctuation\">,</span> tableName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SET FOREIGN_KEY_CHECKS %d\"</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token annotation punctuation\">@Transactional</span>\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">void</span> <span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token function\">truncate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>이후 <code class=\"language-text\">DatabaseClearExtension</code> 클래스를 다음과 같이 생성해준다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">DatabaseClearExtension</span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\">BeforeEachCallback</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token annotation punctuation\">@Override</span>\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">void</span> <span class=\"token function\">beforeEach</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">ExtensionContext</span> context<span class=\"token punctuation\">)</span> <span class=\"token keyword\">throws</span> <span class=\"token class-name\">Exception</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">DatabaseCleaner</span> databaseCleaner <span class=\"token operator\">=</span> <span class=\"token function\">getDataCleaner</span><span class=\"token punctuation\">(</span>context<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        databaseCleaner<span class=\"token punctuation\">.</span><span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">DatabaseCleaner</span> <span class=\"token function\">getDataCleaner</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">ExtensionContext</span> extensionContext<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token class-name\">SpringExtension</span><span class=\"token punctuation\">.</span><span class=\"token function\">getApplicationContext</span><span class=\"token punctuation\">(</span>extensionContext<span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">.</span><span class=\"token function\">getBean</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">DatabaseCleaner</span><span class=\"token punctuation\">.</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h4>간결해진 테스트코드</h4>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@ExtendWith</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">DatabaseClearExtension</span><span class=\"token punctuation\">.</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">)</span>\n<span class=\"token annotation punctuation\">@SpringBootTest</span><span class=\"token punctuation\">(</span>webEnvironment <span class=\"token operator\">=</span> <span class=\"token class-name\">SpringBootTest<span class=\"token punctuation\">.</span>WebEnvironment</span><span class=\"token punctuation\">.</span><span class=\"token constant\">RANDOM_PORT</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">AcceptanceTest</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token annotation punctuation\">@LocalServerPort</span>\n    <span class=\"token keyword\">int</span> port<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@BeforeEach</span>\n    <span class=\"token keyword\">void</span> <span class=\"token function\">setUp</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">RestAssured</span><span class=\"token punctuation\">.</span>port <span class=\"token operator\">=</span> port<span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>이제 <code class=\"language-text\">@ExtendWith(DatabaseClearExtension.class)</code> 어노테이션만 붙여주면 테스트별로 DB를 초기화할 수 있다.</p>\n<p>각 테스트별로 truncate 문도 잘 수행되는 것을 확인할 수 있다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/88196dd40428e63ada6cbdf9a9d9b518/0ea77/086045e1.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 130.58823529411765%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAACXBIWXMAAAsTAAALEwEAmpwYAAACfklEQVR42qWVx5LiYAyE/RhDMjmazJBzThOOe5j3fw6tPpXNQC0srpmDSr8NbkvdLdlZbjayP59ls9/L/nSSQrEoqVRK0un0j8IplUpSqVSk7Ec2m/0xmAHGYjFJxOOSTCbFdV1J/6I6AxyMx9JoNiUJ2C+ALoDdXk88z7MKuUEm4PEmwgJGIxEDOH9+yun9XQ5vb3JQkSazmZw+PuSo9+bLpZTL5VBiORWtzqtWpdVuS7PVMmGKqnShUJBiqXg5I1Ymk7GHgnwXcKZv3+x2MppMrCqqiKtQsWjUsp2DaxUP4RDRTSTuA7q+GLPFQpbrtUzmc2m/vtq5NxhIfziUqd5b60sX3Ov37b/8FvB+A0j5VAXIYDSyDA0AQQHR0XtDdQNg9UZDevob+R6nzny1ku3xKGNtl0qsZW0p8vJimZYRjmsXv9Kytus+sJmTy+WU/JK1MNQKTRhVtNXpiFerSU0DwQh7SDuiq8wjURI+0XBGpfD0qt5krsfTqQVnZj2UD0f6ACR3lZ+AaFqNqqq0FrTMdShAyIV0CEcIFkU+nzf/Bbnk3wu3HHy/rbZba22tGfCzTgkW2ikNf76+zAFQ8z9TGyDkYxWCtvM6FfyQ04qyKhgTkvPzMzADxF9Yh8y08ND1NHAmm1UeTMe/LevDCwVlBNngbCAWBDZCMF623m1tSTxbEA6kE51u11SuqUj4sqF+rKoHmRoy4nF+WiFv3RwO1jZehC+m4RL+fgzOTwHhLCD85ntyLUAIMb4nRYkO8+bQgIiAsdl5qaA9Qsm//hyEBmQRsJFr9fpFBDY4wnjBWUXLhGzbCdyPTeyDrwKxCPDkTidnq9fYh9ELU+lfMu735eWYN0YAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='086045e1' title='' src='/static/88196dd40428e63ada6cbdf9a9d9b518/ca1dc/086045e1.png' srcset='/static/88196dd40428e63ada6cbdf9a9d9b518/e7570/086045e1.png 170w,\n/static/88196dd40428e63ada6cbdf9a9d9b518/f46e7/086045e1.png 340w,\n/static/88196dd40428e63ada6cbdf9a9d9b518/ca1dc/086045e1.png 680w,\n/static/88196dd40428e63ada6cbdf9a9d9b518/0ea77/086045e1.png 682w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h2>🚀 정리</h2>\n<p>다양한 방법을 시도해보면서 결론적으로 BeforeEachCallback을 사용하는 방식까지 적용해봤다.\n깔끔하게 정리된 테스트를 보니 기분이 좋다. 👍</p>\n<h3>최종 코드</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 648px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/734e673304a268069acc4801e92b549c/244f0/21f5d279.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 129.99999999999997%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAACXBIWXMAAAsTAAALEwEAmpwYAAADXUlEQVR42p1V2XbaSBTkMxIQ6kVra2eVhFgtGbBPMjPJ5NgnXuZp/v8Xam6LwYfE2HH8UOd2Q3dRfZeik6cB0osSxV+fcHdzi2o+RxRFSNMUSZK8Gfp8GIboRMqDN8mQrZfY1ZfIsgye50Ep9dvQ9zpcCAjOMHHHmCVzBJGC67pgjIFz/gOEPvsLdI4Lx3GQxAO4ftCuLctqo23b7VpHKeXbCaXgCJIp4iHlMFBtPo750TnVUZP+SmnndMPp6X6QQqUFLMqH7flwfAXb98EtG6aQMOUJ6I4Gf4lQP0kTjqMMlW+jChWqwMdM+RgKhqTfQ2IaT0i52X7u0uv4WYWkwOp38UcSYv/lGy5nIzTlBHUxwm5RYL8osZvn2C9nuF5VKEMfV6yLuTTRo7vyOaGARSq3dLCZ5mgShToJ0KQH1LFCk4VP67krccW7yInQeE4oYZt9iOUF4tsHVJaJUheD8qq6XQS9HgKjB0Ux7BuIWJ++MxEJ/kpRCDYduCSF65wUDlyCh4vUeUKduag8gcKi3iU00sCEFPbPPlkeVH6NQ3y5/hN3qwD3dYr7TYzvqwPuNgkal6HqfkBp9vC3+IiF6L+UQyoKM3FDCm/rGg+Fi4dS4S73KPptvC+8Nj7S/tvExaPdxVIYLxNKZmBN7TLbbKnKCvtViqtNimYWUaUTbKsY23mMK/p8XUa4cExMSeGzouiNKTlWToZ/VYHS4yipqSsVYEDTEVExYsM4gNbH/YD60Dlp7h8UMipI7CoUyQhSTwqZhE1R0Cwzyq/O8TEe169OCqf8DaczXH7+ijgKMRgMoGjsBCmU/7/iHF6ZZUmOY6MsfPI2Hz6RaUN4i22dJWRMYjxysG0iMswQQRC086298V2E3BRI8wCL6zF872BhGtpw30fIBEKahHKdkMKgVait/Z2EuqkN8GkDtv0HCf3XRFQY33Pph9ibCvJModAX0wzWbAGu3dn1wBwXBuXRkFbbvD+DvVoUk2aU/O7x5jN2NH57sq6NZyM3yaKMjygozmgqjqgI6sRcxc+TYpDCHY3dcrHCiAxiOswI5OBphDIfY5xEiMmyYpqOkDAWJjbkNuwsoX4WOc2Omnm7+4TFOEVNzlzPCywnA9Tk1otRhiHvYyS09ZNfksIl4ZTwP0Yo+/6QNT1iAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='21f5d279' title='' src='/static/734e673304a268069acc4801e92b549c/244f0/21f5d279.png' srcset='/static/734e673304a268069acc4801e92b549c/e7570/21f5d279.png 170w,\n/static/734e673304a268069acc4801e92b549c/f46e7/21f5d279.png 340w,\n/static/734e673304a268069acc4801e92b549c/244f0/21f5d279.png 648w' sizes='(max-width: 648px) 100vw, 648px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>패키지 구조는 위와 같이 구성되었고 각각의 코드는 다음과 같다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token comment\">// DatabaseCleaner.java</span>\n<span class=\"token annotation punctuation\">@Component</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">DatabaseCleaner</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">final</span> <span class=\"token class-name\">List</span><span class=\"token generics\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">></span></span> tableNames <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">ArrayList</span><span class=\"token generics\"><span class=\"token punctuation\">&lt;</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@PersistenceContext</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">EntityManager</span> entityManager<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@SuppressWarnings</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"unchecked\"</span><span class=\"token punctuation\">)</span>\n    <span class=\"token annotation punctuation\">@PostConstruct</span>\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">void</span> <span class=\"token function\">findDatabaseTableNames</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">List</span><span class=\"token operator\">&lt;</span><span class=\"token class-name\">Object</span><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token operator\">></span> tableInfos <span class=\"token operator\">=</span> entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SHOW TABLES\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">getResultList</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">Object</span><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span> tableInfo <span class=\"token operator\">:</span> tableInfos<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token class-name\">String</span> tableName <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">)</span> tableInfo<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n            tableNames<span class=\"token punctuation\">.</span><span class=\"token function\">add</span><span class=\"token punctuation\">(</span>tableName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">void</span> <span class=\"token function\">truncate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SET FOREIGN_KEY_CHECKS %d\"</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span> tableName <span class=\"token operator\">:</span> tableNames<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"TRUNCATE TABLE %s\"</span><span class=\"token punctuation\">,</span> tableName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">createNativeQuery</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">String</span><span class=\"token punctuation\">.</span><span class=\"token function\">format</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"SET FOREIGN_KEY_CHECKS %d\"</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">executeUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token annotation punctuation\">@Transactional</span>\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">void</span> <span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        entityManager<span class=\"token punctuation\">.</span><span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token function\">truncate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">// DatabaseClearExtension.java</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">DatabaseClearExtension</span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\">BeforeEachCallback</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token annotation punctuation\">@Override</span>\n    <span class=\"token keyword\">public</span> <span class=\"token keyword\">void</span> <span class=\"token function\">beforeEach</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">ExtensionContext</span> context<span class=\"token punctuation\">)</span> <span class=\"token keyword\">throws</span> <span class=\"token class-name\">Exception</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">DatabaseCleaner</span> databaseCleaner <span class=\"token operator\">=</span> <span class=\"token function\">getDataCleaner</span><span class=\"token punctuation\">(</span>context<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        databaseCleaner<span class=\"token punctuation\">.</span><span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">DatabaseCleaner</span> <span class=\"token function\">getDataCleaner</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">ExtensionContext</span> extensionContext<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token class-name\">SpringExtension</span><span class=\"token punctuation\">.</span><span class=\"token function\">getApplicationContext</span><span class=\"token punctuation\">(</span>extensionContext<span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">.</span><span class=\"token function\">getBean</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">DatabaseCleaner</span><span class=\"token punctuation\">.</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">// AcceptanceTest.java</span>\n<span class=\"token annotation punctuation\">@ExtendWith</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">DatabaseClearExtension</span><span class=\"token punctuation\">.</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">)</span>\n<span class=\"token annotation punctuation\">@SpringBootTest</span><span class=\"token punctuation\">(</span>webEnvironment <span class=\"token operator\">=</span> <span class=\"token class-name\">SpringBootTest<span class=\"token punctuation\">.</span>WebEnvironment</span><span class=\"token punctuation\">.</span><span class=\"token constant\">RANDOM_PORT</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">AcceptanceTest</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token annotation punctuation\">@LocalServerPort</span>\n    <span class=\"token keyword\">int</span> port<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@BeforeEach</span>\n    <span class=\"token keyword\">void</span> <span class=\"token function\">setUp</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">RestAssured</span><span class=\"token punctuation\">.</span>port <span class=\"token operator\">=</span> port<span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n\n<span class=\"token comment\">// DictionaryPlantApiTest.java</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">DictionaryPlantApiTest</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">AcceptanceTest</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span><span class=\"token punctuation\">.</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h2>Reference</h2>\n<p><a href=\"https://ttl-blog.tistory.com/1407\">https://ttl-blog.tistory.com/1407</a>\n<a href=\"https://mangkyu.tistory.com/264\">https://mangkyu.tistory.com/264</a>\n<a href=\"https://stackoverflow.com/questions/41763417/api-test-transactional-rollback\">https://stackoverflow.com/questions/41763417/api-test-transactional-rollback</a>\n<a href=\"https://stackoverflow.com/questions/62142428/dirtiescontext-does-not-work-with-nested-tests\">https://stackoverflow.com/questions/62142428/dirtiescontext-does-not-work-with-nested-tests</a>\n<a href=\"https://unluckyjung.github.io/testcode/2021/05/08/Independent-Test-Mehod/\">https://unluckyjung.github.io/testcode/2021/05/08/Independent-Test-Mehod/</a>\n<a href=\"https://www.baeldung.com/junit-5-extensions\">https://www.baeldung.com/junit-5-extensions</a></p>","frontmatter":{"title":"인수테스트 데이터 초기화하기","date":"August 03, 2023","update":"August 03, 2023","tags":["인수테스트","RestDocs","테스트"],"series":null},"fields":{"slug":"/acceptance-test-resolve/","readingTime":{"minutes":13.81}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}},"next":{"fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},"pageContext":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","series":null,"previousPostId":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","nextPostId":"15def1d5-c20f-5d07-b46e-24a14661365f"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/apply-https/page-data.json b/page-data/apply-https/page-data.json
index 9b2ed0b7..f3502a1a 100644
--- a/page-data/apply-https/page-data.json
+++ b/page-data/apply-https/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/apply-https/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 현재 피움팀 서버는  요청으로 이뤄져있다.\n는 WWW 상에서 정보를 주고 받는 프로토콜인데, 누군가 네트워크에서 신호를 가로채면 내용이 노출되는 문제가 발생할 수 있다.\n이를 해결해주는 프로토콜이 바로 이다. 는 정보를 암호화하는 SSL을 이용한 프로토콜이다. …","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>', '<a href=\"https://github.com/kim0914\">그레이</a>', '<a href=\"https://github.com/yeonkkk\">조이</a>', '<a href=\"https://github.com/rawfishthelgh\">하마드</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p>현재 피움팀 서버는 <code class=\"language-text\">HTTP</code> 요청으로 이뤄져있다.\n<code class=\"language-text\">HTTP</code>는 WWW 상에서 정보를 주고 받는 프로토콜인데, 누군가 네트워크에서 신호를 가로채면 내용이 노출되는 문제가 발생할 수 있다.\n이를 해결해주는 프로토콜이 바로 <code class=\"language-text\">HTTPS</code>이다.</p>\n<p><code class=\"language-text\">HTTPS</code>는 정보를 암호화하는 SSL을 이용한 프로토콜이다.\n현재는 TLS 방식도 사용되는데 여기에서 <strong>핵심은 보안 문제를 해결하기 위해 암호화</strong>를 한다는 것이다.</p>\n<p>대칭키와 공개키, 인증서와 같은 방식을 사용해 HTTPS를 적용할 수 있다.\n이번 글에서는 <code class=\"language-text\">Certbots</code>을 이용해 <code class=\"language-text\">HTTPS</code>를 nginx에 쉽게 설치하고 적용하는 방법을 다뤄본다.</p>\n<p>HTTP, HTTPS에 대한 자세한 내용은 별도의 글에서 다룰 예정이다.</p>\n<p><code class=\"language-text\">Let's Encrypt</code>에서는 인증서를 무료로 발급해주고 있고 <code class=\"language-text\">Certbots</code>과 함께 사용하기를 권장하기 때문에 <code class=\"language-text\">Certbots</code>을 사용하기로 결정했다.  </p>\n<p>이 내용은 아래 이미지에서 확인할 수 있다.<br>\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/e76ad44ef122ab192a87e716b6101b6b/d880f/img.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 81.76470588235294%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAADtklEQVR42lWU3WscZRSH9y8QjFH0QiUXloKK1qLeCuKdVbwQL2KwYhKrVUlLkjZZUmpSTdFoaUrxQrAoCl6IIApJmlRESZruZpNm89Xs90f2c3ZnP2d2Z2d3H89MatSBh9857zvzzu+c951xrKx62Q6l8SUqbIRUNsJF8uU61lVqtFFqbXSzTdmAiuQWmgl6E9R6m0arTUHmYnmNklbDoc2cpPrrCbTfToj2k/2pD+WXASqzg8IQ2vwIpbkRirOjNoVZJ4WZEapzZ2ksDNO4cUb0DMb8kMTDOAZef5HR46/iFM73HuNC/8uiL/Fp/wtcfOcok91dTL/9MNfefYifP+zk+uC9/HW2E9fYg2yN38+diQ52L3SwPd7B6tg9OHqHv+LM5HcMffItzs++59zn15i8/A1TV77m44nz9Lz2HEM9R/jyvcP8MNjFzFgXyxcP4730BDtXnmH36rPsXH0e19QRbowfwnHsjdN09zp5s+8cb/U76T85ygcfDTF4+hSn3u/h+CtP4uw+xKW+R/hx4AEWnPfhmuhkZ+pRAtNPcWf6KDuXn2bzi8dxTz6GY/HWBkuuLW66t7nl2cIteNa8rN++zabXw+6Wh9COm7jPRSqwjBpepBxdQttzCx60+Ap63EUtsUIl5sZRNVoUa01aLdm2dpt2q2XTsmnbNCVuiprNFqaoIWo0Rc0WDZv9uC3PO5LJFMFgiFA4TCQSteNwxIojBAIBwqEQkfD+fDgWJ7a3Z+eRUEAIEotGhDDJxB5mw8ChKArpdJpUKmWTSCQO8mQyaWvaQsmzly2SUgokU2ni6TzJrIplKC7PWOtYVTn25I0hcREVRxFxEY1G8fv94jRISAjKWEDm/T4fwYCfgN9HVJymyiapokE6VySpaqQzCrqu4SiUSuSLRRu1XKZQqaDV6zSaTYxGAyMWw5C5uuR106QuY6aoNPw/7F+2w9zaGtnNTdJeL4poZn2dorjRxFVN3NdWPeguD9V4Ak3c1eJxNF2nWq3+D13G7AXj8/ME5uYIXxednSUkeVByK7bGAwvz+P9cxv/7osR/EF66SVBe5vPt2q2y2hKWtlj9bkoVjpyUk8gq0mxFmpwlk8/LR66hGwa6lGerHAm9JT8EqU4zTHFTo6rpd9Fsx3Wjse8wI7sWT+VISnkJKcdG4n/ylOxgTI5RIh4jEYvYO5zIlclVGxTll/MvpjiUBVVVRRFn2btkMpkDrKOg5nNk1QrZUh2lVCNXKMv9GdSCSlGzKjCt3Tj4GP4GrQFJxnyZlVMAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img.png' title='' src='/static/e76ad44ef122ab192a87e716b6101b6b/ca1dc/img.png' srcset='/static/e76ad44ef122ab192a87e716b6101b6b/e7570/img.png 170w,\n/static/e76ad44ef122ab192a87e716b6101b6b/f46e7/img.png 340w,\n/static/e76ad44ef122ab192a87e716b6101b6b/ca1dc/img.png 680w,\n/static/e76ad44ef122ab192a87e716b6101b6b/d880f/img.png 975w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img.png</figcaption>\n  </figure></p>\n<h2>Certbot 설치</h2>\n<p>서버에 HTTPS 설정을 해보자\n<a href=\"https://certbot.eff.org/\">Certbot 공식문서</a></p>\n<blockquote>\n<p>공식문서의 가이드를 따라 작성된 문서입니다.\n<a href=\"https://certbot.eff.org/instructions\">https://certbot.eff.org/instructions</a></p>\n</blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/095db82dc87fa8bc0f5efc7ef9267aa7/89066/a8ec6c59.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 52.352941176470594%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABEElEQVR42qVS226DMAzN/3/aptFJ7AHEy4SgXAWFQjJuObO9puqqDk2bpUPsxBxfFUiiFw9vT8/Y3mPAWlj8XRQTdKcT0jTFOgwwxqDrOrq2aNsWdV1jnmdorVFVldgD+fFdfz4Dy4KNbE6C/1H8aZrmy/lyMsqyFAdcHJ1+az+CYgeOmmWZkOR5LmB7XVds2yaQDBys3Sn5t0KkVzibie/Ir4TcE9/3EUURgiCA53mih2GI18MBS99jpp4u1O/8eJRTU2V2GHE7xW8ZLtRgLpPBOmNmUDC4PhL43SVRFIW0yN0p/FPuB7ZL2FOZcRzL1JMkkUHx+uzuoTYfP0bmksZxlN3k3WNM0yRTfyST0fgEeUoOSi4fwRYAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='a8ec6c59' title='' src='/static/095db82dc87fa8bc0f5efc7ef9267aa7/ca1dc/a8ec6c59.png' srcset='/static/095db82dc87fa8bc0f5efc7ef9267aa7/e7570/a8ec6c59.png 170w,\n/static/095db82dc87fa8bc0f5efc7ef9267aa7/f46e7/a8ec6c59.png 340w,\n/static/095db82dc87fa8bc0f5efc7ef9267aa7/ca1dc/a8ec6c59.png 680w,\n/static/095db82dc87fa8bc0f5efc7ef9267aa7/02d09/a8ec6c59.png 1020w,\n/static/095db82dc87fa8bc0f5efc7ef9267aa7/9d567/a8ec6c59.png 1360w,\n/static/095db82dc87fa8bc0f5efc7ef9267aa7/89066/a8ec6c59.png 1440w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># certbot을 설치하기 위한 snap을 설치한다.</span>\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> update\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> <span class=\"token function\">install</span> snapd\n\n<span class=\"token comment\"># 이미 설치되어있는 certbot을 제거한다.</span>\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> remove certbot\n\n<span class=\"token comment\"># certbot을 설치한다.</span>\n<span class=\"token function\">sudo</span> snap <span class=\"token function\">install</span> <span class=\"token parameter variable\">--classic</span> certbot\n\n<span class=\"token comment\"># certbot이 잘 설치되어있는지 확인한다.</span>\n<span class=\"token function\">sudo</span> <span class=\"token function\">ln</span> <span class=\"token parameter variable\">-s</span> /snap/bin/certbot /usr/bin/certbot\n\n<span class=\"token comment\"># certbot을 nginx에 연결하기</span>\n<span class=\"token function\">sudo</span> certbot <span class=\"token parameter variable\">--nginx</span></code></pre></div>\n<h2>HTTPS 설정</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/77f1fa1c84d64bf273fbf2a93927177e/96d37/5498d43a.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 100.58823529411765%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC0ElEQVR42n2USU9iURCFAQcmAQH1wXvAY2hGjUE3uNCk08SN8QdJHBLtTkd0gy7an3v6flcuot26qFTd4Z06darui2SDrFJ+TolkRpkMllWtVrNWLpdVr9dVKBSUzWa1urqqSCTytZW9sqq+Aai+glQqFfm+r1KpZNfEnucpl8splUopmUxacJKzTqfTisVib4BeyVOv37NM8vm8vYxtbGxYZu4jANMmTs0BMfY5X1lZeQPc2tpSo9GwzDj8WEI0Gn3zxqLRmI2XDYbuXgSdKKlarVpQ53d2dmzZMCMmcaWYVzGXVTyRsCVT/j8ackB5lOB0AvDm5kZPT0+6u7vT7e2tpg8P+vP7p35dX+ry6kpXxiaTiS4uLvRgzg4PD+caGnaUDFMaAMNms6nxeKyzszOdn5/r9PTUxt9/jDU6OtLJ8bGOjO/3+xoMBjo4OLD6W0BYUVqxWLSlAUp5NATmyxotdPrKtre3FQSBBd3c3Fx0Dg/g62xm7BqPNNyDEd0lGX6RLG+YwCwHmAEggZtD9l0yJCFGIoA/HfLQXBp02qr5ptvFgiZG5JlpxuPjo+7v7zWbzfT8/KzpdKqXlxe7DzjM3g20s2Et0Mm3UKOar1EYqBH4Ks9fBwxhjKYYe6zfzeZHwJL5uN5syTNZy0FFnimvasaGZ4dWNIeG0Tw8wIBStgN9BxyGNbXMmHQ7HfkGFFaMEePQbretfv4HxsT/e1XWKnM2YRha0QFptVp2HgFjz70mup4wr4QXgtF5qoB1PB5/BQSsY9jxIUAcutHAL/8w3HziYYuRhI4vyu71evbZ7O7uajQa2VJ5Aaw529/fV7fbtUn39vbsmjvD4dDe5x5M19fXtba2poij7n5ZbniXY/Syv6/5PfZZUwWeNbHVlQDR0Qk9Ed0NMqWhJTHGGR/B5tOxQRNK5IeAjmRjD+3ITqk0DE/DSAD75Se3PDp/AXri/vc4VVIbAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='5498d43a' title='' src='/static/77f1fa1c84d64bf273fbf2a93927177e/ca1dc/5498d43a.png' srcset='/static/77f1fa1c84d64bf273fbf2a93927177e/e7570/5498d43a.png 170w,\n/static/77f1fa1c84d64bf273fbf2a93927177e/f46e7/5498d43a.png 340w,\n/static/77f1fa1c84d64bf273fbf2a93927177e/ca1dc/5498d43a.png 680w,\n/static/77f1fa1c84d64bf273fbf2a93927177e/96d37/5498d43a.png 823w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># certbot이 SSL 인증서를 자동 갱신하는 cron을 등록한다</span>\n<span class=\"token function\">sudo</span> certbot renew --dry-run</code></pre></div>\n<h2>NGINX 설정 확인</h2>\n<p>NGINX 설정에 다음과 같이 certbot이 HTTPS 설정을 추가한 것을 확인할 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/5a394047db5167b37d0a036395d75c95/baa93/3d08df23.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 70%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAACLklEQVR42pWUWZLaMBRF2UzjeR5kWx4AGzOY7qahSFWygux/AzdXMqT4oSv5OH6SLd03lhehE8P1C5heAcsTXJfw/AqOy3dWBouY/8HCMDM4gYCXFfDzGmnaIYlb+BRdmine+F1Zg4eNfxFUD8dOEdgR4rBEKAZE1YiINmbEMqgQBRK2nZFcY5GHg2dH1kPQsPIZM0Fc79H/+o12vOCUSJzzFlNG0gZX0aGPazSRRB1WaBTBbNU+YbkWj1AtRrBcxvCCEvVwQsEoC9a14AXBg6W6yG+ZI+AzwsgVCBXcR8QjSuNJMEfWHpF0E4SboWWjhBLkJanWtBFFu/UJLu3bU12XT2n/FTSV12KrU06SDmXcIIsIGyS4zplmRAeqaaqOhpG+boqOkCGnKrr+DHG4oRk+MOwvaPZXlPsbxPAFN2xg+xIenbhs1PeCKkLZU3QHuTqhKkZU+RZdMSBlI5SYG9RazI87zmv1WtC2hU5ZHfKZZhAoeNmpEHhSj4NhJJyCdLbENF+knFcbOFJCMIKKIkU8oBQTivyIPN0h8BssH2Jkebczs7CyhjU7WDhhjXx8h9y8c1wu6McrjscfOLCO6+0Vbf+B1XrCanPChmeG7Se61QRZnNDJLzreo6RzS2WpBTkC6TihGs+6CePhQrELtqTn/jDdZpH6E7v+J1radXtBGLTwPNbWrTSqB1rQ5k9AdVij6klr6yGdreMKfdiyuCemqWqVM/VEY9wx7yn/AaQ4wb13oUFBAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='3d08df23' title='' src='/static/5a394047db5167b37d0a036395d75c95/ca1dc/3d08df23.png' srcset='/static/5a394047db5167b37d0a036395d75c95/e7570/3d08df23.png 170w,\n/static/5a394047db5167b37d0a036395d75c95/f46e7/3d08df23.png 340w,\n/static/5a394047db5167b37d0a036395d75c95/ca1dc/3d08df23.png 680w,\n/static/5a394047db5167b37d0a036395d75c95/02d09/3d08df23.png 1020w,\n/static/5a394047db5167b37d0a036395d75c95/baa93/3d08df23.png 1236w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h2>Reference</h2>\n<p><a href=\"https://certbot.eff.org/instructions\">https://certbot.eff.org/instructions</a></p>","frontmatter":{"title":"내 서버에 HTTPS 설정하기","date":"July 28, 2023","update":"July 28, 2023","tags":["HTTPS"],"series":null},"fields":{"slug":"/apply-https/","readingTime":{"minutes":2.635}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}},"next":{"fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},"pageContext":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","series":null,"previousPostId":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","nextPostId":"cecbc8b9-db00-562b-aa0b-06c406cfc44a"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/apply-https/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 현재 피움팀 서버는  요청으로 이뤄져있다.\n는 WWW 상에서 정보를 주고 받는 프로토콜인데, 누군가 네트워크에서 신호를 가로채면 내용이 노출되는 문제가 발생할 수 있다.\n이를 해결해주는 프로토콜이 바로 이다. 는 정보를 암호화하는 SSL을 이용한 프로토콜이다. …","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>', '<a href=\"https://github.com/kim0914\">그레이</a>', '<a href=\"https://github.com/yeonkkk\">조이</a>', '<a href=\"https://github.com/rawfishthelgh\">하마드</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p>현재 피움팀 서버는 <code class=\"language-text\">HTTP</code> 요청으로 이뤄져있다.\n<code class=\"language-text\">HTTP</code>는 WWW 상에서 정보를 주고 받는 프로토콜인데, 누군가 네트워크에서 신호를 가로채면 내용이 노출되는 문제가 발생할 수 있다.\n이를 해결해주는 프로토콜이 바로 <code class=\"language-text\">HTTPS</code>이다.</p>\n<p><code class=\"language-text\">HTTPS</code>는 정보를 암호화하는 SSL을 이용한 프로토콜이다.\n현재는 TLS 방식도 사용되는데 여기에서 <strong>핵심은 보안 문제를 해결하기 위해 암호화</strong>를 한다는 것이다.</p>\n<p>대칭키와 공개키, 인증서와 같은 방식을 사용해 HTTPS를 적용할 수 있다.\n이번 글에서는 <code class=\"language-text\">Certbots</code>을 이용해 <code class=\"language-text\">HTTPS</code>를 nginx에 쉽게 설치하고 적용하는 방법을 다뤄본다.</p>\n<p>HTTP, HTTPS에 대한 자세한 내용은 별도의 글에서 다룰 예정이다.</p>\n<p><code class=\"language-text\">Let's Encrypt</code>에서는 인증서를 무료로 발급해주고 있고 <code class=\"language-text\">Certbots</code>과 함께 사용하기를 권장하기 때문에 <code class=\"language-text\">Certbots</code>을 사용하기로 결정했다.  </p>\n<p>이 내용은 아래 이미지에서 확인할 수 있다.<br>\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/e76ad44ef122ab192a87e716b6101b6b/d880f/img.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 81.76470588235294%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAADtklEQVR42lWU3WscZRSH9y8QjFH0QiUXloKK1qLeCuKdVbwQL2KwYhKrVUlLkjZZUmpSTdFoaUrxQrAoCl6IIApJmlRESZruZpNm89Xs90f2c3ZnP2d2Z2d3H89MatSBh9857zvzzu+c951xrKx62Q6l8SUqbIRUNsJF8uU61lVqtFFqbXSzTdmAiuQWmgl6E9R6m0arTUHmYnmNklbDoc2cpPrrCbTfToj2k/2pD+WXASqzg8IQ2vwIpbkRirOjNoVZJ4WZEapzZ2ksDNO4cUb0DMb8kMTDOAZef5HR46/iFM73HuNC/8uiL/Fp/wtcfOcok91dTL/9MNfefYifP+zk+uC9/HW2E9fYg2yN38+diQ52L3SwPd7B6tg9OHqHv+LM5HcMffItzs++59zn15i8/A1TV77m44nz9Lz2HEM9R/jyvcP8MNjFzFgXyxcP4730BDtXnmH36rPsXH0e19QRbowfwnHsjdN09zp5s+8cb/U76T85ygcfDTF4+hSn3u/h+CtP4uw+xKW+R/hx4AEWnPfhmuhkZ+pRAtNPcWf6KDuXn2bzi8dxTz6GY/HWBkuuLW66t7nl2cIteNa8rN++zabXw+6Wh9COm7jPRSqwjBpepBxdQttzCx60+Ap63EUtsUIl5sZRNVoUa01aLdm2dpt2q2XTsmnbNCVuiprNFqaoIWo0Rc0WDZv9uC3PO5LJFMFgiFA4TCQSteNwxIojBAIBwqEQkfD+fDgWJ7a3Z+eRUEAIEotGhDDJxB5mw8ChKArpdJpUKmWTSCQO8mQyaWvaQsmzly2SUgokU2ni6TzJrIplKC7PWOtYVTn25I0hcREVRxFxEY1G8fv94jRISAjKWEDm/T4fwYCfgN9HVJymyiapokE6VySpaqQzCrqu4SiUSuSLRRu1XKZQqaDV6zSaTYxGAyMWw5C5uuR106QuY6aoNPw/7F+2w9zaGtnNTdJeL4poZn2dorjRxFVN3NdWPeguD9V4Ak3c1eJxNF2nWq3+D13G7AXj8/ME5uYIXxednSUkeVByK7bGAwvz+P9cxv/7osR/EF66SVBe5vPt2q2y2hKWtlj9bkoVjpyUk8gq0mxFmpwlk8/LR66hGwa6lGerHAm9JT8EqU4zTHFTo6rpd9Fsx3Wjse8wI7sWT+VISnkJKcdG4n/ylOxgTI5RIh4jEYvYO5zIlclVGxTll/MvpjiUBVVVRRFn2btkMpkDrKOg5nNk1QrZUh2lVCNXKMv9GdSCSlGzKjCt3Tj4GP4GrQFJxnyZlVMAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img.png' title='' src='/static/e76ad44ef122ab192a87e716b6101b6b/ca1dc/img.png' srcset='/static/e76ad44ef122ab192a87e716b6101b6b/e7570/img.png 170w,\n/static/e76ad44ef122ab192a87e716b6101b6b/f46e7/img.png 340w,\n/static/e76ad44ef122ab192a87e716b6101b6b/ca1dc/img.png 680w,\n/static/e76ad44ef122ab192a87e716b6101b6b/d880f/img.png 975w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img.png</figcaption>\n  </figure></p>\n<h2>Certbot 설치</h2>\n<p>서버에 HTTPS 설정을 해보자\n<a href=\"https://certbot.eff.org/\">Certbot 공식문서</a></p>\n<blockquote>\n<p>공식문서의 가이드를 따라 작성된 문서입니다.\n<a href=\"https://certbot.eff.org/instructions\">https://certbot.eff.org/instructions</a></p>\n</blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/095db82dc87fa8bc0f5efc7ef9267aa7/89066/a8ec6c59.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 52.352941176470594%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABEElEQVR42qVS226DMAzN/3/aptFJ7AHEy4SgXAWFQjJuObO9puqqDk2bpUPsxBxfFUiiFw9vT8/Y3mPAWlj8XRQTdKcT0jTFOgwwxqDrOrq2aNsWdV1jnmdorVFVldgD+fFdfz4Dy4KNbE6C/1H8aZrmy/lyMsqyFAdcHJ1+az+CYgeOmmWZkOR5LmB7XVds2yaQDBys3Sn5t0KkVzibie/Ir4TcE9/3EUURgiCA53mih2GI18MBS99jpp4u1O/8eJRTU2V2GHE7xW8ZLtRgLpPBOmNmUDC4PhL43SVRFIW0yN0p/FPuB7ZL2FOZcRzL1JMkkUHx+uzuoTYfP0bmksZxlN3k3WNM0yRTfyST0fgEeUoOSi4fwRYAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='a8ec6c59' title='' src='/static/095db82dc87fa8bc0f5efc7ef9267aa7/ca1dc/a8ec6c59.png' srcset='/static/095db82dc87fa8bc0f5efc7ef9267aa7/e7570/a8ec6c59.png 170w,\n/static/095db82dc87fa8bc0f5efc7ef9267aa7/f46e7/a8ec6c59.png 340w,\n/static/095db82dc87fa8bc0f5efc7ef9267aa7/ca1dc/a8ec6c59.png 680w,\n/static/095db82dc87fa8bc0f5efc7ef9267aa7/02d09/a8ec6c59.png 1020w,\n/static/095db82dc87fa8bc0f5efc7ef9267aa7/9d567/a8ec6c59.png 1360w,\n/static/095db82dc87fa8bc0f5efc7ef9267aa7/89066/a8ec6c59.png 1440w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># certbot을 설치하기 위한 snap을 설치한다.</span>\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> update\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> <span class=\"token function\">install</span> snapd\n\n<span class=\"token comment\"># 이미 설치되어있는 certbot을 제거한다.</span>\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> remove certbot\n\n<span class=\"token comment\"># certbot을 설치한다.</span>\n<span class=\"token function\">sudo</span> snap <span class=\"token function\">install</span> <span class=\"token parameter variable\">--classic</span> certbot\n\n<span class=\"token comment\"># certbot이 잘 설치되어있는지 확인한다.</span>\n<span class=\"token function\">sudo</span> <span class=\"token function\">ln</span> <span class=\"token parameter variable\">-s</span> /snap/bin/certbot /usr/bin/certbot\n\n<span class=\"token comment\"># certbot을 nginx에 연결하기</span>\n<span class=\"token function\">sudo</span> certbot <span class=\"token parameter variable\">--nginx</span></code></pre></div>\n<h2>HTTPS 설정</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/77f1fa1c84d64bf273fbf2a93927177e/96d37/5498d43a.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 100.58823529411765%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC0ElEQVR42n2USU9iURCFAQcmAQH1wXvAY2hGjUE3uNCk08SN8QdJHBLtTkd0gy7an3v6flcuot26qFTd4Z06darui2SDrFJ+TolkRpkMllWtVrNWLpdVr9dVKBSUzWa1urqqSCTytZW9sqq+Aai+glQqFfm+r1KpZNfEnucpl8splUopmUxacJKzTqfTisVib4BeyVOv37NM8vm8vYxtbGxYZu4jANMmTs0BMfY5X1lZeQPc2tpSo9GwzDj8WEI0Gn3zxqLRmI2XDYbuXgSdKKlarVpQ53d2dmzZMCMmcaWYVzGXVTyRsCVT/j8ackB5lOB0AvDm5kZPT0+6u7vT7e2tpg8P+vP7p35dX+ry6kpXxiaTiS4uLvRgzg4PD+caGnaUDFMaAMNms6nxeKyzszOdn5/r9PTUxt9/jDU6OtLJ8bGOjO/3+xoMBjo4OLD6W0BYUVqxWLSlAUp5NATmyxotdPrKtre3FQSBBd3c3Fx0Dg/g62xm7BqPNNyDEd0lGX6RLG+YwCwHmAEggZtD9l0yJCFGIoA/HfLQXBp02qr5ptvFgiZG5JlpxuPjo+7v7zWbzfT8/KzpdKqXlxe7DzjM3g20s2Et0Mm3UKOar1EYqBH4Ks9fBwxhjKYYe6zfzeZHwJL5uN5syTNZy0FFnimvasaGZ4dWNIeG0Tw8wIBStgN9BxyGNbXMmHQ7HfkGFFaMEePQbretfv4HxsT/e1XWKnM2YRha0QFptVp2HgFjz70mup4wr4QXgtF5qoB1PB5/BQSsY9jxIUAcutHAL/8w3HziYYuRhI4vyu71evbZ7O7uajQa2VJ5Aaw529/fV7fbtUn39vbsmjvD4dDe5x5M19fXtba2poij7n5ZbniXY/Syv6/5PfZZUwWeNbHVlQDR0Qk9Ed0NMqWhJTHGGR/B5tOxQRNK5IeAjmRjD+3ITqk0DE/DSAD75Se3PDp/AXri/vc4VVIbAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='5498d43a' title='' src='/static/77f1fa1c84d64bf273fbf2a93927177e/ca1dc/5498d43a.png' srcset='/static/77f1fa1c84d64bf273fbf2a93927177e/e7570/5498d43a.png 170w,\n/static/77f1fa1c84d64bf273fbf2a93927177e/f46e7/5498d43a.png 340w,\n/static/77f1fa1c84d64bf273fbf2a93927177e/ca1dc/5498d43a.png 680w,\n/static/77f1fa1c84d64bf273fbf2a93927177e/96d37/5498d43a.png 823w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># certbot이 SSL 인증서를 자동 갱신하는 cron을 등록한다</span>\n<span class=\"token function\">sudo</span> certbot renew --dry-run</code></pre></div>\n<h2>NGINX 설정 확인</h2>\n<p>NGINX 설정에 다음과 같이 certbot이 HTTPS 설정을 추가한 것을 확인할 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/5a394047db5167b37d0a036395d75c95/baa93/3d08df23.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 70%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAACLklEQVR42pWUWZLaMBRF2UzjeR5kWx4AGzOY7qahSFWygux/AzdXMqT4oSv5OH6SLd03lhehE8P1C5heAcsTXJfw/AqOy3dWBouY/8HCMDM4gYCXFfDzGmnaIYlb+BRdmine+F1Zg4eNfxFUD8dOEdgR4rBEKAZE1YiINmbEMqgQBRK2nZFcY5GHg2dH1kPQsPIZM0Fc79H/+o12vOCUSJzzFlNG0gZX0aGPazSRRB1WaBTBbNU+YbkWj1AtRrBcxvCCEvVwQsEoC9a14AXBg6W6yG+ZI+AzwsgVCBXcR8QjSuNJMEfWHpF0E4SboWWjhBLkJanWtBFFu/UJLu3bU12XT2n/FTSV12KrU06SDmXcIIsIGyS4zplmRAeqaaqOhpG+boqOkCGnKrr+DHG4oRk+MOwvaPZXlPsbxPAFN2xg+xIenbhs1PeCKkLZU3QHuTqhKkZU+RZdMSBlI5SYG9RazI87zmv1WtC2hU5ZHfKZZhAoeNmpEHhSj4NhJJyCdLbENF+knFcbOFJCMIKKIkU8oBQTivyIPN0h8BssH2Jkebczs7CyhjU7WDhhjXx8h9y8c1wu6McrjscfOLCO6+0Vbf+B1XrCanPChmeG7Se61QRZnNDJLzreo6RzS2WpBTkC6TihGs+6CePhQrELtqTn/jDdZpH6E7v+J1radXtBGLTwPNbWrTSqB1rQ5k9AdVij6klr6yGdreMKfdiyuCemqWqVM/VEY9wx7yn/AaQ4wb13oUFBAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='3d08df23' title='' src='/static/5a394047db5167b37d0a036395d75c95/ca1dc/3d08df23.png' srcset='/static/5a394047db5167b37d0a036395d75c95/e7570/3d08df23.png 170w,\n/static/5a394047db5167b37d0a036395d75c95/f46e7/3d08df23.png 340w,\n/static/5a394047db5167b37d0a036395d75c95/ca1dc/3d08df23.png 680w,\n/static/5a394047db5167b37d0a036395d75c95/02d09/3d08df23.png 1020w,\n/static/5a394047db5167b37d0a036395d75c95/baa93/3d08df23.png 1236w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h2>Reference</h2>\n<p><a href=\"https://certbot.eff.org/instructions\">https://certbot.eff.org/instructions</a></p>","frontmatter":{"title":"내 서버에 HTTPS 설정하기","date":"July 28, 2023","update":"July 28, 2023","tags":["HTTPS"],"series":null},"fields":{"slug":"/apply-https/","readingTime":{"minutes":2.635}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}},"next":{"fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},"pageContext":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","series":null,"previousPostId":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","nextPostId":"707f8ffb-1409-5c27-b15a-5661b235c226"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/blog-starter/page-data.json b/page-data/blog-starter/page-data.json
index a95911a4..c72191e0 100644
--- a/page-data/blog-starter/page-data.json
+++ b/page-data/blog-starter/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/blog-starter/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀의 기술블로그를 만들기까지의 험난한 과정을 정리해보려고 한다. 플랫폼 선정 팀 블로그를 작성하기 위해 다양한 플랫폼들을 고려해봤다. 티스토리 티스토리는 팀 블로그 기능을 통해 다양한 작성자 및 관리자를 지정할 수 있다. 하지만 UI를 직접 수정할 수 없을 뿐더러 제공되어있는 스킨들이 대부분 …","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p>피움팀의 기술블로그를 만들기까지의 험난한 과정을 정리해보려고 한다.</p>\n<h2>플랫폼 선정</h2>\n<p>팀 블로그를 작성하기 위해 다양한 플랫폼들을 고려해봤다.</p>\n<h3>티스토리</h3>\n<p>티스토리는 팀 블로그 기능을 통해 다양한 작성자 및 관리자를 지정할 수 있다.</p>\n<p>하지만 UI를 직접 수정할 수 없을 뿐더러 제공되어있는 스킨들이 대부분 마음에 들지 않았다.</p>\n<p>UI 선정과정에 너무많은 힘을 들일 것 같아서 티스토리는 사용하지 않았다.</p>\n<h3>Notion</h3>\n<p>현재 팀 문서 정리를 Notion으로 관리하고있다.</p>\n<p>자유롭게 템플릿을 관리할 수 있어서 가장 매력적으로 다가온 툴이였지만 SEO를 적용하지 못하고, 도메인을 별도로 지정해야한다는 단점이 있어 선택하지 않았다.</p>\n<blockquote>\n<p>중간에 vercel에서 제공하는 notion 배포기능을 사용하는 방식이 있었지만 Organizaiton으로 레포지토리를 관리하고 있는 현재 상황에서 해당 서비스를 이용하려면 유료였기 때문에 해당 부분도 사용하지 못했다.\n<a href=\"https://vercel.com/templates/next.js/notion-blog\">Notion-backed Next.js Blog</a></p>\n</blockquote>\n<h3>Velog</h3>\n<p>팀 계정을 생성해서 Velog에 글을 게시하는 방법을 생각해봤다.</p>\n<p>팀 계정을 생성한다는 부분에서 팀 프로젝트가 계속 진행되면서 계정을 관리하는 리소스가 추가되는것이 우려되었기 때문에 선택하지 않았다.</p>\n<h3>GitBook</h3>\n<p>GitBook을 이용해서 팀 블로그를 운영할 수도 있겠지만 UI 구성적인 측면에서 기술블로그와는 거리가 멀었기 때문에 선택하지 않았다.</p>\n<h3>GitHub Pages</h3>\n<p>정적인 페이지를 무료로 호스팅할 수 있고, 마음만 먹으면 자유롭게 커스터마이징 할 수 있는 환경이라는 부분이 매력있게 다가와 GitHub Pages를 선택했다.</p>\n<h2>GitHub Pages로 팀 블로그 만들기</h2>\n<p>이제 본격적으로 GitHub Pages를 이용하여 팀 블로그를 만드는 과정을 차근차근 따라가보자.</p>\n<p>gatsby를 이용하여 블로그 배포를 진행했다. 사용한 템플릿은 gatsby-starter-hoodie이며 블로그에 친절하게 사용법이 게시되어있다.</p>\n<p><a href=\"https://github.com/devHudi/gatsby-starter-hoodie\">🐙 gatsby-starter-hoodie</a>\n<a href=\"https://hoodie.gatsbyjs.io/about-hoodie-kr/\">🚀 gatsby-starter-hoodie 사용 방법 보러가기</a></p>\n<blockquote>\n<p>필자는 gatsby에 대해 아무것도 모르는 상태로 해당 작업을 진행했습니다. 😵‍💫\n최대한 알기 쉽게 정리하려고 노력했습니다만... 잘못된 부분이 있다면 댓글로 남겨주시면 감사하겠습니다.</p>\n</blockquote>\n<h3>gatsby란?</h3>\n<p>우선 사용하고자하는 gatsby가 무엇인지부터 알고 진행해보자.</p>\n<p><a href=\"https://en.wikipedia.org/wiki/Gatsby_(JavaScript_framework)\">위키백과</a>에 따르면</p>\n<p><strong>개츠비는 React와 GraphQL을 사용하여 Node.js 위에 구축된 오픈소스 정적 사이트 생성기입니다.</strong></p>\n<p>라고 설명되어있다.</p>\n<p><code class=\"language-text\">Node.js 위에 구축된</code> 해당 문구로부터 로컬 환경에 Node.js가 필요하다는 것을 알 수 있다.</p>\n<h3>node 설치하기</h3>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">brew <span class=\"token function\">install</span> <span class=\"token function\">node</span></code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/73b786eee2c0d2daf34599aaaea6a06b/4c40c/dd266184.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 5.88235294117647%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAI0lEQVR42mOQVpD9r6qq8p+bm/s/AwMDWZibnx+MuXh5/wMAUT0VSh1aL/AAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='dd266184' title='' src='/static/73b786eee2c0d2daf34599aaaea6a06b/ca1dc/dd266184.png' srcset='/static/73b786eee2c0d2daf34599aaaea6a06b/e7570/dd266184.png 170w,\n/static/73b786eee2c0d2daf34599aaaea6a06b/f46e7/dd266184.png 340w,\n/static/73b786eee2c0d2daf34599aaaea6a06b/ca1dc/dd266184.png 680w,\n/static/73b786eee2c0d2daf34599aaaea6a06b/02d09/dd266184.png 1020w,\n/static/73b786eee2c0d2daf34599aaaea6a06b/9d567/dd266184.png 1360w,\n/static/73b786eee2c0d2daf34599aaaea6a06b/4c40c/dd266184.png 1918w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">node -v</code> 명령어를 통해 잘 설치되었는지 확인해본다.</p>\n<h3>npx 설치하기</h3>\n<p>리액트를 공부하자는 글이 아니기 때문에 간단히만 알고 넘어가자</p>\n<p>npx는 npm 사용시에 발생하는 발생할 수 있는 여러 문제점을 해결하기 위해 설계되었다고한다.\n진행하는 과정에서 npx를 사용할 것이기 때문에 npx도 설치하고 넘어가자.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> npx <span class=\"token parameter variable\">-g</span></code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/8db07d2cda121d084fdfc6db4439bb71/b06e5/ff1c3736.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 6.470588235294117%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKklEQVR42mMQl5b8Ly4h9p+Nle0/AwMDyZiRiek/Fx/ffy4env/sXFz/ATymFPbdvEBAAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='ff1c3736' title='' src='/static/8db07d2cda121d084fdfc6db4439bb71/ca1dc/ff1c3736.png' srcset='/static/8db07d2cda121d084fdfc6db4439bb71/e7570/ff1c3736.png 170w,\n/static/8db07d2cda121d084fdfc6db4439bb71/f46e7/ff1c3736.png 340w,\n/static/8db07d2cda121d084fdfc6db4439bb71/ca1dc/ff1c3736.png 680w,\n/static/8db07d2cda121d084fdfc6db4439bb71/02d09/ff1c3736.png 1020w,\n/static/8db07d2cda121d084fdfc6db4439bb71/9d567/ff1c3736.png 1360w,\n/static/8db07d2cda121d084fdfc6db4439bb71/b06e5/ff1c3736.png 1928w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">npx -v</code> 명령어를 통해 잘 설치되었는지 확인해본다.</p>\n<h3>gatsby-cli 설치하기</h3>\n<p>gatsby 명령어를 사용하기 위해 gatsby-cli를 설치한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> <span class=\"token parameter variable\">-g</span> gatsby-cli</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/84ae3d9eb6ca065dde7c9f606b236fe3/a75c2/6494ac93.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 8.235294117647058%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAARUlEQVR42pXMwQkAIQwAwQQUiZATUVAh/be5Xgs+5jtyzqG1RimFnDNmRkoJEXnivfONgcw5iQjWWrg7e29qrc+hqKK/C1iIKmb4JjKzAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='6494ac93' title='' src='/static/84ae3d9eb6ca065dde7c9f606b236fe3/ca1dc/6494ac93.png' srcset='/static/84ae3d9eb6ca065dde7c9f606b236fe3/e7570/6494ac93.png 170w,\n/static/84ae3d9eb6ca065dde7c9f606b236fe3/f46e7/6494ac93.png 340w,\n/static/84ae3d9eb6ca065dde7c9f606b236fe3/ca1dc/6494ac93.png 680w,\n/static/84ae3d9eb6ca065dde7c9f606b236fe3/02d09/6494ac93.png 1020w,\n/static/84ae3d9eb6ca065dde7c9f606b236fe3/9d567/6494ac93.png 1360w,\n/static/84ae3d9eb6ca065dde7c9f606b236fe3/a75c2/6494ac93.png 1938w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">gatsby -v</code> 명령어를 통해 잘 설치되었는지 확인해본다.</p>\n<h3>Gatsby 사이트 생성</h3>\n<blockquote>\n<p>여기서부터는 <a href=\"https://hoodie.gatsbyjs.io/quick-start-kr/\">Hudi의 Gatsby 환경 구성하기</a>를 따라가는 내용입니다.</p>\n</blockquote>\n<blockquote>\n<p>환경은 Pium의 프로젝트 환경에 맞게 진행됩니다.</p>\n</blockquote>\n<p>gatsby를 이용하여 새로운 사이트를 생성한다.\n이때 <code class=\"language-text\">gatsby-starter-hoodie</code>를 참고하여 구성한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"node\"><pre class=\"language-node\"><code class=\"language-node\">npx gatsby new pium-official.github.io https://github.com/devHudi/gatsby-starter-hoodie</code></pre></div>\n<h3>프로젝트 시작해보기</h3>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token builtin class-name\">cd</span> pium-official.github.io\n\n<span class=\"token function\">npm</span> run start</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/f8aaf9178a3da884c1aeadbbdb37c2d8/8c935/19f5a8e2.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 6.470588235294117%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAT0lEQVR42h3FQQqAIBRAwS+5MQIXEZlJYlgpQbTq/jd7RYthxM4Ju560+aarD92S8PXG7xfhWPCpp9TCljPOOYwxiAii1H+jNUMIjDEyfV4QoRmHqZ6PpQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='19f5a8e2' title='' src='/static/f8aaf9178a3da884c1aeadbbdb37c2d8/ca1dc/19f5a8e2.png' srcset='/static/f8aaf9178a3da884c1aeadbbdb37c2d8/e7570/19f5a8e2.png 170w,\n/static/f8aaf9178a3da884c1aeadbbdb37c2d8/f46e7/19f5a8e2.png 340w,\n/static/f8aaf9178a3da884c1aeadbbdb37c2d8/ca1dc/19f5a8e2.png 680w,\n/static/f8aaf9178a3da884c1aeadbbdb37c2d8/02d09/19f5a8e2.png 1020w,\n/static/f8aaf9178a3da884c1aeadbbdb37c2d8/9d567/19f5a8e2.png 1360w,\n/static/f8aaf9178a3da884c1aeadbbdb37c2d8/8c935/19f5a8e2.png 1940w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">localhost:8000</code>으로 프로젝트가 열리는 모습을 볼 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/3a3e39f1ad96077a4fb4941bbdb6c9bf/ee57e/7810b698.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 57.05882352941176%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABZUlEQVR42n1S7XKCMBDkCTq2QhJMQAiED9HO1IpMa/un7/9O27sg1aLtj52By93e3t4Fbdsiz3PEcYzVauVhjIbWGlJK/8/f09scXLder5FlmUcghPCF/DBhsXhEGEYoy9IXCRFBKfUL1/nX8WDqMimMogiZW0KnIYbhDfvXA7a7HZxzKIrCN2FFc9IJwTzAiYunB4RiSVYU2HRbtJvuZswfzBTfEGq9QmIMjDa+WApJEBeP4zPOxOyvofy7hFLGcHmMz6HFy/6Avu9R17W3gX2+xuiZpEXksGTFpDKYj5skBl23Qd00qIiMUbJ/5F1VVd7L8gyegv3k3EllMPeDHxwVNk07EhUlLcL5ZThXeWKOZ3Rqimr4VLa7ZxKSjlv+7aEibzSsLT2BUjGdT3gz7mVkEpAkSEnlXQ+5o9EKNtNI0/FYrbVe9d2jJqj/tixoKZWV+Do1OA7vOB57nE4fnnR+/H/hG05yJPI5xu6PAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='7810b698' title='' src='/static/3a3e39f1ad96077a4fb4941bbdb6c9bf/ca1dc/7810b698.png' srcset='/static/3a3e39f1ad96077a4fb4941bbdb6c9bf/e7570/7810b698.png 170w,\n/static/3a3e39f1ad96077a4fb4941bbdb6c9bf/f46e7/7810b698.png 340w,\n/static/3a3e39f1ad96077a4fb4941bbdb6c9bf/ca1dc/7810b698.png 680w,\n/static/3a3e39f1ad96077a4fb4941bbdb6c9bf/02d09/7810b698.png 1020w,\n/static/3a3e39f1ad96077a4fb4941bbdb6c9bf/9d567/7810b698.png 1360w,\n/static/3a3e39f1ad96077a4fb4941bbdb6c9bf/ee57e/7810b698.png 2576w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h3>블로그 커스텀하기</h3>\n<p>해당 부분은 원작자의 <a href=\"https://hoodie.gatsbyjs.io/quick-start-kr/\">🚀 2.빠르게 시작하기</a>를 참고하여 진행하면 된다.</p>\n<h3>GitHub Pages로 배포하기</h3>\n<p>이제 배포할 페이지를 다 만들었다!\nGitHub Pages를 이용해 배포를 진행해보자.</p>\n<p>우선 GitHub Repository를 생성한다.</p>\n<blockquote>\n<p>pium-official Organization에서 <code class=\"language-text\">pium-official.github.io</code> 레포지토리를 생성했다.</p>\n</blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/1c0299f5df6017963eedb169a138c357/100fa/b084df05.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 24.705882352941178%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA9ElEQVR42lWQy1KEMBBFwwBDQQIhIS9e4oiWzsqaKlf+hP//NddOkIWLU307/chN2OBX+PmGTgfkV4FLyVM89UleCtRC49r0YHmNrGiQXYisQUG1ouqwPb+ByWGEVB7TtGEcn9APAVJ7KDsj1lqqmXGDdiscXdyqAN4ZVFxBzB79PoN7i6pRKGsJJnqfhpRdYaYdyt8gzZIcx/MYw7In1pePQ687BNWW7zvef74QHq9oJfWSARaHRO/gqNFunzDbA2a5Ywjkllxqdyzn0iZibyTOcWHR1AaiPfIIO4UcCO3QKUu4tKTTY3r2of+T3NP3JP7yyC/NIXnzT5u+QwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='b084df05' title='' src='/static/1c0299f5df6017963eedb169a138c357/ca1dc/b084df05.png' srcset='/static/1c0299f5df6017963eedb169a138c357/e7570/b084df05.png 170w,\n/static/1c0299f5df6017963eedb169a138c357/f46e7/b084df05.png 340w,\n/static/1c0299f5df6017963eedb169a138c357/ca1dc/b084df05.png 680w,\n/static/1c0299f5df6017963eedb169a138c357/02d09/b084df05.png 1020w,\n/static/1c0299f5df6017963eedb169a138c357/9d567/b084df05.png 1360w,\n/static/1c0299f5df6017963eedb169a138c357/100fa/b084df05.png 2836w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">git</span> remote <span class=\"token function\">add</span> origin https://github.com/pium-official/pium-official.github.io</code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"node\"><pre class=\"language-node\"><code class=\"language-node\">npm run deploy-gh</code></pre></div>\n<p>위 명령어를 수행하면 팀 레포지토리에 gh-pages 브랜치가 생성되고 build된 결과물이 올라온다. 해당 파일을 기준으로 GitHub Pages에서 배포를 진행한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/4ff57d82ac33909a4f4b745b50920314/893ad/3db58ec3.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 52.352941176470594%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABuElEQVR42lWS2XLbMAxF1WZpHC+yJO4SSe1u7GTcp/ah//9dtwAaT+sHDDggcXABsNgdFLRLeN6U2OxqlLUT//htj6eXAx7I85nvX7aV2PNriS+PrygeNuK/Pm3FW59Q2BDR9QvZijy9wYQeZeNwVAGVbunsxQ5UyLYDQpoR2hnKJNQmQvlM7zrJ25YaRWU6JAJ1wwk+TvKIVe6OmsyIMcyEDN9N8HmG/7Ui/Fhhw4DaRinckGcrOHi5/sSwfpDCM/rlgjieocMI7XtwwcZl5OUdeb4grxeMv68IHydSuwiQ7ahaKmxRNC5Kq64bRTZDXKS28kqKR6huEWWsguGc7PyERiXKmUTVvrLSBfuCH/ZUmWHcHs9B01xCXmQEKtI40kpjsNhRwp68TwSiRfI9AzmPYQLk4afxTR5IJTI+G1oAg2tS42gJR1rUnlSwEo6zWkWjqD8V3gEjLYSV3mQrAtrPEdSelkBzZuDhPyAX5Z9R6XCvkEHz96tAbkEGtf1JvohOZ6R8IqAVhfwDHLdK6lSY0VAHdwoZOKzvArwp1AS07SSxyg0w/u/f5Hv2sgwCetpyZf4the0P+g7+yRmHZbcAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='3db58ec3' title='' src='/static/4ff57d82ac33909a4f4b745b50920314/ca1dc/3db58ec3.png' srcset='/static/4ff57d82ac33909a4f4b745b50920314/e7570/3db58ec3.png 170w,\n/static/4ff57d82ac33909a4f4b745b50920314/f46e7/3db58ec3.png 340w,\n/static/4ff57d82ac33909a4f4b745b50920314/ca1dc/3db58ec3.png 680w,\n/static/4ff57d82ac33909a4f4b745b50920314/02d09/3db58ec3.png 1020w,\n/static/4ff57d82ac33909a4f4b745b50920314/9d567/3db58ec3.png 1360w,\n/static/4ff57d82ac33909a4f4b745b50920314/893ad/3db58ec3.png 2826w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<blockquote>\n<p>GitHub Pages에서 배포 기준으로 잡는 브랜치를 확인 &#x26; 변경하고 싶다면 Settings - Pages 에서 다음 항목을 확인하면 된다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/18b74e74f5e47aade85df87810ea9317/17112/b9a5c99c.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 52.352941176470594%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABnUlEQVR42nVS2XLiQBDjIZvsBnx7Do8xY3vsACFUjv//N0U9BopUZR9U4zlaUre8Wqc1stLiOamQ5AbrTGGTa+RVQzg8p9xn+naeFQZKb/HwlOLh74I/Fzz+S7EqeGnaAQkfpiROWGS3I8LhHX48UExHwbyyyGqHUqAccq7X90lpLrAkVC2cn+F2EyrT0Y1Crj3a8I5h/wEXPuK3G89RyBCyyns/vcaaSExDglVBpeHlDbtwRMY2pW1ZlQuo3ITMTChNT/U2tiyONhdXbjdHgR+EJRW6YX872BQamiPY8qwb96hth3WulnspvKJY5i241kZCsdxxVtcZbmqNnvvT2xcCW5IA0rRCRtJcwhJQNL0j+UloPQ4sjsGQUB5O/YTz+QvzdMTL/IpAp72f0G0HODfA6B6qlG5+I2wGNAyl0C2k/VI79Cw8nj7p/Iyw/8Q0n6B5V7CgoGhFspoufyUs2ZJnIJKadn0cuCJ55zx2JG6bHpVenPlugLUjajMgN4GzHpcg7wkLtRBKMPILyW9TNx6ermwX6MLewdyQ/AffNGD9TWsYcJIAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='b9a5c99c' title='' src='/static/18b74e74f5e47aade85df87810ea9317/ca1dc/b9a5c99c.png' srcset='/static/18b74e74f5e47aade85df87810ea9317/e7570/b9a5c99c.png 170w,\n/static/18b74e74f5e47aade85df87810ea9317/f46e7/b9a5c99c.png 340w,\n/static/18b74e74f5e47aade85df87810ea9317/ca1dc/b9a5c99c.png 680w,\n/static/18b74e74f5e47aade85df87810ea9317/02d09/b9a5c99c.png 1020w,\n/static/18b74e74f5e47aade85df87810ea9317/9d567/b9a5c99c.png 1360w,\n/static/18b74e74f5e47aade85df87810ea9317/17112/b9a5c99c.png 2854w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n</blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/69fbabab3e1202e22cc8388012035d74/100fa/1877666d.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 24.705882352941178%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA90lEQVR42m1PXXOCQAykiiICcnzeHXDIV0Vtp7VP/f+/bJtk6kwf+rCTSTbZ3XiqsNDtiCitkOYGpXYI4xybbYjtLsLmF/4+lnkYF9gdTnjxjwTmYvhBIrDtAI9FYlUjOlUoTA9VNjBUTTMiq1okSiPJNE609wSHCI4KBzHIpQZRhn2Ywrs/vtHPqxwPr28wbkLjZlzuX9DdRAYk+kfsiZRE87pDZc8odI+UgijS8Gy/wHQjkU6WOE1N/XJ7kNENzNfthJIOSzsIKgZ9oLtZOK7GLTLz3LiiG1Y5YDF+MbMtxss7lusn5usHLCVm9yQz/0CLAafl/gcTmX0AJRGr7wAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='1877666d' title='' src='/static/69fbabab3e1202e22cc8388012035d74/ca1dc/1877666d.png' srcset='/static/69fbabab3e1202e22cc8388012035d74/e7570/1877666d.png 170w,\n/static/69fbabab3e1202e22cc8388012035d74/f46e7/1877666d.png 340w,\n/static/69fbabab3e1202e22cc8388012035d74/ca1dc/1877666d.png 680w,\n/static/69fbabab3e1202e22cc8388012035d74/02d09/1877666d.png 1020w,\n/static/69fbabab3e1202e22cc8388012035d74/9d567/1877666d.png 1360w,\n/static/69fbabab3e1202e22cc8388012035d74/100fa/1877666d.png 2836w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>GitHub Actions 탭에서 <code class=\"language-text\">pages build and deployment</code> 작업이 완료된것을 확인하고 <a href=\"https://pium-official.github.io/\">https://pium-official.github.io/</a> 로 접속해보면 페이지가 성공적으로 배포된것을 확인할 수 있다!!</p>\n<blockquote>\n<p>https:://{팀 레포명}.github.io</p>\n</blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/0787e9418eadd11cad330b5f5be63289/f8159/f35d015e.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 55.294117647058826%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABVElEQVR42o1TS07DQAydI4CaftJJ0vyThkqE/AiqugSOAhyEJQfgGOVmLNghPewpU4WhRCyeLHmc5+dnR5Rlic1mg+VyCdu2FSzLwmKxUOC8hn4fgvNJkiAiBEEAMZvNwNAF8/kcddvAD3w40jnmmPwUoX7XNUJ3l1Li7Pwc97d3eP/8wPPrC9q6RZplpCBFTAocxxklZoihdB61qirs9294eHqE662IxP2Gc3Jss4Ew/ZhOp7AmExU5Jw0PTU+l/NlImF7EcYS+v8F2u0XXdWgJfd9jt9uhKArVSC+MEZMdruselQpTvu/7uKTNr9dr5V2e58gIRXGhYhTFSNMUYRhRvX0g9LwRQlp903aom+aIqm5UjmN5VeGaJuCmh5Hl3yMzoUfdclKXqe0mSrHybPDh2F3+IuRt8qirlafuU9/XEP86G3M5HFmtBv8FYRiqBYwRfgGuPS4RvQQaUgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='f35d015e' title='' src='/static/0787e9418eadd11cad330b5f5be63289/ca1dc/f35d015e.png' srcset='/static/0787e9418eadd11cad330b5f5be63289/e7570/f35d015e.png 170w,\n/static/0787e9418eadd11cad330b5f5be63289/f46e7/f35d015e.png 340w,\n/static/0787e9418eadd11cad330b5f5be63289/ca1dc/f35d015e.png 680w,\n/static/0787e9418eadd11cad330b5f5be63289/02d09/f35d015e.png 1020w,\n/static/0787e9418eadd11cad330b5f5be63289/9d567/f35d015e.png 1360w,\n/static/0787e9418eadd11cad330b5f5be63289/f8159/f35d015e.png 2634w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h3>글 작성하기</h3>\n<p>해당 템플릿에 글을 작성하는 방식은 원작자의 <a href=\"https://hoodie.gatsbyjs.io/writing-guide-kr/\">🤔 3. 작성 가이드</a>를 참고하면 된다.</p>\n<h3>GitHub Actions workflow</h3>\n<p>현재까지 진행한 작업으로는 다음과 같은 흐름으로 배포를 진행할 수 있다.</p>\n<ol>\n<li>로컬에서 글을 작성한다.</li>\n<li>글을 작성한 뒤 <code class=\"language-text\">npm run deploy-gh</code> 명령어를 수행해서 배포를 진행한다.</li>\n</ol>\n<p>위 방식은 혼자서 작업할 때는 문제가 없으나 여러명이 함께 글을 작성하기에는 많이 번거롭다.</p>\n<p>우리는 다음과 같은 방식으로 배포를 하는 방향을 기대하고 있다.</p>\n<ol>\n<li>로컬에서 글을 작성한다.</li>\n<li>글을 작성한 뒤 main 브랜치로 push한다.</li>\n<li>main 브랜치에 작업내용이 push 되었을 때 빌드 및 배포가 자동적으로 이뤄진다.</li>\n</ol>\n<p>위에서 3번 작업내용을 수행하기 위해 GitHub Actions의 workflow 기능을 이용할 수 있다.</p>\n<h3>workflow 작성하기</h3>\n<p><code class=\"language-text\">gatsby-starter-hoodie</code>에서 기본적으로 제공하고 있는 workflow는 다음과 같이 구성되어있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"yml\"><pre class=\"language-yml\"><code class=\"language-yml\"><span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> CI\n\n<span class=\"token key atrule\">on</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">pull_request</span><span class=\"token punctuation\">:</span>\n    <span class=\"token key atrule\">branches</span><span class=\"token punctuation\">:</span>\n      <span class=\"token punctuation\">-</span> main\n\n<span class=\"token key atrule\">jobs</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">build</span><span class=\"token punctuation\">:</span>\n    <span class=\"token key atrule\">runs-on</span><span class=\"token punctuation\">:</span> ubuntu<span class=\"token punctuation\">-</span>latest\n    <span class=\"token key atrule\">steps</span><span class=\"token punctuation\">:</span>\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> actions/checkout@v2\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> actions/setup<span class=\"token punctuation\">-</span>node@v2\n        <span class=\"token key atrule\">with</span><span class=\"token punctuation\">:</span>\n          <span class=\"token key atrule\">node-version</span><span class=\"token punctuation\">:</span> 20.3.1\n\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Install node packages\n        <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> yarn\n        \n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Check lint\n        <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> yarn check<span class=\"token punctuation\">:</span>lint\n        \n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Check prettier\n        <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> yarn check<span class=\"token punctuation\">:</span>prettier\n      \n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Build\n        <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> yarn build</code></pre></div>\n<blockquote>\n<p>자세한 구문에 대한 설명 및 내용은 <a href=\"https://docs.github.com/ko/actions/using-workflows/workflow-syntax-for-github-actions\">공식문서</a>를 참고해보면 좋다.</p>\n</blockquote>\n<p>기존에 존재하는 ci.yml 파일은 삭제하고 아래와 같은 deploy.yml을 작성해보자.</p>\n<blockquote>\n<p>workflow에 대한 yml파일의 경로는 반드시 <code class=\"language-text\">.github/workflows</code> 폴더 내부에 존재해야한다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/cef42a7b411892b239eec92aa35a064b/26530/d9fc2f50.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 10%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAhUlEQVR42h2MWQ6CQBQEuYEzw4cGhmUAiSyCBBBxIdH736l84aOS6nSnPRVUaNuhbItxCzq6oeMBk86oqEMfnXRX2QinHBU2suk5BDVHW9D0M2UzcK564uyCp5MRP3/LwYSfrbvvFBsme+Lbaj836V28xiSTMKIlh65m/fxYXl/Gx4YrW/5DFDhxP4DLxgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='d9fc2f50' title='' src='/static/cef42a7b411892b239eec92aa35a064b/ca1dc/d9fc2f50.png' srcset='/static/cef42a7b411892b239eec92aa35a064b/e7570/d9fc2f50.png 170w,\n/static/cef42a7b411892b239eec92aa35a064b/f46e7/d9fc2f50.png 340w,\n/static/cef42a7b411892b239eec92aa35a064b/ca1dc/d9fc2f50.png 680w,\n/static/cef42a7b411892b239eec92aa35a064b/26530/d9fc2f50.png 944w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n</blockquote>\n<div class=\"gatsby-highlight\" data-language=\"yml\"><pre class=\"language-yml\"><code class=\"language-yml\"><span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Deploy\n\n<span class=\"token key atrule\">on</span><span class=\"token punctuation\">:</span> <span class=\"token comment\"># 어떤 작업이 수행될 때 deploy.yml 작업이 수행된다. (트리거)</span>\n  <span class=\"token key atrule\">push</span><span class=\"token punctuation\">:</span> <span class=\"token comment\"># push 작업이 수행될 때</span>\n    <span class=\"token key atrule\">branches</span><span class=\"token punctuation\">:</span> <span class=\"token comment\"># 특정 브랜치를 대상으로</span>\n      <span class=\"token punctuation\">-</span> main\n\n<span class=\"token key atrule\">permissions</span><span class=\"token punctuation\">:</span> <span class=\"token comment\"># github action이 수행되는 환경에서 특정 권한을 준다</span>\n  <span class=\"token key atrule\">contents</span><span class=\"token punctuation\">:</span> write\n\n<span class=\"token key atrule\">jobs</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">build</span><span class=\"token punctuation\">:</span>\n    <span class=\"token key atrule\">runs-on</span><span class=\"token punctuation\">:</span> ubuntu<span class=\"token punctuation\">-</span>latest\n    <span class=\"token key atrule\">steps</span><span class=\"token punctuation\">:</span>\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> actions/checkout@v2\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> actions/setup<span class=\"token punctuation\">-</span>node@v2\n        <span class=\"token key atrule\">with</span><span class=\"token punctuation\">:</span>\n          <span class=\"token key atrule\">node-version</span><span class=\"token punctuation\">:</span> 20.3.1\n\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Install node packages\n        <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> yarn\n\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Build\n        <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> yarn build\n\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Deploy 🚀\n        <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> JamesIves/github<span class=\"token punctuation\">-</span>pages<span class=\"token punctuation\">-</span>deploy<span class=\"token punctuation\">-</span>action@v4\n        <span class=\"token key atrule\">with</span><span class=\"token punctuation\">:</span>\n          <span class=\"token key atrule\">folder</span><span class=\"token punctuation\">:</span> public</code></pre></div>\n<blockquote>\n<p><code class=\"language-text\">JamesIves/github-pages-deploy-action@v4</code> 작업에서 수행하는 내용 중 쓰기권한을 요구하는 작업이 있기 때문에 permissions 설정을 해야한다.\n<a href=\"https://github.com/JamesIves/github-pages-deploy-action/issues/1110\">관련 이슈 - Failed with exit code 128, Permission Denied</a></p>\n</blockquote>\n<p>위 deploy.yml 파일을 작성했다면 프로젝트 내부에서 변경사항에 대한 commit을 수행하고 git push를 해본다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">git</span> branch <span class=\"token parameter variable\">-m</span> main\n\n<span class=\"token function\">git</span> push origin main</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/f79aa88d3917ca03004874f6ba038c6e/48458/0491f96f.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 31.176470588235293%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABLklEQVR42j2Q23qCMBCEaatW5Qw5kBAEQVTUr970/V9tOklrL/5vA9nMzk4UZwKyOWCf1ohziUq0SFlXmwTrbYYPVs/qM8U2qbCNS2x2Od5We7z/4e/e2WPbAZEXy2uDpFAw3QShO7TuiHG+Q5g+3OVV809GSmGxo3icSaSFxp6m/LA1B0Xnxzf604JCWrhhhuKUuunRTTfI9sj/DilFM4p48leVLWoOF+z1tVIuELnhgn5aoPk4qzRiOrVtj8ftC/N0Re9GHOjY0W3LbV74b2WPAe0mMgbxyKt7/Gq/ghrGWMzXB3nivDxhGUXhVy91ICsbqFLxrJAyAmkGlHTs44jM4YTDeA0ZpmxO2GwpuFzuOM83TOMFmnEorikqBUFhITs0PBchUxOyLrmuN/UDV5KXOKv+BzIAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='0491f96f' title='' src='/static/f79aa88d3917ca03004874f6ba038c6e/ca1dc/0491f96f.png' srcset='/static/f79aa88d3917ca03004874f6ba038c6e/e7570/0491f96f.png 170w,\n/static/f79aa88d3917ca03004874f6ba038c6e/f46e7/0491f96f.png 340w,\n/static/f79aa88d3917ca03004874f6ba038c6e/ca1dc/0491f96f.png 680w,\n/static/f79aa88d3917ca03004874f6ba038c6e/02d09/0491f96f.png 1020w,\n/static/f79aa88d3917ca03004874f6ba038c6e/9d567/0491f96f.png 1360w,\n/static/f79aa88d3917ca03004874f6ba038c6e/48458/0491f96f.png 2842w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>위 내용을 대략적으로 설명해보자면 다음과 같다.</p>\n<p>main 브랜치에 대한 코드를 build해보고 성공한다면 결과물을 gh-pages 브랜치로 배포한다.</p>\n<p>이제 글을 작성하고 main 브랜치로 push하기만 하면 배포까지 자동으로 수행된다.\n로컬에서 <code class=\"language-text\">npm run deploy-gh</code>는 더이상 사용할 필요가 없다.</p>\n<h2>결론</h2>\n<p>블로그를 생성하고 배포하고 자동화하는 과정까지 차근차근 진행해봤다.</p>\n<p>여러버 삽질을 거친 끝에 완성했기 때문에 더 애정이 많이 가는 것 같다. 👍</p>\n<h2>Reference</h2>\n<p><a href=\"https://hoodie.gatsbyjs.io/\">https://hoodie.gatsbyjs.io/</a>\n<a href=\"https://docs.github.com/ko/actions/using-workflows/workflow-syntax-for-github-actions\">https://docs.github.com/ko/actions/using-workflows/workflow-syntax-for-github-actions</a>\n<a href=\"https://studium-anywhere.tistory.com/21\">https://studium-anywhere.tistory.com/21</a></p>","frontmatter":{"title":"피움 블로그 생성과정","date":"July 09, 2023","update":"July 09, 2023","tags":["블로그","세팅"],"series":null},"fields":{"slug":"/blog-starter/","readingTime":{"minutes":11.09}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}},"next":{"fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},"pageContext":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","series":null,"previousPostId":"28f1d87e-d3fc-5567-8531-57649652864f","nextPostId":"c826ce0e-1ea7-517c-8d19-84e90a59a798"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/blog-starter/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀의 기술블로그를 만들기까지의 험난한 과정을 정리해보려고 한다. 플랫폼 선정 팀 블로그를 작성하기 위해 다양한 플랫폼들을 고려해봤다. 티스토리 티스토리는 팀 블로그 기능을 통해 다양한 작성자 및 관리자를 지정할 수 있다. 하지만 UI를 직접 수정할 수 없을 뿐더러 제공되어있는 스킨들이 대부분 …","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p>피움팀의 기술블로그를 만들기까지의 험난한 과정을 정리해보려고 한다.</p>\n<h2>플랫폼 선정</h2>\n<p>팀 블로그를 작성하기 위해 다양한 플랫폼들을 고려해봤다.</p>\n<h3>티스토리</h3>\n<p>티스토리는 팀 블로그 기능을 통해 다양한 작성자 및 관리자를 지정할 수 있다.</p>\n<p>하지만 UI를 직접 수정할 수 없을 뿐더러 제공되어있는 스킨들이 대부분 마음에 들지 않았다.</p>\n<p>UI 선정과정에 너무많은 힘을 들일 것 같아서 티스토리는 사용하지 않았다.</p>\n<h3>Notion</h3>\n<p>현재 팀 문서 정리를 Notion으로 관리하고있다.</p>\n<p>자유롭게 템플릿을 관리할 수 있어서 가장 매력적으로 다가온 툴이였지만 SEO를 적용하지 못하고, 도메인을 별도로 지정해야한다는 단점이 있어 선택하지 않았다.</p>\n<blockquote>\n<p>중간에 vercel에서 제공하는 notion 배포기능을 사용하는 방식이 있었지만 Organizaiton으로 레포지토리를 관리하고 있는 현재 상황에서 해당 서비스를 이용하려면 유료였기 때문에 해당 부분도 사용하지 못했다.\n<a href=\"https://vercel.com/templates/next.js/notion-blog\">Notion-backed Next.js Blog</a></p>\n</blockquote>\n<h3>Velog</h3>\n<p>팀 계정을 생성해서 Velog에 글을 게시하는 방법을 생각해봤다.</p>\n<p>팀 계정을 생성한다는 부분에서 팀 프로젝트가 계속 진행되면서 계정을 관리하는 리소스가 추가되는것이 우려되었기 때문에 선택하지 않았다.</p>\n<h3>GitBook</h3>\n<p>GitBook을 이용해서 팀 블로그를 운영할 수도 있겠지만 UI 구성적인 측면에서 기술블로그와는 거리가 멀었기 때문에 선택하지 않았다.</p>\n<h3>GitHub Pages</h3>\n<p>정적인 페이지를 무료로 호스팅할 수 있고, 마음만 먹으면 자유롭게 커스터마이징 할 수 있는 환경이라는 부분이 매력있게 다가와 GitHub Pages를 선택했다.</p>\n<h2>GitHub Pages로 팀 블로그 만들기</h2>\n<p>이제 본격적으로 GitHub Pages를 이용하여 팀 블로그를 만드는 과정을 차근차근 따라가보자.</p>\n<p>gatsby를 이용하여 블로그 배포를 진행했다. 사용한 템플릿은 gatsby-starter-hoodie이며 블로그에 친절하게 사용법이 게시되어있다.</p>\n<p><a href=\"https://github.com/devHudi/gatsby-starter-hoodie\">🐙 gatsby-starter-hoodie</a>\n<a href=\"https://hoodie.gatsbyjs.io/about-hoodie-kr/\">🚀 gatsby-starter-hoodie 사용 방법 보러가기</a></p>\n<blockquote>\n<p>필자는 gatsby에 대해 아무것도 모르는 상태로 해당 작업을 진행했습니다. 😵‍💫\n최대한 알기 쉽게 정리하려고 노력했습니다만... 잘못된 부분이 있다면 댓글로 남겨주시면 감사하겠습니다.</p>\n</blockquote>\n<h3>gatsby란?</h3>\n<p>우선 사용하고자하는 gatsby가 무엇인지부터 알고 진행해보자.</p>\n<p><a href=\"https://en.wikipedia.org/wiki/Gatsby_(JavaScript_framework)\">위키백과</a>에 따르면</p>\n<p><strong>개츠비는 React와 GraphQL을 사용하여 Node.js 위에 구축된 오픈소스 정적 사이트 생성기입니다.</strong></p>\n<p>라고 설명되어있다.</p>\n<p><code class=\"language-text\">Node.js 위에 구축된</code> 해당 문구로부터 로컬 환경에 Node.js가 필요하다는 것을 알 수 있다.</p>\n<h3>node 설치하기</h3>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">brew <span class=\"token function\">install</span> <span class=\"token function\">node</span></code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/73b786eee2c0d2daf34599aaaea6a06b/4c40c/dd266184.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 5.88235294117647%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAI0lEQVR42mOQVpD9r6qq8p+bm/s/AwMDWZibnx+MuXh5/wMAUT0VSh1aL/AAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='dd266184' title='' src='/static/73b786eee2c0d2daf34599aaaea6a06b/ca1dc/dd266184.png' srcset='/static/73b786eee2c0d2daf34599aaaea6a06b/e7570/dd266184.png 170w,\n/static/73b786eee2c0d2daf34599aaaea6a06b/f46e7/dd266184.png 340w,\n/static/73b786eee2c0d2daf34599aaaea6a06b/ca1dc/dd266184.png 680w,\n/static/73b786eee2c0d2daf34599aaaea6a06b/02d09/dd266184.png 1020w,\n/static/73b786eee2c0d2daf34599aaaea6a06b/9d567/dd266184.png 1360w,\n/static/73b786eee2c0d2daf34599aaaea6a06b/4c40c/dd266184.png 1918w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">node -v</code> 명령어를 통해 잘 설치되었는지 확인해본다.</p>\n<h3>npx 설치하기</h3>\n<p>리액트를 공부하자는 글이 아니기 때문에 간단히만 알고 넘어가자</p>\n<p>npx는 npm 사용시에 발생하는 발생할 수 있는 여러 문제점을 해결하기 위해 설계되었다고한다.\n진행하는 과정에서 npx를 사용할 것이기 때문에 npx도 설치하고 넘어가자.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> npx <span class=\"token parameter variable\">-g</span></code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/8db07d2cda121d084fdfc6db4439bb71/b06e5/ff1c3736.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 6.470588235294117%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKklEQVR42mMQl5b8Ly4h9p+Nle0/AwMDyZiRiek/Fx/ffy4env/sXFz/ATymFPbdvEBAAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='ff1c3736' title='' src='/static/8db07d2cda121d084fdfc6db4439bb71/ca1dc/ff1c3736.png' srcset='/static/8db07d2cda121d084fdfc6db4439bb71/e7570/ff1c3736.png 170w,\n/static/8db07d2cda121d084fdfc6db4439bb71/f46e7/ff1c3736.png 340w,\n/static/8db07d2cda121d084fdfc6db4439bb71/ca1dc/ff1c3736.png 680w,\n/static/8db07d2cda121d084fdfc6db4439bb71/02d09/ff1c3736.png 1020w,\n/static/8db07d2cda121d084fdfc6db4439bb71/9d567/ff1c3736.png 1360w,\n/static/8db07d2cda121d084fdfc6db4439bb71/b06e5/ff1c3736.png 1928w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">npx -v</code> 명령어를 통해 잘 설치되었는지 확인해본다.</p>\n<h3>gatsby-cli 설치하기</h3>\n<p>gatsby 명령어를 사용하기 위해 gatsby-cli를 설치한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> <span class=\"token parameter variable\">-g</span> gatsby-cli</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/84ae3d9eb6ca065dde7c9f606b236fe3/a75c2/6494ac93.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 8.235294117647058%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAARUlEQVR42pXMwQkAIQwAwQQUiZATUVAh/be5Xgs+5jtyzqG1RimFnDNmRkoJEXnivfONgcw5iQjWWrg7e29qrc+hqKK/C1iIKmb4JjKzAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='6494ac93' title='' src='/static/84ae3d9eb6ca065dde7c9f606b236fe3/ca1dc/6494ac93.png' srcset='/static/84ae3d9eb6ca065dde7c9f606b236fe3/e7570/6494ac93.png 170w,\n/static/84ae3d9eb6ca065dde7c9f606b236fe3/f46e7/6494ac93.png 340w,\n/static/84ae3d9eb6ca065dde7c9f606b236fe3/ca1dc/6494ac93.png 680w,\n/static/84ae3d9eb6ca065dde7c9f606b236fe3/02d09/6494ac93.png 1020w,\n/static/84ae3d9eb6ca065dde7c9f606b236fe3/9d567/6494ac93.png 1360w,\n/static/84ae3d9eb6ca065dde7c9f606b236fe3/a75c2/6494ac93.png 1938w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">gatsby -v</code> 명령어를 통해 잘 설치되었는지 확인해본다.</p>\n<h3>Gatsby 사이트 생성</h3>\n<blockquote>\n<p>여기서부터는 <a href=\"https://hoodie.gatsbyjs.io/quick-start-kr/\">Hudi의 Gatsby 환경 구성하기</a>를 따라가는 내용입니다.</p>\n</blockquote>\n<blockquote>\n<p>환경은 Pium의 프로젝트 환경에 맞게 진행됩니다.</p>\n</blockquote>\n<p>gatsby를 이용하여 새로운 사이트를 생성한다.\n이때 <code class=\"language-text\">gatsby-starter-hoodie</code>를 참고하여 구성한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"node\"><pre class=\"language-node\"><code class=\"language-node\">npx gatsby new pium-official.github.io https://github.com/devHudi/gatsby-starter-hoodie</code></pre></div>\n<h3>프로젝트 시작해보기</h3>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token builtin class-name\">cd</span> pium-official.github.io\n\n<span class=\"token function\">npm</span> run start</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/f8aaf9178a3da884c1aeadbbdb37c2d8/8c935/19f5a8e2.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 6.470588235294117%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAT0lEQVR42h3FQQqAIBRAwS+5MQIXEZlJYlgpQbTq/jd7RYthxM4Ju560+aarD92S8PXG7xfhWPCpp9TCljPOOYwxiAii1H+jNUMIjDEyfV4QoRmHqZ6PpQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='19f5a8e2' title='' src='/static/f8aaf9178a3da884c1aeadbbdb37c2d8/ca1dc/19f5a8e2.png' srcset='/static/f8aaf9178a3da884c1aeadbbdb37c2d8/e7570/19f5a8e2.png 170w,\n/static/f8aaf9178a3da884c1aeadbbdb37c2d8/f46e7/19f5a8e2.png 340w,\n/static/f8aaf9178a3da884c1aeadbbdb37c2d8/ca1dc/19f5a8e2.png 680w,\n/static/f8aaf9178a3da884c1aeadbbdb37c2d8/02d09/19f5a8e2.png 1020w,\n/static/f8aaf9178a3da884c1aeadbbdb37c2d8/9d567/19f5a8e2.png 1360w,\n/static/f8aaf9178a3da884c1aeadbbdb37c2d8/8c935/19f5a8e2.png 1940w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">localhost:8000</code>으로 프로젝트가 열리는 모습을 볼 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/3a3e39f1ad96077a4fb4941bbdb6c9bf/ee57e/7810b698.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 57.05882352941176%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABZUlEQVR42n1S7XKCMBDkCTq2QhJMQAiED9HO1IpMa/un7/9O27sg1aLtj52By93e3t4Fbdsiz3PEcYzVauVhjIbWGlJK/8/f09scXLder5FlmUcghPCF/DBhsXhEGEYoy9IXCRFBKfUL1/nX8WDqMimMogiZW0KnIYbhDfvXA7a7HZxzKIrCN2FFc9IJwTzAiYunB4RiSVYU2HRbtJvuZswfzBTfEGq9QmIMjDa+WApJEBeP4zPOxOyvofy7hFLGcHmMz6HFy/6Avu9R17W3gX2+xuiZpEXksGTFpDKYj5skBl23Qd00qIiMUbJ/5F1VVd7L8gyegv3k3EllMPeDHxwVNk07EhUlLcL5ZThXeWKOZ3Rqimr4VLa7ZxKSjlv+7aEibzSsLT2BUjGdT3gz7mVkEpAkSEnlXQ+5o9EKNtNI0/FYrbVe9d2jJqj/tixoKZWV+Do1OA7vOB57nE4fnnR+/H/hG05yJPI5xu6PAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='7810b698' title='' src='/static/3a3e39f1ad96077a4fb4941bbdb6c9bf/ca1dc/7810b698.png' srcset='/static/3a3e39f1ad96077a4fb4941bbdb6c9bf/e7570/7810b698.png 170w,\n/static/3a3e39f1ad96077a4fb4941bbdb6c9bf/f46e7/7810b698.png 340w,\n/static/3a3e39f1ad96077a4fb4941bbdb6c9bf/ca1dc/7810b698.png 680w,\n/static/3a3e39f1ad96077a4fb4941bbdb6c9bf/02d09/7810b698.png 1020w,\n/static/3a3e39f1ad96077a4fb4941bbdb6c9bf/9d567/7810b698.png 1360w,\n/static/3a3e39f1ad96077a4fb4941bbdb6c9bf/ee57e/7810b698.png 2576w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h3>블로그 커스텀하기</h3>\n<p>해당 부분은 원작자의 <a href=\"https://hoodie.gatsbyjs.io/quick-start-kr/\">🚀 2.빠르게 시작하기</a>를 참고하여 진행하면 된다.</p>\n<h3>GitHub Pages로 배포하기</h3>\n<p>이제 배포할 페이지를 다 만들었다!\nGitHub Pages를 이용해 배포를 진행해보자.</p>\n<p>우선 GitHub Repository를 생성한다.</p>\n<blockquote>\n<p>pium-official Organization에서 <code class=\"language-text\">pium-official.github.io</code> 레포지토리를 생성했다.</p>\n</blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/1c0299f5df6017963eedb169a138c357/100fa/b084df05.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 24.705882352941178%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA9ElEQVR42lWQy1KEMBBFwwBDQQIhIS9e4oiWzsqaKlf+hP//NddOkIWLU307/chN2OBX+PmGTgfkV4FLyVM89UleCtRC49r0YHmNrGiQXYisQUG1ouqwPb+ByWGEVB7TtGEcn9APAVJ7KDsj1lqqmXGDdiscXdyqAN4ZVFxBzB79PoN7i6pRKGsJJnqfhpRdYaYdyt8gzZIcx/MYw7In1pePQ687BNWW7zvef74QHq9oJfWSARaHRO/gqNFunzDbA2a5Ywjkllxqdyzn0iZibyTOcWHR1AaiPfIIO4UcCO3QKUu4tKTTY3r2of+T3NP3JP7yyC/NIXnzT5u+QwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='b084df05' title='' src='/static/1c0299f5df6017963eedb169a138c357/ca1dc/b084df05.png' srcset='/static/1c0299f5df6017963eedb169a138c357/e7570/b084df05.png 170w,\n/static/1c0299f5df6017963eedb169a138c357/f46e7/b084df05.png 340w,\n/static/1c0299f5df6017963eedb169a138c357/ca1dc/b084df05.png 680w,\n/static/1c0299f5df6017963eedb169a138c357/02d09/b084df05.png 1020w,\n/static/1c0299f5df6017963eedb169a138c357/9d567/b084df05.png 1360w,\n/static/1c0299f5df6017963eedb169a138c357/100fa/b084df05.png 2836w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">git</span> remote <span class=\"token function\">add</span> origin https://github.com/pium-official/pium-official.github.io</code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"node\"><pre class=\"language-node\"><code class=\"language-node\">npm run deploy-gh</code></pre></div>\n<p>위 명령어를 수행하면 팀 레포지토리에 gh-pages 브랜치가 생성되고 build된 결과물이 올라온다. 해당 파일을 기준으로 GitHub Pages에서 배포를 진행한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/4ff57d82ac33909a4f4b745b50920314/893ad/3db58ec3.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 52.352941176470594%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABuElEQVR42lWS2XLbMAxF1WZpHC+yJO4SSe1u7GTcp/ah//9dtwAaT+sHDDggcXABsNgdFLRLeN6U2OxqlLUT//htj6eXAx7I85nvX7aV2PNriS+PrygeNuK/Pm3FW59Q2BDR9QvZijy9wYQeZeNwVAGVbunsxQ5UyLYDQpoR2hnKJNQmQvlM7zrJ25YaRWU6JAJ1wwk+TvKIVe6OmsyIMcyEDN9N8HmG/7Ui/Fhhw4DaRinckGcrOHi5/sSwfpDCM/rlgjieocMI7XtwwcZl5OUdeb4grxeMv68IHydSuwiQ7ahaKmxRNC5Kq64bRTZDXKS28kqKR6huEWWsguGc7PyERiXKmUTVvrLSBfuCH/ZUmWHcHs9B01xCXmQEKtI40kpjsNhRwp68TwSiRfI9AzmPYQLk4afxTR5IJTI+G1oAg2tS42gJR1rUnlSwEo6zWkWjqD8V3gEjLYSV3mQrAtrPEdSelkBzZuDhPyAX5Z9R6XCvkEHz96tAbkEGtf1JvohOZ6R8IqAVhfwDHLdK6lSY0VAHdwoZOKzvArwp1AS07SSxyg0w/u/f5Hv2sgwCetpyZf4the0P+g7+yRmHZbcAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='3db58ec3' title='' src='/static/4ff57d82ac33909a4f4b745b50920314/ca1dc/3db58ec3.png' srcset='/static/4ff57d82ac33909a4f4b745b50920314/e7570/3db58ec3.png 170w,\n/static/4ff57d82ac33909a4f4b745b50920314/f46e7/3db58ec3.png 340w,\n/static/4ff57d82ac33909a4f4b745b50920314/ca1dc/3db58ec3.png 680w,\n/static/4ff57d82ac33909a4f4b745b50920314/02d09/3db58ec3.png 1020w,\n/static/4ff57d82ac33909a4f4b745b50920314/9d567/3db58ec3.png 1360w,\n/static/4ff57d82ac33909a4f4b745b50920314/893ad/3db58ec3.png 2826w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<blockquote>\n<p>GitHub Pages에서 배포 기준으로 잡는 브랜치를 확인 &#x26; 변경하고 싶다면 Settings - Pages 에서 다음 항목을 확인하면 된다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/18b74e74f5e47aade85df87810ea9317/17112/b9a5c99c.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 52.352941176470594%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABnUlEQVR42nVS2XLiQBDjIZvsBnx7Do8xY3vsACFUjv//N0U9BopUZR9U4zlaUre8Wqc1stLiOamQ5AbrTGGTa+RVQzg8p9xn+naeFQZKb/HwlOLh74I/Fzz+S7EqeGnaAQkfpiROWGS3I8LhHX48UExHwbyyyGqHUqAccq7X90lpLrAkVC2cn+F2EyrT0Y1Crj3a8I5h/wEXPuK3G89RyBCyyns/vcaaSExDglVBpeHlDbtwRMY2pW1ZlQuo3ITMTChNT/U2tiyONhdXbjdHgR+EJRW6YX872BQamiPY8qwb96hth3WulnspvKJY5i241kZCsdxxVtcZbmqNnvvT2xcCW5IA0rRCRtJcwhJQNL0j+UloPQ4sjsGQUB5O/YTz+QvzdMTL/IpAp72f0G0HODfA6B6qlG5+I2wGNAyl0C2k/VI79Cw8nj7p/Iyw/8Q0n6B5V7CgoGhFspoufyUs2ZJnIJKadn0cuCJ55zx2JG6bHpVenPlugLUjajMgN4GzHpcg7wkLtRBKMPILyW9TNx6ermwX6MLewdyQ/AffNGD9TWsYcJIAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='b9a5c99c' title='' src='/static/18b74e74f5e47aade85df87810ea9317/ca1dc/b9a5c99c.png' srcset='/static/18b74e74f5e47aade85df87810ea9317/e7570/b9a5c99c.png 170w,\n/static/18b74e74f5e47aade85df87810ea9317/f46e7/b9a5c99c.png 340w,\n/static/18b74e74f5e47aade85df87810ea9317/ca1dc/b9a5c99c.png 680w,\n/static/18b74e74f5e47aade85df87810ea9317/02d09/b9a5c99c.png 1020w,\n/static/18b74e74f5e47aade85df87810ea9317/9d567/b9a5c99c.png 1360w,\n/static/18b74e74f5e47aade85df87810ea9317/17112/b9a5c99c.png 2854w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n</blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/69fbabab3e1202e22cc8388012035d74/100fa/1877666d.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 24.705882352941178%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA90lEQVR42m1PXXOCQAykiiICcnzeHXDIV0Vtp7VP/f+/bJtk6kwf+rCTSTbZ3XiqsNDtiCitkOYGpXYI4xybbYjtLsLmF/4+lnkYF9gdTnjxjwTmYvhBIrDtAI9FYlUjOlUoTA9VNjBUTTMiq1okSiPJNE609wSHCI4KBzHIpQZRhn2Ywrs/vtHPqxwPr28wbkLjZlzuX9DdRAYk+kfsiZRE87pDZc8odI+UgijS8Gy/wHQjkU6WOE1N/XJ7kNENzNfthJIOSzsIKgZ9oLtZOK7GLTLz3LiiG1Y5YDF+MbMtxss7lusn5usHLCVm9yQz/0CLAafl/gcTmX0AJRGr7wAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='1877666d' title='' src='/static/69fbabab3e1202e22cc8388012035d74/ca1dc/1877666d.png' srcset='/static/69fbabab3e1202e22cc8388012035d74/e7570/1877666d.png 170w,\n/static/69fbabab3e1202e22cc8388012035d74/f46e7/1877666d.png 340w,\n/static/69fbabab3e1202e22cc8388012035d74/ca1dc/1877666d.png 680w,\n/static/69fbabab3e1202e22cc8388012035d74/02d09/1877666d.png 1020w,\n/static/69fbabab3e1202e22cc8388012035d74/9d567/1877666d.png 1360w,\n/static/69fbabab3e1202e22cc8388012035d74/100fa/1877666d.png 2836w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>GitHub Actions 탭에서 <code class=\"language-text\">pages build and deployment</code> 작업이 완료된것을 확인하고 <a href=\"https://pium-official.github.io/\">https://pium-official.github.io/</a> 로 접속해보면 페이지가 성공적으로 배포된것을 확인할 수 있다!!</p>\n<blockquote>\n<p>https:://{팀 레포명}.github.io</p>\n</blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/0787e9418eadd11cad330b5f5be63289/f8159/f35d015e.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 55.294117647058826%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABVElEQVR42o1TS07DQAydI4CaftJJ0vyThkqE/AiqugSOAhyEJQfgGOVmLNghPewpU4WhRCyeLHmc5+dnR5Rlic1mg+VyCdu2FSzLwmKxUOC8hn4fgvNJkiAiBEEAMZvNwNAF8/kcddvAD3w40jnmmPwUoX7XNUJ3l1Li7Pwc97d3eP/8wPPrC9q6RZplpCBFTAocxxklZoihdB61qirs9294eHqE662IxP2Gc3Jss4Ew/ZhOp7AmExU5Jw0PTU+l/NlImF7EcYS+v8F2u0XXdWgJfd9jt9uhKArVSC+MEZMdruselQpTvu/7uKTNr9dr5V2e58gIRXGhYhTFSNMUYRhRvX0g9LwRQlp903aom+aIqm5UjmN5VeGaJuCmh5Hl3yMzoUfdclKXqe0mSrHybPDh2F3+IuRt8qirlafuU9/XEP86G3M5HFmtBv8FYRiqBYwRfgGuPS4RvQQaUgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='f35d015e' title='' src='/static/0787e9418eadd11cad330b5f5be63289/ca1dc/f35d015e.png' srcset='/static/0787e9418eadd11cad330b5f5be63289/e7570/f35d015e.png 170w,\n/static/0787e9418eadd11cad330b5f5be63289/f46e7/f35d015e.png 340w,\n/static/0787e9418eadd11cad330b5f5be63289/ca1dc/f35d015e.png 680w,\n/static/0787e9418eadd11cad330b5f5be63289/02d09/f35d015e.png 1020w,\n/static/0787e9418eadd11cad330b5f5be63289/9d567/f35d015e.png 1360w,\n/static/0787e9418eadd11cad330b5f5be63289/f8159/f35d015e.png 2634w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h3>글 작성하기</h3>\n<p>해당 템플릿에 글을 작성하는 방식은 원작자의 <a href=\"https://hoodie.gatsbyjs.io/writing-guide-kr/\">🤔 3. 작성 가이드</a>를 참고하면 된다.</p>\n<h3>GitHub Actions workflow</h3>\n<p>현재까지 진행한 작업으로는 다음과 같은 흐름으로 배포를 진행할 수 있다.</p>\n<ol>\n<li>로컬에서 글을 작성한다.</li>\n<li>글을 작성한 뒤 <code class=\"language-text\">npm run deploy-gh</code> 명령어를 수행해서 배포를 진행한다.</li>\n</ol>\n<p>위 방식은 혼자서 작업할 때는 문제가 없으나 여러명이 함께 글을 작성하기에는 많이 번거롭다.</p>\n<p>우리는 다음과 같은 방식으로 배포를 하는 방향을 기대하고 있다.</p>\n<ol>\n<li>로컬에서 글을 작성한다.</li>\n<li>글을 작성한 뒤 main 브랜치로 push한다.</li>\n<li>main 브랜치에 작업내용이 push 되었을 때 빌드 및 배포가 자동적으로 이뤄진다.</li>\n</ol>\n<p>위에서 3번 작업내용을 수행하기 위해 GitHub Actions의 workflow 기능을 이용할 수 있다.</p>\n<h3>workflow 작성하기</h3>\n<p><code class=\"language-text\">gatsby-starter-hoodie</code>에서 기본적으로 제공하고 있는 workflow는 다음과 같이 구성되어있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"yml\"><pre class=\"language-yml\"><code class=\"language-yml\"><span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> CI\n\n<span class=\"token key atrule\">on</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">pull_request</span><span class=\"token punctuation\">:</span>\n    <span class=\"token key atrule\">branches</span><span class=\"token punctuation\">:</span>\n      <span class=\"token punctuation\">-</span> main\n\n<span class=\"token key atrule\">jobs</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">build</span><span class=\"token punctuation\">:</span>\n    <span class=\"token key atrule\">runs-on</span><span class=\"token punctuation\">:</span> ubuntu<span class=\"token punctuation\">-</span>latest\n    <span class=\"token key atrule\">steps</span><span class=\"token punctuation\">:</span>\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> actions/checkout@v2\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> actions/setup<span class=\"token punctuation\">-</span>node@v2\n        <span class=\"token key atrule\">with</span><span class=\"token punctuation\">:</span>\n          <span class=\"token key atrule\">node-version</span><span class=\"token punctuation\">:</span> 20.3.1\n\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Install node packages\n        <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> yarn\n        \n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Check lint\n        <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> yarn check<span class=\"token punctuation\">:</span>lint\n        \n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Check prettier\n        <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> yarn check<span class=\"token punctuation\">:</span>prettier\n      \n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Build\n        <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> yarn build</code></pre></div>\n<blockquote>\n<p>자세한 구문에 대한 설명 및 내용은 <a href=\"https://docs.github.com/ko/actions/using-workflows/workflow-syntax-for-github-actions\">공식문서</a>를 참고해보면 좋다.</p>\n</blockquote>\n<p>기존에 존재하는 ci.yml 파일은 삭제하고 아래와 같은 deploy.yml을 작성해보자.</p>\n<blockquote>\n<p>workflow에 대한 yml파일의 경로는 반드시 <code class=\"language-text\">.github/workflows</code> 폴더 내부에 존재해야한다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/cef42a7b411892b239eec92aa35a064b/26530/d9fc2f50.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 10%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAhUlEQVR42h2MWQ6CQBQEuYEzw4cGhmUAiSyCBBBxIdH736l84aOS6nSnPRVUaNuhbItxCzq6oeMBk86oqEMfnXRX2QinHBU2suk5BDVHW9D0M2UzcK564uyCp5MRP3/LwYSfrbvvFBsme+Lbaj836V28xiSTMKIlh65m/fxYXl/Gx4YrW/5DFDhxP4DLxgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='d9fc2f50' title='' src='/static/cef42a7b411892b239eec92aa35a064b/ca1dc/d9fc2f50.png' srcset='/static/cef42a7b411892b239eec92aa35a064b/e7570/d9fc2f50.png 170w,\n/static/cef42a7b411892b239eec92aa35a064b/f46e7/d9fc2f50.png 340w,\n/static/cef42a7b411892b239eec92aa35a064b/ca1dc/d9fc2f50.png 680w,\n/static/cef42a7b411892b239eec92aa35a064b/26530/d9fc2f50.png 944w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n</blockquote>\n<div class=\"gatsby-highlight\" data-language=\"yml\"><pre class=\"language-yml\"><code class=\"language-yml\"><span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Deploy\n\n<span class=\"token key atrule\">on</span><span class=\"token punctuation\">:</span> <span class=\"token comment\"># 어떤 작업이 수행될 때 deploy.yml 작업이 수행된다. (트리거)</span>\n  <span class=\"token key atrule\">push</span><span class=\"token punctuation\">:</span> <span class=\"token comment\"># push 작업이 수행될 때</span>\n    <span class=\"token key atrule\">branches</span><span class=\"token punctuation\">:</span> <span class=\"token comment\"># 특정 브랜치를 대상으로</span>\n      <span class=\"token punctuation\">-</span> main\n\n<span class=\"token key atrule\">permissions</span><span class=\"token punctuation\">:</span> <span class=\"token comment\"># github action이 수행되는 환경에서 특정 권한을 준다</span>\n  <span class=\"token key atrule\">contents</span><span class=\"token punctuation\">:</span> write\n\n<span class=\"token key atrule\">jobs</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">build</span><span class=\"token punctuation\">:</span>\n    <span class=\"token key atrule\">runs-on</span><span class=\"token punctuation\">:</span> ubuntu<span class=\"token punctuation\">-</span>latest\n    <span class=\"token key atrule\">steps</span><span class=\"token punctuation\">:</span>\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> actions/checkout@v2\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> actions/setup<span class=\"token punctuation\">-</span>node@v2\n        <span class=\"token key atrule\">with</span><span class=\"token punctuation\">:</span>\n          <span class=\"token key atrule\">node-version</span><span class=\"token punctuation\">:</span> 20.3.1\n\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Install node packages\n        <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> yarn\n\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Build\n        <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> yarn build\n\n      <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Deploy 🚀\n        <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> JamesIves/github<span class=\"token punctuation\">-</span>pages<span class=\"token punctuation\">-</span>deploy<span class=\"token punctuation\">-</span>action@v4\n        <span class=\"token key atrule\">with</span><span class=\"token punctuation\">:</span>\n          <span class=\"token key atrule\">folder</span><span class=\"token punctuation\">:</span> public</code></pre></div>\n<blockquote>\n<p><code class=\"language-text\">JamesIves/github-pages-deploy-action@v4</code> 작업에서 수행하는 내용 중 쓰기권한을 요구하는 작업이 있기 때문에 permissions 설정을 해야한다.\n<a href=\"https://github.com/JamesIves/github-pages-deploy-action/issues/1110\">관련 이슈 - Failed with exit code 128, Permission Denied</a></p>\n</blockquote>\n<p>위 deploy.yml 파일을 작성했다면 프로젝트 내부에서 변경사항에 대한 commit을 수행하고 git push를 해본다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">git</span> branch <span class=\"token parameter variable\">-m</span> main\n\n<span class=\"token function\">git</span> push origin main</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/f79aa88d3917ca03004874f6ba038c6e/48458/0491f96f.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 31.176470588235293%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABLklEQVR42j2Q23qCMBCEaatW5Qw5kBAEQVTUr970/V9tOklrL/5vA9nMzk4UZwKyOWCf1ohziUq0SFlXmwTrbYYPVs/qM8U2qbCNS2x2Od5We7z/4e/e2WPbAZEXy2uDpFAw3QShO7TuiHG+Q5g+3OVV809GSmGxo3icSaSFxp6m/LA1B0Xnxzf604JCWrhhhuKUuunRTTfI9sj/DilFM4p48leVLWoOF+z1tVIuELnhgn5aoPk4qzRiOrVtj8ftC/N0Re9GHOjY0W3LbV74b2WPAe0mMgbxyKt7/Gq/ghrGWMzXB3nivDxhGUXhVy91ICsbqFLxrJAyAmkGlHTs44jM4YTDeA0ZpmxO2GwpuFzuOM83TOMFmnEorikqBUFhITs0PBchUxOyLrmuN/UDV5KXOKv+BzIAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='0491f96f' title='' src='/static/f79aa88d3917ca03004874f6ba038c6e/ca1dc/0491f96f.png' srcset='/static/f79aa88d3917ca03004874f6ba038c6e/e7570/0491f96f.png 170w,\n/static/f79aa88d3917ca03004874f6ba038c6e/f46e7/0491f96f.png 340w,\n/static/f79aa88d3917ca03004874f6ba038c6e/ca1dc/0491f96f.png 680w,\n/static/f79aa88d3917ca03004874f6ba038c6e/02d09/0491f96f.png 1020w,\n/static/f79aa88d3917ca03004874f6ba038c6e/9d567/0491f96f.png 1360w,\n/static/f79aa88d3917ca03004874f6ba038c6e/48458/0491f96f.png 2842w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>위 내용을 대략적으로 설명해보자면 다음과 같다.</p>\n<p>main 브랜치에 대한 코드를 build해보고 성공한다면 결과물을 gh-pages 브랜치로 배포한다.</p>\n<p>이제 글을 작성하고 main 브랜치로 push하기만 하면 배포까지 자동으로 수행된다.\n로컬에서 <code class=\"language-text\">npm run deploy-gh</code>는 더이상 사용할 필요가 없다.</p>\n<h2>결론</h2>\n<p>블로그를 생성하고 배포하고 자동화하는 과정까지 차근차근 진행해봤다.</p>\n<p>여러버 삽질을 거친 끝에 완성했기 때문에 더 애정이 많이 가는 것 같다. 👍</p>\n<h2>Reference</h2>\n<p><a href=\"https://hoodie.gatsbyjs.io/\">https://hoodie.gatsbyjs.io/</a>\n<a href=\"https://docs.github.com/ko/actions/using-workflows/workflow-syntax-for-github-actions\">https://docs.github.com/ko/actions/using-workflows/workflow-syntax-for-github-actions</a>\n<a href=\"https://studium-anywhere.tistory.com/21\">https://studium-anywhere.tistory.com/21</a></p>","frontmatter":{"title":"피움 블로그 생성과정","date":"July 09, 2023","update":"July 09, 2023","tags":["블로그","세팅"],"series":null},"fields":{"slug":"/blog-starter/","readingTime":{"minutes":11.09}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}},"next":{"fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},"pageContext":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","series":null,"previousPostId":"28f1d87e-d3fc-5567-8531-57649652864f","nextPostId":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/bundle-analyze/page-data.json b/page-data/bundle-analyze/page-data.json
index 3a3be642..9900ef85 100644
--- a/page-data/bundle-analyze/page-data.json
+++ b/page-data/bundle-analyze/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/bundle-analyze/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. 사건의 발단 이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국  파일의 크기를 보니 무려 16m…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/hozzijeong\">클린</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>사건의 발단</h2>\n<p>이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국 <code class=\"language-text\">bundle.js</code> 파일의 크기를 보니 무려 16m나 되었던 것입니다.</p>\n<p><img src=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/72ec258f-77e0-41aa-8bcd-c4c3d3b0410e\" alt=\"image\"></p>\n<p>왜 이렇게 크기가 크지? 라는 생각을 하며 크게 2가지의 경우를 생찾아봤습니다. 하지만 다음과 같은 이유로 원인이 아님을 알았습니다.</p>\n<ol>\n<li>minify가 되지 않았다 → webpack 4 이상을 사용하면서 자동으로 <code class=\"language-text\">production</code> 일때는 자동으로 설정</li>\n<li>css 파일 크기가 너무 큼 → <code class=\"language-text\">styled-component</code>를 사용하기 때문에 .css 가 없음.</li>\n</ol>\n<p>따라서 <code class=\"language-text\">bundle.js</code>의 성능을 확인해 볼 필요가 있었고 검색하던 도중 <a href=\"https://www.npmjs.com/package/webpack-bundle-analyzer\">webpack-bundle-analyzer</a>라는 라이브러리를 알게되었습니다.</p>\n<h2>Webpack Bundle Analyzer</h2>\n<p>webpack을 통해 build한 bundle의 성능을 측정하는 라이브러리로 모든 번들에 대한 트리를 시각화 해서 보여주는 이점을 갖고 있습니다. 사용법은 매우 간단합니다. 우선 설치를 해줍니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"># <span class=\"token constant\">NPM</span>\nnpm install <span class=\"token operator\">--</span>save<span class=\"token operator\">-</span>dev webpack<span class=\"token operator\">-</span>bundle<span class=\"token operator\">-</span>analyzer\n# Yarn\nyarn add <span class=\"token operator\">-</span><span class=\"token constant\">D</span> webpack<span class=\"token operator\">-</span>bundle<span class=\"token operator\">-</span>analyzer</code></pre></div>\n<p>설치를 한 뒤 <code class=\"language-text\">webpack.config.js</code> 파일 내부에서 플러그인을 사용해 줍니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token keyword\">const</span> BundleAnalyzerPlugin <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'webpack-bundle-analyzer'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>BundleAnalyzerPlugin<span class=\"token punctuation\">;</span>\n\nmodule<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token literal-property property\">plugins</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token keyword\">new</span> <span class=\"token class-name\">BundleAnalyzerPlugin</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>플러그인 안에 옵션을 설정할 수 있는데, <a href=\"https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin\">여기</a>에서 옵션에 대한 정보를 확인할 수 있습니다.</p>\n<p>위에 플러그인 옵션에서 <code class=\"language-text\">generateStatsFile</code> 을 <code class=\"language-text\">true</code> 로 설정한 다음에 <code class=\"language-text\">package.json</code>에 <code class=\"language-text\">scripts</code> 에다음 명령어를 통해 실행할 수 있습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token literal-property property\">analyze</span><span class=\"token operator\">:</span> webpack<span class=\"token operator\">-</span>bundle<span class=\"token operator\">-</span>analyzer bundle<span class=\"token operator\">/</span>output<span class=\"token operator\">/</span>path<span class=\"token operator\">/</span>stats<span class=\"token punctuation\">.</span>json</code></pre></div>\n<p><img src=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/6bc524c4-4866-4ebe-9daa-95035e0c0dd5\" alt=\"image\"></p>\n<p>실행한 뒤에 bundle을 분석해 봤더니 react-icons에서 15.3m나 차지하고 있었습니다. 드디어 문제의 원흉을 찾아냈습니다. 그렇다면 react-icons를 대체할 수 있는 방법이 있을까요?</p>\n<h3>Icons</h3>\n<p><a href=\"https://icones.js.org/collection/all?s=material-symbols:cancel\">여기</a>에 가시면 다양한 아이콘들을 찾아볼 수 있습니다. 원하는 아이콘을 선택한 다음에 SVG, Component 등으로 코드를 반환해 줍니다. 이를 통해서 react-icons를 제거하고 icons를 사용해서 아이콘을 대체할 수 있었습니다.</p>","frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석","date":"July 28, 2023","update":"July 28, 2023","tags":["bundle","최적화"],"series":null},"fields":{"slug":"/bundle-analyze/","readingTime":{"minutes":3.25}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}},"next":{"fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},"pageContext":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","series":null,"previousPostId":"1a03734e-d413-553f-9152-1dad2fc4acca","nextPostId":"707f8ffb-1409-5c27-b15a-5661b235c226"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/bundle-analyze/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. 사건의 발단 이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국  파일의 크기를 보니 무려 16m…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/hozzijeong\">클린</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>사건의 발단</h2>\n<p>이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국 <code class=\"language-text\">bundle.js</code> 파일의 크기를 보니 무려 16m나 되었던 것입니다.</p>\n<p><img src=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/72ec258f-77e0-41aa-8bcd-c4c3d3b0410e\" alt=\"image\"></p>\n<p>왜 이렇게 크기가 크지? 라는 생각을 하며 크게 2가지의 경우를 생찾아봤습니다. 하지만 다음과 같은 이유로 원인이 아님을 알았습니다.</p>\n<ol>\n<li>minify가 되지 않았다 → webpack 4 이상을 사용하면서 자동으로 <code class=\"language-text\">production</code> 일때는 자동으로 설정</li>\n<li>css 파일 크기가 너무 큼 → <code class=\"language-text\">styled-component</code>를 사용하기 때문에 .css 가 없음.</li>\n</ol>\n<p>따라서 <code class=\"language-text\">bundle.js</code>의 성능을 확인해 볼 필요가 있었고 검색하던 도중 <a href=\"https://www.npmjs.com/package/webpack-bundle-analyzer\">webpack-bundle-analyzer</a>라는 라이브러리를 알게되었습니다.</p>\n<h2>Webpack Bundle Analyzer</h2>\n<p>webpack을 통해 build한 bundle의 성능을 측정하는 라이브러리로 모든 번들에 대한 트리를 시각화 해서 보여주는 이점을 갖고 있습니다. 사용법은 매우 간단합니다. 우선 설치를 해줍니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"># <span class=\"token constant\">NPM</span>\nnpm install <span class=\"token operator\">--</span>save<span class=\"token operator\">-</span>dev webpack<span class=\"token operator\">-</span>bundle<span class=\"token operator\">-</span>analyzer\n# Yarn\nyarn add <span class=\"token operator\">-</span><span class=\"token constant\">D</span> webpack<span class=\"token operator\">-</span>bundle<span class=\"token operator\">-</span>analyzer</code></pre></div>\n<p>설치를 한 뒤 <code class=\"language-text\">webpack.config.js</code> 파일 내부에서 플러그인을 사용해 줍니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token keyword\">const</span> BundleAnalyzerPlugin <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'webpack-bundle-analyzer'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>BundleAnalyzerPlugin<span class=\"token punctuation\">;</span>\n\nmodule<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token literal-property property\">plugins</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token keyword\">new</span> <span class=\"token class-name\">BundleAnalyzerPlugin</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>플러그인 안에 옵션을 설정할 수 있는데, <a href=\"https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin\">여기</a>에서 옵션에 대한 정보를 확인할 수 있습니다.</p>\n<p>위에 플러그인 옵션에서 <code class=\"language-text\">generateStatsFile</code> 을 <code class=\"language-text\">true</code> 로 설정한 다음에 <code class=\"language-text\">package.json</code>에 <code class=\"language-text\">scripts</code> 에다음 명령어를 통해 실행할 수 있습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token literal-property property\">analyze</span><span class=\"token operator\">:</span> webpack<span class=\"token operator\">-</span>bundle<span class=\"token operator\">-</span>analyzer bundle<span class=\"token operator\">/</span>output<span class=\"token operator\">/</span>path<span class=\"token operator\">/</span>stats<span class=\"token punctuation\">.</span>json</code></pre></div>\n<p><img src=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/6bc524c4-4866-4ebe-9daa-95035e0c0dd5\" alt=\"image\"></p>\n<p>실행한 뒤에 bundle을 분석해 봤더니 react-icons에서 15.3m나 차지하고 있었습니다. 드디어 문제의 원흉을 찾아냈습니다. 그렇다면 react-icons를 대체할 수 있는 방법이 있을까요?</p>\n<h3>Icons</h3>\n<p><a href=\"https://icones.js.org/collection/all?s=material-symbols:cancel\">여기</a>에 가시면 다양한 아이콘들을 찾아볼 수 있습니다. 원하는 아이콘을 선택한 다음에 SVG, Component 등으로 코드를 반환해 줍니다. 이를 통해서 react-icons를 제거하고 icons를 사용해서 아이콘을 대체할 수 있었습니다.</p>","frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석","date":"July 28, 2023","update":"July 28, 2023","tags":["bundle","최적화"],"series":null},"fields":{"slug":"/bundle-analyze/","readingTime":{"minutes":3.25}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}},"next":{"fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},"pageContext":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","series":null,"previousPostId":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","nextPostId":"1a03734e-d413-553f-9152-1dad2fc4acca"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/ci-cd-setting/page-data.json b/page-data/ci-cd-setting/page-data.json
index f60120b3..47e39407 100644
--- a/page-data/ci-cd-setting/page-data.json
+++ b/page-data/ci-cd-setting/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/ci-cd-setting/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 이번 피움 서비스에서 CI/CD를 적용하기 위해 Jekins와 Github Webhook을 이용했습니다. 본 글에서는 Jenkins와 Github Webhook을 이용한 SpringBoot 서버 자동 빌드, 자동 배포 과정을 다루겠습니다. Jenkins 설치 과정은 피움 팀 젠킨스 설치하기 를 참고하…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Kim0914\">그레이</a>'가 작성했습니다.</p>\n</blockquote>\n<p>이번 피움 서비스에서 CI/CD를 적용하기 위해 Jekins와 Github Webhook을 이용했습니다.</p>\n<p>본 글에서는 Jenkins와 Github Webhook을 이용한 SpringBoot 서버 자동 빌드, 자동 배포 과정을 다루겠습니다.</p>\n<p>Jenkins 설치 과정은 <a href=\"https://pium-official.github.io/jenkins-setting/\">피움 팀 젠킨스 설치하기</a> 를 참고하시면 됩니다 !</p>\n<p>작업 환경</p>\n<ul>\n<li>인스턴스: AWS EC2 t4g.small</li>\n<li>OS: Ubuntu 22.04.2 LTS</li>\n<li>RAM: 2GB</li>\n</ul>\n<h2>Jenkins 접속</h2>\n<p>젠킨스를 접속하는 방법은 간단합니다. 젠킨스를 설치한 인스턴스 public IP와 port를 주소창에 입력하면 쉽게 접근할 수 있습니다.</p>\n<p>정상적으로 접속하면 다음과 같은 화면을 만나게 됩니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/714cdc2e70d78f318a24f0bfa41486a1/bbbf7/img.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 49.411764705882355%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABMUlEQVR42q1RW27CMBD0zYB+0R/6i9Qf1CPQA8FpEPQqCIhD/Fzb091NW6kPVUJipVU22cl4Zmyel0usVi+Yzx8xnc4wmz3825PJFJvNFvv9AbvdDofDG9brV/1/sXiCsf0VznnU2n51KfXPOWfSTilrE41zjAlmGAYeIj6rcWeqSnBL5TySm9PpjPP5wiePBPJ0PsINHrZ3DCwIIaHreoTISliZtT27irrzjJVd5B1RgRG7l0sHKqSEVBmUPIhPtAODWGlhYCckgdDYghsc+iFATKSUIC4LR5HYuiqUE9Vua6owkuRSEXJVoJT3gdWVj7wSuwgczfgu2Ym6LITWXtWSyB9lE+c3ym/te0ayCyF+kcbIKkvRO5DvgjHH40lzEEUp0c2X8bNMCEGt3qsM7lzvFp3wHPm6DicAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img' title='' src='/static/714cdc2e70d78f318a24f0bfa41486a1/ca1dc/img.png' srcset='/static/714cdc2e70d78f318a24f0bfa41486a1/e7570/img.png 170w,\n/static/714cdc2e70d78f318a24f0bfa41486a1/f46e7/img.png 340w,\n/static/714cdc2e70d78f318a24f0bfa41486a1/ca1dc/img.png 680w,\n/static/714cdc2e70d78f318a24f0bfa41486a1/02d09/img.png 1020w,\n/static/714cdc2e70d78f318a24f0bfa41486a1/bbbf7/img.png 1280w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<hr>\n<h2>Github Webhook 설정</h2>\n<p>먼저 Webhook을 설정하기 위해 현재 프로젝트의 깃허브 레포지토리로 이동합니다.</p>\n<p>레포지토리의 Settings를 눌러서 접속할 수 있습니다. 이후 왼쪽 메뉴바에 Webhooks를 누르면 아래와 같은 화면을 볼 수 있습니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/88c4995821b586b038ddb80cefdee513/bbbf7/img_1.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 54.70588235294118%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABEElEQVR42qVS23KFIAw8//+ZPV7QIngBPRBgmzBqX/pkd2YHAmSTkLw2v2PZHOy8wtgFy+owMw3bozaY+W7d/E07GWx8RikjUEKICf4IOELEJxJeOHEcB1JKl4nID3qlsDmHnDOInVMiZCZRRGRnYQgBk7F1L6iCpRTMy1LpvL8D9L1C23Vo2w5d1/PKVBqNmjAYrmr12PededSgt6BAcynDOHKkWG15IHshEd1roIKYCieBP3ELWjtXBwFlArvgCapgygVqGM/UC9xn509PzwWJS3g3fS1bBDN3sJR/ZCjOnpsh/3Z97lOcgsC31tB6guMxeZrdb1PYf1nXOjJXYx6XLCXKQH+9m8rwCbjOnvAHGGJhDhIh4l4AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 1' title='' src='/static/88c4995821b586b038ddb80cefdee513/ca1dc/img_1.png' srcset='/static/88c4995821b586b038ddb80cefdee513/e7570/img_1.png 170w,\n/static/88c4995821b586b038ddb80cefdee513/f46e7/img_1.png 340w,\n/static/88c4995821b586b038ddb80cefdee513/ca1dc/img_1.png 680w,\n/static/88c4995821b586b038ddb80cefdee513/02d09/img_1.png 1020w,\n/static/88c4995821b586b038ddb80cefdee513/bbbf7/img_1.png 1280w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>오른쪽 상단의 Add Webhook 버튼을 눌러 webhook을 추가하는 화면으로 이동합니다.</p>\n<p>그러면 아래와 같은 Payload URL, Content Type, Secret을 입력하는 폼이 나타납니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/c9f86ed3f14eb7f8d26b35ebd50a1b81/bbbf7/img_2.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 87.64705882352942%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB40lEQVR42p2UaW7bMBCFdfaiPUHQnqYw0D8BcoKibeLIkhftmyWR4qLXGcpWlPzwEgIfuInPnDdjeuu4R5B0CHcH+MEWZX2EGDR6qT4wfEAteoWOxnYc4dWtxLEb0BxbVHWDrhcQ/KGQM4IOnNe4l8M0dwgBKaczIws+v/h4Xm/gb0IEQYDNJkAYhsQWu91+mm+32NDey3qN11d/Xmf8fYZ/YY6sPIKbV7YGSa3RCQ1rLbQ2MMa4MffGvK0xWms3n7GAIjhcd8M4jpAkCQYpYRYi4+mDN3CxjTgJRkmGfZQiL2oUVUNXr9G0PaTSlBz1DntBlXcmwSh2fnVdj4EOyYGNli60e9oseCDBmEIuq5qyTFQVsjynbPefE0yzHJqTQBNjR+ejpV6Tj4pMZ3isT75eFeTD80HuzYQTPAmxn8xNHqZpgizLHJztJE0RRRHiOHbwmrVmyuN4HS/JaxJLkaYZyrJyIQ9KQS24y8O8KMGZ3lL1H+hmhsIerxXdJUEpespwRXVYoChL5HnhyubTgnHaQrZTiXDtqTOUhIFqkv85t3g3e7j684TV70f8+vuEsqkhen5hhLtl23U3F/h8w6+r7/i2+oEvPx9QiWbaXHg43ojF9EB4736FFs6vhl1wT8j/ASXRfKJMUiADAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 2' title='' src='/static/c9f86ed3f14eb7f8d26b35ebd50a1b81/ca1dc/img_2.png' srcset='/static/c9f86ed3f14eb7f8d26b35ebd50a1b81/e7570/img_2.png 170w,\n/static/c9f86ed3f14eb7f8d26b35ebd50a1b81/f46e7/img_2.png 340w,\n/static/c9f86ed3f14eb7f8d26b35ebd50a1b81/ca1dc/img_2.png 680w,\n/static/c9f86ed3f14eb7f8d26b35ebd50a1b81/02d09/img_2.png 1020w,\n/static/c9f86ed3f14eb7f8d26b35ebd50a1b81/bbbf7/img_2.png 1280w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><strong>Payload URL</strong>은 젠킨스가 설치되어 있는 서버의 <code class=\"language-text\">도메인 주소:포트/github-webhook/</code> 을 입력합니다.</p>\n<p>젠킨스의 기본 포트는 8080으로 설정되어 있습니다.</p>\n<p>주소 마지막에 / 는 꼭 넣어주셔야 합니다.</p>\n<p>/를 넣지 않으면 redirect URL로 인식해 정상적으로 동작하지 않습니다.</p>\n<p><strong>Content-type</strong>은 <code class=\"language-text\">application/json</code>을 선택합니다.</p>\n<p>Secret은 비워두면 됩니다.</p>\n<p>마지막으로 어떤 동작에서 webhook을 발생시킬지 선택하면 됩니다.</p>\n<p>저희 팀의 경우에는 <strong>Let me select individual events</strong>를 눌러 <strong>push</strong>와 <strong>pull request</strong>가 발생했을 때 webhook이 동작하도록 선택했습니다.</p>\n<p>모든 선택을 마친 후 <strong>Add webhook 버튼을 누르면 토큰이 발행</strong>됩니다.</p>\n<p>토큰을 생성할 때 토큰 권한도 함께 설정할 수 있는데, 이 때 repo와 admin:repo_hook을 선택해주시면 됩니다.</p>\n<p>만약 CI를 통해 PR에 comment를 남기는 등의 write가 필요없는 경우에는 wirte 권한을 빼줄 수 있을 것 같습니다.</p>\n<p>해당 토큰은 생성 후 재발행되지 않기 때문에 따로 보관을 하는 것이 좋습니다.</p>\n<hr>\n<h2>Credentials 생성</h2>\n<p>다시 젠킨스 화면으로 이동해서 Credentials를 등록하여 Github webhook을 연동 시켜야 합니다.</p>\n<p>젠킨스 메인 화면에서 Jenkins 관리 페이지로 접속하면 Security 탭에 Credentials를 눌러 접속합니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/eeb60e900905f7bc182e9621a1488b8a/baa93/img_3.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 75.88235294117648%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB0ElEQVR42pVTgW6rMAzk/39y0tRRKBQIJJCEEL87A33q1E5bJIsqte8uPrvw3ss0TSKS5Tzrusrl8iVledXf308+UmNcxZhZxnER71cJYZXCGCPOuaeCbdtAYhEOiUH+cgoW3u+dWGsfl2SuqgYKK9w7qEwgyQdZlq5jDYX4R1jrZVmiFG3bo/CGhEFlMwhA+fwyqJKqeVLakDuBcJC+dzIMTr8kmSa/A16vjQKEkDRiTOiLRaIBa5B5XhQ0hKjA1i5yu7XSNC3UzSqCNRnNLajMuQVKNlXD5/K7LB7sI4pnBaU5OW9aRJWsYZDsJFLAum7hlFWGXeWqCePoVIUxk5LwjipZ9LD5u+00pW3vR492ZgbZQghH/+LDlNOYJ6wzjr+K/SnPibzr++F5Bs8cjFm6lBLrm2xNI3BD4BDt3wFfzdLZ+K4b0COv/fSIxP8AMn18So+hH6+VJI5bWXLW3gOmlHSo65qzWKuTfHaCygwTFih03CK4vIIgQSVr2JK3gDMURbDSkN2U3f0NoA6uG7jvOa/oedC5jZLwff1kAHJDOIfcIj49sgDFcrqc8+vVe7eTdL6q7ohWOFpcAK7bK6d/Bchnc1v+PzmqQTn/DPgPV6WWi+Dj700AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 3' title='' src='/static/eeb60e900905f7bc182e9621a1488b8a/ca1dc/img_3.png' srcset='/static/eeb60e900905f7bc182e9621a1488b8a/e7570/img_3.png 170w,\n/static/eeb60e900905f7bc182e9621a1488b8a/f46e7/img_3.png 340w,\n/static/eeb60e900905f7bc182e9621a1488b8a/ca1dc/img_3.png 680w,\n/static/eeb60e900905f7bc182e9621a1488b8a/02d09/img_3.png 1020w,\n/static/eeb60e900905f7bc182e9621a1488b8a/baa93/img_3.png 1236w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Add Credentials를 누릅니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/7a5b569bed511798c15faed3c85bba2b/e4ddf/img_4.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 28.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAkUlEQVR42q2P6w6CMAyFef/HNMi4iGNssHW34wnRxH9i9CQnbZP2a9t0nYJSA92jba9YFoNf1BjjMPQjQSus3bFtAfqu4dyOGAtCSKddayWQoGnx2HxGzgUpFVwGi/G2wvsAkURw/miRjFIIFBFEgjKLQ9xieN00z9Baszl997JI5FXcEN4Ga32G+krPA/FnPQABGNhYehKerAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 4' title='' src='/static/7a5b569bed511798c15faed3c85bba2b/ca1dc/img_4.png' srcset='/static/7a5b569bed511798c15faed3c85bba2b/e7570/img_4.png 170w,\n/static/7a5b569bed511798c15faed3c85bba2b/f46e7/img_4.png 340w,\n/static/7a5b569bed511798c15faed3c85bba2b/ca1dc/img_4.png 680w,\n/static/7a5b569bed511798c15faed3c85bba2b/02d09/img_4.png 1020w,\n/static/7a5b569bed511798c15faed3c85bba2b/e4ddf/img_4.png 1082w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>그러면 아래와 같은 화면을 볼 수 있습니다.</p>\n<p>깃허브 webhook에서 발급받은 토큰을 이용해 크리덴셜 값을 생성합니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/da40bf6b3f114efc1945300dbdb20c63/b034b/img_5.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 83.52941176470588%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsTAAALEwEAmpwYAAABTUlEQVR42qWTa2rDMBCEdfVep397ikJPUGhTTEjikjiWZMmyHp7urpNQAm3iWPCBsezV7OxI1fU31usNVqsKVbVGzhlLlmpbDds5OO/hfY9xHB8uxv8qR0Ws7WAI3wfkMhIFKTN5FjElqJQymuaIEIK0K5uJSXLiHAoJkYLaWBhCGyPPWlu02mCI6aT0NpHq8PdS8EAKnXNXfmC2QvFwKtiSj246ZYjiBT/P9ZBRPAAuwIOx1qKjiZfy+KQVF2ukZS/TLeQHm8vcG6HxzLnlKYe9xOY3gdpno2/BiTijMina7xtst7VMemp9wpym/x+HQ4OvWuNj06LRnhSSkSEMlzY5i3OIpNCFjC5kGaTiF5w5uXpyU8pMroI9RIrNUVOYOcgRhTcWoEohqcFJ23zavTfjL9T7bsDrZ4+QSDbG5Qqf3wyeXvYwfblcuSXrBwWrOPvVlzDPAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 5' title='' src='/static/da40bf6b3f114efc1945300dbdb20c63/ca1dc/img_5.png' srcset='/static/da40bf6b3f114efc1945300dbdb20c63/e7570/img_5.png 170w,\n/static/da40bf6b3f114efc1945300dbdb20c63/f46e7/img_5.png 340w,\n/static/da40bf6b3f114efc1945300dbdb20c63/ca1dc/img_5.png 680w,\n/static/da40bf6b3f114efc1945300dbdb20c63/02d09/img_5.png 1020w,\n/static/da40bf6b3f114efc1945300dbdb20c63/b034b/img_5.png 1072w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><strong>kind</strong>는 <code class=\"language-text\">Username with password</code>를 선택합니다.</p>\n<p><strong>username</strong>에는 깃허브 토큰을 발급받은 <code class=\"language-text\">깃허브 아이디</code>를 작성합니다.</p>\n<p><strong>password</strong>에는 <code class=\"language-text\">해당 토큰 값</code>을 넣으면 됩니다.</p>\n<p><strong>ID</strong>는 젠킨스에서 이 <strong>크리덴셜을 식별하기 위한 이름이므로 크게 의미가 없는 값</strong> 입니다.</p>\n<hr>\n<h3>Gradle 설정</h3>\n<p>현재 우리 팀은 스프링 부트 서버를 빌드하기 때문에 gradle이 반드시 필요합니다.</p>\n<p>젠킨스 메인 화면에서 대시보드 -> 젠킨스 관리 -> Tools를 누르면 아래와 같은 Gradle 설정 화면을 볼 수 있습니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/dc8e606c0d893391862fc9aeb13e7aee/23e59/img_6.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 81.17647058823529%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAABJElEQVR42qWTC26EMAxEOXGP1Vv0GL0Cu2KBEAhJyG9qO/1QqVIbGmlAAfEyY+wuhAClFpRSRP9dXYwJt9uEvh+htQXvWZeBfNHrhmEYsSwaKVXgVbcC3K3HNGtY6wQWQkTO+TrQOo/N7EgEYWNVpU2citIJ0BiDeZ7lhJKLuGtVipQqvgPVZvCYFDl1cN6L05TaFBlccgUOasVAwIXa5zFO2OiALPH/Hpnd8Tcdb/hHeKrjSn/bWksl2OXUllU4cjoBDYGmaRZQ5mfcPg3yNCDpw2EguqXaKb1RC7lal9yur8ipbrwPzVHPi5N99iG7qyNX5MUVsbmObrUGR7g8Hd8m5TgOHN5Vy+dG/anffulPqWGvIp6e73h5XZG8JaexfexOegOyqO+9u/tqSwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 6' title='' src='/static/dc8e606c0d893391862fc9aeb13e7aee/ca1dc/img_6.png' srcset='/static/dc8e606c0d893391862fc9aeb13e7aee/e7570/img_6.png 170w,\n/static/dc8e606c0d893391862fc9aeb13e7aee/f46e7/img_6.png 340w,\n/static/dc8e606c0d893391862fc9aeb13e7aee/ca1dc/img_6.png 680w,\n/static/dc8e606c0d893391862fc9aeb13e7aee/02d09/img_6.png 1020w,\n/static/dc8e606c0d893391862fc9aeb13e7aee/23e59/img_6.png 1098w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Gradle 8.2.1 버전을 추가했습니다.</p>\n<p>추가를 완료하고 바로 페이지를 나가면 안됩니다.</p>\n<p>가장 아래에 있는 파란색 save 버튼을 눌러야 해당 설정이 저장됩니다 !!</p>\n<p>Gradle 설정까지 마치면 빌드할 준비를 모두 마쳤습니다.</p>\n<p>이제 CI를 자동으로 실행하기 위해서는 CI 스크립트를 작성해야 합니다.</p>\n<hr>\n<h2>CI 스크립트 작성</h2>\n<p>드디어 CI를 담당하는 젠킨스 아이템을 생성할 시간입니다 !</p>\n<p>대시보드에서 New Item을 누르면 아래와 같은 화면을 볼 수 있습니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6df00fb04c89f3d1d4140127c5a51b6d/84a58/img_7.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 102.35294117647058%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAACb0lEQVR42p1USXLbMBDkJ/OfPCP/yBtyzCWHRLEsS6QocQUXgCBIWnFnGiIV2lV22Tl0zQKgORsnqCqNKEoQxynC8Aza1o7ouuFDMGZA70YEnXUoigqlqjGMj4IJbhifoXd84N5LOKBQLeq6lccT+l6iE5+dsdbfAkk9YVXl2G1/SMpnPOwPyLJMSHu5YAXdDcaYG2hrkXrWjbmej8OAwGqFIt5IHU/Ybu9xOISiH5EkqUTdCGqpawWlpCylghK9Ep9SSuzS36mq2uvOOQR15xAVjTQkun5llJr1TtIfME2TtxesbSd1HaXeg9R4EvvP0xOmywUBm2Dl8HQ6I81ySfmKJMme6Yw4z4tZljBMdUZnLR6FjAg6Icskld3ugF+bO9zd3WMjMi9KtFqjaRq0bevTZGrNrFOuox8ko2FkU1qD3THFMYr9Az5m3bSQEbT1TEys9TUZ60c9iPIa337GCKUZ53MiKSU+/QX0xfHpGeiPT1fJ2tPH5rDGAYeWkR0Oke/ww8Ped5ANWiJsmn+gvWA5591bhK02iE7J7cuRpE5CpsRxqf2IVHOarR8dEi0dXyTT9oS1XNrtI4Qyeww/Co9om/YWoR9mTd34AWYkhG/CC3hCXuJXMxkFdjaT0chXelEoD/oK8Vnb+zl9CfpJGjTaIj7zYYM0FZJMeaSpkgaVXubSOOr0v7YkbsvhWGh836Yoc9atmy+4lbzCE5l3bBvuvrbtZVAN6kb7rcMDN2PRueZI+hq07mF7LgdfAxpWtkf/6oN3L9iwrPHpyx6fvx6FVP5NPfrDj0Jr2Ys9Ux4H/E47RMrOv9Ljf2OaLvgL59X3vdpjMPoAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 7' title='' src='/static/6df00fb04c89f3d1d4140127c5a51b6d/ca1dc/img_7.png' srcset='/static/6df00fb04c89f3d1d4140127c5a51b6d/e7570/img_7.png 170w,\n/static/6df00fb04c89f3d1d4140127c5a51b6d/f46e7/img_7.png 340w,\n/static/6df00fb04c89f3d1d4140127c5a51b6d/ca1dc/img_7.png 680w,\n/static/6df00fb04c89f3d1d4140127c5a51b6d/84a58/img_7.png 972w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>상단에 아이템 이름을 설정하고 Pipeline을 구축할 것이기 때문에 Pipeline을 선택하고 OK를 누릅니다.</p>\n<p>이후 아래와 같이 아이템을 설정할 수 있는 화면이 나옵니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6dda25c41475b6bea44e52dcc55c70f3/649dd/img_8.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 104.11764705882354%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsTAAALEwEAmpwYAAABnklEQVR42qWU606DQBCFeW1fyjfxh/+MUUOpbbrlfltgd+E4Zy01sdISO8mUksLXM2dmNkjTDFG0xTAMmGMYDMJwg6ZpcCsmfowOTy8feN0qBHGcY7+PobVF31t0nfFA65x/eJymmzkxCZdrkOcVlErAa1k2MMbBudH/iNNDE26Hh48CZKlt28rND8SJuqpuUPfjGTaDl1Q6eZ+MYOkf6V8i/tLjoqxgrPU+G2OvKg0uDJaodI+3zSfUQaGsKl+B1h3aRovH3XrgHFY8zEUVYVaUzaVO3qfRl/c77a2SddejFh8JxOzV6aVrHQ+WZoswJstlevCKWASyEUodZZwK5EUhI1Wdp+BfwOMxwXa7E5W1L3NtLAAnvy2d+Miuci7vAhKgVIyiKH2ZvF+rctnDokKSpB6qtb6vKQzCwjBCluWrYVcG2yETZYRxdLj0azq8uHpl2+F9s0OWprIttd9rzuK/x4bBQ+Egu/x9IJjVnf67KaKEI9O22ie/3wXkEcWmUCWvBNJHHrzX8uJwmC1KaoeHxwTPkcZoRN2pKWvyC/Vbd+UXG3z9AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 8' title='' src='/static/6dda25c41475b6bea44e52dcc55c70f3/ca1dc/img_8.png' srcset='/static/6dda25c41475b6bea44e52dcc55c70f3/e7570/img_8.png 170w,\n/static/6dda25c41475b6bea44e52dcc55c70f3/f46e7/img_8.png 340w,\n/static/6dda25c41475b6bea44e52dcc55c70f3/ca1dc/img_8.png 680w,\n/static/6dda25c41475b6bea44e52dcc55c70f3/02d09/img_8.png 1020w,\n/static/6dda25c41475b6bea44e52dcc55c70f3/649dd/img_8.png 1234w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>저희는 깃허브 프로젝트를 사용하고 있기 때문에 Github Project를 체크한 후 레포지토리의 url을 입력합니다.</p>\n<p>다음으로 Build Trigger를 선택해야하는데, Github webhook을 사용할 계획이므로 Github hook triger for GITScm polling을 선택합니다. 해당 버튼을 클릭하면 아래에 스크립트를 작성하는 칸이 나옵니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/bd8c7b72f56aa54df93f026f56661fe7/8dc7d/img_9.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 75.29411764705883%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA/UlEQVR42rVTu27DMAzUX/cD+j3ZunfpVnTr0KFAmymwHSe2bJl6X0gl6VzVroCTSAg8HXGUmqYZTdMi54wtlppn80MonGtQCJeF0LRHaD3Bh4AQYx3C9bTWlVPFlEBEDIvE8VXp73Ff91wl3rquwzAM8N5XwVqLvj9x/bHUR1GYbgolqVUnNdKZtQTnXOmwtCwvyeUmLv8bocjdhDCljODZch4ZiQXySPX43DxQISbsDx1Ow4iRZ/E8aEzGgHiualFMcT7i/fuA/sxE/A211sWxP7dc7GeMNmNy6/+zev0iPOxaPH8Y5OCxkFtH+LYnPD71ePkkBEcwxq4ivAB8BJ6XaIkQOwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 9' title='' src='/static/bd8c7b72f56aa54df93f026f56661fe7/ca1dc/img_9.png' srcset='/static/bd8c7b72f56aa54df93f026f56661fe7/e7570/img_9.png 170w,\n/static/bd8c7b72f56aa54df93f026f56661fe7/f46e7/img_9.png 340w,\n/static/bd8c7b72f56aa54df93f026f56661fe7/ca1dc/img_9.png 680w,\n/static/bd8c7b72f56aa54df93f026f56661fe7/8dc7d/img_9.png 888w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Script칸에 팀에서 필요로 하는 CI Script를 입력하면 됩니다.</p>\n<p>여기서 저장 버튼 위에 보이는 Pipeline Syntax를 누르면 깃허브를 이용해 접근할 수 있는 스크립트를 생성하는 화면이 나옵니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/15781dae004666ce624f5a21f7b899ca/74b07/img_10.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 87.64705882352942%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAABvklEQVR42p1UyU7DMBTM//8F4iuKxJXlgoALEoeWlpKmaZImjrPHHd44pARIW8DSyPv4LfPsxLFCVdVoGoO2NTBmhyRJkKYau91O5sb2Q3CN54hu/rnnLBYulss1wlBBqQJ13WK99jGbzfH25sLz1litPCwWS8znr3LWtftc8zzfgnP2eV7ACYIQ2+1WCNnH9pUkUfD9jSAA9znmhb7fbAI7juMEOsugtbYeVVXVE8Z20ratJeQm3fpPs4RBEFlSxoItirZI5VUj5K0Q/wbNhzEOzSfyPN+/khcFqrr+QWiOoGmajpBxIOhu3+h+VVb2wJ9dHlsshdCVLNJylaYCjUSlKPnICUvHCeWikhjSjVpcJxgCxulYHA8TioWM4xcx/zJBBwnDMBJLy7115oSrR10mCUWts9wiE/SldggsW2KUMFIafhRbIpL/O8u9TFZhAk/EXhdioU7/VDXfCLv+8u4JZ5MrnF9cY+pu7Jo5oslh8kZdvn9+weTmAZPbR0yXKxE6k9PYj0CJHlnrBDXKEqWcehU4Y68Nren+yO5P7ALf7hPQg8eJ0aTY30ZniOSzyIsSpN5nc6DJL+NBtt8BiNKBWl2aAGEAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 10' title='' src='/static/15781dae004666ce624f5a21f7b899ca/ca1dc/img_10.png' srcset='/static/15781dae004666ce624f5a21f7b899ca/e7570/img_10.png 170w,\n/static/15781dae004666ce624f5a21f7b899ca/f46e7/img_10.png 340w,\n/static/15781dae004666ce624f5a21f7b899ca/ca1dc/img_10.png 680w,\n/static/15781dae004666ce624f5a21f7b899ca/02d09/img_10.png 1020w,\n/static/15781dae004666ce624f5a21f7b899ca/74b07/img_10.png 1238w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Sample Step을 Git으로 설정한 후 아래에 값을 입력하면 됩니다.</p>\n<p>Credentials에는 좀 전에 생성했던 크리덴셜을 선택하면 됩니다. 해당 정보에 토큰 값이 있기 때문에 정확한 크리덴셜을 선택해야 합니다.</p>\n<p>크리덴셜은 생성할 때 입력한 ID와 동일하게 보여집니다.</p>\n<p>모두 입력했다면 Generate Pipeline Script를 눌러 완성된 스크립트를 확인합니다.</p>\n<p>해당 스크립트를 만드는 이유는 빌드 과정에서 Github 저장소에서 저장소를 복제해야하기 때문입니다.</p>\n<p>그러므로 저장소에 대한 접근 권한이 반드시 필요합니다.</p>\n<p>전체 빌드 스크립트는 아래와 같습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">pipeline <span class=\"token punctuation\">{</span>\n    agent any\n    tools <span class=\"token punctuation\">{</span>\n        gradle <span class=\"token string\">'gradle'</span>\n    <span class=\"token punctuation\">}</span>\n    triggers <span class=\"token punctuation\">{</span>\n        githubPush<span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">}</span>\n    stages <span class=\"token punctuation\">{</span>\n        stage<span class=\"token punctuation\">(</span><span class=\"token string\">'저장소 복제'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            steps <span class=\"token punctuation\">{</span>\n                // 여기서 방금 생성된 깃허브 스크립트 넣기\n        <span class=\"token punctuation\">}</span>\n        \n        stage<span class=\"token punctuation\">(</span><span class=\"token string\">'빌드'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            steps <span class=\"token punctuation\">{</span>\n                <span class=\"token function\">sh</span> <span class=\"token string\">''</span>'\n                <span class=\"token builtin class-name\">cd</span> backend/pium\n                ./gradlew clean build\n                <span class=\"token string\">''</span>'\n            <span class=\"token punctuation\">}</span>\n            post <span class=\"token punctuation\">{</span>\n                failure <span class=\"token punctuation\">{</span>\n                    slackSend <span class=\"token punctuation\">(</span>\n                        channel: <span class=\"token string\">'#알림-젠킨스'</span>,\n                        color: <span class=\"token string\">'#FF0000'</span>,\n                        message: <span class=\"token string\">\"백엔드 Build 실패...😢\"</span>\n                    <span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">}</span>\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>stages에서 깃허브 저장소에 있는 프로젝트를 가져온 후, 본인의 프로젝트 디렉토리로 이동해 build를 진행하도록 하면 됩니다.</p>\n<p>디렉토리를 옮기는 부분에서 몇 번 에러가 있었는데, Jenkins 대시보드의 Console Output을 이용해 디버깅하면서 수정해나가면 쉽게 설정할 수 있습니다.</p>\n<p>지금까지 올바르게 적용되었다면 CI 설정은 모두 정상적으로 마쳤습니다.</p>\n<p>다음으로 CD(자동 배포) 설정 방법을 알아보겠습니다.</p>\n<hr>\n<h2>SSH Agent 설치</h2>\n<p>현재 빌드 서버와 운영 서버가 서로 다른 인스턴스로 분리되어 있기 때문에, 젠킨스 빌드 서버에서 빌드한 파일을 운영서버로 전달해야</p>\n<p>합니다. 이때 다른 인스턴스로의 접속이 필요하므로 SSH 연결 설정을 해야 합니다.</p>\n<p>기존의 블로그나 여러 레퍼런스를 찾아보면 Publish Over SSH를 많이 사용하는데, 현재 접속 불가 이슈가 있습니다.</p>\n<p>그러므로 SSH Agent를 사용해야 합니다.</p>\n<p>Jenkins 관리의 Plugin 탭을 들어가서 설치할 수 있습니다.</p>\n<p>Jenkins도 하나의 서버에서 동작하고 있기 때문에 운영서버로 접속하기 위한 pem 키가 필요합니다.</p>\n<p>대시보드 -> 젠킨스 관리 -> Credentials 로 이동합니다.</p>\n<p>깃허브 크리덴셜을 생성하는 것과 동일한 방법으로 pem 키를 크리덴셜로 설정합니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/3d725457a15753e0fdcec93acfa61a2f/bbbf7/img_11.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 53.529411764705884%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAs0lEQVR42q2SSxKCMBBEc/+beAf33sIFlgu0FAIh/6SdGQr3Jk7V20DRdPeMGscHhuGGWS/gqbUSaKRCOefhfEAIEaVUoiDnVjLUsqzQ5I6FzWbhSbxLMMaElJgs8IvdaRsS2Vor6r1wXWqjmNwfT4+zr0NWjjEKx196UJqWMk0zLcPLg9bJ9K2czfOtpcN/jUoU0xgjokf0XwghyFWfzhdc7yN1SFb5bHr646iveYWn5X4A9rZj6EFx0O0AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 11' title='' src='/static/3d725457a15753e0fdcec93acfa61a2f/ca1dc/img_11.png' srcset='/static/3d725457a15753e0fdcec93acfa61a2f/e7570/img_11.png 170w,\n/static/3d725457a15753e0fdcec93acfa61a2f/f46e7/img_11.png 340w,\n/static/3d725457a15753e0fdcec93acfa61a2f/ca1dc/img_11.png 680w,\n/static/3d725457a15753e0fdcec93acfa61a2f/02d09/img_11.png 1020w,\n/static/3d725457a15753e0fdcec93acfa61a2f/bbbf7/img_11.png 1280w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><strong>kind</strong>는 <code class=\"language-text\">SSH Username with private key</code>를 선택합니다.</p>\n<p><strong>id</strong>는 깃허브 크리덴셜과 마찬가지로 식별자이기 때문에 <code class=\"language-text\">원하는 값을</code> 입력하면 됩니다.</p>\n<p><strong>username</strong>은 인스턴스의 HostName ex) ubuntu@123-345-678-23의 <code class=\"language-text\">ubuntu</code> 를 입력하면 됩니다.</p>\n<p>마지막으로 <strong>인스턴스를 생성하면서 받았던 pem 키를 Add 버튼을 눌러 추가</strong>합니다.</p>\n<p>pem 키에 있는 모든 내용(Begin, End 포함)을 다 복사해서 넣어야합니다.</p>\n<hr>\n<h2>CD 스크립트 작성</h2>\n<p>이제 젠킨스가 설치된 서버에서 빌드된 결과물을 운영 서버로 전달하는 스크립트를 작성해야 합니다.</p>\n<p>이때 scp 라는 프로토콜을 사용하여 파일을 전달합니다.</p>\n<p>저희 팀이 사용한 스크립트는 아래와 같습니다.</p>\n<p>빌드 성공 유뮤, 배포 성공 유무를 슬랙과 연동해 사용하고 있습니다 !</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">pipeline <span class=\"token punctuation\">{</span>\n    agent any\n    tools <span class=\"token punctuation\">{</span>\n        gradle <span class=\"token string\">'gradle'</span>\n    <span class=\"token punctuation\">}</span>\n    triggers <span class=\"token punctuation\">{</span>\n        githubPush<span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">}</span>\n    stages <span class=\"token punctuation\">{</span>\n        stage<span class=\"token punctuation\">(</span><span class=\"token string\">'저장소 복제'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            steps <span class=\"token punctuation\">{</span>\n                // 깃허브 크리덴셜\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n        \n        stage<span class=\"token punctuation\">(</span><span class=\"token string\">'빌드'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            steps <span class=\"token punctuation\">{</span>\n                <span class=\"token function\">sh</span> <span class=\"token string\">''</span>'\n                <span class=\"token builtin class-name\">cd</span> //프로젝트 위치\n                ./gradlew clean build\n                <span class=\"token string\">''</span>'\n            <span class=\"token punctuation\">}</span>\n            post <span class=\"token punctuation\">{</span>\n                failure <span class=\"token punctuation\">{</span>\n                    slackSend <span class=\"token punctuation\">(</span>\n                        channel: <span class=\"token string\">'#알림-젠킨스'</span>,\n                        color: <span class=\"token string\">'#FF0000'</span>,\n                        message: <span class=\"token string\">\"백엔드 Build 실패...😢\"</span>\n                    <span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">}</span>\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n        stage<span class=\"token punctuation\">(</span><span class=\"token string\">'배포'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            steps <span class=\"token punctuation\">{</span>\n                sshagent<span class=\"token punctuation\">(</span>credentials: <span class=\"token punctuation\">[</span><span class=\"token string\">'pem 키로 생성한 크리덴셜 ID'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                    <span class=\"token function\">sh</span> <span class=\"token string\">''</span>'\n                        <span class=\"token builtin class-name\">cd</span> //프로젝트 위치\n                        \n                        <span class=\"token function\">ssh</span> <span class=\"token parameter variable\">-o</span> <span class=\"token assign-left variable\">StrictHostKeyChecking</span><span class=\"token operator\">=</span>no <span class=\"token punctuation\">{</span>HostName<span class=\"token punctuation\">}</span>@<span class=\"token punctuation\">{</span>Private IP<span class=\"token punctuation\">}</span> <span class=\"token function\">uptime</span>\n                        <span class=\"token builtin class-name\">cd</span> build/libs\n                        \n                        <span class=\"token function\">scp</span> <span class=\"token punctuation\">{</span>빌드된 Jar 파일명<span class=\"token punctuation\">}</span> <span class=\"token punctuation\">{</span>HostName<span class=\"token punctuation\">}</span>@<span class=\"token punctuation\">{</span>Private IP<span class=\"token punctuation\">}</span>:/home/ubuntu\n                        <span class=\"token function\">ssh</span> <span class=\"token parameter variable\">-t</span> <span class=\"token punctuation\">{</span>HostName<span class=\"token punctuation\">}</span>@<span class=\"token punctuation\">{</span>Private IP<span class=\"token punctuation\">}</span> <span class=\"token punctuation\">{</span>운영서버 배포 스크립트 파일<span class=\"token punctuation\">}</span>\n                    <span class=\"token string\">''</span>'\n                <span class=\"token punctuation\">}</span>\n            <span class=\"token punctuation\">}</span>\n            post <span class=\"token punctuation\">{</span>\n                success <span class=\"token punctuation\">{</span>\n                    slackSend <span class=\"token punctuation\">(</span>\n                        channel: <span class=\"token string\">'#알림-젠킨스'</span>,\n                        color: <span class=\"token string\">'#00FF00'</span>,\n                        message: <span class=\"token string\">\"백엔드 배포 성공! 🚀\"</span>\n                    <span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">}</span>\n                failure <span class=\"token punctuation\">{</span>\n                    slackSend <span class=\"token punctuation\">(</span>\n                        channel: <span class=\"token string\">'#알림-젠킨스'</span>,\n                        color: <span class=\"token string\">'#FF0000'</span>,\n                        message: <span class=\"token string\">\"백엔드 배포 실패 🥲\"</span>\n                    <span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">}</span>\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>CI/CD 설정을 모두 마친 후 깃허브 프로젝트에 push, pull request와 같은 trigger가 발생하면 아래와 같이 빌드 결과를 볼 수 있습니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/b07a6d79f709673b8ffa107d58d45df6/bbbf7/img_12.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 84.11764705882354%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsTAAALEwEAmpwYAAACdklEQVR42q1S227bMAzN//9PURTbc/qQoSiKpUmT2HFly5Zkyfdb7MRnlLIO6zCgQFEDhCWSIs855CKOEzw+PsHzfOx2B/h+AMYifPZbtG2LNNUoyxJZlqOqajRN8/mC+OLv6wvmeQGro1IphmF4F5zn2dnf9/+d3xUsipKGEEIIibbtPnz81uTfZh9S7roOm+0L9gcP4zi6u21+Pp/d2TKzjGxRe79cLs4Wb51sok04nUZM0+SS7CpZs347eaMNxU+oaROkZUQ+m1uWlWt6Pk9XhH0/UMccSSLAeew0NcYgCOxOMkipYDIDrTVSshc/wtP2iIBx51NKIZEpOqqzkHkDJjJsN89Yr9fXjkRNVRJh/YqoZhANR3qSUIOA6gVYEcA3HnjFfvsTF+vHDgvLu2larFYrZ1flgeykwQeGeAihTgmyOYW+SOizQtyHCJsAycBhLop8EmaWGKbeImzB0xKpkjRpca13mWEGDUaPooYoEwJzvj7UowSrAnhm59DbBnqSLtZPDuHs1uV+eY/lcvkHYT4aRF0A3hOtUSCftUOZXVKwOsBebxG1jHzaIbexK8KsRigMYh4hDCMq3qCpW8Q5h5ft4GcHsDJA3IXOItL1SL4DIQxy0pEY8DYkY2hPLRY1octpCN+/f8PNzQ2qukKR07LrAGvxhGfxk4ru8Vr5OJYHBIWHrVzj4bjCLt0gKH34xd7FmqHBwpQtVF5Dpymth3RTnsYJshauiNWLNyEkDcZa0nGH+LU8ur/oY+cXQ4zOTjk1BaJE4e7uDre3t+iHnhaWKBccG7XGC6Gwj61edrKW8l7v8OD/cHLYoVlNwzZAVhr8Ap6uFHRoqasBAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 12' title='' src='/static/b07a6d79f709673b8ffa107d58d45df6/ca1dc/img_12.png' srcset='/static/b07a6d79f709673b8ffa107d58d45df6/e7570/img_12.png 170w,\n/static/b07a6d79f709673b8ffa107d58d45df6/f46e7/img_12.png 340w,\n/static/b07a6d79f709673b8ffa107d58d45df6/ca1dc/img_12.png 680w,\n/static/b07a6d79f709673b8ffa107d58d45df6/02d09/img_12.png 1020w,\n/static/b07a6d79f709673b8ffa107d58d45df6/bbbf7/img_12.png 1280w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h3>Reference</h3>\n<p><a href=\"https://developer-nyong.tistory.com/47#article-7-1--ssh-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EC%84%A4%EC%B9%98\">베베의 CI/CD 글</a></p>","frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기","date":"July 24, 2023","update":"July 24, 2023","tags":["CI/CD","젠킨스","Webhook","설정"],"series":null},"fields":{"slug":"/ci-cd-setting/","readingTime":{"minutes":12.605}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}},"next":{"fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},"pageContext":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","series":null,"previousPostId":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","nextPostId":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/ci-cd-setting/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 이번 피움 서비스에서 CI/CD를 적용하기 위해 Jekins와 Github Webhook을 이용했습니다. 본 글에서는 Jenkins와 Github Webhook을 이용한 SpringBoot 서버 자동 빌드, 자동 배포 과정을 다루겠습니다. Jenkins 설치 과정은 피움 팀 젠킨스 설치하기 를 참고하…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Kim0914\">그레이</a>'가 작성했습니다.</p>\n</blockquote>\n<p>이번 피움 서비스에서 CI/CD를 적용하기 위해 Jekins와 Github Webhook을 이용했습니다.</p>\n<p>본 글에서는 Jenkins와 Github Webhook을 이용한 SpringBoot 서버 자동 빌드, 자동 배포 과정을 다루겠습니다.</p>\n<p>Jenkins 설치 과정은 <a href=\"https://pium-official.github.io/jenkins-setting/\">피움 팀 젠킨스 설치하기</a> 를 참고하시면 됩니다 !</p>\n<p>작업 환경</p>\n<ul>\n<li>인스턴스: AWS EC2 t4g.small</li>\n<li>OS: Ubuntu 22.04.2 LTS</li>\n<li>RAM: 2GB</li>\n</ul>\n<h2>Jenkins 접속</h2>\n<p>젠킨스를 접속하는 방법은 간단합니다. 젠킨스를 설치한 인스턴스 public IP와 port를 주소창에 입력하면 쉽게 접근할 수 있습니다.</p>\n<p>정상적으로 접속하면 다음과 같은 화면을 만나게 됩니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/714cdc2e70d78f318a24f0bfa41486a1/bbbf7/img.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 49.411764705882355%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABMUlEQVR42q1RW27CMBD0zYB+0R/6i9Qf1CPQA8FpEPQqCIhD/Fzb091NW6kPVUJipVU22cl4Zmyel0usVi+Yzx8xnc4wmz3825PJFJvNFvv9AbvdDofDG9brV/1/sXiCsf0VznnU2n51KfXPOWfSTilrE41zjAlmGAYeIj6rcWeqSnBL5TySm9PpjPP5wiePBPJ0PsINHrZ3DCwIIaHreoTISliZtT27irrzjJVd5B1RgRG7l0sHKqSEVBmUPIhPtAODWGlhYCckgdDYghsc+iFATKSUIC4LR5HYuiqUE9Vua6owkuRSEXJVoJT3gdWVj7wSuwgczfgu2Ym6LITWXtWSyB9lE+c3ym/te0ayCyF+kcbIKkvRO5DvgjHH40lzEEUp0c2X8bNMCEGt3qsM7lzvFp3wHPm6DicAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img' title='' src='/static/714cdc2e70d78f318a24f0bfa41486a1/ca1dc/img.png' srcset='/static/714cdc2e70d78f318a24f0bfa41486a1/e7570/img.png 170w,\n/static/714cdc2e70d78f318a24f0bfa41486a1/f46e7/img.png 340w,\n/static/714cdc2e70d78f318a24f0bfa41486a1/ca1dc/img.png 680w,\n/static/714cdc2e70d78f318a24f0bfa41486a1/02d09/img.png 1020w,\n/static/714cdc2e70d78f318a24f0bfa41486a1/bbbf7/img.png 1280w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<hr>\n<h2>Github Webhook 설정</h2>\n<p>먼저 Webhook을 설정하기 위해 현재 프로젝트의 깃허브 레포지토리로 이동합니다.</p>\n<p>레포지토리의 Settings를 눌러서 접속할 수 있습니다. 이후 왼쪽 메뉴바에 Webhooks를 누르면 아래와 같은 화면을 볼 수 있습니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/88c4995821b586b038ddb80cefdee513/bbbf7/img_1.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 54.70588235294118%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABEElEQVR42qVS23KFIAw8//+ZPV7QIngBPRBgmzBqX/pkd2YHAmSTkLw2v2PZHOy8wtgFy+owMw3bozaY+W7d/E07GWx8RikjUEKICf4IOELEJxJeOHEcB1JKl4nID3qlsDmHnDOInVMiZCZRRGRnYQgBk7F1L6iCpRTMy1LpvL8D9L1C23Vo2w5d1/PKVBqNmjAYrmr12PededSgt6BAcynDOHKkWG15IHshEd1roIKYCieBP3ELWjtXBwFlArvgCapgygVqGM/UC9xn509PzwWJS3g3fS1bBDN3sJR/ZCjOnpsh/3Z97lOcgsC31tB6guMxeZrdb1PYf1nXOjJXYx6XLCXKQH+9m8rwCbjOnvAHGGJhDhIh4l4AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 1' title='' src='/static/88c4995821b586b038ddb80cefdee513/ca1dc/img_1.png' srcset='/static/88c4995821b586b038ddb80cefdee513/e7570/img_1.png 170w,\n/static/88c4995821b586b038ddb80cefdee513/f46e7/img_1.png 340w,\n/static/88c4995821b586b038ddb80cefdee513/ca1dc/img_1.png 680w,\n/static/88c4995821b586b038ddb80cefdee513/02d09/img_1.png 1020w,\n/static/88c4995821b586b038ddb80cefdee513/bbbf7/img_1.png 1280w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>오른쪽 상단의 Add Webhook 버튼을 눌러 webhook을 추가하는 화면으로 이동합니다.</p>\n<p>그러면 아래와 같은 Payload URL, Content Type, Secret을 입력하는 폼이 나타납니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/c9f86ed3f14eb7f8d26b35ebd50a1b81/bbbf7/img_2.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 87.64705882352942%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB40lEQVR42p2UaW7bMBCFdfaiPUHQnqYw0D8BcoKibeLIkhftmyWR4qLXGcpWlPzwEgIfuInPnDdjeuu4R5B0CHcH+MEWZX2EGDR6qT4wfEAteoWOxnYc4dWtxLEb0BxbVHWDrhcQ/KGQM4IOnNe4l8M0dwgBKaczIws+v/h4Xm/gb0IEQYDNJkAYhsQWu91+mm+32NDey3qN11d/Xmf8fYZ/YY6sPIKbV7YGSa3RCQ1rLbQ2MMa4MffGvK0xWms3n7GAIjhcd8M4jpAkCQYpYRYi4+mDN3CxjTgJRkmGfZQiL2oUVUNXr9G0PaTSlBz1DntBlXcmwSh2fnVdj4EOyYGNli60e9oseCDBmEIuq5qyTFQVsjynbPefE0yzHJqTQBNjR+ejpV6Tj4pMZ3isT75eFeTD80HuzYQTPAmxn8xNHqZpgizLHJztJE0RRRHiOHbwmrVmyuN4HS/JaxJLkaYZyrJyIQ9KQS24y8O8KMGZ3lL1H+hmhsIerxXdJUEpespwRXVYoChL5HnhyubTgnHaQrZTiXDtqTOUhIFqkv85t3g3e7j684TV70f8+vuEsqkhen5hhLtl23U3F/h8w6+r7/i2+oEvPx9QiWbaXHg43ojF9EB4736FFs6vhl1wT8j/ASXRfKJMUiADAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 2' title='' src='/static/c9f86ed3f14eb7f8d26b35ebd50a1b81/ca1dc/img_2.png' srcset='/static/c9f86ed3f14eb7f8d26b35ebd50a1b81/e7570/img_2.png 170w,\n/static/c9f86ed3f14eb7f8d26b35ebd50a1b81/f46e7/img_2.png 340w,\n/static/c9f86ed3f14eb7f8d26b35ebd50a1b81/ca1dc/img_2.png 680w,\n/static/c9f86ed3f14eb7f8d26b35ebd50a1b81/02d09/img_2.png 1020w,\n/static/c9f86ed3f14eb7f8d26b35ebd50a1b81/bbbf7/img_2.png 1280w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><strong>Payload URL</strong>은 젠킨스가 설치되어 있는 서버의 <code class=\"language-text\">도메인 주소:포트/github-webhook/</code> 을 입력합니다.</p>\n<p>젠킨스의 기본 포트는 8080으로 설정되어 있습니다.</p>\n<p>주소 마지막에 / 는 꼭 넣어주셔야 합니다.</p>\n<p>/를 넣지 않으면 redirect URL로 인식해 정상적으로 동작하지 않습니다.</p>\n<p><strong>Content-type</strong>은 <code class=\"language-text\">application/json</code>을 선택합니다.</p>\n<p>Secret은 비워두면 됩니다.</p>\n<p>마지막으로 어떤 동작에서 webhook을 발생시킬지 선택하면 됩니다.</p>\n<p>저희 팀의 경우에는 <strong>Let me select individual events</strong>를 눌러 <strong>push</strong>와 <strong>pull request</strong>가 발생했을 때 webhook이 동작하도록 선택했습니다.</p>\n<p>모든 선택을 마친 후 <strong>Add webhook 버튼을 누르면 토큰이 발행</strong>됩니다.</p>\n<p>토큰을 생성할 때 토큰 권한도 함께 설정할 수 있는데, 이 때 repo와 admin:repo_hook을 선택해주시면 됩니다.</p>\n<p>만약 CI를 통해 PR에 comment를 남기는 등의 write가 필요없는 경우에는 wirte 권한을 빼줄 수 있을 것 같습니다.</p>\n<p>해당 토큰은 생성 후 재발행되지 않기 때문에 따로 보관을 하는 것이 좋습니다.</p>\n<hr>\n<h2>Credentials 생성</h2>\n<p>다시 젠킨스 화면으로 이동해서 Credentials를 등록하여 Github webhook을 연동 시켜야 합니다.</p>\n<p>젠킨스 메인 화면에서 Jenkins 관리 페이지로 접속하면 Security 탭에 Credentials를 눌러 접속합니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/eeb60e900905f7bc182e9621a1488b8a/baa93/img_3.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 75.88235294117648%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB0ElEQVR42pVTgW6rMAzk/39y0tRRKBQIJJCEEL87A33q1E5bJIsqte8uPrvw3ss0TSKS5Tzrusrl8iVledXf308+UmNcxZhZxnER71cJYZXCGCPOuaeCbdtAYhEOiUH+cgoW3u+dWGsfl2SuqgYKK9w7qEwgyQdZlq5jDYX4R1jrZVmiFG3bo/CGhEFlMwhA+fwyqJKqeVLakDuBcJC+dzIMTr8kmSa/A16vjQKEkDRiTOiLRaIBa5B5XhQ0hKjA1i5yu7XSNC3UzSqCNRnNLajMuQVKNlXD5/K7LB7sI4pnBaU5OW9aRJWsYZDsJFLAum7hlFWGXeWqCePoVIUxk5LwjipZ9LD5u+00pW3vR492ZgbZQghH/+LDlNOYJ6wzjr+K/SnPibzr++F5Bs8cjFm6lBLrm2xNI3BD4BDt3wFfzdLZ+K4b0COv/fSIxP8AMn18So+hH6+VJI5bWXLW3gOmlHSo65qzWKuTfHaCygwTFih03CK4vIIgQSVr2JK3gDMURbDSkN2U3f0NoA6uG7jvOa/oedC5jZLwff1kAHJDOIfcIj49sgDFcrqc8+vVe7eTdL6q7ohWOFpcAK7bK6d/Bchnc1v+PzmqQTn/DPgPV6WWi+Dj700AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 3' title='' src='/static/eeb60e900905f7bc182e9621a1488b8a/ca1dc/img_3.png' srcset='/static/eeb60e900905f7bc182e9621a1488b8a/e7570/img_3.png 170w,\n/static/eeb60e900905f7bc182e9621a1488b8a/f46e7/img_3.png 340w,\n/static/eeb60e900905f7bc182e9621a1488b8a/ca1dc/img_3.png 680w,\n/static/eeb60e900905f7bc182e9621a1488b8a/02d09/img_3.png 1020w,\n/static/eeb60e900905f7bc182e9621a1488b8a/baa93/img_3.png 1236w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Add Credentials를 누릅니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/7a5b569bed511798c15faed3c85bba2b/e4ddf/img_4.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 28.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAkUlEQVR42q2P6w6CMAyFef/HNMi4iGNssHW34wnRxH9i9CQnbZP2a9t0nYJSA92jba9YFoNf1BjjMPQjQSus3bFtAfqu4dyOGAtCSKddayWQoGnx2HxGzgUpFVwGi/G2wvsAkURw/miRjFIIFBFEgjKLQ9xieN00z9Baszl997JI5FXcEN4Ga32G+krPA/FnPQABGNhYehKerAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 4' title='' src='/static/7a5b569bed511798c15faed3c85bba2b/ca1dc/img_4.png' srcset='/static/7a5b569bed511798c15faed3c85bba2b/e7570/img_4.png 170w,\n/static/7a5b569bed511798c15faed3c85bba2b/f46e7/img_4.png 340w,\n/static/7a5b569bed511798c15faed3c85bba2b/ca1dc/img_4.png 680w,\n/static/7a5b569bed511798c15faed3c85bba2b/02d09/img_4.png 1020w,\n/static/7a5b569bed511798c15faed3c85bba2b/e4ddf/img_4.png 1082w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>그러면 아래와 같은 화면을 볼 수 있습니다.</p>\n<p>깃허브 webhook에서 발급받은 토큰을 이용해 크리덴셜 값을 생성합니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/da40bf6b3f114efc1945300dbdb20c63/b034b/img_5.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 83.52941176470588%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsTAAALEwEAmpwYAAABTUlEQVR42qWTa2rDMBCEdfVep397ikJPUGhTTEjikjiWZMmyHp7urpNQAm3iWPCBsezV7OxI1fU31usNVqsKVbVGzhlLlmpbDds5OO/hfY9xHB8uxv8qR0Ws7WAI3wfkMhIFKTN5FjElqJQymuaIEIK0K5uJSXLiHAoJkYLaWBhCGyPPWlu02mCI6aT0NpHq8PdS8EAKnXNXfmC2QvFwKtiSj246ZYjiBT/P9ZBRPAAuwIOx1qKjiZfy+KQVF2ukZS/TLeQHm8vcG6HxzLnlKYe9xOY3gdpno2/BiTijMina7xtst7VMemp9wpym/x+HQ4OvWuNj06LRnhSSkSEMlzY5i3OIpNCFjC5kGaTiF5w5uXpyU8pMroI9RIrNUVOYOcgRhTcWoEohqcFJ23zavTfjL9T7bsDrZ4+QSDbG5Qqf3wyeXvYwfblcuSXrBwWrOPvVlzDPAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 5' title='' src='/static/da40bf6b3f114efc1945300dbdb20c63/ca1dc/img_5.png' srcset='/static/da40bf6b3f114efc1945300dbdb20c63/e7570/img_5.png 170w,\n/static/da40bf6b3f114efc1945300dbdb20c63/f46e7/img_5.png 340w,\n/static/da40bf6b3f114efc1945300dbdb20c63/ca1dc/img_5.png 680w,\n/static/da40bf6b3f114efc1945300dbdb20c63/02d09/img_5.png 1020w,\n/static/da40bf6b3f114efc1945300dbdb20c63/b034b/img_5.png 1072w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><strong>kind</strong>는 <code class=\"language-text\">Username with password</code>를 선택합니다.</p>\n<p><strong>username</strong>에는 깃허브 토큰을 발급받은 <code class=\"language-text\">깃허브 아이디</code>를 작성합니다.</p>\n<p><strong>password</strong>에는 <code class=\"language-text\">해당 토큰 값</code>을 넣으면 됩니다.</p>\n<p><strong>ID</strong>는 젠킨스에서 이 <strong>크리덴셜을 식별하기 위한 이름이므로 크게 의미가 없는 값</strong> 입니다.</p>\n<hr>\n<h3>Gradle 설정</h3>\n<p>현재 우리 팀은 스프링 부트 서버를 빌드하기 때문에 gradle이 반드시 필요합니다.</p>\n<p>젠킨스 메인 화면에서 대시보드 -> 젠킨스 관리 -> Tools를 누르면 아래와 같은 Gradle 설정 화면을 볼 수 있습니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/dc8e606c0d893391862fc9aeb13e7aee/23e59/img_6.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 81.17647058823529%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAABJElEQVR42qWTC26EMAxEOXGP1Vv0GL0Cu2KBEAhJyG9qO/1QqVIbGmlAAfEyY+wuhAClFpRSRP9dXYwJt9uEvh+htQXvWZeBfNHrhmEYsSwaKVXgVbcC3K3HNGtY6wQWQkTO+TrQOo/N7EgEYWNVpU2citIJ0BiDeZ7lhJKLuGtVipQqvgPVZvCYFDl1cN6L05TaFBlccgUOasVAwIXa5zFO2OiALPH/Hpnd8Tcdb/hHeKrjSn/bWksl2OXUllU4cjoBDYGmaRZQ5mfcPg3yNCDpw2EguqXaKb1RC7lal9yur8ipbrwPzVHPi5N99iG7qyNX5MUVsbmObrUGR7g8Hd8m5TgOHN5Vy+dG/anffulPqWGvIp6e73h5XZG8JaexfexOegOyqO+9u/tqSwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 6' title='' src='/static/dc8e606c0d893391862fc9aeb13e7aee/ca1dc/img_6.png' srcset='/static/dc8e606c0d893391862fc9aeb13e7aee/e7570/img_6.png 170w,\n/static/dc8e606c0d893391862fc9aeb13e7aee/f46e7/img_6.png 340w,\n/static/dc8e606c0d893391862fc9aeb13e7aee/ca1dc/img_6.png 680w,\n/static/dc8e606c0d893391862fc9aeb13e7aee/02d09/img_6.png 1020w,\n/static/dc8e606c0d893391862fc9aeb13e7aee/23e59/img_6.png 1098w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Gradle 8.2.1 버전을 추가했습니다.</p>\n<p>추가를 완료하고 바로 페이지를 나가면 안됩니다.</p>\n<p>가장 아래에 있는 파란색 save 버튼을 눌러야 해당 설정이 저장됩니다 !!</p>\n<p>Gradle 설정까지 마치면 빌드할 준비를 모두 마쳤습니다.</p>\n<p>이제 CI를 자동으로 실행하기 위해서는 CI 스크립트를 작성해야 합니다.</p>\n<hr>\n<h2>CI 스크립트 작성</h2>\n<p>드디어 CI를 담당하는 젠킨스 아이템을 생성할 시간입니다 !</p>\n<p>대시보드에서 New Item을 누르면 아래와 같은 화면을 볼 수 있습니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6df00fb04c89f3d1d4140127c5a51b6d/84a58/img_7.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 102.35294117647058%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAACb0lEQVR42p1USXLbMBDkJ/OfPCP/yBtyzCWHRLEsS6QocQUXgCBIWnFnGiIV2lV22Tl0zQKgORsnqCqNKEoQxynC8Aza1o7ouuFDMGZA70YEnXUoigqlqjGMj4IJbhifoXd84N5LOKBQLeq6lccT+l6iE5+dsdbfAkk9YVXl2G1/SMpnPOwPyLJMSHu5YAXdDcaYG2hrkXrWjbmej8OAwGqFIt5IHU/Ybu9xOISiH5EkqUTdCGqpawWlpCylghK9Ep9SSuzS36mq2uvOOQR15xAVjTQkun5llJr1TtIfME2TtxesbSd1HaXeg9R4EvvP0xOmywUBm2Dl8HQ6I81ySfmKJMme6Yw4z4tZljBMdUZnLR6FjAg6Icskld3ugF+bO9zd3WMjMi9KtFqjaRq0bevTZGrNrFOuox8ko2FkU1qD3THFMYr9Az5m3bSQEbT1TEys9TUZ60c9iPIa337GCKUZ53MiKSU+/QX0xfHpGeiPT1fJ2tPH5rDGAYeWkR0Oke/ww8Ped5ANWiJsmn+gvWA5591bhK02iE7J7cuRpE5CpsRxqf2IVHOarR8dEi0dXyTT9oS1XNrtI4Qyeww/Co9om/YWoR9mTd34AWYkhG/CC3hCXuJXMxkFdjaT0chXelEoD/oK8Vnb+zl9CfpJGjTaIj7zYYM0FZJMeaSpkgaVXubSOOr0v7YkbsvhWGh836Yoc9atmy+4lbzCE5l3bBvuvrbtZVAN6kb7rcMDN2PRueZI+hq07mF7LgdfAxpWtkf/6oN3L9iwrPHpyx6fvx6FVP5NPfrDj0Jr2Ys9Ux4H/E47RMrOv9Ljf2OaLvgL59X3vdpjMPoAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 7' title='' src='/static/6df00fb04c89f3d1d4140127c5a51b6d/ca1dc/img_7.png' srcset='/static/6df00fb04c89f3d1d4140127c5a51b6d/e7570/img_7.png 170w,\n/static/6df00fb04c89f3d1d4140127c5a51b6d/f46e7/img_7.png 340w,\n/static/6df00fb04c89f3d1d4140127c5a51b6d/ca1dc/img_7.png 680w,\n/static/6df00fb04c89f3d1d4140127c5a51b6d/84a58/img_7.png 972w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>상단에 아이템 이름을 설정하고 Pipeline을 구축할 것이기 때문에 Pipeline을 선택하고 OK를 누릅니다.</p>\n<p>이후 아래와 같이 아이템을 설정할 수 있는 화면이 나옵니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6dda25c41475b6bea44e52dcc55c70f3/649dd/img_8.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 104.11764705882354%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsTAAALEwEAmpwYAAABnklEQVR42qWU606DQBCFeW1fyjfxh/+MUUOpbbrlfltgd+E4Zy01sdISO8mUksLXM2dmNkjTDFG0xTAMmGMYDMJwg6ZpcCsmfowOTy8feN0qBHGcY7+PobVF31t0nfFA65x/eJymmzkxCZdrkOcVlErAa1k2MMbBudH/iNNDE26Hh48CZKlt28rND8SJuqpuUPfjGTaDl1Q6eZ+MYOkf6V8i/tLjoqxgrPU+G2OvKg0uDJaodI+3zSfUQaGsKl+B1h3aRovH3XrgHFY8zEUVYVaUzaVO3qfRl/c77a2SddejFh8JxOzV6aVrHQ+WZoswJstlevCKWASyEUodZZwK5EUhI1Wdp+BfwOMxwXa7E5W1L3NtLAAnvy2d+Miuci7vAhKgVIyiKH2ZvF+rctnDokKSpB6qtb6vKQzCwjBCluWrYVcG2yETZYRxdLj0azq8uHpl2+F9s0OWprIttd9rzuK/x4bBQ+Egu/x9IJjVnf67KaKEI9O22ie/3wXkEcWmUCWvBNJHHrzX8uJwmC1KaoeHxwTPkcZoRN2pKWvyC/Vbd+UXG3z9AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 8' title='' src='/static/6dda25c41475b6bea44e52dcc55c70f3/ca1dc/img_8.png' srcset='/static/6dda25c41475b6bea44e52dcc55c70f3/e7570/img_8.png 170w,\n/static/6dda25c41475b6bea44e52dcc55c70f3/f46e7/img_8.png 340w,\n/static/6dda25c41475b6bea44e52dcc55c70f3/ca1dc/img_8.png 680w,\n/static/6dda25c41475b6bea44e52dcc55c70f3/02d09/img_8.png 1020w,\n/static/6dda25c41475b6bea44e52dcc55c70f3/649dd/img_8.png 1234w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>저희는 깃허브 프로젝트를 사용하고 있기 때문에 Github Project를 체크한 후 레포지토리의 url을 입력합니다.</p>\n<p>다음으로 Build Trigger를 선택해야하는데, Github webhook을 사용할 계획이므로 Github hook triger for GITScm polling을 선택합니다. 해당 버튼을 클릭하면 아래에 스크립트를 작성하는 칸이 나옵니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/bd8c7b72f56aa54df93f026f56661fe7/8dc7d/img_9.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 75.29411764705883%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA/UlEQVR42rVTu27DMAzUX/cD+j3ZunfpVnTr0KFAmymwHSe2bJl6X0gl6VzVroCTSAg8HXGUmqYZTdMi54wtlppn80MonGtQCJeF0LRHaD3Bh4AQYx3C9bTWlVPFlEBEDIvE8VXp73Ff91wl3rquwzAM8N5XwVqLvj9x/bHUR1GYbgolqVUnNdKZtQTnXOmwtCwvyeUmLv8bocjdhDCljODZch4ZiQXySPX43DxQISbsDx1Ow4iRZ/E8aEzGgHiualFMcT7i/fuA/sxE/A211sWxP7dc7GeMNmNy6/+zev0iPOxaPH8Y5OCxkFtH+LYnPD71ePkkBEcwxq4ivAB8BJ6XaIkQOwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 9' title='' src='/static/bd8c7b72f56aa54df93f026f56661fe7/ca1dc/img_9.png' srcset='/static/bd8c7b72f56aa54df93f026f56661fe7/e7570/img_9.png 170w,\n/static/bd8c7b72f56aa54df93f026f56661fe7/f46e7/img_9.png 340w,\n/static/bd8c7b72f56aa54df93f026f56661fe7/ca1dc/img_9.png 680w,\n/static/bd8c7b72f56aa54df93f026f56661fe7/8dc7d/img_9.png 888w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Script칸에 팀에서 필요로 하는 CI Script를 입력하면 됩니다.</p>\n<p>여기서 저장 버튼 위에 보이는 Pipeline Syntax를 누르면 깃허브를 이용해 접근할 수 있는 스크립트를 생성하는 화면이 나옵니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/15781dae004666ce624f5a21f7b899ca/74b07/img_10.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 87.64705882352942%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAABvklEQVR42p1UyU7DMBTM//8F4iuKxJXlgoALEoeWlpKmaZImjrPHHd44pARIW8DSyPv4LfPsxLFCVdVoGoO2NTBmhyRJkKYau91O5sb2Q3CN54hu/rnnLBYulss1wlBBqQJ13WK99jGbzfH25sLz1litPCwWS8znr3LWtftc8zzfgnP2eV7ACYIQ2+1WCNnH9pUkUfD9jSAA9znmhb7fbAI7juMEOsugtbYeVVXVE8Z20ratJeQm3fpPs4RBEFlSxoItirZI5VUj5K0Q/wbNhzEOzSfyPN+/khcFqrr+QWiOoGmajpBxIOhu3+h+VVb2wJ9dHlsshdCVLNJylaYCjUSlKPnICUvHCeWikhjSjVpcJxgCxulYHA8TioWM4xcx/zJBBwnDMBJLy7115oSrR10mCUWts9wiE/SldggsW2KUMFIafhRbIpL/O8u9TFZhAk/EXhdioU7/VDXfCLv+8u4JZ5MrnF9cY+pu7Jo5oslh8kZdvn9+weTmAZPbR0yXKxE6k9PYj0CJHlnrBDXKEqWcehU4Y68Nren+yO5P7ALf7hPQg8eJ0aTY30ZniOSzyIsSpN5nc6DJL+NBtt8BiNKBWl2aAGEAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 10' title='' src='/static/15781dae004666ce624f5a21f7b899ca/ca1dc/img_10.png' srcset='/static/15781dae004666ce624f5a21f7b899ca/e7570/img_10.png 170w,\n/static/15781dae004666ce624f5a21f7b899ca/f46e7/img_10.png 340w,\n/static/15781dae004666ce624f5a21f7b899ca/ca1dc/img_10.png 680w,\n/static/15781dae004666ce624f5a21f7b899ca/02d09/img_10.png 1020w,\n/static/15781dae004666ce624f5a21f7b899ca/74b07/img_10.png 1238w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Sample Step을 Git으로 설정한 후 아래에 값을 입력하면 됩니다.</p>\n<p>Credentials에는 좀 전에 생성했던 크리덴셜을 선택하면 됩니다. 해당 정보에 토큰 값이 있기 때문에 정확한 크리덴셜을 선택해야 합니다.</p>\n<p>크리덴셜은 생성할 때 입력한 ID와 동일하게 보여집니다.</p>\n<p>모두 입력했다면 Generate Pipeline Script를 눌러 완성된 스크립트를 확인합니다.</p>\n<p>해당 스크립트를 만드는 이유는 빌드 과정에서 Github 저장소에서 저장소를 복제해야하기 때문입니다.</p>\n<p>그러므로 저장소에 대한 접근 권한이 반드시 필요합니다.</p>\n<p>전체 빌드 스크립트는 아래와 같습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">pipeline <span class=\"token punctuation\">{</span>\n    agent any\n    tools <span class=\"token punctuation\">{</span>\n        gradle <span class=\"token string\">'gradle'</span>\n    <span class=\"token punctuation\">}</span>\n    triggers <span class=\"token punctuation\">{</span>\n        githubPush<span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">}</span>\n    stages <span class=\"token punctuation\">{</span>\n        stage<span class=\"token punctuation\">(</span><span class=\"token string\">'저장소 복제'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            steps <span class=\"token punctuation\">{</span>\n                // 여기서 방금 생성된 깃허브 스크립트 넣기\n        <span class=\"token punctuation\">}</span>\n        \n        stage<span class=\"token punctuation\">(</span><span class=\"token string\">'빌드'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            steps <span class=\"token punctuation\">{</span>\n                <span class=\"token function\">sh</span> <span class=\"token string\">''</span>'\n                <span class=\"token builtin class-name\">cd</span> backend/pium\n                ./gradlew clean build\n                <span class=\"token string\">''</span>'\n            <span class=\"token punctuation\">}</span>\n            post <span class=\"token punctuation\">{</span>\n                failure <span class=\"token punctuation\">{</span>\n                    slackSend <span class=\"token punctuation\">(</span>\n                        channel: <span class=\"token string\">'#알림-젠킨스'</span>,\n                        color: <span class=\"token string\">'#FF0000'</span>,\n                        message: <span class=\"token string\">\"백엔드 Build 실패...😢\"</span>\n                    <span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">}</span>\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>stages에서 깃허브 저장소에 있는 프로젝트를 가져온 후, 본인의 프로젝트 디렉토리로 이동해 build를 진행하도록 하면 됩니다.</p>\n<p>디렉토리를 옮기는 부분에서 몇 번 에러가 있었는데, Jenkins 대시보드의 Console Output을 이용해 디버깅하면서 수정해나가면 쉽게 설정할 수 있습니다.</p>\n<p>지금까지 올바르게 적용되었다면 CI 설정은 모두 정상적으로 마쳤습니다.</p>\n<p>다음으로 CD(자동 배포) 설정 방법을 알아보겠습니다.</p>\n<hr>\n<h2>SSH Agent 설치</h2>\n<p>현재 빌드 서버와 운영 서버가 서로 다른 인스턴스로 분리되어 있기 때문에, 젠킨스 빌드 서버에서 빌드한 파일을 운영서버로 전달해야</p>\n<p>합니다. 이때 다른 인스턴스로의 접속이 필요하므로 SSH 연결 설정을 해야 합니다.</p>\n<p>기존의 블로그나 여러 레퍼런스를 찾아보면 Publish Over SSH를 많이 사용하는데, 현재 접속 불가 이슈가 있습니다.</p>\n<p>그러므로 SSH Agent를 사용해야 합니다.</p>\n<p>Jenkins 관리의 Plugin 탭을 들어가서 설치할 수 있습니다.</p>\n<p>Jenkins도 하나의 서버에서 동작하고 있기 때문에 운영서버로 접속하기 위한 pem 키가 필요합니다.</p>\n<p>대시보드 -> 젠킨스 관리 -> Credentials 로 이동합니다.</p>\n<p>깃허브 크리덴셜을 생성하는 것과 동일한 방법으로 pem 키를 크리덴셜로 설정합니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/3d725457a15753e0fdcec93acfa61a2f/bbbf7/img_11.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 53.529411764705884%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAs0lEQVR42q2SSxKCMBBEc/+beAf33sIFlgu0FAIh/6SdGQr3Jk7V20DRdPeMGscHhuGGWS/gqbUSaKRCOefhfEAIEaVUoiDnVjLUsqzQ5I6FzWbhSbxLMMaElJgs8IvdaRsS2Vor6r1wXWqjmNwfT4+zr0NWjjEKx196UJqWMk0zLcPLg9bJ9K2czfOtpcN/jUoU0xgjokf0XwghyFWfzhdc7yN1SFb5bHr646iveYWn5X4A9rZj6EFx0O0AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 11' title='' src='/static/3d725457a15753e0fdcec93acfa61a2f/ca1dc/img_11.png' srcset='/static/3d725457a15753e0fdcec93acfa61a2f/e7570/img_11.png 170w,\n/static/3d725457a15753e0fdcec93acfa61a2f/f46e7/img_11.png 340w,\n/static/3d725457a15753e0fdcec93acfa61a2f/ca1dc/img_11.png 680w,\n/static/3d725457a15753e0fdcec93acfa61a2f/02d09/img_11.png 1020w,\n/static/3d725457a15753e0fdcec93acfa61a2f/bbbf7/img_11.png 1280w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><strong>kind</strong>는 <code class=\"language-text\">SSH Username with private key</code>를 선택합니다.</p>\n<p><strong>id</strong>는 깃허브 크리덴셜과 마찬가지로 식별자이기 때문에 <code class=\"language-text\">원하는 값을</code> 입력하면 됩니다.</p>\n<p><strong>username</strong>은 인스턴스의 HostName ex) ubuntu@123-345-678-23의 <code class=\"language-text\">ubuntu</code> 를 입력하면 됩니다.</p>\n<p>마지막으로 <strong>인스턴스를 생성하면서 받았던 pem 키를 Add 버튼을 눌러 추가</strong>합니다.</p>\n<p>pem 키에 있는 모든 내용(Begin, End 포함)을 다 복사해서 넣어야합니다.</p>\n<hr>\n<h2>CD 스크립트 작성</h2>\n<p>이제 젠킨스가 설치된 서버에서 빌드된 결과물을 운영 서버로 전달하는 스크립트를 작성해야 합니다.</p>\n<p>이때 scp 라는 프로토콜을 사용하여 파일을 전달합니다.</p>\n<p>저희 팀이 사용한 스크립트는 아래와 같습니다.</p>\n<p>빌드 성공 유뮤, 배포 성공 유무를 슬랙과 연동해 사용하고 있습니다 !</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">pipeline <span class=\"token punctuation\">{</span>\n    agent any\n    tools <span class=\"token punctuation\">{</span>\n        gradle <span class=\"token string\">'gradle'</span>\n    <span class=\"token punctuation\">}</span>\n    triggers <span class=\"token punctuation\">{</span>\n        githubPush<span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">}</span>\n    stages <span class=\"token punctuation\">{</span>\n        stage<span class=\"token punctuation\">(</span><span class=\"token string\">'저장소 복제'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            steps <span class=\"token punctuation\">{</span>\n                // 깃허브 크리덴셜\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n        \n        stage<span class=\"token punctuation\">(</span><span class=\"token string\">'빌드'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            steps <span class=\"token punctuation\">{</span>\n                <span class=\"token function\">sh</span> <span class=\"token string\">''</span>'\n                <span class=\"token builtin class-name\">cd</span> //프로젝트 위치\n                ./gradlew clean build\n                <span class=\"token string\">''</span>'\n            <span class=\"token punctuation\">}</span>\n            post <span class=\"token punctuation\">{</span>\n                failure <span class=\"token punctuation\">{</span>\n                    slackSend <span class=\"token punctuation\">(</span>\n                        channel: <span class=\"token string\">'#알림-젠킨스'</span>,\n                        color: <span class=\"token string\">'#FF0000'</span>,\n                        message: <span class=\"token string\">\"백엔드 Build 실패...😢\"</span>\n                    <span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">}</span>\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n        stage<span class=\"token punctuation\">(</span><span class=\"token string\">'배포'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            steps <span class=\"token punctuation\">{</span>\n                sshagent<span class=\"token punctuation\">(</span>credentials: <span class=\"token punctuation\">[</span><span class=\"token string\">'pem 키로 생성한 크리덴셜 ID'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                    <span class=\"token function\">sh</span> <span class=\"token string\">''</span>'\n                        <span class=\"token builtin class-name\">cd</span> //프로젝트 위치\n                        \n                        <span class=\"token function\">ssh</span> <span class=\"token parameter variable\">-o</span> <span class=\"token assign-left variable\">StrictHostKeyChecking</span><span class=\"token operator\">=</span>no <span class=\"token punctuation\">{</span>HostName<span class=\"token punctuation\">}</span>@<span class=\"token punctuation\">{</span>Private IP<span class=\"token punctuation\">}</span> <span class=\"token function\">uptime</span>\n                        <span class=\"token builtin class-name\">cd</span> build/libs\n                        \n                        <span class=\"token function\">scp</span> <span class=\"token punctuation\">{</span>빌드된 Jar 파일명<span class=\"token punctuation\">}</span> <span class=\"token punctuation\">{</span>HostName<span class=\"token punctuation\">}</span>@<span class=\"token punctuation\">{</span>Private IP<span class=\"token punctuation\">}</span>:/home/ubuntu\n                        <span class=\"token function\">ssh</span> <span class=\"token parameter variable\">-t</span> <span class=\"token punctuation\">{</span>HostName<span class=\"token punctuation\">}</span>@<span class=\"token punctuation\">{</span>Private IP<span class=\"token punctuation\">}</span> <span class=\"token punctuation\">{</span>운영서버 배포 스크립트 파일<span class=\"token punctuation\">}</span>\n                    <span class=\"token string\">''</span>'\n                <span class=\"token punctuation\">}</span>\n            <span class=\"token punctuation\">}</span>\n            post <span class=\"token punctuation\">{</span>\n                success <span class=\"token punctuation\">{</span>\n                    slackSend <span class=\"token punctuation\">(</span>\n                        channel: <span class=\"token string\">'#알림-젠킨스'</span>,\n                        color: <span class=\"token string\">'#00FF00'</span>,\n                        message: <span class=\"token string\">\"백엔드 배포 성공! 🚀\"</span>\n                    <span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">}</span>\n                failure <span class=\"token punctuation\">{</span>\n                    slackSend <span class=\"token punctuation\">(</span>\n                        channel: <span class=\"token string\">'#알림-젠킨스'</span>,\n                        color: <span class=\"token string\">'#FF0000'</span>,\n                        message: <span class=\"token string\">\"백엔드 배포 실패 🥲\"</span>\n                    <span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">}</span>\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>CI/CD 설정을 모두 마친 후 깃허브 프로젝트에 push, pull request와 같은 trigger가 발생하면 아래와 같이 빌드 결과를 볼 수 있습니다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/b07a6d79f709673b8ffa107d58d45df6/bbbf7/img_12.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 84.11764705882354%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsTAAALEwEAmpwYAAACdklEQVR42q1S227bMAzN//9PURTbc/qQoSiKpUmT2HFly5Zkyfdb7MRnlLIO6zCgQFEDhCWSIs855CKOEzw+PsHzfOx2B/h+AMYifPZbtG2LNNUoyxJZlqOqajRN8/mC+OLv6wvmeQGro1IphmF4F5zn2dnf9/+d3xUsipKGEEIIibbtPnz81uTfZh9S7roOm+0L9gcP4zi6u21+Pp/d2TKzjGxRe79cLs4Wb51sok04nUZM0+SS7CpZs347eaMNxU+oaROkZUQ+m1uWlWt6Pk9XhH0/UMccSSLAeew0NcYgCOxOMkipYDIDrTVSshc/wtP2iIBx51NKIZEpOqqzkHkDJjJsN89Yr9fXjkRNVRJh/YqoZhANR3qSUIOA6gVYEcA3HnjFfvsTF+vHDgvLu2larFYrZ1flgeykwQeGeAihTgmyOYW+SOizQtyHCJsAycBhLop8EmaWGKbeImzB0xKpkjRpca13mWEGDUaPooYoEwJzvj7UowSrAnhm59DbBnqSLtZPDuHs1uV+eY/lcvkHYT4aRF0A3hOtUSCftUOZXVKwOsBebxG1jHzaIbexK8KsRigMYh4hDCMq3qCpW8Q5h5ft4GcHsDJA3IXOItL1SL4DIQxy0pEY8DYkY2hPLRY1octpCN+/f8PNzQ2qukKR07LrAGvxhGfxk4ru8Vr5OJYHBIWHrVzj4bjCLt0gKH34xd7FmqHBwpQtVF5Dpymth3RTnsYJshauiNWLNyEkDcZa0nGH+LU8ur/oY+cXQ4zOTjk1BaJE4e7uDre3t+iHnhaWKBccG7XGC6Gwj61edrKW8l7v8OD/cHLYoVlNwzZAVhr8Ap6uFHRoqasBAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img 12' title='' src='/static/b07a6d79f709673b8ffa107d58d45df6/ca1dc/img_12.png' srcset='/static/b07a6d79f709673b8ffa107d58d45df6/e7570/img_12.png 170w,\n/static/b07a6d79f709673b8ffa107d58d45df6/f46e7/img_12.png 340w,\n/static/b07a6d79f709673b8ffa107d58d45df6/ca1dc/img_12.png 680w,\n/static/b07a6d79f709673b8ffa107d58d45df6/02d09/img_12.png 1020w,\n/static/b07a6d79f709673b8ffa107d58d45df6/bbbf7/img_12.png 1280w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h3>Reference</h3>\n<p><a href=\"https://developer-nyong.tistory.com/47#article-7-1--ssh-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EC%84%A4%EC%B9%98\">베베의 CI/CD 글</a></p>","frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기","date":"July 24, 2023","update":"July 24, 2023","tags":["CI/CD","젠킨스","Webhook","설정"],"series":null},"fields":{"slug":"/ci-cd-setting/","readingTime":{"minutes":12.605}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}},"next":{"fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},"pageContext":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","series":null,"previousPostId":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","nextPostId":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/db-drop-stop/page-data.json b/page-data/db-drop-stop/page-data.json
index 5de08d4d..3854e727 100644
--- a/page-data/db-drop-stop/page-data.json
+++ b/page-data/db-drop-stop/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/db-drop-stop/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 본 설명 글은 다음과 같은 환경에서 진행됩니다. 배포서버 : Ubuntu 22.04.2 LTS DB서버 : Ubuntu 22.04.2 LTS 배포서버와 DB서버는 동일한 VPC를 사용하고 있습니다. DB : MySQL 8.0.33 Application : Spr…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>', '<a href=\"https://github.com/kim0914\">그레이</a>', '<a href=\"https://github.com/yeonkkk\">조이</a>', '<a href=\"https://github.com/rawfishthelgh\">하마드</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p>본 설명 글은 다음과 같은 환경에서 진행됩니다.</p>\n<blockquote>\n<ul>\n<li>배포서버 : Ubuntu 22.04.2 LTS</li>\n<li>DB서버 : Ubuntu 22.04.2 LTS</li>\n<li>배포서버와 DB서버는 동일한 VPC를 사용하고 있습니다.</li>\n<li>DB : MySQL 8.0.33</li>\n<li>Application : SpringBoot 3.1.1</li>\n</ul>\n</blockquote>\n<p>개발 과정에서 실수로 Application 단에서 DB 혹은 테이블을 Drop 해버리는 상황이 있을 수 있다.</p>\n<p>테이블의 수정이 제한된 유저를 생성하여 해당 유저를 Application에서 사용하도록 구성해보자. </p>\n<blockquote>\n<p>도움을 주신 G선생님께 감사의 인사 올리며 시작하겠습니다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 636px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/8f933cb276f688c756d9cbf5800a4405/44bb2/c34a6c3a.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 43.529411764705884%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABIUlEQVR42q2STU/CQBCG9w+ZUAoCtbAf7bYV6ZbS8pGoCYL+BS9evXvy6G99nd0WgiExRj08eWd2JjOzmWFT84zgSmM40vB7Ar2+/BPsdv8BzlMEYfY/Bb2LAF6Xo0vYgl2f1BcNv2jA5NMWWlfIrldIsiXSVg/IaA6hih/Dbt5eUOR3qFd7LOod6vUjymqLarlDWT8gm26gM9vke3S6dLCQFiLUHBNhWnJwaTDmufObzvMzmskPdgkVLxDRT1m5eUU4TiCVoYBxKmSOWJeUnENF1p85XE4b52KGKC7Ib+xRkKB/qcDW9+90NpFLskFJau0kXUCImXuz2sQNTVI4tUWOzcgeDCJaJAfrdIa0WUGbnnyh443P3k6x13D0fX68iE9C9T4iTjV+ggAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='c34a6c3a' title='' src='/static/8f933cb276f688c756d9cbf5800a4405/44bb2/c34a6c3a.png' srcset='/static/8f933cb276f688c756d9cbf5800a4405/e7570/c34a6c3a.png 170w,\n/static/8f933cb276f688c756d9cbf5800a4405/f46e7/c34a6c3a.png 340w,\n/static/8f933cb276f688c756d9cbf5800a4405/44bb2/c34a6c3a.png 636w' sizes='(max-width: 636px) 100vw, 636px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n</blockquote>\n<h2>유저 생성하기</h2>\n<blockquote>\n<p>이후 진행할 작업에서 권한 부여를 위해 root 권한이 필요합니다.</p>\n</blockquote>\n<p>우선 root 권한을 가진 계정으로 MySQL에 로그인 한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># MySQL에 로그인</span>\n<span class=\"token function\">sudo</span> mysql <span class=\"token parameter variable\">-u</span> root <span class=\"token parameter variable\">-p</span></code></pre></div>\n<p>Application에서 사용할 유저를 생성한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"sql\"><pre class=\"language-sql\"><code class=\"language-sql\"><span class=\"token keyword\">CREATE</span> <span class=\"token keyword\">USER</span> <span class=\"token string\">'pium'</span><span class=\"token variable\">@'localhost'</span> IDENTIFIED <span class=\"token keyword\">BY</span> <span class=\"token string\">'password'</span><span class=\"token punctuation\">;</span></code></pre></div>\n<blockquote>\n<p>만약 외부에서 접근해야하는 유저의 경우 다음 명령어를 참고하세요</p>\n<div class=\"gatsby-highlight\" data-language=\"sql\"><pre class=\"language-sql\"><code class=\"language-sql\"><span class=\"token comment\"># 외부 모든 IP에 대한 pium 이라는 유저 생성 </span>\n<span class=\"token keyword\">CREATE</span> <span class=\"token keyword\">USER</span> <span class=\"token string\">'pium'</span><span class=\"token variable\">@'%'</span> IDENTIFIED <span class=\"token keyword\">BY</span> <span class=\"token string\">'password'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\"># 특정 인스턴스에서만 접속가능한 pium 이라는 유저 생성 </span>\n<span class=\"token keyword\">CREATE</span> <span class=\"token keyword\">USER</span> <span class=\"token string\">'pium'</span><span class=\"token variable\">@'접속할 인스턴스의 private ip'</span> IDENTIFIED <span class=\"token keyword\">BY</span> <span class=\"token string\">'password'</span><span class=\"token punctuation\">;</span></code></pre></div>\n</blockquote>\n<h2>권한 부여하기</h2>\n<p>MySQL에서 설정할 수 있는 권한은 아래와 같다.</p>\n<table>\n<thead>\n<tr>\n<th>권한</th>\n<th>내용</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>CREATE, ALTER, DROP</td>\n<td>테이블 생성, 변경, 삭제</td>\n</tr>\n<tr>\n<td>SELECT, INSERT, UPDATE, DELETE</td>\n<td>테이블의 레코드 조회, 입력, 수정, 삭제</td>\n</tr>\n<tr>\n<td>RELOAD</td>\n<td>권한 부여된 내용을 리로드</td>\n</tr>\n<tr>\n<td>SHUTDOWN</td>\n<td>서버 종료 작업 실행</td>\n</tr>\n<tr>\n<td>ALL</td>\n<td>모든 권한 허용</td>\n</tr>\n<tr>\n<td>USAGE</td>\n<td>권한 없이 계정만 생성</td>\n</tr>\n</tbody>\n</table>\n<p>우리는 <code class=\"language-text\">INSERT</code>, <code class=\"language-text\">UPDATE</code>, <code class=\"language-text\">SELECT</code>, <code class=\"language-text\">DELETE</code>만 사용하면 되기 떄문에, 새로 생성한 유저에게 해당 권한만 부여한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"sql\"><pre class=\"language-sql\"><code class=\"language-sql\"><span class=\"token keyword\">GRANT</span> <span class=\"token keyword\">SELECT</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">INSERT</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">UPDATE</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">DELETE</span> <span class=\"token keyword\">ON</span> pium_db<span class=\"token punctuation\">.</span><span class=\"token operator\">*</span> <span class=\"token keyword\">TO</span> <span class=\"token string\">'pium'</span><span class=\"token variable\">@'localhost'</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>설정한 권한을 <code class=\"language-text\">flush</code> 명령어를 이용해 적용한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"sql\"><pre class=\"language-sql\"><code class=\"language-sql\">FLUSH <span class=\"token keyword\">PRIVILEGES</span><span class=\"token punctuation\">;</span></code></pre></div>\n<h2>확인하기</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/dc3f7abd340d9d43646bcd6592067702/2573e/bd8e631c.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 4.705882352941177%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAR0lEQVR42mMwUFf7b6Sh8d9IR++/nqrGfy1ltf86Kur/tZXV/2sC2WqKKv8FBAT/c3Pz/Ofh4cXAXEBxKQmp/1pAPVrKqv8BQz4aj54VZi8AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='bd8e631c' title='' src='/static/dc3f7abd340d9d43646bcd6592067702/ca1dc/bd8e631c.png' srcset='/static/dc3f7abd340d9d43646bcd6592067702/e7570/bd8e631c.png 170w,\n/static/dc3f7abd340d9d43646bcd6592067702/f46e7/bd8e631c.png 340w,\n/static/dc3f7abd340d9d43646bcd6592067702/ca1dc/bd8e631c.png 680w,\n/static/dc3f7abd340d9d43646bcd6592067702/02d09/bd8e631c.png 1020w,\n/static/dc3f7abd340d9d43646bcd6592067702/9d567/bd8e631c.png 1360w,\n/static/dc3f7abd340d9d43646bcd6592067702/2573e/bd8e631c.png 1380w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>실제로 생성된 유저로 접속하여 Drop Table 명령어를 수행했을 때 권한 부족으로 수행되지 않음을 확인할 수 있다.</p>\n<h2>Application properties 적용</h2>\n<p>Application의 설정파일에 생성한 유저의 정보를 작성한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/a5fdcb6a4b9204f52f0ba28e89ec7605/e7448/54161808.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 21.176470588235293%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAjUlEQVR42pWOSQ7CMBAEx0uwsmLHdhIkC/H/TxZDTogLyqHUc2jVtMhakPZEjgdm2xlTYlkWombLK61WSh+4izAaYfii/0mnHZF7OmVSKlZxMfJqjWPbEGNwvsMai9Gy/YM5hXFF9uPE54KfZ+w00Q09LgQ68yldIWVdp2uSinPVe8frk9s0E8aBcFH4BvinVdVHH7LcAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='54161808' title='' src='/static/a5fdcb6a4b9204f52f0ba28e89ec7605/ca1dc/54161808.png' srcset='/static/a5fdcb6a4b9204f52f0ba28e89ec7605/e7570/54161808.png 170w,\n/static/a5fdcb6a4b9204f52f0ba28e89ec7605/f46e7/54161808.png 340w,\n/static/a5fdcb6a4b9204f52f0ba28e89ec7605/ca1dc/54161808.png 680w,\n/static/a5fdcb6a4b9204f52f0ba28e89ec7605/e7448/54161808.png 900w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>이를 통해 Applicaiton에서는 Table의 생성, 수정, 삭제에 대한 조작을 할 수 없게 되었다.</p>\n<p>만약 테이블의 생성, 수정, 삭제에 대한 작업이 필요할 경우 DBA 혹은 DB 담당자에게 요청하는 프로세스를 거쳐야만 한다.</p>\n<h2>Reference</h2>\n<ul>\n<li>Chat GTP 4</li>\n<li>피움 백엔드 팀의 집단지성</li>\n</ul>","frontmatter":{"title":"Table Drop 못하게 막아버리기","date":"July 28, 2023","update":"July 28, 2023","tags":["DB","MySQL"],"series":null},"fields":{"slug":"/db-drop-stop/","readingTime":{"minutes":3.58}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}},"next":{"fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},"pageContext":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","series":null,"previousPostId":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","nextPostId":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/db-drop-stop/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 본 설명 글은 다음과 같은 환경에서 진행됩니다. 배포서버 : Ubuntu 22.04.2 LTS DB서버 : Ubuntu 22.04.2 LTS 배포서버와 DB서버는 동일한 VPC를 사용하고 있습니다. DB : MySQL 8.0.33 Application : Spr…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>', '<a href=\"https://github.com/kim0914\">그레이</a>', '<a href=\"https://github.com/yeonkkk\">조이</a>', '<a href=\"https://github.com/rawfishthelgh\">하마드</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p>본 설명 글은 다음과 같은 환경에서 진행됩니다.</p>\n<blockquote>\n<ul>\n<li>배포서버 : Ubuntu 22.04.2 LTS</li>\n<li>DB서버 : Ubuntu 22.04.2 LTS</li>\n<li>배포서버와 DB서버는 동일한 VPC를 사용하고 있습니다.</li>\n<li>DB : MySQL 8.0.33</li>\n<li>Application : SpringBoot 3.1.1</li>\n</ul>\n</blockquote>\n<p>개발 과정에서 실수로 Application 단에서 DB 혹은 테이블을 Drop 해버리는 상황이 있을 수 있다.</p>\n<p>테이블의 수정이 제한된 유저를 생성하여 해당 유저를 Application에서 사용하도록 구성해보자. </p>\n<blockquote>\n<p>도움을 주신 G선생님께 감사의 인사 올리며 시작하겠습니다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 636px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/8f933cb276f688c756d9cbf5800a4405/44bb2/c34a6c3a.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 43.529411764705884%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABIUlEQVR42q2STU/CQBCG9w+ZUAoCtbAf7bYV6ZbS8pGoCYL+BS9evXvy6G99nd0WgiExRj08eWd2JjOzmWFT84zgSmM40vB7Ar2+/BPsdv8BzlMEYfY/Bb2LAF6Xo0vYgl2f1BcNv2jA5NMWWlfIrldIsiXSVg/IaA6hih/Dbt5eUOR3qFd7LOod6vUjymqLarlDWT8gm26gM9vke3S6dLCQFiLUHBNhWnJwaTDmufObzvMzmskPdgkVLxDRT1m5eUU4TiCVoYBxKmSOWJeUnENF1p85XE4b52KGKC7Ib+xRkKB/qcDW9+90NpFLskFJau0kXUCImXuz2sQNTVI4tUWOzcgeDCJaJAfrdIa0WUGbnnyh443P3k6x13D0fX68iE9C9T4iTjV+ggAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='c34a6c3a' title='' src='/static/8f933cb276f688c756d9cbf5800a4405/44bb2/c34a6c3a.png' srcset='/static/8f933cb276f688c756d9cbf5800a4405/e7570/c34a6c3a.png 170w,\n/static/8f933cb276f688c756d9cbf5800a4405/f46e7/c34a6c3a.png 340w,\n/static/8f933cb276f688c756d9cbf5800a4405/44bb2/c34a6c3a.png 636w' sizes='(max-width: 636px) 100vw, 636px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n</blockquote>\n<h2>유저 생성하기</h2>\n<blockquote>\n<p>이후 진행할 작업에서 권한 부여를 위해 root 권한이 필요합니다.</p>\n</blockquote>\n<p>우선 root 권한을 가진 계정으로 MySQL에 로그인 한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># MySQL에 로그인</span>\n<span class=\"token function\">sudo</span> mysql <span class=\"token parameter variable\">-u</span> root <span class=\"token parameter variable\">-p</span></code></pre></div>\n<p>Application에서 사용할 유저를 생성한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"sql\"><pre class=\"language-sql\"><code class=\"language-sql\"><span class=\"token keyword\">CREATE</span> <span class=\"token keyword\">USER</span> <span class=\"token string\">'pium'</span><span class=\"token variable\">@'localhost'</span> IDENTIFIED <span class=\"token keyword\">BY</span> <span class=\"token string\">'password'</span><span class=\"token punctuation\">;</span></code></pre></div>\n<blockquote>\n<p>만약 외부에서 접근해야하는 유저의 경우 다음 명령어를 참고하세요</p>\n<div class=\"gatsby-highlight\" data-language=\"sql\"><pre class=\"language-sql\"><code class=\"language-sql\"><span class=\"token comment\"># 외부 모든 IP에 대한 pium 이라는 유저 생성 </span>\n<span class=\"token keyword\">CREATE</span> <span class=\"token keyword\">USER</span> <span class=\"token string\">'pium'</span><span class=\"token variable\">@'%'</span> IDENTIFIED <span class=\"token keyword\">BY</span> <span class=\"token string\">'password'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\"># 특정 인스턴스에서만 접속가능한 pium 이라는 유저 생성 </span>\n<span class=\"token keyword\">CREATE</span> <span class=\"token keyword\">USER</span> <span class=\"token string\">'pium'</span><span class=\"token variable\">@'접속할 인스턴스의 private ip'</span> IDENTIFIED <span class=\"token keyword\">BY</span> <span class=\"token string\">'password'</span><span class=\"token punctuation\">;</span></code></pre></div>\n</blockquote>\n<h2>권한 부여하기</h2>\n<p>MySQL에서 설정할 수 있는 권한은 아래와 같다.</p>\n<table>\n<thead>\n<tr>\n<th>권한</th>\n<th>내용</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>CREATE, ALTER, DROP</td>\n<td>테이블 생성, 변경, 삭제</td>\n</tr>\n<tr>\n<td>SELECT, INSERT, UPDATE, DELETE</td>\n<td>테이블의 레코드 조회, 입력, 수정, 삭제</td>\n</tr>\n<tr>\n<td>RELOAD</td>\n<td>권한 부여된 내용을 리로드</td>\n</tr>\n<tr>\n<td>SHUTDOWN</td>\n<td>서버 종료 작업 실행</td>\n</tr>\n<tr>\n<td>ALL</td>\n<td>모든 권한 허용</td>\n</tr>\n<tr>\n<td>USAGE</td>\n<td>권한 없이 계정만 생성</td>\n</tr>\n</tbody>\n</table>\n<p>우리는 <code class=\"language-text\">INSERT</code>, <code class=\"language-text\">UPDATE</code>, <code class=\"language-text\">SELECT</code>, <code class=\"language-text\">DELETE</code>만 사용하면 되기 떄문에, 새로 생성한 유저에게 해당 권한만 부여한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"sql\"><pre class=\"language-sql\"><code class=\"language-sql\"><span class=\"token keyword\">GRANT</span> <span class=\"token keyword\">SELECT</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">INSERT</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">UPDATE</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">DELETE</span> <span class=\"token keyword\">ON</span> pium_db<span class=\"token punctuation\">.</span><span class=\"token operator\">*</span> <span class=\"token keyword\">TO</span> <span class=\"token string\">'pium'</span><span class=\"token variable\">@'localhost'</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>설정한 권한을 <code class=\"language-text\">flush</code> 명령어를 이용해 적용한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"sql\"><pre class=\"language-sql\"><code class=\"language-sql\">FLUSH <span class=\"token keyword\">PRIVILEGES</span><span class=\"token punctuation\">;</span></code></pre></div>\n<h2>확인하기</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/dc3f7abd340d9d43646bcd6592067702/2573e/bd8e631c.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 4.705882352941177%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAR0lEQVR42mMwUFf7b6Sh8d9IR++/nqrGfy1ltf86Kur/tZXV/2sC2WqKKv8FBAT/c3Pz/Ofh4cXAXEBxKQmp/1pAPVrKqv8BQz4aj54VZi8AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='bd8e631c' title='' src='/static/dc3f7abd340d9d43646bcd6592067702/ca1dc/bd8e631c.png' srcset='/static/dc3f7abd340d9d43646bcd6592067702/e7570/bd8e631c.png 170w,\n/static/dc3f7abd340d9d43646bcd6592067702/f46e7/bd8e631c.png 340w,\n/static/dc3f7abd340d9d43646bcd6592067702/ca1dc/bd8e631c.png 680w,\n/static/dc3f7abd340d9d43646bcd6592067702/02d09/bd8e631c.png 1020w,\n/static/dc3f7abd340d9d43646bcd6592067702/9d567/bd8e631c.png 1360w,\n/static/dc3f7abd340d9d43646bcd6592067702/2573e/bd8e631c.png 1380w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>실제로 생성된 유저로 접속하여 Drop Table 명령어를 수행했을 때 권한 부족으로 수행되지 않음을 확인할 수 있다.</p>\n<h2>Application properties 적용</h2>\n<p>Application의 설정파일에 생성한 유저의 정보를 작성한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/a5fdcb6a4b9204f52f0ba28e89ec7605/e7448/54161808.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 21.176470588235293%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAjUlEQVR42pWOSQ7CMBAEx0uwsmLHdhIkC/H/TxZDTogLyqHUc2jVtMhakPZEjgdm2xlTYlkWombLK61WSh+4izAaYfii/0mnHZF7OmVSKlZxMfJqjWPbEGNwvsMai9Gy/YM5hXFF9uPE54KfZ+w00Q09LgQ68yldIWVdp2uSinPVe8frk9s0E8aBcFH4BvinVdVHH7LcAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='54161808' title='' src='/static/a5fdcb6a4b9204f52f0ba28e89ec7605/ca1dc/54161808.png' srcset='/static/a5fdcb6a4b9204f52f0ba28e89ec7605/e7570/54161808.png 170w,\n/static/a5fdcb6a4b9204f52f0ba28e89ec7605/f46e7/54161808.png 340w,\n/static/a5fdcb6a4b9204f52f0ba28e89ec7605/ca1dc/54161808.png 680w,\n/static/a5fdcb6a4b9204f52f0ba28e89ec7605/e7448/54161808.png 900w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>이를 통해 Applicaiton에서는 Table의 생성, 수정, 삭제에 대한 조작을 할 수 없게 되었다.</p>\n<p>만약 테이블의 생성, 수정, 삭제에 대한 작업이 필요할 경우 DBA 혹은 DB 담당자에게 요청하는 프로세스를 거쳐야만 한다.</p>\n<h2>Reference</h2>\n<ul>\n<li>Chat GTP 4</li>\n<li>피움 백엔드 팀의 집단지성</li>\n</ul>","frontmatter":{"title":"Table Drop 못하게 막아버리기","date":"July 28, 2023","update":"July 28, 2023","tags":["DB","MySQL"],"series":null},"fields":{"slug":"/db-drop-stop/","readingTime":{"minutes":3.58}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}},"next":{"fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},"pageContext":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","series":null,"previousPostId":"1a03734e-d413-553f-9152-1dad2fc4acca","nextPostId":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/fe-tanstack-query/page-data.json b/page-data/fe-tanstack-query/page-data.json
index f8ab4cc7..a23c8a9b 100644
--- a/page-data/fe-tanstack-query/page-data.json
+++ b/page-data/fe-tanstack-query/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/fe-tanstack-query/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","excerpt":"이 글은 우아한테크코스 5기, 피움팀 크루 '참새'가 작성했습니다. 서론  피움의 프론트엔드에서는 서버 상태 관리를 위해 Tanstack Query를 사용하기로 하였다. 이 글에서는 많고 많은 상태 관리 라이브러리 중 Tanstack Query를 사용하기로 결정한 이유를 소개하고자 한다. 설치한 버전: 5.0.0-alpha.86 Tanstack query…","html":"<blockquote>\n<p>이 글은 우아한테크코스 5기, 피움팀 크루 '<a href=\"https://github.com/WaiNaat\">참새</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p><figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/786b9835d1c8415b10776ff3826ac6a8/3bd09/tanstack.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 46.470588235294116%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAABJ0AAASdAHeZh94AAAB6klEQVR42m1R2W7aUBD15/cXuj1UrRTUiEIJINMYh8UFbLElJYtoU8JiDME22Hi7JnA6vqloHvpwdO/MaM6cMyOweAcOFoM97RHoS/ijCdjhgHgPsDCEvxgj8rZgu/1zjoUItwbFT9Qb48hBEF4SxgC83gDWhxQcpYpNrUTIwRTfwpLfwL0rY3OdgTuSYPZfIdiMSASexfyPkO0PCNYObKmKx5NPWCtE0K3DbuVha1mYjfdYqa+xHhZg3rzD1rzlhBFj/wgjIgojdoTnBwgTcrLjhQzO1kPg+wjYjuoRQvLsBxRH8dFu9FIhucRsNkc6U8Bp+gxNtYOW1kFBLCOXL+HjSRrD+xHP54sSiqKMn/djVGpN1BQV9e8aQUUQhNjRDQR9voDS0JD6nEXqNMuL4jcZX74W6b2A1u7jXK7SsBxK5xfInYlE1EKG6gVRgiTX+eDBzR1XKozGU1LURf/yGp3uFbr9Aa5+3GJCqpPXMAyoTZlQwa9hD22thm5bQUORcNlTUZZEqK0K/RtwnDWEZG+mZWPjuHBdD6a9hmVvsDJtjqRmU261MulvwTQtqiex9bfPISI6JPUkXEKyaJcWv/UCfpDJVMdUNzh+P0ygG0vo8yWmM4OrnuoLzI1HPExmfGAQRtQX8v7E8h+5s44JPeZX3QAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='Tanstack: High-quality open-source software for web developers. Headless, type-safe, and powerful utilities for state management, routing, data visualization, charts, tables, and more.' title='' src='/static/786b9835d1c8415b10776ff3826ac6a8/ca1dc/tanstack.png' srcset='/static/786b9835d1c8415b10776ff3826ac6a8/e7570/tanstack.png 170w,\n/static/786b9835d1c8415b10776ff3826ac6a8/f46e7/tanstack.png 340w,\n/static/786b9835d1c8415b10776ff3826ac6a8/ca1dc/tanstack.png 680w,\n/static/786b9835d1c8415b10776ff3826ac6a8/3bd09/tanstack.png 896w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>Tanstack: High-quality open-source software for web developers. Headless, type-safe, and powerful utilities for state management, routing, data visualization, charts, tables, and more.</figcaption>\n  </figure></p>\n<p>피움의 프론트엔드에서는 서버 상태 관리를 위해 <a href=\"https://tanstack.com/query/v5/docs/react/overview\">Tanstack Query</a>를 사용하기로 하였다.</p>\n<p>이 글에서는 많고 많은 상태 관리 라이브러리 중 Tanstack Query를 사용하기로 결정한 이유를 소개하고자 한다.</p>\n<blockquote>\n<p>설치한 버전: 5.0.0-alpha.86</p>\n</blockquote>\n<h2>Tanstack query로 얻을 수 있는 개발적인 이점</h2>\n<h3>코드 간소화와 컴포넌트의 관심사 분리</h3>\n<p>Tanstack query에서 제공하는 다양한 함수들을 활용하면 비동기 통신의 처리 코드를 선언형으로 만들 수 있다. 또한 Tanstack query가 서버와의 통신을 대신해주기 때문에 컴포넌트의 렌더링 함수는 UI/UX의 구현이라는 보다 근본적인 내용에 집중할 수 있다. 조금 더 풀어서 설명하면 네 가지로 나눌 수 있다.</p>\n<p>우선 <code class=\"language-text\">&lt;Suspense></code>와 <code class=\"language-text\">&lt;ErrorBoundary></code>의 편한 사용이 가능하다. 이 둘을 사용하기 위해서는 각각 promise 또는 error를 throw하는 과정이 필요하다. 특히 error가 아닌 것을 던진다는 생각은 기존의 틀을 깨는 것으로 (eslint에 <a href=\"https://eslint.org/docs/latest/rules/no-throw-literal\">관련 설정</a>이 있다는 점으로 미루어 볼 때 자주 사용하는 기법이 아니었을 것이다) 새로운 코드를 짜야 한다. <a href=\"https://react.dev/reference/react/Suspense#displaying-a-fallback-while-content-is-loading\">Suspense를 설명하는 리액트 공식 문서</a>의 첫 번째 예제에서 Fork를 눌러 <code class=\"language-text\">Albums.js</code>안의 <code class=\"language-text\">use()</code>함수를 보면 promise를 던지기 위해 굉장히 재미있는 기법을 사용하고 있다는 걸 확인할 수 있다. 이러한 일련의 과정을 tanstack query가 대신하기 때문에 편리한 사용이 가능하다.</p>\n<p>다음으로 낙관적 업데이트를 적용하기에 유리하다. <code class=\"language-text\">useMutation</code>의 <code class=\"language-text\">onSuccess</code>, <code class=\"language-text\">onError</code>, <code class=\"language-text\">onSettled</code>와 같은 설정을 이용하면 된다.</p>\n<p>세 번째로는 비동기 통신의 결과 타입을 자동으로 추론해준다는 점이다. 따라서 컴포넌트 내부에서 불필요한 타입 가드 및 추론, 강제 타입 지정과 같은 행동을 하지 않아도 되므로 타입스크립트를 더 깔끔하게 사용할 수 있다.</p>\n<p>마지막으로 서버 상태 처리를 위한 전역 상태 관리 라이브러리를 도입하지 않아도 된다. 물론 이건 비단 tanstack query만의 장점은 아니다. 하지만 캐싱을 이용해서 전역 상태를 이용하지 않고도 여러 컴포넌트에서 같은 쿼리를 요청했을 경우 추가적인 통신 없이도 정보를 전달받을 수 있다는 점은 매력적이다.</p>\n<h3>비동기 통신</h3>\n<ol>\n<li>캐싱을 지원하기 때문에 서버와의 불필요한 통신을 줄일 수 있다.</li>\n<li>다양한 상황에서 자동 refetch가 가능해서 원한다면 항상 최신 값을 유지할 수 있다.</li>\n<li>여러 컴포넌트가 같은 쿼리를 사용할 때, 해당 쿼리로부터 반환되는 데이터가 바뀌었다면 그 컴포넌트들을 한 번에 업데이트할 수 있다.</li>\n<li>쿼리가 오랫동안 사용되지 않으면 가비지 컬렉터를 자동으로 불러서 정리한다.</li>\n</ol>\n<h2>다른 라이브러리와의 비교</h2>\n<p>우리 팀에서는 Recoil 이외의 다른 전역 상태 라이브러리나 서버 상태 라이브러리를 사용해본 경험이 많은 크루가 없어서 간단하게만 비교하였다.</p>\n<h3><a href=\"https://github.com/vercel/swr\">SWR</a></h3>\n<p>Next.js 팀에서 만든 서버 상태 관리 라이브러리. 데이터 캐싱이라는 측면에 집중했다. 따라서 다른 라이브러리와 비교했을 때 굉장히 가벼운 편에 속한다.</p>\n<h3><a href=\"https://tanstack.com/query/v5/docs/react\">Tanstack Query</a></h3>\n<p>데이터 캐싱뿐만이 아니라 에러 처리나 무한 스크롤과 같은 다양한 기능을 지원한다. 비슷한 기능을 하는 리액트 쿼리의 <a href=\"https://tanstack.com/query/v5/docs/react/reference/useQuery\"><code class=\"language-text\">useQuery</code></a>와 SWR의 <a href=\"https://swr.vercel.app/docs/data-fetching\"><code class=\"language-text\">useSWR</code></a>의 반환값을 확인해보았을 때 받을 수 있는 정보의 양이 차이가 많이 난다. 다양한 상황을 고려한 UI를 보여준다면 Tanstack query를 활용하는 것이 좋겠다는 생각을 했다. 추가적으로 받아온 데이터의 일차 가공이 필요하다면 <code class=\"language-text\">useQuery</code>에서 <code class=\"language-text\">selector</code>를 사용할 수 있다는 점도 상대적인 장점이라고 생각한다.</p>\n<h3>Redux, Recoil 등 다른 전역 상태 관리 라이브러리</h3>\n<p>현재 피움 서비스 내에서 전역적으로 관리할 값이 많지 않다고 판단하였다.</p>\n<p>또한 일반적인 전역 상태 라이브러리의 경우 서버 상태를 나타나기에는 부적절한 것 같다. 특히 Recoil은 selector의 캐시 문제로 인해 사용자의 장바구니 목록처럼 자주 변하는 값을 받아오기 굉장히 힘들었던 기억이 있다.</p>\n<h2>Tanstack Query로 사용자에게 어떤 서비스를 제공하고자 하는지</h2>\n<p>우리가 추구해야 하는 것은 기술적 고점이 아니다. 그렇기 때문에 이 라이브러리를 도입해서 사용자에게 어떤 경험을 선사할 수 있을지 고민하였다.</p>\n<ol>\n<li>\n<p>Suspense</p>\n<ul>\n<li>Suspense는 사용자에게 '지금 무슨 일을 하는 중이다'라는 암시를 준다. 따라서 사용자의 기다리는 시간을 편하게 할 수 있다.</li>\n<li>피움 서비스의 '식물 사전' 기능은 공공데이터를 활용한다. 현재 사용하고 있는 공공데이터의 경우 이용에 제약이 없어서 DB에 저장할 수 있다. 만약 그렇지 않아서 항상 백엔드 서버에서 공공데이터 API와의 통신을 추가적으로 진행해야 할 경우 정보를 받아오는 데 시간이 걸린다. 이 때 Suspense를 잘 활용할 수 있을 것이다.</li>\n</ul>\n</li>\n<li>\n<p>Refetch</p>\n<ul>\n<li>피움 서비스는 모바일 환경을 우선적으로 고려하고 있다.</li>\n<li>지하철 와이파이처럼 인터넷이 불안정한 곳에서는 요청이 잘 가지 않을 수 있다. 이 때 사용자가 같은 행동을 두 번 하지 않더라도 tanstack query가 자동적으로 요청을 보내서 UX 측면의 개선이 가능하다.</li>\n</ul>\n</li>\n<li>\n<p>caching</p>\n<ul>\n<li>'식물 사전 정보'는 변하지 않는 자료이다. 따라서 사용자가 여러 번 요청을 하더라도 매번 같은 정보를 보게 된다. 이러한 요청에 대해서는 <code class=\"language-text\">staletime</code>을 길게 잡아 캐시를 오래 유지한다면 불필요한 서버와의 통신을 줄이고 사용자 경험도 개선할 수 있다.</li>\n<li>'내가 키우는 식물 목록'이나 '내가 키우는 식물의 상세 정보'도 사용자가 값을 추가하거나 바꾸지 않는 이상 변하지 않는 값이다. 이 친구들도 적절한 캐싱을 사용하면 서버와의 통신을 줄여 사용자의 대기시간을 줄일 수 있다.</li>\n</ul>\n</li>\n<li>\n<p>무한 스크롤</p>\n<ul>\n<li>피움에서는 자신의 식물에게 물을 준 날짜들을 기억해서 타임라인 형태로 볼 수 있도록 제공할 계획이다. 타임라인은 시간의 흐름을 나타내기 위한 도구이다. '시간'과 '흐름' 모두 연속성을 띠는 표현인 만큼 무한 스크롤을 이용해 유의미한 경험을 제공할 것이다.</li>\n</ul>\n</li>\n</ol>\n<h3>Tanstack Query v5를 사용하게 된 이유</h3>\n<p>마지막으로 피움 프론트엔드에서 Tanstack query의 다섯 번째 메이저 버전을 사용하기로 한 이유를 짧게 남긴다. Tanstack query v5는 <a href=\"https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5\">획기적인 변화</a>가 있고, alpha 단계이다.</p>\n<ol>\n<li>어차피 버전은 5로 흘러간다. 피움 프론트엔드의 세 크루 모두 Tanstack query를 처음 배우는 단계라면 굳이 역사의 뒤안길로 흘러갈 v4부터 배울 필요는 없다고 생각한다.</li>\n<li>문서를 살펴본 결과 v5의 '획기적인 변화'는 대부분 기존의 불필요하거나 문제를 일으키기 쉬운 기능을 제거하는 것이었다. 따라서 만약 v4를 학습해야 한다면 기존의 v5 공부 내용에서 덧붙이는 방법으로 가능할 것이다.</li>\n<li>현재 피움 서비스에서는 복잡한 서버와의 데이터 통신은 없을 것 같다. 따라서 alpha 단계이기 때문에 무언가가 안 되는 상황은 없을 것으로 예상된다.</li>\n</ol>","frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여","date":"July 23, 2023","update":"July 23, 2023","tags":["Tanstack Query","React Query","리액트 쿼리"],"series":null},"fields":{"slug":"/fe-tanstack-query/","readingTime":{"minutes":11.195}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}},"next":{"fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},"pageContext":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","series":null,"previousPostId":"a78e224b-b711-5071-8e90-013d6f4bebc3","nextPostId":"159c943b-1a50-57dd-aa71-7557364752a5"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/fe-tanstack-query/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","excerpt":"이 글은 우아한테크코스 5기, 피움팀 크루 '참새'가 작성했습니다. 서론  피움의 프론트엔드에서는 서버 상태 관리를 위해 Tanstack Query를 사용하기로 하였다. 이 글에서는 많고 많은 상태 관리 라이브러리 중 Tanstack Query를 사용하기로 결정한 이유를 소개하고자 한다. 설치한 버전: 5.0.0-alpha.86 Tanstack query…","html":"<blockquote>\n<p>이 글은 우아한테크코스 5기, 피움팀 크루 '<a href=\"https://github.com/WaiNaat\">참새</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p><figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/786b9835d1c8415b10776ff3826ac6a8/3bd09/tanstack.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 46.470588235294116%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAABJ0AAASdAHeZh94AAAB6klEQVR42m1R2W7aUBD15/cXuj1UrRTUiEIJINMYh8UFbLElJYtoU8JiDME22Hi7JnA6vqloHvpwdO/MaM6cMyOweAcOFoM97RHoS/ijCdjhgHgPsDCEvxgj8rZgu/1zjoUItwbFT9Qb48hBEF4SxgC83gDWhxQcpYpNrUTIwRTfwpLfwL0rY3OdgTuSYPZfIdiMSASexfyPkO0PCNYObKmKx5NPWCtE0K3DbuVha1mYjfdYqa+xHhZg3rzD1rzlhBFj/wgjIgojdoTnBwgTcrLjhQzO1kPg+wjYjuoRQvLsBxRH8dFu9FIhucRsNkc6U8Bp+gxNtYOW1kFBLCOXL+HjSRrD+xHP54sSiqKMn/djVGpN1BQV9e8aQUUQhNjRDQR9voDS0JD6nEXqNMuL4jcZX74W6b2A1u7jXK7SsBxK5xfInYlE1EKG6gVRgiTX+eDBzR1XKozGU1LURf/yGp3uFbr9Aa5+3GJCqpPXMAyoTZlQwa9hD22thm5bQUORcNlTUZZEqK0K/RtwnDWEZG+mZWPjuHBdD6a9hmVvsDJtjqRmU261MulvwTQtqiex9bfPISI6JPUkXEKyaJcWv/UCfpDJVMdUNzh+P0ygG0vo8yWmM4OrnuoLzI1HPExmfGAQRtQX8v7E8h+5s44JPeZX3QAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='Tanstack: High-quality open-source software for web developers. Headless, type-safe, and powerful utilities for state management, routing, data visualization, charts, tables, and more.' title='' src='/static/786b9835d1c8415b10776ff3826ac6a8/ca1dc/tanstack.png' srcset='/static/786b9835d1c8415b10776ff3826ac6a8/e7570/tanstack.png 170w,\n/static/786b9835d1c8415b10776ff3826ac6a8/f46e7/tanstack.png 340w,\n/static/786b9835d1c8415b10776ff3826ac6a8/ca1dc/tanstack.png 680w,\n/static/786b9835d1c8415b10776ff3826ac6a8/3bd09/tanstack.png 896w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>Tanstack: High-quality open-source software for web developers. Headless, type-safe, and powerful utilities for state management, routing, data visualization, charts, tables, and more.</figcaption>\n  </figure></p>\n<p>피움의 프론트엔드에서는 서버 상태 관리를 위해 <a href=\"https://tanstack.com/query/v5/docs/react/overview\">Tanstack Query</a>를 사용하기로 하였다.</p>\n<p>이 글에서는 많고 많은 상태 관리 라이브러리 중 Tanstack Query를 사용하기로 결정한 이유를 소개하고자 한다.</p>\n<blockquote>\n<p>설치한 버전: 5.0.0-alpha.86</p>\n</blockquote>\n<h2>Tanstack query로 얻을 수 있는 개발적인 이점</h2>\n<h3>코드 간소화와 컴포넌트의 관심사 분리</h3>\n<p>Tanstack query에서 제공하는 다양한 함수들을 활용하면 비동기 통신의 처리 코드를 선언형으로 만들 수 있다. 또한 Tanstack query가 서버와의 통신을 대신해주기 때문에 컴포넌트의 렌더링 함수는 UI/UX의 구현이라는 보다 근본적인 내용에 집중할 수 있다. 조금 더 풀어서 설명하면 네 가지로 나눌 수 있다.</p>\n<p>우선 <code class=\"language-text\">&lt;Suspense></code>와 <code class=\"language-text\">&lt;ErrorBoundary></code>의 편한 사용이 가능하다. 이 둘을 사용하기 위해서는 각각 promise 또는 error를 throw하는 과정이 필요하다. 특히 error가 아닌 것을 던진다는 생각은 기존의 틀을 깨는 것으로 (eslint에 <a href=\"https://eslint.org/docs/latest/rules/no-throw-literal\">관련 설정</a>이 있다는 점으로 미루어 볼 때 자주 사용하는 기법이 아니었을 것이다) 새로운 코드를 짜야 한다. <a href=\"https://react.dev/reference/react/Suspense#displaying-a-fallback-while-content-is-loading\">Suspense를 설명하는 리액트 공식 문서</a>의 첫 번째 예제에서 Fork를 눌러 <code class=\"language-text\">Albums.js</code>안의 <code class=\"language-text\">use()</code>함수를 보면 promise를 던지기 위해 굉장히 재미있는 기법을 사용하고 있다는 걸 확인할 수 있다. 이러한 일련의 과정을 tanstack query가 대신하기 때문에 편리한 사용이 가능하다.</p>\n<p>다음으로 낙관적 업데이트를 적용하기에 유리하다. <code class=\"language-text\">useMutation</code>의 <code class=\"language-text\">onSuccess</code>, <code class=\"language-text\">onError</code>, <code class=\"language-text\">onSettled</code>와 같은 설정을 이용하면 된다.</p>\n<p>세 번째로는 비동기 통신의 결과 타입을 자동으로 추론해준다는 점이다. 따라서 컴포넌트 내부에서 불필요한 타입 가드 및 추론, 강제 타입 지정과 같은 행동을 하지 않아도 되므로 타입스크립트를 더 깔끔하게 사용할 수 있다.</p>\n<p>마지막으로 서버 상태 처리를 위한 전역 상태 관리 라이브러리를 도입하지 않아도 된다. 물론 이건 비단 tanstack query만의 장점은 아니다. 하지만 캐싱을 이용해서 전역 상태를 이용하지 않고도 여러 컴포넌트에서 같은 쿼리를 요청했을 경우 추가적인 통신 없이도 정보를 전달받을 수 있다는 점은 매력적이다.</p>\n<h3>비동기 통신</h3>\n<ol>\n<li>캐싱을 지원하기 때문에 서버와의 불필요한 통신을 줄일 수 있다.</li>\n<li>다양한 상황에서 자동 refetch가 가능해서 원한다면 항상 최신 값을 유지할 수 있다.</li>\n<li>여러 컴포넌트가 같은 쿼리를 사용할 때, 해당 쿼리로부터 반환되는 데이터가 바뀌었다면 그 컴포넌트들을 한 번에 업데이트할 수 있다.</li>\n<li>쿼리가 오랫동안 사용되지 않으면 가비지 컬렉터를 자동으로 불러서 정리한다.</li>\n</ol>\n<h2>다른 라이브러리와의 비교</h2>\n<p>우리 팀에서는 Recoil 이외의 다른 전역 상태 라이브러리나 서버 상태 라이브러리를 사용해본 경험이 많은 크루가 없어서 간단하게만 비교하였다.</p>\n<h3><a href=\"https://github.com/vercel/swr\">SWR</a></h3>\n<p>Next.js 팀에서 만든 서버 상태 관리 라이브러리. 데이터 캐싱이라는 측면에 집중했다. 따라서 다른 라이브러리와 비교했을 때 굉장히 가벼운 편에 속한다.</p>\n<h3><a href=\"https://tanstack.com/query/v5/docs/react\">Tanstack Query</a></h3>\n<p>데이터 캐싱뿐만이 아니라 에러 처리나 무한 스크롤과 같은 다양한 기능을 지원한다. 비슷한 기능을 하는 리액트 쿼리의 <a href=\"https://tanstack.com/query/v5/docs/react/reference/useQuery\"><code class=\"language-text\">useQuery</code></a>와 SWR의 <a href=\"https://swr.vercel.app/docs/data-fetching\"><code class=\"language-text\">useSWR</code></a>의 반환값을 확인해보았을 때 받을 수 있는 정보의 양이 차이가 많이 난다. 다양한 상황을 고려한 UI를 보여준다면 Tanstack query를 활용하는 것이 좋겠다는 생각을 했다. 추가적으로 받아온 데이터의 일차 가공이 필요하다면 <code class=\"language-text\">useQuery</code>에서 <code class=\"language-text\">selector</code>를 사용할 수 있다는 점도 상대적인 장점이라고 생각한다.</p>\n<h3>Redux, Recoil 등 다른 전역 상태 관리 라이브러리</h3>\n<p>현재 피움 서비스 내에서 전역적으로 관리할 값이 많지 않다고 판단하였다.</p>\n<p>또한 일반적인 전역 상태 라이브러리의 경우 서버 상태를 나타나기에는 부적절한 것 같다. 특히 Recoil은 selector의 캐시 문제로 인해 사용자의 장바구니 목록처럼 자주 변하는 값을 받아오기 굉장히 힘들었던 기억이 있다.</p>\n<h2>Tanstack Query로 사용자에게 어떤 서비스를 제공하고자 하는지</h2>\n<p>우리가 추구해야 하는 것은 기술적 고점이 아니다. 그렇기 때문에 이 라이브러리를 도입해서 사용자에게 어떤 경험을 선사할 수 있을지 고민하였다.</p>\n<ol>\n<li>\n<p>Suspense</p>\n<ul>\n<li>Suspense는 사용자에게 '지금 무슨 일을 하는 중이다'라는 암시를 준다. 따라서 사용자의 기다리는 시간을 편하게 할 수 있다.</li>\n<li>피움 서비스의 '식물 사전' 기능은 공공데이터를 활용한다. 현재 사용하고 있는 공공데이터의 경우 이용에 제약이 없어서 DB에 저장할 수 있다. 만약 그렇지 않아서 항상 백엔드 서버에서 공공데이터 API와의 통신을 추가적으로 진행해야 할 경우 정보를 받아오는 데 시간이 걸린다. 이 때 Suspense를 잘 활용할 수 있을 것이다.</li>\n</ul>\n</li>\n<li>\n<p>Refetch</p>\n<ul>\n<li>피움 서비스는 모바일 환경을 우선적으로 고려하고 있다.</li>\n<li>지하철 와이파이처럼 인터넷이 불안정한 곳에서는 요청이 잘 가지 않을 수 있다. 이 때 사용자가 같은 행동을 두 번 하지 않더라도 tanstack query가 자동적으로 요청을 보내서 UX 측면의 개선이 가능하다.</li>\n</ul>\n</li>\n<li>\n<p>caching</p>\n<ul>\n<li>'식물 사전 정보'는 변하지 않는 자료이다. 따라서 사용자가 여러 번 요청을 하더라도 매번 같은 정보를 보게 된다. 이러한 요청에 대해서는 <code class=\"language-text\">staletime</code>을 길게 잡아 캐시를 오래 유지한다면 불필요한 서버와의 통신을 줄이고 사용자 경험도 개선할 수 있다.</li>\n<li>'내가 키우는 식물 목록'이나 '내가 키우는 식물의 상세 정보'도 사용자가 값을 추가하거나 바꾸지 않는 이상 변하지 않는 값이다. 이 친구들도 적절한 캐싱을 사용하면 서버와의 통신을 줄여 사용자의 대기시간을 줄일 수 있다.</li>\n</ul>\n</li>\n<li>\n<p>무한 스크롤</p>\n<ul>\n<li>피움에서는 자신의 식물에게 물을 준 날짜들을 기억해서 타임라인 형태로 볼 수 있도록 제공할 계획이다. 타임라인은 시간의 흐름을 나타내기 위한 도구이다. '시간'과 '흐름' 모두 연속성을 띠는 표현인 만큼 무한 스크롤을 이용해 유의미한 경험을 제공할 것이다.</li>\n</ul>\n</li>\n</ol>\n<h3>Tanstack Query v5를 사용하게 된 이유</h3>\n<p>마지막으로 피움 프론트엔드에서 Tanstack query의 다섯 번째 메이저 버전을 사용하기로 한 이유를 짧게 남긴다. Tanstack query v5는 <a href=\"https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5\">획기적인 변화</a>가 있고, alpha 단계이다.</p>\n<ol>\n<li>어차피 버전은 5로 흘러간다. 피움 프론트엔드의 세 크루 모두 Tanstack query를 처음 배우는 단계라면 굳이 역사의 뒤안길로 흘러갈 v4부터 배울 필요는 없다고 생각한다.</li>\n<li>문서를 살펴본 결과 v5의 '획기적인 변화'는 대부분 기존의 불필요하거나 문제를 일으키기 쉬운 기능을 제거하는 것이었다. 따라서 만약 v4를 학습해야 한다면 기존의 v5 공부 내용에서 덧붙이는 방법으로 가능할 것이다.</li>\n<li>현재 피움 서비스에서는 복잡한 서버와의 데이터 통신은 없을 것 같다. 따라서 alpha 단계이기 때문에 무언가가 안 되는 상황은 없을 것으로 예상된다.</li>\n</ol>","frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여","date":"July 23, 2023","update":"July 23, 2023","tags":["Tanstack Query","React Query","리액트 쿼리"],"series":null},"fields":{"slug":"/fe-tanstack-query/","readingTime":{"minutes":11.195}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}},"next":{"fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},"pageContext":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","series":null,"previousPostId":"a78e224b-b711-5071-8e90-013d6f4bebc3","nextPostId":"159c943b-1a50-57dd-aa71-7557364752a5"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/index/page-data.json b/page-data/index/page-data.json
index 3240239b..3496037a 100644
--- a/page-data/index/page-data.json
+++ b/page-data/index/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-pages-index-jsx","path":"/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"allMarkdownRemark":{"group":[{"fieldValue":"CI","totalCount":1},{"fieldValue":"CI/CD","totalCount":2},{"fieldValue":"DB","totalCount":1},{"fieldValue":"HTTPS","totalCount":1},{"fieldValue":"JPA","totalCount":1},{"fieldValue":"MySQL","totalCount":1},{"fieldValue":"OAuth2.0","totalCount":1},{"fieldValue":"React","totalCount":1},{"fieldValue":"React Query","totalCount":1},{"fieldValue":"RestDocs","totalCount":2},{"fieldValue":"SpringbootTest","totalCount":1},{"fieldValue":"Tanstack Query","totalCount":1},{"fieldValue":"Transaction","totalCount":1},{"fieldValue":"Validation","totalCount":1},{"fieldValue":"Webhook","totalCount":1},{"fieldValue":"Webpack","totalCount":1},{"fieldValue":"bundle","totalCount":1},{"fieldValue":"husky","totalCount":1},{"fieldValue":"nullable","totalCount":1},{"fieldValue":"stylelint","totalCount":1},{"fieldValue":"기획","totalCount":1},{"fieldValue":"리액트 쿼리","totalCount":1},{"fieldValue":"문서화","totalCount":1},{"fieldValue":"배포","totalCount":1},{"fieldValue":"블로그","totalCount":1},{"fieldValue":"설정","totalCount":2},{"fieldValue":"세팅","totalCount":1},{"fieldValue":"아이디어","totalCount":1},{"fieldValue":"인수테스트","totalCount":1},{"fieldValue":"인프라","totalCount":1},{"fieldValue":"젠킨스","totalCount":3},{"fieldValue":"최적화","totalCount":1},{"fieldValue":"컨벤션","totalCount":1},{"fieldValue":"테스트","totalCount":2}],"nodes":[{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 사건의 발단  3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.  그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다. 당황하지 않고 침착하게 f12를 눌러 개발자도구를 열고 네트워크탭을 확인해보니 API가 이상하게 호출되고있었다. 평소 프론트분들을 굉장…","fields":{"slug":"/restdocs-start/"},"frontmatter":{"date":"August 11, 2023","update":"Aug 11, 2023","title":"RestDocs로 API 문서화하기","description":"RestDocs를 시작해봅시다.","tags":["문서화","RestDocs","테스트"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. OAuth란? 현재 개발하고 있는 서비스에서 구글 캘린더에 접근을 한다고 가정을 해봅시다. 현재 접근하는 사용자의 구글 캘린더 정보를 얻고자 한다면 구글 계정으로 로그인을 해야합니다. 진짜 간단한 방법이 있습니다. 사용자로부터 구글 id와 password를 받고 저희가 대신 로그인 해서 해당 사용자의 …","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"date":"August 10, 2023","update":"Aug 10, 2023","title":"내가 이해한 OAuth2.0","description":"OAuth2.0의 개념과 동작 원리에 대해 알아보자","tags":["OAuth2.0"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. style-lint, husky를 통한 컨벤션 자동화 하기 프로젝트는 혼자 할 수 도 있지만 팀원들과 함께 진행하는 경우도 있습니다. 피움의 경우에 팀원들과 함께 진행하고 있습니다. 개인적으로 생각했을 때 코드를 작성한다는 것은 그 자체로 하나의 문서를 만드는 것이라고 생각합니다. 그리고 그 문서의 양…","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"date":"August 07, 2023","update":"Aug 07, 2023","title":"stylelint와 husky를 통해 컨벤션 통일하기","description":"stylelint를 통해 css 컨벤션을 통일하고, husky를 통해 git 컨벤션을 통일할 수 있습니다.","tags":["stylelint","husky","컨벤션"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. CRA없에 webpack으로 react 세팅하기 피움 서비스 환경을 만들기로 하면서, FE의 개발 스펙은 React + TypeScript로 설정하였습니다. React는 당연 현존 최강 라이브러리이고, 여기에 JavaScript의 동적 타입을 컴파일 단계에서 잡아주는 TypeScript까지 더해서 안정…","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"date":"August 06, 2023","update":"Aug 06, 2023","title":"webpack으로만 React 설정하기 (without CRA)","description":"피움 팀의 프론트엔드 초기 세팅 과정입니다.","tags":["React","Webpack"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 인수테스트를 작성하면서 다음과 같은 문제가 발생했다. RestAssured를 사용하고 있다. 각 테스트별로 (DB)데이터가 격리된 테스트를 수행하고 싶다. 이에 다음과 같은 시행착오를 거쳤다. 최종적으로 작성된 코드를 보고싶다면 최종코드를 확인해주세요. 시행착오 JPA를 사용하고 있는 현 시점에서…","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"date":"August 03, 2023","update":"Aug 03, 2023","title":"인수테스트 데이터 초기화하기","description":"인수테트스에서 DB 데이터를 깔끔하게 초기화해봅시다.","tags":["인수테스트","RestDocs","테스트"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '하마드'가 작성했습니다. 개요 우아한테크코스 5기 피움 서비스의 인수 테스트를 작성하던 도중, 실제 포트에 애플리케이션을 구동시켜 테스트를 하는 \n환경에서 테스트를 할 때, 테스트 메소드에서 분명히 해당 리소스를 저장했는데도 RestAssured의 GET 요청이 수행되지 않는 경우가 있었다. 이 이유를 파악하고 해결 과정을 …","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"date":"July 31, 2023","update":"Jul 31, 2023","title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)","description":"@SpringbootTest의 RANDOM_PORT 환경에서 @Transactional을 사용할 때의 주의점과 트랜잭션의 격리를 이해합시다","tags":["Transaction","SpringbootTest"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 현재 피움팀 서버는  요청으로 이뤄져있다.\n는 WWW 상에서 정보를 주고 받는 프로토콜인데, 누군가 네트워크에서 신호를 가로채면 내용이 노출되는 문제가 발생할 수 있다.\n이를 해결해주는 프로토콜이 바로 이다. 는 정보를 암호화하는 SSL을 이용한 프로토콜이다. …","fields":{"slug":"/apply-https/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"내 서버에 HTTPS 설정하기","description":"HTTP로 연결하던 서버를 HTTPS로 변환해봅시다.","tags":["HTTPS"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. 사건의 발단 이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국  파일의 크기를 보니 무려 16m…","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"bundle-analyze를 통한 bundle 크기 분석","description":"bundle-anaalyze를 라이브러리를 통해 번들 크기 분석하기","tags":["bundle","최적화"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 본 설명 글은 다음과 같은 환경에서 진행됩니다. 배포서버 : Ubuntu 22.04.2 LTS DB서버 : Ubuntu 22.04.2 LTS 배포서버와 DB서버는 동일한 VPC를 사용하고 있습니다. DB : MySQL 8.0.33 Application : Spr…","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"Table Drop 못하게 막아버리기","description":"유저를 생성하여 Table Drop 권한을 없애봅니다.","tags":["DB","MySQL"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 현재 피움팀의 젠킨스에서 빌드 트리거로 을 사용하고있다.  해당 설정은 Github에서 유발되는 모든 WebHook에 대해 빌드 트리거가 동작하는 설정이다.  빌드 스크립트에서 위처럼 triggers 설정을 별도로 지정할 수 있지만 현재 프로젝트 구조상 더 세분화된 설정이 필요한 상태다.  현재 …","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"date":"July 25, 2023","update":"Jul 25, 2023","title":"PR 라벨로 젠킨스 빌드유발을 구분하기","description":"PR의 라벨로 젠킨스의 빌드 유발을 구분해봅니다.","tags":["젠킨스","CI"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 이번 피움 서비스에서 CI/CD를 적용하기 위해 Jekins와 Github Webhook을 이용했습니다. 본 글에서는 Jenkins와 Github Webhook을 이용한 SpringBoot 서버 자동 빌드, 자동 배포 과정을 다루겠습니다. Jenkins 설치 과정은 피움 팀 젠킨스 설치하기 를 참고하…","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"date":"July 24, 2023","update":"Jul 24, 2023","title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기","description":"젠킨스와 Github Webhook을 이용한 CI/CD 구축 방법","tags":["CI/CD","젠킨스","Webhook","설정"]}},{"excerpt":"이 글은 우아한테크코스 5기, 피움팀 크루 '참새'가 작성했습니다. 서론  피움의 프론트엔드에서는 서버 상태 관리를 위해 Tanstack Query를 사용하기로 하였다. 이 글에서는 많고 많은 상태 관리 라이브러리 중 Tanstack Query를 사용하기로 결정한 이유를 소개하고자 한다. 설치한 버전: 5.0.0-alpha.86 Tanstack query…","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"date":"July 23, 2023","update":"Jul 23, 2023","title":"프론트엔드: Tanstack Query 사용에 대하여","description":"피움 프론트엔드에서 서버 상태 관리 라이브러리로 Tanstack query를 사용하기로 한 이유를 알아보아요","tags":["Tanstack Query","React Query","리액트 쿼리"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론  http://pium.life 로 접속하면 피움의 홈페이지가 나오기까지의 과정을 기록으로 남겨보려고 한다. 본 과정은 서버 구축을 처음 하면서 과정을 이해하기위해 작성된 글입니다. 빠르게 따라할 수 있는 설정 기반 글을 원한다면 마지막 목차인 정리를 확인해보시길 바랍니다. 본 과정에서는 소량의 …","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"date":"July 18, 2023","update":"Jul 18, 2023","title":"피움의 배포과정","description":"도메인, 포트포워딩, 서브도메인 설정을 진행합니다.","tags":["배포","인프라"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다. 정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.\n이에 Jenkins를 설치하고 환경설정을 빌드서버 환경을 구축한 일련의 과정을 기록해두려고한다. 작업 환경 : Ubuntu 22.04.2 LTS 공식문서 살펴보기 젠킨스 공…","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"date":"July 16, 2023","update":"Jul 16, 2023","title":"젠킨스 설치하기","description":"젠킨스 설치과정을 따라가봅시다","tags":["CI/CD","젠킨스","설정"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 서론 JPA를 이용해 엔티티를 설계하다가  어노테이션과 @Column의 의 차이점이 궁금해져 알아보았습니다. nullable = false ?? JPA는 엔티티를 매핑하고 설계하면 자동으로 DDL을 생성해 주는 기능을 제공합니다. \n또한 엔티티의 각 컬럼들에 대해 NOT NULL, UNIQUE 등과 …","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"date":"July 16, 2023","update":"Jul 16, 2023","title":"@NotNull과 nullable = false는 어떤 차이가 있을까?","description":"엔티티에서 @NotNull 어노테이션과 @Column의 nullable=false의 차이점을 알아보자","tags":["JPA","Validation","nullable"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀의 기술블로그를 만들기까지의 험난한 과정을 정리해보려고 한다. 플랫폼 선정 팀 블로그를 작성하기 위해 다양한 플랫폼들을 고려해봤다. 티스토리 티스토리는 팀 블로그 기능을 통해 다양한 작성자 및 관리자를 지정할 수 있다. 하지만 UI를 직접 수정할 수 없을 뿐더러 제공되어있는 스킨들이 대부분 …","fields":{"slug":"/blog-starter/"},"frontmatter":{"date":"July 09, 2023","update":"Jul 09, 2023","title":"피움 블로그 생성과정","description":"블로그 생성 과정을 따라가봅니다.","tags":["블로그","세팅"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 기획부터 개발까지 하나의 프로그램이 생성되는 모든 프로세스를 경험할 수 있는 시간을 가졌다. 피움팀에서 어떤 방식을 통해 아이디어와 기능을 도출해나갔는지 기록해두고자 한다. 스프린트란? 스프린트는 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간을 의미한다. 여기서는 기획부터 데모수준의 프로…","fields":{"slug":"/sprint-idea/"},"frontmatter":{"date":"July 08, 2023","update":"Jul 08, 2023","title":"구글 스프린트 기반 아이디어 도출","description":null,"tags":["아이디어","기획"]}}]}},"pageContext":{}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-pages-index-jsx","path":"/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"allMarkdownRemark":{"group":[{"fieldValue":"CI","totalCount":1},{"fieldValue":"CI/CD","totalCount":2},{"fieldValue":"DB","totalCount":1},{"fieldValue":"HTTPS","totalCount":1},{"fieldValue":"JPA","totalCount":1},{"fieldValue":"MySQL","totalCount":1},{"fieldValue":"OAuth2.0","totalCount":1},{"fieldValue":"React","totalCount":1},{"fieldValue":"React Query","totalCount":1},{"fieldValue":"RestDocs","totalCount":2},{"fieldValue":"SpringbootTest","totalCount":1},{"fieldValue":"Tanstack Query","totalCount":1},{"fieldValue":"Transaction","totalCount":1},{"fieldValue":"Validation","totalCount":1},{"fieldValue":"Webhook","totalCount":1},{"fieldValue":"Webpack","totalCount":1},{"fieldValue":"bundle","totalCount":1},{"fieldValue":"husky","totalCount":1},{"fieldValue":"nullable","totalCount":1},{"fieldValue":"stylelint","totalCount":1},{"fieldValue":"기획","totalCount":1},{"fieldValue":"리액트 쿼리","totalCount":1},{"fieldValue":"문서화","totalCount":1},{"fieldValue":"배포","totalCount":1},{"fieldValue":"블로그","totalCount":1},{"fieldValue":"설정","totalCount":2},{"fieldValue":"세팅","totalCount":1},{"fieldValue":"아이디어","totalCount":1},{"fieldValue":"인수테스트","totalCount":1},{"fieldValue":"인프라","totalCount":1},{"fieldValue":"젠킨스","totalCount":3},{"fieldValue":"최적화","totalCount":1},{"fieldValue":"컨벤션","totalCount":1},{"fieldValue":"테스트","totalCount":2}],"nodes":[{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 사건의 발단  3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.  그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다. 당황하지 않고 침착하게 f12를 눌러 개발자도구를 열고 네트워크탭을 확인해보니 API가 이상하게 호출되고있었다. 평소 프론트분들을 굉장…","fields":{"slug":"/restdocs-start/"},"frontmatter":{"date":"August 11, 2023","update":"Aug 11, 2023","title":"RestDocs로 API 문서화하기","description":"RestDocs를 시작해봅시다.","tags":["문서화","RestDocs","테스트"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. OAuth란? 현재 개발하고 있는 서비스에서 구글 캘린더에 접근을 한다고 가정을 해봅시다. 현재 접근하는 사용자의 구글 캘린더 정보를 얻고자 한다면 구글 계정으로 로그인을 해야합니다. 진짜 간단한 방법이 있습니다. 사용자로부터 구글 id와 password를 받고 저희가 대신 로그인 해서 해당 사용자의 …","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"date":"August 10, 2023","update":"Aug 10, 2023","title":"내가 이해한 OAuth2.0","description":"OAuth2.0의 개념과 동작 원리에 대해 알아보자","tags":["OAuth2.0"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. style-lint, husky를 통한 컨벤션 자동화 하기 프로젝트는 혼자 할 수 도 있지만 팀원들과 함께 진행하는 경우도 있습니다. 피움의 경우에 팀원들과 함께 진행하고 있습니다. 개인적으로 생각했을 때 코드를 작성한다는 것은 그 자체로 하나의 문서를 만드는 것이라고 생각합니다. 그리고 그 문서의 양…","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"date":"August 07, 2023","update":"Aug 07, 2023","title":"stylelint와 husky를 통해 컨벤션 통일하기","description":"stylelint를 통해 css 컨벤션을 통일하고, husky를 통해 git 컨벤션을 통일할 수 있습니다.","tags":["stylelint","husky","컨벤션"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. CRA없에 webpack으로 react 세팅하기 피움 서비스 환경을 만들기로 하면서, FE의 개발 스펙은 React + TypeScript로 설정하였습니다. React는 당연 현존 최강 라이브러리이고, 여기에 JavaScript의 동적 타입을 컴파일 단계에서 잡아주는 TypeScript까지 더해서 안정…","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"date":"August 06, 2023","update":"Aug 06, 2023","title":"webpack으로만 React 설정하기 (without CRA)","description":"피움 팀의 프론트엔드 초기 세팅 과정입니다.","tags":["React","Webpack"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 인수테스트를 작성하면서 다음과 같은 문제가 발생했다. RestAssured를 사용하고 있다. 각 테스트별로 (DB)데이터가 격리된 테스트를 수행하고 싶다. 이에 다음과 같은 시행착오를 거쳤다. 최종적으로 작성된 코드를 보고싶다면 최종코드를 확인해주세요. 시행착오 JPA를 사용하고 있는 현 시점에서…","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"date":"August 03, 2023","update":"Aug 03, 2023","title":"인수테스트 데이터 초기화하기","description":"인수테트스에서 DB 데이터를 깔끔하게 초기화해봅시다.","tags":["인수테스트","RestDocs","테스트"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '하마드'가 작성했습니다. 개요 우아한테크코스 5기 피움 서비스의 인수 테스트를 작성하던 도중, 실제 포트에 애플리케이션을 구동시켜 테스트를 하는 \n환경에서 테스트를 할 때, 테스트 메소드에서 분명히 해당 리소스를 저장했는데도 RestAssured의 GET 요청이 수행되지 않는 경우가 있었다. 이 이유를 파악하고 해결 과정을 …","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"date":"July 31, 2023","update":"Jul 31, 2023","title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)","description":"@SpringbootTest의 RANDOM_PORT 환경에서 @Transactional을 사용할 때의 주의점과 트랜잭션의 격리를 이해합시다","tags":["Transaction","SpringbootTest"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. 사건의 발단 이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국  파일의 크기를 보니 무려 16m…","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"bundle-analyze를 통한 bundle 크기 분석","description":"bundle-anaalyze를 라이브러리를 통해 번들 크기 분석하기","tags":["bundle","최적화"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 현재 피움팀 서버는  요청으로 이뤄져있다.\n는 WWW 상에서 정보를 주고 받는 프로토콜인데, 누군가 네트워크에서 신호를 가로채면 내용이 노출되는 문제가 발생할 수 있다.\n이를 해결해주는 프로토콜이 바로 이다. 는 정보를 암호화하는 SSL을 이용한 프로토콜이다. …","fields":{"slug":"/apply-https/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"내 서버에 HTTPS 설정하기","description":"HTTP로 연결하던 서버를 HTTPS로 변환해봅시다.","tags":["HTTPS"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 본 설명 글은 다음과 같은 환경에서 진행됩니다. 배포서버 : Ubuntu 22.04.2 LTS DB서버 : Ubuntu 22.04.2 LTS 배포서버와 DB서버는 동일한 VPC를 사용하고 있습니다. DB : MySQL 8.0.33 Application : Spr…","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"Table Drop 못하게 막아버리기","description":"유저를 생성하여 Table Drop 권한을 없애봅니다.","tags":["DB","MySQL"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 현재 피움팀의 젠킨스에서 빌드 트리거로 을 사용하고있다.  해당 설정은 Github에서 유발되는 모든 WebHook에 대해 빌드 트리거가 동작하는 설정이다.  빌드 스크립트에서 위처럼 triggers 설정을 별도로 지정할 수 있지만 현재 프로젝트 구조상 더 세분화된 설정이 필요한 상태다.  현재 …","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"date":"July 25, 2023","update":"Jul 25, 2023","title":"PR 라벨로 젠킨스 빌드유발을 구분하기","description":"PR의 라벨로 젠킨스의 빌드 유발을 구분해봅니다.","tags":["젠킨스","CI"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 이번 피움 서비스에서 CI/CD를 적용하기 위해 Jekins와 Github Webhook을 이용했습니다. 본 글에서는 Jenkins와 Github Webhook을 이용한 SpringBoot 서버 자동 빌드, 자동 배포 과정을 다루겠습니다. Jenkins 설치 과정은 피움 팀 젠킨스 설치하기 를 참고하…","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"date":"July 24, 2023","update":"Jul 24, 2023","title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기","description":"젠킨스와 Github Webhook을 이용한 CI/CD 구축 방법","tags":["CI/CD","젠킨스","Webhook","설정"]}},{"excerpt":"이 글은 우아한테크코스 5기, 피움팀 크루 '참새'가 작성했습니다. 서론  피움의 프론트엔드에서는 서버 상태 관리를 위해 Tanstack Query를 사용하기로 하였다. 이 글에서는 많고 많은 상태 관리 라이브러리 중 Tanstack Query를 사용하기로 결정한 이유를 소개하고자 한다. 설치한 버전: 5.0.0-alpha.86 Tanstack query…","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"date":"July 23, 2023","update":"Jul 23, 2023","title":"프론트엔드: Tanstack Query 사용에 대하여","description":"피움 프론트엔드에서 서버 상태 관리 라이브러리로 Tanstack query를 사용하기로 한 이유를 알아보아요","tags":["Tanstack Query","React Query","리액트 쿼리"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론  http://pium.life 로 접속하면 피움의 홈페이지가 나오기까지의 과정을 기록으로 남겨보려고 한다. 본 과정은 서버 구축을 처음 하면서 과정을 이해하기위해 작성된 글입니다. 빠르게 따라할 수 있는 설정 기반 글을 원한다면 마지막 목차인 정리를 확인해보시길 바랍니다. 본 과정에서는 소량의 …","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"date":"July 18, 2023","update":"Jul 18, 2023","title":"피움의 배포과정","description":"도메인, 포트포워딩, 서브도메인 설정을 진행합니다.","tags":["배포","인프라"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 서론 JPA를 이용해 엔티티를 설계하다가  어노테이션과 @Column의 의 차이점이 궁금해져 알아보았습니다. nullable = false ?? JPA는 엔티티를 매핑하고 설계하면 자동으로 DDL을 생성해 주는 기능을 제공합니다. \n또한 엔티티의 각 컬럼들에 대해 NOT NULL, UNIQUE 등과 …","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"date":"July 16, 2023","update":"Jul 16, 2023","title":"@NotNull과 nullable = false는 어떤 차이가 있을까?","description":"엔티티에서 @NotNull 어노테이션과 @Column의 nullable=false의 차이점을 알아보자","tags":["JPA","Validation","nullable"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다. 정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.\n이에 Jenkins를 설치하고 환경설정을 빌드서버 환경을 구축한 일련의 과정을 기록해두려고한다. 작업 환경 : Ubuntu 22.04.2 LTS 공식문서 살펴보기 젠킨스 공…","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"date":"July 16, 2023","update":"Jul 16, 2023","title":"젠킨스 설치하기","description":"젠킨스 설치과정을 따라가봅시다","tags":["CI/CD","젠킨스","설정"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀의 기술블로그를 만들기까지의 험난한 과정을 정리해보려고 한다. 플랫폼 선정 팀 블로그를 작성하기 위해 다양한 플랫폼들을 고려해봤다. 티스토리 티스토리는 팀 블로그 기능을 통해 다양한 작성자 및 관리자를 지정할 수 있다. 하지만 UI를 직접 수정할 수 없을 뿐더러 제공되어있는 스킨들이 대부분 …","fields":{"slug":"/blog-starter/"},"frontmatter":{"date":"July 09, 2023","update":"Jul 09, 2023","title":"피움 블로그 생성과정","description":"블로그 생성 과정을 따라가봅니다.","tags":["블로그","세팅"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 기획부터 개발까지 하나의 프로그램이 생성되는 모든 프로세스를 경험할 수 있는 시간을 가졌다. 피움팀에서 어떤 방식을 통해 아이디어와 기능을 도출해나갔는지 기록해두고자 한다. 스프린트란? 스프린트는 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간을 의미한다. 여기서는 기획부터 데모수준의 프로…","fields":{"slug":"/sprint-idea/"},"frontmatter":{"date":"July 08, 2023","update":"Jul 08, 2023","title":"구글 스프린트 기반 아이디어 도출","description":null,"tags":["아이디어","기획"]}}]}},"pageContext":{}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/jenkins-hook-by-label/page-data.json b/page-data/jenkins-hook-by-label/page-data.json
index c7574558..464ae6a6 100644
--- a/page-data/jenkins-hook-by-label/page-data.json
+++ b/page-data/jenkins-hook-by-label/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/jenkins-hook-by-label/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 현재 피움팀의 젠킨스에서 빌드 트리거로 을 사용하고있다.  해당 설정은 Github에서 유발되는 모든 WebHook에 대해 빌드 트리거가 동작하는 설정이다.  빌드 스크립트에서 위처럼 triggers 설정을 별도로 지정할 수 있지만 현재 프로젝트 구조상 더 세분화된 설정이 필요한 상태다.  현재 …","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p>현재 피움팀의 젠킨스에서 빌드 트리거로 <code class=\"language-text\">GitHub hook trigger for GITScm polling</code>을 사용하고있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 465px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/5384f5e87f3f776b925134b62352d902/ad78b/bc288fb6.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 88.23529411764706%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAABxklEQVR42p1UWXKCQBDl/p85Qv5zgVT+cwVLMCKrbKMwLAMunX6NWKbKWChVLTMDtG/pbqsoFG02HnleQOv1htc+VZUmXOfzmZ69LKUUrVZrStOUbPuHFosllWX1ekL8nE4nGoaBDoejJBmGA/V9L2fj+d/9oz+yDL9Q6ZqCIGTaPoVhxBFTFMVC3+MI+MxlWfBMqR0dj8f/Ex74YWcM5XlB0BORprl8qLUWRBP9ORJYPdNp2o6SJKXtNmEUW0GXJBnVdS0yPKUh9Go6I0lACXe47fuhrB1nJeirap5RFhAY09N+X0qU5RgT3bZtBSWMm4WwZ4TthTIQBkF8oZy+VjZwzHBJQL843so9CCJJjj3Qdl03P6FuOlKlJsXuZlkuLuOOgNN13XBCI2hBGzGt7yZ8//ymt48v0nslRqAGgcx1R2Nu12hR23bYpJw1ru8nrBhhwa0GF7Mso91uLy+jM9AhEyoE5EGMKB9pyC7DBJgBynD2FUOuddiyRmg90MXUQVFPA+LphFKHTA9UMXmKohDKMAN1ODIw1yExUX44HDR/7DMyx/mRgQCk6BDX9USC5dKRMsIzOA+JHo6vey11u58GwxxdfwFrmHeDWmXxlQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='bc288fb6' title='' src='/static/5384f5e87f3f776b925134b62352d902/ad78b/bc288fb6.png' srcset='/static/5384f5e87f3f776b925134b62352d902/e7570/bc288fb6.png 170w,\n/static/5384f5e87f3f776b925134b62352d902/f46e7/bc288fb6.png 340w,\n/static/5384f5e87f3f776b925134b62352d902/ad78b/bc288fb6.png 465w' sizes='(max-width: 465px) 100vw, 465px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>해당 설정은 Github에서 유발되는 모든 WebHook에 대해 빌드 트리거가 동작하는 설정이다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 232px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/80b1fe95e87e8ccda0aebc5e34491a41/88a1c/c0a90061.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 57.64705882352942%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABL0lEQVR42q2S62qEMBCF9/0frND9Kay7sKj1VjVeEu+rUU+dlAiFvdTSgZCQZD7OzJlDEIRwXQ9RFCNJEjDGUNc1xnEExbLsWwfGEoRhiCxLV2gE3/fBOUfTNBt0Txz0IQgCnE6mAgoh4Hkertcrpkk+SF3uA5fl+4HKdRxbqe26TkH1258UUt+oVM4L5HmuVlEU6Pseo+zQ3wS6G4doQrXL6fYYOM8zpJQb+HK5rEZ9wLatVTnDIBs4n2/w4iPc+B2ZsNcc+Vxhnmf4j9iANC5UIpXKWKr2vu/Qtu0dM5bXQIIJwXE+n9dlqhGiuzRNt5bQGNH5pUJyU3+sqgqWZSm3CW4Yhhof0zTXntrKNJ3zFEhqKKZpwjAM0Gbpnf6QQnr/VQ/LsvxRDiVq5/fEF7L0qHnsuEROAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='c0a90061' title='' src='/static/80b1fe95e87e8ccda0aebc5e34491a41/88a1c/c0a90061.png' srcset='/static/80b1fe95e87e8ccda0aebc5e34491a41/e7570/c0a90061.png 170w,\n/static/80b1fe95e87e8ccda0aebc5e34491a41/88a1c/c0a90061.png 232w' sizes='(max-width: 232px) 100vw, 232px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>빌드 스크립트에서 위처럼 triggers 설정을 별도로 지정할 수 있지만 현재 프로젝트 구조상 더 세분화된 설정이 필요한 상태다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/0f0966e1d8082e4cd2137f8dcfd81520/ca1dc/b47bf110.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 40.588235294117645%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABc0lEQVR42nWRW06EQBBF+TQ6A8MATfPqhm6a15h5aYwuwR24/41cqxpM/NCPClBUndxbN0ikwnC6wVHJxiFMSzwehK+nOP+zHsIUcd7ATBcU7YiyHmD1GVL2COJcoeqo2Q44iBp7Au6T0oP/A4raIm96CGVRNgPCRSP6HLC7awQMm85v0O7ZQws9oDYTKjMjFA3CDb5W4Z+KZrvxgqZf0Lsb0lfa+7oh+rAI3HzB6fpO8m+wy90PutMLNH1LQzaUIzUOUo8QeiJ1PZLKUJ8gavR9ay9QxQKRGgQs3c5XUjYiymrEUpN1haRoSfFIahcU3eIXU7VQv/tVLY40n9UGFalNaw+03iaDo6yiGwnsjpLuWCAjJTndK9MzdrnBYywprGwLbA2N33mP78oZBGyJb1Z3o//BMC6+FQ+lZUdQA0G2M7Kbli2S0mBfOj/HUHbGp+DkA4ZwMIokcwA/QFbIyyuUIFVPIWnst3+7bXYFVt4NK/wG44jR81Z7YaIAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='b47bf110' title='' src='/static/0f0966e1d8082e4cd2137f8dcfd81520/ca1dc/b47bf110.png' srcset='/static/0f0966e1d8082e4cd2137f8dcfd81520/e7570/b47bf110.png 170w,\n/static/0f0966e1d8082e4cd2137f8dcfd81520/f46e7/b47bf110.png 340w,\n/static/0f0966e1d8082e4cd2137f8dcfd81520/ca1dc/b47bf110.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>현재 레포지토리 하나에 프론트, 백엔드 코드가 같이 관리되고있다.\nPR이 Merge 되었을 때 각 트랙별로 코드가 빌드 및 배포될 수 있도록 구성해야한다.</p>\n<h2>어떻게 할까?</h2>\n<p>현재 하나의 레포지토리에서 두개의 코드가 관리되고 있기 떄문에 단순히 develop 브랜치의 변경감지로는 어느 트랙의 작업내용인지 구분하기가 어렵다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 570px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/c8caf5f8c1848911727ad888b8a5164f/27f8f/88fd7187.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 21.764705882352942%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA50lEQVR42j2PyW6DQBBEOflgOxL7MCxmzGAMODYBzGbsIHGIlEMO+f+PqUzGy+F1lbqkUrdiWByn+oqyu+F0vqAZZ4zzN9rrjPyjw6Fqkdwm8GOJ9yFC9hOBpgxr3cVKI0IdqU+U/6HTEKa7hUGZ5O5DudedEJrA9vgrIz6HZgdYqgTLR+kTxSI75EWHtGhwPI+ohgnD9IWqn8TVn5LdoYTqbbDvewTNBauyxaKtkbIaffELy0lEsXkvfNMpXJbCi1L4UQafZ1KDOJc+4DlIEMPexKDbBITtQURusgSq4UG3Q1FEXy//AQeib0tj/1KBAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='88fd7187' title='' src='/static/c8caf5f8c1848911727ad888b8a5164f/27f8f/88fd7187.png' srcset='/static/c8caf5f8c1848911727ad888b8a5164f/e7570/88fd7187.png 170w,\n/static/c8caf5f8c1848911727ad888b8a5164f/f46e7/88fd7187.png 340w,\n/static/c8caf5f8c1848911727ad888b8a5164f/27f8f/88fd7187.png 570w' sizes='(max-width: 570px) 100vw, 570px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>현재 피움은 라벨을 이용하여 트랙별 작업구분을 하고 있다.</p>\n<p>이를 이용하여 라벨별로 빌드, 배포를 진행할 수 있도록 구성해보자.</p>\n<h2>Generic Webhook Trigger 설치</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/31654fadbf6bf2c33749e65632570adb/ca1dc/82e40c68.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 34.11764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAABJklEQVR42nWQS07DMBCGfaUilUUpy4ayKAcoZyp3KIcpq7IpEg+pLFCiPKAhDxM/Eudn7CgtgjLSpxknnt//DJvPrzGbXWE4PMVodIbx+Nxh65/Yb4PBCRaLG6zX91it7rDZPGC5vMVk4mE6vYTnXYAVBUdVCUip0DQtZQ0hJGy07V/quoFS2t2zPVrX1Gf2sCT5oB+dgI00/UQUxe6ibT4m2nMsmO9HiOOUXNYk3DihPOcknKMsviCc4+MY05KrxjmzdUuvsDhOsNul7mCjEgoFl6ikodqOV9MjXT6g93WWleC8glTd6Ky32k9QcIGnrY/HbYDnVx9BENAKIoRhSM0ZyrJ05EUOJQVe3iK8ZxykBkMrYr93YK0rbaDrDuvcmC7/z6H/Gx4T/tNAO4uwAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='82e40c68' title='' src='/static/31654fadbf6bf2c33749e65632570adb/ca1dc/82e40c68.png' srcset='/static/31654fadbf6bf2c33749e65632570adb/e7570/82e40c68.png 170w,\n/static/31654fadbf6bf2c33749e65632570adb/f46e7/82e40c68.png 340w,\n/static/31654fadbf6bf2c33749e65632570adb/ca1dc/82e40c68.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Generic Webhook Trigger는 젠킨스에서 제공하는 플러그인으로 HTTP 요청을 수신하여 JSON, XML 형태의 데이터를 추출하여 트리거를 지정할 수 있는 플러그인이다.</p>\n<p>Generic Webhook Trigger를 사용하여 빌드 유발 상황을 구분해보자.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 367px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/e13645543c6e4d179c1f35a63db1f711/881e3/4ff8e063.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 107.6470588235294%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC00lEQVR42q1Ui27aQBDk2/pL/Y/+SH+ilaJUaWmBYMA2T2PeMcEYgs+PMN1Z4ygJSZpINVrdnn3szc7ObiUMQ3S7fUwmU3jeGL4/FX+G5XKF4/GIjz6VIAhweXmFTsfBaDTGxcUPfP9+oZfc39+/+sfXLqvgPz+VJE1xMAk2m1BTDYI1Foul7pk2KeG7m5tA/c1mo/56fYvdbo/9/u48oBHjgV6vr8HI5Wp1g+HQw3Q6Eyq8kz/HeDzBYDBSvwi4fxowze9hshyHOEYY7RAL2jhJEMnhndzO9yZJkWbZ+1I2koaRNFaeB+tXFX2rhd51E06trua7LqLlAnspHkyM492+sF0EHA7nAbPGH5jhAMa1cSit6yBqWzg4ttq21UTUshDzm9OBke/wPeD3zxeKIsiY8nK2QMdqo2t35ewYzXpT9h0MewP4Ix/Vqyo84W57u0F0GxbScSTwM2lVsnYLRj5kXRexLbe7jqw2Utkn8j7v9wTNGFIpsREwGhbG93L+nENWWQhfiEQaTeGvP4TtdtXatqPVVDTv1WEm6bKyeZ4jkTVLMyRS5Viqyz19I34mlxpjnrfLeUDK4Si/ueiv0WiKFgfoC8p224ElHLIlbdt9EPo/Ec7XIS6tnvatEUSpUEA0qSJNFSGN7xWtoOQ3nmEWzIx7rhrw67cqPn3+gkDaqV6/VoQcDI7jakdUqzXZ97R7uLZaHe0aZlGrNcQfSVcFiKQpiqIIiiDcnW5KT2iyB6Q0TpbnlkuHFWv+ZPJUmFYu6c5mc7ndVu6IgGNtu43eHFUvcsgb2Lu8kWi450pO6b81E1/uZaYoAai3puiQ/LmiQXK0WKx0dH0EpSI0J75YNVbxcIiVS6IuUZbclT6lXu6fBNRxJQE594iQ2qPuHKdASW3Sn8/nitySaeT7E602By25fpxBhQVJs1JXRrVY6o+V1o7hPHzQYaECni05f/z8BYRDlsyHVZxcAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='4ff8e063' title='' src='/static/e13645543c6e4d179c1f35a63db1f711/881e3/4ff8e063.png' srcset='/static/e13645543c6e4d179c1f35a63db1f711/e7570/4ff8e063.png 170w,\n/static/e13645543c6e4d179c1f35a63db1f711/f46e7/4ff8e063.png 340w,\n/static/e13645543c6e4d179c1f35a63db1f711/881e3/4ff8e063.png 367w' sizes='(max-width: 367px) 100vw, 367px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>플러그인을 설치했다면 파이프라인의 Build Triggers 설정에서 다음과 같은 탭을 확인 할 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/d955285dcdcfa3a9f4bd8f2c7d4712e0/ca1dc/7b51b24a.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 37.05882352941176%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAABKElEQVR42nVSa2+DMAzk//+4fe8QsBICeT8ohKql3Jy02jRpjWSdYyeXOyvVx+cZA58gJgEpFcZxwjxfkFLCeiFcVyzLgnVNhM8897dtw3+r2vcdWmsopWGtgyTMez4p1Eyj4QajtIgxwjkP5z00nYlxfk/ofYAidUoZSCHAiWDwG7hd0MoFbk5FaVadVdr0wLtV3V+E2a7RREikzCYY40ixhTPmWad+Vt6JgJhu2PcHjuOX6HhtCmEgO1pbClMsS+0od+D+Cks2M2G2W0ZiPGKIkGFDuh1/yH4I+56hbb9KdN2ZsAXnI1g/PJHxgsMwYiTsz6zU8j3GBqrz8lgeSXW731HXDU6nupA1TVcOZotCqKI6x0S/wJiMkn5Czi315WsUpjwYQsA3l9UT3dy1Z28AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='7b51b24a' title='' src='/static/d955285dcdcfa3a9f4bd8f2c7d4712e0/ca1dc/7b51b24a.png' srcset='/static/d955285dcdcfa3a9f4bd8f2c7d4712e0/e7570/7b51b24a.png 170w,\n/static/d955285dcdcfa3a9f4bd8f2c7d4712e0/f46e7/7b51b24a.png 340w,\n/static/d955285dcdcfa3a9f4bd8f2c7d4712e0/ca1dc/7b51b24a.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>해당 설정을 클릭해보면 다음과 같은 설명을 확인할 수 있다.</p>\n<p><code class=\"language-text\">http://JENKINS_URL/generic-webhook-trigger/invoke</code> 로 오는 요청에 대해 트리거가 수행된다는 말이 적혀져있다.</p>\n<p>위 설명에 맞춰 GitHub에서 WebHook 설정을 변경해주자.</p>\n<blockquote>\n<p>위에서 설명한 탭에 대해서는 아직 저장하지않고 깃허브로 넘어와서 진행합니다.</p>\n<p>젠킨스 설정은 아래에서 설명하는 <code class=\"language-text\">Github WebHook 설정</code>이후 이어서 진행합니다.</p>\n</blockquote>\n<h2>Github WebHook 설정</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/1e6a2510546df10d70af521538217ebd/ca1dc/eebe67d7.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 65.29411764705883%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAABqklEQVR42q1TaW/aUBB0W4LxjW184QtfAkLAckJUiST//2dN5y1KokaVKpV+GO16377ZY54110+RlR1WaQU3SBEmJXRziW8zEz90B9/ntkC3fJjuSuxs4QruDA93tHPGDDtA3QzQrGWMgCRR3sD2Y3irNfyoQLzeSNzmucNCXrSGyjW9CF6YwvETOGGGLN8gL1rMSK6KaGG2QVx0kqwSDF7Imy124zOSsscyLuCT2E8qhNkVXlITlZy12xPW9QCLBewggxZw1GZ7RD0c2FElhHV/wNPzK6anCx7PF/ovGOkPpxdsjhfEwxlJe0Ba9VhxEi/KhVBBU5Wr/l5GtpYJDAbTIMa0sHDSDcGomzjSPs5NOB5zOI3hhuywRLefSDxII0KoiIp2x6RrQAi5y9GwcFx84oE4GzZ81QlXY1HMIK3R30/S6QdhQvaq28uH2qFLUcSnEF9hE++jKZiqUxIp+zFy3h0w/XyjMA0XfxVAXTTVhT/A+gsoSgklzOJLpX8Fn00tO0z4uJV/KylFabF9OPPt7X6T/ybCbj9Kd7eSCaHqSv0Z6oH+jx3+AiwLQx6VyIydAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='eebe67d7' title='' src='/static/1e6a2510546df10d70af521538217ebd/ca1dc/eebe67d7.png' srcset='/static/1e6a2510546df10d70af521538217ebd/e7570/eebe67d7.png 170w,\n/static/1e6a2510546df10d70af521538217ebd/f46e7/eebe67d7.png 340w,\n/static/1e6a2510546df10d70af521538217ebd/ca1dc/eebe67d7.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">프로젝트 레포지토리</code> -> <code class=\"language-text\">Settings</code> -> <code class=\"language-text\">Webhooks 탭</code>에 들어와서 웹훅을 새로 만들어보자.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/4b56bfd528274decc6dde53fdff95602/ca1dc/19691acb.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 88.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAACE0lEQVR42p1U23baMBD0aZuEGGN8wRd8ExbGxuYOAVLaPvSx35PT75/uikJpmyakD3N2tRKjZWZlzRksYMktknKNerFDOd2iF0m4/fw3XNY4P8Htn+rHqHnZGJ6cI5IN5HiOvJrBT4fwkyGCtECYjVQ8rU+5F8tzrZ8d4ScSGpMstwdMVns0iy2m60eFmnIG19Xecof5wwGr/RcVy9kas81BIZvskU4/IcgbaGZUopuvYdFfd0JBbQvYQXpG14upninw+jI/nW25CSGD7kTQokGJ0WSFiFq+73rQLR9tO1DxMm//XD8Hw2Z4MJwAWo9uq2cbyHIKMayRygqiaJDJsaqxNrdtGx/uu7gzHHXBv2A4IbS+GKFolkiIgAtq06JNO1TrP7t5lZBdmm0+KiO8OIfOG24fnV4Ek/ASwbOEST5GQPa3Ou4Lh48atq/pkA8pjVpdvL/rKLxj3BrHnGPLxI1uXadhSBqyfux2SqbEeaXWYjShWKlBZ2Ne0++XKanEiEwZ1gtU5DYTBvRSYiLlyeeLetHgesJwvCOXV5DUST3fwqUf35AELbOn5vIUrzall5UQNG8FdThePNCQr5EVE1h+clVXfxH6grQrathhqsaEiRjnmXwrYSgajKoV/DCHEwilF79Rjgz+onRoLq8m1L8OED89Qnz/DPNbCb1DejnBm7s7ExoihtkIQgZjEJ+f3P/iB3Bqy1BFXuZFAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='19691acb' title='' src='/static/4b56bfd528274decc6dde53fdff95602/ca1dc/19691acb.png' srcset='/static/4b56bfd528274decc6dde53fdff95602/e7570/19691acb.png 170w,\n/static/4b56bfd528274decc6dde53fdff95602/f46e7/19691acb.png 340w,\n/static/4b56bfd528274decc6dde53fdff95602/ca1dc/19691acb.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Payload URL을 위에서 확인한 <code class=\"language-text\">Generic Webhook Trigger</code>의 설정에 맞게 작성한다.</p>\n<p>그리고 트리거가 동작하는 이벤트에 대해서 <code class=\"language-text\">Send me everything</code> 옵션을 체크한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 402px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/33228aeb1868f6cb5e605cff978a9312/752e8/5e2c402b.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 29.411764705882355%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABSElEQVR42m2Q607CQBCFGxUspfcbsgVsBdpiKpSgKIaLCohBIhhRNEHf/y2OUyDGGH98ezKzc85OlhPyAQT3AkIxhlCIkKVaJM2YxygFTfinMUonIQpegCJpvlSB60cI6udgSa9cA3N9ZBQLon4ETnDb4BtL8PEKmegJqbMF9qnmvC6q7Vs8vn+iN33GdPWFh9c16pc9zN/WmL18oDeaYjJfokm9tKhvA0WVkhVjg6CaYIqJUNbgk5ZFDV52S5kMVcKQTKQIXjLAy6SyRdvZm7BNYFbLQTIYVNNBymSYSzrGeg5di6FvOQTDje3gmphpNu7p4T0yyruAxP8bTlBtOF6ISq0JFjYwoc08+pPWYIxGZ4D6VR+t7hAx1ZHnoy9pODDyP4F/4ZJD2g0c0oZDCpyJKoZkHBMjMUHFHemCtEP3aZpTyCP9wzeOOqQYGwBiTgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='5e2c402b' title='' src='/static/33228aeb1868f6cb5e605cff978a9312/752e8/5e2c402b.png' srcset='/static/33228aeb1868f6cb5e605cff978a9312/e7570/5e2c402b.png 170w,\n/static/33228aeb1868f6cb5e605cff978a9312/f46e7/5e2c402b.png 340w,\n/static/33228aeb1868f6cb5e605cff978a9312/752e8/5e2c402b.png 402w' sizes='(max-width: 402px) 100vw, 402px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Add webhook을 한 뒤 다시 등록한 웹 훅을 클릭하여 <code class=\"language-text\">Recent Deliveries</code> 탭을 확인해본다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6ea312ef64c843921722f44307b11a80/ca1dc/bb813e21.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 124.11764705882354%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAZCAYAAAAxFw7TAAAACXBIWXMAAAsTAAALEwEAmpwYAAADTklEQVR42p2VW3PaSBCFqYrjBMJd1xG6AgIkIS4Cx9iwySau2sTOVm12qzYP+f//4+yZEZDEdlxkH76iNTCHPjPdrUrVX6IWXeLcKyCGM+TFBqPpCtPiChlj2x+i2jLwqmOdRKVhBmjZfYUIxwiGKWxvgK7tQxM+mrqDWts8XbBt9KDZATTLgxNNFB3LZ1Ymhfijro265hCBOuPDRhnfRwlapg8jzBWal6JN9HAKM5opNC9BLShQdWdqQ4PCEhlLF7oIYPQiugkoSkEnHCGIp6VFb4h/BxkmpodzufmRLOKswCBdosPfSCHdKenSpcpwmC4gglidU40LGje1ZQaPiEkaXVGiPUQJ5qstfrv5hHy9henItE1UmxqaTP9Ao2Pu+RZrdsjM+kc0EZaCy8s3eH/7GcXmd6SLDblCPF3D8mJa6pMB45F6Nt3hEbn+PZqISkFZb7d/fcH1u4+42N4gTudw/D6ePX+Bs/OXeFGro9420GL53Bd5VHBGq3/+8xXvPn6GzLZrOJCl5ARj6PKgWzqaPB9p6STB8WyNm7u/sXt/h83bPxRXbz9gd3NH+5fo+QNVBaYbnyYo26zHDnnFW26ygFt6T3VHi1m2WexdZiYLvanWn8IpBW3WoUXsIIEdkmACEaXHf5VW5eeh3n7GsQ6NgJZ2BYK8UIsav+wNcpje0xZ/alkKeOsZnOGEGbKX+xkMd6Bq6/8J2hHcdQ53PoMbL9Sg+BWhh4IM3JxiWQ4n5NmxaH81ux8E5WY3mUKME55badXci+qHyxCH+FurPWnZTiYIdysEmwJ9dk6UvYblj9SZinBS3j4ReyxWguFQSArvOfay/LfeOIWYJPDGC4QUC1KKJyuE6QXc0RzeaEHmx1iW1cHJAfksJ1RF2nGLHP71EtHyAtn2FvmbT5ju2CnXH+DF8zI7isgKcPipyooOmprNRhAKGb+sd0pBZ54hfL1WFquNNrtGZw9rqHd0whdUW1M0ONrq/E5+yqFRqVQeom55JTNcwJ7GTN1XN21yesssZIFbgeymMZ9jtS76fFVwiJydneM5J9KBZ3xWlyLSBMG2QLS65oVc8NXJzWoGlkhRJfzd2v35+MMZilGC3jKDO1ny4Jf7wXoKD8vmP/cClve1Q/cuAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='bb813e21' title='' src='/static/6ea312ef64c843921722f44307b11a80/ca1dc/bb813e21.png' srcset='/static/6ea312ef64c843921722f44307b11a80/e7570/bb813e21.png 170w,\n/static/6ea312ef64c843921722f44307b11a80/f46e7/bb813e21.png 340w,\n/static/6ea312ef64c843921722f44307b11a80/ca1dc/bb813e21.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>내용을 보면 요청을 보낼 때 Payload에 다양한 정보들이 담겨있는 것을 확인할 수 있다.</p>\n<h3>(이해하기) JSONPath 살펴보기</h3>\n<blockquote>\n<p>해당 과정은 원리를 이해하기 위한 과정으로 수행하지 않아도 무관합니다.</p>\n</blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 481px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/0cb3f7d9540a22398bd67e7cf0cbf527/213b2/4ff6a8c1.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 6.470588235294117%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAQklEQVR42mNQEZf7L6Vm/l9M2fS/tIYlGEupW/yXBIqBMIwPo2U0rf6LKxn9l1Ax/S+uavZfRsMKqNcELCcqr/sfAHwzHQTNyFxbAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='4ff6a8c1' title='' src='/static/0cb3f7d9540a22398bd67e7cf0cbf527/213b2/4ff6a8c1.png' srcset='/static/0cb3f7d9540a22398bd67e7cf0cbf527/e7570/4ff6a8c1.png 170w,\n/static/0cb3f7d9540a22398bd67e7cf0cbf527/f46e7/4ff6a8c1.png 340w,\n/static/0cb3f7d9540a22398bd67e7cf0cbf527/213b2/4ff6a8c1.png 481w' sizes='(max-width: 481px) 100vw, 481px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/a43fdcc058f1a92e77913286de225ac5/ca1dc/f6916224.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 53.529411764705884%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAByklEQVR42oVTaW/aQBT0t1aJnBAO3961sfEJtjnsQggtJWdVpVKqROr//yPTtwu0UCrlw+jNW1vjtzPPil3msMMcfj4HT6fQnBBdw0PX9N+HJdBHzw7+QPE2UwSrJaLFV3jxGGY/h7XDnpt+BtNLj/rD8yNBpxpB7w/Qtjg0NoAbV3DCAs6gAKOJvbwGz2Zg8YRqDW/YyJuIc5ZMwQnHgrMCRhrh/LKND2cqztSWxMdzFR2TQ2eRtEFnMQyaRvQCxm6yK809FmQ3Y7iLEkHZoPjyA8X6GdXtC/FnzJ5+Ef+J/OYbJvdvhFf5rNy8YLj6jmzxQN7X0Eho76XCP9NVSJSNxkiaO8T1Bun8AcmnW2TXj8iWT8TvZBUC6fx+y6+J7/qwWsIOhlJUcZoCblUgHK9h8ARtnaFjcKp8y01PvihS7ezTt/ZJb/seWSJskRO6JMhIMJiswch8kR5LJtJwUQ0en6zGKf4+V9x5CX82gZ81NOWK0iRPo4rSFnUsA+i9K3gQil2OYBUpLto9qB0Nra6JiysNakvDZdeiK/+zyAf9/z6kGEkKpy6gD0LyzIXuxXIfdR7RHzSUeyemFTspdlTYIM4E7HB0IvgbJEo2Xg7yiD4AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='f6916224' title='' src='/static/a43fdcc058f1a92e77913286de225ac5/ca1dc/f6916224.png' srcset='/static/a43fdcc058f1a92e77913286de225ac5/e7570/f6916224.png 170w,\n/static/a43fdcc058f1a92e77913286de225ac5/f46e7/f6916224.png 340w,\n/static/a43fdcc058f1a92e77913286de225ac5/ca1dc/f6916224.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>PR과 연관된 요청이 발생했을 때는 Payload에 pull_request에 대한 정보가 추가된다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/fe74081a72d47d01a4e45bfae7c645d1/ca1dc/c301431e.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 59.411764705882355%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB2UlEQVR42q2RUWvTUBTHz03iJyj4Irih6yQsqU2btV0t6pOT6URho6tzQ4TB1GcffPUD6YPgQxFlog8iHe2Kiptzb4IuzZKmbrp2+3tuoqMFnX3wwo9zcsj98T9cctwtfNl04Lgevja4dxrwmgFcz4e75WO33cH+PrDXJ/S5EcDxW3Cb22jt7IYETHObCfs2Wt87+PZjDwHXw/B3OiCPRQ4n81ngdQCvDQRcu49MKPnXCRM+ef4CS68rqL97j0p1Bcu1ekh1JWK5WsOH1TW8fFPBo3IZj58t4WH5KV7xv/X1DVRXP6K2th7Wt582QMfGp0AjeQhFBQnRg6LyjAhWKoXCzTugU0mIxBjIyILMHEj2jDidZ0cGsbMXQccnijwsQNOOQFUEoxygaVooTKfSyM/fBg2nofFlNZFjxg7QfgmPSuHA5RkWnoNQo8vdKCwNE1oWcvOLoLgFRSaTCbsQcqbbiBUusPASC0fORCsfJpzrUzgoE+oZFir/SThZ4o9stLKgvz5K38IB+conrT+u/Dt1MskJi7f4BXUowxaLkz0IOTthIjZ6HjR+9x70KyWYdhZG2oZhj3KNMO0M4kYC07M3MHv/AYYmpmBeuw7jaqkHk9EniyjMLeAnzkIKxwUOxU4AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='c301431e' title='' src='/static/fe74081a72d47d01a4e45bfae7c645d1/ca1dc/c301431e.png' srcset='/static/fe74081a72d47d01a4e45bfae7c645d1/e7570/c301431e.png 170w,\n/static/fe74081a72d47d01a4e45bfae7c645d1/f46e7/c301431e.png 340w,\n/static/fe74081a72d47d01a4e45bfae7c645d1/ca1dc/c301431e.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><a href=\"https://jsonpath.com\">https://jsonpath.com</a> 에 접속하여 해당 Payload를 붙여넣어 확인해본다.</p>\n<p>JSONPath로 표현했을 때 <code class=\"language-text\">$.pull_request.merged</code>를 확인하면 해당 요청이 PR이 merge된 요청인지 확인할 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/8d3a28af10e5768cc1ffe4ea964aad7b/ca1dc/0d6d400d.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 19.411764705882355%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAzklEQVR42nXNvWoCQRSG4aM34D2kixqFKItYKFjmMnIfKW0jxF7x30VrY1zRylZyJcbFZjfO7Juz2ijGwzx8MPPNjOx2P/i+TxgGEFldBmsM5oK1uo8eR5E6p7npGIIgRA77PeZ45FeLgQr1ouV64gfiT6z2TqnujXz0XKaLNaP5isFsyVC58yWTL6Xpzjw222+a/TGNzoD3VpdGu8/402PqrZksVldEnqokn2skciUkXUQyxXM+FkhmHeQhy+tbnVTlBcmXScRyZe04//oDW534EYBEoAIAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='0d6d400d' title='' src='/static/8d3a28af10e5768cc1ffe4ea964aad7b/ca1dc/0d6d400d.png' srcset='/static/8d3a28af10e5768cc1ffe4ea964aad7b/e7570/0d6d400d.png 170w,\n/static/8d3a28af10e5768cc1ffe4ea964aad7b/f46e7/0d6d400d.png 340w,\n/static/8d3a28af10e5768cc1ffe4ea964aad7b/ca1dc/0d6d400d.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">$.pull_request.base.ref</code>는 해당 PR의 base 브랜치를 의미한다.</p>\n<p>예를들어 feature -> develop 형태라면 develop이 나온다</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/4411c0888680fd1af84065f158384c2a/ca1dc/47afaad7.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 18.23529411764706%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAx0lEQVR42m3IvU7CYBjF8UeuRxIiUQEJii4u3AOTsysXRZikCQPiagi0TkIpEyRA+EgsvKRf79/CBvQkv5yTI9P5htnKZbF2UV7EPgDlw+6MSrBLILPFCtdVLBXMtzoGfx4n0Rr8ICII9ZEfhISRJinSbH9hDh36wzHdwYhuvHu2g+WMsUbxb9vYkynf5g/1D4PmZ4eG0cJod7B+BxdE0kUk+8pV9gm5f0TyZaTwjBRfSB365oFM9Y3Kew25viN1W0LSueNO8g/H+P8hjo3mwAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='47afaad7' title='' src='/static/4411c0888680fd1af84065f158384c2a/ca1dc/47afaad7.png' srcset='/static/4411c0888680fd1af84065f158384c2a/e7570/47afaad7.png 170w,\n/static/4411c0888680fd1af84065f158384c2a/f46e7/47afaad7.png 340w,\n/static/4411c0888680fd1af84065f158384c2a/ca1dc/47afaad7.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">$.pull_request.labels..name</code>는 해당 PR의 라벨들의 이름을 의미한다.</p>\n<h2>Generic Webhook Trigger 설정</h2>\n<blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/0578dc8c75ad072f2010764e63ccd0e9/ca1dc/5b94c679.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 51.764705882352935%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABmElEQVR42o1SyU4bURCcT8XOBQiBg4kilA8jH5AjuUQsB+BGLHtmNJ63z1uL7uchi0QQLZXU7ulXXV3t5svqHBcXX7FafcZiscRy+eFVHBwscHh4hKurH7i+vsXNzS0eHh5xefkNJyefcHz8EaenZ2hCTAgh4r0RY67gNyEkpFRqvZQ9GucclFJcosIeORc4z4PCTFNmvB5MxDzc34yjwG430tT0V0OBtYHgMbkJwUd4gqOc1XFu7VTf8DdjXK2zkMYYg74fZpX7SClDagNnHbqdhjIeUlls2oFIAxFM6LuBejzlHm3bQ2mHyZNCISS225Ymuj8+ZSKMlqQSESmRNCzEiF/tDjklZNqgH0ZYUsfrKikpJ5Ulo+F1eW3+wJIZkRS66Ikw4e5J4Pu9wM9NRjca6tuvNpLiTIM52AoeyINIoa4e8MX87JX3vhrMl2Ql600HST28BdettbBkVYyx5sZYaK3ru2a93pJCWQ1msmkKVcFLCKkxDENd9eVw9Z9Qyj9HLPPvRildj/C/ENqS6R2EEL9XfCueAc1a8zPM0DyuAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='5b94c679' title='' src='/static/0578dc8c75ad072f2010764e63ccd0e9/ca1dc/5b94c679.png' srcset='/static/0578dc8c75ad072f2010764e63ccd0e9/e7570/5b94c679.png 170w,\n/static/0578dc8c75ad072f2010764e63ccd0e9/f46e7/5b94c679.png 340w,\n/static/0578dc8c75ad072f2010764e63ccd0e9/ca1dc/5b94c679.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n파이프라인 설정 구성에 들어와서 작업을 이어나갑니다.</p>\n</blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 380px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/298dd4453e706355eef37beeb7982f0a/2edd7/f9141614.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 8.823529411764705%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAeElEQVR42h2ObQuDMAyE/f8/UCa1b0pnrWlGxzrUfbg1PXg4uFxChvo98akV82wwTQreL9DadpxbMI4PGGMRwhPWeiile76uoc+kV8ob2xYhGs77h+u6kYmREiFnxnEQiHKD2xEH5ldbKt0ll474vifEmFDbQ4LoD7gvlSbV8ka1AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='f9141614' title='' src='/static/298dd4453e706355eef37beeb7982f0a/2edd7/f9141614.png' srcset='/static/298dd4453e706355eef37beeb7982f0a/e7570/f9141614.png 170w,\n/static/298dd4453e706355eef37beeb7982f0a/f46e7/f9141614.png 340w,\n/static/298dd4453e706355eef37beeb7982f0a/2edd7/f9141614.png 380w' sizes='(max-width: 380px) 100vw, 380px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>기존에 설정해둔 <code class=\"language-text\">GitHub hook trigger for GITScm polling</code> 설정을 해제한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/5c42ec62023b3e8afc441a8a36a767e7/ca1dc/40676eae.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 81.76470588235294%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB1klEQVR42qVT23KrMAzs/39cn5M2QEiTAvEFCGDAELaSgDRnJrycemZHtmwvu5Z4e/84Ik0zwfWqkGUKdV3DuQauruCaBnVVU66RfFXNGMcRr8abH4aF6AqtjRBmWYborLA7KRzOmvIWRV7AWAtjjJzzftgiHGFtLkRKaaRJiq/rDd+5Q0zxS7M6JwpZrak6tCJu2lZojBVCozUSXeLbNshJDSsprBH1SilcUk0fasF3hvGXcJomwUxI0nOys9pOkkwsp6ZEYmvYxSK7UGRdoqHzZSfv2Hv/IBPCtu3w+Rlgt9tL3O8/EIYRgiBCSDgeY1lHUYw4PsmZYMkHQYjDIcTlkoggJhZC3mScTmeJXAR+M66mc06qO6PB7VYtFef9SvJleZP8w7K1XMEcRVEIwV+GFEXpHHlxA6utKyfREdq2l/Z4BueappXIcK4jpY3cebTNQGD/9/tdHprjv5iW/RVzfq4u35nPPCwXZUl2S3mPvw5RmCkjLcFWvKdW6D2pHmTOcVhczPNB1G0SDmSx67xgfSP+M7quf4JfMK+ZdJOQG5Ob1dKfwVV+btL/sswKDbVNUVZida0mz/t+tsvrV3GTkFuEy88kqy1ecytwjp9h3Xtevxo/tJHZ70Bn9BIAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='40676eae' title='' src='/static/5c42ec62023b3e8afc441a8a36a767e7/ca1dc/40676eae.png' srcset='/static/5c42ec62023b3e8afc441a8a36a767e7/e7570/40676eae.png 170w,\n/static/5c42ec62023b3e8afc441a8a36a767e7/f46e7/40676eae.png 340w,\n/static/5c42ec62023b3e8afc441a8a36a767e7/ca1dc/40676eae.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>그리고 Generic WebHook Trigger 를 활성화한다.</p>\n<h3>Post content parameters 설정</h3>\n<p><code class=\"language-text\">Post content parameters</code>의 추가 버튼을 눌러 파라미터를 추가한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/089b80864d0f427310cb6d2ce3abd474/ca1dc/f66fbb52.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 55.294117647058826%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA3klEQVR42qWSsW7EIBBE/f9/lzJNpIuU4mxjnx0wsMsy2eWsKM0VwSONWJrHDDB4H7CuDzi3YJpmpJRhqrX+z3hq4MKYnQMz94FOWNUgEjMGIoal9D4iZ0K3FCwiCuSC+zjjse3gUi5bgYx9/+6/uz9+JiTCeB/hlrVVD8eBoif1uCWcN4+39w/cbp9afWpQO6kb6LWqU6joxkBXJFp7sO7HETWZx1U1YNFU9l3Mv9FZzgqCkCuS7q1B4nOW8hpovWNM+sqkSVObo35QW0MkfG0Fi2dQSliCzQTK+SXwB5OHY38SNw2hAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='f66fbb52' title='' src='/static/089b80864d0f427310cb6d2ce3abd474/ca1dc/f66fbb52.png' srcset='/static/089b80864d0f427310cb6d2ce3abd474/e7570/f66fbb52.png 170w,\n/static/089b80864d0f427310cb6d2ce3abd474/f46e7/f66fbb52.png 340w,\n/static/089b80864d0f427310cb6d2ce3abd474/ca1dc/f66fbb52.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">$.pull_request.merged</code>를 등록하여 Merge 되었는지 여부를 가져온다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/28afb9569d26799aca1ec26d78932b18/ca1dc/2f09a4a8.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 52.352941176470594%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAyklEQVR42qVSy44DIQzj/79xD1tpH91Cp7PDEEh4uMn03AtjyRIIyTh2HLNg2yJ67xhjzBHAkIpOGS4lwu0WQCmj1oZpqGpvDa4ww4cFcSew/sJ1nqJ0lAtCuMOEDX30Y/wZNqVjc+g91nVTlzuyftDG63GG7m/5x8flCz/fv1iWByhrlprFDEU7cFcVvIZVS0mH7TPo2riz2m1sEXmVNU4K2ty2OpbdWRyCrM6Iigoydl0dOye7KyMxPh8V9yhgzdbHCr8JpJS3gk8jdhR7qC6KZQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='2f09a4a8' title='' src='/static/28afb9569d26799aca1ec26d78932b18/ca1dc/2f09a4a8.png' srcset='/static/28afb9569d26799aca1ec26d78932b18/e7570/2f09a4a8.png 170w,\n/static/28afb9569d26799aca1ec26d78932b18/f46e7/2f09a4a8.png 340w,\n/static/28afb9569d26799aca1ec26d78932b18/ca1dc/2f09a4a8.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">$.pull_request.base.ref</code>를 등록하여 base 브랜치를 가져온다.</p>\n<p>원하는 값은 develop 브랜치가 될 것이다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/97e2bfcbc08fce0c205ccd0b17f3ae12/ca1dc/d7a4b4fc.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 52.352941176470594%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA1UlEQVR42qVSSW7EMAzz/5/YUwsUyDJTZ+zEm2yHpYLOsYckBAgLgkxQixEReL+i9459B7mfJ/ivNvSYYWLKGIcZzq0oRaC4JEpDvVaY2hqsXaDCjXFlUnNXKKRRV855uit445JDUsdmdIbTNMEuC7YQ4NcNmeKdBY0FZ6guzfzy+Pj8xjCMeDwtHBd0tP9XcJbG+g3jzwuB7jRxB9qV0ZXnnJHo6j2/W4Lami5GpOAuDkHhmYSQ6LAcb+RxBjLGhC0WfC0VDy8oKeG5VsyMJRfs/wj+ApylFLm2DnCIAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='d7a4b4fc' title='' src='/static/97e2bfcbc08fce0c205ccd0b17f3ae12/ca1dc/d7a4b4fc.png' srcset='/static/97e2bfcbc08fce0c205ccd0b17f3ae12/e7570/d7a4b4fc.png 170w,\n/static/97e2bfcbc08fce0c205ccd0b17f3ae12/f46e7/d7a4b4fc.png 340w,\n/static/97e2bfcbc08fce0c205ccd0b17f3ae12/ca1dc/d7a4b4fc.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">$.pull_request.labels..name</code>를 등록하여 라벨들의 이름을 가져온다.</p>\n<p>원하는 값은 등록된 라벨들 중에 <code class=\"language-text\">백엔드</code>를 포함하는 값이 존재하는 상황이 될 것이다.</p>\n<h3>Optional filter 설정</h3>\n<p>아래로 내리다보면 Optional filter 탭을 볼 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/86d218e1de75634dec2bd69278131ec7/c7d76/3f3d0f71.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 44.11764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA70lEQVR42p1S0W6DMAzk/79y2qRA2qBVoyR2ErjZJrRs1faApVOsw9i+S7paK5izQfN1XU9DoyNiDP6CvveIMRnZvp2KLueMEAJSon8L/5rxuqFIfXMj3vsRH32A91fZ+IrpPssQNsRISKLEkPaTMEU5cxWrFuSyYFlWdCzEOBV8zgW3OVvh1ohAivazerwPUI6soXgvjXDckFmKYjzt2YtknezkQpwbTKobLvDhBs4FOsw2owy1ZsPG2ZaCXCrKUXIRwmS0oi+RHe4VUZvQU3Jq8vUl7Jx6e3xqtqESRE9/uDV6eEX8K6cfuV7IMb4B6NXCoXSmlG8AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='3f3d0f71' title='' src='/static/86d218e1de75634dec2bd69278131ec7/ca1dc/3f3d0f71.png' srcset='/static/86d218e1de75634dec2bd69278131ec7/e7570/3f3d0f71.png 170w,\n/static/86d218e1de75634dec2bd69278131ec7/f46e7/3f3d0f71.png 340w,\n/static/86d218e1de75634dec2bd69278131ec7/ca1dc/3f3d0f71.png 680w,\n/static/86d218e1de75634dec2bd69278131ec7/c7d76/3f3d0f71.png 891w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Expression에 다음과 같은 정규표현식을 작성했다.</p>\n<p><code class=\"language-text\">(?=.*true)(?=.*develop)(?=.*백엔드).*</code></p>\n<p>또한 Text 부분에는 위에서 파라미터로 선언한 값들을 사용했다.</p>\n<p>위 표현식으로 다음과 같은 효과를 기대할 수 있다.</p>\n<p><code class=\"language-text\">merge가 true 이고</code>, <code class=\"language-text\">브랜치가 develop 이고</code>, <code class=\"language-text\">라벨에 백엔드가 존재</code>하는 작업에 대해 트리거를 수행하는것을 기대할 수 있다.</p>\n<h3>Token 설정</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/0f7d36684cd0d851d21ccd02fcabb224/ca1dc/b55101b4.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 28.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAw0lEQVR42oWQ6w6DIAyFef/nXLyAqNwn4M4KiuHX1uQLLTltDzBrHfr4ND43fd3lj5aKHjZOHGKR4GKpGFqQ84mU80W6iCndZ8YRUyXG665pI8GGUWAkBF8xzRJS7tg2jbVDrqrelVNpC60dLfYwxsGHN/J5PjBNAqUsDIm2lQZQk5QKy7JjpgWluTg5jogQDnKU8CuY9+/aLMQGTi6HQeD14pimMszWIeUL2vP+BStCS/atDXAu1Lw8pbo2/qbV7u/AL0aY077bX6d7AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='b55101b4' title='' src='/static/0f7d36684cd0d851d21ccd02fcabb224/ca1dc/b55101b4.png' srcset='/static/0f7d36684cd0d851d21ccd02fcabb224/e7570/b55101b4.png 170w,\n/static/0f7d36684cd0d851d21ccd02fcabb224/f46e7/b55101b4.png 340w,\n/static/0f7d36684cd0d851d21ccd02fcabb224/ca1dc/b55101b4.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Token 탭에 토큰 이름을 작성한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/f70ad188965b50d1b47da8d38d37378c/ca1dc/8e4baf8e.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 68.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAACHElEQVR42n1T2W7bMBDUUxPZ1n2Qug/KcmQ5tuykSAu0fWpR9Pj/35nu0kfQosrDYKmDw53ZoRFlDTxRwHQiLD1BiLEM6LmYYGY75GqH9Tih2eyhhgOsIMHKl7MwRKEQJBXcOIcdpli4MVZBClFv4cgGUa4Q5y2cKNP/8Pe3YOTtgIf9M3VxvG3gLmTeQGQ1WEGYNnRorQ/mdZS1dIhCxOvLM8MTJXfYIa37W3cs26IOq/EjuuMXqO2E9uERbT+iIShaq80O/XhCN0yEA+qHA2I1IcjWMLJmoyUxEXtwrglE1cMnb+8tH8uowlJ2WIruXGMF0xXa97PUiJ65ChiFGhDICguHvPOkhh3mWp7tuDAtD+n4CdnTLySnH8iff0MevmEVl+cBeq8D4bUxHl9wfPlM3lREUiKg6oQZyTyg3z3Biws6RMCmDRYTUDcr95qIfyH/lnyVbZHkmEw27RB3q4Dg484K8O5S7+n9LGGY1nqqPBTuTA+FCDkm/M6lyl4y2Ab+xyTSWcJqPYJll92ou9I5JEKWPOzf6zixAll2hLWOz+K/ZBfCpFrr2PCm65S5w7TdoBn2aAnc7YImylIXs/5dCEu1pWv1qOW9+kiEWY+UIiKSFgn5bF8suB46S8g3oaDbouV652AvA4n86wnZTwrr1KHMFCqS61O83iLkyBns2TWgt4++gPeBuvu+Q3jsUMkaJV0xy5e3rM7hD+ijZVRvBEYpAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='8e4baf8e' title='' src='/static/f70ad188965b50d1b47da8d38d37378c/ca1dc/8e4baf8e.png' srcset='/static/f70ad188965b50d1b47da8d38d37378c/e7570/8e4baf8e.png 170w,\n/static/f70ad188965b50d1b47da8d38d37378c/f46e7/8e4baf8e.png 340w,\n/static/f70ad188965b50d1b47da8d38d37378c/ca1dc/8e4baf8e.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>이 때 GitHub WebHook 설정에 들어가서 Payload URL에 token 파라미터를 포함하도록 수정한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/1a38795c4df610bc6171c31200b69ec4/ca1dc/675ca490.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 23.52941176470588%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAnUlEQVR42p2QXQ6CMBCEe/9reBTjETQxPokSaelPgAIFth0XDIkvKnGSL/M2+2VFHwYY66CURtN4rEkp/YUIwwAlSxQPhUJqqFJD8njbdiCKGCfCtAEiQmA5UVYVMmuRWwNjNOq64ZEJFCMiX1yIb/2FWUBccoPdIWPu2J8krHHousCG/dIr3r+Mf0X4fsT5VuF4dWwZ5u99/M+WPAFweYZBb0pcXQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='675ca490' title='' src='/static/1a38795c4df610bc6171c31200b69ec4/ca1dc/675ca490.png' srcset='/static/1a38795c4df610bc6171c31200b69ec4/e7570/675ca490.png 170w,\n/static/1a38795c4df610bc6171c31200b69ec4/f46e7/675ca490.png 340w,\n/static/1a38795c4df610bc6171c31200b69ec4/ca1dc/675ca490.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>바로 아래 탭에서 TokenCredential에 토큰에 대한 Secret Key를 추가해줘야한다.</p>\n<p>외부에서 빌드를 유발하기 위해서는 token을 확인하는 방식이 존재하는데 이 때 Jenkins의 Credential에 있는 정보를 기반으로 수행한다.</p>\n<blockquote>\n<p>token을 사용하지 않는 경우 계정정보를 입력할 수도 있지만 해당 과정에서는 token을 등록하는 방식을 사용합니다.</p>\n</blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/b221c2b685a63c919b0a1b7cd7b9e51f/ca1dc/639919be.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 82.3529411764706%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAABxElEQVR42q1U267TMBDs7/PGV/DEOy98AFcJ2lN6KOTa5n7vSeI4sTOsnTaqjiAtAksjy4k1uzO769V2+w3rzYPGfv8Dtu3AIqjdtCzYjosgCO/GqihKVFWFLMvR9wP+da3iKEGeF6jrBmVZom4aSDlCCDFBypsY6N44jhMhYx1axtC2DIz2vu/1z7/FnGFKUhWZpI9zxEFMEPImerrHr6xaNW1LHp4gz2lfQ6oAd0hXwWdCxjmSNEPZtHgi+U8d1zi1HRhFVmKkwjnA73AJqgmVZw0VpDUNtK4DdjyCOTYay0TvHyHjCOLgQmQpxJUtz4sihLxIZrBNC8nDGuF2g/DzJ3gf3yPZfEXw4R24ZUA6FoQiXpA9V7njPYI4RkyZRY6DiPoySFJEeQ4/ScCHs+wFyRoXwrquEWYZ8scd0t0OBZ1TIlI2qKX9GRSWe3EmVFW2bBuO5+NgmvAoy4PnIaVCAaP25hZU+6hhmKrcdfB9HyHJLtZfUB0PqChLNTV5UVCP8bmFljB7mJYnbB/3MAwT338a+mEwKFP1MDiui4baaRrFhQyHiVQTvnj1Bi9fv6Wx4//ncVBjoyqtjRfyjzN67/oF/wPaIG5aCP0AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='639919be' title='' src='/static/b221c2b685a63c919b0a1b7cd7b9e51f/ca1dc/639919be.png' srcset='/static/b221c2b685a63c919b0a1b7cd7b9e51f/e7570/639919be.png 170w,\n/static/b221c2b685a63c919b0a1b7cd7b9e51f/f46e7/639919be.png 340w,\n/static/b221c2b685a63c919b0a1b7cd7b9e51f/ca1dc/639919be.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>위와 같은 정보로 Secret text를 작성하고 등록하고 적용한다.</p>\n<h2>응답 확인하기</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/fca53a76b19e9b744c8f4e9d9b359a97/ca1dc/8f20f94d.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 55.88235294117647%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABxUlEQVR42o1T23LaQAz1YwkQjPHdxru+YhtsTEIoFJo0nU4vb/3/nzmV1pCBzLTThzPyalfSOZKs3XklBukRH+RHDOcNmsc9lps9qvUO3e6ERfOI8czDcOr8F7ThzMfEjXFvC5hhhkAu4MsCU2euoNvhuyD3jNtEI6P3afxhBYkK5ERhWsEjy0F3+tXjM0bvwfc3DE0PerCAJRoY8xq6X8IIajhxCyfpYEZLwgqWbNX3OFpjIJ4oeaASzjyJqRuRFaQoOjMMUxjkyIoOYreG/VxhNHExNn2MqH+MMbWGGU5didX2RGpKlcCmWNOPlUpukeaJAlndYTCxenkmybBJnn7bnwt4QNyeeyrGRdhewIU1N8rxsH9Buz3SdA+QOUml4XiCh9PDprPpJ2+YebFidY03hiJf4fXXb3x6/Ynd6RsOLz+wf/6Oh8MXNFREFi0lrSgopaDsr7DDHIYresnb41fauc+KKVtOlJQdVRQkL6KHUrH6N3hTiGGYlIjSGhMrVBXU7l3toOn3U2Qf37Ovv+tx2VeD3nAfNSfK6G94QrxolbwoWyKtNpB0DuISxWqr2LI/qzeYJzXicg2RNxBFo95ewBP/AwyEJLtFVI/fAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='8f20f94d' title='' src='/static/fca53a76b19e9b744c8f4e9d9b359a97/ca1dc/8f20f94d.png' srcset='/static/fca53a76b19e9b744c8f4e9d9b359a97/e7570/8f20f94d.png 170w,\n/static/fca53a76b19e9b744c8f4e9d9b359a97/f46e7/8f20f94d.png 340w,\n/static/fca53a76b19e9b744c8f4e9d9b359a97/ca1dc/8f20f94d.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>GitHub의 WebHook 탭의 Recent Deliveries 탭으로 가서 확인해보면 Response Body값에 다음과 같은 응답이 담겨있는 것을 확인할 수 있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">\"jobs\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">\"pium-dev\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token property\">\"regexpFilterExpression\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"(?=.*true)(?=.*develop)(?=.*백엔드).*\"</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"triggered\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"resolvedVariables\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token property\">\"BRANCH\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"develop\"</span><span class=\"token punctuation\">,</span>\n        <span class=\"token property\">\"LABELS\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"[\\\"?️ \\\\b리팩터링\\\",\\\"? 백엔드\\\"]\"</span><span class=\"token punctuation\">,</span>\n        <span class=\"token property\">\"LABELS_0\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"?️ \\b리팩터링\"</span><span class=\"token punctuation\">,</span>\n        <span class=\"token property\">\"LABELS_1\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"? 백엔드\"</span><span class=\"token punctuation\">,</span>\n        <span class=\"token property\">\"MERGED\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"true\"</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"regexpFilterText\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"true develop [\\\"?️ \\\\b리팩터링\\\",\\\"? 백엔드\\\"]\"</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"id\"</span><span class=\"token operator\">:</span> <span class=\"token number\">248</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"url\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"queue/item/248/\"</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"message\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Triggered jobs.\"</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><code class=\"language-text\">regexpFilterText</code>에 원하는 값이 잘 들어간 것을 확인할 수 있다.</p>\n<h2>결론</h2>\n<p>젠킨스의 <code class=\"language-text\">Generic Webhook Trigger</code> 플러그인을 이용하여 Merge 여부, target branch, label 값을 비교하고 빌드를 유발하는 설정을 했다.</p>\n<p>경우에 따라 세부적인 검증을 추가할 수 있을 것 같다.</p>\n<h3>트러블 슈팅</h3>\n<p>Generic Webhook Trigger 설정 - Token 설정에서 많이 헤맸다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/474079b05b637abf6d764381248e8ad2/ca1dc/1c588600.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 40.588235294117645%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABZUlEQVR42n2RSXOCQBCFqRyNCIKsygwILoC4pSyJidlMUpV4zP//LS/dQ5F48vBVL0O/6XlonjOCPcrhxJXCFQsE8RJuwqwwkCVsUVKkM+obroDpDKHbIbqWD8sXCjuI0fcENNMdQaQFbGqGswqnrMR5mOLGdKH3Pdxe0KGe6UYoNzVG47nKB2FCgpIiC0bQ5KREVqzRMRz06Oa+HcDk4QuhruVBt4IG+5/eIIRBM23UKWrj+Qr74zvW+ycU6xox1UGSQ9CmEZOW8MWUNhjDoc0Zztu6zRnLj6HNljt8nH9wPJ1RP3/i8PqFx7dv7B5O6gIxIU/lnAYyEriOHSTQ4mmFbf1CvtxjQ1tWdwfk6z3i6ZI8EsofNpw/vgZ72fckCy7gRRn5MFSmstGMQT+L6wahMP/qptd+y3CPNTQWS/MtJD0tma2QFlsk5KPIuF4qeFs+4zwrNqpO8ybKSQVJr+SZQE7xC1nc2VtW9UMnAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='1c588600' title='' src='/static/474079b05b637abf6d764381248e8ad2/ca1dc/1c588600.png' srcset='/static/474079b05b637abf6d764381248e8ad2/e7570/1c588600.png 170w,\n/static/474079b05b637abf6d764381248e8ad2/f46e7/1c588600.png 340w,\n/static/474079b05b637abf6d764381248e8ad2/ca1dc/1c588600.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">{\"jobs\":null,\"message\":\"Did not find any jobs with GenericTrigger configured! If you are using a token, you need to pass it like ...trigger/invoke?token=TOKENHERE. If you are not using a token, you need to authenticate like http://user:passsword@example.org/generic-webhook... \"}</code></p>\n<p>404 에러와 함께 위 메시지가 반환되었는데 Jenkins의 Token에 대해 이해를 하지 못해 생긴 문제였다.</p>\n<blockquote>\n<p>왜 다들 Token이 뭔지는 설명을 안해주는거지..?? ㅠㅠ</p>\n<p><code class=\"language-text\">외부에서 빌드를 유발하기 위해서는 token을 확인하는데 이 때 Jenkins의 Credential에 있는 정보를 기반으로 수행한다.</code></p>\n<p>이 한마디를 이해하기 위해 하루가 걸렸다... 😇</p>\n</blockquote>\n<h2>Reference</h2>\n<h3>설정 과정에서 참고한 글</h3>\n<p><a href=\"https://bepoz-study-diary.tistory.com/385\">https://bepoz-study-diary.tistory.com/385</a></p>\n<p><a href=\"https://velog.io/@zayson/Jenkins-CICD-4.-WebHook%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC\">https://velog.io/@zayson/Jenkins-CICD-4.-WebHook%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC</a></p>\n<h3>트러블 슈팅 과정에서 참고한 글</h3>\n<p><a href=\"https://georgik.rocks/jenkins-generic-webhook-plugin-failed-with-did-not-find-any-jobs-with-generictrigger-configured/\">https://georgik.rocks/jenkins-generic-webhook-plugin-failed-with-did-not-find-any-jobs-with-generictrigger-configured/</a></p>\n<p><a href=\"https://pikachu987.tistory.com/61\">https://pikachu987.tistory.com/61</a></p>","frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기","date":"July 25, 2023","update":"July 25, 2023","tags":["젠킨스","CI"],"series":null},"fields":{"slug":"/jenkins-hook-by-label/","readingTime":{"minutes":8.89}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}},"next":{"fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},"pageContext":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","series":null,"previousPostId":"159c943b-1a50-57dd-aa71-7557364752a5","nextPostId":"1a03734e-d413-553f-9152-1dad2fc4acca"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/jenkins-hook-by-label/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 현재 피움팀의 젠킨스에서 빌드 트리거로 을 사용하고있다.  해당 설정은 Github에서 유발되는 모든 WebHook에 대해 빌드 트리거가 동작하는 설정이다.  빌드 스크립트에서 위처럼 triggers 설정을 별도로 지정할 수 있지만 현재 프로젝트 구조상 더 세분화된 설정이 필요한 상태다.  현재 …","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p>현재 피움팀의 젠킨스에서 빌드 트리거로 <code class=\"language-text\">GitHub hook trigger for GITScm polling</code>을 사용하고있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 465px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/5384f5e87f3f776b925134b62352d902/ad78b/bc288fb6.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 88.23529411764706%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAABxklEQVR42p1UWXKCQBDl/p85Qv5zgVT+cwVLMCKrbKMwLAMunX6NWKbKWChVLTMDtG/pbqsoFG02HnleQOv1htc+VZUmXOfzmZ69LKUUrVZrStOUbPuHFosllWX1ekL8nE4nGoaBDoejJBmGA/V9L2fj+d/9oz+yDL9Q6ZqCIGTaPoVhxBFTFMVC3+MI+MxlWfBMqR0dj8f/Ex74YWcM5XlB0BORprl8qLUWRBP9ORJYPdNp2o6SJKXtNmEUW0GXJBnVdS0yPKUh9Go6I0lACXe47fuhrB1nJeirap5RFhAY09N+X0qU5RgT3bZtBSWMm4WwZ4TthTIQBkF8oZy+VjZwzHBJQL843so9CCJJjj3Qdl03P6FuOlKlJsXuZlkuLuOOgNN13XBCI2hBGzGt7yZ8//ymt48v0nslRqAGgcx1R2Nu12hR23bYpJw1ru8nrBhhwa0GF7Mso91uLy+jM9AhEyoE5EGMKB9pyC7DBJgBynD2FUOuddiyRmg90MXUQVFPA+LphFKHTA9UMXmKohDKMAN1ODIw1yExUX44HDR/7DMyx/mRgQCk6BDX9USC5dKRMsIzOA+JHo6vey11u58GwxxdfwFrmHeDWmXxlQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='bc288fb6' title='' src='/static/5384f5e87f3f776b925134b62352d902/ad78b/bc288fb6.png' srcset='/static/5384f5e87f3f776b925134b62352d902/e7570/bc288fb6.png 170w,\n/static/5384f5e87f3f776b925134b62352d902/f46e7/bc288fb6.png 340w,\n/static/5384f5e87f3f776b925134b62352d902/ad78b/bc288fb6.png 465w' sizes='(max-width: 465px) 100vw, 465px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>해당 설정은 Github에서 유발되는 모든 WebHook에 대해 빌드 트리거가 동작하는 설정이다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 232px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/80b1fe95e87e8ccda0aebc5e34491a41/88a1c/c0a90061.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 57.64705882352942%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABL0lEQVR42q2S62qEMBCF9/0frND9Kay7sKj1VjVeEu+rUU+dlAiFvdTSgZCQZD7OzJlDEIRwXQ9RFCNJEjDGUNc1xnEExbLsWwfGEoRhiCxLV2gE3/fBOUfTNBt0Txz0IQgCnE6mAgoh4Hkertcrpkk+SF3uA5fl+4HKdRxbqe26TkH1258UUt+oVM4L5HmuVlEU6Pseo+zQ3wS6G4doQrXL6fYYOM8zpJQb+HK5rEZ9wLatVTnDIBs4n2/w4iPc+B2ZsNcc+Vxhnmf4j9iANC5UIpXKWKr2vu/Qtu0dM5bXQIIJwXE+n9dlqhGiuzRNt5bQGNH5pUJyU3+sqgqWZSm3CW4Yhhof0zTXntrKNJ3zFEhqKKZpwjAM0Gbpnf6QQnr/VQ/LsvxRDiVq5/fEF7L0qHnsuEROAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='c0a90061' title='' src='/static/80b1fe95e87e8ccda0aebc5e34491a41/88a1c/c0a90061.png' srcset='/static/80b1fe95e87e8ccda0aebc5e34491a41/e7570/c0a90061.png 170w,\n/static/80b1fe95e87e8ccda0aebc5e34491a41/88a1c/c0a90061.png 232w' sizes='(max-width: 232px) 100vw, 232px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>빌드 스크립트에서 위처럼 triggers 설정을 별도로 지정할 수 있지만 현재 프로젝트 구조상 더 세분화된 설정이 필요한 상태다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/0f0966e1d8082e4cd2137f8dcfd81520/ca1dc/b47bf110.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 40.588235294117645%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABc0lEQVR42nWRW06EQBBF+TQ6A8MATfPqhm6a15h5aYwuwR24/41cqxpM/NCPClBUndxbN0ikwnC6wVHJxiFMSzwehK+nOP+zHsIUcd7ATBcU7YiyHmD1GVL2COJcoeqo2Q44iBp7Au6T0oP/A4raIm96CGVRNgPCRSP6HLC7awQMm85v0O7ZQws9oDYTKjMjFA3CDb5W4Z+KZrvxgqZf0Lsb0lfa+7oh+rAI3HzB6fpO8m+wy90PutMLNH1LQzaUIzUOUo8QeiJ1PZLKUJ8gavR9ay9QxQKRGgQs3c5XUjYiymrEUpN1haRoSfFIahcU3eIXU7VQv/tVLY40n9UGFalNaw+03iaDo6yiGwnsjpLuWCAjJTndK9MzdrnBYywprGwLbA2N33mP78oZBGyJb1Z3o//BMC6+FQ+lZUdQA0G2M7Kbli2S0mBfOj/HUHbGp+DkA4ZwMIokcwA/QFbIyyuUIFVPIWnst3+7bXYFVt4NK/wG44jR81Z7YaIAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='b47bf110' title='' src='/static/0f0966e1d8082e4cd2137f8dcfd81520/ca1dc/b47bf110.png' srcset='/static/0f0966e1d8082e4cd2137f8dcfd81520/e7570/b47bf110.png 170w,\n/static/0f0966e1d8082e4cd2137f8dcfd81520/f46e7/b47bf110.png 340w,\n/static/0f0966e1d8082e4cd2137f8dcfd81520/ca1dc/b47bf110.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>현재 레포지토리 하나에 프론트, 백엔드 코드가 같이 관리되고있다.\nPR이 Merge 되었을 때 각 트랙별로 코드가 빌드 및 배포될 수 있도록 구성해야한다.</p>\n<h2>어떻게 할까?</h2>\n<p>현재 하나의 레포지토리에서 두개의 코드가 관리되고 있기 떄문에 단순히 develop 브랜치의 변경감지로는 어느 트랙의 작업내용인지 구분하기가 어렵다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 570px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/c8caf5f8c1848911727ad888b8a5164f/27f8f/88fd7187.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 21.764705882352942%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA50lEQVR42j2PyW6DQBBEOflgOxL7MCxmzGAMODYBzGbsIHGIlEMO+f+PqUzGy+F1lbqkUrdiWByn+oqyu+F0vqAZZ4zzN9rrjPyjw6Fqkdwm8GOJ9yFC9hOBpgxr3cVKI0IdqU+U/6HTEKa7hUGZ5O5DudedEJrA9vgrIz6HZgdYqgTLR+kTxSI75EWHtGhwPI+ohgnD9IWqn8TVn5LdoYTqbbDvewTNBauyxaKtkbIaffELy0lEsXkvfNMpXJbCi1L4UQafZ1KDOJc+4DlIEMPexKDbBITtQURusgSq4UG3Q1FEXy//AQeib0tj/1KBAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='88fd7187' title='' src='/static/c8caf5f8c1848911727ad888b8a5164f/27f8f/88fd7187.png' srcset='/static/c8caf5f8c1848911727ad888b8a5164f/e7570/88fd7187.png 170w,\n/static/c8caf5f8c1848911727ad888b8a5164f/f46e7/88fd7187.png 340w,\n/static/c8caf5f8c1848911727ad888b8a5164f/27f8f/88fd7187.png 570w' sizes='(max-width: 570px) 100vw, 570px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>현재 피움은 라벨을 이용하여 트랙별 작업구분을 하고 있다.</p>\n<p>이를 이용하여 라벨별로 빌드, 배포를 진행할 수 있도록 구성해보자.</p>\n<h2>Generic Webhook Trigger 설치</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/31654fadbf6bf2c33749e65632570adb/ca1dc/82e40c68.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 34.11764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAABJklEQVR42nWQS07DMBCGfaUilUUpy4ayKAcoZyp3KIcpq7IpEg+pLFCiPKAhDxM/Eudn7CgtgjLSpxknnt//DJvPrzGbXWE4PMVodIbx+Nxh65/Yb4PBCRaLG6zX91it7rDZPGC5vMVk4mE6vYTnXYAVBUdVCUip0DQtZQ0hJGy07V/quoFS2t2zPVrX1Gf2sCT5oB+dgI00/UQUxe6ibT4m2nMsmO9HiOOUXNYk3DihPOcknKMsviCc4+MY05KrxjmzdUuvsDhOsNul7mCjEgoFl6ikodqOV9MjXT6g93WWleC8glTd6Ky32k9QcIGnrY/HbYDnVx9BENAKIoRhSM0ZyrJ05EUOJQVe3iK8ZxykBkMrYr93YK0rbaDrDuvcmC7/z6H/Gx4T/tNAO4uwAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='82e40c68' title='' src='/static/31654fadbf6bf2c33749e65632570adb/ca1dc/82e40c68.png' srcset='/static/31654fadbf6bf2c33749e65632570adb/e7570/82e40c68.png 170w,\n/static/31654fadbf6bf2c33749e65632570adb/f46e7/82e40c68.png 340w,\n/static/31654fadbf6bf2c33749e65632570adb/ca1dc/82e40c68.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Generic Webhook Trigger는 젠킨스에서 제공하는 플러그인으로 HTTP 요청을 수신하여 JSON, XML 형태의 데이터를 추출하여 트리거를 지정할 수 있는 플러그인이다.</p>\n<p>Generic Webhook Trigger를 사용하여 빌드 유발 상황을 구분해보자.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 367px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/e13645543c6e4d179c1f35a63db1f711/881e3/4ff8e063.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 107.6470588235294%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC00lEQVR42q1Ui27aQBDk2/pL/Y/+SH+ilaJUaWmBYMA2T2PeMcEYgs+PMN1Z4ygJSZpINVrdnn3szc7ObiUMQ3S7fUwmU3jeGL4/FX+G5XKF4/GIjz6VIAhweXmFTsfBaDTGxcUPfP9+oZfc39+/+sfXLqvgPz+VJE1xMAk2m1BTDYI1Foul7pk2KeG7m5tA/c1mo/56fYvdbo/9/u48oBHjgV6vr8HI5Wp1g+HQw3Q6Eyq8kz/HeDzBYDBSvwi4fxowze9hshyHOEYY7RAL2jhJEMnhndzO9yZJkWbZ+1I2koaRNFaeB+tXFX2rhd51E06trua7LqLlAnspHkyM492+sF0EHA7nAbPGH5jhAMa1cSit6yBqWzg4ttq21UTUshDzm9OBke/wPeD3zxeKIsiY8nK2QMdqo2t35ewYzXpT9h0MewP4Ix/Vqyo84W57u0F0GxbScSTwM2lVsnYLRj5kXRexLbe7jqw2Utkn8j7v9wTNGFIpsREwGhbG93L+nENWWQhfiEQaTeGvP4TtdtXatqPVVDTv1WEm6bKyeZ4jkTVLMyRS5Viqyz19I34mlxpjnrfLeUDK4Si/ueiv0WiKFgfoC8p224ElHLIlbdt9EPo/Ec7XIS6tnvatEUSpUEA0qSJNFSGN7xWtoOQ3nmEWzIx7rhrw67cqPn3+gkDaqV6/VoQcDI7jakdUqzXZ97R7uLZaHe0aZlGrNcQfSVcFiKQpiqIIiiDcnW5KT2iyB6Q0TpbnlkuHFWv+ZPJUmFYu6c5mc7ndVu6IgGNtu43eHFUvcsgb2Lu8kWi450pO6b81E1/uZaYoAai3puiQ/LmiQXK0WKx0dH0EpSI0J75YNVbxcIiVS6IuUZbclT6lXu6fBNRxJQE594iQ2qPuHKdASW3Sn8/nitySaeT7E602By25fpxBhQVJs1JXRrVY6o+V1o7hPHzQYaECni05f/z8BYRDlsyHVZxcAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='4ff8e063' title='' src='/static/e13645543c6e4d179c1f35a63db1f711/881e3/4ff8e063.png' srcset='/static/e13645543c6e4d179c1f35a63db1f711/e7570/4ff8e063.png 170w,\n/static/e13645543c6e4d179c1f35a63db1f711/f46e7/4ff8e063.png 340w,\n/static/e13645543c6e4d179c1f35a63db1f711/881e3/4ff8e063.png 367w' sizes='(max-width: 367px) 100vw, 367px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>플러그인을 설치했다면 파이프라인의 Build Triggers 설정에서 다음과 같은 탭을 확인 할 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/d955285dcdcfa3a9f4bd8f2c7d4712e0/ca1dc/7b51b24a.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 37.05882352941176%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAABKElEQVR42nVSa2+DMAzk//+4fe8QsBICeT8ohKql3Jy02jRpjWSdYyeXOyvVx+cZA58gJgEpFcZxwjxfkFLCeiFcVyzLgnVNhM8897dtw3+r2vcdWmsopWGtgyTMez4p1Eyj4QajtIgxwjkP5z00nYlxfk/ofYAidUoZSCHAiWDwG7hd0MoFbk5FaVadVdr0wLtV3V+E2a7RREikzCYY40ixhTPmWad+Vt6JgJhu2PcHjuOX6HhtCmEgO1pbClMsS+0od+D+Cks2M2G2W0ZiPGKIkGFDuh1/yH4I+56hbb9KdN2ZsAXnI1g/PJHxgsMwYiTsz6zU8j3GBqrz8lgeSXW731HXDU6nupA1TVcOZotCqKI6x0S/wJiMkn5Czi315WsUpjwYQsA3l9UT3dy1Z28AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='7b51b24a' title='' src='/static/d955285dcdcfa3a9f4bd8f2c7d4712e0/ca1dc/7b51b24a.png' srcset='/static/d955285dcdcfa3a9f4bd8f2c7d4712e0/e7570/7b51b24a.png 170w,\n/static/d955285dcdcfa3a9f4bd8f2c7d4712e0/f46e7/7b51b24a.png 340w,\n/static/d955285dcdcfa3a9f4bd8f2c7d4712e0/ca1dc/7b51b24a.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>해당 설정을 클릭해보면 다음과 같은 설명을 확인할 수 있다.</p>\n<p><code class=\"language-text\">http://JENKINS_URL/generic-webhook-trigger/invoke</code> 로 오는 요청에 대해 트리거가 수행된다는 말이 적혀져있다.</p>\n<p>위 설명에 맞춰 GitHub에서 WebHook 설정을 변경해주자.</p>\n<blockquote>\n<p>위에서 설명한 탭에 대해서는 아직 저장하지않고 깃허브로 넘어와서 진행합니다.</p>\n<p>젠킨스 설정은 아래에서 설명하는 <code class=\"language-text\">Github WebHook 설정</code>이후 이어서 진행합니다.</p>\n</blockquote>\n<h2>Github WebHook 설정</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/1e6a2510546df10d70af521538217ebd/ca1dc/eebe67d7.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 65.29411764705883%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAABqklEQVR42q1TaW/aUBB0W4LxjW184QtfAkLAckJUiST//2dN5y1KokaVKpV+GO16377ZY54110+RlR1WaQU3SBEmJXRziW8zEz90B9/ntkC3fJjuSuxs4QruDA93tHPGDDtA3QzQrGWMgCRR3sD2Y3irNfyoQLzeSNzmucNCXrSGyjW9CF6YwvETOGGGLN8gL1rMSK6KaGG2QVx0kqwSDF7Imy124zOSsscyLuCT2E8qhNkVXlITlZy12xPW9QCLBewggxZw1GZ7RD0c2FElhHV/wNPzK6anCx7PF/ovGOkPpxdsjhfEwxlJe0Ba9VhxEi/KhVBBU5Wr/l5GtpYJDAbTIMa0sHDSDcGomzjSPs5NOB5zOI3hhuywRLefSDxII0KoiIp2x6RrQAi5y9GwcFx84oE4GzZ81QlXY1HMIK3R30/S6QdhQvaq28uH2qFLUcSnEF9hE++jKZiqUxIp+zFy3h0w/XyjMA0XfxVAXTTVhT/A+gsoSgklzOJLpX8Fn00tO0z4uJV/KylFabF9OPPt7X6T/ybCbj9Kd7eSCaHqSv0Z6oH+jx3+AiwLQx6VyIydAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='eebe67d7' title='' src='/static/1e6a2510546df10d70af521538217ebd/ca1dc/eebe67d7.png' srcset='/static/1e6a2510546df10d70af521538217ebd/e7570/eebe67d7.png 170w,\n/static/1e6a2510546df10d70af521538217ebd/f46e7/eebe67d7.png 340w,\n/static/1e6a2510546df10d70af521538217ebd/ca1dc/eebe67d7.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">프로젝트 레포지토리</code> -> <code class=\"language-text\">Settings</code> -> <code class=\"language-text\">Webhooks 탭</code>에 들어와서 웹훅을 새로 만들어보자.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/4b56bfd528274decc6dde53fdff95602/ca1dc/19691acb.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 88.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAACE0lEQVR42p1U23baMBD0aZuEGGN8wRd8ExbGxuYOAVLaPvSx35PT75/uikJpmyakD3N2tRKjZWZlzRksYMktknKNerFDOd2iF0m4/fw3XNY4P8Htn+rHqHnZGJ6cI5IN5HiOvJrBT4fwkyGCtECYjVQ8rU+5F8tzrZ8d4ScSGpMstwdMVns0iy2m60eFmnIG19Xecof5wwGr/RcVy9kas81BIZvskU4/IcgbaGZUopuvYdFfd0JBbQvYQXpG14upninw+jI/nW25CSGD7kTQokGJ0WSFiFq+73rQLR9tO1DxMm//XD8Hw2Z4MJwAWo9uq2cbyHIKMayRygqiaJDJsaqxNrdtGx/uu7gzHHXBv2A4IbS+GKFolkiIgAtq06JNO1TrP7t5lZBdmm0+KiO8OIfOG24fnV4Ek/ASwbOEST5GQPa3Ou4Lh48atq/pkA8pjVpdvL/rKLxj3BrHnGPLxI1uXadhSBqyfux2SqbEeaXWYjShWKlBZ2Ne0++XKanEiEwZ1gtU5DYTBvRSYiLlyeeLetHgesJwvCOXV5DUST3fwqUf35AELbOn5vIUrzall5UQNG8FdThePNCQr5EVE1h+clVXfxH6grQrathhqsaEiRjnmXwrYSgajKoV/DCHEwilF79Rjgz+onRoLq8m1L8OED89Qnz/DPNbCb1DejnBm7s7ExoihtkIQgZjEJ+f3P/iB3Bqy1BFXuZFAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='19691acb' title='' src='/static/4b56bfd528274decc6dde53fdff95602/ca1dc/19691acb.png' srcset='/static/4b56bfd528274decc6dde53fdff95602/e7570/19691acb.png 170w,\n/static/4b56bfd528274decc6dde53fdff95602/f46e7/19691acb.png 340w,\n/static/4b56bfd528274decc6dde53fdff95602/ca1dc/19691acb.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Payload URL을 위에서 확인한 <code class=\"language-text\">Generic Webhook Trigger</code>의 설정에 맞게 작성한다.</p>\n<p>그리고 트리거가 동작하는 이벤트에 대해서 <code class=\"language-text\">Send me everything</code> 옵션을 체크한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 402px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/33228aeb1868f6cb5e605cff978a9312/752e8/5e2c402b.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 29.411764705882355%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABSElEQVR42m2Q607CQBCFGxUspfcbsgVsBdpiKpSgKIaLCohBIhhRNEHf/y2OUyDGGH98ezKzc85OlhPyAQT3AkIxhlCIkKVaJM2YxygFTfinMUonIQpegCJpvlSB60cI6udgSa9cA3N9ZBQLon4ETnDb4BtL8PEKmegJqbMF9qnmvC6q7Vs8vn+iN33GdPWFh9c16pc9zN/WmL18oDeaYjJfokm9tKhvA0WVkhVjg6CaYIqJUNbgk5ZFDV52S5kMVcKQTKQIXjLAy6SyRdvZm7BNYFbLQTIYVNNBymSYSzrGeg5di6FvOQTDje3gmphpNu7p4T0yyruAxP8bTlBtOF6ISq0JFjYwoc08+pPWYIxGZ4D6VR+t7hAx1ZHnoy9pODDyP4F/4ZJD2g0c0oZDCpyJKoZkHBMjMUHFHemCtEP3aZpTyCP9wzeOOqQYGwBiTgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='5e2c402b' title='' src='/static/33228aeb1868f6cb5e605cff978a9312/752e8/5e2c402b.png' srcset='/static/33228aeb1868f6cb5e605cff978a9312/e7570/5e2c402b.png 170w,\n/static/33228aeb1868f6cb5e605cff978a9312/f46e7/5e2c402b.png 340w,\n/static/33228aeb1868f6cb5e605cff978a9312/752e8/5e2c402b.png 402w' sizes='(max-width: 402px) 100vw, 402px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Add webhook을 한 뒤 다시 등록한 웹 훅을 클릭하여 <code class=\"language-text\">Recent Deliveries</code> 탭을 확인해본다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6ea312ef64c843921722f44307b11a80/ca1dc/bb813e21.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 124.11764705882354%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAZCAYAAAAxFw7TAAAACXBIWXMAAAsTAAALEwEAmpwYAAADTklEQVR42p2VW3PaSBCFqYrjBMJd1xG6AgIkIS4Cx9iwySau2sTOVm12qzYP+f//4+yZEZDEdlxkH76iNTCHPjPdrUrVX6IWXeLcKyCGM+TFBqPpCtPiChlj2x+i2jLwqmOdRKVhBmjZfYUIxwiGKWxvgK7tQxM+mrqDWts8XbBt9KDZATTLgxNNFB3LZ1Ymhfijro265hCBOuPDRhnfRwlapg8jzBWal6JN9HAKM5opNC9BLShQdWdqQ4PCEhlLF7oIYPQiugkoSkEnHCGIp6VFb4h/BxkmpodzufmRLOKswCBdosPfSCHdKenSpcpwmC4gglidU40LGje1ZQaPiEkaXVGiPUQJ5qstfrv5hHy9henItE1UmxqaTP9Ao2Pu+RZrdsjM+kc0EZaCy8s3eH/7GcXmd6SLDblCPF3D8mJa6pMB45F6Nt3hEbn+PZqISkFZb7d/fcH1u4+42N4gTudw/D6ePX+Bs/OXeFGro9420GL53Bd5VHBGq3/+8xXvPn6GzLZrOJCl5ARj6PKgWzqaPB9p6STB8WyNm7u/sXt/h83bPxRXbz9gd3NH+5fo+QNVBaYbnyYo26zHDnnFW26ygFt6T3VHi1m2WexdZiYLvanWn8IpBW3WoUXsIIEdkmACEaXHf5VW5eeh3n7GsQ6NgJZ2BYK8UIsav+wNcpje0xZ/alkKeOsZnOGEGbKX+xkMd6Bq6/8J2hHcdQ53PoMbL9Sg+BWhh4IM3JxiWQ4n5NmxaH81ux8E5WY3mUKME55badXci+qHyxCH+FurPWnZTiYIdysEmwJ9dk6UvYblj9SZinBS3j4ReyxWguFQSArvOfay/LfeOIWYJPDGC4QUC1KKJyuE6QXc0RzeaEHmx1iW1cHJAfksJ1RF2nGLHP71EtHyAtn2FvmbT5ju2CnXH+DF8zI7isgKcPipyooOmprNRhAKGb+sd0pBZ54hfL1WFquNNrtGZw9rqHd0whdUW1M0ONrq/E5+yqFRqVQeom55JTNcwJ7GTN1XN21yesssZIFbgeymMZ9jtS76fFVwiJydneM5J9KBZ3xWlyLSBMG2QLS65oVc8NXJzWoGlkhRJfzd2v35+MMZilGC3jKDO1ny4Jf7wXoKD8vmP/cClve1Q/cuAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='bb813e21' title='' src='/static/6ea312ef64c843921722f44307b11a80/ca1dc/bb813e21.png' srcset='/static/6ea312ef64c843921722f44307b11a80/e7570/bb813e21.png 170w,\n/static/6ea312ef64c843921722f44307b11a80/f46e7/bb813e21.png 340w,\n/static/6ea312ef64c843921722f44307b11a80/ca1dc/bb813e21.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>내용을 보면 요청을 보낼 때 Payload에 다양한 정보들이 담겨있는 것을 확인할 수 있다.</p>\n<h3>(이해하기) JSONPath 살펴보기</h3>\n<blockquote>\n<p>해당 과정은 원리를 이해하기 위한 과정으로 수행하지 않아도 무관합니다.</p>\n</blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 481px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/0cb3f7d9540a22398bd67e7cf0cbf527/213b2/4ff6a8c1.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 6.470588235294117%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAQklEQVR42mNQEZf7L6Vm/l9M2fS/tIYlGEupW/yXBIqBMIwPo2U0rf6LKxn9l1Ax/S+uavZfRsMKqNcELCcqr/sfAHwzHQTNyFxbAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='4ff6a8c1' title='' src='/static/0cb3f7d9540a22398bd67e7cf0cbf527/213b2/4ff6a8c1.png' srcset='/static/0cb3f7d9540a22398bd67e7cf0cbf527/e7570/4ff6a8c1.png 170w,\n/static/0cb3f7d9540a22398bd67e7cf0cbf527/f46e7/4ff6a8c1.png 340w,\n/static/0cb3f7d9540a22398bd67e7cf0cbf527/213b2/4ff6a8c1.png 481w' sizes='(max-width: 481px) 100vw, 481px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/a43fdcc058f1a92e77913286de225ac5/ca1dc/f6916224.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 53.529411764705884%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAByklEQVR42oVTaW/aQBT0t1aJnBAO3961sfEJtjnsQggtJWdVpVKqROr//yPTtwu0UCrlw+jNW1vjtzPPil3msMMcfj4HT6fQnBBdw0PX9N+HJdBHzw7+QPE2UwSrJaLFV3jxGGY/h7XDnpt+BtNLj/rD8yNBpxpB7w/Qtjg0NoAbV3DCAs6gAKOJvbwGz2Zg8YRqDW/YyJuIc5ZMwQnHgrMCRhrh/LKND2cqztSWxMdzFR2TQ2eRtEFnMQyaRvQCxm6yK809FmQ3Y7iLEkHZoPjyA8X6GdXtC/FnzJ5+Ef+J/OYbJvdvhFf5rNy8YLj6jmzxQN7X0Eho76XCP9NVSJSNxkiaO8T1Bun8AcmnW2TXj8iWT8TvZBUC6fx+y6+J7/qwWsIOhlJUcZoCblUgHK9h8ARtnaFjcKp8y01PvihS7ezTt/ZJb/seWSJskRO6JMhIMJiswch8kR5LJtJwUQ0en6zGKf4+V9x5CX82gZ81NOWK0iRPo4rSFnUsA+i9K3gQil2OYBUpLto9qB0Nra6JiysNakvDZdeiK/+zyAf9/z6kGEkKpy6gD0LyzIXuxXIfdR7RHzSUeyemFTspdlTYIM4E7HB0IvgbJEo2Xg7yiD4AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='f6916224' title='' src='/static/a43fdcc058f1a92e77913286de225ac5/ca1dc/f6916224.png' srcset='/static/a43fdcc058f1a92e77913286de225ac5/e7570/f6916224.png 170w,\n/static/a43fdcc058f1a92e77913286de225ac5/f46e7/f6916224.png 340w,\n/static/a43fdcc058f1a92e77913286de225ac5/ca1dc/f6916224.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>PR과 연관된 요청이 발생했을 때는 Payload에 pull_request에 대한 정보가 추가된다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/fe74081a72d47d01a4e45bfae7c645d1/ca1dc/c301431e.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 59.411764705882355%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB2UlEQVR42q2RUWvTUBTHz03iJyj4Irih6yQsqU2btV0t6pOT6URho6tzQ4TB1GcffPUD6YPgQxFlog8iHe2Kiptzb4IuzZKmbrp2+3tuoqMFnX3wwo9zcsj98T9cctwtfNl04Lgevja4dxrwmgFcz4e75WO33cH+PrDXJ/S5EcDxW3Cb22jt7IYETHObCfs2Wt87+PZjDwHXw/B3OiCPRQ4n81ngdQCvDQRcu49MKPnXCRM+ef4CS68rqL97j0p1Bcu1ekh1JWK5WsOH1TW8fFPBo3IZj58t4WH5KV7xv/X1DVRXP6K2th7Wt582QMfGp0AjeQhFBQnRg6LyjAhWKoXCzTugU0mIxBjIyILMHEj2jDidZ0cGsbMXQccnijwsQNOOQFUEoxygaVooTKfSyM/fBg2nofFlNZFjxg7QfgmPSuHA5RkWnoNQo8vdKCwNE1oWcvOLoLgFRSaTCbsQcqbbiBUusPASC0fORCsfJpzrUzgoE+oZFir/SThZ4o9stLKgvz5K38IB+conrT+u/Dt1MskJi7f4BXUowxaLkz0IOTthIjZ6HjR+9x70KyWYdhZG2oZhj3KNMO0M4kYC07M3MHv/AYYmpmBeuw7jaqkHk9EniyjMLeAnzkIKxwUOxU4AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='c301431e' title='' src='/static/fe74081a72d47d01a4e45bfae7c645d1/ca1dc/c301431e.png' srcset='/static/fe74081a72d47d01a4e45bfae7c645d1/e7570/c301431e.png 170w,\n/static/fe74081a72d47d01a4e45bfae7c645d1/f46e7/c301431e.png 340w,\n/static/fe74081a72d47d01a4e45bfae7c645d1/ca1dc/c301431e.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><a href=\"https://jsonpath.com\">https://jsonpath.com</a> 에 접속하여 해당 Payload를 붙여넣어 확인해본다.</p>\n<p>JSONPath로 표현했을 때 <code class=\"language-text\">$.pull_request.merged</code>를 확인하면 해당 요청이 PR이 merge된 요청인지 확인할 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/8d3a28af10e5768cc1ffe4ea964aad7b/ca1dc/0d6d400d.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 19.411764705882355%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAzklEQVR42nXNvWoCQRSG4aM34D2kixqFKItYKFjmMnIfKW0jxF7x30VrY1zRylZyJcbFZjfO7Juz2ijGwzx8MPPNjOx2P/i+TxgGEFldBmsM5oK1uo8eR5E6p7npGIIgRA77PeZ45FeLgQr1ouV64gfiT6z2TqnujXz0XKaLNaP5isFsyVC58yWTL6Xpzjw222+a/TGNzoD3VpdGu8/402PqrZksVldEnqokn2skciUkXUQyxXM+FkhmHeQhy+tbnVTlBcmXScRyZe04//oDW534EYBEoAIAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='0d6d400d' title='' src='/static/8d3a28af10e5768cc1ffe4ea964aad7b/ca1dc/0d6d400d.png' srcset='/static/8d3a28af10e5768cc1ffe4ea964aad7b/e7570/0d6d400d.png 170w,\n/static/8d3a28af10e5768cc1ffe4ea964aad7b/f46e7/0d6d400d.png 340w,\n/static/8d3a28af10e5768cc1ffe4ea964aad7b/ca1dc/0d6d400d.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">$.pull_request.base.ref</code>는 해당 PR의 base 브랜치를 의미한다.</p>\n<p>예를들어 feature -> develop 형태라면 develop이 나온다</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/4411c0888680fd1af84065f158384c2a/ca1dc/47afaad7.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 18.23529411764706%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAx0lEQVR42m3IvU7CYBjF8UeuRxIiUQEJii4u3AOTsysXRZikCQPiagi0TkIpEyRA+EgsvKRf79/CBvQkv5yTI9P5htnKZbF2UV7EPgDlw+6MSrBLILPFCtdVLBXMtzoGfx4n0Rr8ICII9ZEfhISRJinSbH9hDh36wzHdwYhuvHu2g+WMsUbxb9vYkynf5g/1D4PmZ4eG0cJod7B+BxdE0kUk+8pV9gm5f0TyZaTwjBRfSB365oFM9Y3Kew25viN1W0LSueNO8g/H+P8hjo3mwAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='47afaad7' title='' src='/static/4411c0888680fd1af84065f158384c2a/ca1dc/47afaad7.png' srcset='/static/4411c0888680fd1af84065f158384c2a/e7570/47afaad7.png 170w,\n/static/4411c0888680fd1af84065f158384c2a/f46e7/47afaad7.png 340w,\n/static/4411c0888680fd1af84065f158384c2a/ca1dc/47afaad7.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">$.pull_request.labels..name</code>는 해당 PR의 라벨들의 이름을 의미한다.</p>\n<h2>Generic Webhook Trigger 설정</h2>\n<blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/0578dc8c75ad072f2010764e63ccd0e9/ca1dc/5b94c679.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 51.764705882352935%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABmElEQVR42o1SyU4bURCcT8XOBQiBg4kilA8jH5AjuUQsB+BGLHtmNJ63z1uL7uchi0QQLZXU7ulXXV3t5svqHBcXX7FafcZiscRy+eFVHBwscHh4hKurH7i+vsXNzS0eHh5xefkNJyefcHz8EaenZ2hCTAgh4r0RY67gNyEkpFRqvZQ9GucclFJcosIeORc4z4PCTFNmvB5MxDzc34yjwG430tT0V0OBtYHgMbkJwUd4gqOc1XFu7VTf8DdjXK2zkMYYg74fZpX7SClDagNnHbqdhjIeUlls2oFIAxFM6LuBejzlHm3bQ2mHyZNCISS225Ymuj8+ZSKMlqQSESmRNCzEiF/tDjklZNqgH0ZYUsfrKikpJ5Ulo+F1eW3+wJIZkRS66Ikw4e5J4Pu9wM9NRjca6tuvNpLiTIM52AoeyINIoa4e8MX87JX3vhrMl2Ql600HST28BdettbBkVYyx5sZYaK3ru2a93pJCWQ1msmkKVcFLCKkxDENd9eVw9Z9Qyj9HLPPvRildj/C/ENqS6R2EEL9XfCueAc1a8zPM0DyuAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='5b94c679' title='' src='/static/0578dc8c75ad072f2010764e63ccd0e9/ca1dc/5b94c679.png' srcset='/static/0578dc8c75ad072f2010764e63ccd0e9/e7570/5b94c679.png 170w,\n/static/0578dc8c75ad072f2010764e63ccd0e9/f46e7/5b94c679.png 340w,\n/static/0578dc8c75ad072f2010764e63ccd0e9/ca1dc/5b94c679.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n파이프라인 설정 구성에 들어와서 작업을 이어나갑니다.</p>\n</blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 380px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/298dd4453e706355eef37beeb7982f0a/2edd7/f9141614.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 8.823529411764705%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAeElEQVR42h2ObQuDMAyE/f8/UCa1b0pnrWlGxzrUfbg1PXg4uFxChvo98akV82wwTQreL9DadpxbMI4PGGMRwhPWeiile76uoc+kV8ob2xYhGs77h+u6kYmREiFnxnEQiHKD2xEH5ldbKt0ll474vifEmFDbQ4LoD7gvlSbV8ka1AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='f9141614' title='' src='/static/298dd4453e706355eef37beeb7982f0a/2edd7/f9141614.png' srcset='/static/298dd4453e706355eef37beeb7982f0a/e7570/f9141614.png 170w,\n/static/298dd4453e706355eef37beeb7982f0a/f46e7/f9141614.png 340w,\n/static/298dd4453e706355eef37beeb7982f0a/2edd7/f9141614.png 380w' sizes='(max-width: 380px) 100vw, 380px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>기존에 설정해둔 <code class=\"language-text\">GitHub hook trigger for GITScm polling</code> 설정을 해제한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/5c42ec62023b3e8afc441a8a36a767e7/ca1dc/40676eae.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 81.76470588235294%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB1klEQVR42qVT23KrMAzs/39cn5M2QEiTAvEFCGDAELaSgDRnJrycemZHtmwvu5Z4e/84Ik0zwfWqkGUKdV3DuQauruCaBnVVU66RfFXNGMcRr8abH4aF6AqtjRBmWYborLA7KRzOmvIWRV7AWAtjjJzzftgiHGFtLkRKaaRJiq/rDd+5Q0zxS7M6JwpZrak6tCJu2lZojBVCozUSXeLbNshJDSsprBH1SilcUk0fasF3hvGXcJomwUxI0nOys9pOkkwsp6ZEYmvYxSK7UGRdoqHzZSfv2Hv/IBPCtu3w+Rlgt9tL3O8/EIYRgiBCSDgeY1lHUYw4PsmZYMkHQYjDIcTlkoggJhZC3mScTmeJXAR+M66mc06qO6PB7VYtFef9SvJleZP8w7K1XMEcRVEIwV+GFEXpHHlxA6utKyfREdq2l/Z4BueappXIcK4jpY3cebTNQGD/9/tdHprjv5iW/RVzfq4u35nPPCwXZUl2S3mPvw5RmCkjLcFWvKdW6D2pHmTOcVhczPNB1G0SDmSx67xgfSP+M7quf4JfMK+ZdJOQG5Ob1dKfwVV+btL/sswKDbVNUVZida0mz/t+tsvrV3GTkFuEy88kqy1ecytwjp9h3Xtevxo/tJHZ70Bn9BIAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='40676eae' title='' src='/static/5c42ec62023b3e8afc441a8a36a767e7/ca1dc/40676eae.png' srcset='/static/5c42ec62023b3e8afc441a8a36a767e7/e7570/40676eae.png 170w,\n/static/5c42ec62023b3e8afc441a8a36a767e7/f46e7/40676eae.png 340w,\n/static/5c42ec62023b3e8afc441a8a36a767e7/ca1dc/40676eae.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>그리고 Generic WebHook Trigger 를 활성화한다.</p>\n<h3>Post content parameters 설정</h3>\n<p><code class=\"language-text\">Post content parameters</code>의 추가 버튼을 눌러 파라미터를 추가한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/089b80864d0f427310cb6d2ce3abd474/ca1dc/f66fbb52.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 55.294117647058826%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA3klEQVR42qWSsW7EIBBE/f9/lzJNpIuU4mxjnx0wsMsy2eWsKM0VwSONWJrHDDB4H7CuDzi3YJpmpJRhqrX+z3hq4MKYnQMz94FOWNUgEjMGIoal9D4iZ0K3FCwiCuSC+zjjse3gUi5bgYx9/+6/uz9+JiTCeB/hlrVVD8eBoif1uCWcN4+39w/cbp9afWpQO6kb6LWqU6joxkBXJFp7sO7HETWZx1U1YNFU9l3Mv9FZzgqCkCuS7q1B4nOW8hpovWNM+sqkSVObo35QW0MkfG0Fi2dQSliCzQTK+SXwB5OHY38SNw2hAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='f66fbb52' title='' src='/static/089b80864d0f427310cb6d2ce3abd474/ca1dc/f66fbb52.png' srcset='/static/089b80864d0f427310cb6d2ce3abd474/e7570/f66fbb52.png 170w,\n/static/089b80864d0f427310cb6d2ce3abd474/f46e7/f66fbb52.png 340w,\n/static/089b80864d0f427310cb6d2ce3abd474/ca1dc/f66fbb52.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">$.pull_request.merged</code>를 등록하여 Merge 되었는지 여부를 가져온다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/28afb9569d26799aca1ec26d78932b18/ca1dc/2f09a4a8.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 52.352941176470594%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAyklEQVR42qVSy44DIQzj/79xD1tpH91Cp7PDEEh4uMn03AtjyRIIyTh2HLNg2yJ67xhjzBHAkIpOGS4lwu0WQCmj1oZpqGpvDa4ww4cFcSew/sJ1nqJ0lAtCuMOEDX30Y/wZNqVjc+g91nVTlzuyftDG63GG7m/5x8flCz/fv1iWByhrlprFDEU7cFcVvIZVS0mH7TPo2riz2m1sEXmVNU4K2ty2OpbdWRyCrM6Iigoydl0dOye7KyMxPh8V9yhgzdbHCr8JpJS3gk8jdhR7qC6KZQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='2f09a4a8' title='' src='/static/28afb9569d26799aca1ec26d78932b18/ca1dc/2f09a4a8.png' srcset='/static/28afb9569d26799aca1ec26d78932b18/e7570/2f09a4a8.png 170w,\n/static/28afb9569d26799aca1ec26d78932b18/f46e7/2f09a4a8.png 340w,\n/static/28afb9569d26799aca1ec26d78932b18/ca1dc/2f09a4a8.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">$.pull_request.base.ref</code>를 등록하여 base 브랜치를 가져온다.</p>\n<p>원하는 값은 develop 브랜치가 될 것이다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/97e2bfcbc08fce0c205ccd0b17f3ae12/ca1dc/d7a4b4fc.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 52.352941176470594%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA1UlEQVR42qVSSW7EMAzz/5/YUwsUyDJTZ+zEm2yHpYLOsYckBAgLgkxQixEReL+i9459B7mfJ/ivNvSYYWLKGIcZzq0oRaC4JEpDvVaY2hqsXaDCjXFlUnNXKKRRV855uit445JDUsdmdIbTNMEuC7YQ4NcNmeKdBY0FZ6guzfzy+Pj8xjCMeDwtHBd0tP9XcJbG+g3jzwuB7jRxB9qV0ZXnnJHo6j2/W4Lami5GpOAuDkHhmYSQ6LAcb+RxBjLGhC0WfC0VDy8oKeG5VsyMJRfs/wj+ApylFLm2DnCIAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='d7a4b4fc' title='' src='/static/97e2bfcbc08fce0c205ccd0b17f3ae12/ca1dc/d7a4b4fc.png' srcset='/static/97e2bfcbc08fce0c205ccd0b17f3ae12/e7570/d7a4b4fc.png 170w,\n/static/97e2bfcbc08fce0c205ccd0b17f3ae12/f46e7/d7a4b4fc.png 340w,\n/static/97e2bfcbc08fce0c205ccd0b17f3ae12/ca1dc/d7a4b4fc.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">$.pull_request.labels..name</code>를 등록하여 라벨들의 이름을 가져온다.</p>\n<p>원하는 값은 등록된 라벨들 중에 <code class=\"language-text\">백엔드</code>를 포함하는 값이 존재하는 상황이 될 것이다.</p>\n<h3>Optional filter 설정</h3>\n<p>아래로 내리다보면 Optional filter 탭을 볼 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/86d218e1de75634dec2bd69278131ec7/c7d76/3f3d0f71.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 44.11764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA70lEQVR42p1S0W6DMAzk/79y2qRA2qBVoyR2ErjZJrRs1faApVOsw9i+S7paK5izQfN1XU9DoyNiDP6CvveIMRnZvp2KLueMEAJSon8L/5rxuqFIfXMj3vsRH32A91fZ+IrpPssQNsRISKLEkPaTMEU5cxWrFuSyYFlWdCzEOBV8zgW3OVvh1ohAivazerwPUI6soXgvjXDckFmKYjzt2YtknezkQpwbTKobLvDhBs4FOsw2owy1ZsPG2ZaCXCrKUXIRwmS0oi+RHe4VUZvQU3Jq8vUl7Jx6e3xqtqESRE9/uDV6eEX8K6cfuV7IMb4B6NXCoXSmlG8AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='3f3d0f71' title='' src='/static/86d218e1de75634dec2bd69278131ec7/ca1dc/3f3d0f71.png' srcset='/static/86d218e1de75634dec2bd69278131ec7/e7570/3f3d0f71.png 170w,\n/static/86d218e1de75634dec2bd69278131ec7/f46e7/3f3d0f71.png 340w,\n/static/86d218e1de75634dec2bd69278131ec7/ca1dc/3f3d0f71.png 680w,\n/static/86d218e1de75634dec2bd69278131ec7/c7d76/3f3d0f71.png 891w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Expression에 다음과 같은 정규표현식을 작성했다.</p>\n<p><code class=\"language-text\">(?=.*true)(?=.*develop)(?=.*백엔드).*</code></p>\n<p>또한 Text 부분에는 위에서 파라미터로 선언한 값들을 사용했다.</p>\n<p>위 표현식으로 다음과 같은 효과를 기대할 수 있다.</p>\n<p><code class=\"language-text\">merge가 true 이고</code>, <code class=\"language-text\">브랜치가 develop 이고</code>, <code class=\"language-text\">라벨에 백엔드가 존재</code>하는 작업에 대해 트리거를 수행하는것을 기대할 수 있다.</p>\n<h3>Token 설정</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/0f7d36684cd0d851d21ccd02fcabb224/ca1dc/b55101b4.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 28.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAw0lEQVR42oWQ6w6DIAyFef/nXLyAqNwn4M4KiuHX1uQLLTltDzBrHfr4ND43fd3lj5aKHjZOHGKR4GKpGFqQ84mU80W6iCndZ8YRUyXG665pI8GGUWAkBF8xzRJS7tg2jbVDrqrelVNpC60dLfYwxsGHN/J5PjBNAqUsDIm2lQZQk5QKy7JjpgWluTg5jogQDnKU8CuY9+/aLMQGTi6HQeD14pimMszWIeUL2vP+BStCS/atDXAu1Lw8pbo2/qbV7u/AL0aY077bX6d7AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='b55101b4' title='' src='/static/0f7d36684cd0d851d21ccd02fcabb224/ca1dc/b55101b4.png' srcset='/static/0f7d36684cd0d851d21ccd02fcabb224/e7570/b55101b4.png 170w,\n/static/0f7d36684cd0d851d21ccd02fcabb224/f46e7/b55101b4.png 340w,\n/static/0f7d36684cd0d851d21ccd02fcabb224/ca1dc/b55101b4.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Token 탭에 토큰 이름을 작성한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/f70ad188965b50d1b47da8d38d37378c/ca1dc/8e4baf8e.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 68.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAACHElEQVR42n1T2W7bMBDUUxPZ1n2Qug/KcmQ5tuykSAu0fWpR9Pj/35nu0kfQosrDYKmDw53ZoRFlDTxRwHQiLD1BiLEM6LmYYGY75GqH9Tih2eyhhgOsIMHKl7MwRKEQJBXcOIcdpli4MVZBClFv4cgGUa4Q5y2cKNP/8Pe3YOTtgIf9M3VxvG3gLmTeQGQ1WEGYNnRorQ/mdZS1dIhCxOvLM8MTJXfYIa37W3cs26IOq/EjuuMXqO2E9uERbT+iIShaq80O/XhCN0yEA+qHA2I1IcjWMLJmoyUxEXtwrglE1cMnb+8tH8uowlJ2WIruXGMF0xXa97PUiJ65ChiFGhDICguHvPOkhh3mWp7tuDAtD+n4CdnTLySnH8iff0MevmEVl+cBeq8D4bUxHl9wfPlM3lREUiKg6oQZyTyg3z3Biws6RMCmDRYTUDcr95qIfyH/lnyVbZHkmEw27RB3q4Dg484K8O5S7+n9LGGY1nqqPBTuTA+FCDkm/M6lyl4y2Ab+xyTSWcJqPYJll92ou9I5JEKWPOzf6zixAll2hLWOz+K/ZBfCpFrr2PCm65S5w7TdoBn2aAnc7YImylIXs/5dCEu1pWv1qOW9+kiEWY+UIiKSFgn5bF8suB46S8g3oaDbouV652AvA4n86wnZTwrr1KHMFCqS61O83iLkyBns2TWgt4++gPeBuvu+Q3jsUMkaJV0xy5e3rM7hD+ijZVRvBEYpAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='8e4baf8e' title='' src='/static/f70ad188965b50d1b47da8d38d37378c/ca1dc/8e4baf8e.png' srcset='/static/f70ad188965b50d1b47da8d38d37378c/e7570/8e4baf8e.png 170w,\n/static/f70ad188965b50d1b47da8d38d37378c/f46e7/8e4baf8e.png 340w,\n/static/f70ad188965b50d1b47da8d38d37378c/ca1dc/8e4baf8e.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>이 때 GitHub WebHook 설정에 들어가서 Payload URL에 token 파라미터를 포함하도록 수정한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/1a38795c4df610bc6171c31200b69ec4/ca1dc/675ca490.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 23.52941176470588%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAnUlEQVR42p2QXQ6CMBCEe/9reBTjETQxPokSaelPgAIFth0XDIkvKnGSL/M2+2VFHwYY66CURtN4rEkp/YUIwwAlSxQPhUJqqFJD8njbdiCKGCfCtAEiQmA5UVYVMmuRWwNjNOq64ZEJFCMiX1yIb/2FWUBccoPdIWPu2J8krHHousCG/dIr3r+Mf0X4fsT5VuF4dWwZ5u99/M+WPAFweYZBb0pcXQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='675ca490' title='' src='/static/1a38795c4df610bc6171c31200b69ec4/ca1dc/675ca490.png' srcset='/static/1a38795c4df610bc6171c31200b69ec4/e7570/675ca490.png 170w,\n/static/1a38795c4df610bc6171c31200b69ec4/f46e7/675ca490.png 340w,\n/static/1a38795c4df610bc6171c31200b69ec4/ca1dc/675ca490.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>바로 아래 탭에서 TokenCredential에 토큰에 대한 Secret Key를 추가해줘야한다.</p>\n<p>외부에서 빌드를 유발하기 위해서는 token을 확인하는 방식이 존재하는데 이 때 Jenkins의 Credential에 있는 정보를 기반으로 수행한다.</p>\n<blockquote>\n<p>token을 사용하지 않는 경우 계정정보를 입력할 수도 있지만 해당 과정에서는 token을 등록하는 방식을 사용합니다.</p>\n</blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/b221c2b685a63c919b0a1b7cd7b9e51f/ca1dc/639919be.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 82.3529411764706%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAABxElEQVR42q1U267TMBDs7/PGV/DEOy98AFcJ2lN6KOTa5n7vSeI4sTOsnTaqjiAtAksjy4k1uzO769V2+w3rzYPGfv8Dtu3AIqjdtCzYjosgCO/GqihKVFWFLMvR9wP+da3iKEGeF6jrBmVZom4aSDlCCDFBypsY6N44jhMhYx1axtC2DIz2vu/1z7/FnGFKUhWZpI9zxEFMEPImerrHr6xaNW1LHp4gz2lfQ6oAd0hXwWdCxjmSNEPZtHgi+U8d1zi1HRhFVmKkwjnA73AJqgmVZw0VpDUNtK4DdjyCOTYay0TvHyHjCOLgQmQpxJUtz4sihLxIZrBNC8nDGuF2g/DzJ3gf3yPZfEXw4R24ZUA6FoQiXpA9V7njPYI4RkyZRY6DiPoySFJEeQ4/ScCHs+wFyRoXwrquEWYZ8scd0t0OBZ1TIlI2qKX9GRSWe3EmVFW2bBuO5+NgmvAoy4PnIaVCAaP25hZU+6hhmKrcdfB9HyHJLtZfUB0PqChLNTV5UVCP8bmFljB7mJYnbB/3MAwT338a+mEwKFP1MDiui4baaRrFhQyHiVQTvnj1Bi9fv6Wx4//ncVBjoyqtjRfyjzN67/oF/wPaIG5aCP0AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='639919be' title='' src='/static/b221c2b685a63c919b0a1b7cd7b9e51f/ca1dc/639919be.png' srcset='/static/b221c2b685a63c919b0a1b7cd7b9e51f/e7570/639919be.png 170w,\n/static/b221c2b685a63c919b0a1b7cd7b9e51f/f46e7/639919be.png 340w,\n/static/b221c2b685a63c919b0a1b7cd7b9e51f/ca1dc/639919be.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>위와 같은 정보로 Secret text를 작성하고 등록하고 적용한다.</p>\n<h2>응답 확인하기</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/fca53a76b19e9b744c8f4e9d9b359a97/ca1dc/8f20f94d.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 55.88235294117647%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABxUlEQVR42o1T23LaQAz1YwkQjPHdxru+YhtsTEIoFJo0nU4vb/3/nzmV1pCBzLTThzPyalfSOZKs3XklBukRH+RHDOcNmsc9lps9qvUO3e6ERfOI8czDcOr8F7ThzMfEjXFvC5hhhkAu4MsCU2euoNvhuyD3jNtEI6P3afxhBYkK5ERhWsEjy0F3+tXjM0bvwfc3DE0PerCAJRoY8xq6X8IIajhxCyfpYEZLwgqWbNX3OFpjIJ4oeaASzjyJqRuRFaQoOjMMUxjkyIoOYreG/VxhNHExNn2MqH+MMbWGGU5didX2RGpKlcCmWNOPlUpukeaJAlndYTCxenkmybBJnn7bnwt4QNyeeyrGRdhewIU1N8rxsH9Buz3SdA+QOUml4XiCh9PDprPpJ2+YebFidY03hiJf4fXXb3x6/Ynd6RsOLz+wf/6Oh8MXNFREFi0lrSgopaDsr7DDHIYresnb41fauc+KKVtOlJQdVRQkL6KHUrH6N3hTiGGYlIjSGhMrVBXU7l3toOn3U2Qf37Ovv+tx2VeD3nAfNSfK6G94QrxolbwoWyKtNpB0DuISxWqr2LI/qzeYJzXicg2RNxBFo95ewBP/AwyEJLtFVI/fAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='8f20f94d' title='' src='/static/fca53a76b19e9b744c8f4e9d9b359a97/ca1dc/8f20f94d.png' srcset='/static/fca53a76b19e9b744c8f4e9d9b359a97/e7570/8f20f94d.png 170w,\n/static/fca53a76b19e9b744c8f4e9d9b359a97/f46e7/8f20f94d.png 340w,\n/static/fca53a76b19e9b744c8f4e9d9b359a97/ca1dc/8f20f94d.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>GitHub의 WebHook 탭의 Recent Deliveries 탭으로 가서 확인해보면 Response Body값에 다음과 같은 응답이 담겨있는 것을 확인할 수 있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">\"jobs\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">\"pium-dev\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token property\">\"regexpFilterExpression\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"(?=.*true)(?=.*develop)(?=.*백엔드).*\"</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"triggered\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"resolvedVariables\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token property\">\"BRANCH\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"develop\"</span><span class=\"token punctuation\">,</span>\n        <span class=\"token property\">\"LABELS\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"[\\\"?️ \\\\b리팩터링\\\",\\\"? 백엔드\\\"]\"</span><span class=\"token punctuation\">,</span>\n        <span class=\"token property\">\"LABELS_0\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"?️ \\b리팩터링\"</span><span class=\"token punctuation\">,</span>\n        <span class=\"token property\">\"LABELS_1\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"? 백엔드\"</span><span class=\"token punctuation\">,</span>\n        <span class=\"token property\">\"MERGED\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"true\"</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"regexpFilterText\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"true develop [\\\"?️ \\\\b리팩터링\\\",\\\"? 백엔드\\\"]\"</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"id\"</span><span class=\"token operator\">:</span> <span class=\"token number\">248</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"url\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"queue/item/248/\"</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"message\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Triggered jobs.\"</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><code class=\"language-text\">regexpFilterText</code>에 원하는 값이 잘 들어간 것을 확인할 수 있다.</p>\n<h2>결론</h2>\n<p>젠킨스의 <code class=\"language-text\">Generic Webhook Trigger</code> 플러그인을 이용하여 Merge 여부, target branch, label 값을 비교하고 빌드를 유발하는 설정을 했다.</p>\n<p>경우에 따라 세부적인 검증을 추가할 수 있을 것 같다.</p>\n<h3>트러블 슈팅</h3>\n<p>Generic Webhook Trigger 설정 - Token 설정에서 많이 헤맸다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/474079b05b637abf6d764381248e8ad2/ca1dc/1c588600.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 40.588235294117645%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABZUlEQVR42n2RSXOCQBCFqRyNCIKsygwILoC4pSyJidlMUpV4zP//LS/dQ5F48vBVL0O/6XlonjOCPcrhxJXCFQsE8RJuwqwwkCVsUVKkM+obroDpDKHbIbqWD8sXCjuI0fcENNMdQaQFbGqGswqnrMR5mOLGdKH3Pdxe0KGe6UYoNzVG47nKB2FCgpIiC0bQ5KREVqzRMRz06Oa+HcDk4QuhruVBt4IG+5/eIIRBM23UKWrj+Qr74zvW+ycU6xox1UGSQ9CmEZOW8MWUNhjDoc0Zztu6zRnLj6HNljt8nH9wPJ1RP3/i8PqFx7dv7B5O6gIxIU/lnAYyEriOHSTQ4mmFbf1CvtxjQ1tWdwfk6z3i6ZI8EsofNpw/vgZ72fckCy7gRRn5MFSmstGMQT+L6wahMP/qptd+y3CPNTQWS/MtJD0tma2QFlsk5KPIuF4qeFs+4zwrNqpO8ybKSQVJr+SZQE7xC1nc2VtW9UMnAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='1c588600' title='' src='/static/474079b05b637abf6d764381248e8ad2/ca1dc/1c588600.png' srcset='/static/474079b05b637abf6d764381248e8ad2/e7570/1c588600.png 170w,\n/static/474079b05b637abf6d764381248e8ad2/f46e7/1c588600.png 340w,\n/static/474079b05b637abf6d764381248e8ad2/ca1dc/1c588600.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">{\"jobs\":null,\"message\":\"Did not find any jobs with GenericTrigger configured! If you are using a token, you need to pass it like ...trigger/invoke?token=TOKENHERE. If you are not using a token, you need to authenticate like http://user:passsword@example.org/generic-webhook... \"}</code></p>\n<p>404 에러와 함께 위 메시지가 반환되었는데 Jenkins의 Token에 대해 이해를 하지 못해 생긴 문제였다.</p>\n<blockquote>\n<p>왜 다들 Token이 뭔지는 설명을 안해주는거지..?? ㅠㅠ</p>\n<p><code class=\"language-text\">외부에서 빌드를 유발하기 위해서는 token을 확인하는데 이 때 Jenkins의 Credential에 있는 정보를 기반으로 수행한다.</code></p>\n<p>이 한마디를 이해하기 위해 하루가 걸렸다... 😇</p>\n</blockquote>\n<h2>Reference</h2>\n<h3>설정 과정에서 참고한 글</h3>\n<p><a href=\"https://bepoz-study-diary.tistory.com/385\">https://bepoz-study-diary.tistory.com/385</a></p>\n<p><a href=\"https://velog.io/@zayson/Jenkins-CICD-4.-WebHook%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC\">https://velog.io/@zayson/Jenkins-CICD-4.-WebHook%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC</a></p>\n<h3>트러블 슈팅 과정에서 참고한 글</h3>\n<p><a href=\"https://georgik.rocks/jenkins-generic-webhook-plugin-failed-with-did-not-find-any-jobs-with-generictrigger-configured/\">https://georgik.rocks/jenkins-generic-webhook-plugin-failed-with-did-not-find-any-jobs-with-generictrigger-configured/</a></p>\n<p><a href=\"https://pikachu987.tistory.com/61\">https://pikachu987.tistory.com/61</a></p>","frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기","date":"July 25, 2023","update":"July 25, 2023","tags":["젠킨스","CI"],"series":null},"fields":{"slug":"/jenkins-hook-by-label/","readingTime":{"minutes":8.89}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}},"next":{"fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},"pageContext":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","series":null,"previousPostId":"159c943b-1a50-57dd-aa71-7557364752a5","nextPostId":"cecbc8b9-db00-562b-aa0b-06c406cfc44a"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/jenkins-setting/page-data.json b/page-data/jenkins-setting/page-data.json
index f0a1e64f..81273921 100644
--- a/page-data/jenkins-setting/page-data.json
+++ b/page-data/jenkins-setting/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/jenkins-setting/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다. 정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.\n이에 Jenkins를 설치하고 환경설정을 빌드서버 환경을 구축한 일련의 과정을 기록해두려고한다. 작업 환경 : Ubuntu 22.04.2 LTS 공식문서 살펴보기 젠킨스 공…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p>피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다.</p>\n<p>정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.\n이에 Jenkins를 설치하고 환경설정을 빌드서버 환경을 구축한 일련의 과정을 기록해두려고한다.</p>\n<blockquote>\n<p>작업 환경 : Ubuntu 22.04.2 LTS</p>\n</blockquote>\n<h2>공식문서 살펴보기</h2>\n<p><a href=\"https://www.jenkins.io/doc/book/installing/linux/\">젠킨스 공식문서</a>를 확인하면 설치 방법이 친절하게 나와있다.</p>\n<p>아무것도 없는 EC2 환경에서 Jenkins를 설치하고 구동하는 과정을 따라가보자.</p>\n<h2>(Optional) Swap 메모리 설정하기</h2>\n<p>프리티어환경에서 Jenkins를 사용하면 자칫 메모리가 부족한 상황이 발생할 수도 있다.\n2GB의 메모리는 젠킨스와 빌드를 모두 견디기 어려울 수도 있다.</p>\n<p>다음 명령어를 통해 서버에 Swap 메모리를 할당하자.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">sudo</span> fallocate <span class=\"token parameter variable\">-l</span> 2G /swapfile\n<span class=\"token function\">sudo</span> <span class=\"token function\">chmod</span> <span class=\"token number\">600</span> /swapfile\n<span class=\"token function\">sudo</span> <span class=\"token function\">mkswap</span> /swapfile\n<span class=\"token function\">sudo</span> <span class=\"token function\">swapon</span> /swapfile\n\n<span class=\"token function\">free</span> <span class=\"token parameter variable\">-h</span> <span class=\"token comment\"># 확인명령어</span></code></pre></div>\n<blockquote>\n<p><a href=\"https://velog.io/@junho5336/Swap-%EB%A9%94%EB%AA%A8%EB%A6%AC-%ED%95%A0%EB%8B%B9%ED%95%98%EA%B8%B0\">Swap 메모리 할당하기</a>를 참고</p>\n</blockquote>\n<h2>java 설치하기</h2>\n<blockquote>\n<p>설치 방법은 <a href=\"https://www.jenkins.io/doc/book/installing/linux/\">공식문서</a>를 확인하면서 진행하고있습니다.</p>\n</blockquote>\n<p>현재 사용할 jenkins의 버전은 java 17을 사용한다.\njava 17버전을 설치하자</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> update\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> <span class=\"token function\">install</span> openjdk-17-jre\n<span class=\"token function\">java</span> <span class=\"token parameter variable\">-version</span></code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/d0e1b4065d85f4f0f9e8e290576873b8/49bb6/93d56503.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 10.588235294117647%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAdElEQVR42mXNwQ6CMBRE0RIIW16j1LRpBfqoYP3/77tqF25cnGQyixnjHo75OXPdLshdkEW4RU/elJQSIQTGcWQYhj9932OM+em6DlOPF/WonOVkTSu6KJoz+74TY8Q510ZVlfzpSyktf8+891hrEZFmmibeU5cx4lWIWHEAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='93d56503' title='' src='/static/d0e1b4065d85f4f0f9e8e290576873b8/ca1dc/93d56503.png' srcset='/static/d0e1b4065d85f4f0f9e8e290576873b8/e7570/93d56503.png 170w,\n/static/d0e1b4065d85f4f0f9e8e290576873b8/f46e7/93d56503.png 340w,\n/static/d0e1b4065d85f4f0f9e8e290576873b8/ca1dc/93d56503.png 680w,\n/static/d0e1b4065d85f4f0f9e8e290576873b8/49bb6/93d56503.png 775w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h2>jenkins 설치하기</h2>\n<p>다음 명령어를 수행하여 jenkins를 설치한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">curl</span> <span class=\"token parameter variable\">-fsSL</span> https://pkg.jenkins.io/debian-stable/jenkins.io-2023.key <span class=\"token operator\">|</span> <span class=\"token function\">sudo</span> <span class=\"token function\">tee</span> <span class=\"token punctuation\">\\</span>\n  /usr/share/keyrings/jenkins-keyring.asc <span class=\"token operator\">></span> /dev/null\n<span class=\"token builtin class-name\">echo</span> deb <span class=\"token punctuation\">[</span>signed-by<span class=\"token operator\">=</span>/usr/share/keyrings/jenkins-keyring.asc<span class=\"token punctuation\">]</span> <span class=\"token punctuation\">\\</span>\n  https://pkg.jenkins.io/debian-stable binary/ <span class=\"token operator\">|</span> <span class=\"token function\">sudo</span> <span class=\"token function\">tee</span> <span class=\"token punctuation\">\\</span>\n  /etc/apt/sources.list.d/jenkins.list <span class=\"token operator\">></span> /dev/null\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> update\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> <span class=\"token function\">install</span> jenkins\n\n<span class=\"token function\">sudo</span> systemctl status jenkins <span class=\"token comment\"># 실행상태 확인</span></code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/377aacf35597393970adf4d2f550dffe/fcbeb/99b45540.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 16.470588235294116%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAf0lEQVR42m2OywrFIAxEleIjahdy1YIbBW3//w/n1oC7Lg5DEmYywmeHOipiiyi9oI2OOSfmPTHGQK3vLUbGOYcQAqy1EEJ8Q5bw3M8b1JBqAp0EpRRzHAer1ppDpJRs2vrJMqWc0XvHVS6kX+I2q4kxhtmhRMTs/Z699/xw8Qe0b0Pn0GyF9wAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='99b45540' title='' src='/static/377aacf35597393970adf4d2f550dffe/ca1dc/99b45540.png' srcset='/static/377aacf35597393970adf4d2f550dffe/e7570/99b45540.png 170w,\n/static/377aacf35597393970adf4d2f550dffe/f46e7/99b45540.png 340w,\n/static/377aacf35597393970adf4d2f550dffe/ca1dc/99b45540.png 680w,\n/static/377aacf35597393970adf4d2f550dffe/02d09/99b45540.png 1020w,\n/static/377aacf35597393970adf4d2f550dffe/fcbeb/99b45540.png 1206w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h2>jenkins 접속하기 &#x26; 초기설정</h2>\n<blockquote>\n<p>jenkins는 기본적으로 8080포트를 사용한다.\njenkins의 포트를 변경하는 방법에 대해서는 본 글에서 다루지는 않는다.</p>\n</blockquote>\n<p><code class=\"language-text\">{인스턴스-public-ip}:8080</code> 으로 접속하면 다음과 같은 화면을 볼 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/1a9e2cb6709d5c991de4fa4d0d15199d/f5df9/4492665d.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 76.47058823529412%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABjklEQVR42qVT7VLCMBDk6X0Xx1fwAQT8Ib+AoQ7IYBXblCYhTT9S1rtAwA9AGDOzXELJdm9v6QyHI8xmL5hOZ5BSoSgKrNdrFKbY77XWZ6HU9t5isUCHP3jxRYYhorKsfOVz0zT4a202G1+TJDkQTiYRug99DJ4GGI/G6HV7dO5hPufnGzjn0Lath3Nc3Zd9eyCM49gfDEleKY2VLiDUGqkyyKgqailnUFt5npNq49Vzi1wZoYtvhKU20EJCZtojF+SNIG9E7mGlRlVV+/ZOthwIraZBrCRsHqB8NRkRMmhgZVl6cPu8WBnvjxKmWYa35RLvHwm0MWjIl5ou1K7xtSKUpLCqazREYq3dDdF45b8Im8b5t50FD4FgSeXWR+vB0fGi0vRAeMybUxHZDoSGs4sa55An/S9CVhVaZl9/tXwJIf+GL0spPVEYyNGhXELIJJzFoOhsbNiD8LZT4JiwXyHI4fuj/5RrPPy5bO3wnBQYTV/RiaLIeyKEQEZZvAZCZFAyx3gW4+auj9v7R3wC/VKL2SHZQ34AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='4492665d' title='' src='/static/1a9e2cb6709d5c991de4fa4d0d15199d/ca1dc/4492665d.png' srcset='/static/1a9e2cb6709d5c991de4fa4d0d15199d/e7570/4492665d.png 170w,\n/static/1a9e2cb6709d5c991de4fa4d0d15199d/f46e7/4492665d.png 340w,\n/static/1a9e2cb6709d5c991de4fa4d0d15199d/ca1dc/4492665d.png 680w,\n/static/1a9e2cb6709d5c991de4fa4d0d15199d/f5df9/4492665d.png 1019w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>다시 EC2 화면으로 넘어와서 다음 명령어를 수행하여 <code class=\"language-text\">initialAdminPassword</code>를 알 수 있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">sudo</span> <span class=\"token function\">cat</span> /var/lib/jenkins/secrets/initialAdminPassword</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/1bfdaa00e299a618f4e0d6f9a35b40f4/e42f2/f55b94c9.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 5.294117647058823%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAARElEQVR42h2KOwrAMAzFegN/Y5OlS4OTqfe/3WvxIBBCF92EfBN5flbAlmE+E7sOqgrMDCKCqsLdYWbtItJ9jNFERL8f97MZQConaOsAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='f55b94c9' title='' src='/static/1bfdaa00e299a618f4e0d6f9a35b40f4/ca1dc/f55b94c9.png' srcset='/static/1bfdaa00e299a618f4e0d6f9a35b40f4/e7570/f55b94c9.png 170w,\n/static/1bfdaa00e299a618f4e0d6f9a35b40f4/f46e7/f55b94c9.png 340w,\n/static/1bfdaa00e299a618f4e0d6f9a35b40f4/ca1dc/f55b94c9.png 680w,\n/static/1bfdaa00e299a618f4e0d6f9a35b40f4/e42f2/f55b94c9.png 734w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>확인한 암호를 화면에 입력한 뒤 Continue 버튼을 눌러 계속 진행한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/34da90f6397f6f2e2761f50b1c127250/583a7/28fea7e9.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 76.47058823529412%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABpElEQVR42p1T7U7jMBDsq9/LIPEM9x+O4yh/oZxU2gM1JDTxR+wkTtthZ1FaQG2BW2lkx94dz35kNJlMMJ3eYzaboa5rNE2DEAJijLqPMej5MXjv1XexWGCUZRk2m41cBL0IIaJtOwQh9L5G3/f4zBhPK8tyIATuJn9x8es3rsfXuL25xdWfMc7PLjCf/VNnEm/Wa6w/YLVa6bolzPNcP6jIOI/SR5QuYCmoBFZUK5yDMVYzYTmGsnBNqd8RFkWhH42TWiwNzFKCSw8jcKVDlLMgaIxD6tJWzcGU3xLGyqKpGMzVKkksjZJG2XddJ8VvNc2hDHxgL2HxvMQie0KWF6ilMUmCmErqdyAh0csdu8oOM+VOlNOq6g1hK46tOLVtq13m61TyDmyCoBEf1i9yrAScBqqsqmpHOMj+zJji0AyCKp00jA/+FyH9os6o35Iy/deUv0lIH5aEikiksylne5vyFUIqs9Yq6cGxGQZ7aP8xpJRUHdeBiHj3p3y3hvss9Ws8mg7Thxyj+Xyu9WAqfP0YPvpYK4Mfakwfc/w4vcTJzzFeAINXjf7ZXI+HAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='28fea7e9' title='' src='/static/34da90f6397f6f2e2761f50b1c127250/ca1dc/28fea7e9.png' srcset='/static/34da90f6397f6f2e2761f50b1c127250/e7570/28fea7e9.png 170w,\n/static/34da90f6397f6f2e2761f50b1c127250/f46e7/28fea7e9.png 340w,\n/static/34da90f6397f6f2e2761f50b1c127250/ca1dc/28fea7e9.png 680w,\n/static/34da90f6397f6f2e2761f50b1c127250/583a7/28fea7e9.png 1013w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>초기 플러그인 세팅 화면이 나오는데 <code class=\"language-text\">Install suggested plugins</code> 를 눌러 초기 플러그인 설정을 진행한다. </p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6be6be95dbd2b5d099883b8b0c45d285/d8785/c78a9517.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 75.88235294117648%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABzUlEQVR42p1UiW6bQBT0/39SPyCRq9RxrMolji9ALAHMfS6Hp++9GIvUaatkpdGwCzs771hmhmFgt9sLwjBEksSI488hiiLal2C73WLmeR66rkdZlsQd2rYT7vte0Lat8L/G+XwWdhwHM9/3MQwDDGOD+fwB9/ffhde/nrFYLHF3Nyd+gtatbORvmafgtatgEAQyqasKNbmsqzdU9JxnGYqiEPd13VxQ01p5WatvHZ5OJ5mouMYhKGCFJfZ+DjdtEBQdorIT0TTNKE8p8ryQFHFqRmcfCq7sGN9WeyytAD9VBJVrRPqM16zDZrPBer2G67pSAMmt5Lu9hn0VDEmQp7tTiWNUwkpqqEzDJnaIraiSCmaX8PM8J7eprDHzGgvfCK6cGD8sHw+mj4Ud0HOAlRvjxctg2zZMy3zj4xGKNopbahk+iIUlbUpNQnYSLFWMJ5Vc8UiHPLsJAuoELh7D8z0Se4WjXBHi4rDojWDV9ig09eMEPNfdIDnrLn3JPZpluYTM4XPIY7XfFWVM7P+G1locVdRmfMBNUUbBgV+w8B+YDg6Pw2ya5u835TMO2R0Ljldxelu+HPJH370TNE2L/hjJtWJfAReG3R8OB/wGHbWCEuKtdfAAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='c78a9517' title='' src='/static/6be6be95dbd2b5d099883b8b0c45d285/ca1dc/c78a9517.png' srcset='/static/6be6be95dbd2b5d099883b8b0c45d285/e7570/c78a9517.png 170w,\n/static/6be6be95dbd2b5d099883b8b0c45d285/f46e7/c78a9517.png 340w,\n/static/6be6be95dbd2b5d099883b8b0c45d285/ca1dc/c78a9517.png 680w,\n/static/6be6be95dbd2b5d099883b8b0c45d285/02d09/c78a9517.png 1020w,\n/static/6be6be95dbd2b5d099883b8b0c45d285/d8785/c78a9517.png 1021w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/c5ec863604bfad00adc41e0bcd9ca6fd/9b7e9/82bae04f.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 76.47058823529412%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABwElEQVR42pWUWW+bQBSF+f8/qw9J5FRK89ImYrFZhp3BgPGKfTrnIlBsJY2LdDQznjvfXWXL85ZYLldYrXx0XYfNZnOlvu+/Fe12ux2UUrDW6zWGYcD5fMblcpk1fdzz7vb+VvyKohiBF2PcmLWsKjRNC61rUV3X2G638mAg8Asonc3ArmtxND/8eHjGYvFT9Pi4wNMT9YwgCMV4yuIz8W4G9ib/wUTc9Kc5RWYwpXEbybfAV+cVbuogrH2oWiHLMoRhhNY0iCn7fiDF1rqSc5pmxiY3pWnkzJVNORwOY1N+O3/w5r3DizwkZYI4SQXIGpZliSiKkOe5OCpLQtfSUUIIY40pAuM4hmXbDmKVoMgL6ErLg6Io59VxHDNSK+MkFCeVaVxl7DguhOz3e3FwOp2QJAks13WR5hmKskClR2OlYolAa42Xl19wXU+M6YSRMu227QT2OTBNJS0WlaOTm2jbtpVogiAQCMUaUSwDH38BdCR31o2GSkXzo/F8vb8D6MqGUGp69PF8e/dPoG3bYsCi3yuWgWCCqKsuE8bij927TxwnziCjI4wNPB6P0gtrmjNCOVf/I/4PUISzib7v4y8mPXFDELhsegAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='82bae04f' title='' src='/static/c5ec863604bfad00adc41e0bcd9ca6fd/ca1dc/82bae04f.png' srcset='/static/c5ec863604bfad00adc41e0bcd9ca6fd/e7570/82bae04f.png 170w,\n/static/c5ec863604bfad00adc41e0bcd9ca6fd/f46e7/82bae04f.png 340w,\n/static/c5ec863604bfad00adc41e0bcd9ca6fd/ca1dc/82bae04f.png 680w,\n/static/c5ec863604bfad00adc41e0bcd9ca6fd/9b7e9/82bae04f.png 1009w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>초기 Admin 유저를 생성할 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/407217b075d5dc4ab36ca58e5b6895fb/bb4c7/a8f14e43.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 75.88235294117648%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABV0lEQVR42pWT3W6CMBiGufOd7VJ2suwSlp2pi2Yao6A7QMlQERVULD+l9F1b0TQRRL/kSf/fvv3aGpZlYT53YNszBEGAKIpwPB5VqSP76jgcDiCEwHEcGK7rQkaSpMiyDHmeI00zUadlmYHSXLUppeAcN8HLTs/zpOBCNZbLFTqdLnq9HwyHI/T7Q4zHFlqtDkYjE6Y5Qbv9rTbWRfT6er2GsVicBU8nIiYnKMSgnFAUxQ1MwMvxRkF5VLlACrJyMdOEdFFJzthVqNqhSKoUrXJWR4NDBsYeF2NNDqPopK6+Ln9PO6TiuFTsqufvHo05jOPkeoxHue9QPFq566PQJoeExCqHlwnPOCyKy0/RBOWjJnF8zmUDeVlyLi+GVzvkVZ+0JniJjH1M8buKMNummNgujOl0Ct/3lXoYhnfZCzbbAH+eL9hgs9vha2Dj5a2N1/cuPj57+AeZf421Ajk8yQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='a8f14e43' title='' src='/static/407217b075d5dc4ab36ca58e5b6895fb/ca1dc/a8f14e43.png' srcset='/static/407217b075d5dc4ab36ca58e5b6895fb/e7570/a8f14e43.png 170w,\n/static/407217b075d5dc4ab36ca58e5b6895fb/f46e7/a8f14e43.png 340w,\n/static/407217b075d5dc4ab36ca58e5b6895fb/ca1dc/a8f14e43.png 680w,\n/static/407217b075d5dc4ab36ca58e5b6895fb/02d09/a8f14e43.png 1020w,\n/static/407217b075d5dc4ab36ca58e5b6895fb/bb4c7/a8f14e43.png 1023w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>jenkins의 기본 URL을 설정할 수 있다. 기본값을 권장한다. </p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/4035960bbafbca7af5331b1611fac0f0/42a19/84efb2c8.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 75.88235294117648%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNklEQVR42u2Uy26DMBBF8/Vd9kMqddEv6CpRUJoqUtpUICIBKY+WDYSnbcytx0CiEDZRN13U0tHg8ej6zkh4ZpomXNeD47hI0xRFUSDPcx0Hzvtcf4/JsgxVVSkNB7MgCEGrLEtFBca4goFzpnNUyDnXZxSnVtu2Ovq+j1kYdoKed8BiYWC93mC7fYdl2XhZvarcUu/n8yVse38hMBYMguAsSK7yvDgdUiyVu0y1lB6ppRpSSjRE03RRIQi1v3LYtVVqYaKuaz3TJCESHPs5VSqvYw9dOinIWH0a/iBKCMH1ZYKLbrYDKsf7GnJ+1bIQQrsiBofkYMiNz6iehIiLGUZRNDnoW9a/4O8FpRz+lL/okAmJ3WeKXVjgzVKPA702pEzEcXwT0dc3PvYH3D8auHsw8PS8wg++b41+WLe4nQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='84efb2c8' title='' src='/static/4035960bbafbca7af5331b1611fac0f0/ca1dc/84efb2c8.png' srcset='/static/4035960bbafbca7af5331b1611fac0f0/e7570/84efb2c8.png 170w,\n/static/4035960bbafbca7af5331b1611fac0f0/f46e7/84efb2c8.png 340w,\n/static/4035960bbafbca7af5331b1611fac0f0/ca1dc/84efb2c8.png 680w,\n/static/4035960bbafbca7af5331b1611fac0f0/02d09/84efb2c8.png 1020w,\n/static/4035960bbafbca7af5331b1611fac0f0/42a19/84efb2c8.png 1024w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>여기까지 했으면 초기 설정은 완료했다고 볼 수 있다.</p>\n<p>만약 위 과정에서 admin 유저를 생성하지 않았다면 <code class=\"language-text\">admin</code> 이라는 기본 유저로 로그인 할 수 있다고 설명하고 있다.\n비밀번호는 <code class=\"language-text\">initialAdminPassword</code> 과정에서 입력했던 값으로 설정되어있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/f1396e60734e9dddb0c6a43f0652fc07/0d97d/60ba97ad.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 77.05882352941177%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABXklEQVR42u2Uy07DMBBF+/8s+QW+gBV71kioQNOmzqNpQiFt3onzqJ3L2G2A0iJUNmwY6WTuWJrrkZ1kNJ/PwZgFy7IRxzGyLDubNE1RFAWCIMBovV5DSqkZou979TyoB07FsJ4kCUZhGOpisfAxHk8wmzE47hIu1RPDhGla4LyF2k+InjJB/Z8RcmcYx2S42US6CDwGZt7DtR7hu1MsXQPm5A4ue0DXJNRZohcFevkFkUPS+vuE6txUiMZHU5io8xl4ZoCnBupsqnNTMrSlpekqG21laZTuKIvm+diwTB3kEZmUDupCNTlkRDq3CEabzDVKqzWeMU1DWrQvx4bblqOtS3RthbquUFUF2oar2ffIPaR7caCl3H4YJsnO8OrWxsX1Ey5vDIQp17c8HPZPcXDLw4R+XMF+LbBY05RbiXPipOF379i/4R8Yep6HKIp0of4YvyHPc/reOVarFd4AhmyNTDDm+BMAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='60ba97ad' title='' src='/static/f1396e60734e9dddb0c6a43f0652fc07/ca1dc/60ba97ad.png' srcset='/static/f1396e60734e9dddb0c6a43f0652fc07/e7570/60ba97ad.png 170w,\n/static/f1396e60734e9dddb0c6a43f0652fc07/f46e7/60ba97ad.png 340w,\n/static/f1396e60734e9dddb0c6a43f0652fc07/ca1dc/60ba97ad.png 680w,\n/static/f1396e60734e9dddb0c6a43f0652fc07/0d97d/60ba97ad.png 1011w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>이렇게 Jenkins를 설치할 수 있다.</p>\n<h2>Reference</h2>\n<p><a href=\"https://www.jenkins.io/doc/book/installing/linux/\">https://www.jenkins.io/doc/book/installing/linux/</a></p>","frontmatter":{"title":"젠킨스 설치하기","date":"July 16, 2023","update":"July 16, 2023","tags":["CI/CD","젠킨스","설정"],"series":null},"fields":{"slug":"/jenkins-setting/","readingTime":{"minutes":3.7}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}},"next":{"fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},"pageContext":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","series":null,"previousPostId":"4a9246fb-171b-5973-88fc-864034e78afd","nextPostId":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/jenkins-setting/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다. 정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.\n이에 Jenkins를 설치하고 환경설정을 빌드서버 환경을 구축한 일련의 과정을 기록해두려고한다. 작업 환경 : Ubuntu 22.04.2 LTS 공식문서 살펴보기 젠킨스 공…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p>피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다.</p>\n<p>정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.\n이에 Jenkins를 설치하고 환경설정을 빌드서버 환경을 구축한 일련의 과정을 기록해두려고한다.</p>\n<blockquote>\n<p>작업 환경 : Ubuntu 22.04.2 LTS</p>\n</blockquote>\n<h2>공식문서 살펴보기</h2>\n<p><a href=\"https://www.jenkins.io/doc/book/installing/linux/\">젠킨스 공식문서</a>를 확인하면 설치 방법이 친절하게 나와있다.</p>\n<p>아무것도 없는 EC2 환경에서 Jenkins를 설치하고 구동하는 과정을 따라가보자.</p>\n<h2>(Optional) Swap 메모리 설정하기</h2>\n<p>프리티어환경에서 Jenkins를 사용하면 자칫 메모리가 부족한 상황이 발생할 수도 있다.\n2GB의 메모리는 젠킨스와 빌드를 모두 견디기 어려울 수도 있다.</p>\n<p>다음 명령어를 통해 서버에 Swap 메모리를 할당하자.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">sudo</span> fallocate <span class=\"token parameter variable\">-l</span> 2G /swapfile\n<span class=\"token function\">sudo</span> <span class=\"token function\">chmod</span> <span class=\"token number\">600</span> /swapfile\n<span class=\"token function\">sudo</span> <span class=\"token function\">mkswap</span> /swapfile\n<span class=\"token function\">sudo</span> <span class=\"token function\">swapon</span> /swapfile\n\n<span class=\"token function\">free</span> <span class=\"token parameter variable\">-h</span> <span class=\"token comment\"># 확인명령어</span></code></pre></div>\n<blockquote>\n<p><a href=\"https://velog.io/@junho5336/Swap-%EB%A9%94%EB%AA%A8%EB%A6%AC-%ED%95%A0%EB%8B%B9%ED%95%98%EA%B8%B0\">Swap 메모리 할당하기</a>를 참고</p>\n</blockquote>\n<h2>java 설치하기</h2>\n<blockquote>\n<p>설치 방법은 <a href=\"https://www.jenkins.io/doc/book/installing/linux/\">공식문서</a>를 확인하면서 진행하고있습니다.</p>\n</blockquote>\n<p>현재 사용할 jenkins의 버전은 java 17을 사용한다.\njava 17버전을 설치하자</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> update\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> <span class=\"token function\">install</span> openjdk-17-jre\n<span class=\"token function\">java</span> <span class=\"token parameter variable\">-version</span></code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/d0e1b4065d85f4f0f9e8e290576873b8/49bb6/93d56503.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 10.588235294117647%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAdElEQVR42mXNwQ6CMBRE0RIIW16j1LRpBfqoYP3/77tqF25cnGQyixnjHo75OXPdLshdkEW4RU/elJQSIQTGcWQYhj9932OM+em6DlOPF/WonOVkTSu6KJoz+74TY8Q510ZVlfzpSyktf8+891hrEZFmmibeU5cx4lWIWHEAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='93d56503' title='' src='/static/d0e1b4065d85f4f0f9e8e290576873b8/ca1dc/93d56503.png' srcset='/static/d0e1b4065d85f4f0f9e8e290576873b8/e7570/93d56503.png 170w,\n/static/d0e1b4065d85f4f0f9e8e290576873b8/f46e7/93d56503.png 340w,\n/static/d0e1b4065d85f4f0f9e8e290576873b8/ca1dc/93d56503.png 680w,\n/static/d0e1b4065d85f4f0f9e8e290576873b8/49bb6/93d56503.png 775w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h2>jenkins 설치하기</h2>\n<p>다음 명령어를 수행하여 jenkins를 설치한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">curl</span> <span class=\"token parameter variable\">-fsSL</span> https://pkg.jenkins.io/debian-stable/jenkins.io-2023.key <span class=\"token operator\">|</span> <span class=\"token function\">sudo</span> <span class=\"token function\">tee</span> <span class=\"token punctuation\">\\</span>\n  /usr/share/keyrings/jenkins-keyring.asc <span class=\"token operator\">></span> /dev/null\n<span class=\"token builtin class-name\">echo</span> deb <span class=\"token punctuation\">[</span>signed-by<span class=\"token operator\">=</span>/usr/share/keyrings/jenkins-keyring.asc<span class=\"token punctuation\">]</span> <span class=\"token punctuation\">\\</span>\n  https://pkg.jenkins.io/debian-stable binary/ <span class=\"token operator\">|</span> <span class=\"token function\">sudo</span> <span class=\"token function\">tee</span> <span class=\"token punctuation\">\\</span>\n  /etc/apt/sources.list.d/jenkins.list <span class=\"token operator\">></span> /dev/null\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> update\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt-get</span> <span class=\"token function\">install</span> jenkins\n\n<span class=\"token function\">sudo</span> systemctl status jenkins <span class=\"token comment\"># 실행상태 확인</span></code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/377aacf35597393970adf4d2f550dffe/fcbeb/99b45540.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 16.470588235294116%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAf0lEQVR42m2OywrFIAxEleIjahdy1YIbBW3//w/n1oC7Lg5DEmYywmeHOipiiyi9oI2OOSfmPTHGQK3vLUbGOYcQAqy1EEJ8Q5bw3M8b1JBqAp0EpRRzHAer1ppDpJRs2vrJMqWc0XvHVS6kX+I2q4kxhtmhRMTs/Z699/xw8Qe0b0Pn0GyF9wAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='99b45540' title='' src='/static/377aacf35597393970adf4d2f550dffe/ca1dc/99b45540.png' srcset='/static/377aacf35597393970adf4d2f550dffe/e7570/99b45540.png 170w,\n/static/377aacf35597393970adf4d2f550dffe/f46e7/99b45540.png 340w,\n/static/377aacf35597393970adf4d2f550dffe/ca1dc/99b45540.png 680w,\n/static/377aacf35597393970adf4d2f550dffe/02d09/99b45540.png 1020w,\n/static/377aacf35597393970adf4d2f550dffe/fcbeb/99b45540.png 1206w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h2>jenkins 접속하기 &#x26; 초기설정</h2>\n<blockquote>\n<p>jenkins는 기본적으로 8080포트를 사용한다.\njenkins의 포트를 변경하는 방법에 대해서는 본 글에서 다루지는 않는다.</p>\n</blockquote>\n<p><code class=\"language-text\">{인스턴스-public-ip}:8080</code> 으로 접속하면 다음과 같은 화면을 볼 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/1a9e2cb6709d5c991de4fa4d0d15199d/f5df9/4492665d.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 76.47058823529412%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABjklEQVR42qVT7VLCMBDk6X0Xx1fwAQT8Ib+AoQ7IYBXblCYhTT9S1rtAwA9AGDOzXELJdm9v6QyHI8xmL5hOZ5BSoSgKrNdrFKbY77XWZ6HU9t5isUCHP3jxRYYhorKsfOVz0zT4a202G1+TJDkQTiYRug99DJ4GGI/G6HV7dO5hPufnGzjn0Lath3Nc3Zd9eyCM49gfDEleKY2VLiDUGqkyyKgqailnUFt5npNq49Vzi1wZoYtvhKU20EJCZtojF+SNIG9E7mGlRlVV+/ZOthwIraZBrCRsHqB8NRkRMmhgZVl6cPu8WBnvjxKmWYa35RLvHwm0MWjIl5ou1K7xtSKUpLCqazREYq3dDdF45b8Im8b5t50FD4FgSeXWR+vB0fGi0vRAeMybUxHZDoSGs4sa55An/S9CVhVaZl9/tXwJIf+GL0spPVEYyNGhXELIJJzFoOhsbNiD8LZT4JiwXyHI4fuj/5RrPPy5bO3wnBQYTV/RiaLIeyKEQEZZvAZCZFAyx3gW4+auj9v7R3wC/VKL2SHZQ34AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='4492665d' title='' src='/static/1a9e2cb6709d5c991de4fa4d0d15199d/ca1dc/4492665d.png' srcset='/static/1a9e2cb6709d5c991de4fa4d0d15199d/e7570/4492665d.png 170w,\n/static/1a9e2cb6709d5c991de4fa4d0d15199d/f46e7/4492665d.png 340w,\n/static/1a9e2cb6709d5c991de4fa4d0d15199d/ca1dc/4492665d.png 680w,\n/static/1a9e2cb6709d5c991de4fa4d0d15199d/f5df9/4492665d.png 1019w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>다시 EC2 화면으로 넘어와서 다음 명령어를 수행하여 <code class=\"language-text\">initialAdminPassword</code>를 알 수 있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">sudo</span> <span class=\"token function\">cat</span> /var/lib/jenkins/secrets/initialAdminPassword</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/1bfdaa00e299a618f4e0d6f9a35b40f4/e42f2/f55b94c9.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 5.294117647058823%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAARElEQVR42h2KOwrAMAzFegN/Y5OlS4OTqfe/3WvxIBBCF92EfBN5flbAlmE+E7sOqgrMDCKCqsLdYWbtItJ9jNFERL8f97MZQConaOsAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='f55b94c9' title='' src='/static/1bfdaa00e299a618f4e0d6f9a35b40f4/ca1dc/f55b94c9.png' srcset='/static/1bfdaa00e299a618f4e0d6f9a35b40f4/e7570/f55b94c9.png 170w,\n/static/1bfdaa00e299a618f4e0d6f9a35b40f4/f46e7/f55b94c9.png 340w,\n/static/1bfdaa00e299a618f4e0d6f9a35b40f4/ca1dc/f55b94c9.png 680w,\n/static/1bfdaa00e299a618f4e0d6f9a35b40f4/e42f2/f55b94c9.png 734w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>확인한 암호를 화면에 입력한 뒤 Continue 버튼을 눌러 계속 진행한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/34da90f6397f6f2e2761f50b1c127250/583a7/28fea7e9.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 76.47058823529412%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABpElEQVR42p1T7U7jMBDsq9/LIPEM9x+O4yh/oZxU2gM1JDTxR+wkTtthZ1FaQG2BW2lkx94dz35kNJlMMJ3eYzaboa5rNE2DEAJijLqPMej5MXjv1XexWGCUZRk2m41cBL0IIaJtOwQh9L5G3/f4zBhPK8tyIATuJn9x8es3rsfXuL25xdWfMc7PLjCf/VNnEm/Wa6w/YLVa6bolzPNcP6jIOI/SR5QuYCmoBFZUK5yDMVYzYTmGsnBNqd8RFkWhH42TWiwNzFKCSw8jcKVDlLMgaIxD6tJWzcGU3xLGyqKpGMzVKkksjZJG2XddJ8VvNc2hDHxgL2HxvMQie0KWF6ilMUmCmErqdyAh0csdu8oOM+VOlNOq6g1hK46tOLVtq13m61TyDmyCoBEf1i9yrAScBqqsqmpHOMj+zJji0AyCKp00jA/+FyH9os6o35Iy/deUv0lIH5aEikiksylne5vyFUIqs9Yq6cGxGQZ7aP8xpJRUHdeBiHj3p3y3hvss9Ws8mg7Thxyj+Xyu9WAqfP0YPvpYK4Mfakwfc/w4vcTJzzFeAINXjf7ZXI+HAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='28fea7e9' title='' src='/static/34da90f6397f6f2e2761f50b1c127250/ca1dc/28fea7e9.png' srcset='/static/34da90f6397f6f2e2761f50b1c127250/e7570/28fea7e9.png 170w,\n/static/34da90f6397f6f2e2761f50b1c127250/f46e7/28fea7e9.png 340w,\n/static/34da90f6397f6f2e2761f50b1c127250/ca1dc/28fea7e9.png 680w,\n/static/34da90f6397f6f2e2761f50b1c127250/583a7/28fea7e9.png 1013w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>초기 플러그인 세팅 화면이 나오는데 <code class=\"language-text\">Install suggested plugins</code> 를 눌러 초기 플러그인 설정을 진행한다. </p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6be6be95dbd2b5d099883b8b0c45d285/d8785/c78a9517.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 75.88235294117648%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABzUlEQVR42p1UiW6bQBT0/39SPyCRq9RxrMolji9ALAHMfS6Hp++9GIvUaatkpdGwCzs771hmhmFgt9sLwjBEksSI488hiiLal2C73WLmeR66rkdZlsQd2rYT7vte0Lat8L/G+XwWdhwHM9/3MQwDDGOD+fwB9/ffhde/nrFYLHF3Nyd+gtatbORvmafgtatgEAQyqasKNbmsqzdU9JxnGYqiEPd13VxQ01p5WatvHZ5OJ5mouMYhKGCFJfZ+DjdtEBQdorIT0TTNKE8p8ryQFHFqRmcfCq7sGN9WeyytAD9VBJVrRPqM16zDZrPBer2G67pSAMmt5Lu9hn0VDEmQp7tTiWNUwkpqqEzDJnaIraiSCmaX8PM8J7eprDHzGgvfCK6cGD8sHw+mj4Ud0HOAlRvjxctg2zZMy3zj4xGKNopbahk+iIUlbUpNQnYSLFWMJ5Vc8UiHPLsJAuoELh7D8z0Se4WjXBHi4rDojWDV9ig09eMEPNfdIDnrLn3JPZpluYTM4XPIY7XfFWVM7P+G1locVdRmfMBNUUbBgV+w8B+YDg6Pw2ya5u835TMO2R0Ljldxelu+HPJH370TNE2L/hjJtWJfAReG3R8OB/wGHbWCEuKtdfAAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='c78a9517' title='' src='/static/6be6be95dbd2b5d099883b8b0c45d285/ca1dc/c78a9517.png' srcset='/static/6be6be95dbd2b5d099883b8b0c45d285/e7570/c78a9517.png 170w,\n/static/6be6be95dbd2b5d099883b8b0c45d285/f46e7/c78a9517.png 340w,\n/static/6be6be95dbd2b5d099883b8b0c45d285/ca1dc/c78a9517.png 680w,\n/static/6be6be95dbd2b5d099883b8b0c45d285/02d09/c78a9517.png 1020w,\n/static/6be6be95dbd2b5d099883b8b0c45d285/d8785/c78a9517.png 1021w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/c5ec863604bfad00adc41e0bcd9ca6fd/9b7e9/82bae04f.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 76.47058823529412%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABwElEQVR42pWUWW+bQBSF+f8/qw9J5FRK89ImYrFZhp3BgPGKfTrnIlBsJY2LdDQznjvfXWXL85ZYLldYrXx0XYfNZnOlvu+/Fe12ux2UUrDW6zWGYcD5fMblcpk1fdzz7vb+VvyKohiBF2PcmLWsKjRNC61rUV3X2G638mAg8Asonc3ArmtxND/8eHjGYvFT9Pi4wNMT9YwgCMV4yuIz8W4G9ib/wUTc9Kc5RWYwpXEbybfAV+cVbuogrH2oWiHLMoRhhNY0iCn7fiDF1rqSc5pmxiY3pWnkzJVNORwOY1N+O3/w5r3DizwkZYI4SQXIGpZliSiKkOe5OCpLQtfSUUIIY40pAuM4hmXbDmKVoMgL6ErLg6Io59VxHDNSK+MkFCeVaVxl7DguhOz3e3FwOp2QJAks13WR5hmKskClR2OlYolAa42Xl19wXU+M6YSRMu227QT2OTBNJS0WlaOTm2jbtpVogiAQCMUaUSwDH38BdCR31o2GSkXzo/F8vb8D6MqGUGp69PF8e/dPoG3bYsCi3yuWgWCCqKsuE8bij927TxwnziCjI4wNPB6P0gtrmjNCOVf/I/4PUISzib7v4y8mPXFDELhsegAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='82bae04f' title='' src='/static/c5ec863604bfad00adc41e0bcd9ca6fd/ca1dc/82bae04f.png' srcset='/static/c5ec863604bfad00adc41e0bcd9ca6fd/e7570/82bae04f.png 170w,\n/static/c5ec863604bfad00adc41e0bcd9ca6fd/f46e7/82bae04f.png 340w,\n/static/c5ec863604bfad00adc41e0bcd9ca6fd/ca1dc/82bae04f.png 680w,\n/static/c5ec863604bfad00adc41e0bcd9ca6fd/9b7e9/82bae04f.png 1009w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>초기 Admin 유저를 생성할 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/407217b075d5dc4ab36ca58e5b6895fb/bb4c7/a8f14e43.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 75.88235294117648%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABV0lEQVR42pWT3W6CMBiGufOd7VJ2suwSlp2pi2Yao6A7QMlQERVULD+l9F1b0TQRRL/kSf/fvv3aGpZlYT53YNszBEGAKIpwPB5VqSP76jgcDiCEwHEcGK7rQkaSpMiyDHmeI00zUadlmYHSXLUppeAcN8HLTs/zpOBCNZbLFTqdLnq9HwyHI/T7Q4zHFlqtDkYjE6Y5Qbv9rTbWRfT6er2GsVicBU8nIiYnKMSgnFAUxQ1MwMvxRkF5VLlACrJyMdOEdFFJzthVqNqhSKoUrXJWR4NDBsYeF2NNDqPopK6+Ln9PO6TiuFTsqufvHo05jOPkeoxHue9QPFq566PQJoeExCqHlwnPOCyKy0/RBOWjJnF8zmUDeVlyLi+GVzvkVZ+0JniJjH1M8buKMNummNgujOl0Ct/3lXoYhnfZCzbbAH+eL9hgs9vha2Dj5a2N1/cuPj57+AeZf421Ajk8yQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='a8f14e43' title='' src='/static/407217b075d5dc4ab36ca58e5b6895fb/ca1dc/a8f14e43.png' srcset='/static/407217b075d5dc4ab36ca58e5b6895fb/e7570/a8f14e43.png 170w,\n/static/407217b075d5dc4ab36ca58e5b6895fb/f46e7/a8f14e43.png 340w,\n/static/407217b075d5dc4ab36ca58e5b6895fb/ca1dc/a8f14e43.png 680w,\n/static/407217b075d5dc4ab36ca58e5b6895fb/02d09/a8f14e43.png 1020w,\n/static/407217b075d5dc4ab36ca58e5b6895fb/bb4c7/a8f14e43.png 1023w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>jenkins의 기본 URL을 설정할 수 있다. 기본값을 권장한다. </p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/4035960bbafbca7af5331b1611fac0f0/42a19/84efb2c8.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 75.88235294117648%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNklEQVR42u2Uy26DMBBF8/Vd9kMqddEv6CpRUJoqUtpUICIBKY+WDYSnbcytx0CiEDZRN13U0tHg8ej6zkh4ZpomXNeD47hI0xRFUSDPcx0Hzvtcf4/JsgxVVSkNB7MgCEGrLEtFBca4goFzpnNUyDnXZxSnVtu2Ovq+j1kYdoKed8BiYWC93mC7fYdl2XhZvarcUu/n8yVse38hMBYMguAsSK7yvDgdUiyVu0y1lB6ppRpSSjRE03RRIQi1v3LYtVVqYaKuaz3TJCESHPs5VSqvYw9dOinIWH0a/iBKCMH1ZYKLbrYDKsf7GnJ+1bIQQrsiBofkYMiNz6iehIiLGUZRNDnoW9a/4O8FpRz+lL/okAmJ3WeKXVjgzVKPA702pEzEcXwT0dc3PvYH3D8auHsw8PS8wg++b41+WLe4nQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='84efb2c8' title='' src='/static/4035960bbafbca7af5331b1611fac0f0/ca1dc/84efb2c8.png' srcset='/static/4035960bbafbca7af5331b1611fac0f0/e7570/84efb2c8.png 170w,\n/static/4035960bbafbca7af5331b1611fac0f0/f46e7/84efb2c8.png 340w,\n/static/4035960bbafbca7af5331b1611fac0f0/ca1dc/84efb2c8.png 680w,\n/static/4035960bbafbca7af5331b1611fac0f0/02d09/84efb2c8.png 1020w,\n/static/4035960bbafbca7af5331b1611fac0f0/42a19/84efb2c8.png 1024w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>여기까지 했으면 초기 설정은 완료했다고 볼 수 있다.</p>\n<p>만약 위 과정에서 admin 유저를 생성하지 않았다면 <code class=\"language-text\">admin</code> 이라는 기본 유저로 로그인 할 수 있다고 설명하고 있다.\n비밀번호는 <code class=\"language-text\">initialAdminPassword</code> 과정에서 입력했던 값으로 설정되어있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/f1396e60734e9dddb0c6a43f0652fc07/0d97d/60ba97ad.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 77.05882352941177%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABXklEQVR42u2Uy07DMBBF+/8s+QW+gBV71kioQNOmzqNpQiFt3onzqJ3L2G2A0iJUNmwY6WTuWJrrkZ1kNJ/PwZgFy7IRxzGyLDubNE1RFAWCIMBovV5DSqkZou979TyoB07FsJ4kCUZhGOpisfAxHk8wmzE47hIu1RPDhGla4LyF2k+InjJB/Z8RcmcYx2S42US6CDwGZt7DtR7hu1MsXQPm5A4ue0DXJNRZohcFevkFkUPS+vuE6txUiMZHU5io8xl4ZoCnBupsqnNTMrSlpekqG21laZTuKIvm+diwTB3kEZmUDupCNTlkRDq3CEabzDVKqzWeMU1DWrQvx4bblqOtS3RthbquUFUF2oar2ffIPaR7caCl3H4YJsnO8OrWxsX1Ey5vDIQp17c8HPZPcXDLw4R+XMF+LbBY05RbiXPipOF379i/4R8Yep6HKIp0of4YvyHPc/reOVarFd4AhmyNTDDm+BMAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='60ba97ad' title='' src='/static/f1396e60734e9dddb0c6a43f0652fc07/ca1dc/60ba97ad.png' srcset='/static/f1396e60734e9dddb0c6a43f0652fc07/e7570/60ba97ad.png 170w,\n/static/f1396e60734e9dddb0c6a43f0652fc07/f46e7/60ba97ad.png 340w,\n/static/f1396e60734e9dddb0c6a43f0652fc07/ca1dc/60ba97ad.png 680w,\n/static/f1396e60734e9dddb0c6a43f0652fc07/0d97d/60ba97ad.png 1011w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>이렇게 Jenkins를 설치할 수 있다.</p>\n<h2>Reference</h2>\n<p><a href=\"https://www.jenkins.io/doc/book/installing/linux/\">https://www.jenkins.io/doc/book/installing/linux/</a></p>","frontmatter":{"title":"젠킨스 설치하기","date":"July 16, 2023","update":"July 16, 2023","tags":["CI/CD","젠킨스","설정"],"series":null},"fields":{"slug":"/jenkins-setting/","readingTime":{"minutes":3.7}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}},"next":{"fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},"pageContext":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","series":null,"previousPostId":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","nextPostId":"a78e224b-b711-5071-8e90-013d6f4bebc3"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/jpa-notnull-nullable/page-data.json b/page-data/jpa-notnull-nullable/page-data.json
index 6c852bb1..b59e2121 100644
--- a/page-data/jpa-notnull-nullable/page-data.json
+++ b/page-data/jpa-notnull-nullable/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/jpa-notnull-nullable/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 서론 JPA를 이용해 엔티티를 설계하다가  어노테이션과 @Column의 의 차이점이 궁금해져 알아보았습니다. nullable = false ?? JPA는 엔티티를 매핑하고 설계하면 자동으로 DDL을 생성해 주는 기능을 제공합니다. \n또한 엔티티의 각 컬럼들에 대해 NOT NULL, UNIQUE 등과 …","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Kim0914\">그레이</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p>JPA를 이용해 엔티티를 설계하다가 <code class=\"language-text\">@NotNull</code> 어노테이션과 @Column의 <code class=\"language-text\">nullable=false</code>의 차이점이 궁금해져 알아보았습니다.</p>\n<h2>nullable = false ??</h2>\n<p>JPA는 엔티티를 매핑하고 설계하면 자동으로 DDL을 생성해 주는 기능을 제공합니다.\n또한 엔티티의 각 컬럼들에 대해 NOT NULL, UNIQUE 등과 같은 제약 조건이 포함되는 경우에도 자동으로 DDL을 생성해 줍니다.</p>\n<p>엔티티를 설계할 때 일반적으로 @Column 어노테이션을 활용합니다.\n@Column 어노테이션에서 해당 컬럼의 NOT NULL 제약을 설정할 수 있는데 <code class=\"language-text\">@Column(name = \"email\", nullable = false)</code>와 같이 nullable=false 설정을 걸어주면, 해당 제약 조건을 명시할 수 있습니다.\n따로 명시하지 않으면 nullable의 기본 값은 true입니다.</p>\n<p>간단한 User 엔티티를 생성해 보겠습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@Entity</span>\n<span class=\"token annotation punctuation\">@Table</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"user\"</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">User</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">AuditingEntity</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token annotation punctuation\">@Id</span>\n    <span class=\"token annotation punctuation\">@GeneratedValue</span><span class=\"token punctuation\">(</span>strategy <span class=\"token operator\">=</span> <span class=\"token class-name\">GenerationType</span><span class=\"token punctuation\">.</span><span class=\"token constant\">IDENTITY</span><span class=\"token punctuation\">)</span>\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"id\"</span><span class=\"token punctuation\">,</span> updatable <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">Long</span> id<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"user_id\"</span><span class=\"token punctuation\">,</span> length <span class=\"token operator\">=</span> <span class=\"token number\">20</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">String</span> userId<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"password\"</span><span class=\"token punctuation\">,</span> length <span class=\"token operator\">=</span> <span class=\"token number\">20</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">String</span> password<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"name\"</span><span class=\"token punctuation\">,</span> length <span class=\"token operator\">=</span> <span class=\"token number\">20</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">String</span> name<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"email\"</span><span class=\"token punctuation\">,</span> nullable <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span> length <span class=\"token operator\">=</span> <span class=\"token number\">50</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">String</span> email<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>User 테이블의 email 필드는 반드시 값이 존재해야 합니다.\n즉, <strong>NOT NULL 제약 조건이 필요</strong>합니다.\n여기서 JPA가 자동으로 생성하는 DDL을 확인해 보겠습니다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 511px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/07ba5d1c8c397f8be6371368e94590bd/40f84/img.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 56.470588235294116%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABL0lEQVR42pVT7ZKCMBDzNU4RCogglkK/wHv/B9trojA3o+OdP5Zuoc0m2WV3bi9iRiv9VUt9auRrn8khy2V/OHLNjsVHsVsvVXUjqqy5ltWJcczVBn6PnPt3BQlYqEom68U6Lz7MMk6WeXe5bgWapk0KzsxPKW/OHdcnQDxQLS9KGcwk3kcxabUuSIiLOOyTJSEVsvZe5NLr9G6iTVDxBIjAB4DMyzeBez2k/CZxXh4eD0mFoxr4jACRlwwhGwxxGdIheZwcwZ0PYri30nY9z60EXjaFSVbwYIizaD0SBNJ9iGyUUjX9Wpv0tsu/GboHCPyZEkNYAKZoxCt5fwICSA+jXLWhdEScb2T535ncAAtVEgAMBzOyEWCIsflosPEAO3r1GGxVVuwm4pB99qf8AHc/NmNete98AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img' title='' src='/static/07ba5d1c8c397f8be6371368e94590bd/40f84/img.png' srcset='/static/07ba5d1c8c397f8be6371368e94590bd/e7570/img.png 170w,\n/static/07ba5d1c8c397f8be6371368e94590bd/f46e7/img.png 340w,\n/static/07ba5d1c8c397f8be6371368e94590bd/40f84/img.png 511w' sizes='(max-width: 511px) 100vw, 511px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">email varchar(50) not null</code> 과 같이 not null 제약 조건이 자동으로 명시됨을 알 수 있습니다.</p>\n<p>하지만 DDL은 애플리케이션 내부가 아닌 데이터베이스 컬럼의 속성에 대한 조건이므로, 스프링(자바) 애플리케이션 내 User 엔티티의 email 필드는 null이 허용됩니다.</p>\n<p>테스트 코드로 확인해 보겠습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@TestConstructor</span><span class=\"token punctuation\">(</span>autowireMode <span class=\"token operator\">=</span> <span class=\"token class-name\">TestConstructor<span class=\"token punctuation\">.</span>AutowireMode</span><span class=\"token punctuation\">.</span><span class=\"token constant\">ALL</span><span class=\"token punctuation\">)</span>\n<span class=\"token annotation punctuation\">@DataJpaTest</span>\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">UserRepositoryTest</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">final</span> <span class=\"token class-name\">UserRepository</span> userRepository<span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">public</span> <span class=\"token class-name\">UserRepositoryTest</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">UserRepository</span> userRepository<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>userRepository <span class=\"token operator\">=</span> userRepository<span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token annotation punctuation\">@Test</span>\n    <span class=\"token keyword\">void</span> <span class=\"token function\">save</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">User</span> user <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">User</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"gray1234\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"password\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"gray\"</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n        <span class=\"token class-name\">User</span> savedUser <span class=\"token operator\">=</span> userRepository<span class=\"token punctuation\">.</span><span class=\"token function\">save</span><span class=\"token punctuation\">(</span>user<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n        <span class=\"token function\">assertThat</span><span class=\"token punctuation\">(</span>savedUser<span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">isEqualTo</span><span class=\"token punctuation\">(</span>user<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/71aee32c567a1f0f3cd007720fe0bc0e/bbbf7/img2.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 40%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABN0lEQVR42m2Sa3aCMBBGWUerQEJCEkEFfFv1dAHd/3amdyhtrfXHPROScPNNIOuHjXT9IDEmqUOQNi2kSY2k1DK3YC5JmNDnoNzN1YE98Zdst73J5f1DYn+T1F/Fuyg7V8uFzXsX5OC/OMLJR9nXUToky/HQRjzj0joxlZe8MJL52EpYrCSklXgI1suGxX5iGKsbawdrXl5TGw6NVT3WMMmKwkpWj7GBlr22zQtbNmiiNxId4UCqNXuStonE5aUYKOaFOEQVvM5zKBDGv3dgTDUmPCNR4QHJEBtZ0ppBlpPiZZb/CHSszBjPHoUeLEJNeNa7ox1NODDfcoBjrSytzEmnfEvueS5EdCXZDS6IdiTs+Ooth1SkNNyz5WqeSf+1XCJcTRe/pDagNamEgyzCijX9ZRzPj8JP4iTnrJ0znIQAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img2' title='' src='/static/71aee32c567a1f0f3cd007720fe0bc0e/ca1dc/img2.png' srcset='/static/71aee32c567a1f0f3cd007720fe0bc0e/e7570/img2.png 170w,\n/static/71aee32c567a1f0f3cd007720fe0bc0e/f46e7/img2.png 340w,\n/static/71aee32c567a1f0f3cd007720fe0bc0e/ca1dc/img2.png 680w,\n/static/71aee32c567a1f0f3cd007720fe0bc0e/02d09/img2.png 1020w,\n/static/71aee32c567a1f0f3cd007720fe0bc0e/bbbf7/img2.png 1280w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>테스트가 실패함을 확인할 수 있습니다.</p>\n<p>하지만 여기서 주의 깊게 살펴볼 점이 있습니다. 예외 메시지를 따라 올라가 보면 insert 쿼리가 한 번 발생한 것을 알 수 있습니다. 또한 발생한 예외 타입이 JdbcSQL.... Exception입니다.</p>\n<p>즉 애플리케이션 내부가 아닌, 데이터베이스 내에서 예외가 발생했다는 것입니다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6eb86d0d25b3bd233da6c29c69b111b7/78ab2/img3.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 36.47058823529412%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAABFUlEQVR42m1RV1LDMBTUOYi71WUV24GEMtz/Vo99shNmGD5W+3qTWGOktGSyfiEXYuVZalLGkXOhMtssZMcMPG2Atr7CwL+kQkJpWx0vl5aapqu4/EHb9r/oBmpOZr05wflSGRKcwAJjmlWdjnmcZJWZu36sCY8G/zV9FuQnYlR9rshr9cNUi2pjEYT1sQUX12ClDY3jDP1oLuXh56asi7AkSmWjEMHrTmW7HsVxz1xW2DN4qzFlv9Y7SfYjb91fyYP149bIERZVPaZ0J1tAYzq2s8zsTg6YxLOOMwRwgh45F/GMhMLCDjN9wPgN57t2tAJvxtMNP3cHrsANq38i5ktZumOSAltGTEZslmiGE7l+ogXn+AEewspd1jBwPwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img3' title='' src='/static/6eb86d0d25b3bd233da6c29c69b111b7/ca1dc/img3.png' srcset='/static/6eb86d0d25b3bd233da6c29c69b111b7/e7570/img3.png 170w,\n/static/6eb86d0d25b3bd233da6c29c69b111b7/f46e7/img3.png 340w,\n/static/6eb86d0d25b3bd233da6c29c69b111b7/ca1dc/img3.png 680w,\n/static/6eb86d0d25b3bd233da6c29c69b111b7/02d09/img3.png 1020w,\n/static/6eb86d0d25b3bd233da6c29c69b111b7/78ab2/img3.png 1201w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>애플리케이션 내에서는 email 컬럼의 null을 체크하지 못하고, 데이터베이스에 쿼리가 실행될 때 예외가 발생한다는 것입니다. 또한 insert 쿼리가 데이베이스에서 실행되므로 Auto Increment인 PK가 증가합니다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/8328bd74000f76b69473afbebb4ddfec/ef64d/img4.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 39.411764705882355%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA4ElEQVR42o1SWxKDIAzkGq2KD0Twjdr2/jdLs/HRmY7t+LFsDMsSElXbDZQXJd2jhKJYnyJO0stQhbHkfC2mhmOg2GBKJ5xmxc8Lvr+VKauPIcfgRGeUpjllbAQzzTFy34ABeN+HuRrGQB0/ewwTLY8X9UMQ46btJdf1I4VpoYHz8/ygieFcLWfCNMseNNDjnFqWpyR83VLLSXDddCs4hhBwvjnYsqGt/KEr7doasMKS5YZu91gGsyOKNLP+O6yzniqYoSoYV87LzSgdsJUThubqtFWzlY3GYiDnA7j+27wB3onf0dqVQqkAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img4' title='' src='/static/8328bd74000f76b69473afbebb4ddfec/ca1dc/img4.png' srcset='/static/8328bd74000f76b69473afbebb4ddfec/e7570/img4.png 170w,\n/static/8328bd74000f76b69473afbebb4ddfec/f46e7/img4.png 340w,\n/static/8328bd74000f76b69473afbebb4ddfec/ca1dc/img4.png 680w,\n/static/8328bd74000f76b69473afbebb4ddfec/02d09/img4.png 1020w,\n/static/8328bd74000f76b69473afbebb4ddfec/ef64d/img4.png 1165w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>첫 번째 유저를 저장할 때는 email 값을 null로 할당한 후 try - catch를 이용해 예외를 삼키고, 두 번째 유저는 정상적으로 저장한 후 PK를 출력해 봤습니다. 예상한 것처럼, 두 번째 유저의 PK는 2 임을 확인할 수 있습니다.</p>\n<p><strong>그렇다면, 애플리케이션 내 엔티티에서는 null을 어떻게 막을 수 있을까요?</strong></p>\n<h2>@NotNull과 함께라면?</h2>\n<p><code class=\"language-text\">@NotNull</code>은 java validation에 속하며 <code class=\"language-text\">@Valid</code>를 이용한 요청을 처리하는 단계에서 예외를 잡을 수도 있고, bean validation을 통해 예외를 검증할 수도 있습니다.</p>\n<p>우리가 DTO와 같이 클래스의 필드를 검증하는 방법과 동일하게 엔티티의 필드도 검증할 수 있습니다. 당연히 같은 자바 객체이고 도메인이기 때문에 동일하게 적용할 수 있습니다.</p>\n<p>@Valid 어노테이션도 없이 어떻게?라고 생각할 수 있는데요, Hibernate는 엔티티에 적용된 Bean Validation 어노테이션 역시 DDL로 변환합니다.\n@NotNull은 nullable=false와 마찬가지로 DDL 상에서 해당 컬럼이 NOT NULL 제약조건을 가짐을 명시합니다.</p>\n<p>스프링 공식문서인 밸덩에서도 이를 명확히 언급하고 있습니다. <a href=\"https://www.baeldung.com/hibernate-notnull-vs-nullable\">밸덩 바로가기</a></p>\n<p>이전 User 테이블에 nullable=false를 제거한 후 @NotNull 어노테이션만 붙여준 후 생성되는 DDL을 살펴보겠습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@Entity</span>\n<span class=\"token annotation punctuation\">@Table</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"user\"</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">User</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">AuditingEntity</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token annotation punctuation\">@Id</span>\n    <span class=\"token annotation punctuation\">@GeneratedValue</span><span class=\"token punctuation\">(</span>strategy <span class=\"token operator\">=</span> <span class=\"token class-name\">GenerationType</span><span class=\"token punctuation\">.</span><span class=\"token constant\">IDENTITY</span><span class=\"token punctuation\">)</span>\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"id\"</span><span class=\"token punctuation\">,</span> updatable <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">Long</span> id<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"user_id\"</span><span class=\"token punctuation\">,</span> length <span class=\"token operator\">=</span> <span class=\"token number\">20</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">String</span> userId<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"password\"</span><span class=\"token punctuation\">,</span> length <span class=\"token operator\">=</span> <span class=\"token number\">20</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">String</span> password<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"name\"</span><span class=\"token punctuation\">,</span> length <span class=\"token operator\">=</span> <span class=\"token number\">20</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">String</span> name<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@NotNull</span>\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"email\"</span><span class=\"token punctuation\">,</span> length <span class=\"token operator\">=</span> <span class=\"token number\">50</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">String</span> email<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 581px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/e5b63e9522a57e7a8f2337fc96f1da3e/3f4f8/img5.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 50.588235294117645%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABAUlEQVR42pWSWXKDMBBEfQ1biH0Tu9ic3P9gHbWIKCg7KfMxSEOJp+4ebqWq0HYDVNXAkwGE59v1WNIPT3vpBy9nXN0ICKMESZojilPESWZXP4gs/OFJPISEEP7Wi63/F0jIoCfoccY4LeiHEU3bIc1yUwWKsrIrL1VVjbxQfwP5uJsb87zEsjwtmLWsX5hNr81+NBc1bW+BDn6M4QVIlZkBrs9vo06jbjpM82qBBFEtlTm773I+AXmoVLVRtlmlbQKphsNyA/ukdiA/ps1jlnznhnMZyKCZFe12/WCAs7G8IghjiA9hpwwJ1L/hM0fa5xCuqNuBVMHa/sFk76+AXP0AtkYYSSWb4eMAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img5' title='' src='/static/e5b63e9522a57e7a8f2337fc96f1da3e/3f4f8/img5.png' srcset='/static/e5b63e9522a57e7a8f2337fc96f1da3e/e7570/img5.png 170w,\n/static/e5b63e9522a57e7a8f2337fc96f1da3e/f46e7/img5.png 340w,\n/static/e5b63e9522a57e7a8f2337fc96f1da3e/3f4f8/img5.png 581w' sizes='(max-width: 581px) 100vw, 581px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>동일하게 <strong>email varchar(50) not null</strong> 과 같이 not null 제약 조건이 자동으로 명시됨을 알 수 있습니다.</p>\n<p>Hibernate에 의해 DDL이 자동으로 생성되는 기능을 끄고 싶다면 아래와 같이 설정하면 됩니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"properties\"><pre class=\"language-properties\"><code class=\"language-properties\"><span class=\"token key attr-name\">spring.jpa.properties.hibernate.validator.apply_to_ddl</span><span class=\"token punctuation\">=</span><span class=\"token value attr-value\">false</span></code></pre></div>\n<p>그렇다면 nullable = false와 어떤 차이가 있을까요?</p>\n<p>차이점을 알아보기 위해 이전에 User의 email 필드에 null을 세팅한 후 저장하는 테스트 코드를 실행해보겠습니다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/0def70e8fe415ea9627150a16d3d5057/78ab2/img6.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 45.294117647058826%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABbElEQVR42kWSV3LDMAxEdRGrS+yqLuPYntz/VMgDJU8+dlC5XIAstpRkjpPENIkPSRzoByODcTkejSUXs+/pU2hN+wK+9UGsC+L9EReGYLveZN8Bdlk3MdbT5GWal6OZwzHN+YBarfuTMF90+mlapOi6QYJHgQIl1niJWAeRyzeTs04Mqqyq1rwqhLTrR+l0mtFm6EWFbTrZ2142cAULCHUrHsS6E1c1YkGkz525gK/1gXx1qaUta2kulbTEhaE4QzKBFbVqQ9OL00NKAuxpj/i/9q3HL7pRCo/sV0zyAx7InttBYiY9mr6EmlOFmg9nXsUMOs1JHuDKO7zxAC8We4dQVd4oKK7g3psM9efRyaKX4ifsws/Y5zXvtUW5h6eomHuH5EPDh2X/YBVK+NIcJL/k3/hv7Mbh1UWZwcKDadwxaoXCVkeuIdwgfJ1ED15NsUP4xD6HI69+XgkEyfL6EI7YmlVUjF2WjZRw/QFVjAkSg0PKewAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img6' title='' src='/static/0def70e8fe415ea9627150a16d3d5057/ca1dc/img6.png' srcset='/static/0def70e8fe415ea9627150a16d3d5057/e7570/img6.png 170w,\n/static/0def70e8fe415ea9627150a16d3d5057/f46e7/img6.png 340w,\n/static/0def70e8fe415ea9627150a16d3d5057/ca1dc/img6.png 680w,\n/static/0def70e8fe415ea9627150a16d3d5057/02d09/img6.png 1020w,\n/static/0def70e8fe415ea9627150a16d3d5057/78ab2/img6.png 1201w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>다음과 같이 <code class=\"language-text\">javax.validation.ConstraintViolationException</code> 예외가 발생한다는 것을 알 수 있습니다. 또한 nullable=false 방식 때 발생하던 <strong>insert 쿼리가 발생하지 않는다</strong>는 점도 함께 볼 수 있습니다.</p>\n<p><code class=\"language-text\">javax.validation.ConstraintViolationException</code> 예외가 발생했다는 것은 스프링(자바) 애플리케이션 내에서 예외를 잡았다는 것입니다. 그러므로 데이터베이스에 쿼리가 실행될 일이 없습니다.</p>\n<p>좀 더 정확하게 말하면 객체가 생성되는 시점이 아닌 <strong>엔티티가 영속화되는 시점에 예외가 발생</strong>합니다.</p>\n<p>확실하게 알아보기 위해 동일한 User1, User2 저장 테스트를 실행해 보면 2번째로 저장한 유저의 PK가 1 임을 알 수 있습니다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/a5bab48c86a13529241f6a4e54ab9bf5/7e04b/img7.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 38.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABBUlEQVR42o1S2Y6DMBDLd2xLG0ISrhDu9v+/zB0PQntoV90Ha6w57YCZ1w15WpCGET42sM6jrALuZQX7C0rWBT/z7K9CDZOGjGXdMeQRKWU4WWZLh65PqJtOQc4+Rg7HutXerh8036cBvfBeuJmXDaMozHnCuj3Qdj2CKN2ET/MC1rf9if3xlPqu9UF6mZuXVWZn5HFSUJih1SMxq21epyoujXUDH6LyE6wxT363DsXNqmpGT8ttl1D5qKBdV3nhQd/psF9944yl+8wxhlhr5DFDC5frDR+XQnHyr/EdzlkrhwyV0ab3hzXKpkLGoDziWtzfgov5dxh+KQ7xPYj/DP+10MmeFw0j5HepOK5cAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img7' title='' src='/static/a5bab48c86a13529241f6a4e54ab9bf5/ca1dc/img7.png' srcset='/static/a5bab48c86a13529241f6a4e54ab9bf5/e7570/img7.png 170w,\n/static/a5bab48c86a13529241f6a4e54ab9bf5/f46e7/img7.png 340w,\n/static/a5bab48c86a13529241f6a4e54ab9bf5/ca1dc/img7.png 680w,\n/static/a5bab48c86a13529241f6a4e54ab9bf5/02d09/img7.png 1020w,\n/static/a5bab48c86a13529241f6a4e54ab9bf5/7e04b/img7.png 1197w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>또한 @NotNull을 어노테이션을 사용하게 되면 예외 메시지를 직접 작성할 수 있는 장점도 존재합니다.</p>\n<hr>\n<p>여담으로, @NotNull 없이 nullable=false 만 설정한 경우에도 NULL 검증을 진행하고 싶다면 아래와 같이 설정하면 됩니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"properties\"><pre class=\"language-properties\"><code class=\"language-properties\"><span class=\"token key attr-name\">spring.jpa.properties.hibernate.check_nullability</span><span class=\"token punctuation\">=</span><span class=\"token value attr-value\">true</span></code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/e8b3a0b2d617daac6f2414986df9fed6/bb7f4/img8.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 43.529411764705884%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABjklEQVR42m2S2ZabMBBE+Y5kYnYESAiDV7CdmTn5/2+q3JbfcvJQ7kXVpVKb7BQXxXnRFI+aiG7warpegXrwk/oxpNxPczr/t2f1GGLCsp6VNa1T03QJzg2qqkZFUalFtK5bNaAjt9rOW3g1nN5qkCIaxhm5KLtDeNF40Dh2Tks36Np7nYlnZ/moG+cbvAfxknigcTpRL1wYMDCXtfq8VHaC+Mngb3CDuCP0AJ8Iveht9Ky23Hg3VjL7KB9mENW5XpW5Rjg3wYD9S9vpym0rTYPlF0hncAV2aWx7TbZbxMe6UwWvJJacVbg10aKoldnQtxv1h2fas7/c280XDr/BO3pdhqDLOGnB3UyccRqYHRDuMeVAVbXKFn6eCD1tX817lxsOX+zzCXbcb/QjogNCE/CIB9CWlfJfuYpDodzALrMZZVv6HaQnIrB2XouLPNMrukkrn8hxWdOn0fFkP0UF8gMCPz4O+oloAnlm/9LGfmxvJmw7OyJSj4sqRH086b5t2vddrh/S0AfD/0NelPoLwD8Ks4SAzg4AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img8' title='' src='/static/e8b3a0b2d617daac6f2414986df9fed6/ca1dc/img8.png' srcset='/static/e8b3a0b2d617daac6f2414986df9fed6/e7570/img8.png 170w,\n/static/e8b3a0b2d617daac6f2414986df9fed6/f46e7/img8.png 340w,\n/static/e8b3a0b2d617daac6f2414986df9fed6/ca1dc/img8.png 680w,\n/static/e8b3a0b2d617daac6f2414986df9fed6/02d09/img8.png 1020w,\n/static/e8b3a0b2d617daac6f2414986df9fed6/bb7f4/img8.png 1192w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>\b스프링(자바) 애플리케이션 단에서 예외가 잡히는 것을 볼 수 있습니다. 하지만 예외 타입이 hibernate.PropertyValueException으로 다릅니다.</p>\n<p>굳이 추천하는 방법은 아닌 것 같습니다.</p>\n<p>또한 <code class=\"language-text\">@NotBlank</code>나 <code class=\"language-text\">@NotEmpty</code>는 자동으로 DDL을 생성해주지 않습니다.</p>\n<p>그러므로 @NotBlank나 @NotEmpty를 사용하는 경우에는 <code class=\"language-text\">@Column(nullable=false)</code>를 반드시 추가해야 DDL에 NOT NULL 제약조건이 반영됩니다.</p>\n<hr>\n<h2>정리</h2>\n<p><strong>@Column(nullable = false)</strong>\nDDL을 자동으로 생성하지만, 애플리케이션의 영속성 컨텍스트에서 엔티티 필드에 null이 들어가는 것을 막지 못한다.</p>\n<p>또한 데이터베이스에 쿼리가 실행된 후 예외가 발생한다.</p>\n<p><strong>@NotNull</strong>\nDDL을 자동으로 생성하고 애플리케이션의 영속성 컨텍스트에서 엔티티 필드에 null이 들어가는 것을 막는다.</p>\n<p>잘못된 제약 조건인 경우 데이터베이스에 불필요한 쿼리를 날리지 않는다.</p>\n<p>추가적으로 Bean Validation 방식은 예외 메세지를 직접 작성할 수 있다.</p>\n<p>또한 @Size와 같이 다른 validation을 통해 엔티티 필드 값을 검증할 수 있다.</p>\n<p>단점으로는 코드가 지저분해지고, JPA를 이용한 엔티티화 시킨 것이 아닌 객체라면 @NotNull 어노테이션을 해석하지 못한다.</p>\n<p>하이버네이트에서는 nullable=false보다 @NotNull 사용을 조금 더 권장하고 있다.</p>\n<h2>레퍼런스</h2>\n<p><a href=\"https://www.baeldung.com/hibernate-notnull-vs-nullable\">https://www.baeldung.com/hibernate-notnull-vs-nullable</a></p>\n<p><a href=\"https://kafcamus.tistory.com/15\">https://kafcamus.tistory.com/15</a></p>","frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?","date":"July 16, 2023","update":"July 16, 2023","tags":["JPA","Validation","nullable"],"series":null},"fields":{"slug":"/jpa-notnull-nullable/","readingTime":{"minutes":9.925}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}},"next":{"fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},"pageContext":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","series":null,"previousPostId":"c826ce0e-1ea7-517c-8d19-84e90a59a798","nextPostId":"a78e224b-b711-5071-8e90-013d6f4bebc3"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/jpa-notnull-nullable/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 서론 JPA를 이용해 엔티티를 설계하다가  어노테이션과 @Column의 의 차이점이 궁금해져 알아보았습니다. nullable = false ?? JPA는 엔티티를 매핑하고 설계하면 자동으로 DDL을 생성해 주는 기능을 제공합니다. \n또한 엔티티의 각 컬럼들에 대해 NOT NULL, UNIQUE 등과 …","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Kim0914\">그레이</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p>JPA를 이용해 엔티티를 설계하다가 <code class=\"language-text\">@NotNull</code> 어노테이션과 @Column의 <code class=\"language-text\">nullable=false</code>의 차이점이 궁금해져 알아보았습니다.</p>\n<h2>nullable = false ??</h2>\n<p>JPA는 엔티티를 매핑하고 설계하면 자동으로 DDL을 생성해 주는 기능을 제공합니다.\n또한 엔티티의 각 컬럼들에 대해 NOT NULL, UNIQUE 등과 같은 제약 조건이 포함되는 경우에도 자동으로 DDL을 생성해 줍니다.</p>\n<p>엔티티를 설계할 때 일반적으로 @Column 어노테이션을 활용합니다.\n@Column 어노테이션에서 해당 컬럼의 NOT NULL 제약을 설정할 수 있는데 <code class=\"language-text\">@Column(name = \"email\", nullable = false)</code>와 같이 nullable=false 설정을 걸어주면, 해당 제약 조건을 명시할 수 있습니다.\n따로 명시하지 않으면 nullable의 기본 값은 true입니다.</p>\n<p>간단한 User 엔티티를 생성해 보겠습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@Entity</span>\n<span class=\"token annotation punctuation\">@Table</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"user\"</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">User</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">AuditingEntity</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token annotation punctuation\">@Id</span>\n    <span class=\"token annotation punctuation\">@GeneratedValue</span><span class=\"token punctuation\">(</span>strategy <span class=\"token operator\">=</span> <span class=\"token class-name\">GenerationType</span><span class=\"token punctuation\">.</span><span class=\"token constant\">IDENTITY</span><span class=\"token punctuation\">)</span>\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"id\"</span><span class=\"token punctuation\">,</span> updatable <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">Long</span> id<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"user_id\"</span><span class=\"token punctuation\">,</span> length <span class=\"token operator\">=</span> <span class=\"token number\">20</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">String</span> userId<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"password\"</span><span class=\"token punctuation\">,</span> length <span class=\"token operator\">=</span> <span class=\"token number\">20</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">String</span> password<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"name\"</span><span class=\"token punctuation\">,</span> length <span class=\"token operator\">=</span> <span class=\"token number\">20</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">String</span> name<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"email\"</span><span class=\"token punctuation\">,</span> nullable <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span> length <span class=\"token operator\">=</span> <span class=\"token number\">50</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">String</span> email<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>User 테이블의 email 필드는 반드시 값이 존재해야 합니다.\n즉, <strong>NOT NULL 제약 조건이 필요</strong>합니다.\n여기서 JPA가 자동으로 생성하는 DDL을 확인해 보겠습니다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 511px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/07ba5d1c8c397f8be6371368e94590bd/40f84/img.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 56.470588235294116%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABL0lEQVR42pVT7ZKCMBDzNU4RCogglkK/wHv/B9trojA3o+OdP5Zuoc0m2WV3bi9iRiv9VUt9auRrn8khy2V/OHLNjsVHsVsvVXUjqqy5ltWJcczVBn6PnPt3BQlYqEom68U6Lz7MMk6WeXe5bgWapk0KzsxPKW/OHdcnQDxQLS9KGcwk3kcxabUuSIiLOOyTJSEVsvZe5NLr9G6iTVDxBIjAB4DMyzeBez2k/CZxXh4eD0mFoxr4jACRlwwhGwxxGdIheZwcwZ0PYri30nY9z60EXjaFSVbwYIizaD0SBNJ9iGyUUjX9Wpv0tsu/GboHCPyZEkNYAKZoxCt5fwICSA+jXLWhdEScb2T535ncAAtVEgAMBzOyEWCIsflosPEAO3r1GGxVVuwm4pB99qf8AHc/NmNete98AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img' title='' src='/static/07ba5d1c8c397f8be6371368e94590bd/40f84/img.png' srcset='/static/07ba5d1c8c397f8be6371368e94590bd/e7570/img.png 170w,\n/static/07ba5d1c8c397f8be6371368e94590bd/f46e7/img.png 340w,\n/static/07ba5d1c8c397f8be6371368e94590bd/40f84/img.png 511w' sizes='(max-width: 511px) 100vw, 511px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">email varchar(50) not null</code> 과 같이 not null 제약 조건이 자동으로 명시됨을 알 수 있습니다.</p>\n<p>하지만 DDL은 애플리케이션 내부가 아닌 데이터베이스 컬럼의 속성에 대한 조건이므로, 스프링(자바) 애플리케이션 내 User 엔티티의 email 필드는 null이 허용됩니다.</p>\n<p>테스트 코드로 확인해 보겠습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@TestConstructor</span><span class=\"token punctuation\">(</span>autowireMode <span class=\"token operator\">=</span> <span class=\"token class-name\">TestConstructor<span class=\"token punctuation\">.</span>AutowireMode</span><span class=\"token punctuation\">.</span><span class=\"token constant\">ALL</span><span class=\"token punctuation\">)</span>\n<span class=\"token annotation punctuation\">@DataJpaTest</span>\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">UserRepositoryTest</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token keyword\">private</span> <span class=\"token keyword\">final</span> <span class=\"token class-name\">UserRepository</span> userRepository<span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">public</span> <span class=\"token class-name\">UserRepositoryTest</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">UserRepository</span> userRepository<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>userRepository <span class=\"token operator\">=</span> userRepository<span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token annotation punctuation\">@Test</span>\n    <span class=\"token keyword\">void</span> <span class=\"token function\">save</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">User</span> user <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">User</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"gray1234\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"password\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"gray\"</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n        <span class=\"token class-name\">User</span> savedUser <span class=\"token operator\">=</span> userRepository<span class=\"token punctuation\">.</span><span class=\"token function\">save</span><span class=\"token punctuation\">(</span>user<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n        <span class=\"token function\">assertThat</span><span class=\"token punctuation\">(</span>savedUser<span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">isEqualTo</span><span class=\"token punctuation\">(</span>user<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/71aee32c567a1f0f3cd007720fe0bc0e/bbbf7/img2.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 40%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABN0lEQVR42m2Sa3aCMBBGWUerQEJCEkEFfFv1dAHd/3amdyhtrfXHPROScPNNIOuHjXT9IDEmqUOQNi2kSY2k1DK3YC5JmNDnoNzN1YE98Zdst73J5f1DYn+T1F/Fuyg7V8uFzXsX5OC/OMLJR9nXUToky/HQRjzj0joxlZe8MJL52EpYrCSklXgI1suGxX5iGKsbawdrXl5TGw6NVT3WMMmKwkpWj7GBlr22zQtbNmiiNxId4UCqNXuStonE5aUYKOaFOEQVvM5zKBDGv3dgTDUmPCNR4QHJEBtZ0ppBlpPiZZb/CHSszBjPHoUeLEJNeNa7ox1NODDfcoBjrSytzEmnfEvueS5EdCXZDS6IdiTs+Ooth1SkNNyz5WqeSf+1XCJcTRe/pDagNamEgyzCijX9ZRzPj8JP4iTnrJ0znIQAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img2' title='' src='/static/71aee32c567a1f0f3cd007720fe0bc0e/ca1dc/img2.png' srcset='/static/71aee32c567a1f0f3cd007720fe0bc0e/e7570/img2.png 170w,\n/static/71aee32c567a1f0f3cd007720fe0bc0e/f46e7/img2.png 340w,\n/static/71aee32c567a1f0f3cd007720fe0bc0e/ca1dc/img2.png 680w,\n/static/71aee32c567a1f0f3cd007720fe0bc0e/02d09/img2.png 1020w,\n/static/71aee32c567a1f0f3cd007720fe0bc0e/bbbf7/img2.png 1280w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>테스트가 실패함을 확인할 수 있습니다.</p>\n<p>하지만 여기서 주의 깊게 살펴볼 점이 있습니다. 예외 메시지를 따라 올라가 보면 insert 쿼리가 한 번 발생한 것을 알 수 있습니다. 또한 발생한 예외 타입이 JdbcSQL.... Exception입니다.</p>\n<p>즉 애플리케이션 내부가 아닌, 데이터베이스 내에서 예외가 발생했다는 것입니다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6eb86d0d25b3bd233da6c29c69b111b7/78ab2/img3.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 36.47058823529412%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAABFUlEQVR42m1RV1LDMBTUOYi71WUV24GEMtz/Vo99shNmGD5W+3qTWGOktGSyfiEXYuVZalLGkXOhMtssZMcMPG2Atr7CwL+kQkJpWx0vl5aapqu4/EHb9r/oBmpOZr05wflSGRKcwAJjmlWdjnmcZJWZu36sCY8G/zV9FuQnYlR9rshr9cNUi2pjEYT1sQUX12ClDY3jDP1oLuXh56asi7AkSmWjEMHrTmW7HsVxz1xW2DN4qzFlv9Y7SfYjb91fyYP149bIERZVPaZ0J1tAYzq2s8zsTg6YxLOOMwRwgh45F/GMhMLCDjN9wPgN57t2tAJvxtMNP3cHrsANq38i5ktZumOSAltGTEZslmiGE7l+ogXn+AEewspd1jBwPwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img3' title='' src='/static/6eb86d0d25b3bd233da6c29c69b111b7/ca1dc/img3.png' srcset='/static/6eb86d0d25b3bd233da6c29c69b111b7/e7570/img3.png 170w,\n/static/6eb86d0d25b3bd233da6c29c69b111b7/f46e7/img3.png 340w,\n/static/6eb86d0d25b3bd233da6c29c69b111b7/ca1dc/img3.png 680w,\n/static/6eb86d0d25b3bd233da6c29c69b111b7/02d09/img3.png 1020w,\n/static/6eb86d0d25b3bd233da6c29c69b111b7/78ab2/img3.png 1201w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>애플리케이션 내에서는 email 컬럼의 null을 체크하지 못하고, 데이터베이스에 쿼리가 실행될 때 예외가 발생한다는 것입니다. 또한 insert 쿼리가 데이베이스에서 실행되므로 Auto Increment인 PK가 증가합니다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/8328bd74000f76b69473afbebb4ddfec/ef64d/img4.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 39.411764705882355%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA4ElEQVR42o1SWxKDIAzkGq2KD0Twjdr2/jdLs/HRmY7t+LFsDMsSElXbDZQXJd2jhKJYnyJO0stQhbHkfC2mhmOg2GBKJ5xmxc8Lvr+VKauPIcfgRGeUpjllbAQzzTFy34ABeN+HuRrGQB0/ewwTLY8X9UMQ46btJdf1I4VpoYHz8/ygieFcLWfCNMseNNDjnFqWpyR83VLLSXDddCs4hhBwvjnYsqGt/KEr7doasMKS5YZu91gGsyOKNLP+O6yzniqYoSoYV87LzSgdsJUThubqtFWzlY3GYiDnA7j+27wB3onf0dqVQqkAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img4' title='' src='/static/8328bd74000f76b69473afbebb4ddfec/ca1dc/img4.png' srcset='/static/8328bd74000f76b69473afbebb4ddfec/e7570/img4.png 170w,\n/static/8328bd74000f76b69473afbebb4ddfec/f46e7/img4.png 340w,\n/static/8328bd74000f76b69473afbebb4ddfec/ca1dc/img4.png 680w,\n/static/8328bd74000f76b69473afbebb4ddfec/02d09/img4.png 1020w,\n/static/8328bd74000f76b69473afbebb4ddfec/ef64d/img4.png 1165w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>첫 번째 유저를 저장할 때는 email 값을 null로 할당한 후 try - catch를 이용해 예외를 삼키고, 두 번째 유저는 정상적으로 저장한 후 PK를 출력해 봤습니다. 예상한 것처럼, 두 번째 유저의 PK는 2 임을 확인할 수 있습니다.</p>\n<p><strong>그렇다면, 애플리케이션 내 엔티티에서는 null을 어떻게 막을 수 있을까요?</strong></p>\n<h2>@NotNull과 함께라면?</h2>\n<p><code class=\"language-text\">@NotNull</code>은 java validation에 속하며 <code class=\"language-text\">@Valid</code>를 이용한 요청을 처리하는 단계에서 예외를 잡을 수도 있고, bean validation을 통해 예외를 검증할 수도 있습니다.</p>\n<p>우리가 DTO와 같이 클래스의 필드를 검증하는 방법과 동일하게 엔티티의 필드도 검증할 수 있습니다. 당연히 같은 자바 객체이고 도메인이기 때문에 동일하게 적용할 수 있습니다.</p>\n<p>@Valid 어노테이션도 없이 어떻게?라고 생각할 수 있는데요, Hibernate는 엔티티에 적용된 Bean Validation 어노테이션 역시 DDL로 변환합니다.\n@NotNull은 nullable=false와 마찬가지로 DDL 상에서 해당 컬럼이 NOT NULL 제약조건을 가짐을 명시합니다.</p>\n<p>스프링 공식문서인 밸덩에서도 이를 명확히 언급하고 있습니다. <a href=\"https://www.baeldung.com/hibernate-notnull-vs-nullable\">밸덩 바로가기</a></p>\n<p>이전 User 테이블에 nullable=false를 제거한 후 @NotNull 어노테이션만 붙여준 후 생성되는 DDL을 살펴보겠습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@Entity</span>\n<span class=\"token annotation punctuation\">@Table</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"user\"</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">public</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">User</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">AuditingEntity</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token annotation punctuation\">@Id</span>\n    <span class=\"token annotation punctuation\">@GeneratedValue</span><span class=\"token punctuation\">(</span>strategy <span class=\"token operator\">=</span> <span class=\"token class-name\">GenerationType</span><span class=\"token punctuation\">.</span><span class=\"token constant\">IDENTITY</span><span class=\"token punctuation\">)</span>\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"id\"</span><span class=\"token punctuation\">,</span> updatable <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">Long</span> id<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"user_id\"</span><span class=\"token punctuation\">,</span> length <span class=\"token operator\">=</span> <span class=\"token number\">20</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">String</span> userId<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"password\"</span><span class=\"token punctuation\">,</span> length <span class=\"token operator\">=</span> <span class=\"token number\">20</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">String</span> password<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"name\"</span><span class=\"token punctuation\">,</span> length <span class=\"token operator\">=</span> <span class=\"token number\">20</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">String</span> name<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@NotNull</span>\n    <span class=\"token annotation punctuation\">@Column</span><span class=\"token punctuation\">(</span>name <span class=\"token operator\">=</span> <span class=\"token string\">\"email\"</span><span class=\"token punctuation\">,</span> length <span class=\"token operator\">=</span> <span class=\"token number\">50</span><span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">String</span> email<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 581px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/e5b63e9522a57e7a8f2337fc96f1da3e/3f4f8/img5.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 50.588235294117645%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABAUlEQVR42pWSWXKDMBBEfQ1biH0Tu9ic3P9gHbWIKCg7KfMxSEOJp+4ebqWq0HYDVNXAkwGE59v1WNIPT3vpBy9nXN0ICKMESZojilPESWZXP4gs/OFJPISEEP7Wi63/F0jIoCfoccY4LeiHEU3bIc1yUwWKsrIrL1VVjbxQfwP5uJsb87zEsjwtmLWsX5hNr81+NBc1bW+BDn6M4QVIlZkBrs9vo06jbjpM82qBBFEtlTm773I+AXmoVLVRtlmlbQKphsNyA/ukdiA/ps1jlnznhnMZyKCZFe12/WCAs7G8IghjiA9hpwwJ1L/hM0fa5xCuqNuBVMHa/sFk76+AXP0AtkYYSSWb4eMAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img5' title='' src='/static/e5b63e9522a57e7a8f2337fc96f1da3e/3f4f8/img5.png' srcset='/static/e5b63e9522a57e7a8f2337fc96f1da3e/e7570/img5.png 170w,\n/static/e5b63e9522a57e7a8f2337fc96f1da3e/f46e7/img5.png 340w,\n/static/e5b63e9522a57e7a8f2337fc96f1da3e/3f4f8/img5.png 581w' sizes='(max-width: 581px) 100vw, 581px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>동일하게 <strong>email varchar(50) not null</strong> 과 같이 not null 제약 조건이 자동으로 명시됨을 알 수 있습니다.</p>\n<p>Hibernate에 의해 DDL이 자동으로 생성되는 기능을 끄고 싶다면 아래와 같이 설정하면 됩니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"properties\"><pre class=\"language-properties\"><code class=\"language-properties\"><span class=\"token key attr-name\">spring.jpa.properties.hibernate.validator.apply_to_ddl</span><span class=\"token punctuation\">=</span><span class=\"token value attr-value\">false</span></code></pre></div>\n<p>그렇다면 nullable = false와 어떤 차이가 있을까요?</p>\n<p>차이점을 알아보기 위해 이전에 User의 email 필드에 null을 세팅한 후 저장하는 테스트 코드를 실행해보겠습니다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/0def70e8fe415ea9627150a16d3d5057/78ab2/img6.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 45.294117647058826%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABbElEQVR42kWSV3LDMAxEdRGrS+yqLuPYntz/VMgDJU8+dlC5XIAstpRkjpPENIkPSRzoByODcTkejSUXs+/pU2hN+wK+9UGsC+L9EReGYLveZN8Bdlk3MdbT5GWal6OZwzHN+YBarfuTMF90+mlapOi6QYJHgQIl1niJWAeRyzeTs04Mqqyq1rwqhLTrR+l0mtFm6EWFbTrZ2142cAULCHUrHsS6E1c1YkGkz525gK/1gXx1qaUta2kulbTEhaE4QzKBFbVqQ9OL00NKAuxpj/i/9q3HL7pRCo/sV0zyAx7InttBYiY9mr6EmlOFmg9nXsUMOs1JHuDKO7zxAC8We4dQVd4oKK7g3psM9efRyaKX4ifsws/Y5zXvtUW5h6eomHuH5EPDh2X/YBVK+NIcJL/k3/hv7Mbh1UWZwcKDadwxaoXCVkeuIdwgfJ1ED15NsUP4xD6HI69+XgkEyfL6EI7YmlVUjF2WjZRw/QFVjAkSg0PKewAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img6' title='' src='/static/0def70e8fe415ea9627150a16d3d5057/ca1dc/img6.png' srcset='/static/0def70e8fe415ea9627150a16d3d5057/e7570/img6.png 170w,\n/static/0def70e8fe415ea9627150a16d3d5057/f46e7/img6.png 340w,\n/static/0def70e8fe415ea9627150a16d3d5057/ca1dc/img6.png 680w,\n/static/0def70e8fe415ea9627150a16d3d5057/02d09/img6.png 1020w,\n/static/0def70e8fe415ea9627150a16d3d5057/78ab2/img6.png 1201w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>다음과 같이 <code class=\"language-text\">javax.validation.ConstraintViolationException</code> 예외가 발생한다는 것을 알 수 있습니다. 또한 nullable=false 방식 때 발생하던 <strong>insert 쿼리가 발생하지 않는다</strong>는 점도 함께 볼 수 있습니다.</p>\n<p><code class=\"language-text\">javax.validation.ConstraintViolationException</code> 예외가 발생했다는 것은 스프링(자바) 애플리케이션 내에서 예외를 잡았다는 것입니다. 그러므로 데이터베이스에 쿼리가 실행될 일이 없습니다.</p>\n<p>좀 더 정확하게 말하면 객체가 생성되는 시점이 아닌 <strong>엔티티가 영속화되는 시점에 예외가 발생</strong>합니다.</p>\n<p>확실하게 알아보기 위해 동일한 User1, User2 저장 테스트를 실행해 보면 2번째로 저장한 유저의 PK가 1 임을 알 수 있습니다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/a5bab48c86a13529241f6a4e54ab9bf5/7e04b/img7.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 38.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABBUlEQVR42o1S2Y6DMBDLd2xLG0ISrhDu9v+/zB0PQntoV90Ha6w57YCZ1w15WpCGET42sM6jrALuZQX7C0rWBT/z7K9CDZOGjGXdMeQRKWU4WWZLh65PqJtOQc4+Rg7HutXerh8036cBvfBeuJmXDaMozHnCuj3Qdj2CKN2ET/MC1rf9if3xlPqu9UF6mZuXVWZn5HFSUJih1SMxq21epyoujXUDH6LyE6wxT363DsXNqmpGT8ttl1D5qKBdV3nhQd/psF9944yl+8wxhlhr5DFDC5frDR+XQnHyr/EdzlkrhwyV0ab3hzXKpkLGoDziWtzfgov5dxh+KQ7xPYj/DP+10MmeFw0j5HepOK5cAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img7' title='' src='/static/a5bab48c86a13529241f6a4e54ab9bf5/ca1dc/img7.png' srcset='/static/a5bab48c86a13529241f6a4e54ab9bf5/e7570/img7.png 170w,\n/static/a5bab48c86a13529241f6a4e54ab9bf5/f46e7/img7.png 340w,\n/static/a5bab48c86a13529241f6a4e54ab9bf5/ca1dc/img7.png 680w,\n/static/a5bab48c86a13529241f6a4e54ab9bf5/02d09/img7.png 1020w,\n/static/a5bab48c86a13529241f6a4e54ab9bf5/7e04b/img7.png 1197w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>또한 @NotNull을 어노테이션을 사용하게 되면 예외 메시지를 직접 작성할 수 있는 장점도 존재합니다.</p>\n<hr>\n<p>여담으로, @NotNull 없이 nullable=false 만 설정한 경우에도 NULL 검증을 진행하고 싶다면 아래와 같이 설정하면 됩니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"properties\"><pre class=\"language-properties\"><code class=\"language-properties\"><span class=\"token key attr-name\">spring.jpa.properties.hibernate.check_nullability</span><span class=\"token punctuation\">=</span><span class=\"token value attr-value\">true</span></code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/e8b3a0b2d617daac6f2414986df9fed6/bb7f4/img8.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 43.529411764705884%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABjklEQVR42m2S2ZabMBBE+Y5kYnYESAiDV7CdmTn5/2+q3JbfcvJQ7kXVpVKb7BQXxXnRFI+aiG7warpegXrwk/oxpNxPczr/t2f1GGLCsp6VNa1T03QJzg2qqkZFUalFtK5bNaAjt9rOW3g1nN5qkCIaxhm5KLtDeNF40Dh2Tks36Np7nYlnZ/moG+cbvAfxknigcTpRL1wYMDCXtfq8VHaC+Mngb3CDuCP0AJ8Iveht9Ky23Hg3VjL7KB9mENW5XpW5Rjg3wYD9S9vpym0rTYPlF0hncAV2aWx7TbZbxMe6UwWvJJacVbg10aKoldnQtxv1h2fas7/c280XDr/BO3pdhqDLOGnB3UyccRqYHRDuMeVAVbXKFn6eCD1tX817lxsOX+zzCXbcb/QjogNCE/CIB9CWlfJfuYpDodzALrMZZVv6HaQnIrB2XouLPNMrukkrn8hxWdOn0fFkP0UF8gMCPz4O+oloAnlm/9LGfmxvJmw7OyJSj4sqRH086b5t2vddrh/S0AfD/0NelPoLwD8Ks4SAzg4AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img8' title='' src='/static/e8b3a0b2d617daac6f2414986df9fed6/ca1dc/img8.png' srcset='/static/e8b3a0b2d617daac6f2414986df9fed6/e7570/img8.png 170w,\n/static/e8b3a0b2d617daac6f2414986df9fed6/f46e7/img8.png 340w,\n/static/e8b3a0b2d617daac6f2414986df9fed6/ca1dc/img8.png 680w,\n/static/e8b3a0b2d617daac6f2414986df9fed6/02d09/img8.png 1020w,\n/static/e8b3a0b2d617daac6f2414986df9fed6/bb7f4/img8.png 1192w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>\b스프링(자바) 애플리케이션 단에서 예외가 잡히는 것을 볼 수 있습니다. 하지만 예외 타입이 hibernate.PropertyValueException으로 다릅니다.</p>\n<p>굳이 추천하는 방법은 아닌 것 같습니다.</p>\n<p>또한 <code class=\"language-text\">@NotBlank</code>나 <code class=\"language-text\">@NotEmpty</code>는 자동으로 DDL을 생성해주지 않습니다.</p>\n<p>그러므로 @NotBlank나 @NotEmpty를 사용하는 경우에는 <code class=\"language-text\">@Column(nullable=false)</code>를 반드시 추가해야 DDL에 NOT NULL 제약조건이 반영됩니다.</p>\n<hr>\n<h2>정리</h2>\n<p><strong>@Column(nullable = false)</strong>\nDDL을 자동으로 생성하지만, 애플리케이션의 영속성 컨텍스트에서 엔티티 필드에 null이 들어가는 것을 막지 못한다.</p>\n<p>또한 데이터베이스에 쿼리가 실행된 후 예외가 발생한다.</p>\n<p><strong>@NotNull</strong>\nDDL을 자동으로 생성하고 애플리케이션의 영속성 컨텍스트에서 엔티티 필드에 null이 들어가는 것을 막는다.</p>\n<p>잘못된 제약 조건인 경우 데이터베이스에 불필요한 쿼리를 날리지 않는다.</p>\n<p>추가적으로 Bean Validation 방식은 예외 메세지를 직접 작성할 수 있다.</p>\n<p>또한 @Size와 같이 다른 validation을 통해 엔티티 필드 값을 검증할 수 있다.</p>\n<p>단점으로는 코드가 지저분해지고, JPA를 이용한 엔티티화 시킨 것이 아닌 객체라면 @NotNull 어노테이션을 해석하지 못한다.</p>\n<p>하이버네이트에서는 nullable=false보다 @NotNull 사용을 조금 더 권장하고 있다.</p>\n<h2>레퍼런스</h2>\n<p><a href=\"https://www.baeldung.com/hibernate-notnull-vs-nullable\">https://www.baeldung.com/hibernate-notnull-vs-nullable</a></p>\n<p><a href=\"https://kafcamus.tistory.com/15\">https://kafcamus.tistory.com/15</a></p>","frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?","date":"July 16, 2023","update":"July 16, 2023","tags":["JPA","Validation","nullable"],"series":null},"fields":{"slug":"/jpa-notnull-nullable/","readingTime":{"minutes":9.925}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}},"next":{"fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},"pageContext":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","series":null,"previousPostId":"4a9246fb-171b-5973-88fc-864034e78afd","nextPostId":"c826ce0e-1ea7-517c-8d19-84e90a59a798"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/pium-deploy-step/page-data.json b/page-data/pium-deploy-step/page-data.json
index 53b22655..c486b9ae 100644
--- a/page-data/pium-deploy-step/page-data.json
+++ b/page-data/pium-deploy-step/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/pium-deploy-step/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론  http://pium.life 로 접속하면 피움의 홈페이지가 나오기까지의 과정을 기록으로 남겨보려고 한다. 본 과정은 서버 구축을 처음 하면서 과정을 이해하기위해 작성된 글입니다. 빠르게 따라할 수 있는 설정 기반 글을 원한다면 마지막 목차인 정리를 확인해보시길 바랍니다. 본 과정에서는 소량의 …","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/f67e51b2131d2821f9e1581e6399b0fd/cc6c5/3162b98e.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 63.52941176470588%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAABaElEQVR42q2Sy04CMRSG22AcWZjxvnDjm2jkUVhD4A3IhDEZmNFouMUV7jQ+DmsgEF1puA3hkunl2FMYAwYJEv/kS9P2/H9P0xLTMGIHR/vOydl5xjSPLfPw1KKUWoSQNVANpRGLRgxrZ3cvE42ajmEY1ySbtb1q9QkKhTIvlSpQVHje3RKud6sJ507OBcfJwf1DEUrlR6iUK/zl+RVs+8Yl7XbbhZmmCrYl6AWVlSPNZtPDCVcSQgDCFwgYg7fRB7xPPiHgTK8JKWfM6xljHDPq9bpLWq2WDpRSclghbRAcBEj4TapGexuNxupANAuJHXIY+D70Bn3o9fvgD329hnuLB6wNVCMM2BgmItCM+RRGbKpHJFwfBmNdu1GHHLsLgR8s7G185b9qKTB85fnz4x3w7I34rheCzQPz/99hrVbLq38EnU6Hd7td2Ab0KoHKckg8Hr9IJBKxVCp1mUwmr7YBvel0OoZZX6UfYwEuhsjCAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='3162b98e' title='' src='/static/f67e51b2131d2821f9e1581e6399b0fd/ca1dc/3162b98e.png' srcset='/static/f67e51b2131d2821f9e1581e6399b0fd/e7570/3162b98e.png 170w,\n/static/f67e51b2131d2821f9e1581e6399b0fd/f46e7/3162b98e.png 340w,\n/static/f67e51b2131d2821f9e1581e6399b0fd/ca1dc/3162b98e.png 680w,\n/static/f67e51b2131d2821f9e1581e6399b0fd/02d09/3162b98e.png 1020w,\n/static/f67e51b2131d2821f9e1581e6399b0fd/9d567/3162b98e.png 1360w,\n/static/f67e51b2131d2821f9e1581e6399b0fd/cc6c5/3162b98e.png 1552w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><a href=\"http://pium.life\">http://pium.life</a> 로 접속하면 피움의 홈페이지가 나오기까지의 과정을 기록으로 남겨보려고 한다.</p>\n<blockquote>\n<p>본 과정은 서버 구축을 처음 하면서 과정을 이해하기위해 작성된 글입니다.</p>\n<p>빠르게 따라할 수 있는 설정 기반 글을 원한다면 마지막 목차인 정리를 확인해보시길 바랍니다.</p>\n</blockquote>\n<blockquote>\n<p>본 과정에서는 소량의 과금(?)이 존재합니다.\n(도메인 구입비용 : 약 4000원)</p>\n</blockquote>\n<h2>도메인 정하기</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/beeec2ef08bc2096e099db73407a0997/649dd/8e211be2.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 62.94117647058823%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAACiUlEQVR42nVTy2oUQRTtP3Av+A0uXbj0P8SVG9FVNhFEyC8IQgQfRJCRCTGTSEBBg4Y8Jpk8hsRE0cwDM5OZnp7u6kdVV/XreKuSGSPEgsN9cOvUved2WwMmMAwUlJQIAx+CR/A919hRLuYcUggIwTF0bKRpgtHhAQMb9DDsdRAyD9bE7CGmvzSxsNfB/G4Hld0u3u2cGLuwd4r5nc7Yr+x1Mbf9G4v1Hhbqp1ja72Nyto470yu4+3wdE+V9WNcefsZU5QArRx2sNhhWj12sNTxjL/NH8fL3PjYaQ1x/9AHW7RKu3F/E1clPsDZbDFvtANWWj40mw3rTw3rjL9Y00Tl0rGtGqFJtre0bbLUZNls0stZJhAyZEkglR5ZI5BlplCdkM+TFWC5kpF0SR0hEBBlzcJUZrWMeIMtSU2PFUoH5AfwgRBCGiDiJH0tIpSAUEWS5Ic1zUC4BFzFBIEnowaJAnioDFDkohMVpg1EU0YWcXslog2cv6Qs61kcRufYLuqGSsw1X6n08KB9iaukXHr//iXulAyz/cGhkKtakuljS+BrmIuU1ucmTrx+UaYFGL6LZFTYbLp5+PER5o4m52glefG3iW8eHFQSB6ebi0SQjq72CdZF7XfoOBRYPXCwdeWZETjJJkigjKTIpjeaW4zimmzHBRbJzP7ePkdoNKFrEy2oPT9Zs0i2Bwzhcn34Mso5Hy5EJLM/1xrqNSP6BJhw0kfq22fDrWh/PqgMUtFVN5AUCjOD59DeplDocDmH7MeIku5zwnDQjDSPfxdsdGzPbLgpqIiQiEdHWCWEozgjtwQCcWlVpjv8dTci4BHP6mNnq41VtiBNf4sabJm6W2mRbuFVuw+UJ/gC7D8S+CPzx7gAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='8e211be2' title='' src='/static/beeec2ef08bc2096e099db73407a0997/ca1dc/8e211be2.png' srcset='/static/beeec2ef08bc2096e099db73407a0997/e7570/8e211be2.png 170w,\n/static/beeec2ef08bc2096e099db73407a0997/f46e7/8e211be2.png 340w,\n/static/beeec2ef08bc2096e099db73407a0997/ca1dc/8e211be2.png 680w,\n/static/beeec2ef08bc2096e099db73407a0997/02d09/8e211be2.png 1020w,\n/static/beeec2ef08bc2096e099db73407a0997/649dd/8e211be2.png 1234w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<blockquote>\n<p>도메인을 구입하기 위해 도메인 호스팅 사이트 <a href=\"https://www.gabia.com/\">가비아</a>를 이용했다.</p>\n</blockquote>\n<p><code class=\"language-text\">pium.com</code> <code class=\"language-text\">pium.co.kr</code> <code class=\"language-text\">pium.net</code> 등등.\n서비스의 이름으로 자주 사용하는 도메인을 생성하고싶었으나 이미 존재하거나 가격이 너무 비싸다는 문제가 있었다.</p>\n<p>적당한 가격에 서비스의 이름을 가진 도메인인 <code class=\"language-text\">pium.life</code>를 선택했다. (1년 4000원)</p>\n<h2>도메인 설정하기</h2>\n<blockquote>\n<p>가비아 서비스를 기준으로 과정이 진행됩니다.</p>\n</blockquote>\n<p><code class=\"language-text\">3.123.123.123</code>과 같은 인스턴스 public ip 주소를 <code class=\"language-text\">pium.life</code>로 별칭을 지정해주자.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/5c39231cc02060595d5acd7d53964cac/89578/ce5d100b.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 61.76470588235294%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAAC3UlEQVR42lWTW0hUaxiG/y72RUEbklFnpoNlZZoTmqlJjjnWzFgzzTgzGdmBbZmVHfCUVgTWZofEpg2F7U03QVHaibroKiKC7oIi6C7oJoqUHNtzaJzTmuU8/WvVGH3w8i6e7/v/9S74lghGU0xEUqRSSRLxGPHpGNOxKOlUglQyobNkMk46neJrNKz3tMpms7qr8lzw3VumPn4gHAkjXP1jbOkdxS19a98orr4xNOYZuIN38A4eXXfxnnqAR3J37008J27p3Dt4W7JRmvaNYDvwH/bj1xHz1p9iqXsYQ+MQZudfGO1/km8bYo6lB2HpQ1QMICpPSj/BnPoLzA085LdN1xCrjyDWdCPWDiKqTyOq+uWcpsA5Wnv+xXvsMs7Of6Qu4u66RP2eYRr+uEixa4jC5rPkWQco3DFG/U2ovaKSb79KXk0nhvoeDNZ+DBu6yZMSRQ2drGzqosxxjOW2w5jr9mOsbafI2smSjV2YrN0Un32Fpfs+q/deZ8VwhIp7UNT+ht9X+TDW7aOg7iD5dYfIr+1ALK7ejqWpnRLrbhauC2Ba68Nc5cdYKb16J8aKAEUtI/iegO38Uwr9j1h0BgoCz1lQ4qR01wjLmk9iqtmDuaYNYSptYLHFxqLyRoyrrD9VKlW2icISK8UbdmE5epuljl4Kyn3Mt44yr/wIhuXrMa/bi6mqDVOlH1NZI8LhbsXh2o59a0D3X9WK09OGu0X6Zid25zbJ/Njdfhzu7/3NrgC2lg4avR00NfsQweAkodD/+p4lEnFdSbmDipImoyi6p9Np6RkyGU3KLE9JDjP8/ew9jquvefw2iFDVDKqq/ljU7C+eW95c5ViOZ79DIokMU9MKYy/HERqLx+NMTgZlEmX2cDgcZmJiQiZOzLJQKMT4+Pgsm5mZYWrqC18mP6MqSW68+KQlVInFYkSjUf3iXBKNRSIR+dsldabIz9RmNKbN5ZJqz9qLtL5W3wA2so9kRrWVagAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='ce5d100b' title='' src='/static/5c39231cc02060595d5acd7d53964cac/ca1dc/ce5d100b.png' srcset='/static/5c39231cc02060595d5acd7d53964cac/e7570/ce5d100b.png 170w,\n/static/5c39231cc02060595d5acd7d53964cac/f46e7/ce5d100b.png 340w,\n/static/5c39231cc02060595d5acd7d53964cac/ca1dc/ce5d100b.png 680w,\n/static/5c39231cc02060595d5acd7d53964cac/02d09/ce5d100b.png 1020w,\n/static/5c39231cc02060595d5acd7d53964cac/89578/ce5d100b.png 1209w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>우측 상단의 <code class=\"language-text\">My 가비아</code> 탭으로 들어간다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/73e1f16d1334bd57f1a8ece74d6d0c21/9d8cf/48a0d2d6.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 60.58823529411765%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAACBklEQVR42mVTy47TQBD0v3PkyA9w4Qf2ivbEhQMSBzisBAg22ayddfwYe94PF9WTRERLS5XxTHrcVdXtph0tfrYL+tmhVw4xZah5hrUWs1IwxmCaJnjvMQxDPb9GIYwPsCHi8anDrz97NFobhBhRNiDzxzMhci8wWnMNKKVU5Jzrum3bBXwuEdgykbgENCOrCiRZkpxzKHw+tEf8aKf6gtdRmCfxZa/x9n6Hd5+e8ea+w4evIxq1rHjpB8gaQqLkcpbN/aQ02ecKz//OiHA+VgIPncHd9wl33wa8/9zi48OApjsO2O0OWFbDxIR1tVi0ZZERXfcCxfNVO1gXK64v1saTwFluiQ4gUqBkY1w1XcwX41MiSyZqG3CaFlpgeTFUmSmXC8MAYx3MojEcWszzgmkxVUljXaiNyLlUOOfZiESWHt2w0EN6S78SGyZnO3bz9+OexVbYWeG022MdZwyzrlY02liMZLiuurIUiBSRFVnxNsSKp+cjdvsWx56qqKLvevpt0B5PcLzXWGEnI3FByqkytqwmuI2ZF4Vh250wkKFnQcfCwkwt0sAkDB1WdlRz5ix9kZkUjzwbJAm3odmc07jQ31jli6e3IXt66OsQXz2UuRMPRfKkFig112IS1qy0Z66zehnF/18o46L4ia28JN4V+VrYVZET0j8r5Fz2KZ+fX2MjxPO/QnGg8g4b/ygAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='48a0d2d6' title='' src='/static/73e1f16d1334bd57f1a8ece74d6d0c21/ca1dc/48a0d2d6.png' srcset='/static/73e1f16d1334bd57f1a8ece74d6d0c21/e7570/48a0d2d6.png 170w,\n/static/73e1f16d1334bd57f1a8ece74d6d0c21/f46e7/48a0d2d6.png 340w,\n/static/73e1f16d1334bd57f1a8ece74d6d0c21/ca1dc/48a0d2d6.png 680w,\n/static/73e1f16d1334bd57f1a8ece74d6d0c21/02d09/48a0d2d6.png 1020w,\n/static/73e1f16d1334bd57f1a8ece74d6d0c21/9d8cf/48a0d2d6.png 1216w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>우측의 <code class=\"language-text\">DNS 관리툴</code> 탭으로 들어간다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/a4cb9491393cae21332985fd64fb8c0d/a47a4/dbaa42b0.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 26.47058823529412%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA0UlEQVR42mWQC47DIAxEuf9Bq7ShBAiG8J0OtFLVXaQn28B4DOqmPbbdwOkHRsloKaJmxoF/9D8MYlOHIYmaeBUo4zzsmSBnwH7fcOgdSYSH88L1IS8kXQjxy6wfLmGzEYY9tAtQwq5GCmiG226xHRFHbHiGsjBSFzO/al9jjT7p6L0xNrRa2FyQaK5EIhynnMunAu0jnj7hfghMyHR91zOfT6qtUpg5YUSuzHNZzw0S4IyF6nRqra2G07XSbYzPJIxl/iuF3GD9Zep+6toQT8ELsPqF7ZFV6ZYAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='dbaa42b0' title='' src='/static/a4cb9491393cae21332985fd64fb8c0d/ca1dc/dbaa42b0.png' srcset='/static/a4cb9491393cae21332985fd64fb8c0d/e7570/dbaa42b0.png 170w,\n/static/a4cb9491393cae21332985fd64fb8c0d/f46e7/dbaa42b0.png 340w,\n/static/a4cb9491393cae21332985fd64fb8c0d/ca1dc/dbaa42b0.png 680w,\n/static/a4cb9491393cae21332985fd64fb8c0d/02d09/dbaa42b0.png 1020w,\n/static/a4cb9491393cae21332985fd64fb8c0d/9d567/dbaa42b0.png 1360w,\n/static/a4cb9491393cae21332985fd64fb8c0d/a47a4/dbaa42b0.png 1421w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>도메인의 <code class=\"language-text\">설정</code> 탭으로 들어간다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/edf6fd8e323628c5351511474c4ae487/047c3/0b4d4be0.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 20.58823529411765%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAiElEQVR42qXM2wqDMBCEYd//KduCBmM0J03JJvVvFHrRglcd+GAWhu360aCmBbcmbEy4K+s13yi7oW2kU8OAc44z+86/6YwxaK15psRsJrz3p+O2zjOHSGxqrV9Ks78qYxQey9a2lnVLdCEE5kmjbj3q3lNyJotQmnz0LEjrvw8/pJSmnhuRwhstujbY9gqqNQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='0b4d4be0' title='' src='/static/edf6fd8e323628c5351511474c4ae487/ca1dc/0b4d4be0.png' srcset='/static/edf6fd8e323628c5351511474c4ae487/e7570/0b4d4be0.png 170w,\n/static/edf6fd8e323628c5351511474c4ae487/f46e7/0b4d4be0.png 340w,\n/static/edf6fd8e323628c5351511474c4ae487/ca1dc/0b4d4be0.png 680w,\n/static/edf6fd8e323628c5351511474c4ae487/02d09/0b4d4be0.png 1020w,\n/static/edf6fd8e323628c5351511474c4ae487/047c3/0b4d4be0.png 1208w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>DNS 관리 탭의 <code class=\"language-text\">설정</code> 혹은 <code class=\"language-text\">레코드 수정</code>에 들어간다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/be57907274a476d1261092d3bac97cd0/51f47/d830ba27.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 38.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOUlEQVR42pWRS07DMBCGc6giIa7AissU0U2PQViU1xKJAyEhWKaQOHYedvyKf2bSpCo7GOmXXzPf/Lazq9cKly8lzp/2WD3scfb4f61IXH/x/IWs1g4sxTJ+kuiGo5a9RfI0/6RGGYfeRWTDMEBajzGNMFoj0ciRUoK1dl4njOMI7z2cs+j7HjHQnM75jMdAa47MOgcf45QUQgA32O3ucZvnyPM7SCmnRN4fqJDBrKZtocmApxohFVTbEZqAkWCY3XAYY7DdbnG9XmOzuUFZlkego+bsnKNpmgkYQkRNwLbrDg4rUcPSVbg7w1lFUUAIgY6S2DVDGGhnh7xWSkHTrZwPqGoF2XTsC9nbt8F7ZaHdweniYIk077EW2DIHvW+lAz6Ew2dNn+JHekPiDIESfnP+HIG4zGAx4wc1NFLtdAuILQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='d830ba27' title='' src='/static/be57907274a476d1261092d3bac97cd0/ca1dc/d830ba27.png' srcset='/static/be57907274a476d1261092d3bac97cd0/e7570/d830ba27.png 170w,\n/static/be57907274a476d1261092d3bac97cd0/f46e7/d830ba27.png 340w,\n/static/be57907274a476d1261092d3bac97cd0/ca1dc/d830ba27.png 680w,\n/static/be57907274a476d1261092d3bac97cd0/51f47/d830ba27.png 892w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>위와 같이 레코드를 추가하고 저장한다.</p>\n<blockquote>\n<p>CNAME 설정은 향후 서브도메인 설정을 위한 설정입니다.</p>\n</blockquote>\n<p>이제 <a href=\"http://pium.life\">http://pium.life</a> 로 접속하면 서버로 바로 접속할 수 있게된다. (SSH 접속이 아닌 HTTP 접속을 의미한다.)</p>\n<h2>환경 살펴보기</h2>\n<p>피움은 하나의 EC2에 프론트엔드, 백엔드의 배포를 모두 진행하려고한다.</p>\n<p>이를 위해서라면 서로 다른 포트에 서비스를 띄워둔 뒤 각 요청별로 포트를 분산시킬 필요가 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 555px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6b66749ad542471689f2ca5ecb3a11d0/98c96/ee357fa5.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 51.17647058823529%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABTklEQVR42qWRu04CQRSGeQPfxdfwJSxsLH0DE2sTGiobCzoLY0OIhUYTotHEoEEwS1y5CCQs4F5wN7s7M5/DirIYCEbP5GRmTvGd/z8nwx9D6bMoMv+B3VslLl6PCWXwXV8OVGo+pzWlZPJs2lWy5R3O2kdYfmc1UKVyEjL09Ud+/qtVWuUCJ+1Dbnqn80AhBKPRCM/zcF0X23EY22/Q76JqZfADrPM8jc01KO6hHA/xYiSAh8EVpW6BWEYzoNI2TNOkXq9jGEZy9/sWjUaX68tbLFfQym7ztK7N7G+gdSLiaOmCEsu+7yfqJionGcYCO9Zz8mIcPTK3fkczt4V8LNJ5h0rXQWrGcySphZJAzcaUWbyPWUclJUNts+8GDNyJPkml51HqjTkYw+4QjGgF8Odi5sxNC0OhyHuQs8GMfwlMK/7KdLOhHsdAQJSy/AFt8QHX+h2MDwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='ee357fa5' title='' src='/static/6b66749ad542471689f2ca5ecb3a11d0/98c96/ee357fa5.png' srcset='/static/6b66749ad542471689f2ca5ecb3a11d0/e7570/ee357fa5.png 170w,\n/static/6b66749ad542471689f2ca5ecb3a11d0/f46e7/ee357fa5.png 340w,\n/static/6b66749ad542471689f2ca5ecb3a11d0/98c96/ee357fa5.png 555w' sizes='(max-width: 555px) 100vw, 555px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>때문에 위와 같은 흐름으로 요청이 진행되는 것이 최종 목표다!</p>\n<h3>EC2 보안규칙</h3>\n<p>우아한테크코스 과정에서 제공되는 EC2의 보안규칙은 다음과 같다.</p>\n<ul>\n<li>사내에서만 22번 포트 접속 가능</li>\n<li>80, 443은 열려있음</li>\n<li>이외의 포트는 열려있지 않음.</li>\n</ul>\n<p>우리가 흔히 개발을 하면서 사용하는 3000번 포트 혹은 8080번 포트를 통해 해당 서버에 접근하지 못한다는 이야기다.</p>\n<p>즉, 다시말해 pium.life:8080과 같은 접근이 안된다는 이야기다.</p>\n<p>인바운드 규칙에서 8080 혹은 3000번 포트를 열어버리는 방법도 있겠지만 보안 규칙에 손대지 않으면서 해결할 수 있는 방법을 찾아보자.</p>\n<h2>nginx로 포트포워딩하기</h2>\n<p>linux에 존재하는 <code class=\"language-text\">iptables</code> 명령어를 통해 서버 자체적으로 포트포워딩 환경을 구성할 수도 있지만 현재 피움은 하나의 서버에서 두개의 어플리케이션을 배포하고 있고, 도메인도 하나다.</p>\n<p>따라서 후에 설명할 서브도메인을 적용하기 위해서라도 nginx를 이용하기로 한다.</p>\n<h3>nginx 설치하기</h3>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> <span class=\"token function\">install</span> nginx</code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">systemctl status nginx</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/62f73813a3dbce8bfdc5b39ca49641f1/1ed31/28e0139a.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 18.823529411764707%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAApUlEQVR42pWPOw+DMBCDI4TCkPJGKC8ULjQ0Qv3/f8/VZWBplw6f7FtsnziOA9ppGG/gyYMiIVIEEcE5h23bbu+9h1IKbduirmsIIb4504nwCqA3QScN6y1CCIV1XWGtxb7vMMYgxliCl2XBNE2FcRwxz3PxUkqInDPSM+HKFyhQaR+GoWjf90W7rrs9wyF8s3I4Ky+uqgqC23mNeig0jfz9xh98AJx/X27IEAMSAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='28e0139a' title='' src='/static/62f73813a3dbce8bfdc5b39ca49641f1/ca1dc/28e0139a.png' srcset='/static/62f73813a3dbce8bfdc5b39ca49641f1/e7570/28e0139a.png 170w,\n/static/62f73813a3dbce8bfdc5b39ca49641f1/f46e7/28e0139a.png 340w,\n/static/62f73813a3dbce8bfdc5b39ca49641f1/ca1dc/28e0139a.png 680w,\n/static/62f73813a3dbce8bfdc5b39ca49641f1/1ed31/28e0139a.png 974w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>이제 주소창에 인스턴스 ip 를 치고 접속하면 다음과 같이 nginx default 페이지를 볼 수 있다. </p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 663px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/9a3c9696e83150d8f8c8cc0df8288ade/5c8e6/9345764b.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 38.23529411764706%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABcklEQVR42l1STW+CUBD0//8B7x7kZIwnEz1oqPKhNeIFNBaBIqgINSrBpgrTt9tirS+Z7OyGN292l0qn08F0OoVlWYzFYoHlcon5fA7P82CaJgzD4HqSJKBzu92Q5zmDeJkXRYFKrVZDvS6h1Wqh0Wig2Wyi1+uh3W5zrFarkCQJ3W4XcRyzIF18PlRjwcvlgizLcDqdcD6f/8U0TXE8HjkSDocD9vs9NpsNdrud4AnW64A5fceCw+EQmq5h8joB8cFgAEVRIMsyVFWFMZuJuiK4Ji5G2G638H0fQeALHsBxbB5NOY4KvRaGAaIoYtBrjuuKWshuqBaGnnD1Lpx/sMs0pQ4K4Qqiu6eWaSGapmE0GkHXdXY3Ho85J5eKooq4Qr/vQn6xhSOXndl2BtP6wsr5xPV6E2K/S3FcR8xhzXOhVgjUFtWSJOZ5xnEuUAh3xcNCijtKdz+CjsMzCIKA26Tctt9Y8O/kd5S/S54XdzwKfgPTY01z0d7cygAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='9345764b' title='' src='/static/9a3c9696e83150d8f8c8cc0df8288ade/5c8e6/9345764b.png' srcset='/static/9a3c9696e83150d8f8c8cc0df8288ade/e7570/9345764b.png 170w,\n/static/9a3c9696e83150d8f8c8cc0df8288ade/f46e7/9345764b.png 340w,\n/static/9a3c9696e83150d8f8c8cc0df8288ade/5c8e6/9345764b.png 663w' sizes='(max-width: 663px) 100vw, 663px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h3>80 포트 접속을 8080 포트로</h3>\n<blockquote>\n<p>해당 과정은 8080포트에 애플리케이션이 구동중인 상태에서 진행됩니다.\n다음 명령어로 8080포트에서 애플리케이션이 구동중인지 확인한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">lsof</span> <span class=\"token parameter variable\">-i</span> tcp:8080</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 598px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/51a5f82dfc1fcb417df2c1222b0262f7/02e46/1573063d.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 9.411764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAdklEQVR42j2Nuw7DIBRDYUJqRG4hAak8rkgEKwNz//+33MDQ4cjy4GPB34ytvkCGoJSCMQZEb8SYcN8Xcs7ovWOMgRACrLXw3i+ICEIISCn/CP4w9m1HrfWRxJVTfJ4HUkpgZrTW1njKZp8nk1LKEmutV3fO4Qe5aTJ2IHR74gAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='1573063d' title='' src='/static/51a5f82dfc1fcb417df2c1222b0262f7/02e46/1573063d.png' srcset='/static/51a5f82dfc1fcb417df2c1222b0262f7/e7570/1573063d.png 170w,\n/static/51a5f82dfc1fcb417df2c1222b0262f7/f46e7/1573063d.png 340w,\n/static/51a5f82dfc1fcb417df2c1222b0262f7/02e46/1573063d.png 598w' sizes='(max-width: 598px) 100vw, 598px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n</blockquote>\n<p>이제 nginx 설정파일을 작성하여 80포트로 오는 요청을 8080포트로 전환시켜본다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token builtin class-name\">cd</span> /etc/nginx/sites-available/\n\n<span class=\"token function\">sudo</span> <span class=\"token function\">vi</span> default</code></pre></div>\n<blockquote>\n<p>주석처리 되어있는 부분은 제외하고 코드로 표현합니다.</p>\n</blockquote>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># 변경 전 파일내용</span>\nserver <span class=\"token punctuation\">{</span>\n        listen <span class=\"token number\">80</span> default_server<span class=\"token punctuation\">;</span>\n        listen <span class=\"token punctuation\">[</span>::<span class=\"token punctuation\">]</span>:80 default_server<span class=\"token punctuation\">;</span>\n\n        root /var/www/html<span class=\"token punctuation\">;</span>\n\n        index index.html index.htm index.nginx-debian.html<span class=\"token punctuation\">;</span>\n\n        server_name _<span class=\"token punctuation\">;</span>\n\n        location / <span class=\"token punctuation\">{</span>\n                try_files <span class=\"token variable\">$uri</span> <span class=\"token variable\">$uri</span>/ <span class=\"token operator\">=</span><span class=\"token number\">404</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>처음 파일을 열어보면 위와같이 설정되어있을 것이다.</p>\n<p>최대한 간략하게 포트를 변경한다는 목적만 달성해보기 위해 다음 내용들을 수정해보자.</p>\n<ul>\n<li><code class=\"language-text\">root /var/www/html;</code> 주석처리</li>\n<li><code class=\"language-text\">index index.html index.htm index.nginx-debian.html;</code> 주석처리</li>\n<li>\n<p><code class=\"language-text\">location / { ... }</code> 내부 내용에 다음 내용 추가</p>\n<ul>\n<li><code class=\"language-text\">proxy_set_header Host $host:$server_port;</code></li>\n<li><code class=\"language-text\">proxy_set_header X-Real-IP $remote_addr;</code></li>\n<li><code class=\"language-text\">proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;</code></li>\n<li><code class=\"language-text\">proxy_pass http://127.0.0.1:8080;</code></li>\n</ul>\n</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># 변경된 파일내용</span>\nserver <span class=\"token punctuation\">{</span>\n        listen <span class=\"token number\">80</span> default_server<span class=\"token punctuation\">;</span>\n        listen <span class=\"token punctuation\">[</span>::<span class=\"token punctuation\">]</span>:80 default_server<span class=\"token punctuation\">;</span>\n\n        <span class=\"token comment\"># root /var/www/html;</span>\n\n        <span class=\"token comment\"># index index.html index.htm index.nginx-debian.html;</span>\n\n        server_name _<span class=\"token punctuation\">;</span>\n\n        location / <span class=\"token punctuation\">{</span>\n                proxy_set_header Host <span class=\"token variable\">$host</span><span class=\"token builtin class-name\">:</span><span class=\"token variable\">$server_port</span><span class=\"token punctuation\">;</span>\n                proxy_set_header X-Real-IP <span class=\"token variable\">$remote_addr</span><span class=\"token punctuation\">;</span>\n                proxy_set_header X-Forwarded-For <span class=\"token variable\">$proxy_add_x_forwarded_for</span><span class=\"token punctuation\">;</span>\n                proxy_pass http://127.0.0.1:8080<span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>위와같이 설정파일을 수정했다면 다음 명령어를 수행해 nginx를 다시 시작한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">sudo</span> systemctl restart nginx</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 604px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/eef9247c8964e484681e7dfae0a0e86b/1994c/232c6d5d.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 28.235294117647058%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA1ElEQVR42o1QyaqEQBDr//8jBfEg6FkvgrjhLi4XD+5mSEGD8B7DFISUVZikWpmmCcuyYNs2HMeB53mCIAjg+z4Mw4DruljXFaz7vvE8z79gqaqqkGUZkiRBmqZo2xZN06AsSyzLgiiKRJxCv5Tquk5EpmkSzPOMuq4xjqOIcs953/fS04x9nueyH4ZBmIF4heLPTFkUhQjpdFwex4Ft24TP8xSw3/dd5uT3N69QcRzLyeQwDOVEgqlpRKYRmQk5o6l+sz8nX9cFDSagi+7fyd749p4fy07GAzZ6YT4AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='232c6d5d' title='' src='/static/eef9247c8964e484681e7dfae0a0e86b/1994c/232c6d5d.png' srcset='/static/eef9247c8964e484681e7dfae0a0e86b/e7570/232c6d5d.png 170w,\n/static/eef9247c8964e484681e7dfae0a0e86b/f46e7/232c6d5d.png 340w,\n/static/eef9247c8964e484681e7dfae0a0e86b/1994c/232c6d5d.png 604w' sizes='(max-width: 604px) 100vw, 604px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>스프링부트 애플리케이션을 실행중이였다면 위와같은 Whitelabel Error Page를 확인할 수 있을것이다.</p>\n<h2>서브도메인 구성하기</h2>\n<p>이제 80포트에서 8080포트로 요청을 변환하는 과정은 성공했다.</p>\n<p>하나의 서버에 프론트엔드, 백엔드 코드가 같이 띄워져야하므로 서브도메인을 통해 페이지와 API를 구분해줘야한다.</p>\n<h3>index 파일 지정하기 - default 파일 수정</h3>\n<p>프론트에서 빌드 산출물로 나온 index.html을 기본 페이지로 참고하도록 설정하자.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token builtin class-name\">cd</span> /etc/nginx/sites-available/\n\n<span class=\"token function\">sudo</span> <span class=\"token function\">vi</span> default</code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># 변경 전 설정내용</span>\nserver <span class=\"token punctuation\">{</span>\n        listen <span class=\"token number\">80</span> default_server<span class=\"token punctuation\">;</span>\n        listen <span class=\"token punctuation\">[</span>::<span class=\"token punctuation\">]</span>:80 default_server<span class=\"token punctuation\">;</span>\n\n        <span class=\"token comment\"># root /var/www/html;</span>\n\n        <span class=\"token comment\"># index index.html index.htm index.nginx-debian.html;</span>\n\n        server_name _<span class=\"token punctuation\">;</span>\n\n        location / <span class=\"token punctuation\">{</span>\n                proxy_set_header Host <span class=\"token variable\">$host</span><span class=\"token builtin class-name\">:</span><span class=\"token variable\">$server_port</span><span class=\"token punctuation\">;</span>\n                proxy_set_header X-Real-IP <span class=\"token variable\">$remote_addr</span><span class=\"token punctuation\">;</span>\n                proxy_set_header X-Forwarded-For <span class=\"token variable\">$proxy_add_x_forwarded_for</span><span class=\"token punctuation\">;</span>\n                proxy_pass http://127.0.0.1:8080<span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>기존에 80포트를 8080포트로 포워딩시켜주는 설정을 바꿔준다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># 변경 후 설정내용</span>\nserver <span class=\"token punctuation\">{</span>\n        listen <span class=\"token number\">80</span> default_server<span class=\"token punctuation\">;</span>\n        listen <span class=\"token punctuation\">[</span>::<span class=\"token punctuation\">]</span>:80 default_server<span class=\"token punctuation\">;</span>\n\n        root /var/www/html<span class=\"token punctuation\">;</span>\n\n        index index.html<span class=\"token punctuation\">;</span>\n\n        server_name pium.life<span class=\"token punctuation\">;</span>\n\n        location / <span class=\"token punctuation\">{</span>\n        <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>이제 pium.life로 접속하면 <code class=\"language-text\">/var/www/html</code> 경로에 있는 <code class=\"language-text\">index.html</code>을 참조하도록 설정되었다.</p>\n<p>위 설정에 따르면 <code class=\"language-text\">index.html</code> 및 <code class=\"language-text\">bundle.js</code>, <code class=\"language-text\">assets</code> 등의 프론트 리소스들은 서버의 <code class=\"language-text\">/var/www/html</code>를 기준으로 위치시키면 된다.</p>\n<blockquote>\n<p>빌드 산출물 및 CD와 관련된 내용은 본 게시글에서 다루지 않습니다.</p>\n</blockquote>\n<h3>API 서버 지정하기 - api_config 파일 만들기</h3>\n<p><a href=\"http://api.pium.life\">http://api.pium.life</a> 로 API를 호출하도록 구성해보자.</p>\n<p>nginx는 기본적으로 <code class=\"language-text\">/etc/nginx/sites-enabled</code> 경로에 있는 파일들을 참고하여 설정파일에 적용한다.</p>\n<blockquote>\n<p><code class=\"language-text\">/etc/nginx/nginx.conf</code> 파일의 60번째 줄 참고</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 547px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/03d7a15ebc7bea96de5efdc6e60d72a2/25257/f4ceb33e.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 73.52941176470587%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABh0lEQVR42p1U23KCMBBNsglJ0HKJ7QgDHWqnxcE+yLf0//9lu0lUsKOO+nDmLJDsnr3BcsNQCoaMEXSCrMiRZTnassR6vca2bbHrOmyaBquqQudcsKWU8c5/lHZyKESKgltkXCDnkuCZn+DPzO2LmCsUsESpKuKSFKwI6+D46uVLWKWTQy4MAmjM4HiAP+bMo5ilzFKL1hX42zhkQjzndF5DzhWCLCnlLKQvxPJxh68LhgqmphizQ236CP2FSbKh94v71eakEE4KDSb6g5y8E2+oQTUqglRvz6UcFQ5BmVeY6I7wSQE6KoWj7zYE9RyRzmACnzXFjwhATvV7iRwOejsLaQMUh29lsP2ZyEfbxRpOc7gIDfHNiRH1gUnZvc2ZKwTqqo8Suiy8wiwAYBWCTBdvOHdng03rJoFmkDpPu6qUpG0BYqA6JuQYwg57vmtsGK0h6yhAK3H7vcX9fsTd7geHYcC+7wPGccS6rm/vcmp1fPBKFSkleEXWWuq4DrZnY8zp3bUfxB9XPjy8n5tihwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='f4ceb33e' title='' src='/static/03d7a15ebc7bea96de5efdc6e60d72a2/25257/f4ceb33e.png' srcset='/static/03d7a15ebc7bea96de5efdc6e60d72a2/e7570/f4ceb33e.png 170w,\n/static/03d7a15ebc7bea96de5efdc6e60d72a2/f46e7/f4ceb33e.png 340w,\n/static/03d7a15ebc7bea96de5efdc6e60d72a2/25257/f4ceb33e.png 547w' sizes='(max-width: 547px) 100vw, 547px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n</blockquote>\n<p>다음 과정을 통해 서브도메인 설정을 해보자.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token builtin class-name\">cd</span> /etc/nginx/sites-available\n\n<span class=\"token function\">sudo</span> <span class=\"token function\">vi</span> api_config</code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># api_config 파일 내용</span>\nserver <span class=\"token punctuation\">{</span>\n        listen <span class=\"token number\">80</span><span class=\"token punctuation\">;</span>\n        listen <span class=\"token punctuation\">[</span>::<span class=\"token punctuation\">]</span>:80<span class=\"token punctuation\">;</span>\n\n        server_name api.pium.life<span class=\"token punctuation\">;</span>\n        \n        location / <span class=\"token punctuation\">{</span>\n                proxy_set_header Host <span class=\"token variable\">$host</span><span class=\"token builtin class-name\">:</span><span class=\"token variable\">$server_port</span><span class=\"token punctuation\">;</span>\n                proxy_set_header X-Real-IP <span class=\"token variable\">$remote_addr</span><span class=\"token punctuation\">;</span>\n                proxy_set_header X-Forwarded-For <span class=\"token variable\">$proxy_add_x_forwarded_for</span><span class=\"token punctuation\">;</span>\n\n                proxy_pass http://127.0.0.1:8080<span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><code class=\"language-text\">server_name</code> 옵션을 통해 api.pium.life 라는 도메인으로 접근하는 요청을 확인하고, 맞다면 8080 포트로 변경한다.</p>\n<p>위와 같이 파일을 작성했으면 <code class=\"language-text\">sites-enabled</code> 경로에 soft link(바로가기)를 생성한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">ln</span> <span class=\"token parameter variable\">-s</span> /etc/nginx/sites-available/api_config /etc/nginx/sites-enabled/api_config</code></pre></div>\n<p>이제 nginx를 재시작하여 설정을 적용해보자.</p>\n<blockquote>\n<p>💡 Tip : <code class=\"language-text\">nginx -t</code> 명령어를 통해 현재 설정파일이 정상적으로 작성되었는지 확인할 수있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 545px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/b33f0caf9870e4f0864cfa6f8ea7af4d/f2ede/10d7627b.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 10.588235294117647%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAbklEQVR42k2NyQpDIRRDLS3igC3uBHFWHP7//1K8q7cICYcDYVJKPGOMgVIKIQTUWtF7p91ag3MO1loIIaC1Ju825xwf/gZ7MbA5J8nee+y9cc6hzjkTizFirUX8ZoxB/j1KKaGUgtEH6ij4/gz+iCQzrFRZETQAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='10d7627b' title='' src='/static/b33f0caf9870e4f0864cfa6f8ea7af4d/f2ede/10d7627b.png' srcset='/static/b33f0caf9870e4f0864cfa6f8ea7af4d/e7570/10d7627b.png 170w,\n/static/b33f0caf9870e4f0864cfa6f8ea7af4d/f46e7/10d7627b.png 340w,\n/static/b33f0caf9870e4f0864cfa6f8ea7af4d/f2ede/10d7627b.png 545w' sizes='(max-width: 545px) 100vw, 545px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n</blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/0b93d643e5673d6286e16237ce61a080/833a5/04601361.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 31.176470588235293%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA+klEQVR42oWQ2WqDUBCGfbOmtJe1TUublIQG+prVK3spiLl0ARVB3BdwV/zrHDA0UujAzyxn5uPMcLv9Ebv9AYfjCfzjM/inFzzw2zne4vXtHR+nT1a/2dxhc3v/rzhJkiAIAiTpG6IoQpZlqKoK9XyGoij4mt/yogDZNE34y6i+iEvTFJ7nXRRFEYIgQBiG8H0fpmmimIFN06Cua5RlyUQ5+aqqruAcAVzXZTCCEIziPM8RxzEbIuAiqlFflmXM0/wV0LZtGIYBx3Gg6zo0TYNlWUiS5CIapk0IsP7R2rhxHDEMA1PXdej7nolWatuW1cgvOfX9vtn6rj+fgqGzBfn+VAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='04601361' title='' src='/static/0b93d643e5673d6286e16237ce61a080/ca1dc/04601361.png' srcset='/static/0b93d643e5673d6286e16237ce61a080/e7570/04601361.png 170w,\n/static/0b93d643e5673d6286e16237ce61a080/f46e7/04601361.png 340w,\n/static/0b93d643e5673d6286e16237ce61a080/ca1dc/04601361.png 680w,\n/static/0b93d643e5673d6286e16237ce61a080/833a5/04601361.png 681w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><a href=\"http://api.pium.life\">http://api.pium.life</a> 로 접속하면 API로 연결되는것을 확인할 수 있다.</p>\n<h2>정리</h2>\n<ul>\n<li>8080 포트에 API 애플리케이션을 실행한다.</li>\n<li>도메인 구입 및 A 레코드, CNAME을 설정한다.</li>\n<li>nginx를 설치한다.</li>\n<li>프론트 빌드 산출물을 <code class=\"language-text\">/var/www/html</code> 경로에 준비한다. (index.html, bundle.js, assets 등)</li>\n<li>서브도메인 및 포트포워딩 설정한다.</li>\n</ul>\n<h3>nginx 설정 명령어 따라가기</h3>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># nginx 설치</span>\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> <span class=\"token function\">install</span> nginx\n\n<span class=\"token comment\"># default 파일 수정</span>\n<span class=\"token function\">sudo</span> <span class=\"token function\">vi</span> /etc/nginx/sites-available/default</code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># /etc/nginx/sites-available/default 파일 내용</span>\nserver <span class=\"token punctuation\">{</span>\n        listen <span class=\"token number\">80</span> default_server<span class=\"token punctuation\">;</span>\n        listen <span class=\"token punctuation\">[</span>::<span class=\"token punctuation\">]</span>:80 default_server<span class=\"token punctuation\">;</span>\n\n        root /var/www/html<span class=\"token punctuation\">;</span>\n\n        index index.html<span class=\"token punctuation\">;</span>\n\n        server_name pium.life<span class=\"token punctuation\">;</span>\n\n        location / <span class=\"token punctuation\">{</span>\n        <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># api_config 파일 작성</span>\n<span class=\"token function\">sudo</span> <span class=\"token function\">vi</span> /etc/nginx/sites-available/api_config</code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># api_config 파일 내용</span>\nserver <span class=\"token punctuation\">{</span>\n        listen <span class=\"token number\">80</span> default_server<span class=\"token punctuation\">;</span>\n        listen <span class=\"token punctuation\">[</span>::<span class=\"token punctuation\">]</span>:80 default_server<span class=\"token punctuation\">;</span>\n\n        root /var/www/html<span class=\"token punctuation\">;</span>\n\n        index index.html<span class=\"token punctuation\">;</span>\n\n        server_name pium.life<span class=\"token punctuation\">;</span>\n\n        location / <span class=\"token punctuation\">{</span>\n        <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># nginx 재시작 및 설정적용</span>\n<span class=\"token function\">sudo</span> systemctl restart nginx</code></pre></div>\n<h2>Reference</h2>\n<p><a href=\"https://jminie.tistory.com/110\">https://jminie.tistory.com/110</a></p>\n<p><a href=\"https://customer.gabia.com/manual/domain/287/1201\">https://customer.gabia.com/manual/domain/287/1201</a></p>","frontmatter":{"title":"피움의 배포과정","date":"July 18, 2023","update":"July 18, 2023","tags":["배포","인프라"],"series":null},"fields":{"slug":"/pium-deploy-step/","readingTime":{"minutes":10.37}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}},"next":{"fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},"pageContext":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","series":null,"previousPostId":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","nextPostId":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/pium-deploy-step/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론  http://pium.life 로 접속하면 피움의 홈페이지가 나오기까지의 과정을 기록으로 남겨보려고 한다. 본 과정은 서버 구축을 처음 하면서 과정을 이해하기위해 작성된 글입니다. 빠르게 따라할 수 있는 설정 기반 글을 원한다면 마지막 목차인 정리를 확인해보시길 바랍니다. 본 과정에서는 소량의 …","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/f67e51b2131d2821f9e1581e6399b0fd/cc6c5/3162b98e.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 63.52941176470588%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAABaElEQVR42q2Sy04CMRSG22AcWZjxvnDjm2jkUVhD4A3IhDEZmNFouMUV7jQ+DmsgEF1puA3hkunl2FMYAwYJEv/kS9P2/H9P0xLTMGIHR/vOydl5xjSPLfPw1KKUWoSQNVANpRGLRgxrZ3cvE42ajmEY1ySbtb1q9QkKhTIvlSpQVHje3RKud6sJ507OBcfJwf1DEUrlR6iUK/zl+RVs+8Yl7XbbhZmmCrYl6AWVlSPNZtPDCVcSQgDCFwgYg7fRB7xPPiHgTK8JKWfM6xljHDPq9bpLWq2WDpRSclghbRAcBEj4TapGexuNxupANAuJHXIY+D70Bn3o9fvgD329hnuLB6wNVCMM2BgmItCM+RRGbKpHJFwfBmNdu1GHHLsLgR8s7G185b9qKTB85fnz4x3w7I34rheCzQPz/99hrVbLq38EnU6Hd7td2Ab0KoHKckg8Hr9IJBKxVCp1mUwmr7YBvel0OoZZX6UfYwEuhsjCAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='3162b98e' title='' src='/static/f67e51b2131d2821f9e1581e6399b0fd/ca1dc/3162b98e.png' srcset='/static/f67e51b2131d2821f9e1581e6399b0fd/e7570/3162b98e.png 170w,\n/static/f67e51b2131d2821f9e1581e6399b0fd/f46e7/3162b98e.png 340w,\n/static/f67e51b2131d2821f9e1581e6399b0fd/ca1dc/3162b98e.png 680w,\n/static/f67e51b2131d2821f9e1581e6399b0fd/02d09/3162b98e.png 1020w,\n/static/f67e51b2131d2821f9e1581e6399b0fd/9d567/3162b98e.png 1360w,\n/static/f67e51b2131d2821f9e1581e6399b0fd/cc6c5/3162b98e.png 1552w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><a href=\"http://pium.life\">http://pium.life</a> 로 접속하면 피움의 홈페이지가 나오기까지의 과정을 기록으로 남겨보려고 한다.</p>\n<blockquote>\n<p>본 과정은 서버 구축을 처음 하면서 과정을 이해하기위해 작성된 글입니다.</p>\n<p>빠르게 따라할 수 있는 설정 기반 글을 원한다면 마지막 목차인 정리를 확인해보시길 바랍니다.</p>\n</blockquote>\n<blockquote>\n<p>본 과정에서는 소량의 과금(?)이 존재합니다.\n(도메인 구입비용 : 약 4000원)</p>\n</blockquote>\n<h2>도메인 정하기</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/beeec2ef08bc2096e099db73407a0997/649dd/8e211be2.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 62.94117647058823%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAACiUlEQVR42nVTy2oUQRTtP3Av+A0uXbj0P8SVG9FVNhFEyC8IQgQfRJCRCTGTSEBBg4Y8Jpk8hsRE0cwDM5OZnp7u6kdVV/XreKuSGSPEgsN9cOvUved2WwMmMAwUlJQIAx+CR/A919hRLuYcUggIwTF0bKRpgtHhAQMb9DDsdRAyD9bE7CGmvzSxsNfB/G4Hld0u3u2cGLuwd4r5nc7Yr+x1Mbf9G4v1Hhbqp1ja72Nyto470yu4+3wdE+V9WNcefsZU5QArRx2sNhhWj12sNTxjL/NH8fL3PjYaQ1x/9AHW7RKu3F/E1clPsDZbDFvtANWWj40mw3rTw3rjL9Y00Tl0rGtGqFJtre0bbLUZNls0stZJhAyZEkglR5ZI5BlplCdkM+TFWC5kpF0SR0hEBBlzcJUZrWMeIMtSU2PFUoH5AfwgRBCGiDiJH0tIpSAUEWS5Ic1zUC4BFzFBIEnowaJAnioDFDkohMVpg1EU0YWcXslog2cv6Qs61kcRufYLuqGSsw1X6n08KB9iaukXHr//iXulAyz/cGhkKtakuljS+BrmIuU1ucmTrx+UaYFGL6LZFTYbLp5+PER5o4m52glefG3iW8eHFQSB6ebi0SQjq72CdZF7XfoOBRYPXCwdeWZETjJJkigjKTIpjeaW4zimmzHBRbJzP7ePkdoNKFrEy2oPT9Zs0i2Bwzhcn34Mso5Hy5EJLM/1xrqNSP6BJhw0kfq22fDrWh/PqgMUtFVN5AUCjOD59DeplDocDmH7MeIku5zwnDQjDSPfxdsdGzPbLgpqIiQiEdHWCWEozgjtwQCcWlVpjv8dTci4BHP6mNnq41VtiBNf4sabJm6W2mRbuFVuw+UJ/gC7D8S+CPzx7gAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='8e211be2' title='' src='/static/beeec2ef08bc2096e099db73407a0997/ca1dc/8e211be2.png' srcset='/static/beeec2ef08bc2096e099db73407a0997/e7570/8e211be2.png 170w,\n/static/beeec2ef08bc2096e099db73407a0997/f46e7/8e211be2.png 340w,\n/static/beeec2ef08bc2096e099db73407a0997/ca1dc/8e211be2.png 680w,\n/static/beeec2ef08bc2096e099db73407a0997/02d09/8e211be2.png 1020w,\n/static/beeec2ef08bc2096e099db73407a0997/649dd/8e211be2.png 1234w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<blockquote>\n<p>도메인을 구입하기 위해 도메인 호스팅 사이트 <a href=\"https://www.gabia.com/\">가비아</a>를 이용했다.</p>\n</blockquote>\n<p><code class=\"language-text\">pium.com</code> <code class=\"language-text\">pium.co.kr</code> <code class=\"language-text\">pium.net</code> 등등.\n서비스의 이름으로 자주 사용하는 도메인을 생성하고싶었으나 이미 존재하거나 가격이 너무 비싸다는 문제가 있었다.</p>\n<p>적당한 가격에 서비스의 이름을 가진 도메인인 <code class=\"language-text\">pium.life</code>를 선택했다. (1년 4000원)</p>\n<h2>도메인 설정하기</h2>\n<blockquote>\n<p>가비아 서비스를 기준으로 과정이 진행됩니다.</p>\n</blockquote>\n<p><code class=\"language-text\">3.123.123.123</code>과 같은 인스턴스 public ip 주소를 <code class=\"language-text\">pium.life</code>로 별칭을 지정해주자.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/5c39231cc02060595d5acd7d53964cac/89578/ce5d100b.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 61.76470588235294%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAAC3UlEQVR42lWTW0hUaxiG/y72RUEbklFnpoNlZZoTmqlJjjnWzFgzzTgzGdmBbZmVHfCUVgTWZofEpg2F7U03QVHaibroKiKC7oIi6C7oJoqUHNtzaJzTmuU8/WvVGH3w8i6e7/v/9S74lghGU0xEUqRSSRLxGPHpGNOxKOlUglQyobNkMk46neJrNKz3tMpms7qr8lzw3VumPn4gHAkjXP1jbOkdxS19a98orr4xNOYZuIN38A4eXXfxnnqAR3J37008J27p3Dt4W7JRmvaNYDvwH/bj1xHz1p9iqXsYQ+MQZudfGO1/km8bYo6lB2HpQ1QMICpPSj/BnPoLzA085LdN1xCrjyDWdCPWDiKqTyOq+uWcpsA5Wnv+xXvsMs7Of6Qu4u66RP2eYRr+uEixa4jC5rPkWQco3DFG/U2ovaKSb79KXk0nhvoeDNZ+DBu6yZMSRQ2drGzqosxxjOW2w5jr9mOsbafI2smSjV2YrN0Un32Fpfs+q/deZ8VwhIp7UNT+ht9X+TDW7aOg7iD5dYfIr+1ALK7ejqWpnRLrbhauC2Ba68Nc5cdYKb16J8aKAEUtI/iegO38Uwr9j1h0BgoCz1lQ4qR01wjLmk9iqtmDuaYNYSptYLHFxqLyRoyrrD9VKlW2icISK8UbdmE5epuljl4Kyn3Mt44yr/wIhuXrMa/bi6mqDVOlH1NZI8LhbsXh2o59a0D3X9WK09OGu0X6Zid25zbJ/Njdfhzu7/3NrgC2lg4avR00NfsQweAkodD/+p4lEnFdSbmDipImoyi6p9Np6RkyGU3KLE9JDjP8/ew9jquvefw2iFDVDKqq/ljU7C+eW95c5ViOZ79DIokMU9MKYy/HERqLx+NMTgZlEmX2cDgcZmJiQiZOzLJQKMT4+Pgsm5mZYWrqC18mP6MqSW68+KQlVInFYkSjUf3iXBKNRSIR+dsldabIz9RmNKbN5ZJqz9qLtL5W3wA2so9kRrWVagAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='ce5d100b' title='' src='/static/5c39231cc02060595d5acd7d53964cac/ca1dc/ce5d100b.png' srcset='/static/5c39231cc02060595d5acd7d53964cac/e7570/ce5d100b.png 170w,\n/static/5c39231cc02060595d5acd7d53964cac/f46e7/ce5d100b.png 340w,\n/static/5c39231cc02060595d5acd7d53964cac/ca1dc/ce5d100b.png 680w,\n/static/5c39231cc02060595d5acd7d53964cac/02d09/ce5d100b.png 1020w,\n/static/5c39231cc02060595d5acd7d53964cac/89578/ce5d100b.png 1209w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>우측 상단의 <code class=\"language-text\">My 가비아</code> 탭으로 들어간다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/73e1f16d1334bd57f1a8ece74d6d0c21/9d8cf/48a0d2d6.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 60.58823529411765%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAACBklEQVR42mVTy47TQBD0v3PkyA9w4Qf2ivbEhQMSBzisBAg22ayddfwYe94PF9WTRERLS5XxTHrcVdXtph0tfrYL+tmhVw4xZah5hrUWs1IwxmCaJnjvMQxDPb9GIYwPsCHi8anDrz97NFobhBhRNiDzxzMhci8wWnMNKKVU5Jzrum3bBXwuEdgykbgENCOrCiRZkpxzKHw+tEf8aKf6gtdRmCfxZa/x9n6Hd5+e8ea+w4evIxq1rHjpB8gaQqLkcpbN/aQ02ecKz//OiHA+VgIPncHd9wl33wa8/9zi48OApjsO2O0OWFbDxIR1tVi0ZZERXfcCxfNVO1gXK64v1saTwFluiQ4gUqBkY1w1XcwX41MiSyZqG3CaFlpgeTFUmSmXC8MAYx3MojEcWszzgmkxVUljXaiNyLlUOOfZiESWHt2w0EN6S78SGyZnO3bz9+OexVbYWeG022MdZwyzrlY02liMZLiuurIUiBSRFVnxNsSKp+cjdvsWx56qqKLvevpt0B5PcLzXWGEnI3FByqkytqwmuI2ZF4Vh250wkKFnQcfCwkwt0sAkDB1WdlRz5ix9kZkUjzwbJAm3odmc07jQ31jli6e3IXt66OsQXz2UuRMPRfKkFig112IS1qy0Z66zehnF/18o46L4ia28JN4V+VrYVZET0j8r5Fz2KZ+fX2MjxPO/QnGg8g4b/ygAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='48a0d2d6' title='' src='/static/73e1f16d1334bd57f1a8ece74d6d0c21/ca1dc/48a0d2d6.png' srcset='/static/73e1f16d1334bd57f1a8ece74d6d0c21/e7570/48a0d2d6.png 170w,\n/static/73e1f16d1334bd57f1a8ece74d6d0c21/f46e7/48a0d2d6.png 340w,\n/static/73e1f16d1334bd57f1a8ece74d6d0c21/ca1dc/48a0d2d6.png 680w,\n/static/73e1f16d1334bd57f1a8ece74d6d0c21/02d09/48a0d2d6.png 1020w,\n/static/73e1f16d1334bd57f1a8ece74d6d0c21/9d8cf/48a0d2d6.png 1216w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>우측의 <code class=\"language-text\">DNS 관리툴</code> 탭으로 들어간다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/a4cb9491393cae21332985fd64fb8c0d/a47a4/dbaa42b0.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 26.47058823529412%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA0UlEQVR42mWQC47DIAxEuf9Bq7ShBAiG8J0OtFLVXaQn28B4DOqmPbbdwOkHRsloKaJmxoF/9D8MYlOHIYmaeBUo4zzsmSBnwH7fcOgdSYSH88L1IS8kXQjxy6wfLmGzEYY9tAtQwq5GCmiG226xHRFHbHiGsjBSFzO/al9jjT7p6L0xNrRa2FyQaK5EIhynnMunAu0jnj7hfghMyHR91zOfT6qtUpg5YUSuzHNZzw0S4IyF6nRqra2G07XSbYzPJIxl/iuF3GD9Zep+6toQT8ELsPqF7ZFV6ZYAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='dbaa42b0' title='' src='/static/a4cb9491393cae21332985fd64fb8c0d/ca1dc/dbaa42b0.png' srcset='/static/a4cb9491393cae21332985fd64fb8c0d/e7570/dbaa42b0.png 170w,\n/static/a4cb9491393cae21332985fd64fb8c0d/f46e7/dbaa42b0.png 340w,\n/static/a4cb9491393cae21332985fd64fb8c0d/ca1dc/dbaa42b0.png 680w,\n/static/a4cb9491393cae21332985fd64fb8c0d/02d09/dbaa42b0.png 1020w,\n/static/a4cb9491393cae21332985fd64fb8c0d/9d567/dbaa42b0.png 1360w,\n/static/a4cb9491393cae21332985fd64fb8c0d/a47a4/dbaa42b0.png 1421w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>도메인의 <code class=\"language-text\">설정</code> 탭으로 들어간다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/edf6fd8e323628c5351511474c4ae487/047c3/0b4d4be0.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 20.58823529411765%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAiElEQVR42qXM2wqDMBCEYd//KduCBmM0J03JJvVvFHrRglcd+GAWhu360aCmBbcmbEy4K+s13yi7oW2kU8OAc44z+86/6YwxaK15psRsJrz3p+O2zjOHSGxqrV9Ks78qYxQey9a2lnVLdCEE5kmjbj3q3lNyJotQmnz0LEjrvw8/pJSmnhuRwhstujbY9gqqNQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='0b4d4be0' title='' src='/static/edf6fd8e323628c5351511474c4ae487/ca1dc/0b4d4be0.png' srcset='/static/edf6fd8e323628c5351511474c4ae487/e7570/0b4d4be0.png 170w,\n/static/edf6fd8e323628c5351511474c4ae487/f46e7/0b4d4be0.png 340w,\n/static/edf6fd8e323628c5351511474c4ae487/ca1dc/0b4d4be0.png 680w,\n/static/edf6fd8e323628c5351511474c4ae487/02d09/0b4d4be0.png 1020w,\n/static/edf6fd8e323628c5351511474c4ae487/047c3/0b4d4be0.png 1208w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>DNS 관리 탭의 <code class=\"language-text\">설정</code> 혹은 <code class=\"language-text\">레코드 수정</code>에 들어간다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/be57907274a476d1261092d3bac97cd0/51f47/d830ba27.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 38.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOUlEQVR42pWRS07DMBCGc6giIa7AissU0U2PQViU1xKJAyEhWKaQOHYedvyKf2bSpCo7GOmXXzPf/Lazq9cKly8lzp/2WD3scfb4f61IXH/x/IWs1g4sxTJ+kuiGo5a9RfI0/6RGGYfeRWTDMEBajzGNMFoj0ciRUoK1dl4njOMI7z2cs+j7HjHQnM75jMdAa47MOgcf45QUQgA32O3ucZvnyPM7SCmnRN4fqJDBrKZtocmApxohFVTbEZqAkWCY3XAYY7DdbnG9XmOzuUFZlkego+bsnKNpmgkYQkRNwLbrDg4rUcPSVbg7w1lFUUAIgY6S2DVDGGhnh7xWSkHTrZwPqGoF2XTsC9nbt8F7ZaHdweniYIk077EW2DIHvW+lAz6Ew2dNn+JHekPiDIESfnP+HIG4zGAx4wc1NFLtdAuILQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='d830ba27' title='' src='/static/be57907274a476d1261092d3bac97cd0/ca1dc/d830ba27.png' srcset='/static/be57907274a476d1261092d3bac97cd0/e7570/d830ba27.png 170w,\n/static/be57907274a476d1261092d3bac97cd0/f46e7/d830ba27.png 340w,\n/static/be57907274a476d1261092d3bac97cd0/ca1dc/d830ba27.png 680w,\n/static/be57907274a476d1261092d3bac97cd0/51f47/d830ba27.png 892w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>위와 같이 레코드를 추가하고 저장한다.</p>\n<blockquote>\n<p>CNAME 설정은 향후 서브도메인 설정을 위한 설정입니다.</p>\n</blockquote>\n<p>이제 <a href=\"http://pium.life\">http://pium.life</a> 로 접속하면 서버로 바로 접속할 수 있게된다. (SSH 접속이 아닌 HTTP 접속을 의미한다.)</p>\n<h2>환경 살펴보기</h2>\n<p>피움은 하나의 EC2에 프론트엔드, 백엔드의 배포를 모두 진행하려고한다.</p>\n<p>이를 위해서라면 서로 다른 포트에 서비스를 띄워둔 뒤 각 요청별로 포트를 분산시킬 필요가 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 555px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6b66749ad542471689f2ca5ecb3a11d0/98c96/ee357fa5.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 51.17647058823529%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABTklEQVR42qWRu04CQRSGeQPfxdfwJSxsLH0DE2sTGiobCzoLY0OIhUYTotHEoEEwS1y5CCQs4F5wN7s7M5/DirIYCEbP5GRmTvGd/z8nwx9D6bMoMv+B3VslLl6PCWXwXV8OVGo+pzWlZPJs2lWy5R3O2kdYfmc1UKVyEjL09Ud+/qtVWuUCJ+1Dbnqn80AhBKPRCM/zcF0X23EY22/Q76JqZfADrPM8jc01KO6hHA/xYiSAh8EVpW6BWEYzoNI2TNOkXq9jGEZy9/sWjUaX68tbLFfQym7ztK7N7G+gdSLiaOmCEsu+7yfqJionGcYCO9Zz8mIcPTK3fkczt4V8LNJ5h0rXQWrGcySphZJAzcaUWbyPWUclJUNts+8GDNyJPkml51HqjTkYw+4QjGgF8Odi5sxNC0OhyHuQs8GMfwlMK/7KdLOhHsdAQJSy/AFt8QHX+h2MDwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='ee357fa5' title='' src='/static/6b66749ad542471689f2ca5ecb3a11d0/98c96/ee357fa5.png' srcset='/static/6b66749ad542471689f2ca5ecb3a11d0/e7570/ee357fa5.png 170w,\n/static/6b66749ad542471689f2ca5ecb3a11d0/f46e7/ee357fa5.png 340w,\n/static/6b66749ad542471689f2ca5ecb3a11d0/98c96/ee357fa5.png 555w' sizes='(max-width: 555px) 100vw, 555px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>때문에 위와 같은 흐름으로 요청이 진행되는 것이 최종 목표다!</p>\n<h3>EC2 보안규칙</h3>\n<p>우아한테크코스 과정에서 제공되는 EC2의 보안규칙은 다음과 같다.</p>\n<ul>\n<li>사내에서만 22번 포트 접속 가능</li>\n<li>80, 443은 열려있음</li>\n<li>이외의 포트는 열려있지 않음.</li>\n</ul>\n<p>우리가 흔히 개발을 하면서 사용하는 3000번 포트 혹은 8080번 포트를 통해 해당 서버에 접근하지 못한다는 이야기다.</p>\n<p>즉, 다시말해 pium.life:8080과 같은 접근이 안된다는 이야기다.</p>\n<p>인바운드 규칙에서 8080 혹은 3000번 포트를 열어버리는 방법도 있겠지만 보안 규칙에 손대지 않으면서 해결할 수 있는 방법을 찾아보자.</p>\n<h2>nginx로 포트포워딩하기</h2>\n<p>linux에 존재하는 <code class=\"language-text\">iptables</code> 명령어를 통해 서버 자체적으로 포트포워딩 환경을 구성할 수도 있지만 현재 피움은 하나의 서버에서 두개의 어플리케이션을 배포하고 있고, 도메인도 하나다.</p>\n<p>따라서 후에 설명할 서브도메인을 적용하기 위해서라도 nginx를 이용하기로 한다.</p>\n<h3>nginx 설치하기</h3>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> <span class=\"token function\">install</span> nginx</code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">systemctl status nginx</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/62f73813a3dbce8bfdc5b39ca49641f1/1ed31/28e0139a.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 18.823529411764707%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAApUlEQVR42pWPOw+DMBCDI4TCkPJGKC8ULjQ0Qv3/f8/VZWBplw6f7FtsnziOA9ppGG/gyYMiIVIEEcE5h23bbu+9h1IKbduirmsIIb4504nwCqA3QScN6y1CCIV1XWGtxb7vMMYgxliCl2XBNE2FcRwxz3PxUkqInDPSM+HKFyhQaR+GoWjf90W7rrs9wyF8s3I4Ky+uqgqC23mNeig0jfz9xh98AJx/X27IEAMSAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='28e0139a' title='' src='/static/62f73813a3dbce8bfdc5b39ca49641f1/ca1dc/28e0139a.png' srcset='/static/62f73813a3dbce8bfdc5b39ca49641f1/e7570/28e0139a.png 170w,\n/static/62f73813a3dbce8bfdc5b39ca49641f1/f46e7/28e0139a.png 340w,\n/static/62f73813a3dbce8bfdc5b39ca49641f1/ca1dc/28e0139a.png 680w,\n/static/62f73813a3dbce8bfdc5b39ca49641f1/1ed31/28e0139a.png 974w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>이제 주소창에 인스턴스 ip 를 치고 접속하면 다음과 같이 nginx default 페이지를 볼 수 있다. </p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 663px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/9a3c9696e83150d8f8c8cc0df8288ade/5c8e6/9345764b.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 38.23529411764706%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABcklEQVR42l1STW+CUBD0//8B7x7kZIwnEz1oqPKhNeIFNBaBIqgINSrBpgrTt9tirS+Z7OyGN292l0qn08F0OoVlWYzFYoHlcon5fA7P82CaJgzD4HqSJKBzu92Q5zmDeJkXRYFKrVZDvS6h1Wqh0Wig2Wyi1+uh3W5zrFarkCQJ3W4XcRyzIF18PlRjwcvlgizLcDqdcD6f/8U0TXE8HjkSDocD9vs9NpsNdrud4AnW64A5fceCw+EQmq5h8joB8cFgAEVRIMsyVFWFMZuJuiK4Ji5G2G638H0fQeALHsBxbB5NOY4KvRaGAaIoYtBrjuuKWshuqBaGnnD1Lpx/sMs0pQ4K4Qqiu6eWaSGapmE0GkHXdXY3Ho85J5eKooq4Qr/vQn6xhSOXndl2BtP6wsr5xPV6E2K/S3FcR8xhzXOhVgjUFtWSJOZ5xnEuUAh3xcNCijtKdz+CjsMzCIKA26Tctt9Y8O/kd5S/S54XdzwKfgPTY01z0d7cygAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='9345764b' title='' src='/static/9a3c9696e83150d8f8c8cc0df8288ade/5c8e6/9345764b.png' srcset='/static/9a3c9696e83150d8f8c8cc0df8288ade/e7570/9345764b.png 170w,\n/static/9a3c9696e83150d8f8c8cc0df8288ade/f46e7/9345764b.png 340w,\n/static/9a3c9696e83150d8f8c8cc0df8288ade/5c8e6/9345764b.png 663w' sizes='(max-width: 663px) 100vw, 663px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h3>80 포트 접속을 8080 포트로</h3>\n<blockquote>\n<p>해당 과정은 8080포트에 애플리케이션이 구동중인 상태에서 진행됩니다.\n다음 명령어로 8080포트에서 애플리케이션이 구동중인지 확인한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">lsof</span> <span class=\"token parameter variable\">-i</span> tcp:8080</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 598px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/51a5f82dfc1fcb417df2c1222b0262f7/02e46/1573063d.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 9.411764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAdklEQVR42j2Nuw7DIBRDYUJqRG4hAak8rkgEKwNz//+33MDQ4cjy4GPB34ytvkCGoJSCMQZEb8SYcN8Xcs7ovWOMgRACrLXw3i+ICEIISCn/CP4w9m1HrfWRxJVTfJ4HUkpgZrTW1njKZp8nk1LKEmutV3fO4Qe5aTJ2IHR74gAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='1573063d' title='' src='/static/51a5f82dfc1fcb417df2c1222b0262f7/02e46/1573063d.png' srcset='/static/51a5f82dfc1fcb417df2c1222b0262f7/e7570/1573063d.png 170w,\n/static/51a5f82dfc1fcb417df2c1222b0262f7/f46e7/1573063d.png 340w,\n/static/51a5f82dfc1fcb417df2c1222b0262f7/02e46/1573063d.png 598w' sizes='(max-width: 598px) 100vw, 598px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n</blockquote>\n<p>이제 nginx 설정파일을 작성하여 80포트로 오는 요청을 8080포트로 전환시켜본다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token builtin class-name\">cd</span> /etc/nginx/sites-available/\n\n<span class=\"token function\">sudo</span> <span class=\"token function\">vi</span> default</code></pre></div>\n<blockquote>\n<p>주석처리 되어있는 부분은 제외하고 코드로 표현합니다.</p>\n</blockquote>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># 변경 전 파일내용</span>\nserver <span class=\"token punctuation\">{</span>\n        listen <span class=\"token number\">80</span> default_server<span class=\"token punctuation\">;</span>\n        listen <span class=\"token punctuation\">[</span>::<span class=\"token punctuation\">]</span>:80 default_server<span class=\"token punctuation\">;</span>\n\n        root /var/www/html<span class=\"token punctuation\">;</span>\n\n        index index.html index.htm index.nginx-debian.html<span class=\"token punctuation\">;</span>\n\n        server_name _<span class=\"token punctuation\">;</span>\n\n        location / <span class=\"token punctuation\">{</span>\n                try_files <span class=\"token variable\">$uri</span> <span class=\"token variable\">$uri</span>/ <span class=\"token operator\">=</span><span class=\"token number\">404</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>처음 파일을 열어보면 위와같이 설정되어있을 것이다.</p>\n<p>최대한 간략하게 포트를 변경한다는 목적만 달성해보기 위해 다음 내용들을 수정해보자.</p>\n<ul>\n<li><code class=\"language-text\">root /var/www/html;</code> 주석처리</li>\n<li><code class=\"language-text\">index index.html index.htm index.nginx-debian.html;</code> 주석처리</li>\n<li>\n<p><code class=\"language-text\">location / { ... }</code> 내부 내용에 다음 내용 추가</p>\n<ul>\n<li><code class=\"language-text\">proxy_set_header Host $host:$server_port;</code></li>\n<li><code class=\"language-text\">proxy_set_header X-Real-IP $remote_addr;</code></li>\n<li><code class=\"language-text\">proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;</code></li>\n<li><code class=\"language-text\">proxy_pass http://127.0.0.1:8080;</code></li>\n</ul>\n</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># 변경된 파일내용</span>\nserver <span class=\"token punctuation\">{</span>\n        listen <span class=\"token number\">80</span> default_server<span class=\"token punctuation\">;</span>\n        listen <span class=\"token punctuation\">[</span>::<span class=\"token punctuation\">]</span>:80 default_server<span class=\"token punctuation\">;</span>\n\n        <span class=\"token comment\"># root /var/www/html;</span>\n\n        <span class=\"token comment\"># index index.html index.htm index.nginx-debian.html;</span>\n\n        server_name _<span class=\"token punctuation\">;</span>\n\n        location / <span class=\"token punctuation\">{</span>\n                proxy_set_header Host <span class=\"token variable\">$host</span><span class=\"token builtin class-name\">:</span><span class=\"token variable\">$server_port</span><span class=\"token punctuation\">;</span>\n                proxy_set_header X-Real-IP <span class=\"token variable\">$remote_addr</span><span class=\"token punctuation\">;</span>\n                proxy_set_header X-Forwarded-For <span class=\"token variable\">$proxy_add_x_forwarded_for</span><span class=\"token punctuation\">;</span>\n                proxy_pass http://127.0.0.1:8080<span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>위와같이 설정파일을 수정했다면 다음 명령어를 수행해 nginx를 다시 시작한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">sudo</span> systemctl restart nginx</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 604px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/eef9247c8964e484681e7dfae0a0e86b/1994c/232c6d5d.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 28.235294117647058%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA1ElEQVR42o1QyaqEQBDr//8jBfEg6FkvgrjhLi4XD+5mSEGD8B7DFISUVZikWpmmCcuyYNs2HMeB53mCIAjg+z4Mw4DruljXFaz7vvE8z79gqaqqkGUZkiRBmqZo2xZN06AsSyzLgiiKRJxCv5Tquk5EpmkSzPOMuq4xjqOIcs953/fS04x9nueyH4ZBmIF4heLPTFkUhQjpdFwex4Ft24TP8xSw3/dd5uT3N69QcRzLyeQwDOVEgqlpRKYRmQk5o6l+sz8nX9cFDSagi+7fyd749p4fy07GAzZ6YT4AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='232c6d5d' title='' src='/static/eef9247c8964e484681e7dfae0a0e86b/1994c/232c6d5d.png' srcset='/static/eef9247c8964e484681e7dfae0a0e86b/e7570/232c6d5d.png 170w,\n/static/eef9247c8964e484681e7dfae0a0e86b/f46e7/232c6d5d.png 340w,\n/static/eef9247c8964e484681e7dfae0a0e86b/1994c/232c6d5d.png 604w' sizes='(max-width: 604px) 100vw, 604px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>스프링부트 애플리케이션을 실행중이였다면 위와같은 Whitelabel Error Page를 확인할 수 있을것이다.</p>\n<h2>서브도메인 구성하기</h2>\n<p>이제 80포트에서 8080포트로 요청을 변환하는 과정은 성공했다.</p>\n<p>하나의 서버에 프론트엔드, 백엔드 코드가 같이 띄워져야하므로 서브도메인을 통해 페이지와 API를 구분해줘야한다.</p>\n<h3>index 파일 지정하기 - default 파일 수정</h3>\n<p>프론트에서 빌드 산출물로 나온 index.html을 기본 페이지로 참고하도록 설정하자.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token builtin class-name\">cd</span> /etc/nginx/sites-available/\n\n<span class=\"token function\">sudo</span> <span class=\"token function\">vi</span> default</code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># 변경 전 설정내용</span>\nserver <span class=\"token punctuation\">{</span>\n        listen <span class=\"token number\">80</span> default_server<span class=\"token punctuation\">;</span>\n        listen <span class=\"token punctuation\">[</span>::<span class=\"token punctuation\">]</span>:80 default_server<span class=\"token punctuation\">;</span>\n\n        <span class=\"token comment\"># root /var/www/html;</span>\n\n        <span class=\"token comment\"># index index.html index.htm index.nginx-debian.html;</span>\n\n        server_name _<span class=\"token punctuation\">;</span>\n\n        location / <span class=\"token punctuation\">{</span>\n                proxy_set_header Host <span class=\"token variable\">$host</span><span class=\"token builtin class-name\">:</span><span class=\"token variable\">$server_port</span><span class=\"token punctuation\">;</span>\n                proxy_set_header X-Real-IP <span class=\"token variable\">$remote_addr</span><span class=\"token punctuation\">;</span>\n                proxy_set_header X-Forwarded-For <span class=\"token variable\">$proxy_add_x_forwarded_for</span><span class=\"token punctuation\">;</span>\n                proxy_pass http://127.0.0.1:8080<span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>기존에 80포트를 8080포트로 포워딩시켜주는 설정을 바꿔준다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># 변경 후 설정내용</span>\nserver <span class=\"token punctuation\">{</span>\n        listen <span class=\"token number\">80</span> default_server<span class=\"token punctuation\">;</span>\n        listen <span class=\"token punctuation\">[</span>::<span class=\"token punctuation\">]</span>:80 default_server<span class=\"token punctuation\">;</span>\n\n        root /var/www/html<span class=\"token punctuation\">;</span>\n\n        index index.html<span class=\"token punctuation\">;</span>\n\n        server_name pium.life<span class=\"token punctuation\">;</span>\n\n        location / <span class=\"token punctuation\">{</span>\n        <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>이제 pium.life로 접속하면 <code class=\"language-text\">/var/www/html</code> 경로에 있는 <code class=\"language-text\">index.html</code>을 참조하도록 설정되었다.</p>\n<p>위 설정에 따르면 <code class=\"language-text\">index.html</code> 및 <code class=\"language-text\">bundle.js</code>, <code class=\"language-text\">assets</code> 등의 프론트 리소스들은 서버의 <code class=\"language-text\">/var/www/html</code>를 기준으로 위치시키면 된다.</p>\n<blockquote>\n<p>빌드 산출물 및 CD와 관련된 내용은 본 게시글에서 다루지 않습니다.</p>\n</blockquote>\n<h3>API 서버 지정하기 - api_config 파일 만들기</h3>\n<p><a href=\"http://api.pium.life\">http://api.pium.life</a> 로 API를 호출하도록 구성해보자.</p>\n<p>nginx는 기본적으로 <code class=\"language-text\">/etc/nginx/sites-enabled</code> 경로에 있는 파일들을 참고하여 설정파일에 적용한다.</p>\n<blockquote>\n<p><code class=\"language-text\">/etc/nginx/nginx.conf</code> 파일의 60번째 줄 참고</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 547px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/03d7a15ebc7bea96de5efdc6e60d72a2/25257/f4ceb33e.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 73.52941176470587%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABh0lEQVR42p1U23KCMBBNsglJ0HKJ7QgDHWqnxcE+yLf0//9lu0lUsKOO+nDmLJDsnr3BcsNQCoaMEXSCrMiRZTnassR6vca2bbHrOmyaBquqQudcsKWU8c5/lHZyKESKgltkXCDnkuCZn+DPzO2LmCsUsESpKuKSFKwI6+D46uVLWKWTQy4MAmjM4HiAP+bMo5ilzFKL1hX42zhkQjzndF5DzhWCLCnlLKQvxPJxh68LhgqmphizQ236CP2FSbKh94v71eakEE4KDSb6g5y8E2+oQTUqglRvz6UcFQ5BmVeY6I7wSQE6KoWj7zYE9RyRzmACnzXFjwhATvV7iRwOejsLaQMUh29lsP2ZyEfbxRpOc7gIDfHNiRH1gUnZvc2ZKwTqqo8Suiy8wiwAYBWCTBdvOHdng03rJoFmkDpPu6qUpG0BYqA6JuQYwg57vmtsGK0h6yhAK3H7vcX9fsTd7geHYcC+7wPGccS6rm/vcmp1fPBKFSkleEXWWuq4DrZnY8zp3bUfxB9XPjy8n5tihwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='f4ceb33e' title='' src='/static/03d7a15ebc7bea96de5efdc6e60d72a2/25257/f4ceb33e.png' srcset='/static/03d7a15ebc7bea96de5efdc6e60d72a2/e7570/f4ceb33e.png 170w,\n/static/03d7a15ebc7bea96de5efdc6e60d72a2/f46e7/f4ceb33e.png 340w,\n/static/03d7a15ebc7bea96de5efdc6e60d72a2/25257/f4ceb33e.png 547w' sizes='(max-width: 547px) 100vw, 547px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n</blockquote>\n<p>다음 과정을 통해 서브도메인 설정을 해보자.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token builtin class-name\">cd</span> /etc/nginx/sites-available\n\n<span class=\"token function\">sudo</span> <span class=\"token function\">vi</span> api_config</code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># api_config 파일 내용</span>\nserver <span class=\"token punctuation\">{</span>\n        listen <span class=\"token number\">80</span><span class=\"token punctuation\">;</span>\n        listen <span class=\"token punctuation\">[</span>::<span class=\"token punctuation\">]</span>:80<span class=\"token punctuation\">;</span>\n\n        server_name api.pium.life<span class=\"token punctuation\">;</span>\n        \n        location / <span class=\"token punctuation\">{</span>\n                proxy_set_header Host <span class=\"token variable\">$host</span><span class=\"token builtin class-name\">:</span><span class=\"token variable\">$server_port</span><span class=\"token punctuation\">;</span>\n                proxy_set_header X-Real-IP <span class=\"token variable\">$remote_addr</span><span class=\"token punctuation\">;</span>\n                proxy_set_header X-Forwarded-For <span class=\"token variable\">$proxy_add_x_forwarded_for</span><span class=\"token punctuation\">;</span>\n\n                proxy_pass http://127.0.0.1:8080<span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><code class=\"language-text\">server_name</code> 옵션을 통해 api.pium.life 라는 도메인으로 접근하는 요청을 확인하고, 맞다면 8080 포트로 변경한다.</p>\n<p>위와 같이 파일을 작성했으면 <code class=\"language-text\">sites-enabled</code> 경로에 soft link(바로가기)를 생성한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">ln</span> <span class=\"token parameter variable\">-s</span> /etc/nginx/sites-available/api_config /etc/nginx/sites-enabled/api_config</code></pre></div>\n<p>이제 nginx를 재시작하여 설정을 적용해보자.</p>\n<blockquote>\n<p>💡 Tip : <code class=\"language-text\">nginx -t</code> 명령어를 통해 현재 설정파일이 정상적으로 작성되었는지 확인할 수있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 545px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/b33f0caf9870e4f0864cfa6f8ea7af4d/f2ede/10d7627b.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 10.588235294117647%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAbklEQVR42k2NyQpDIRRDLS3igC3uBHFWHP7//1K8q7cICYcDYVJKPGOMgVIKIQTUWtF7p91ag3MO1loIIaC1Ju825xwf/gZ7MbA5J8nee+y9cc6hzjkTizFirUX8ZoxB/j1KKaGUgtEH6ij4/gz+iCQzrFRZETQAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='10d7627b' title='' src='/static/b33f0caf9870e4f0864cfa6f8ea7af4d/f2ede/10d7627b.png' srcset='/static/b33f0caf9870e4f0864cfa6f8ea7af4d/e7570/10d7627b.png 170w,\n/static/b33f0caf9870e4f0864cfa6f8ea7af4d/f46e7/10d7627b.png 340w,\n/static/b33f0caf9870e4f0864cfa6f8ea7af4d/f2ede/10d7627b.png 545w' sizes='(max-width: 545px) 100vw, 545px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n</blockquote>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/0b93d643e5673d6286e16237ce61a080/833a5/04601361.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 31.176470588235293%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA+klEQVR42oWQ2WqDUBCGfbOmtJe1TUublIQG+prVK3spiLl0ARVB3BdwV/zrHDA0UujAzyxn5uPMcLv9Ebv9AYfjCfzjM/inFzzw2zne4vXtHR+nT1a/2dxhc3v/rzhJkiAIAiTpG6IoQpZlqKoK9XyGoij4mt/yogDZNE34y6i+iEvTFJ7nXRRFEYIgQBiG8H0fpmmimIFN06Cua5RlyUQ5+aqqruAcAVzXZTCCEIziPM8RxzEbIuAiqlFflmXM0/wV0LZtGIYBx3Gg6zo0TYNlWUiS5CIapk0IsP7R2rhxHDEMA1PXdej7nolWatuW1cgvOfX9vtn6rj+fgqGzBfn+VAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='04601361' title='' src='/static/0b93d643e5673d6286e16237ce61a080/ca1dc/04601361.png' srcset='/static/0b93d643e5673d6286e16237ce61a080/e7570/04601361.png 170w,\n/static/0b93d643e5673d6286e16237ce61a080/f46e7/04601361.png 340w,\n/static/0b93d643e5673d6286e16237ce61a080/ca1dc/04601361.png 680w,\n/static/0b93d643e5673d6286e16237ce61a080/833a5/04601361.png 681w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><a href=\"http://api.pium.life\">http://api.pium.life</a> 로 접속하면 API로 연결되는것을 확인할 수 있다.</p>\n<h2>정리</h2>\n<ul>\n<li>8080 포트에 API 애플리케이션을 실행한다.</li>\n<li>도메인 구입 및 A 레코드, CNAME을 설정한다.</li>\n<li>nginx를 설치한다.</li>\n<li>프론트 빌드 산출물을 <code class=\"language-text\">/var/www/html</code> 경로에 준비한다. (index.html, bundle.js, assets 등)</li>\n<li>서브도메인 및 포트포워딩 설정한다.</li>\n</ul>\n<h3>nginx 설정 명령어 따라가기</h3>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># nginx 설치</span>\n<span class=\"token function\">sudo</span> <span class=\"token function\">apt</span> <span class=\"token function\">install</span> nginx\n\n<span class=\"token comment\"># default 파일 수정</span>\n<span class=\"token function\">sudo</span> <span class=\"token function\">vi</span> /etc/nginx/sites-available/default</code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># /etc/nginx/sites-available/default 파일 내용</span>\nserver <span class=\"token punctuation\">{</span>\n        listen <span class=\"token number\">80</span> default_server<span class=\"token punctuation\">;</span>\n        listen <span class=\"token punctuation\">[</span>::<span class=\"token punctuation\">]</span>:80 default_server<span class=\"token punctuation\">;</span>\n\n        root /var/www/html<span class=\"token punctuation\">;</span>\n\n        index index.html<span class=\"token punctuation\">;</span>\n\n        server_name pium.life<span class=\"token punctuation\">;</span>\n\n        location / <span class=\"token punctuation\">{</span>\n        <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># api_config 파일 작성</span>\n<span class=\"token function\">sudo</span> <span class=\"token function\">vi</span> /etc/nginx/sites-available/api_config</code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># api_config 파일 내용</span>\nserver <span class=\"token punctuation\">{</span>\n        listen <span class=\"token number\">80</span> default_server<span class=\"token punctuation\">;</span>\n        listen <span class=\"token punctuation\">[</span>::<span class=\"token punctuation\">]</span>:80 default_server<span class=\"token punctuation\">;</span>\n\n        root /var/www/html<span class=\"token punctuation\">;</span>\n\n        index index.html<span class=\"token punctuation\">;</span>\n\n        server_name pium.life<span class=\"token punctuation\">;</span>\n\n        location / <span class=\"token punctuation\">{</span>\n        <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token comment\"># nginx 재시작 및 설정적용</span>\n<span class=\"token function\">sudo</span> systemctl restart nginx</code></pre></div>\n<h2>Reference</h2>\n<p><a href=\"https://jminie.tistory.com/110\">https://jminie.tistory.com/110</a></p>\n<p><a href=\"https://customer.gabia.com/manual/domain/287/1201\">https://customer.gabia.com/manual/domain/287/1201</a></p>","frontmatter":{"title":"피움의 배포과정","date":"July 18, 2023","update":"July 18, 2023","tags":["배포","인프라"],"series":null},"fields":{"slug":"/pium-deploy-step/","readingTime":{"minutes":10.37}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}},"next":{"fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},"pageContext":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","series":null,"previousPostId":"c826ce0e-1ea7-517c-8d19-84e90a59a798","nextPostId":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/react-setting-without-cra/page-data.json b/page-data/react-setting-without-cra/page-data.json
index 3174482c..f26eb315 100644
--- a/page-data/react-setting-without-cra/page-data.json
+++ b/page-data/react-setting-without-cra/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/react-setting-without-cra/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. CRA없에 webpack으로 react 세팅하기 피움 서비스 환경을 만들기로 하면서, FE의 개발 스펙은 React + TypeScript로 설정하였습니다. React는 당연 현존 최강 라이브러리이고, 여기에 JavaScript의 동적 타입을 컴파일 단계에서 잡아주는 TypeScript까지 더해서 안정…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/hozzijeong\">클린</a>'가 작성했습니다.</p>\n</blockquote>\n<h1>CRA없에 webpack으로 react 세팅하기</h1>\n<p>피움 서비스 환경을 만들기로 하면서, FE의 개발 스펙은 React + TypeScript로 설정하였습니다. React는 당연 현존 최강 라이브러리이고, 여기에 JavaScript의 동적 타입을 컴파일 단계에서 잡아주는 TypeScript까지 더해서 안정적인 서비스를 개발하려고 합니다. </p>\n<p>평소같았으면 <code class=\"language-text\">CRA</code>를 통해 손쉽게 리액트 설치를 하고 개발을 시작했을 텐데, CRA의 단점이 이미 정교하게 세팅된 babel과 webpack 설정을 따라 개발을 해야 한다는 것이고 그에 따른 트레이드 오프가 상당히 많이 발생할 수 있다는 점입니다. (하나의 예시로 CRA를 통해서는 절대경로 지정 하기가 어렵습니다.) 또한, 이왕에 내 서비스 개발하는거 남이 차려준 밥상 보다 내가 직접 한번 해보겠다는 생각으로 webpack으로만 react세팅을 시도해 보려고합니다 (가장 큰 원인은 요구사항이 CRA없이 webpack으로 react 설치하는 거였습니다 ㅎ)</p>\n<h3>package.json 설치</h3>\n<p>우선 가장 처음 해야할 단계입니다. react, typescript, webpack 등 우리가 설치할 의존성 관리와 기타 프로젝트 정보를 저장해 줄 <code class=\"language-text\">package.json</code>을 설치 해줍니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> init // 또는\n<span class=\"token function\">yarn</span> init <span class=\"token parameter variable\">-y</span></code></pre></div>\n<h3>환경 구축에 필요한 패키지 설치</h3>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> react react-dom // react 설치\n<span class=\"token function\">npm</span> <span class=\"token function\">install</span> <span class=\"token parameter variable\">-D</span> typescript @types/react @types/react-dom // typescript 설치\n<span class=\"token function\">npm</span> <span class=\"token function\">install</span> tsc-init // tsconfig 설치\n\n<span class=\"token function\">npm</span> <span class=\"token function\">install</span> <span class=\"token parameter variable\">-D</span> webpack webpack-cli // 웹팩 라이브러리와 명령어를 통해 웹팩을 이용할 수 있는 라이브러리 설치\n<span class=\"token function\">npm</span> <span class=\"token function\">install</span> <span class=\"token parameter variable\">-D</span> html-webpack-plugin webpack-dev-server ts-loader  // 각각 번들 후 html파일을 만들어주는 플러그인, 개발할 때 사용할 웹 서버, typescript파일을 javascript로 변환하는 webpack loader 설치</code></pre></div>\n<p>위에 파일들을 설치하고 나면 이제부터 본격적인 세팅을 합니다.</p>\n<h3>webpack.config.js 파일 설정</h3>\n<p>웹팩 파일 설정입니다. </p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token comment\">// webpack.config.js</span>\n<span class=\"token keyword\">const</span> <span class=\"token punctuation\">{</span> resolve <span class=\"token punctuation\">}</span> <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'path'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// path 설정에 도움을 줍니다.</span>\n<span class=\"token keyword\">const</span> HtmlWebpackPlugin <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'html-webpack-plugin'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> ReactRefreshWebpackPlugin <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'@pmmmwh/react-refresh-webpack-plugin'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> ReactRefreshTypeScript <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'react-refresh-typescript'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> isDevelopment <span class=\"token operator\">=</span> process<span class=\"token punctuation\">.</span>env<span class=\"token punctuation\">.</span><span class=\"token constant\">NODE_ENV</span> <span class=\"token operator\">===</span> <span class=\"token string\">'development'</span><span class=\"token punctuation\">;</span>\n\nmodule<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token literal-property property\">entry</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'index.tsx'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> \n  <span class=\"token literal-property property\">output</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token literal-property property\">path</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'dist'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 번들 파일이 저장될 디렉토리</span>\n    <span class=\"token literal-property property\">filename</span><span class=\"token operator\">:</span> <span class=\"token string\">'bundle.js'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 파일 이름</span>\n    <span class=\"token literal-property property\">assetModuleFilename</span><span class=\"token operator\">:</span> <span class=\"token string\">'assets/[name][ext]'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 에셋의 파일 이름</span>\n    <span class=\"token literal-property property\">clean</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 빌드 이전 결과물 정리 옵션</span>\n    <span class=\"token literal-property property\">publicPath</span><span class=\"token operator\">:</span> <span class=\"token string\">'/'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 빌드된 파일 앞에 붙일 경로</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">resolve</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token literal-property property\">extensions</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'.ts'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'.tsx'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'...'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 파일 확장자. TS및 JSX확자자ㅡㄹ 설정했습니다.</span>\n    <span class=\"token literal-property property\">alias</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 절대경로 설정</span>\n      <span class=\"token literal-property property\">types</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'types'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">pages</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'pages'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">components</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'components'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">hooks</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'hooks'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">apis</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'apis'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">utils</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'utils'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">assets</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'assets'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">constants</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'constants'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">contexts</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'contexts'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">module</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 로더 및 규칙 설정</span>\n    <span class=\"token literal-property property\">rules</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">test</span><span class=\"token operator\">:</span> <span class=\"token regex\"><span class=\"token regex-delimiter\">/</span><span class=\"token regex-source language-regex\">\\.tsx?$</span><span class=\"token regex-delimiter\">/</span><span class=\"token regex-flags\">i</span></span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// ts-loader를 사용했습니다. babel-loader를 사용하지 않은 이유는 IE까지 폴리필 지원을 하지 않아도 되기 때문입니ㅏㄷ.</span>\n        <span class=\"token literal-property property\">exclude</span><span class=\"token operator\">:</span> <span class=\"token regex\"><span class=\"token regex-delimiter\">/</span><span class=\"token regex-source language-regex\">node_modules</span><span class=\"token regex-delimiter\">/</span></span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">loader</span><span class=\"token operator\">:</span> <span class=\"token string\">'ts-loader'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">options</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n          <span class=\"token function-variable function\">getCustomTransformers</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">before</span><span class=\"token operator\">:</span> isDevelopment <span class=\"token operator\">?</span> <span class=\"token punctuation\">[</span><span class=\"token function\">ReactRefreshTypeScript</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n          <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">transpileOnly</span><span class=\"token operator\">:</span> isDevelopment<span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">test</span><span class=\"token operator\">:</span> <span class=\"token regex\"><span class=\"token regex-delimiter\">/</span><span class=\"token regex-source language-regex\">\\.(png|jpg|jpeg|svg|woff|woff2|eot|ttf|otf)$</span><span class=\"token regex-delimiter\">/</span><span class=\"token regex-flags\">i</span></span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'asset/resource'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">plugins</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token keyword\">new</span> <span class=\"token class-name\">HtmlWebpackPlugin</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> <span class=\"token comment\">//빌드된 다음에 템플릿을 지정해줍니다.</span>\n      <span class=\"token literal-property property\">template</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'public'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'index.html'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    <span class=\"token operator\">...</span><span class=\"token punctuation\">(</span>isDevelopment <span class=\"token operator\">?</span> <span class=\"token punctuation\">[</span><span class=\"token keyword\">new</span> <span class=\"token class-name\">ReactRefreshWebpackPlugin</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">devServer</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token literal-property property\">open</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">port</span><span class=\"token operator\">:</span> <span class=\"token number\">8282</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 기본은 3000번이지만 커스텀 기념으로 바꿨씁니다.</span>\n    <span class=\"token keyword\">static</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token literal-property property\">directory</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'public'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">historyApiFallback</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p><code class=\"language-text\">entry</code>: 웹팩의 진입점을 의미. react에서는 src의 index.js에서 모든게 시작됩니다.</p>\n<p><code class=\"language-text\">output</code>: 번들된 파일의 출력 경로를 정의합니다.</p>\n<p><code class=\"language-text\">resolve</code>: 모듈 해석 옵션을 설정합니다.</p>\n<p><code class=\"language-text\">module</code>: 로더의 규칙을 설정합니다.</p>\n<ul>\n<li>보통은 .css,.scss파일 확장을 위해 <code class=\"language-text\">style-loader</code>를 사용하기도 하지만, 피움에서는 CSS-in-JS를 선택했기 때문에 해당 확장자들이 존재하지 않아서 따로 설정하지 않았습니다.</li>\n</ul>\n<p><code class=\"language-text\">plugins</code>:  웹팩 플러그인을 설정합니다. 플러그인은 빌드 과정을 확장하거나 수정하는데 사용됩니다.</p>\n<p><code class=\"language-text\">devServer</code>: 개발 서버 옵션(localhost)을 설정합니다. </p>\n<blockquote>\n<p><code class=\"language-text\">ReactRefreshWebpackPlugin</code>은 리액트에서 저장을 파일 저장을 할 때마다 상태 초기화를 막아주는 역할을 하는 플러그인 입니다. CRA에서는 기본적으로 제공되어 있는 기능이지만, custom기능에는 존재하지 않기에 추가해 줬습니다.</p>\n</blockquote>\n<h3>tsconfig파일 설정</h3>\n<p>tsconfig파일은 typescript의 버전과 모듈 등 컴파일 과정에서 어떤 버전으로 실행할 것인지 등을 설정하는 파일입니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">\"compilerOptions\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 컴파일러 옵션 설정</span>\n    <span class=\"token property\">\"target\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"ES2016\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 컴파일 하는 JS 버전을 ES2016으로 설정</span>\n    <span class=\"token property\">\"module\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"CommonJS\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 컴파일된 모듈 시스템 설정</span>\n    <span class=\"token property\">\"jsx\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"react-jsx\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// JSX문법을 어떻게 컴파일 할지 설정</span>\n\n    <span class=\"token property\">\"strict\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 엄격한 타입 체크</span>\n    <span class=\"token property\">\"exactOptionalPropertyTypes\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 선택적 프로퍼티 타입을 체크함</span>\n    <span class=\"token property\">\"skipLibCheck\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 라이브러리 파일의 타입 체크를 건너뜀</span>\n    <span class=\"token property\">\"esModuleInterop\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// CJS 및 ES 모듈을 함께 사용할 때 옵션을 설정 ES6 모듈 사양을 준수하여 CJS사용 가능하게 함. (즉 import 가능)</span>\n\n    <span class=\"token property\">\"baseUrl\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"src\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 루트가 되는 url</span>\n    <span class=\"token property\">\"paths\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 절대 경로</span>\n      <span class=\"token property\">\"types/*\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"types/*\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"pages/*\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"pages/*\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"components/*\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"components/*\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"contexts/*\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"contexts/*\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"hooks/*\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"hooks/*\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"utils/*\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"utils/*\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"assets/*\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"assets/*\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"constants/*\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"constants/*\"</span><span class=\"token punctuation\">]</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n    <span class=\"token property\">\"types\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"cypress\"</span><span class=\"token punctuation\">]</span> <span class=\"token comment\">// 타입 정의 파일 지정</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"include\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"src/**/*\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"cypress/**/*\"</span><span class=\"token punctuation\">]</span> <span class=\"token comment\">// 컴파일할 소스 코드 파일 정의</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>피움에서는 IE를 제외한 모든 브라우저를 타겟으로 설정하고 있기 때문에 최대한 낮은 버전의 <code class=\"language-text\">JavaScript</code>를 타겟으로 설정했습니다. ES2016을 설정하고 처음 코드를 작성하다가 <code class=\"language-text\">import</code>가 제대로 이루어지지 않는 것을 보고 문제를 찾다가 <code class=\"language-text\">esModuleInterop</code>옵션을 true로 설정해 줘야지 CJS에서도 import가 가능하다는 것을 알게 되었습니다. </p>\n<p>또한, 상대 경로가 아닌 절대경로 사용을 선택했는데, 이는 복잡한 파일 구조를 보기 쉽게 알아보기 위해 설정했습니다.</p>\n<blockquote>\n<p><code class=\"language-text\">esModuleInterop</code>설정은 target으로 하는 옵션이 node16이거나 nodenext인 경우에는 true로 되어있지만, 그게 아닌 경우에는 false이므로, import 구문을 사용하고 싶다면 옵션을 true로 하는것이 좋습니다.</p>\n</blockquote>\n<h3>package.json 설정</h3>\n<p>이제 설정한 웹팩과 tsconfig를 확인해 보기 위해서는 실행 스크립트를 알아야 합니다. 보통 자주 사용하는 명령어로는 <code class=\"language-text\">start</code>와 <code class=\"language-text\">build</code>가 있습니다. 그리고 나머지 명령어는 스토리북이나 cypress에 대한 명령어들입니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span> <span class=\"token comment\">//package.json</span>\n<span class=\"token comment\">//...</span>\n\t<span class=\"token property\">\"name\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"pium-frontend\"</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"version\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"1.0.0\"</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"description\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"피움 프론트엔드\"</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"main\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"src/index.tsx\"</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"scripts\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">\"test\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"echo test is not prepared\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"start\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"webpack-dev-server --mode=development\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"build\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"NODE_ENV=production webpack\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"storybook\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"storybook dev -p 6006\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"build-storybook\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"storybook build -o ./dist/storybook\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"cypress\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"cypress open\"</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token comment\">//...</span>\n<span class=\"token punctuation\">}</span></code></pre></div>","frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)","date":"August 06, 2023","update":"August 06, 2023","tags":["React","Webpack"],"series":null},"fields":{"slug":"/react-setting-without-cra/","readingTime":{"minutes":8.85}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}},"next":{"fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},"pageContext":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","series":null,"previousPostId":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","nextPostId":"66383c86-e2c8-533a-90e0-2effae572742"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/react-setting-without-cra/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. CRA없에 webpack으로 react 세팅하기 피움 서비스 환경을 만들기로 하면서, FE의 개발 스펙은 React + TypeScript로 설정하였습니다. React는 당연 현존 최강 라이브러리이고, 여기에 JavaScript의 동적 타입을 컴파일 단계에서 잡아주는 TypeScript까지 더해서 안정…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/hozzijeong\">클린</a>'가 작성했습니다.</p>\n</blockquote>\n<h1>CRA없에 webpack으로 react 세팅하기</h1>\n<p>피움 서비스 환경을 만들기로 하면서, FE의 개발 스펙은 React + TypeScript로 설정하였습니다. React는 당연 현존 최강 라이브러리이고, 여기에 JavaScript의 동적 타입을 컴파일 단계에서 잡아주는 TypeScript까지 더해서 안정적인 서비스를 개발하려고 합니다. </p>\n<p>평소같았으면 <code class=\"language-text\">CRA</code>를 통해 손쉽게 리액트 설치를 하고 개발을 시작했을 텐데, CRA의 단점이 이미 정교하게 세팅된 babel과 webpack 설정을 따라 개발을 해야 한다는 것이고 그에 따른 트레이드 오프가 상당히 많이 발생할 수 있다는 점입니다. (하나의 예시로 CRA를 통해서는 절대경로 지정 하기가 어렵습니다.) 또한, 이왕에 내 서비스 개발하는거 남이 차려준 밥상 보다 내가 직접 한번 해보겠다는 생각으로 webpack으로만 react세팅을 시도해 보려고합니다 (가장 큰 원인은 요구사항이 CRA없이 webpack으로 react 설치하는 거였습니다 ㅎ)</p>\n<h3>package.json 설치</h3>\n<p>우선 가장 처음 해야할 단계입니다. react, typescript, webpack 등 우리가 설치할 의존성 관리와 기타 프로젝트 정보를 저장해 줄 <code class=\"language-text\">package.json</code>을 설치 해줍니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> init // 또는\n<span class=\"token function\">yarn</span> init <span class=\"token parameter variable\">-y</span></code></pre></div>\n<h3>환경 구축에 필요한 패키지 설치</h3>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> react react-dom // react 설치\n<span class=\"token function\">npm</span> <span class=\"token function\">install</span> <span class=\"token parameter variable\">-D</span> typescript @types/react @types/react-dom // typescript 설치\n<span class=\"token function\">npm</span> <span class=\"token function\">install</span> tsc-init // tsconfig 설치\n\n<span class=\"token function\">npm</span> <span class=\"token function\">install</span> <span class=\"token parameter variable\">-D</span> webpack webpack-cli // 웹팩 라이브러리와 명령어를 통해 웹팩을 이용할 수 있는 라이브러리 설치\n<span class=\"token function\">npm</span> <span class=\"token function\">install</span> <span class=\"token parameter variable\">-D</span> html-webpack-plugin webpack-dev-server ts-loader  // 각각 번들 후 html파일을 만들어주는 플러그인, 개발할 때 사용할 웹 서버, typescript파일을 javascript로 변환하는 webpack loader 설치</code></pre></div>\n<p>위에 파일들을 설치하고 나면 이제부터 본격적인 세팅을 합니다.</p>\n<h3>webpack.config.js 파일 설정</h3>\n<p>웹팩 파일 설정입니다. </p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token comment\">// webpack.config.js</span>\n<span class=\"token keyword\">const</span> <span class=\"token punctuation\">{</span> resolve <span class=\"token punctuation\">}</span> <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'path'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// path 설정에 도움을 줍니다.</span>\n<span class=\"token keyword\">const</span> HtmlWebpackPlugin <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'html-webpack-plugin'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> ReactRefreshWebpackPlugin <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'@pmmmwh/react-refresh-webpack-plugin'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> ReactRefreshTypeScript <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'react-refresh-typescript'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> isDevelopment <span class=\"token operator\">=</span> process<span class=\"token punctuation\">.</span>env<span class=\"token punctuation\">.</span><span class=\"token constant\">NODE_ENV</span> <span class=\"token operator\">===</span> <span class=\"token string\">'development'</span><span class=\"token punctuation\">;</span>\n\nmodule<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token literal-property property\">entry</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'index.tsx'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> \n  <span class=\"token literal-property property\">output</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token literal-property property\">path</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'dist'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 번들 파일이 저장될 디렉토리</span>\n    <span class=\"token literal-property property\">filename</span><span class=\"token operator\">:</span> <span class=\"token string\">'bundle.js'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 파일 이름</span>\n    <span class=\"token literal-property property\">assetModuleFilename</span><span class=\"token operator\">:</span> <span class=\"token string\">'assets/[name][ext]'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 에셋의 파일 이름</span>\n    <span class=\"token literal-property property\">clean</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 빌드 이전 결과물 정리 옵션</span>\n    <span class=\"token literal-property property\">publicPath</span><span class=\"token operator\">:</span> <span class=\"token string\">'/'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 빌드된 파일 앞에 붙일 경로</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">resolve</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token literal-property property\">extensions</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'.ts'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'.tsx'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'...'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 파일 확장자. TS및 JSX확자자ㅡㄹ 설정했습니다.</span>\n    <span class=\"token literal-property property\">alias</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 절대경로 설정</span>\n      <span class=\"token literal-property property\">types</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'types'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">pages</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'pages'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">components</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'components'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">hooks</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'hooks'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">apis</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'apis'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">utils</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'utils'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">assets</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'assets'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">constants</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'constants'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">contexts</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'src'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'contexts'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">module</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 로더 및 규칙 설정</span>\n    <span class=\"token literal-property property\">rules</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">test</span><span class=\"token operator\">:</span> <span class=\"token regex\"><span class=\"token regex-delimiter\">/</span><span class=\"token regex-source language-regex\">\\.tsx?$</span><span class=\"token regex-delimiter\">/</span><span class=\"token regex-flags\">i</span></span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// ts-loader를 사용했습니다. babel-loader를 사용하지 않은 이유는 IE까지 폴리필 지원을 하지 않아도 되기 때문입니ㅏㄷ.</span>\n        <span class=\"token literal-property property\">exclude</span><span class=\"token operator\">:</span> <span class=\"token regex\"><span class=\"token regex-delimiter\">/</span><span class=\"token regex-source language-regex\">node_modules</span><span class=\"token regex-delimiter\">/</span></span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">loader</span><span class=\"token operator\">:</span> <span class=\"token string\">'ts-loader'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">options</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n          <span class=\"token function-variable function\">getCustomTransformers</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">before</span><span class=\"token operator\">:</span> isDevelopment <span class=\"token operator\">?</span> <span class=\"token punctuation\">[</span><span class=\"token function\">ReactRefreshTypeScript</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n          <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">transpileOnly</span><span class=\"token operator\">:</span> isDevelopment<span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">test</span><span class=\"token operator\">:</span> <span class=\"token regex\"><span class=\"token regex-delimiter\">/</span><span class=\"token regex-source language-regex\">\\.(png|jpg|jpeg|svg|woff|woff2|eot|ttf|otf)$</span><span class=\"token regex-delimiter\">/</span><span class=\"token regex-flags\">i</span></span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'asset/resource'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">plugins</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token keyword\">new</span> <span class=\"token class-name\">HtmlWebpackPlugin</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> <span class=\"token comment\">//빌드된 다음에 템플릿을 지정해줍니다.</span>\n      <span class=\"token literal-property property\">template</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'public'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'index.html'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    <span class=\"token operator\">...</span><span class=\"token punctuation\">(</span>isDevelopment <span class=\"token operator\">?</span> <span class=\"token punctuation\">[</span><span class=\"token keyword\">new</span> <span class=\"token class-name\">ReactRefreshWebpackPlugin</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">devServer</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token literal-property property\">open</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">port</span><span class=\"token operator\">:</span> <span class=\"token number\">8282</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 기본은 3000번이지만 커스텀 기념으로 바꿨씁니다.</span>\n    <span class=\"token keyword\">static</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token literal-property property\">directory</span><span class=\"token operator\">:</span> <span class=\"token function\">resolve</span><span class=\"token punctuation\">(</span>__dirname<span class=\"token punctuation\">,</span> <span class=\"token string\">'public'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">historyApiFallback</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p><code class=\"language-text\">entry</code>: 웹팩의 진입점을 의미. react에서는 src의 index.js에서 모든게 시작됩니다.</p>\n<p><code class=\"language-text\">output</code>: 번들된 파일의 출력 경로를 정의합니다.</p>\n<p><code class=\"language-text\">resolve</code>: 모듈 해석 옵션을 설정합니다.</p>\n<p><code class=\"language-text\">module</code>: 로더의 규칙을 설정합니다.</p>\n<ul>\n<li>보통은 .css,.scss파일 확장을 위해 <code class=\"language-text\">style-loader</code>를 사용하기도 하지만, 피움에서는 CSS-in-JS를 선택했기 때문에 해당 확장자들이 존재하지 않아서 따로 설정하지 않았습니다.</li>\n</ul>\n<p><code class=\"language-text\">plugins</code>:  웹팩 플러그인을 설정합니다. 플러그인은 빌드 과정을 확장하거나 수정하는데 사용됩니다.</p>\n<p><code class=\"language-text\">devServer</code>: 개발 서버 옵션(localhost)을 설정합니다. </p>\n<blockquote>\n<p><code class=\"language-text\">ReactRefreshWebpackPlugin</code>은 리액트에서 저장을 파일 저장을 할 때마다 상태 초기화를 막아주는 역할을 하는 플러그인 입니다. CRA에서는 기본적으로 제공되어 있는 기능이지만, custom기능에는 존재하지 않기에 추가해 줬습니다.</p>\n</blockquote>\n<h3>tsconfig파일 설정</h3>\n<p>tsconfig파일은 typescript의 버전과 모듈 등 컴파일 과정에서 어떤 버전으로 실행할 것인지 등을 설정하는 파일입니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">\"compilerOptions\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 컴파일러 옵션 설정</span>\n    <span class=\"token property\">\"target\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"ES2016\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 컴파일 하는 JS 버전을 ES2016으로 설정</span>\n    <span class=\"token property\">\"module\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"CommonJS\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 컴파일된 모듈 시스템 설정</span>\n    <span class=\"token property\">\"jsx\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"react-jsx\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// JSX문법을 어떻게 컴파일 할지 설정</span>\n\n    <span class=\"token property\">\"strict\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 엄격한 타입 체크</span>\n    <span class=\"token property\">\"exactOptionalPropertyTypes\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 선택적 프로퍼티 타입을 체크함</span>\n    <span class=\"token property\">\"skipLibCheck\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 라이브러리 파일의 타입 체크를 건너뜀</span>\n    <span class=\"token property\">\"esModuleInterop\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// CJS 및 ES 모듈을 함께 사용할 때 옵션을 설정 ES6 모듈 사양을 준수하여 CJS사용 가능하게 함. (즉 import 가능)</span>\n\n    <span class=\"token property\">\"baseUrl\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"src\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 루트가 되는 url</span>\n    <span class=\"token property\">\"paths\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 절대 경로</span>\n      <span class=\"token property\">\"types/*\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"types/*\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"pages/*\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"pages/*\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"components/*\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"components/*\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"contexts/*\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"contexts/*\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"hooks/*\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"hooks/*\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"utils/*\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"utils/*\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"assets/*\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"assets/*\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"constants/*\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"constants/*\"</span><span class=\"token punctuation\">]</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n    <span class=\"token property\">\"types\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"cypress\"</span><span class=\"token punctuation\">]</span> <span class=\"token comment\">// 타입 정의 파일 지정</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"include\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"src/**/*\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"cypress/**/*\"</span><span class=\"token punctuation\">]</span> <span class=\"token comment\">// 컴파일할 소스 코드 파일 정의</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>피움에서는 IE를 제외한 모든 브라우저를 타겟으로 설정하고 있기 때문에 최대한 낮은 버전의 <code class=\"language-text\">JavaScript</code>를 타겟으로 설정했습니다. ES2016을 설정하고 처음 코드를 작성하다가 <code class=\"language-text\">import</code>가 제대로 이루어지지 않는 것을 보고 문제를 찾다가 <code class=\"language-text\">esModuleInterop</code>옵션을 true로 설정해 줘야지 CJS에서도 import가 가능하다는 것을 알게 되었습니다. </p>\n<p>또한, 상대 경로가 아닌 절대경로 사용을 선택했는데, 이는 복잡한 파일 구조를 보기 쉽게 알아보기 위해 설정했습니다.</p>\n<blockquote>\n<p><code class=\"language-text\">esModuleInterop</code>설정은 target으로 하는 옵션이 node16이거나 nodenext인 경우에는 true로 되어있지만, 그게 아닌 경우에는 false이므로, import 구문을 사용하고 싶다면 옵션을 true로 하는것이 좋습니다.</p>\n</blockquote>\n<h3>package.json 설정</h3>\n<p>이제 설정한 웹팩과 tsconfig를 확인해 보기 위해서는 실행 스크립트를 알아야 합니다. 보통 자주 사용하는 명령어로는 <code class=\"language-text\">start</code>와 <code class=\"language-text\">build</code>가 있습니다. 그리고 나머지 명령어는 스토리북이나 cypress에 대한 명령어들입니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span> <span class=\"token comment\">//package.json</span>\n<span class=\"token comment\">//...</span>\n\t<span class=\"token property\">\"name\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"pium-frontend\"</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"version\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"1.0.0\"</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"description\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"피움 프론트엔드\"</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"main\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"src/index.tsx\"</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"scripts\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">\"test\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"echo test is not prepared\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"start\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"webpack-dev-server --mode=development\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"build\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"NODE_ENV=production webpack\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"storybook\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"storybook dev -p 6006\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"build-storybook\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"storybook build -o ./dist/storybook\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"cypress\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"cypress open\"</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token comment\">//...</span>\n<span class=\"token punctuation\">}</span></code></pre></div>","frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)","date":"August 06, 2023","update":"August 06, 2023","tags":["React","Webpack"],"series":null},"fields":{"slug":"/react-setting-without-cra/","readingTime":{"minutes":8.85}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}},"next":{"fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},"pageContext":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","series":null,"previousPostId":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","nextPostId":"66383c86-e2c8-533a-90e0-2effae572742"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/restdocs-start/page-data.json b/page-data/restdocs-start/page-data.json
index c9e1cc13..e99dffd9 100644
--- a/page-data/restdocs-start/page-data.json
+++ b/page-data/restdocs-start/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/restdocs-start/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 사건의 발단  3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.  그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다. 당황하지 않고 침착하게 f12를 눌러 개발자도구를 열고 네트워크탭을 확인해보니 API가 이상하게 호출되고있었다. 평소 프론트분들을 굉장…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>사건의 발단</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/08fceeea03b3158d2d5d7a1fb9d913b6/5f864/c4fe129c.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 17.64705882352941%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAW0lEQVR42qWPSw6AIBTEOIbK7yEgCmLU+99tRNYGTVx013QyjGyAMh5CW3A1NpHkEPMOshMGaR4dlvKJack12guqYouO66ZXggf8vJb1b8E3WIgbXEj1zt/YzQWzXmzCAC7E+AAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='c4fe129c' title='' src='/static/08fceeea03b3158d2d5d7a1fb9d913b6/ca1dc/c4fe129c.png' srcset='/static/08fceeea03b3158d2d5d7a1fb9d913b6/e7570/c4fe129c.png 170w,\n/static/08fceeea03b3158d2d5d7a1fb9d913b6/f46e7/c4fe129c.png 340w,\n/static/08fceeea03b3158d2d5d7a1fb9d913b6/ca1dc/c4fe129c.png 680w,\n/static/08fceeea03b3158d2d5d7a1fb9d913b6/02d09/c4fe129c.png 1020w,\n/static/08fceeea03b3158d2d5d7a1fb9d913b6/5f864/c4fe129c.png 1066w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 386px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/9a5284a76d1e03ec6ea7c392f6bdb02f/d999c/dbb1d706.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 147.05882352941174%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAdCAYAAACqhkzFAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEAUlEQVR42q1T20tjZxDPH6CPCooXFKQvFkpLKaVCRQrFPrguXurdgiJ4QV+841q0226hyxbWS7FqaERUCopYfVDX7GrUJOvGCzGSRJMY7eJaY1ZNTHP113xjTszFy7b0wJxvzpyZ38xvZj4ebnkuLi7YO8Dmui0EvJvRLgNdTjtMByqcvVbAabPcCcq7vrLLAAby6tc8PP/2A4jaP4K04x6OtxdvBeXdwJXAxE++hORxCt7Kx6GeF2DpyVcQff8p/lLM4sJducf5ZkAuq/bZU7xo+xDinz6Hbl2ILbUOM3PzUMtfQtZ1D8+a34N66sdrK+X5DwCwnhxA9OgzzH/3MWTd9/HmtR7PhXNQbm3CarNjnf8Nlh9/gc3f6+D4+yyoyiBA8+EO3mql0Iv4ED54H6b9NZgsNmwqNTAb9iB6+AnUkz9cDsxhe4ceeoBtJgMkP7t79igJ+kUBjuV/4OXTNCy4Ac1vVDcO5lpAl9NBqulAifXfSvHCPeW5B4lY+eVrGDVSv8TvvIdcC1wuByzGP2Ex6N0UrX7//t1ieyix4Kv74tZd//Wm+CF7XndcOy+gy53V6XTSyelMaOpmMzY2NqBSqS6r9UhgDNeGO3toNBoxMjKC2dnZO/vnBWTZWRVqtRpKpXuy6+tYW1uDXq8nfW9vDwqFAru7uzg8PITBYMDW1hbkcjm2t7cp/vz8/AqwpaUF+fn5aG1tRXt7O4qKipCdnY2Ojg6kpKSgrq4OqampaGtrg0AgwMTEBNnKy8vR1NSEkpISSugFNJlMODk5gcViIWHfrHdWqxWnp6eU/ezsjE6HwwG73U525svsR0dHsNlsV4C+/WK0GCV2MjpMtFotfWs0Guzs7BBtnU5HtsCeEiA3URYwPj6OpaUlTE1Noa+vDwMDA5icnCQZHh7G0NAQpqenMTg4SDqrjJt8UIWMkkQioSoWFxchk8mo8fv7+5RsYWGBhrSysgKxWEzDCJy8dw85yqOjoxTEKpyZmSGQ1dVVSKVSjI2NQSgUEgOmLy8vg2MYVKFv2b4nt7jc8gb2LNBGgHw+H+np6bQuubm5tEI5OTkoLS1FZWUlSXV1NSoqKlBQUEA+eXl55FdYWEi+bEBewIaGBoSGhiI+Ph4xMTGIjY1FREQEkpKSkJGRgbS0NGRmZlLShIQEREVFkR/nGx4eTr32ArJedHV1ob+/nybLSU9PD9nZgnd2dpLe29vr58OE2Y6Pj68A2ToUFxejqqqKaHHCbkJtbS2am5vR2NiImpoasvn6sHaUlZXRJngB6+vrERISgri4OERHR5MwOox2cnIyXcOsrCwkJiYiMjKS/vn6hYWFBVPu7u6m4TDavsJR4ugF/ud8/Cj/n88/kgfM4ZMxzOQAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='dbb1d706' title='' src='/static/9a5284a76d1e03ec6ea7c392f6bdb02f/d999c/dbb1d706.png' srcset='/static/9a5284a76d1e03ec6ea7c392f6bdb02f/e7570/dbb1d706.png 170w,\n/static/9a5284a76d1e03ec6ea7c392f6bdb02f/f46e7/dbb1d706.png 340w,\n/static/9a5284a76d1e03ec6ea7c392f6bdb02f/d999c/dbb1d706.png 386w' sizes='(max-width: 386px) 100vw, 386px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다.</p>\n<p>당황하지 않고 침착하게 f12를 눌러 개발자도구를 열고 네트워크탭을 확인해보니 API가 이상하게 호출되고있었다.</p>\n<p>평소 프론트분들을 굉장히 신뢰하던 주노는 설마 하는 마음에 Notion을 열어봤다. 아니나다를까 Notion에 API 명세가 이상하게 작성되어있었다.</p>\n<p>범인은 바로 이것저것 끄적이다가 되돌리기를 하지 않은 주노...</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/d7555226dc6d80df7c93e19c30af3caa/69dce/03624593.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 89.99999999999999%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAACIElEQVR42p1Uy27bMBDMFwS9FEltS6REkaJEiqJsWH4ocNxLAvQPiqJAC/RcFOih7ddPl1Lc2ogdBz4Mdi3Js5zZXV79+v0H33/8BB8zZIlEkmlM4hTjKLkIV1++fsPHT5/BmIAgsjQQhpcT3sdTOEl4/eYtbkYxXDNHM1v0kLnBKErxjkgPMP6fjyYnCIM8keWwxsJWDrWrUdc1lMqRiQxSSshsgKJcPeUxS6noEcIRVUuFxKzxcJWFMyUaIqwoapWhUJIwRKslylz2OePp0VP2hInQJHUJT3LrpiXJFhHLcEsS93Gzl5+UHAjjJIMuHZS24NTp3ctgx3OcacotjYvKS3x4eIS5r7DqOqzXHeZtS1j0WC5XaBcLaF0goeKnTrfnocJiPkc9831DaudgrT2AMYaiQSZzhP+8QJiAUdWmmWKzeU8n3FDcYL5cY3O/xXa7xWq1RkVFvPfUfX2OkIOnikamQWmpu26KTJUQUiPigjzjg297Pr64KYNkDU/dreoZ/LRFYeo+L63v8xAtFQq5ocLWDQjPjxIyGuBqSh8YR6bTPpOnKQ17sCKiAY7ppDtE7BDPCMcjkmM4mocG3bLD3V2Hljocuqqkoh1n4Jz/Q8zOXA5hfcLFIEVYpxjetbQhhk5KA5+kB2SvIwxdJim60BBCwFcVCpo3rYffFxEGb1SeI0lTGJ33MmMCY+QvP8QrCIexMZVHXlQXX6w7/AUh4f39C7ADnwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='03624593' title='' src='/static/d7555226dc6d80df7c93e19c30af3caa/ca1dc/03624593.png' srcset='/static/d7555226dc6d80df7c93e19c30af3caa/e7570/03624593.png 170w,\n/static/d7555226dc6d80df7c93e19c30af3caa/f46e7/03624593.png 340w,\n/static/d7555226dc6d80df7c93e19c30af3caa/ca1dc/03624593.png 680w,\n/static/d7555226dc6d80df7c93e19c30af3caa/02d09/03624593.png 1020w,\n/static/d7555226dc6d80df7c93e19c30af3caa/69dce/03624593.png 1194w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>위와 같은 사건을 겪으면서 사람 손으로 작성되는 문서의 신뢰도 문제를 인지했고, API 문서화를 자동화할 수 있는 기술의 필요성을 느꼈다.</p>\n<h2>서론</h2>\n<p>API 문서화 방식에 대해 찾아본 결과 크게 두가지 방법을 알 수 있었다.</p>\n<h3>알아보기</h3>\n<ol>\n<li>Spring RestDocs</li>\n</ol>\n<p>Spring Rest Docs는 Spring에서 제공하는 문서화 도구다.</p>\n<ul>\n<li>테스트 작성이 강제된다는 특징이 있다.</li>\n<li>테스트를 통해 도출된 결과를 문서로 작성하기 프로덕션 코드에 영향이 없다는 특징이 있다.</li>\n<li>아래 설명할 Swagger와 비교했을 때 설정이 약간 번거롭다는 단점이 있다. </li>\n<li>Swagger</li>\n</ul>\n<p>Swagger는 API 문서화를 돕는 오픈소스 툴이다.</p>\n<ul>\n<li>테스트 작성이 필수가 아니라는 특징이 있다.</li>\n<li>swagger 이용 시 실제 API가 호출된다는 특징이 있다.</li>\n<li>테스트 작성을 안하는 대신 프로덕션 코드에 문서ㅘ와 관련된 코드가 작성된다. (DTO, Controller 등)</li>\n</ul>\n<h3>Spring RestDocs</h3>\n<p>피움 팀은 RestDocs를 사용하기로 결정했고 이유는 다음과 같다.</p>\n<ul>\n<li>현재 피움팀은 각 계층별 테스트를 꼼꼼하게 작성하고있고 인수테스트까지 작성하고 관리하고있으므로 테스트가 강제된다는 점은 큰 단점으로 다가오지 않았다.</li>\n<li>코드리뷰가 필수적으로 이뤄지는 현 스프린트 단계에서 프로덕션 코드의 가독성을 해치는 방향이 오히려 큰 단점이 될 수 있다.</li>\n<li>성공하는 테스트에 대해서만 문서화가 이뤄지기 때문에 문제상황에서 필요했던 문서의 신뢰성을 충족시킨다.</li>\n<li>(프론트 쵸파가 RestDocs를 좋아한다 🦌)</li>\n</ul>\n<blockquote>\n<p><a href=\"https://github.com/woowacourse-teams/2023-pium/discussions/181\">피움🌱 문서화 도입 관련 discussion</a></p>\n</blockquote>\n<h2>시작하기</h2>\n<p>RestDocs를 설정하는 과정을 정리하려고한다.</p>\n<h3>RestAssured vs MockMvc?</h3>\n<p>RestDocs를 적용하는 방법은 RestAssured를 기반으로 문서를 생성하는 방법과 MockMvc를 기반으로 문서를 생성하는 방법으로 크게 두가지가 있다.</p>\n<p>피움팀은 현재 인수테스트도 작성되어있기 때문에 RestAssured를 사용해도 충분히 문제가 없다.</p>\n<p>하지만 여러 계층이 협업하는 인수테스트 환경에 문서화와 관련된 코드가 작성된다면 안그래도 복잡한 인수테스트 코드의 가독성을 해칠 것이라고 우려되었다.</p>\n<p>슬라이스 테스트를 수행하여 비교적 코드의 무게가 가벼운 Controller 테스트가 MockMvc로 작성되어있었기 때문에 MockMvc를 기반으로 RestAssured를 적용하기로 결정했다.</p>\n<h3>Gradle 설정</h3>\n<blockquote>\n<p>TIP : <code class=\"language-text\">asciidoctor</code>는 adoc 파일을 html 등으로 변환해주는 도구입니다</p>\n</blockquote>\n<div class=\"gatsby-highlight\" data-language=\"gradle\"><pre class=\"language-gradle\"><code class=\"language-gradle\"><span class=\"token keyword\">plugins</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token punctuation\">...</span>\n    id <span class=\"token interpolation-string\"><span class=\"token string\">\"org.asciidoctor.jvm.convert\"</span></span> version <span class=\"token interpolation-string\"><span class=\"token string\">\"3.3.2\"</span></span> <span class=\"token comment\">// asciidoctor 플러그인 추가</span>\n<span class=\"token punctuation\">}</span>\n\nconfigurations <span class=\"token punctuation\">{</span>\n    asciidoctorExt <span class=\"token comment\">// asciidoctorExt에 대한 선언</span>\n    <span class=\"token punctuation\">...</span>\n<span class=\"token punctuation\">}</span>\n\n\n<span class=\"token keyword\">dependencies</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token punctuation\">...</span>\n    asciidoctorExt <span class=\"token string\">'org.springframework.restdocs:spring-restdocs-asciidoctor'</span> <span class=\"token comment\">// asciidoctorExt에 spring-restdocs-asciidoctor 의존성 추가</span>\n    testImplementation <span class=\"token string\">'org.springframework.restdocs:spring-restdocs-mockmvc'</span> <span class=\"token comment\">// mockMvc 사용</span>\n<span class=\"token punctuation\">}</span>\n\next <span class=\"token punctuation\">{</span>\n    snippetsDir <span class=\"token operator\">=</span> <span class=\"token function\">file</span><span class=\"token punctuation\">(</span><span class=\"token string\">'build/generated-snippets'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 스니펫이 생성되는 디렉터리 경로를 설정</span>\n<span class=\"token punctuation\">}</span>\n\ntest <span class=\"token punctuation\">{</span>\n    outputs<span class=\"token punctuation\">.</span>dir snippetsDir <span class=\"token comment\">// 스니펫이 생성되는 디렉터리를 설정</span>\n<span class=\"token punctuation\">}</span>\n\nasciidoctor <span class=\"token punctuation\">{</span> <span class=\"token comment\">// Gradle이 asciidoctor Task를 수행하는 설정 (함수 선언)</span>\n    configurations <span class=\"token string\">'asciidoctorExt'</span> <span class=\"token comment\">// asciidoctor 확장 설정</span>\n    <span class=\"token function\">baseDirFollowsSourceFile</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// .adoc 파일을 include 하면서 사용하기 위한 설정</span>\n    inputs<span class=\"token punctuation\">.</span>dir snippetsDir <span class=\"token comment\">// 스니펫을 불러올 위치 설정</span>\n    dependsOn test <span class=\"token comment\">// Gradle의 test Task 이후 asciidoctor를 수행</span>\n<span class=\"token punctuation\">}</span>\n\nasciidoctor<span class=\"token punctuation\">.</span>doFirst <span class=\"token punctuation\">{</span> <span class=\"token comment\">// asciidoctor Task가 수행될 때 가장 먼저 수행</span>\n    delete <span class=\"token function\">file</span><span class=\"token punctuation\">(</span><span class=\"token string\">'src/main/resources/static/docs'</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\ntask <span class=\"token function\">copyDocument</span><span class=\"token punctuation\">(</span>type<span class=\"token punctuation\">:</span> Copy<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 생성된 html 파일을 옮긴다</span>\n    dependsOn asciidoctor <span class=\"token comment\">// Gradle의 asciidoctor Task 이후 수행</span>\n    from <span class=\"token function\">file</span><span class=\"token punctuation\">(</span><span class=\"token interpolation-string\"><span class=\"token string\">\"</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span><span class=\"token expression\">asciidoctor<span class=\"token punctuation\">.</span>outputDir</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">\"</span></span><span class=\"token punctuation\">)</span>\n    into <span class=\"token function\">file</span><span class=\"token punctuation\">(</span><span class=\"token interpolation-string\"><span class=\"token string\">\"src/main/resources/static/docs\"</span></span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\nbuild <span class=\"token punctuation\">{</span>\n    dependsOn copyDocument <span class=\"token comment\">// build 이후 html 파일 복사</span>\n<span class=\"token punctuation\">}</span>\n\nbootJar <span class=\"token punctuation\">{</span>\n    dependsOn asciidoctor <span class=\"token comment\">// asciidoctor 이후 bootJar 수행</span>\n    from <span class=\"token punctuation\">(</span><span class=\"token interpolation-string\"><span class=\"token string\">\"</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span><span class=\"token expression\">asciidoctor<span class=\"token punctuation\">.</span>outputDir</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">\"</span></span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        into <span class=\"token string\">'static/docs'</span>\n    <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">...</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h3>테스트 코드 작성하기</h3>\n<p>우선 다음과 같은 방식으로 코드를 작성할 수 있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@AutoConfigureRestDocs</span>\n<span class=\"token annotation punctuation\">@WebMvcTest</span><span class=\"token punctuation\">(</span>controllers <span class=\"token operator\">=</span> <span class=\"token class-name\">PetPlantController</span><span class=\"token punctuation\">.</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">PetPlantControllerTest</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token annotation punctuation\">@Autowired</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">MockMvc</span> mockMvc<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@MockBean</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">PetPlantService</span> petPlantService<span class=\"token punctuation\">;</span>\n    \n    <span class=\"token annotation punctuation\">@Test</span>\n    <span class=\"token keyword\">void</span> 반려_식물_단건_조회_정상_요청시_200을_반환<span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">throws</span> <span class=\"token class-name\">Exception</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">PetPlantResponse</span> response <span class=\"token operator\">=</span> <span class=\"token constant\">RESPONSE</span><span class=\"token punctuation\">.</span>피우미_응답<span class=\"token punctuation\">;</span>\n        <span class=\"token function\">given</span><span class=\"token punctuation\">(</span>petPlantService<span class=\"token punctuation\">.</span><span class=\"token function\">read</span><span class=\"token punctuation\">(</span><span class=\"token function\">anyLong</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token function\">any</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">Member</span><span class=\"token punctuation\">.</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">.</span><span class=\"token function\">willReturn</span><span class=\"token punctuation\">(</span>response<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    \n        mockMvc<span class=\"token punctuation\">.</span><span class=\"token function\">perform</span><span class=\"token punctuation\">(</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"/pet-plants/{id}\"</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1L</span><span class=\"token punctuation\">)</span>\n                        <span class=\"token punctuation\">.</span><span class=\"token function\">header</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Authorization\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"pium@gmail.com\"</span><span class=\"token punctuation\">)</span>\n                        <span class=\"token punctuation\">.</span><span class=\"token function\">contentType</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">MediaType</span><span class=\"token punctuation\">.</span><span class=\"token constant\">APPLICATION_JSON</span><span class=\"token punctuation\">)</span>\n                        <span class=\"token punctuation\">.</span><span class=\"token function\">characterEncoding</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">StandardCharsets</span><span class=\"token punctuation\">.</span><span class=\"token constant\">UTF_8</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">.</span><span class=\"token function\">andDo</span><span class=\"token punctuation\">(</span><span class=\"token function\">document</span><span class=\"token punctuation\">(</span>\n                            <span class=\"token string\">\"petPlant/findById/\"</span><span class=\"token punctuation\">,</span>\n                            <span class=\"token class-name\">Preprocessors</span><span class=\"token punctuation\">.</span><span class=\"token function\">preprocessRequest</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">Preprocessors</span><span class=\"token punctuation\">.</span><span class=\"token function\">prettyPrint</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n                            <span class=\"token class-name\">Preprocessors</span><span class=\"token punctuation\">.</span><span class=\"token function\">preprocessResponse</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">Preprocessors</span><span class=\"token punctuation\">.</span><span class=\"token function\">prettyPrint</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n                            <span class=\"token function\">requestHeaders</span><span class=\"token punctuation\">(</span>\n                                    <span class=\"token function\">headerWithName</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Authorization\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">description</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"사용자 인증 정보\"</span><span class=\"token punctuation\">)</span>\n                            <span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n                            <span class=\"token function\">pathParameters</span><span class=\"token punctuation\">(</span>\n                                    <span class=\"token function\">parameterWithName</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"id\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">description</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"반려 식물 ID\"</span><span class=\"token punctuation\">)</span>\n                            <span class=\"token punctuation\">)</span>\n                        <span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">.</span><span class=\"token function\">andExpect</span><span class=\"token punctuation\">(</span><span class=\"token function\">status</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">isOk</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">.</span><span class=\"token function\">andDo</span><span class=\"token punctuation\">(</span><span class=\"token function\">print</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><code class=\"language-text\">andDo(document(...))</code> 부분이 문서화와 관련된 내용들이다.</p>\n<p><code class=\"language-text\">document()</code> 내부의 파라미터를 하나씩 살펴보자</p>\n<ul>\n<li><code class=\"language-text\">\"petPlant/findById/\"</code></li>\n</ul>\n<p>스니펫이 생성되는 대상 디렉터리 명이다. </p>\n<p>해당 테스트가 완료되면 문서화 대상으로 지정한 값들에 대해 <code class=\"language-text\">.adoc</code> 문서가 생성된다.</p>\n<p>생성 흐름과정은 뒤에서 설명한다.</p>\n<p>우선 각 파라미터가 어떤 결과물을 도출하는지 확인해보자.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 357px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/91225d4e5198fcd228bbb02a944f8ffa/e07d4/22e5bb11.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 148.8235294117647%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAACXBIWXMAAAsTAAALEwEAmpwYAAACw0lEQVR42qVVa3PSUBTkd/iAJEDI6z4CaaCPQa3T1hmtOqOf9JP9//9h3b1JO+iADfhhgYGbZffsOeeOojiGzwt82W7hiwyWiKIIMb8/BSMR5vM5tptzFFWJPJ0jOpEsEOolmUR4aXKk11doqwKXS4tiMcfkBKUdYTTG1DQwVzfwWYqMiuPkfxRGExKu4LYf4Kgsnc+e1CU7GESog6/iCG9Sg5/+EtZkaEyJjTfIWM/xZBLIhwYVFE6IOivwztQwxQI2z+CYdrlIQy0rlmFB1dFQhWMqPC8M7uszlCT0RY5llZNogRVDkmKTL6hyaA2JFwxmQ9KvdQtbZqjLjrR1FWq+T46xLERU2dD2W+NQUY3tLasvheSolHvbF6XFx7pBRds1rYb6hkCObZudOt65JYPpki6o8NgxfLLcJZ3j2np41k9QuicThmAmY1xWFve+gasUSnHCcuibVlC9ZPu98SGYuuwId888h1GSJJhOpwHRNMFF5XDDOnoppO3d34dglOc5nHOw1sL5Ep/aBj+u7/D5+zf8enjAze0tdEa/G2MC9PkQRrPZDGmaBsyJisFsSoN17bFZr7H0DgUnpiRpxQnS++P5ffijhjHxmpsnJWrar9g2NXuytWXY5o0pwgTF/6rh3ymFDc66rbgU6koznIW01UaaHt/X9dm22e3HnMu15nZRg2vsRKRFIWgTTU8hPKPdFa1qjbW2wop2pVSfbdg80TBCWc40Nek8zLMU+d6qVpj+QDvyaIWelh1JtHFk1RXdKIpQd85ghY+ELR9uaFmpKl3hrC/BOa8HLY59O3Kv5YUu/z4MEbj+Sni0rOvgUNKHU047y7oOTNYRCUvOd5LEBzf4XsKCD6xIqFBWfTDL/m7RHyjpcGkNtkxCywcsH1aLlKynSAXZFqbHWC55uGVrNFQiVVInq1K25qWlFjp0pf4GnK1c8eSPEpQAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='22e5bb11' title='' src='/static/91225d4e5198fcd228bbb02a944f8ffa/e07d4/22e5bb11.png' srcset='/static/91225d4e5198fcd228bbb02a944f8ffa/e7570/22e5bb11.png 170w,\n/static/91225d4e5198fcd228bbb02a944f8ffa/f46e7/22e5bb11.png 340w,\n/static/91225d4e5198fcd228bbb02a944f8ffa/e07d4/22e5bb11.png 357w' sizes='(max-width: 357px) 100vw, 357px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<ul>\n<li><code class=\"language-text\">Preprocessors.preprocessRequest(prettyPrint())</code></li>\n</ul>\n<p>요청값을 읽기 쉬운 서식으로 지정한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 443px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/c5eadf173fb53dedbb2f78124513b849/4d697/f25529d5.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 38.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABAElEQVR42qWR626EIBCFff/X25rUVRQviKy6q9aKgvUU2Jha/zRtSb7ADORwZsZbp3d8aIVVSmxa47/Lk7yAFBySM+jx7Zndtr8LLkphWRbodYUyDtWioNQX9u4Y/4R3ebmAM4YpyjFmHCMxO8kgmUBT1yCEgHOOrusgTVvOTNPkmOfZ4aVpgzC6ISI3MPbAa1ChbTvEMUFRFMjzHFmWoaoqpGnqxG1+x97bXN/3rhovTmoEV4GENrDnMBJgZYuyZAiCK3zfN+Kx+aQFpRTDMDgnR5d77BxaZ1ne4n5/IEmoc0NpagRLhGEIIYR7eC5t59wC79n47wNYDoPRZlC/4RO2BmeFDyWLPgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='f25529d5' title='' src='/static/c5eadf173fb53dedbb2f78124513b849/4d697/f25529d5.png' srcset='/static/c5eadf173fb53dedbb2f78124513b849/e7570/f25529d5.png 170w,\n/static/c5eadf173fb53dedbb2f78124513b849/f46e7/f25529d5.png 340w,\n/static/c5eadf173fb53dedbb2f78124513b849/4d697/f25529d5.png 443w' sizes='(max-width: 443px) 100vw, 443px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<ul>\n<li><code class=\"language-text\">Preprocessors.preprocessResponse(prettyPrint())</code> </li>\n</ul>\n<p>응답값을 읽기 쉬운 서식으로 지정한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/f0e284aab965e9d02175c301d2b3fc99/a27c6/207cbfe0.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 80.58823529411765%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAABdklEQVR42qWUW2+CQBCF+f8/r0mj1qLlVkSWy8LeWLSnM6v1pQ8FSzJZApMvczhniPwg4bsOM51flwv+e0WTtTBqwGQNtDPwfsL1esWF4Fze+0U1TRMssaKmlXjdJDimZ2ziAkmSoKoq1HUdSikF51xo/qu4L9LaEWBALQaUpYRoWgzDAGsMDBU3LS2eMmKyUuPjIUueqBy95AY+VwFZP0vM8xyCzLFNB1OeYTVNRxOG8y5nEXCe5wB83+/REtDULdQhh+lkABvR3aBrgEVRYLvdEvgEk1cYX96gPwqYXsKRglWSfyasyFGWq+IM6lgQ8BNmIIcntx6YpRniOMapLCGlhNKacslRcetdZmCapqHavg9xsT3FZqTp+Ns947IQIgQ6zzJ0lENT1tAkXRdVMGep7MeEHBk2Zbfb4ZB8YCQzVFbCnBuYtl8vmb8bG8PnKGjCcYTlcPsngs03IwFYtqUfhKXddmrdyv1aPd5Zf8/bbe3c08BvzQLWfhCNqasAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='207cbfe0' title='' src='/static/f0e284aab965e9d02175c301d2b3fc99/ca1dc/207cbfe0.png' srcset='/static/f0e284aab965e9d02175c301d2b3fc99/e7570/207cbfe0.png 170w,\n/static/f0e284aab965e9d02175c301d2b3fc99/f46e7/207cbfe0.png 340w,\n/static/f0e284aab965e9d02175c301d2b3fc99/ca1dc/207cbfe0.png 680w,\n/static/f0e284aab965e9d02175c301d2b3fc99/a27c6/207cbfe0.png 700w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<blockquote>\n<p><a href=\"https://docs.spring.io/spring-restdocs/docs/current/reference/htmlsingle/#customizing-requests-and-responses-preprocessors\">Preprocessors 관련 공식문서</a></p>\n</blockquote>\n<ul>\n<li><code class=\"language-text\">requestHeaders(headerWithName(\"Authorization\").description(\"사용자 인증 정보\"))</code> : RequestHeader에 대한 명세를 한다.</li>\n</ul>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/378b19d96d390b9202145c76f9fa25d7/4ad28/4282f935.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 11.176470588235293%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAATklEQVR42nXKQQrAIAxEUe9/UYsLrUjU1CQj6bLYxWdgeKHcBblk8MOYPN/95n9KCfGKGHMcjbdkIRARaq3ovUNVj4kI3LXWwMwws1+7AUG4nFkh8gR+AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='4282f935' title='' src='/static/378b19d96d390b9202145c76f9fa25d7/ca1dc/4282f935.png' srcset='/static/378b19d96d390b9202145c76f9fa25d7/e7570/4282f935.png 170w,\n/static/378b19d96d390b9202145c76f9fa25d7/f46e7/4282f935.png 340w,\n/static/378b19d96d390b9202145c76f9fa25d7/ca1dc/4282f935.png 680w,\n/static/378b19d96d390b9202145c76f9fa25d7/4ad28/4282f935.png 1004w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<ul>\n<li><code class=\"language-text\">queryParameters(parameterWithName(\"name\").description(\"사전 식물 검색 파라미터\"))</code></li>\n</ul>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/0a19b8264bdc169c7acd1edb123e2aa4/1263b/c9dbf6a8.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 28.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAk0lEQVR42oVPiwrEIAzz/z9UBGGe77c5WrhjbI4FArakiRFKKYQYUFtFqeVG2jvvIKXEYY5HHbGPDqG1RsoJc02MOW6kfSkF5mM4eK211bF2TggSv6H3jpQSYozIOWOMsdVRmGit/YcdCbVWNiPj8353J0j0Bgr13sNayzTGMK+3bOice6xwrkw//FUm8xACv6+GXwwl2ApT8L5OAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='c9dbf6a8' title='' src='/static/0a19b8264bdc169c7acd1edb123e2aa4/ca1dc/c9dbf6a8.png' srcset='/static/0a19b8264bdc169c7acd1edb123e2aa4/e7570/c9dbf6a8.png 170w,\n/static/0a19b8264bdc169c7acd1edb123e2aa4/f46e7/c9dbf6a8.png 340w,\n/static/0a19b8264bdc169c7acd1edb123e2aa4/ca1dc/c9dbf6a8.png 680w,\n/static/0a19b8264bdc169c7acd1edb123e2aa4/1263b/c9dbf6a8.png 1000w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<ul>\n<li><code class=\"language-text\">pathParameters(parameterWithName(\"id\").description(\"반려 식물 ID\"))</code></li>\n</ul>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/c051d52975720559003d3c9c97d664cd/9d874/f0d0524b.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 14.705882352941178%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAYUlEQVR42m3NWw6AIAxEUfa/UR4aNAq0VGAUv/DR5HxNk6s277HOE8LibxR21FofSinIOd/e26i1BjU5B2sNYgwgiiBO4MwPiRLM9aON/mwjOQSq18frlbdeFxEw8+8+OgEfu+sIXieDBAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='f0d0524b' title='' src='/static/c051d52975720559003d3c9c97d664cd/ca1dc/f0d0524b.png' srcset='/static/c051d52975720559003d3c9c97d664cd/e7570/f0d0524b.png 170w,\n/static/c051d52975720559003d3c9c97d664cd/f46e7/f0d0524b.png 340w,\n/static/c051d52975720559003d3c9c97d664cd/ca1dc/f0d0524b.png 680w,\n/static/c051d52975720559003d3c9c97d664cd/9d874/f0d0524b.png 1012w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<blockquote>\n<p><code class=\"language-text\">pathParameters</code>를 사용하기 위해</p>\n<p>mockMvc.perform(<code class=\"language-text\">get</code>(\"/pet-plants/{id}\", 1L) 에서</p>\n<p><code class=\"language-text\">RestDocumentationRequestBuilders</code>의 <code class=\"language-text\">get()</code> 메서드를 사용해야한다는 부분을 신경써야한다.</p>\n<p>자세한 내용은 <a href=\"https://docs.spring.io/spring-restdocs/docs/current/api/org/springframework/restdocs/mockmvc/RestDocumentationRequestBuilders.html\">공식문서 참고</a></p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/78ac84a758220ae494519c4d6294ad42/9104d/cc09df18.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 61.76470588235294%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAACEklEQVR42m1T2XLaQBDkKSnjgIxAF0InIEASkixhcVpgO8YOTpxUKkel8pC3/P8fdGbXQOHAQ9dM7c729kzvlr7/+YvnSYFffgjHT9D2Qii6S3CgGW2esyjKLZwLEt5dyFtIEJQOBD2A0PRxYUSoNlooBckVbKsLv+vDJjKVkbRcyEQoKgbqqvkCysUjmJDY5a0O6poNodFE6c2ZgIqooZ/kGKYTGG4fVieA2fb3xFLTPomGZkG3PaodUK3DuyhVRRVCXYVOKu2O/xK7AVyPIaQ9DeVqg7dbqSlHYO3v9hhXiSdE2A9TXOYLRNkUyWiGwTBDNllhlOeIY4/atviBU6Q7vCJkarqDGG5viA7FNsVBNEIvSOiyhFq08Pa8hrNKnSvaqS5X5ROElMxXazx/+43N5x94+vITD09fcbv+hDXF4m5DapeI0iksmi2blbydoaIbNJb/CBnS8TVW9x+xuHnkmK8eMFuuMV7cIRsXuKa1aXGPq9kNgq2BjhchHHoQJTZHhXuxV2i2+9RqREUhd5o5x8bQ7kXohZfcKDYGwx3AC1J0+hE9JZPEqKTYQE3Sj03JSGVMpuSzFYrbDyjeb7hS1vKSMCXFGZmU5nPEowU3MR7NEZJiiwQwx/cKmYIWvSn2Q0z2FqnAoTWWG06Pcp8irTkmGrJKZzR+7tD5V6Y06DfsvhVz79DJQ5QF+eRz2eEfOJZLc9kpfSEAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='cc09df18' title='' src='/static/78ac84a758220ae494519c4d6294ad42/ca1dc/cc09df18.png' srcset='/static/78ac84a758220ae494519c4d6294ad42/e7570/cc09df18.png 170w,\n/static/78ac84a758220ae494519c4d6294ad42/f46e7/cc09df18.png 340w,\n/static/78ac84a758220ae494519c4d6294ad42/ca1dc/cc09df18.png 680w,\n/static/78ac84a758220ae494519c4d6294ad42/9104d/cc09df18.png 905w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n고마워요 ! 리뷰어 그레이 ! </p>\n</blockquote>\n<p>문서화를 수행하고자 하는 나머지 테스트들에도 동일한 방법으로 작성해준다. </p>\n<h3>adoc 스니펫 생성하기</h3>\n<blockquote>\n<p>Snippet : 단편, 부분적, 작은 조각이라는 뜻으로 여기서는 <code class=\"language-text\">문서 조각</code> 정도로 이해하면 된다.</p>\n<p>문서 조각을 모아서 하나의 문서를 만들게 된다.</p>\n</blockquote>\n<p>이렇게 작성한 테스트들을 수행해보자.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 487px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/8a9101243d077cdc58b7ce695c3ff82c/6a170/35bc712c.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 33.529411764705884%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAABQ0lEQVR42oWR227CMBBE+ZA2jh3nfnESQ9ICCQFFIPUBCZXw/38y3bVanlr1YeXVeud4JlkJKWCiBuvEQocKcZxASolAB5g/Trher7jdbng8Ftff759YlgWXywXb7RbDMLjzfD67+5UvfeRBjqoeEBUFkjgmoIIi6GGzJsGIwzRhmo7Yk3ji/nTCbj+gNjWqqkJZlrDWou97rFgsxSteuiPiuoNWEj7BpO/DqpAEBqZpkZOoIkCaZciLEiXNlVLwPA9CCPi0z6m+gR50P6GwHeIodJF5ySP3pmlQty3a9Qbd27uD/kAUPc5QLtbIwAHJkScQ5hlKY1BS7IIqDEMXO01TcpVDa/0U/1kMjLIUxbTHPM8OwhVF0fNVUzfOZUDLHOtfoKSmsi3GcURG34fd8clQBsT0k3Ka1QRNyC3PXLzfilhfqizS2MzmpD4AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='35bc712c' title='' src='/static/8a9101243d077cdc58b7ce695c3ff82c/6a170/35bc712c.png' srcset='/static/8a9101243d077cdc58b7ce695c3ff82c/e7570/35bc712c.png 170w,\n/static/8a9101243d077cdc58b7ce695c3ff82c/f46e7/35bc712c.png 340w,\n/static/8a9101243d077cdc58b7ce695c3ff82c/6a170/35bc712c.png 487w' sizes='(max-width: 487px) 100vw, 487px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>그러면 <code class=\"language-text\">build/generated-snippets/{파라미터에서 설정한경로}</code>에 adoc 파일이 생성된 것을 확인 할 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 292px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/af673976bc63fe606542fe3f51b22cac/73e11/5dd3f00f.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 162.94117647058826%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAhCAYAAADZPosTAAAACXBIWXMAAAsTAAALEwEAmpwYAAADjElEQVR42qWWWW8jRRSF/UMS975VV29u2x3bsQYSgQQjIDAg8oY0DzASQuKBF3794ZzqtuMZZTzO8HBS5V5OvrvUtWdxEuHV6mus+w36ZY+2bZFlmVurqkJd125tmub4ueu6431Je0nPzIIwQJnXMHmJJIkRJwmCMERK0yxNnflzSnkvPbmf57lbZ0EQIPbm8F8/oHl4gxuTkrhDbw3mngff9y+SNz3rDENuwrpBsehgSJmnCTKuPu8FL5QzTKMQ3jcPSHZfYd+UWNWWdP6LzY6GQeAjLUrEaYGcZKL7HDNnGPLPnPr9/h5///Qj6Qw2bYWQhflsQuXKpBkatkRMuiSK3DX//xgmfoCrYYn8lwfsKoPbvsHtokEsc//FORxVxClsZhhu4Chlpn34UkK9cBUF+MHe4N/t91gvLPZd4yhfLVsUbCPPH6vuX0rosdJlkqJXteORTpQp9xHbKmKRVKhxvYBwzpded2v8tbvHsi2xZ/72/aihsdgtanzBEySVWXokfrZtjpR8yJByIGVEOoWqU+NyqSMquk+FPPeeku7xhX3V4s/NHYbWsh8tbjtOmDzF1fX1ZUVZV6woK2uKAgWVFzmqssBdt8SwWmMYBmy3W/R9D2OMe+acZt9tPaSG86zh3NOs4ym5Gxr88+W3eHzzM357+xZ/vHuHXx8fYTn77DQDD3vNx1PNVLk4jo+KqDCKcc3rlspZ0XQ63ybPUHDmaS2lIkNy8q40ez4XYwV3nOa9ybGsSyw4H3VybprKVX3bamWLsTv8j52UU+khEZbTfEz44mFOHqQuiD4YImcNNyRcMKwte7BjoXZd7SbRmoRrUmvvBvFJT541rKOR0LCRXQ6zxFG5/uRny3bS/vTknDUceOxaJv+GJDXbaTPlr+c0WlYkJPHCFu+FfdawJWFFAktTSTQlqXT0tK+maxcTruIQDQ2UsyWpGlZchCvSKafKYVvm7w3js4YLGlrmqqaR8qeciVThy1x5bLnq+uErY3buXPY0VA7VhzLpq9LlbMyhQcUOEL1oD2GfJVzSsCaZCEUkg5o67NXsqv78kraROhbFMum9JVnJHCpUSkSSfl0obP3CuKgoa7UNK9ra0UBkLVe1zIppMPxnClmFuYiwmRpbJpLNxqJ002cVSnuF/0lDb2rsjhVUrkbTKVwSL+xT2FH49FV7WQ4ZYmsKVxxJraJ/0kyrvsgOhv8B4Y+9ts5zqjcAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='5dd3f00f' title='' src='/static/af673976bc63fe606542fe3f51b22cac/73e11/5dd3f00f.png' srcset='/static/af673976bc63fe606542fe3f51b22cac/e7570/5dd3f00f.png 170w,\n/static/af673976bc63fe606542fe3f51b22cac/73e11/5dd3f00f.png 292w' sizes='(max-width: 292px) 100vw, 292px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<div class=\"gatsby-highlight\" data-language=\"adoc\"><pre class=\"language-adoc\"><code class=\"language-adoc\"><span class=\"token comment\">// http-request.adoc 파일</span>\n<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token attr-value\">source</span><span class=\"token punctuation\">,</span><span class=\"token attr-value\">http</span><span class=\"token punctuation\">,</span><span class=\"token variable\">options</span><span class=\"token operator\">=</span><span class=\"token string\">\"nowrap\"</span><span class=\"token punctuation\">]</span></span>\n<span class=\"token literal-block\"><span class=\"token punctuation\">----</span>\nGET /pet-plants/1 HTTP/1.1\nContent-Type: application/json;charset=UTF-8\nAuthorization: pium@gmail.com\nHost: localhost:8080\n\n<span class=\"token punctuation\">----</span></span></code></pre></div>\n<h3>asciidoc 문서 생성하기</h3>\n<p>위에서 생성한 adoc 스니펫들을 모아 하나의 API 문서를 만든다.</p>\n<p><code class=\"language-text\">src > docs > asciidoc</code> 디렉터리를 생성하고 <code class=\"language-text\">.adoc</code> 파일을 생성한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 270px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/42a4818f1fd7d4a9279ceea76b0dd766/8c112/850cce57.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 84.70588235294117%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsTAAALEwEAmpwYAAABjUlEQVR42qWUS0/DMBCE80MQedh52EmcpIS0BFSBOOfAKfeicun/Pw+7Jq5CCRUth9Hahx1/9qzsiShCnGhSDikFhBAIw/BqeVJGKJst2u0AU2ikaYogCK43DAJaBD5CEcNPC0REzPqXYRJLCG3wOH6g7dao68qS+r5/ueF8I5MECUlMlFLKi2mPhtyosgxN0xBhjZpq13V2z8ZXER5JyVxMZI6Qg/oL7TfDiHRLeooFekW0bWsJnVrar1YrlGVpK9/k9JBfCL8oI5pJl7qbT678BE4LKQdwCkk3pJ5m8yFLUU0UTMSVqdiE05/3zeUlU7JzaRoZRTWO4yMJr3mUMgpuqcfJq6oKTjWpqGq8mhJvL8/Y7fd43+0wjiMOhwOGYbC0855TeUopnMpQIDU1dus1NpuNHZ++720wTLnU47SY8oZS7tIEeWlQGWOp+KpMYGh/bnx+pByQMkpZ0buls/dyb8jri+fwnr6xuySGyguURWGp+DoFrbXWZ7+4RUIj6EujD0PnuTXKp/oXw09TReqSgoWIfQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='850cce57' title='' src='/static/42a4818f1fd7d4a9279ceea76b0dd766/8c112/850cce57.png' srcset='/static/42a4818f1fd7d4a9279ceea76b0dd766/e7570/850cce57.png 170w,\n/static/42a4818f1fd7d4a9279ceea76b0dd766/8c112/850cce57.png 270w' sizes='(max-width: 270px) 100vw, 270px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>API가 여러개인 경우 각각을 파일로 관리한 뒤 하나의 adoc 파일로 include하여 합칠 수도 있다.</p>\n<h4>index.adoc</h4>\n<p>다음과 같이 adoc 파일을 작성할 수 있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"adoc\"><pre class=\"language-adoc\"><code class=\"language-adoc\"><span class=\"token comment\">// index.adoc</span>\n<span class=\"token title important\"><span class=\"token punctuation\">=</span> Pium Application API Document</span>\n<span class=\"token attribute-entry tag\">:doctype: book</span>\n<span class=\"token attribute-entry tag\">:source-highlighter: highlightjs</span>\n<span class=\"token attribute-entry tag\">:sectlinks:</span>\n<span class=\"token attribute-entry tag\">:toc: left</span>\n<span class=\"token attribute-entry tag\">:toclevels: 3</span>\n\n<span class=\"token macro\"><span class=\"token function\">include</span><span class=\"token punctuation\">::</span>dictionaryPlant.adoc<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></span></span>\n<span class=\"token macro\"><span class=\"token function\">include</span><span class=\"token punctuation\">::</span>petPlant.adoc<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></span></span>\n<span class=\"token macro\"><span class=\"token function\">include</span><span class=\"token punctuation\">::</span>reminder.adoc<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></span></span>\n<span class=\"token macro\"><span class=\"token function\">include</span><span class=\"token punctuation\">::</span>history.adoc<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></span></span></code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"adoc\"><pre class=\"language-adoc\"><code class=\"language-adoc\"><span class=\"token comment\">// petPlants.adoc</span>\n<span class=\"token title important\"><span class=\"token punctuation\">==</span> 반려 식물(PetPlants)</span>\n\n<span class=\"token title important\"><span class=\"token punctuation\">===</span> 반려 식물 단건 조회</span>\n\n<span class=\"token title important\"><span class=\"token punctuation\">====</span> Request</span>\n\n<span class=\"token macro\"><span class=\"token function\">include</span><span class=\"token punctuation\">::</span>{snippets}/petPlant/findById/http-request.adoc<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></span></span>\n<span class=\"token macro\"><span class=\"token function\">include</span><span class=\"token punctuation\">::</span>{snippets}/petPlant/findById/request-headers.adoc<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></span></span>\n<span class=\"token macro\"><span class=\"token function\">include</span><span class=\"token punctuation\">::</span>{snippets}/petPlant/findById/path-parameters.adoc<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></span></span>\n\n<span class=\"token title important\"><span class=\"token punctuation\">====</span> Response</span>\n\n<span class=\"token macro\"><span class=\"token function\">include</span><span class=\"token punctuation\">::</span>{snippets}/petPlant/findById/http-response.adoc<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></span></span>\n...</code></pre></div>\n<p>adoc 파일의 자세한 문법은 <a href=\"https://docs.asciidoctor.org/asciidoc/latest/syntax-quick-reference/\">asciidoctor 공식문서 참고</a></p>\n<h3>HTML 문서 생성하기</h3>\n<p>이제 웹 페이지가 읽을 수 있도록 HTML 문서를 생성해보자.</p>\n<p>HTML 문서는 <code class=\"language-text\">src > docs > asciidoc</code>에 생성된다.</p>\n<p>다음 명령어를 수행해보자.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">./gradlew asciidoctor</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/03d98aab1aeef4f4e04c6c7ed575d35f/ca1dc/3b9772e1.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 30%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABB0lEQVR42lWRa3KDMAyEfZKCoYS3HcDGEAg0THL/I20lpXTaH9/I1sirlazSokJU1ESDj7yAziMkeYw006ibRkiSFFrrHxLEcYwoigRN5/gPal4C3NjDXlt47xGmCbazlBvh6cyCtjPoXI9wu8EFB2MNYYWiLAWu46gGEnGjF4GB6IYePoxyF9EQSLBDY1q5985JI37HtMYIXFO3LdT+OLDuO/bjwHK/w9Ojx+uF27pi2TZ8PZ+YlwVXesBx3XapZ0dlVQlpmtJaEkGdXZ24G2SMiUZ7Ox8R5vnthPLiLgTJN+SmYlEak4V4l7xjZboaja1xueT4zDLpdi785Fx4dEb+jN9P+s832QK3AJilul8AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='3b9772e1' title='' src='/static/03d98aab1aeef4f4e04c6c7ed575d35f/ca1dc/3b9772e1.png' srcset='/static/03d98aab1aeef4f4e04c6c7ed575d35f/e7570/3b9772e1.png 170w,\n/static/03d98aab1aeef4f4e04c6c7ed575d35f/f46e7/3b9772e1.png 340w,\n/static/03d98aab1aeef4f4e04c6c7ed575d35f/ca1dc/3b9772e1.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>그러면 <code class=\"language-text\">build > docs > asciidoc</code> 경로에 문서가 생성된다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 271px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/b3243adbf8ff9a7a8cbfb86fc9e7fd03/63d17/5daac1d0.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 94.70588235294117%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAAAsTAAALEwEAmpwYAAACKklEQVR42p2US28aMRSF+SEBxvOw52GPDQwBEh6pmkqVoop0USJVyqpdVIpI/0AX3fZXnx4bQtMKVGBxGQ+2jz/fe+604jhGmiRoqgqlUlBZGkIIcVa0Eop5waf7j/h0+xbXTmPsDLpRdJ6g/4kYHQpcFDkimSHhe5J48vg8QcFr50mKzt0teh/e48ZWmA97WDQOPiWnCzJiT5obJKpARrKEQqeKBcGIV/VXzkQH4v4JNw9fMTcS417NQ2KE+ROiJaWEYnWlVCiZQ2sMq52H/wq+F0URxsdGS2sN5yzq2qEZFPgyX+Dn3QoPj494Xq+xZiyXS/h11tr/xo4wUHoq0vV0hcloAENabTTKskSaZWHer8sy7uG+7NXeHeHr+wtvnXYXTis8f15g1q8xZS4n9OXUj/sWb1h979Ox1ZgNLCol0el2/+Tw3ypF0caDNUWzNGHFN8b33fPXmHMyTYMb9tpmJ9gVkAVbcaEw6RtSOIxIc1lrzDkemCp0UbQ9/KAPd8HFMU9XPY2UBL5b5I4uDmRHGfulY0T7AvFwhOTHLzR9hzlzd2l9zgyut948XnBLKFhFMZkGwoK97XMm003uXgpwlKBvv3Ynom0kvq+uSFbhilS+mg1z19dlqHTJQw59jfZW2edp3Gjogt1DW1S5DKS5TINNfGWj0wgVvq1maOqSlBrDugqVHpgyPA0P2lfhvYT+Kp7k3dSFja4qYEt2D586V2Gcs2sOEf4GgsUpNWTQ/EoAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='5daac1d0' title='' src='/static/b3243adbf8ff9a7a8cbfb86fc9e7fd03/63d17/5daac1d0.png' srcset='/static/b3243adbf8ff9a7a8cbfb86fc9e7fd03/e7570/5daac1d0.png 170w,\n/static/b3243adbf8ff9a7a8cbfb86fc9e7fd03/63d17/5daac1d0.png 271w' sizes='(max-width: 271px) 100vw, 271px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h3>애플리케이션에서 확인해보기</h3>\n<p><a href=\"http://localhost:8080/docs/index.html\">http://localhost:8080/docs/index.html</a> 으로 접속해서 문서를 확인해보자.</p>\n<p>우선 gradle build를 수행한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">./gradlew build</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/ecddf350bb6d029dc3e16f20abe4b393/fe4f1/adb0a6ab.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 37.64705882352941%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABDUlEQVR42oWQ6ZKDIBCEfRRFUQ7FC0FdK3n/p+rMkMRKUrvZH18Nw9HTdCaUASONRClz9KODaS2KokBZlUQFIcSvlOX9/EklJbIleoQYELcNflmwbjtmv2CcJmJEWCOmeU4918l7aGthCNu20FpDGwOlFOq6Rrb9HNiPg0QjjusV677juFzSXj8MiOua+pmGDeMI1/fpsXoIsdM8z0/IYUzO2EGgx7xONQR0zpFbT663tG5ISJKLVwGO5pWML/Ik/gJPfU7mngWapjkvc2bs6FPkTZAzGTmjB9xPs0fbdahJTFLQFQX+TeRN0GoFprOGsHBUXUsO9f17LMou/3N2Cg59C0UupCg+EF+z+osbdYfruTF7h/oAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='adb0a6ab' title='' src='/static/ecddf350bb6d029dc3e16f20abe4b393/ca1dc/adb0a6ab.png' srcset='/static/ecddf350bb6d029dc3e16f20abe4b393/e7570/adb0a6ab.png 170w,\n/static/ecddf350bb6d029dc3e16f20abe4b393/f46e7/adb0a6ab.png 340w,\n/static/ecddf350bb6d029dc3e16f20abe4b393/ca1dc/adb0a6ab.png 680w,\n/static/ecddf350bb6d029dc3e16f20abe4b393/02d09/adb0a6ab.png 1020w,\n/static/ecddf350bb6d029dc3e16f20abe4b393/9d567/adb0a6ab.png 1360w,\n/static/ecddf350bb6d029dc3e16f20abe4b393/fe4f1/adb0a6ab.png 1830w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>이전에 Gradle에서 작성했던 스크립트 내용 중 copyDocument Task가 build가 일어난 뒤 수행되기 때문이다.</p>\n<div class=\"gatsby-highlight\" data-language=\"gradle\"><pre class=\"language-gradle\"><code class=\"language-gradle\">task <span class=\"token function\">copyDocument</span><span class=\"token punctuation\">(</span>type<span class=\"token punctuation\">:</span> Copy<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 생성된 html 파일을 옮긴다</span>\n    dependsOn asciidoctor <span class=\"token comment\">// Gradle의 asciidoctor Task 이후 수행</span>\n    from <span class=\"token function\">file</span><span class=\"token punctuation\">(</span><span class=\"token interpolation-string\"><span class=\"token string\">\"</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span><span class=\"token expression\">asciidoctor<span class=\"token punctuation\">.</span>outputDir</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">\"</span></span><span class=\"token punctuation\">)</span>\n    into <span class=\"token function\">file</span><span class=\"token punctuation\">(</span><span class=\"token interpolation-string\"><span class=\"token string\">\"src/main/resources/static/docs\"</span></span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\nbuild <span class=\"token punctuation\">{</span>\n    dependsOn copyDocument <span class=\"token comment\">// build 이후 html 파일 복사</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>그러면 <code class=\"language-text\">src > main > resources > static > docs</code> 경로에 HTML 문서가 생성된다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 268px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/a65ffe8f709f1f4d3b5487ce8c38c98e/baf7c/6b2555b4.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 139.41176470588235%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAYAAABh2p9gAAAACXBIWXMAAAsTAAALEwEAmpwYAAACtElEQVR42qWU2W7TQBSG8xaUlnjsWb1v2dMmbUMLUkFIoCIkUJFQJcQNIHgALrjkpX/OjJPQqqFK3Itjz4zt399ZO77vIwgC+IyBka32ba0jBUNv/BKnr34iy2KEYfQg0U4Q+JAqQpT2wJnnDh9C2vHporgPL8yQXv/GcDxBWRSIonakHXvhnIMFAqaawpDLQnB31tLlAIIsqkrMvnxCVVXo1TXFM3OEuwo3hFbUGAxfXIDHBmEcwWgNz/Oc6C4x7aw39MHBoz18Lc+xyAbQJJqlKVIyS6uU2kq0c3PDyN7kQ8zLHsIkQRIna0Ep5W6CNlZaKzzLXqOfjqGNghTSudvKZSvIOREO3+Jsek5xDKGV3rkmb7kspMBEzZGbCkIJItbUOSEMJWzbbN8iFELgXXGN82pB8ZPI84IsR0GFbp/tTGhd6/p7eEyJ6RYTqk/rKndut3LZtmFMXeKdXiK4+IiahoU2ofuR30awKXL6OMwhoxRGchgloSi2hspGcrGjIMXRcAb+/ApHV98xSTTm/QrjMqN7iWGerkOz8mhl/yV0L3pdpJHEpJ80bbksKftMUnIssT2za2viRgXcdZk+POgyHJLYtw8nOKoLnAwqzHoF5r0Sp7RejGpMqhxTsmPyII8M2JJ6I2HgB26E6VDcqr9mrC3Xy/PV/l6XGQuolwVGc02ElqJ0NDaWlrafJdtneTV5uNFQNCOFK/h/8ZK0Fvd0zV1B+/L+PoLjM8hffxzVYtBk+pBordkftCA0UMORm+ZaNWRySWoT4PvbFvY6yzF+vJ9jVGQuhtZGRepIZ5TthELCNkyhzXVILxotMahiRHbiULdENCs13TV1jO0eSaHxtyV8QoTjOsbnyxkKmou2Q5wRYZFEjnInQsZ8pLHG08MCaWhQk0hFVqdxs08jR71p8P4Ftp8igi2jbWAAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='6b2555b4' title='' src='/static/a65ffe8f709f1f4d3b5487ce8c38c98e/baf7c/6b2555b4.png' srcset='/static/a65ffe8f709f1f4d3b5487ce8c38c98e/e7570/6b2555b4.png 170w,\n/static/a65ffe8f709f1f4d3b5487ce8c38c98e/baf7c/6b2555b4.png 268w' sizes='(max-width: 268px) 100vw, 268px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>로컬에서 구동되는 애플리케이션은 해당 경로를 참조하기 때문에 파일을 복사해줬다.</p>\n<p>이제 어플리케이션을 구동하고 <a href=\"http://localhost:8080/docs/index.html\">http://localhost:8080/docs/index.html</a> 로 접속하면 다음과 같이 문서를 확인할 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/ed778918ebc48e6596513bba052388d6/c6957/ad2fa30b.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 57.64705882352942%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB+ElEQVR42nWSz2rbQBDG9SAhoq1xU3KoCyGHHvsq8SXQ4ofxyRSEsQl2RF4gdpsSu7Eh/XM1lcG30hq3sbRaSbva1U53VlJdJ+7Aj9XufvMxmlmrVqudHx+/dJ6/OGrb9pP23p5t2N9/tJPyHrHtSrtSedquVp85B4eH7uNq9ZU1nUxhNBqLyWQC4/FHuL4eGYbD93A5GBoGw3cwwO/LAVxdfUC90dzcTOH29hN8+fxVfPM8cC8uGpYEAJkBx2ULpaRKU6lEKkEKs3+g2YD5sFgs3lg+FUBCKpIkBiklZFmWk3LIWAJKiBx9pnSSUmqLQi/QcDabNSySZBDFseCc6QRMySNcBxD+9oGSEGgUQZIkILTxfdBUhzH0PK9hRVxtDNXG0NeGv5ZLCEkAjDFDoitmWsd19SU7DePCsAwUsTjSLRCQqbwFMpNAKTWGeIZ7ZKeh/p0tQwxKKBAN5xxEKsxcsMf3eWAYmwojwXAA/zT7bh3CarWGgBBsielhrME10fu4OMPqS0MzlDvC8SJOU86L8Rv8wOf+zyVP14QzGnEW0hxSriHnCSv1MRrO5/PXFph3KIVSWdG/YihBAKvvPyDzQ/1kVP5sDNvPpohNhWdnndNOp3PS7Xbr/X7/L47j1JvNZr391qnj3f9Aba/XO3Fd97TVah38AbX/PTjIaWwwAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='ad2fa30b' title='' src='/static/ed778918ebc48e6596513bba052388d6/ca1dc/ad2fa30b.png' srcset='/static/ed778918ebc48e6596513bba052388d6/e7570/ad2fa30b.png 170w,\n/static/ed778918ebc48e6596513bba052388d6/f46e7/ad2fa30b.png 340w,\n/static/ed778918ebc48e6596513bba052388d6/ca1dc/ad2fa30b.png 680w,\n/static/ed778918ebc48e6596513bba052388d6/02d09/ad2fa30b.png 1020w,\n/static/ed778918ebc48e6596513bba052388d6/9d567/ad2fa30b.png 1360w,\n/static/ed778918ebc48e6596513bba052388d6/c6957/ad2fa30b.png 2032w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h2>Reference</h2>\n<ul>\n<li><a href=\"https://spring.io/projects/spring-restdocs\">https://spring.io/projects/spring-restdocs</a></li>\n<li><a href=\"https://hudi.blog/spring-rest-docs/\">https://hudi.blog/spring-rest-docs/</a></li>\n<li><a href=\"https://techblog.woowahan.com/2597/\">https://techblog.woowahan.com/2597/</a></li>\n<li><a href=\"https://dallog.github.io/apply-rest-docs/\">https://dallog.github.io/apply-rest-docs/</a></li>\n</ul>","frontmatter":{"title":"RestDocs로 API 문서화하기","date":"August 11, 2023","update":"August 11, 2023","tags":["문서화","RestDocs","테스트"],"series":null},"fields":{"slug":"/restdocs-start/","readingTime":{"minutes":11.15}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}},"next":null},"pageContext":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","series":null,"previousPostId":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","nextPostId":null}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/restdocs-start/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 사건의 발단  3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.  그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다. 당황하지 않고 침착하게 f12를 눌러 개발자도구를 열고 네트워크탭을 확인해보니 API가 이상하게 호출되고있었다. 평소 프론트분들을 굉장…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>사건의 발단</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/08fceeea03b3158d2d5d7a1fb9d913b6/5f864/c4fe129c.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 17.64705882352941%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAW0lEQVR42qWPSw6AIBTEOIbK7yEgCmLU+99tRNYGTVx013QyjGyAMh5CW3A1NpHkEPMOshMGaR4dlvKJack12guqYouO66ZXggf8vJb1b8E3WIgbXEj1zt/YzQWzXmzCAC7E+AAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='c4fe129c' title='' src='/static/08fceeea03b3158d2d5d7a1fb9d913b6/ca1dc/c4fe129c.png' srcset='/static/08fceeea03b3158d2d5d7a1fb9d913b6/e7570/c4fe129c.png 170w,\n/static/08fceeea03b3158d2d5d7a1fb9d913b6/f46e7/c4fe129c.png 340w,\n/static/08fceeea03b3158d2d5d7a1fb9d913b6/ca1dc/c4fe129c.png 680w,\n/static/08fceeea03b3158d2d5d7a1fb9d913b6/02d09/c4fe129c.png 1020w,\n/static/08fceeea03b3158d2d5d7a1fb9d913b6/5f864/c4fe129c.png 1066w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 386px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/9a5284a76d1e03ec6ea7c392f6bdb02f/d999c/dbb1d706.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 147.05882352941174%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAdCAYAAACqhkzFAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEAUlEQVR42q1T20tjZxDPH6CPCooXFKQvFkpLKaVCRQrFPrguXurdgiJ4QV+841q0226hyxbWS7FqaERUCopYfVDX7GrUJOvGCzGSRJMY7eJaY1ZNTHP113xjTszFy7b0wJxvzpyZ38xvZj4ebnkuLi7YO8Dmui0EvJvRLgNdTjtMByqcvVbAabPcCcq7vrLLAAby6tc8PP/2A4jaP4K04x6OtxdvBeXdwJXAxE++hORxCt7Kx6GeF2DpyVcQff8p/lLM4sJducf5ZkAuq/bZU7xo+xDinz6Hbl2ILbUOM3PzUMtfQtZ1D8+a34N66sdrK+X5DwCwnhxA9OgzzH/3MWTd9/HmtR7PhXNQbm3CarNjnf8Nlh9/gc3f6+D4+yyoyiBA8+EO3mql0Iv4ED54H6b9NZgsNmwqNTAb9iB6+AnUkz9cDsxhe4ceeoBtJgMkP7t79igJ+kUBjuV/4OXTNCy4Ac1vVDcO5lpAl9NBqulAifXfSvHCPeW5B4lY+eVrGDVSv8TvvIdcC1wuByzGP2Ex6N0UrX7//t1ieyix4Kv74tZd//Wm+CF7XndcOy+gy53V6XTSyelMaOpmMzY2NqBSqS6r9UhgDNeGO3toNBoxMjKC2dnZO/vnBWTZWRVqtRpKpXuy6+tYW1uDXq8nfW9vDwqFAru7uzg8PITBYMDW1hbkcjm2t7cp/vz8/AqwpaUF+fn5aG1tRXt7O4qKipCdnY2Ojg6kpKSgrq4OqampaGtrg0AgwMTEBNnKy8vR1NSEkpISSugFNJlMODk5gcViIWHfrHdWqxWnp6eU/ezsjE6HwwG73U525svsR0dHsNlsV4C+/WK0GCV2MjpMtFotfWs0Guzs7BBtnU5HtsCeEiA3URYwPj6OpaUlTE1Noa+vDwMDA5icnCQZHh7G0NAQpqenMTg4SDqrjJt8UIWMkkQioSoWFxchk8mo8fv7+5RsYWGBhrSysgKxWEzDCJy8dw85yqOjoxTEKpyZmSGQ1dVVSKVSjI2NQSgUEgOmLy8vg2MYVKFv2b4nt7jc8gb2LNBGgHw+H+np6bQuubm5tEI5OTkoLS1FZWUlSXV1NSoqKlBQUEA+eXl55FdYWEi+bEBewIaGBoSGhiI+Ph4xMTGIjY1FREQEkpKSkJGRgbS0NGRmZlLShIQEREVFkR/nGx4eTr32ArJedHV1ob+/nybLSU9PD9nZgnd2dpLe29vr58OE2Y6Pj68A2ToUFxejqqqKaHHCbkJtbS2am5vR2NiImpoasvn6sHaUlZXRJngB6+vrERISgri4OERHR5MwOox2cnIyXcOsrCwkJiYiMjKS/vn6hYWFBVPu7u6m4TDavsJR4ugF/ud8/Cj/n88/kgfM4ZMxzOQAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='dbb1d706' title='' src='/static/9a5284a76d1e03ec6ea7c392f6bdb02f/d999c/dbb1d706.png' srcset='/static/9a5284a76d1e03ec6ea7c392f6bdb02f/e7570/dbb1d706.png 170w,\n/static/9a5284a76d1e03ec6ea7c392f6bdb02f/f46e7/dbb1d706.png 340w,\n/static/9a5284a76d1e03ec6ea7c392f6bdb02f/d999c/dbb1d706.png 386w' sizes='(max-width: 386px) 100vw, 386px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다.</p>\n<p>당황하지 않고 침착하게 f12를 눌러 개발자도구를 열고 네트워크탭을 확인해보니 API가 이상하게 호출되고있었다.</p>\n<p>평소 프론트분들을 굉장히 신뢰하던 주노는 설마 하는 마음에 Notion을 열어봤다. 아니나다를까 Notion에 API 명세가 이상하게 작성되어있었다.</p>\n<p>범인은 바로 이것저것 끄적이다가 되돌리기를 하지 않은 주노...</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/d7555226dc6d80df7c93e19c30af3caa/69dce/03624593.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 89.99999999999999%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAACIElEQVR42p1Uy27bMBDMFwS9FEltS6REkaJEiqJsWH4ocNxLAvQPiqJAC/RcFOih7ddPl1Lc2ogdBz4Mdi3Js5zZXV79+v0H33/8BB8zZIlEkmlM4hTjKLkIV1++fsPHT5/BmIAgsjQQhpcT3sdTOEl4/eYtbkYxXDNHM1v0kLnBKErxjkgPMP6fjyYnCIM8keWwxsJWDrWrUdc1lMqRiQxSSshsgKJcPeUxS6noEcIRVUuFxKzxcJWFMyUaIqwoapWhUJIwRKslylz2OePp0VP2hInQJHUJT3LrpiXJFhHLcEsS93Gzl5+UHAjjJIMuHZS24NTp3ctgx3OcacotjYvKS3x4eIS5r7DqOqzXHeZtS1j0WC5XaBcLaF0goeKnTrfnocJiPkc9831DaudgrT2AMYaiQSZzhP+8QJiAUdWmmWKzeU8n3FDcYL5cY3O/xXa7xWq1RkVFvPfUfX2OkIOnikamQWmpu26KTJUQUiPigjzjg297Pr64KYNkDU/dreoZ/LRFYeo+L63v8xAtFQq5ocLWDQjPjxIyGuBqSh8YR6bTPpOnKQ17sCKiAY7ppDtE7BDPCMcjkmM4mocG3bLD3V2Hljocuqqkoh1n4Jz/Q8zOXA5hfcLFIEVYpxjetbQhhk5KA5+kB2SvIwxdJim60BBCwFcVCpo3rYffFxEGb1SeI0lTGJ33MmMCY+QvP8QrCIexMZVHXlQXX6w7/AUh4f39C7ADnwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='03624593' title='' src='/static/d7555226dc6d80df7c93e19c30af3caa/ca1dc/03624593.png' srcset='/static/d7555226dc6d80df7c93e19c30af3caa/e7570/03624593.png 170w,\n/static/d7555226dc6d80df7c93e19c30af3caa/f46e7/03624593.png 340w,\n/static/d7555226dc6d80df7c93e19c30af3caa/ca1dc/03624593.png 680w,\n/static/d7555226dc6d80df7c93e19c30af3caa/02d09/03624593.png 1020w,\n/static/d7555226dc6d80df7c93e19c30af3caa/69dce/03624593.png 1194w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>위와 같은 사건을 겪으면서 사람 손으로 작성되는 문서의 신뢰도 문제를 인지했고, API 문서화를 자동화할 수 있는 기술의 필요성을 느꼈다.</p>\n<h2>서론</h2>\n<p>API 문서화 방식에 대해 찾아본 결과 크게 두가지 방법을 알 수 있었다.</p>\n<h3>알아보기</h3>\n<p><code class=\"language-text\">1. Spring RestDocs</code></p>\n<p>Spring Rest Docs는 Spring에서 제공하는 문서화 도구다.</p>\n<ul>\n<li>테스트 작성이 강제된다는 특징이 있다.</li>\n<li>테스트를 통해 도출된 결과를 문서로 작성하기 프로덕션 코드에 영향이 없다는 특징이 있다.</li>\n<li>아래 설명할 Swagger와 비교했을 때 설정이 약간 번거롭다는 단점이 있다. </li>\n</ul>\n<p><code class=\"language-text\">2. Swagger</code> </p>\n<p>Swagger는 API 문서화를 돕는 오픈소스 툴이다.</p>\n<ul>\n<li>테스트 작성이 필수가 아니라는 특징이 있다.</li>\n<li>swagger 이용 시 실제 API가 호출된다는 특징이 있다.</li>\n<li>테스트 작성을 안하는 대신 프로덕션 코드에 문서ㅘ와 관련된 코드가 작성된다. (DTO, Controller 등)</li>\n</ul>\n<h3>Spring RestDocs</h3>\n<p>피움 팀은 RestDocs를 사용하기로 결정했고 이유는 다음과 같다.</p>\n<ul>\n<li>현재 피움팀은 각 계층별 테스트를 꼼꼼하게 작성하고있고 인수테스트까지 작성하고 관리하고있으므로 테스트가 강제된다는 점은 큰 단점으로 다가오지 않았다.</li>\n<li>코드리뷰가 필수적으로 이뤄지는 현 스프린트 단계에서 프로덕션 코드의 가독성을 해치는 방향이 오히려 큰 단점이 될 수 있다.</li>\n<li>성공하는 테스트에 대해서만 문서화가 이뤄지기 때문에 문제상황에서 필요했던 문서의 신뢰성을 충족시킨다.</li>\n<li>(프론트 쵸파가 RestDocs를 좋아한다 🦌)</li>\n</ul>\n<blockquote>\n<p><a href=\"https://github.com/woowacourse-teams/2023-pium/discussions/181\">피움🌱 문서화 도입 관련 discussion</a></p>\n</blockquote>\n<h2>시작하기</h2>\n<p>RestDocs를 설정하는 과정을 정리하려고한다.</p>\n<h3>RestAssured vs MockMvc?</h3>\n<p>RestDocs를 적용하는 방법은 RestAssured를 기반으로 문서를 생성하는 방법과 MockMvc를 기반으로 문서를 생성하는 방법으로 크게 두가지가 있다.</p>\n<p>피움팀은 현재 인수테스트도 작성되어있기 때문에 RestAssured를 사용해도 충분히 문제가 없다.</p>\n<p>하지만 여러 계층이 협업하는 인수테스트 환경에 문서화와 관련된 코드가 작성된다면 안그래도 복잡한 인수테스트 코드의 가독성을 해칠 것이라고 우려되었다.</p>\n<p>슬라이스 테스트를 수행하여 비교적 코드의 무게가 가벼운 Controller 테스트가 MockMvc로 작성되어있었기 때문에 MockMvc를 기반으로 RestAssured를 적용하기로 결정했다.</p>\n<h3>Gradle 설정</h3>\n<blockquote>\n<p>TIP : <code class=\"language-text\">asciidoctor</code>는 adoc 파일을 html 등으로 변환해주는 도구입니다</p>\n</blockquote>\n<div class=\"gatsby-highlight\" data-language=\"gradle\"><pre class=\"language-gradle\"><code class=\"language-gradle\"><span class=\"token keyword\">plugins</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token punctuation\">...</span>\n    id <span class=\"token interpolation-string\"><span class=\"token string\">\"org.asciidoctor.jvm.convert\"</span></span> version <span class=\"token interpolation-string\"><span class=\"token string\">\"3.3.2\"</span></span> <span class=\"token comment\">// asciidoctor 플러그인 추가</span>\n<span class=\"token punctuation\">}</span>\n\nconfigurations <span class=\"token punctuation\">{</span>\n    asciidoctorExt <span class=\"token comment\">// asciidoctorExt에 대한 선언</span>\n    <span class=\"token punctuation\">...</span>\n<span class=\"token punctuation\">}</span>\n\n\n<span class=\"token keyword\">dependencies</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token punctuation\">...</span>\n    asciidoctorExt <span class=\"token string\">'org.springframework.restdocs:spring-restdocs-asciidoctor'</span> <span class=\"token comment\">// asciidoctorExt에 spring-restdocs-asciidoctor 의존성 추가</span>\n    testImplementation <span class=\"token string\">'org.springframework.restdocs:spring-restdocs-mockmvc'</span> <span class=\"token comment\">// mockMvc 사용</span>\n<span class=\"token punctuation\">}</span>\n\next <span class=\"token punctuation\">{</span>\n    snippetsDir <span class=\"token operator\">=</span> <span class=\"token function\">file</span><span class=\"token punctuation\">(</span><span class=\"token string\">'build/generated-snippets'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 스니펫이 생성되는 디렉터리 경로를 설정</span>\n<span class=\"token punctuation\">}</span>\n\ntest <span class=\"token punctuation\">{</span>\n    outputs<span class=\"token punctuation\">.</span>dir snippetsDir <span class=\"token comment\">// 스니펫이 생성되는 디렉터리를 설정</span>\n<span class=\"token punctuation\">}</span>\n\nasciidoctor <span class=\"token punctuation\">{</span> <span class=\"token comment\">// Gradle이 asciidoctor Task를 수행하는 설정 (함수 선언)</span>\n    configurations <span class=\"token string\">'asciidoctorExt'</span> <span class=\"token comment\">// asciidoctor 확장 설정</span>\n    <span class=\"token function\">baseDirFollowsSourceFile</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// .adoc 파일을 include 하면서 사용하기 위한 설정</span>\n    inputs<span class=\"token punctuation\">.</span>dir snippetsDir <span class=\"token comment\">// 스니펫을 불러올 위치 설정</span>\n    dependsOn test <span class=\"token comment\">// Gradle의 test Task 이후 asciidoctor를 수행</span>\n<span class=\"token punctuation\">}</span>\n\nasciidoctor<span class=\"token punctuation\">.</span>doFirst <span class=\"token punctuation\">{</span> <span class=\"token comment\">// asciidoctor Task가 수행될 때 가장 먼저 수행</span>\n    delete <span class=\"token function\">file</span><span class=\"token punctuation\">(</span><span class=\"token string\">'src/main/resources/static/docs'</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\ntask <span class=\"token function\">copyDocument</span><span class=\"token punctuation\">(</span>type<span class=\"token punctuation\">:</span> Copy<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 생성된 html 파일을 옮긴다</span>\n    dependsOn asciidoctor <span class=\"token comment\">// Gradle의 asciidoctor Task 이후 수행</span>\n    from <span class=\"token function\">file</span><span class=\"token punctuation\">(</span><span class=\"token interpolation-string\"><span class=\"token string\">\"</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span><span class=\"token expression\">asciidoctor<span class=\"token punctuation\">.</span>outputDir</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">\"</span></span><span class=\"token punctuation\">)</span>\n    into <span class=\"token function\">file</span><span class=\"token punctuation\">(</span><span class=\"token interpolation-string\"><span class=\"token string\">\"src/main/resources/static/docs\"</span></span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\nbuild <span class=\"token punctuation\">{</span>\n    dependsOn copyDocument <span class=\"token comment\">// build 이후 html 파일 복사</span>\n<span class=\"token punctuation\">}</span>\n\nbootJar <span class=\"token punctuation\">{</span>\n    dependsOn asciidoctor <span class=\"token comment\">// asciidoctor 이후 bootJar 수행</span>\n    from <span class=\"token punctuation\">(</span><span class=\"token interpolation-string\"><span class=\"token string\">\"</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span><span class=\"token expression\">asciidoctor<span class=\"token punctuation\">.</span>outputDir</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">\"</span></span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        into <span class=\"token string\">'static/docs'</span>\n    <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">...</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h3>테스트 코드 작성하기</h3>\n<p>우선 다음과 같은 방식으로 코드를 작성할 수 있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"java\"><pre class=\"language-java\"><code class=\"language-java\"><span class=\"token annotation punctuation\">@AutoConfigureRestDocs</span>\n<span class=\"token annotation punctuation\">@WebMvcTest</span><span class=\"token punctuation\">(</span>controllers <span class=\"token operator\">=</span> <span class=\"token class-name\">PetPlantController</span><span class=\"token punctuation\">.</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">PetPlantControllerTest</span> <span class=\"token punctuation\">{</span>\n\n    <span class=\"token annotation punctuation\">@Autowired</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">MockMvc</span> mockMvc<span class=\"token punctuation\">;</span>\n\n    <span class=\"token annotation punctuation\">@MockBean</span>\n    <span class=\"token keyword\">private</span> <span class=\"token class-name\">PetPlantService</span> petPlantService<span class=\"token punctuation\">;</span>\n    \n    <span class=\"token annotation punctuation\">@Test</span>\n    <span class=\"token keyword\">void</span> 반려_식물_단건_조회_정상_요청시_200을_반환<span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">throws</span> <span class=\"token class-name\">Exception</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token class-name\">PetPlantResponse</span> response <span class=\"token operator\">=</span> <span class=\"token constant\">RESPONSE</span><span class=\"token punctuation\">.</span>피우미_응답<span class=\"token punctuation\">;</span>\n        <span class=\"token function\">given</span><span class=\"token punctuation\">(</span>petPlantService<span class=\"token punctuation\">.</span><span class=\"token function\">read</span><span class=\"token punctuation\">(</span><span class=\"token function\">anyLong</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token function\">any</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">Member</span><span class=\"token punctuation\">.</span><span class=\"token keyword\">class</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">.</span><span class=\"token function\">willReturn</span><span class=\"token punctuation\">(</span>response<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    \n        mockMvc<span class=\"token punctuation\">.</span><span class=\"token function\">perform</span><span class=\"token punctuation\">(</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"/pet-plants/{id}\"</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1L</span><span class=\"token punctuation\">)</span>\n                        <span class=\"token punctuation\">.</span><span class=\"token function\">header</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Authorization\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"pium@gmail.com\"</span><span class=\"token punctuation\">)</span>\n                        <span class=\"token punctuation\">.</span><span class=\"token function\">contentType</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">MediaType</span><span class=\"token punctuation\">.</span><span class=\"token constant\">APPLICATION_JSON</span><span class=\"token punctuation\">)</span>\n                        <span class=\"token punctuation\">.</span><span class=\"token function\">characterEncoding</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">StandardCharsets</span><span class=\"token punctuation\">.</span><span class=\"token constant\">UTF_8</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">.</span><span class=\"token function\">andDo</span><span class=\"token punctuation\">(</span><span class=\"token function\">document</span><span class=\"token punctuation\">(</span>\n                            <span class=\"token string\">\"petPlant/findById/\"</span><span class=\"token punctuation\">,</span>\n                            <span class=\"token class-name\">Preprocessors</span><span class=\"token punctuation\">.</span><span class=\"token function\">preprocessRequest</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">Preprocessors</span><span class=\"token punctuation\">.</span><span class=\"token function\">prettyPrint</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n                            <span class=\"token class-name\">Preprocessors</span><span class=\"token punctuation\">.</span><span class=\"token function\">preprocessResponse</span><span class=\"token punctuation\">(</span><span class=\"token class-name\">Preprocessors</span><span class=\"token punctuation\">.</span><span class=\"token function\">prettyPrint</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n                            <span class=\"token function\">requestHeaders</span><span class=\"token punctuation\">(</span>\n                                    <span class=\"token function\">headerWithName</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Authorization\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">description</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"사용자 인증 정보\"</span><span class=\"token punctuation\">)</span>\n                            <span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n                            <span class=\"token function\">pathParameters</span><span class=\"token punctuation\">(</span>\n                                    <span class=\"token function\">parameterWithName</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"id\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">description</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"반려 식물 ID\"</span><span class=\"token punctuation\">)</span>\n                            <span class=\"token punctuation\">)</span>\n                        <span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">.</span><span class=\"token function\">andExpect</span><span class=\"token punctuation\">(</span><span class=\"token function\">status</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">isOk</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n                <span class=\"token punctuation\">.</span><span class=\"token function\">andDo</span><span class=\"token punctuation\">(</span><span class=\"token function\">print</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><code class=\"language-text\">andDo(document(...))</code> 부분이 문서화와 관련된 내용들이다.</p>\n<p><code class=\"language-text\">document()</code> 내부의 파라미터를 하나씩 살펴보자</p>\n<ul>\n<li><code class=\"language-text\">\"petPlant/findById/\"</code></li>\n</ul>\n<p>스니펫이 생성되는 대상 디렉터리 명이다. </p>\n<p>해당 테스트가 완료되면 문서화 대상으로 지정한 값들에 대해 <code class=\"language-text\">.adoc</code> 문서가 생성된다.</p>\n<p>생성 흐름과정은 뒤에서 설명한다.</p>\n<p>우선 각 파라미터가 어떤 결과물을 도출하는지 확인해보자.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 357px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/91225d4e5198fcd228bbb02a944f8ffa/e07d4/22e5bb11.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 148.8235294117647%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAACXBIWXMAAAsTAAALEwEAmpwYAAACw0lEQVR42qVVa3PSUBTkd/iAJEDI6z4CaaCPQa3T1hmtOqOf9JP9//9h3b1JO+iADfhhgYGbZffsOeeOojiGzwt82W7hiwyWiKIIMb8/BSMR5vM5tptzFFWJPJ0jOpEsEOolmUR4aXKk11doqwKXS4tiMcfkBKUdYTTG1DQwVzfwWYqMiuPkfxRGExKu4LYf4Kgsnc+e1CU7GESog6/iCG9Sg5/+EtZkaEyJjTfIWM/xZBLIhwYVFE6IOivwztQwxQI2z+CYdrlIQy0rlmFB1dFQhWMqPC8M7uszlCT0RY5llZNogRVDkmKTL6hyaA2JFwxmQ9KvdQtbZqjLjrR1FWq+T46xLERU2dD2W+NQUY3tLasvheSolHvbF6XFx7pBRds1rYb6hkCObZudOt65JYPpki6o8NgxfLLcJZ3j2np41k9QuicThmAmY1xWFve+gasUSnHCcuibVlC9ZPu98SGYuuwId888h1GSJJhOpwHRNMFF5XDDOnoppO3d34dglOc5nHOw1sL5Ep/aBj+u7/D5+zf8enjAze0tdEa/G2MC9PkQRrPZDGmaBsyJisFsSoN17bFZr7H0DgUnpiRpxQnS++P5ffijhjHxmpsnJWrar9g2NXuytWXY5o0pwgTF/6rh3ymFDc66rbgU6koznIW01UaaHt/X9dm22e3HnMu15nZRg2vsRKRFIWgTTU8hPKPdFa1qjbW2wop2pVSfbdg80TBCWc40Nek8zLMU+d6qVpj+QDvyaIWelh1JtHFk1RXdKIpQd85ghY+ELR9uaFmpKl3hrC/BOa8HLY59O3Kv5YUu/z4MEbj+Sni0rOvgUNKHU047y7oOTNYRCUvOd5LEBzf4XsKCD6xIqFBWfTDL/m7RHyjpcGkNtkxCywcsH1aLlKynSAXZFqbHWC55uGVrNFQiVVInq1K25qWlFjp0pf4GnK1c8eSPEpQAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='22e5bb11' title='' src='/static/91225d4e5198fcd228bbb02a944f8ffa/e07d4/22e5bb11.png' srcset='/static/91225d4e5198fcd228bbb02a944f8ffa/e7570/22e5bb11.png 170w,\n/static/91225d4e5198fcd228bbb02a944f8ffa/f46e7/22e5bb11.png 340w,\n/static/91225d4e5198fcd228bbb02a944f8ffa/e07d4/22e5bb11.png 357w' sizes='(max-width: 357px) 100vw, 357px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<ul>\n<li><code class=\"language-text\">Preprocessors.preprocessRequest(prettyPrint())</code></li>\n</ul>\n<p>요청값을 읽기 쉬운 서식으로 지정한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 443px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/c5eadf173fb53dedbb2f78124513b849/4d697/f25529d5.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 38.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABAElEQVR42qWR626EIBCFff/X25rUVRQviKy6q9aKgvUU2Jha/zRtSb7ADORwZsZbp3d8aIVVSmxa47/Lk7yAFBySM+jx7Zndtr8LLkphWRbodYUyDtWioNQX9u4Y/4R3ebmAM4YpyjFmHCMxO8kgmUBT1yCEgHOOrusgTVvOTNPkmOfZ4aVpgzC6ISI3MPbAa1ChbTvEMUFRFMjzHFmWoaoqpGnqxG1+x97bXN/3rhovTmoEV4GENrDnMBJgZYuyZAiCK3zfN+Kx+aQFpRTDMDgnR5d77BxaZ1ne4n5/IEmoc0NpagRLhGEIIYR7eC5t59wC79n47wNYDoPRZlC/4RO2BmeFDyWLPgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='f25529d5' title='' src='/static/c5eadf173fb53dedbb2f78124513b849/4d697/f25529d5.png' srcset='/static/c5eadf173fb53dedbb2f78124513b849/e7570/f25529d5.png 170w,\n/static/c5eadf173fb53dedbb2f78124513b849/f46e7/f25529d5.png 340w,\n/static/c5eadf173fb53dedbb2f78124513b849/4d697/f25529d5.png 443w' sizes='(max-width: 443px) 100vw, 443px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<ul>\n<li><code class=\"language-text\">Preprocessors.preprocessResponse(prettyPrint())</code> </li>\n</ul>\n<p>응답값을 읽기 쉬운 서식으로 지정한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/f0e284aab965e9d02175c301d2b3fc99/a27c6/207cbfe0.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 80.58823529411765%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAABdklEQVR42qWUW2+CQBCF+f8/r0mj1qLlVkSWy8LeWLSnM6v1pQ8FSzJZApMvczhniPwg4bsOM51flwv+e0WTtTBqwGQNtDPwfsL1esWF4Fze+0U1TRMssaKmlXjdJDimZ2ziAkmSoKoq1HUdSikF51xo/qu4L9LaEWBALQaUpYRoWgzDAGsMDBU3LS2eMmKyUuPjIUueqBy95AY+VwFZP0vM8xyCzLFNB1OeYTVNRxOG8y5nEXCe5wB83+/REtDULdQhh+lkABvR3aBrgEVRYLvdEvgEk1cYX96gPwqYXsKRglWSfyasyFGWq+IM6lgQ8BNmIIcntx6YpRniOMapLCGlhNKacslRcetdZmCapqHavg9xsT3FZqTp+Ns947IQIgQ6zzJ0lENT1tAkXRdVMGep7MeEHBk2Zbfb4ZB8YCQzVFbCnBuYtl8vmb8bG8PnKGjCcYTlcPsngs03IwFYtqUfhKXddmrdyv1aPd5Zf8/bbe3c08BvzQLWfhCNqasAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='207cbfe0' title='' src='/static/f0e284aab965e9d02175c301d2b3fc99/ca1dc/207cbfe0.png' srcset='/static/f0e284aab965e9d02175c301d2b3fc99/e7570/207cbfe0.png 170w,\n/static/f0e284aab965e9d02175c301d2b3fc99/f46e7/207cbfe0.png 340w,\n/static/f0e284aab965e9d02175c301d2b3fc99/ca1dc/207cbfe0.png 680w,\n/static/f0e284aab965e9d02175c301d2b3fc99/a27c6/207cbfe0.png 700w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<blockquote>\n<p><a href=\"https://docs.spring.io/spring-restdocs/docs/current/reference/htmlsingle/#customizing-requests-and-responses-preprocessors\">Preprocessors 관련 공식문서</a></p>\n</blockquote>\n<ul>\n<li><code class=\"language-text\">requestHeaders(headerWithName(\"Authorization\").description(\"사용자 인증 정보\"))</code> : RequestHeader에 대한 명세를 한다.</li>\n</ul>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/378b19d96d390b9202145c76f9fa25d7/4ad28/4282f935.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 11.176470588235293%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAATklEQVR42nXKQQrAIAxEUe9/UYsLrUjU1CQj6bLYxWdgeKHcBblk8MOYPN/95n9KCfGKGHMcjbdkIRARaq3ovUNVj4kI3LXWwMwws1+7AUG4nFkh8gR+AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='4282f935' title='' src='/static/378b19d96d390b9202145c76f9fa25d7/ca1dc/4282f935.png' srcset='/static/378b19d96d390b9202145c76f9fa25d7/e7570/4282f935.png 170w,\n/static/378b19d96d390b9202145c76f9fa25d7/f46e7/4282f935.png 340w,\n/static/378b19d96d390b9202145c76f9fa25d7/ca1dc/4282f935.png 680w,\n/static/378b19d96d390b9202145c76f9fa25d7/4ad28/4282f935.png 1004w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<ul>\n<li><code class=\"language-text\">queryParameters(parameterWithName(\"name\").description(\"사전 식물 검색 파라미터\"))</code></li>\n</ul>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/0a19b8264bdc169c7acd1edb123e2aa4/1263b/c9dbf6a8.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 28.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAk0lEQVR42oVPiwrEIAzz/z9UBGGe77c5WrhjbI4FArakiRFKKYQYUFtFqeVG2jvvIKXEYY5HHbGPDqG1RsoJc02MOW6kfSkF5mM4eK211bF2TggSv6H3jpQSYozIOWOMsdVRmGit/YcdCbVWNiPj8353J0j0Bgr13sNayzTGMK+3bOice6xwrkw//FUm8xACv6+GXwwl2ApT8L5OAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='c9dbf6a8' title='' src='/static/0a19b8264bdc169c7acd1edb123e2aa4/ca1dc/c9dbf6a8.png' srcset='/static/0a19b8264bdc169c7acd1edb123e2aa4/e7570/c9dbf6a8.png 170w,\n/static/0a19b8264bdc169c7acd1edb123e2aa4/f46e7/c9dbf6a8.png 340w,\n/static/0a19b8264bdc169c7acd1edb123e2aa4/ca1dc/c9dbf6a8.png 680w,\n/static/0a19b8264bdc169c7acd1edb123e2aa4/1263b/c9dbf6a8.png 1000w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<ul>\n<li><code class=\"language-text\">pathParameters(parameterWithName(\"id\").description(\"반려 식물 ID\"))</code></li>\n</ul>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/c051d52975720559003d3c9c97d664cd/9d874/f0d0524b.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 14.705882352941178%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAYUlEQVR42m3NWw6AIAxEUfa/UR4aNAq0VGAUv/DR5HxNk6s277HOE8LibxR21FofSinIOd/e26i1BjU5B2sNYgwgiiBO4MwPiRLM9aON/mwjOQSq18frlbdeFxEw8+8+OgEfu+sIXieDBAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='f0d0524b' title='' src='/static/c051d52975720559003d3c9c97d664cd/ca1dc/f0d0524b.png' srcset='/static/c051d52975720559003d3c9c97d664cd/e7570/f0d0524b.png 170w,\n/static/c051d52975720559003d3c9c97d664cd/f46e7/f0d0524b.png 340w,\n/static/c051d52975720559003d3c9c97d664cd/ca1dc/f0d0524b.png 680w,\n/static/c051d52975720559003d3c9c97d664cd/9d874/f0d0524b.png 1012w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<blockquote>\n<p><code class=\"language-text\">pathParameters</code>를 사용하기 위해</p>\n<p>mockMvc.perform(<code class=\"language-text\">get</code>(\"/pet-plants/{id}\", 1L) 에서</p>\n<p><code class=\"language-text\">RestDocumentationRequestBuilders</code>의 <code class=\"language-text\">get()</code> 메서드를 사용해야한다는 부분을 신경써야한다.</p>\n<p>자세한 내용은 <a href=\"https://docs.spring.io/spring-restdocs/docs/current/api/org/springframework/restdocs/mockmvc/RestDocumentationRequestBuilders.html\">공식문서 참고</a></p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/78ac84a758220ae494519c4d6294ad42/9104d/cc09df18.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 61.76470588235294%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAACEklEQVR42m1T2XLaQBDkKSnjgIxAF0InIEASkixhcVpgO8YOTpxUKkel8pC3/P8fdGbXQOHAQ9dM7c729kzvlr7/+YvnSYFffgjHT9D2Qii6S3CgGW2esyjKLZwLEt5dyFtIEJQOBD2A0PRxYUSoNlooBckVbKsLv+vDJjKVkbRcyEQoKgbqqvkCysUjmJDY5a0O6poNodFE6c2ZgIqooZ/kGKYTGG4fVieA2fb3xFLTPomGZkG3PaodUK3DuyhVRRVCXYVOKu2O/xK7AVyPIaQ9DeVqg7dbqSlHYO3v9hhXiSdE2A9TXOYLRNkUyWiGwTBDNllhlOeIY4/atviBU6Q7vCJkarqDGG5viA7FNsVBNEIvSOiyhFq08Pa8hrNKnSvaqS5X5ROElMxXazx/+43N5x94+vITD09fcbv+hDXF4m5DapeI0iksmi2blbydoaIbNJb/CBnS8TVW9x+xuHnkmK8eMFuuMV7cIRsXuKa1aXGPq9kNgq2BjhchHHoQJTZHhXuxV2i2+9RqREUhd5o5x8bQ7kXohZfcKDYGwx3AC1J0+hE9JZPEqKTYQE3Sj03JSGVMpuSzFYrbDyjeb7hS1vKSMCXFGZmU5nPEowU3MR7NEZJiiwQwx/cKmYIWvSn2Q0z2FqnAoTWWG06Pcp8irTkmGrJKZzR+7tD5V6Y06DfsvhVz79DJQ5QF+eRz2eEfOJZLc9kpfSEAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='cc09df18' title='' src='/static/78ac84a758220ae494519c4d6294ad42/ca1dc/cc09df18.png' srcset='/static/78ac84a758220ae494519c4d6294ad42/e7570/cc09df18.png 170w,\n/static/78ac84a758220ae494519c4d6294ad42/f46e7/cc09df18.png 340w,\n/static/78ac84a758220ae494519c4d6294ad42/ca1dc/cc09df18.png 680w,\n/static/78ac84a758220ae494519c4d6294ad42/9104d/cc09df18.png 905w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n고마워요 ! 리뷰어 그레이 ! </p>\n</blockquote>\n<p>문서화를 수행하고자 하는 나머지 테스트들에도 동일한 방법으로 작성해준다. </p>\n<h3>adoc 스니펫 생성하기</h3>\n<blockquote>\n<p>Snippet : 단편, 부분적, 작은 조각이라는 뜻으로 여기서는 <code class=\"language-text\">문서 조각</code> 정도로 이해하면 된다.</p>\n<p>문서 조각을 모아서 하나의 문서를 만들게 된다.</p>\n</blockquote>\n<p>이렇게 작성한 테스트들을 수행해보자.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 487px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/8a9101243d077cdc58b7ce695c3ff82c/6a170/35bc712c.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 33.529411764705884%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAABQ0lEQVR42oWR227CMBBE+ZA2jh3nfnESQ9ICCQFFIPUBCZXw/38y3bVanlr1YeXVeud4JlkJKWCiBuvEQocKcZxASolAB5g/Trher7jdbng8Ftff759YlgWXywXb7RbDMLjzfD67+5UvfeRBjqoeEBUFkjgmoIIi6GGzJsGIwzRhmo7Yk3ji/nTCbj+gNjWqqkJZlrDWou97rFgsxSteuiPiuoNWEj7BpO/DqpAEBqZpkZOoIkCaZciLEiXNlVLwPA9CCPi0z6m+gR50P6GwHeIodJF5ySP3pmlQty3a9Qbd27uD/kAUPc5QLtbIwAHJkScQ5hlKY1BS7IIqDEMXO01TcpVDa/0U/1kMjLIUxbTHPM8OwhVF0fNVUzfOZUDLHOtfoKSmsi3GcURG34fd8clQBsT0k3Ka1QRNyC3PXLzfilhfqizS2MzmpD4AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='35bc712c' title='' src='/static/8a9101243d077cdc58b7ce695c3ff82c/6a170/35bc712c.png' srcset='/static/8a9101243d077cdc58b7ce695c3ff82c/e7570/35bc712c.png 170w,\n/static/8a9101243d077cdc58b7ce695c3ff82c/f46e7/35bc712c.png 340w,\n/static/8a9101243d077cdc58b7ce695c3ff82c/6a170/35bc712c.png 487w' sizes='(max-width: 487px) 100vw, 487px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>그러면 <code class=\"language-text\">build/generated-snippets/{파라미터에서 설정한경로}</code>에 adoc 파일이 생성된 것을 확인 할 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 292px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/af673976bc63fe606542fe3f51b22cac/73e11/5dd3f00f.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 162.94117647058826%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAhCAYAAADZPosTAAAACXBIWXMAAAsTAAALEwEAmpwYAAADjElEQVR42qWWWW8jRRSF/UMS975VV29u2x3bsQYSgQQjIDAg8oY0DzASQuKBF3794ZzqtuMZZTzO8HBS5V5OvrvUtWdxEuHV6mus+w36ZY+2bZFlmVurqkJd125tmub4ueu6431Je0nPzIIwQJnXMHmJJIkRJwmCMERK0yxNnflzSnkvPbmf57lbZ0EQIPbm8F8/oHl4gxuTkrhDbw3mngff9y+SNz3rDENuwrpBsehgSJmnCTKuPu8FL5QzTKMQ3jcPSHZfYd+UWNWWdP6LzY6GQeAjLUrEaYGcZKL7HDNnGPLPnPr9/h5///Qj6Qw2bYWQhflsQuXKpBkatkRMuiSK3DX//xgmfoCrYYn8lwfsKoPbvsHtokEsc//FORxVxClsZhhu4Chlpn34UkK9cBUF+MHe4N/t91gvLPZd4yhfLVsUbCPPH6vuX0rosdJlkqJXteORTpQp9xHbKmKRVKhxvYBwzpded2v8tbvHsi2xZ/72/aihsdgtanzBEySVWXokfrZtjpR8yJByIGVEOoWqU+NyqSMquk+FPPeeku7xhX3V4s/NHYbWsh8tbjtOmDzF1fX1ZUVZV6woK2uKAgWVFzmqssBdt8SwWmMYBmy3W/R9D2OMe+acZt9tPaSG86zh3NOs4ym5Gxr88+W3eHzzM357+xZ/vHuHXx8fYTn77DQDD3vNx1PNVLk4jo+KqDCKcc3rlspZ0XQ63ybPUHDmaS2lIkNy8q40ez4XYwV3nOa9ybGsSyw4H3VybprKVX3bamWLsTv8j52UU+khEZbTfEz44mFOHqQuiD4YImcNNyRcMKwte7BjoXZd7SbRmoRrUmvvBvFJT541rKOR0LCRXQ6zxFG5/uRny3bS/vTknDUceOxaJv+GJDXbaTPlr+c0WlYkJPHCFu+FfdawJWFFAktTSTQlqXT0tK+maxcTruIQDQ2UsyWpGlZchCvSKafKYVvm7w3js4YLGlrmqqaR8qeciVThy1x5bLnq+uErY3buXPY0VA7VhzLpq9LlbMyhQcUOEL1oD2GfJVzSsCaZCEUkg5o67NXsqv78kraROhbFMum9JVnJHCpUSkSSfl0obP3CuKgoa7UNK9ra0UBkLVe1zIppMPxnClmFuYiwmRpbJpLNxqJ002cVSnuF/0lDb2rsjhVUrkbTKVwSL+xT2FH49FV7WQ4ZYmsKVxxJraJ/0kyrvsgOhv8B4Y+9ts5zqjcAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='5dd3f00f' title='' src='/static/af673976bc63fe606542fe3f51b22cac/73e11/5dd3f00f.png' srcset='/static/af673976bc63fe606542fe3f51b22cac/e7570/5dd3f00f.png 170w,\n/static/af673976bc63fe606542fe3f51b22cac/73e11/5dd3f00f.png 292w' sizes='(max-width: 292px) 100vw, 292px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<div class=\"gatsby-highlight\" data-language=\"adoc\"><pre class=\"language-adoc\"><code class=\"language-adoc\"><span class=\"token comment\">// http-request.adoc 파일</span>\n<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token attr-value\">source</span><span class=\"token punctuation\">,</span><span class=\"token attr-value\">http</span><span class=\"token punctuation\">,</span><span class=\"token variable\">options</span><span class=\"token operator\">=</span><span class=\"token string\">\"nowrap\"</span><span class=\"token punctuation\">]</span></span>\n<span class=\"token literal-block\"><span class=\"token punctuation\">----</span>\nGET /pet-plants/1 HTTP/1.1\nContent-Type: application/json;charset=UTF-8\nAuthorization: pium@gmail.com\nHost: localhost:8080\n\n<span class=\"token punctuation\">----</span></span></code></pre></div>\n<h3>asciidoc 문서 생성하기</h3>\n<p>위에서 생성한 adoc 스니펫들을 모아 하나의 API 문서를 만든다.</p>\n<p><code class=\"language-text\">src > docs > asciidoc</code> 디렉터리를 생성하고 <code class=\"language-text\">.adoc</code> 파일을 생성한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 270px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/42a4818f1fd7d4a9279ceea76b0dd766/8c112/850cce57.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 84.70588235294117%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsTAAALEwEAmpwYAAABjUlEQVR42qWUS0/DMBCE80MQedh52EmcpIS0BFSBOOfAKfeicun/Pw+7Jq5CCRUth9Hahx1/9qzsiShCnGhSDikFhBAIw/BqeVJGKJst2u0AU2ikaYogCK43DAJaBD5CEcNPC0REzPqXYRJLCG3wOH6g7dao68qS+r5/ueF8I5MECUlMlFLKi2mPhtyosgxN0xBhjZpq13V2z8ZXER5JyVxMZI6Qg/oL7TfDiHRLeooFekW0bWsJnVrar1YrlGVpK9/k9JBfCL8oI5pJl7qbT678BE4LKQdwCkk3pJ5m8yFLUU0UTMSVqdiE05/3zeUlU7JzaRoZRTWO4yMJr3mUMgpuqcfJq6oKTjWpqGq8mhJvL8/Y7fd43+0wjiMOhwOGYbC0855TeUopnMpQIDU1dus1NpuNHZ++720wTLnU47SY8oZS7tIEeWlQGWOp+KpMYGh/bnx+pByQMkpZ0buls/dyb8jri+fwnr6xuySGyguURWGp+DoFrbXWZ7+4RUIj6EujD0PnuTXKp/oXw09TReqSgoWIfQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='850cce57' title='' src='/static/42a4818f1fd7d4a9279ceea76b0dd766/8c112/850cce57.png' srcset='/static/42a4818f1fd7d4a9279ceea76b0dd766/e7570/850cce57.png 170w,\n/static/42a4818f1fd7d4a9279ceea76b0dd766/8c112/850cce57.png 270w' sizes='(max-width: 270px) 100vw, 270px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>API가 여러개인 경우 각각을 파일로 관리한 뒤 하나의 adoc 파일로 include하여 합칠 수도 있다.</p>\n<h4>index.adoc</h4>\n<p>다음과 같이 adoc 파일을 작성할 수 있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"adoc\"><pre class=\"language-adoc\"><code class=\"language-adoc\"><span class=\"token comment\">// index.adoc</span>\n<span class=\"token title important\"><span class=\"token punctuation\">=</span> Pium Application API Document</span>\n<span class=\"token attribute-entry tag\">:doctype: book</span>\n<span class=\"token attribute-entry tag\">:source-highlighter: highlightjs</span>\n<span class=\"token attribute-entry tag\">:sectlinks:</span>\n<span class=\"token attribute-entry tag\">:toc: left</span>\n<span class=\"token attribute-entry tag\">:toclevels: 3</span>\n\n<span class=\"token macro\"><span class=\"token function\">include</span><span class=\"token punctuation\">::</span>dictionaryPlant.adoc<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></span></span>\n<span class=\"token macro\"><span class=\"token function\">include</span><span class=\"token punctuation\">::</span>petPlant.adoc<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></span></span>\n<span class=\"token macro\"><span class=\"token function\">include</span><span class=\"token punctuation\">::</span>reminder.adoc<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></span></span>\n<span class=\"token macro\"><span class=\"token function\">include</span><span class=\"token punctuation\">::</span>history.adoc<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></span></span></code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"adoc\"><pre class=\"language-adoc\"><code class=\"language-adoc\"><span class=\"token comment\">// petPlants.adoc</span>\n<span class=\"token title important\"><span class=\"token punctuation\">==</span> 반려 식물(PetPlants)</span>\n\n<span class=\"token title important\"><span class=\"token punctuation\">===</span> 반려 식물 단건 조회</span>\n\n<span class=\"token title important\"><span class=\"token punctuation\">====</span> Request</span>\n\n<span class=\"token macro\"><span class=\"token function\">include</span><span class=\"token punctuation\">::</span>{snippets}/petPlant/findById/http-request.adoc<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></span></span>\n<span class=\"token macro\"><span class=\"token function\">include</span><span class=\"token punctuation\">::</span>{snippets}/petPlant/findById/request-headers.adoc<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></span></span>\n<span class=\"token macro\"><span class=\"token function\">include</span><span class=\"token punctuation\">::</span>{snippets}/petPlant/findById/path-parameters.adoc<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></span></span>\n\n<span class=\"token title important\"><span class=\"token punctuation\">====</span> Response</span>\n\n<span class=\"token macro\"><span class=\"token function\">include</span><span class=\"token punctuation\">::</span>{snippets}/petPlant/findById/http-response.adoc<span class=\"token attributes\"><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></span></span>\n...</code></pre></div>\n<p>adoc 파일의 자세한 문법은 <a href=\"https://docs.asciidoctor.org/asciidoc/latest/syntax-quick-reference/\">asciidoctor 공식문서 참고</a></p>\n<h3>HTML 문서 생성하기</h3>\n<p>이제 웹 페이지가 읽을 수 있도록 HTML 문서를 생성해보자.</p>\n<p>HTML 문서는 <code class=\"language-text\">src > docs > asciidoc</code>에 생성된다.</p>\n<p>다음 명령어를 수행해보자.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">./gradlew asciidoctor</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/03d98aab1aeef4f4e04c6c7ed575d35f/ca1dc/3b9772e1.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 30%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABB0lEQVR42lWRa3KDMAyEfZKCoYS3HcDGEAg0THL/I20lpXTaH9/I1sirlazSokJU1ESDj7yAziMkeYw006ibRkiSFFrrHxLEcYwoigRN5/gPal4C3NjDXlt47xGmCbazlBvh6cyCtjPoXI9wu8EFB2MNYYWiLAWu46gGEnGjF4GB6IYePoxyF9EQSLBDY1q5985JI37HtMYIXFO3LdT+OLDuO/bjwHK/w9Ojx+uF27pi2TZ8PZ+YlwVXesBx3XapZ0dlVQlpmtJaEkGdXZ24G2SMiUZ7Ox8R5vnthPLiLgTJN+SmYlEak4V4l7xjZboaja1xueT4zDLpdi785Fx4dEb+jN9P+s832QK3AJilul8AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='3b9772e1' title='' src='/static/03d98aab1aeef4f4e04c6c7ed575d35f/ca1dc/3b9772e1.png' srcset='/static/03d98aab1aeef4f4e04c6c7ed575d35f/e7570/3b9772e1.png 170w,\n/static/03d98aab1aeef4f4e04c6c7ed575d35f/f46e7/3b9772e1.png 340w,\n/static/03d98aab1aeef4f4e04c6c7ed575d35f/ca1dc/3b9772e1.png 680w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>그러면 <code class=\"language-text\">build > docs > asciidoc</code> 경로에 문서가 생성된다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 271px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/b3243adbf8ff9a7a8cbfb86fc9e7fd03/63d17/5daac1d0.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 94.70588235294117%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAAAsTAAALEwEAmpwYAAACKklEQVR42p2US28aMRSF+SEBxvOw52GPDQwBEh6pmkqVoop0USJVyqpdVIpI/0AX3fZXnx4bQtMKVGBxGQ+2jz/fe+604jhGmiRoqgqlUlBZGkIIcVa0Eop5waf7j/h0+xbXTmPsDLpRdJ6g/4kYHQpcFDkimSHhe5J48vg8QcFr50mKzt0teh/e48ZWmA97WDQOPiWnCzJiT5obJKpARrKEQqeKBcGIV/VXzkQH4v4JNw9fMTcS417NQ2KE+ROiJaWEYnWlVCiZQ2sMq52H/wq+F0URxsdGS2sN5yzq2qEZFPgyX+Dn3QoPj494Xq+xZiyXS/h11tr/xo4wUHoq0vV0hcloAENabTTKskSaZWHer8sy7uG+7NXeHeHr+wtvnXYXTis8f15g1q8xZS4n9OXUj/sWb1h979Ox1ZgNLCol0el2/+Tw3ypF0caDNUWzNGHFN8b33fPXmHMyTYMb9tpmJ9gVkAVbcaEw6RtSOIxIc1lrzDkemCp0UbQ9/KAPd8HFMU9XPY2UBL5b5I4uDmRHGfulY0T7AvFwhOTHLzR9hzlzd2l9zgyut948XnBLKFhFMZkGwoK97XMm003uXgpwlKBvv3Ynom0kvq+uSFbhilS+mg1z19dlqHTJQw59jfZW2edp3Gjogt1DW1S5DKS5TINNfGWj0wgVvq1maOqSlBrDugqVHpgyPA0P2lfhvYT+Kp7k3dSFja4qYEt2D586V2Gcs2sOEf4GgsUpNWTQ/EoAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='5daac1d0' title='' src='/static/b3243adbf8ff9a7a8cbfb86fc9e7fd03/63d17/5daac1d0.png' srcset='/static/b3243adbf8ff9a7a8cbfb86fc9e7fd03/e7570/5daac1d0.png 170w,\n/static/b3243adbf8ff9a7a8cbfb86fc9e7fd03/63d17/5daac1d0.png 271w' sizes='(max-width: 271px) 100vw, 271px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h3>애플리케이션에서 확인해보기</h3>\n<p><a href=\"http://localhost:8080/docs/index.html\">http://localhost:8080/docs/index.html</a> 으로 접속해서 문서를 확인해보자.</p>\n<p>우선 gradle build를 수행한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">./gradlew build</code></pre></div>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/ecddf350bb6d029dc3e16f20abe4b393/fe4f1/adb0a6ab.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 37.64705882352941%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABDUlEQVR42oWQ6ZKDIBCEfRRFUQ7FC0FdK3n/p+rMkMRKUrvZH18Nw9HTdCaUASONRClz9KODaS2KokBZlUQFIcSvlOX9/EklJbIleoQYELcNflmwbjtmv2CcJmJEWCOmeU4918l7aGthCNu20FpDGwOlFOq6Rrb9HNiPg0QjjusV677juFzSXj8MiOua+pmGDeMI1/fpsXoIsdM8z0/IYUzO2EGgx7xONQR0zpFbT663tG5ISJKLVwGO5pWML/Ik/gJPfU7mngWapjkvc2bs6FPkTZAzGTmjB9xPs0fbdahJTFLQFQX+TeRN0GoFprOGsHBUXUsO9f17LMou/3N2Cg59C0UupCg+EF+z+osbdYfruTF7h/oAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='adb0a6ab' title='' src='/static/ecddf350bb6d029dc3e16f20abe4b393/ca1dc/adb0a6ab.png' srcset='/static/ecddf350bb6d029dc3e16f20abe4b393/e7570/adb0a6ab.png 170w,\n/static/ecddf350bb6d029dc3e16f20abe4b393/f46e7/adb0a6ab.png 340w,\n/static/ecddf350bb6d029dc3e16f20abe4b393/ca1dc/adb0a6ab.png 680w,\n/static/ecddf350bb6d029dc3e16f20abe4b393/02d09/adb0a6ab.png 1020w,\n/static/ecddf350bb6d029dc3e16f20abe4b393/9d567/adb0a6ab.png 1360w,\n/static/ecddf350bb6d029dc3e16f20abe4b393/fe4f1/adb0a6ab.png 1830w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>이전에 Gradle에서 작성했던 스크립트 내용 중 copyDocument Task가 build가 일어난 뒤 수행되기 때문이다.</p>\n<div class=\"gatsby-highlight\" data-language=\"gradle\"><pre class=\"language-gradle\"><code class=\"language-gradle\">task <span class=\"token function\">copyDocument</span><span class=\"token punctuation\">(</span>type<span class=\"token punctuation\">:</span> Copy<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 생성된 html 파일을 옮긴다</span>\n    dependsOn asciidoctor <span class=\"token comment\">// Gradle의 asciidoctor Task 이후 수행</span>\n    from <span class=\"token function\">file</span><span class=\"token punctuation\">(</span><span class=\"token interpolation-string\"><span class=\"token string\">\"</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span><span class=\"token expression\">asciidoctor<span class=\"token punctuation\">.</span>outputDir</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">\"</span></span><span class=\"token punctuation\">)</span>\n    into <span class=\"token function\">file</span><span class=\"token punctuation\">(</span><span class=\"token interpolation-string\"><span class=\"token string\">\"src/main/resources/static/docs\"</span></span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\nbuild <span class=\"token punctuation\">{</span>\n    dependsOn copyDocument <span class=\"token comment\">// build 이후 html 파일 복사</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>그러면 <code class=\"language-text\">src > main > resources > static > docs</code> 경로에 HTML 문서가 생성된다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 268px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/a65ffe8f709f1f4d3b5487ce8c38c98e/baf7c/6b2555b4.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 139.41176470588235%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAYAAABh2p9gAAAACXBIWXMAAAsTAAALEwEAmpwYAAACtElEQVR42qWU2W7TQBSG8xaUlnjsWb1v2dMmbUMLUkFIoCIkUJFQJcQNIHgALrjkpX/OjJPQqqFK3Itjz4zt399ZO77vIwgC+IyBka32ba0jBUNv/BKnr34iy2KEYfQg0U4Q+JAqQpT2wJnnDh9C2vHporgPL8yQXv/GcDxBWRSIonakHXvhnIMFAqaawpDLQnB31tLlAIIsqkrMvnxCVVXo1TXFM3OEuwo3hFbUGAxfXIDHBmEcwWgNz/Oc6C4x7aw39MHBoz18Lc+xyAbQJJqlKVIyS6uU2kq0c3PDyN7kQ8zLHsIkQRIna0Ep5W6CNlZaKzzLXqOfjqGNghTSudvKZSvIOREO3+Jsek5xDKGV3rkmb7kspMBEzZGbCkIJItbUOSEMJWzbbN8iFELgXXGN82pB8ZPI84IsR0GFbp/tTGhd6/p7eEyJ6RYTqk/rKndut3LZtmFMXeKdXiK4+IiahoU2ofuR30awKXL6OMwhoxRGchgloSi2hspGcrGjIMXRcAb+/ApHV98xSTTm/QrjMqN7iWGerkOz8mhl/yV0L3pdpJHEpJ80bbksKftMUnIssT2za2viRgXcdZk+POgyHJLYtw8nOKoLnAwqzHoF5r0Sp7RejGpMqhxTsmPyII8M2JJ6I2HgB26E6VDcqr9mrC3Xy/PV/l6XGQuolwVGc02ElqJ0NDaWlrafJdtneTV5uNFQNCOFK/h/8ZK0Fvd0zV1B+/L+PoLjM8hffxzVYtBk+pBordkftCA0UMORm+ZaNWRySWoT4PvbFvY6yzF+vJ9jVGQuhtZGRepIZ5TthELCNkyhzXVILxotMahiRHbiULdENCs13TV1jO0eSaHxtyV8QoTjOsbnyxkKmou2Q5wRYZFEjnInQsZ8pLHG08MCaWhQk0hFVqdxs08jR71p8P4Ftp8igi2jbWAAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='6b2555b4' title='' src='/static/a65ffe8f709f1f4d3b5487ce8c38c98e/baf7c/6b2555b4.png' srcset='/static/a65ffe8f709f1f4d3b5487ce8c38c98e/e7570/6b2555b4.png 170w,\n/static/a65ffe8f709f1f4d3b5487ce8c38c98e/baf7c/6b2555b4.png 268w' sizes='(max-width: 268px) 100vw, 268px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>로컬에서 구동되는 애플리케이션은 해당 경로를 참조하기 때문에 파일을 복사해줬다.</p>\n<p>이제 어플리케이션을 구동하고 <a href=\"http://localhost:8080/docs/index.html\">http://localhost:8080/docs/index.html</a> 로 접속하면 다음과 같이 문서를 확인할 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/ed778918ebc48e6596513bba052388d6/c6957/ad2fa30b.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 57.64705882352942%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB+ElEQVR42nWSz2rbQBDG9SAhoq1xU3KoCyGHHvsq8SXQ4ofxyRSEsQl2RF4gdpsSu7Eh/XM1lcG30hq3sbRaSbva1U53VlJdJ+7Aj9XufvMxmlmrVqudHx+/dJ6/OGrb9pP23p5t2N9/tJPyHrHtSrtSedquVp85B4eH7uNq9ZU1nUxhNBqLyWQC4/FHuL4eGYbD93A5GBoGw3cwwO/LAVxdfUC90dzcTOH29hN8+fxVfPM8cC8uGpYEAJkBx2ULpaRKU6lEKkEKs3+g2YD5sFgs3lg+FUBCKpIkBiklZFmWk3LIWAJKiBx9pnSSUmqLQi/QcDabNSySZBDFseCc6QRMySNcBxD+9oGSEGgUQZIkILTxfdBUhzH0PK9hRVxtDNXG0NeGv5ZLCEkAjDFDoitmWsd19SU7DePCsAwUsTjSLRCQqbwFMpNAKTWGeIZ7ZKeh/p0tQwxKKBAN5xxEKsxcsMf3eWAYmwojwXAA/zT7bh3CarWGgBBsielhrME10fu4OMPqS0MzlDvC8SJOU86L8Rv8wOf+zyVP14QzGnEW0hxSriHnCSv1MRrO5/PXFph3KIVSWdG/YihBAKvvPyDzQ/1kVP5sDNvPpohNhWdnndNOp3PS7Xbr/X7/L47j1JvNZr391qnj3f9Aba/XO3Fd97TVah38AbX/PTjIaWwwAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='ad2fa30b' title='' src='/static/ed778918ebc48e6596513bba052388d6/ca1dc/ad2fa30b.png' srcset='/static/ed778918ebc48e6596513bba052388d6/e7570/ad2fa30b.png 170w,\n/static/ed778918ebc48e6596513bba052388d6/f46e7/ad2fa30b.png 340w,\n/static/ed778918ebc48e6596513bba052388d6/ca1dc/ad2fa30b.png 680w,\n/static/ed778918ebc48e6596513bba052388d6/02d09/ad2fa30b.png 1020w,\n/static/ed778918ebc48e6596513bba052388d6/9d567/ad2fa30b.png 1360w,\n/static/ed778918ebc48e6596513bba052388d6/c6957/ad2fa30b.png 2032w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<h2>Reference</h2>\n<ul>\n<li><a href=\"https://spring.io/projects/spring-restdocs\">https://spring.io/projects/spring-restdocs</a></li>\n<li><a href=\"https://hudi.blog/spring-rest-docs/\">https://hudi.blog/spring-rest-docs/</a></li>\n<li><a href=\"https://techblog.woowahan.com/2597/\">https://techblog.woowahan.com/2597/</a></li>\n<li><a href=\"https://dallog.github.io/apply-rest-docs/\">https://dallog.github.io/apply-rest-docs/</a></li>\n</ul>","frontmatter":{"title":"RestDocs로 API 문서화하기","date":"August 11, 2023","update":"August 11, 2023","tags":["문서화","RestDocs","테스트"],"series":null},"fields":{"slug":"/restdocs-start/","readingTime":{"minutes":11.15}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}},"next":null},"pageContext":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","series":null,"previousPostId":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","nextPostId":null}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/search/page-data.json b/page-data/search/page-data.json
index 8377358f..7de61aa8 100644
--- a/page-data/search/page-data.json
+++ b/page-data/search/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-pages-search-jsx","path":"/search/","result":{"data":{"allMarkdownRemark":{"nodes":[{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 사건의 발단  3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.  그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다. 당황하지 않고 침착하게 f12를 눌러 개발자도구를 열고 네트워크탭을 확인해보니 API가 이상하게 호출되고있었다. 평소 프론트분들을 굉장…","fields":{"slug":"/restdocs-start/"},"frontmatter":{"date":"August 11, 2023","title":"RestDocs로 API 문서화하기","tags":["문서화","RestDocs","테스트"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)'가 작성했습니다.\n\n## 사건의 발단\n\n![](.index_images/c4fe129c.png)\n\n3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.\n\n![](.index_images/dbb1d706.png)\n\n그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다.\n\n당황하지 않고 침착하게 f12를 눌러 개발자도구를 열고 네트워크탭을 확인해보니 API가 이상하게 호출되고있었다.\n\n평소 프론트분들을 굉장히 신뢰하던 주노는 설마 하는 마음에 Notion을 열어봤다. 아니나다를까 Notion에 API 명세가 이상하게 작성되어있었다.\n\n범인은 바로 이것저것 끄적이다가 되돌리기를 하지 않은 주노...\n\n![](.index_images/03624593.png)\n\n위와 같은 사건을 겪으면서 사람 손으로 작성되는 문서의 신뢰도 문제를 인지했고, API 문서화를 자동화할 수 있는 기술의 필요성을 느꼈다.\n\n## 서론\n\nAPI 문서화 방식에 대해 찾아본 결과 크게 두가지 방법을 알 수 있었다.\n\n### 알아보기\n\n1. Spring RestDocs\n\nSpring Rest Docs는 Spring에서 제공하는 문서화 도구다.\n\n- 테스트 작성이 강제된다는 특징이 있다.\n- 테스트를 통해 도출된 결과를 문서로 작성하기 프로덕션 코드에 영향이 없다는 특징이 있다.\n- 아래 설명할 Swagger와 비교했을 때 설정이 약간 번거롭다는 단점이 있다. \n\n2. Swagger\n\nSwagger는 API 문서화를 돕는 오픈소스 툴이다.\n\n- 테스트 작성이 필수가 아니라는 특징이 있다.\n- swagger 이용 시 실제 API가 호출된다는 특징이 있다.\n- 테스트 작성을 안하는 대신 프로덕션 코드에 문서ㅘ와 관련된 코드가 작성된다. (DTO, Controller 등)\n\n### Spring RestDocs\n\n피움 팀은 RestDocs를 사용하기로 결정했고 이유는 다음과 같다.\n\n- 현재 피움팀은 각 계층별 테스트를 꼼꼼하게 작성하고있고 인수테스트까지 작성하고 관리하고있으므로 테스트가 강제된다는 점은 큰 단점으로 다가오지 않았다.\n- 코드리뷰가 필수적으로 이뤄지는 현 스프린트 단계에서 프로덕션 코드의 가독성을 해치는 방향이 오히려 큰 단점이 될 수 있다.\n- 성공하는 테스트에 대해서만 문서화가 이뤄지기 때문에 문제상황에서 필요했던 문서의 신뢰성을 충족시킨다.\n- (프론트 쵸파가 RestDocs를 좋아한다 🦌)\n\n> [피움🌱 문서화 도입 관련 discussion](https://github.com/woowacourse-teams/2023-pium/discussions/181)\n\n## 시작하기\n\nRestDocs를 설정하는 과정을 정리하려고한다.\n\n### RestAssured vs MockMvc?\n\nRestDocs를 적용하는 방법은 RestAssured를 기반으로 문서를 생성하는 방법과 MockMvc를 기반으로 문서를 생성하는 방법으로 크게 두가지가 있다.\n\n피움팀은 현재 인수테스트도 작성되어있기 때문에 RestAssured를 사용해도 충분히 문제가 없다.\n\n하지만 여러 계층이 협업하는 인수테스트 환경에 문서화와 관련된 코드가 작성된다면 안그래도 복잡한 인수테스트 코드의 가독성을 해칠 것이라고 우려되었다.\n\n슬라이스 테스트를 수행하여 비교적 코드의 무게가 가벼운 Controller 테스트가 MockMvc로 작성되어있었기 때문에 MockMvc를 기반으로 RestAssured를 적용하기로 결정했다.\n\n### Gradle 설정\n\n> TIP : `asciidoctor`는 adoc 파일을 html 등으로 변환해주는 도구입니다\n\n```gradle\nplugins {\n    ...\n    id \"org.asciidoctor.jvm.convert\" version \"3.3.2\" // asciidoctor 플러그인 추가\n}\n\nconfigurations {\n    asciidoctorExt // asciidoctorExt에 대한 선언\n    ...\n}\n\n\ndependencies {\n    ...\n    asciidoctorExt 'org.springframework.restdocs:spring-restdocs-asciidoctor' // asciidoctorExt에 spring-restdocs-asciidoctor 의존성 추가\n    testImplementation 'org.springframework.restdocs:spring-restdocs-mockmvc' // mockMvc 사용\n}\n\next {\n    snippetsDir = file('build/generated-snippets') // 스니펫이 생성되는 디렉터리 경로를 설정\n}\n\ntest {\n    outputs.dir snippetsDir // 스니펫이 생성되는 디렉터리를 설정\n}\n\nasciidoctor { // Gradle이 asciidoctor Task를 수행하는 설정 (함수 선언)\n    configurations 'asciidoctorExt' // asciidoctor 확장 설정\n    baseDirFollowsSourceFile() // .adoc 파일을 include 하면서 사용하기 위한 설정\n    inputs.dir snippetsDir // 스니펫을 불러올 위치 설정\n    dependsOn test // Gradle의 test Task 이후 asciidoctor를 수행\n}\n\nasciidoctor.doFirst { // asciidoctor Task가 수행될 때 가장 먼저 수행\n    delete file('src/main/resources/static/docs')\n}\n\ntask copyDocument(type: Copy) { // 생성된 html 파일을 옮긴다\n    dependsOn asciidoctor // Gradle의 asciidoctor Task 이후 수행\n    from file(\"${asciidoctor.outputDir}\")\n    into file(\"src/main/resources/static/docs\")\n}\n\nbuild {\n    dependsOn copyDocument // build 이후 html 파일 복사\n}\n\nbootJar {\n    dependsOn asciidoctor // asciidoctor 이후 bootJar 수행\n    from (\"${asciidoctor.outputDir}\") {\n        into 'static/docs'\n    }\n    ...\n}\n```\n\n### 테스트 코드 작성하기\n\n우선 다음과 같은 방식으로 코드를 작성할 수 있다.\n\n```java\n@AutoConfigureRestDocs\n@WebMvcTest(controllers = PetPlantController.class)\nclass PetPlantControllerTest {\n\n    @Autowired\n    private MockMvc mockMvc;\n\n    @MockBean\n    private PetPlantService petPlantService;\n    \n    @Test\n    void 반려_식물_단건_조회_정상_요청시_200을_반환() throws Exception {\n        PetPlantResponse response = RESPONSE.피우미_응답;\n        given(petPlantService.read(anyLong(), any(Member.class)))\n                .willReturn(response);\n    \n        mockMvc.perform(get(\"/pet-plants/{id}\", 1L)\n                        .header(\"Authorization\", \"pium@gmail.com\")\n                        .contentType(MediaType.APPLICATION_JSON)\n                        .characterEncoding(StandardCharsets.UTF_8))\n                .andDo(document(\n                            \"petPlant/findById/\",\n                            Preprocessors.preprocessRequest(Preprocessors.prettyPrint()),\n                            Preprocessors.preprocessResponse(Preprocessors.prettyPrint()),\n                            requestHeaders(\n                                    headerWithName(\"Authorization\").description(\"사용자 인증 정보\")\n                            ),\n                            pathParameters(\n                                    parameterWithName(\"id\").description(\"반려 식물 ID\")\n                            )\n                        )\n                )\n                .andExpect(status().isOk())\n                .andDo(print());\n    }\n}\n```\n\n`andDo(document(...))` 부분이 문서화와 관련된 내용들이다.\n\n`document()` 내부의 파라미터를 하나씩 살펴보자\n\n- `\"petPlant/findById/\"`\n\n스니펫이 생성되는 대상 디렉터리 명이다. \n\n해당 테스트가 완료되면 문서화 대상으로 지정한 값들에 대해 `.adoc` 문서가 생성된다.\n\n생성 흐름과정은 뒤에서 설명한다.\n\n우선 각 파라미터가 어떤 결과물을 도출하는지 확인해보자.\n\n![](.index_images/22e5bb11.png)\n\n- `Preprocessors.preprocessRequest(prettyPrint())`\n\n요청값을 읽기 쉬운 서식으로 지정한다.\n\n![](.index_images/f25529d5.png)\n\n- `Preprocessors.preprocessResponse(prettyPrint())` \n\n응답값을 읽기 쉬운 서식으로 지정한다.\n\n![](.index_images/207cbfe0.png)\n\n> [Preprocessors 관련 공식문서](https://docs.spring.io/spring-restdocs/docs/current/reference/htmlsingle/#customizing-requests-and-responses-preprocessors)\n\n- `requestHeaders(headerWithName(\"Authorization\").description(\"사용자 인증 정보\"))` : RequestHeader에 대한 명세를 한다.\n\n![](.index_images/4282f935.png)\n\n- `queryParameters(parameterWithName(\"name\").description(\"사전 식물 검색 파라미터\"))`\n\n![](.index_images/c9dbf6a8.png)\n\n- `pathParameters(parameterWithName(\"id\").description(\"반려 식물 ID\"))`\n\n![](.index_images/f0d0524b.png)\n\n> `pathParameters`를 사용하기 위해\n> \n> mockMvc.perform(`get`(\"/pet-plants/{id}\", 1L) 에서\n> \n> `RestDocumentationRequestBuilders`의 `get()` 메서드를 사용해야한다는 부분을 신경써야한다.\n> \n> 자세한 내용은 [공식문서 참고](https://docs.spring.io/spring-restdocs/docs/current/api/org/springframework/restdocs/mockmvc/RestDocumentationRequestBuilders.html)\n> \n> ![](.index_images/cc09df18.png)\n> 고마워요 ! 리뷰어 그레이 ! \n\n문서화를 수행하고자 하는 나머지 테스트들에도 동일한 방법으로 작성해준다. \n\n### adoc 스니펫 생성하기\n\n> Snippet : 단편, 부분적, 작은 조각이라는 뜻으로 여기서는 `문서 조각` 정도로 이해하면 된다.\n> \n> 문서 조각을 모아서 하나의 문서를 만들게 된다.\n\n이렇게 작성한 테스트들을 수행해보자.\n\n![](.index_images/35bc712c.png)\n\n그러면 `build/generated-snippets/{파라미터에서 설정한경로}`에 adoc 파일이 생성된 것을 확인 할 수 있다.\n\n![](.index_images/5dd3f00f.png)\n\n```adoc\n// http-request.adoc 파일\n[source,http,options=\"nowrap\"]\n----\nGET /pet-plants/1 HTTP/1.1\nContent-Type: application/json;charset=UTF-8\nAuthorization: pium@gmail.com\nHost: localhost:8080\n\n----\n```\n\n### asciidoc 문서 생성하기\n\n위에서 생성한 adoc 스니펫들을 모아 하나의 API 문서를 만든다.\n\n`src > docs > asciidoc` 디렉터리를 생성하고 `.adoc` 파일을 생성한다.\n\n![](.index_images/850cce57.png)\n\nAPI가 여러개인 경우 각각을 파일로 관리한 뒤 하나의 adoc 파일로 include하여 합칠 수도 있다.\n\n#### index.adoc\n\n다음과 같이 adoc 파일을 작성할 수 있다.\n\n```adoc\n// index.adoc\n= Pium Application API Document\n:doctype: book\n:source-highlighter: highlightjs\n:sectlinks:\n:toc: left\n:toclevels: 3\n\ninclude::dictionaryPlant.adoc[]\ninclude::petPlant.adoc[]\ninclude::reminder.adoc[]\ninclude::history.adoc[]\n```\n\n```adoc\n// petPlants.adoc\n== 반려 식물(PetPlants)\n\n=== 반려 식물 단건 조회\n\n==== Request\n\ninclude::{snippets}/petPlant/findById/http-request.adoc[]\ninclude::{snippets}/petPlant/findById/request-headers.adoc[]\ninclude::{snippets}/petPlant/findById/path-parameters.adoc[]\n\n==== Response\n\ninclude::{snippets}/petPlant/findById/http-response.adoc[]\n...\n```\n\nadoc 파일의 자세한 문법은 [asciidoctor 공식문서 참고](https://docs.asciidoctor.org/asciidoc/latest/syntax-quick-reference/)\n\n### HTML 문서 생성하기\n\n이제 웹 페이지가 읽을 수 있도록 HTML 문서를 생성해보자.\n\nHTML 문서는 `src > docs > asciidoc`에 생성된다.\n\n다음 명령어를 수행해보자.\n\n```shell\n./gradlew asciidoctor\n```\n\n![](.index_images/3b9772e1.png)\n\n그러면 `build > docs > asciidoc` 경로에 문서가 생성된다.\n\n![](.index_images/5daac1d0.png)\n\n### 애플리케이션에서 확인해보기\n\nhttp://localhost:8080/docs/index.html 으로 접속해서 문서를 확인해보자.\n\n우선 gradle build를 수행한다.\n\n```shell\n./gradlew build\n```\n\n![](.index_images/adb0a6ab.png)\n\n이전에 Gradle에서 작성했던 스크립트 내용 중 copyDocument Task가 build가 일어난 뒤 수행되기 때문이다.\n\n```gradle\ntask copyDocument(type: Copy) { // 생성된 html 파일을 옮긴다\n    dependsOn asciidoctor // Gradle의 asciidoctor Task 이후 수행\n    from file(\"${asciidoctor.outputDir}\")\n    into file(\"src/main/resources/static/docs\")\n}\n\nbuild {\n    dependsOn copyDocument // build 이후 html 파일 복사\n}\n```\n\n그러면 `src > main > resources > static > docs` 경로에 HTML 문서가 생성된다.\n\n![](.index_images/6b2555b4.png)\n\n로컬에서 구동되는 애플리케이션은 해당 경로를 참조하기 때문에 파일을 복사해줬다.\n\n이제 어플리케이션을 구동하고 http://localhost:8080/docs/index.html 로 접속하면 다음과 같이 문서를 확인할 수 있다.\n\n![](.index_images/ad2fa30b.png)\n\n## Reference\n\n- https://spring.io/projects/spring-restdocs\n- https://hudi.blog/spring-rest-docs/\n- https://techblog.woowahan.com/2597/\n- https://dallog.github.io/apply-rest-docs/"},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. OAuth란? 현재 개발하고 있는 서비스에서 구글 캘린더에 접근을 한다고 가정을 해봅시다. 현재 접근하는 사용자의 구글 캘린더 정보를 얻고자 한다면 구글 계정으로 로그인을 해야합니다. 진짜 간단한 방법이 있습니다. 사용자로부터 구글 id와 password를 받고 저희가 대신 로그인 해서 해당 사용자의 …","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"date":"August 10, 2023","title":"내가 이해한 OAuth2.0","tags":["OAuth2.0"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[클린](https://github.com/hozzijeong)'가 작성했습니다.\n\n\n## OAuth란?\n\n현재 개발하고 있는 서비스에서 구글 캘린더에 접근을 한다고 가정을 해봅시다. 현재 접근하는 사용자의 구글 캘린더 정보를 얻고자 한다면 구글 계정으로 로그인을 해야합니다. 진짜 간단한 방법이 있습니다. 사용자로부터 구글 id와 password를 받고 저희가 대신 로그인 해서 해당 사용자의 계정 정보를 받아오는 것입니다.\n\n하지만 이 방법은 매우 위험합니다. 계정 정보가 탈취당할 수도 있고, 애초에 **대리 로그인**이라니 신개념 보이스피싱으로 오해받을 수도 있습니다.\n\n제일 괜찮은 방법은 구글 자체에서 로그인 서비스를 대체할 수 있는 방식을 만들어서 제공을 하는 것입니다. 실제로  과거에 AuthSub라는 자체 개발한 방법을 통해 구현을 했지만 이 정형화 되지 않은 방법은 다양한 문제를 야기할 수 있었습니다. 흔히 카카오 로그인, 구글 로그인, 깃헙 로그인 등등 여러가지의 방식이 존재하는데 형식이 통일되어 있지 않다면 이 모든 것들을 각각 구현해서 사용을 해야하는 문제점이 있습니다. \n\n이러한 문제점을 해결하기 위해 나타난 개념이 OAuth입니다. 초기 버전인 1.0은 범위문제, 불확실한 역할, 보안 문제등으로 인해서 많이 사용 되지 않고 OAuth 2.0이 통상적으로 많이 사용 되고 있습니다. \n\n> 💡 **인증과 인가**: 인증은 요청자의 신원을 확인하는 것이고, 인가는 신원이 확인된 어느 사람이 권한이 있는지를 확인하는 것입니다. 개인적으로 생각했을때 인증은 사람의 직업 검증하는 것이고 인가는 그 사람의 직책을 통해 권한을 접근한다고 생각합니다. (직책에 따른 정보 접근 권한이 다르기 때문)\n\n\n## OAuth 2.0\n\nOAuth2.0을 이해하기 위해서는 크게 4가지 용어를 알고 있으면 됩니다. 바로 Resource Owner, Client, Resource Server, Authorization Server입니다. 각각의 역할과 설명은 다음과 같습니다.\n\n![image](https://github.com/pium-official/pium-official.github.io/assets/50974359/c65c8e80-b04a-4b51-b66a-dbdd6d43b543)\n\n- `Resource Owner`**:** 리소스(정보)의 주인. 즉,서비스를 이용하고자 하는 사용자를 의미합니다.\n- `Client`: 리소스(정보)를 가공 혹은 Resource Owner에게 제공하는 주체. OAuth 2.0을 개발하는 어플리케이션(서비스)을 의미한다.\n- `Resource Server`: 리소스(정보)를 갖고 있는 주체. 흔히 카카오, 구글, Github등 사용자 정보를 제공하는 주체를 의미한다.\n- `Authorization Server`: Resource Owner를 인증하고, Client에 인가를 할당하는 역할이다.\n\nOAuth를 가장 많이 도입한 기능 중 하나는 소셜 로그인입니다. 하나의 예시를 들어보겠습니다. 사용자가 Todo앱에 접근하려고 합니다. 사용자의 Todo인지를 확인하기 위해서는 로그인 기능이 필요합니다. 그런데 사용자는 회원가입을 하기 귀찮습니다. 이 과정에서 사용자의 기본 정보 (이메일, 닉네임, 프로필 사진 등)를 갖고 있는 소셜 네트워크가 있다고 생각해 봅시다. Client는 이 소셜 네트워크를 통해서 사용자에게 간단한 회원가입/로그인 기능을 제공할 수 있습니다. 이제 본인이 Todo앱에 회원가입을 하고, 나의 Todo를 카카오 스토리에 공유한다고 상상하고 OAuth의 동작과정에 대해 한번 알아보겠습니다.\n\n> 💡 OAuth에는 크게 4가지 grant(승인 방식)가 있는데, 이번에 다루는 승인 방식은 기본적으로 사용되고 있는 **Authorization Code Grant(권한 부여 승인 코드 방식)** 을 통해 기준으로 설명하겠습니다.\n\n![image](https://github.com/pium-official/pium-official.github.io/assets/50974359/e4f90a4b-6783-4d32-974a-2fdc2c5d3ae3)\n\n- 첫 번째는 로그인 요청입니다. 흔히 우리가 알고있는 “카카오로 로그인하기”를 클릭 했을 때 나오는 설정되는 방식입니다. 이때 Authorization Server에 4가지 파라미터를 동봉해서 보냅니다.\n    - client_id(required): Server에서 발급받은 인증 id입니다.\n    - redirect_uri(optional): Server에 등록할 때 함께 입력한 redirect_uri입니다.\n    - response_type(required): 반드시`code`로 설정해야 합니다.\n    - scope(optional): 제공하는 정보 범위를 설정합니다.\n- Authorization Server에서 Resource Owner에게 아이디와 비밀번호를 요구합니다. 사용자 인증이 된다면, 미리 입력받은 redierct_uri로 이동합니다.\n- 해당 uri로 리다이렉트 되면서 함께 동봉되어 온 Authorization Code를 받고 이 코드를 Access Token으로 교환합니다.\n- 교환한 Access Token을 통해서 Resource Server에서 원하는 데이터를 얻을 수 있습니다. (Todo일정을 카카오 스토리에 공유할 수 있습니다!!)\n\n위와 같은 과정을 통해서 OAuth를 통해서 제 3의 서비스에서 사용자의 정보에 인가를 받아서 가공하거나 직접적으로 제공할 수 있습니다.\n\n사용자로부터 로그인 정보를 받아서 로그인을 하고 사용자의 권한을 부여받은 Access Token을 통해서 Reource Server로부터 데이터를 얻는 것입니다.\n\n---\n\n### OAuth공부를 하면서 들었던 의문점\n\nAccess Token을 통해서 Resource에 있는 데이터를 얻는 것은 알겠는데, 그래서 이게 로그인이랑 어떤 관련이 있는가? 그리고, Client DB에 있는 데이터나 API랑도 관련이 있나?\n\nAuthorization Server를 통해서 넘겨받은 Access Token을 활용하면 소셜 로그인을 구현할 수 있었고, 해당 토큰을 통해서 모든 정보에 접근이 가능하겠구나 생각을 했었습니다. 하지만, 이 Access Token은 Resource Server에 있는 데이터를 얻는데 필요한 Access Token이고 **Client 내부에서 접근하는 DB와 API랑은 관련이 없다는 것입니다.**\n\nClient에서는 넘겨받은 Access Token을 통해서 개별적으로 구축한 member DB에서 해당 유저를 식별하고, 그에 맞는 로그인 기능을 구현해야 합니다.\n\n![image](https://github.com/pium-official/pium-official.github.io/assets/50974359/e6c1a44b-6e6e-4034-bca6-cfe9e2c5d8c0)\n\n로그인 기능을 개별적으로 구현해야 한다는 얘기를 듣고, Client의 역할을 어떻게 분리가 되는지에 대해 의문이 들었습니다. 여기서 Client는 사용자가 이용하는 앱 서비스인데, 사용자와 직접적인 인터렉션을 하는 Client(FE)와 데이터를 제공하는 Sever(BE)로 분리가 됩니다. \n\n그렇다면 OAuth를 이용한 서비스를 구현할 때 Client안에서는 어떤 일이 일어날까요?\n\n1. 사용자 로그인 페이지 제공 (FE)\n2. redirect_uri로 이동시키고, 넘겨받은 Autorization Code를 BE로 넘겨줌 (FE)\n3. FE로부터 넘겨받은 Autorization Code를 Authorization Server에 전달하고, Access Token과 Refresh Token을 받음(BE)\n4. 넘겨 받은 Access Token을 통해 Resource Owner 정보 조회(BE)\n5. DB Table에 해당 유저 확인 후 Client Session이나 Client Token 전달(BE)\n6. 전달 받은 Session이나 Token을 통해서 유저 로그인 유지 (FE)\n7. 사용자가 Client의 서비스를 이용하고자 할 때 Client Session을 통해 인증을 함 (FE)\n8. Client에서 제공하고자 하는 데이터가 Resource Server에서 얻어야 하는 데이터라면, 저장해 놓았던 Access Token을 통해 Resource Server로 부터 데이터를 받아옴. 그리고 Client에서 제공하는 API와 잘 조합해서 데이터 제공(BE)\n9. 사용자가 확인 가능하게 UI제공 (FE)\n\n![image](https://github.com/pium-official/pium-official.github.io/assets/50974359/a668a660-8b62-4fbd-8caf-e3998c570a1c)\n\nClient에서의 역할을 나눠보면 다음과 같습니다.\n\n### FE\n\n- 로그인 페이지 제공\n- redirect_uri를 통해 Authorization Code 전달\n- Resource Server에 맞는 UI 제공\n\n### BE\n\n- 전달받은 Authorization Code를 통해 Access Token 교환\n- Access Token을 통해 Resource Server에 있는 데이터 요청 및 가공\n- Access Token만료 시 Refresh Token으로 Access Token 갱신\n\n---\n\n### 참조\n\n[OAuth의 인증 종류](https://blog.naver.com/mds_datasecurity/222182943542)\n\n[OAuth의 개념과 동작 원리](https://hudi.blog/oauth-2.0/)\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. style-lint, husky를 통한 컨벤션 자동화 하기 프로젝트는 혼자 할 수 도 있지만 팀원들과 함께 진행하는 경우도 있습니다. 피움의 경우에 팀원들과 함께 진행하고 있습니다. 개인적으로 생각했을 때 코드를 작성한다는 것은 그 자체로 하나의 문서를 만드는 것이라고 생각합니다. 그리고 그 문서의 양…","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"date":"August 07, 2023","title":"stylelint와 husky를 통해 컨벤션 통일하기","tags":["stylelint","husky","컨벤션"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[클린](https://github.com/hozzijeong)'가 작성했습니다.\n\n# style-lint, husky를 통한 컨벤션 자동화 하기\n\n프로젝트는 혼자 할 수 도 있지만 팀원들과 함께 진행하는 경우도 있습니다. 피움의 경우에 팀원들과 함께 진행하고 있습니다. 개인적으로 생각했을 때 코드를 작성한다는 것은 그 자체로 하나의 문서를 만드는 것이라고 생각합니다. 그리고 그 문서의 양식을 통일하는 것이 가독성이나 유지 보수를 수월하게 한다고 생각합니다. 그렇기에 각각의 팀바다 코드 컨벤션이 존재하고, 그 컨벤션을 강제하도록 하는 플러그인 (`eslint`, `prettier`)이 존재합니다. \n\n이번에 소개할 기능은 css컨벤션을 맞출 수 있게 도와주는 style-lint와 git 메세지 양식을 지정해주는 husky에 대해 소개해 보려 합니다. \n\n### Stylelint\n\n[링크](https://stylelint.io/)\n\n> A mighty CSS linter that helps you avoid errors and enforce conventions.\n> \n\nstylelint의 소개글 입니다. 간단하게 말해서 css 에러를 피하고 컨벤션을 강요하도록 하는 기능입니다. 설치는 다음과 같습니다. 저희는 styled-component를 사용하기 때문에 해당 요건에 맞는 라이브러리를 설치하겠습니다.\n\n```bash\nnpm install --save-dev stylelint stylelint-config-styled-components\n```\n\n라이브러리 설치가 끝나면 `.stylelintic`이라는 파일에서 원하는 css규칙을 결정할 수 있습니다. \n\n```json\n{\n  \"extends\": [\"stylelint-config-clean-order\", \"stylelint-config-styled-components\"],\n  \"plugins\": [\"stylelint-order\"],\n  \"customSyntax\": \"postcss-styled-syntax\"\n}\n```\n\n피움에서는 `stlyelint-order`라는 플러그인을 설치한 뒤에 해당 규칙에 따라 css 컨벤션을 정했습니다. 실행시키는 방법은 다음과 같습니다.\n\n```json\n\"scripts\": {\n\t\"stylelint\": \"stylelint --ignore-path .gitignore '**/*.(ts|tsx)'\",\n}\n```\n\n위와같이 설정하고 명령어를 입력하게 된다면 css파일을 돌면서 규칙에 맞지 않는 파일을 찾아줍니다. \n\n```bash\nnpm run stylelint\n```\n\n![image](https://github.com/pium-official/pium-official.github.io/assets/50974359/ddb7ccf7-48ac-498f-a01b-199966021c93)\n\n\n하지만 우린 좀 더 편한걸 원합니다. 매번 실행시키고 경고창들을 변경하기 보다 실행시킬때마다 자동으로 수정시켜주는걸 원합니다. 만약 그것을 원한다면 명령어에 `—fix`만을 추가해주면 됩니다.\n\n```json\n\"scripts\": {\n\t\"stylelint\": \"stylelint --ignore-path .gitignore '**/*.(ts|tsx)' --fix\",\n}\n```\n\n\nhttps://github.com/pium-official/pium-official.github.io/assets/50974359/0f9aa05c-a861-4601-a959-58754752294d\n\n\n여기에 더 가서 파일을 저장할 때마다 실행시킬수도 있습니다.\n\nvsc의 `setting.json`에 들어가서 stylelint에 대한 설정을 해주면 됩니다. (vsCode extension을 먼저 설치해야 합니다)\n\n```json\n//...\n\t\"editor.codeActionsOnSave\": {\n\t\t\"source.fixAll.stylelint\": true,\n\t\t\"source.fixAll.eslint\": true,\n\t\t\"source.fixAll.prettier\": true\n\t},\n\t\"stylelint.validate\": [\n\t\t\"typescript\",\n\t\t\"typescriptreact\",\n\t\t\"css\",\n\t\t\"less\",\n\t\t\"postcss\",\n\t\t\"scss\",\n\t\t\"html\",\n\t\t\"javascript\",\n\t\t\"vue-html\",\n\t\t\"vue-postcss\",\n\t\t\"sass\",\n\t\t\"markdown\",\n\t\t\"vue\"\n\t],\n//...\n```\n\ncodeActionOnSave는 저장할때마다 stylelint에 있는 모든 것을 fix한다는 것이고 아래에 있는 stylelint.validate는 해당 옵션을 적용시킬 확장자를 의미합니다. 위와 같이 설정하고 저장한다면 저장을 할 때마다 자동으로 컨벤션 적용이 되는 것을 볼 수 있습니다.\n\n### Husky\n\n[링크](https://typicode.github.io/husky/)\n\n> Husky improves your commits and more 🐶 *woof!*\n> \n> \n> You can use it to **lint your commit messages**, **run tests**, **lint code**, etc... when you commit or push. Husky supports **[all Git hooks](https://git-scm.com/docs/githooks)**.\n> \n\n이번에는 `git`에 대한 컨벤션을 맞추기 위해 `husky`라는 라이브러리를 통해 `git hook`을 실행하보려 합니다. `git`에는 `commit`, `push` 등의 명령어가 있지만, 각각의 명령어가 실행되기 전에 전반적으로 실행시키고 싶은 명령어가 있거나, 컨벤션을 맞추거나, `commit` 메세지 형식을 강제할 수 있습니다. 이러한 일련의 과정이 필요한 이유는 팀 컨벤션에 맞춰진 **신뢰성 있는 코드**를 원격 저장소에 저장하기 위해서 입니다. 예시로 앞서 얘기한 `stylelint`가 적용이 되지 않은 코드가 원격 저장소에 올라가게 된다면, 컨벤션이 맞춰지지 않은것이고 공통된 문서로써의 역할을 잃을 수 있습니다. 이에 각각의 명령어기 실행되기 전에 단계를 `pre`라는 접두사를 붙여서 `pre-commit` 또는 `pre-push`단계라고 하는데, 이 각각의 단계에서 `test`를 실행하거나 build`를` 실행할 수도 있습니다.\n\n다음 명령어를 통해 설치할 수 있습니다.\n\n```bash\nnpm install husky --save-dev\nnpx husky install // 이 명령어를 통해서 git hook을 사용할 수 있도록 함.\n```\n\n`hooks`를 만들기 위해서는 다음과 같이 입력하면 됩니다. `husky add <file> [cmd]` → 이와 같은 형식으로 `husky` 폴더를 생성할 수 있습니다. (단, 해당 명령어를 입력하기 전에 `husky install`을 꼭 해야합니다!)\n\n```bash\nnpx husky add .husky/pre-commit \"npm test\"\n```\n\n위와같이 설정하고 나면 .husky폴더에 다음과 같은 파일이 생성됩니다.\n\n![image](https://github.com/pium-official/pium-official.github.io/assets/50974359/82a9d271-4748-4871-be3a-220ca36c2de0)\n\n이제 모든 커밋을 하기 전에 `npm test`명령어가 실행되게 됩니다. 이제, `test`를 통과하지 못한다면 `commit`은 일어나지 않습니다. 이를 통해 원격 저장소에 올라가는 코드들의 신뢰성은 급상승 하게 됩니다! \n\n하지만 하나의 단점이 있습니다. 피움 프로젝트를 모노레포 형식으로 진행하고 있는데, `husky`가 `githook`이기 때문에 `npm`에 의존성이 없는 `backend` 폴더에서도 커밋이 발생하기 전에 해당 `npm test`가 실행된다는 점입니다. 이는 상당히 좋지 못합니다… `pre-commit` 단계에서 명령어를 `cd frontend && npm test`와 같이 변경해서 실행해봐도 백엔드에서 커밋을 할때마다 해당 명령어가 실행된다는게 상당히 비효율적인 방식이라고 생각했습니다. 따라서 피움 프론트엔드 CI는 husky로 진행하지 않기로 했습니다. 단, `commit` 메세지 형태는 강제할 수 있었습니다. `git` 컨벤션인 부분이라 FE/BE 모두 공통으로 해당되는 내용이었기에 해당 부분만 추가하는 방식으로 `husky`를 사용하기로 했습니다.\n\n```bash\n#!/usr/bin/env sh\n. \"$(dirname -- \"$0\")/_/husky.sh\"\n\n# 커밋 컨벤션\n# 0. 검사 예외 조건 (자동 생성, 최초 커밋)\n# - Merge branch*, Merge pull request*, initial*\n# 1. 접두사의 글자는 소문자\n# 2. 맨 마지막 글자 '.' 마침표 금지\n# 3. 커밋 접두사 (규칙: '접두사' + '콜론' + ' ')\n# - feat: 새로운 기능 추가\n# - fix: 버그 수정\n# - docs: 문서의 수정\n# - style: (코드의 수정 없이) 스타일(style)만 변경(들여쓰기 같은 포맷이나 세미콜론을 빼먹은 경우)\n# - refactor: 코드를 리펙토링\n# - test: Test 관련한 코드의 추가, 수정\n# - chore: (코드의 수정 없이) 설정을 변경\n# - design: css 코드 수정\n# - build: build 및 관련 설정 변경\n\nCOMMIT_MSG_FILE=$1\nFIRST_LINE=`head -n1 ${COMMIT_MSG_FILE}`\nRES=\"needCheck\" # needCheck, auto, initial, lintError*, clear\n\nif [[ $FIRST_LINE =~ ^(Merge branch) ]] ||\n   [[ $FIRST_LINE =~ ^(Merge pull request) ]]; then\n  RES=\"auto\"\nfi\n\nif [[ $FIRST_LINE =~ ^(initial) ]]; then\n  RES=\"initial\"\nfi\n\nif [ $RES == \"needCheck\" ]; then\n  if [[ $FIRST_LINE =~ (\\.)$ ]]; then\n    RES=\"lintError1\"\n  fi\n\n  if [[ ! $FIRST_LINE =~ ^(feat: ) ]] &&\n     [[ ! $FIRST_LINE =~ ^(fix: ) ]] &&\n     [[ ! $FIRST_LINE =~ ^(docs: ) ]] &&\n     [[ ! $FIRST_LINE =~ ^(style: ) ]] &&\n     [[ ! $FIRST_LINE =~ ^(refactor: ) ]] &&\n     [[ ! $FIRST_LINE =~ ^(test: ) ]] &&\n     [[ ! $FIRST_LINE =~ ^(design: ) ]] &&\n     [[ ! $FIRST_LINE =~ ^(build: ) ]] &&\n     [[ ! $FIRST_LINE =~ ^(chore: ) ]]; then\n    RES=\"lintError2\"\n  fi\n\n  if [[ ! $RES =~ ^(lintError) ]]; then\n    RES=\"clear\"\n  fi\nfi\n\nif [[ $RES =~ ^(lintError) ]]; then\n  if [[ $RES == \"lintError1\" ]]; then\n    echo \"CommitLint#1: 문장 마지막의 ('.') 마침표를 제거해주세요.\"\n  fi\n  if [[ $RES == \"lintError2\" ]]; then\n    echo \"CommitLint#2: 접두사, 콜론, 띄어쓰기 형태를 확인하세요. (feat: , fix: , docs: , style: , refactor: , test: , chore: )\"\n  fi\n  exit 1\nelif [[ $RES == \"auto\" ]]; then\n  echo \"Automatically generated commit message from git\"\nelif [[ $RES == \"initial\" ]]; then\n  echo \"Initial commit\"\nelif [[ $RES == \"clear\" ]]; then\n  echo \"Pass commit lint!\"\nfi\n\nexit 0\n```\n\n프로젝트 `git` 컨벤션에 맞춰서 메세지 작성을 강제 했고, 이를 통해 `commit` 메세지 통일을 할 수 있었습니다!\n\n---\n\n### 맺는말\n프로젝트는 팀원들이 하나의 문서를 만드는 것이라고 생각을 합니다. 그리고 통일된 문서를 만들때 가장 필요한 것은 규칙(컨벤션)이고 그 규칙을 자동으로 강제할 수 있고, 코드의 신뢰성을 높여줄 수 있는 라이브러리에 대해서 한번 알아봤습니다.\n스타일 컨벤션을 맞추기 위해서는 `stylelint`를 `git hook`을 통해 `git`컨벤션을 맞추고 싶은 경우에는 `husky`를 통해서 컨벤션을 통일 할 수 있었습니다.\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. CRA없에 webpack으로 react 세팅하기 피움 서비스 환경을 만들기로 하면서, FE의 개발 스펙은 React + TypeScript로 설정하였습니다. React는 당연 현존 최강 라이브러리이고, 여기에 JavaScript의 동적 타입을 컴파일 단계에서 잡아주는 TypeScript까지 더해서 안정…","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"date":"August 06, 2023","title":"webpack으로만 React 설정하기 (without CRA)","tags":["React","Webpack"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[클린](https://github.com/hozzijeong)'가 작성했습니다.\n\n\n# CRA없에 webpack으로 react 세팅하기\n\n피움 서비스 환경을 만들기로 하면서, FE의 개발 스펙은 React + TypeScript로 설정하였습니다. React는 당연 현존 최강 라이브러리이고, 여기에 JavaScript의 동적 타입을 컴파일 단계에서 잡아주는 TypeScript까지 더해서 안정적인 서비스를 개발하려고 합니다. \n\n평소같았으면 `CRA`를 통해 손쉽게 리액트 설치를 하고 개발을 시작했을 텐데, CRA의 단점이 이미 정교하게 세팅된 babel과 webpack 설정을 따라 개발을 해야 한다는 것이고 그에 따른 트레이드 오프가 상당히 많이 발생할 수 있다는 점입니다. (하나의 예시로 CRA를 통해서는 절대경로 지정 하기가 어렵습니다.) 또한, 이왕에 내 서비스 개발하는거 남이 차려준 밥상 보다 내가 직접 한번 해보겠다는 생각으로 webpack으로만 react세팅을 시도해 보려고합니다 (가장 큰 원인은 요구사항이 CRA없이 webpack으로 react 설치하는 거였습니다 ㅎ)\n\n### package.json 설치\n\n우선 가장 처음 해야할 단계입니다. react, typescript, webpack 등 우리가 설치할 의존성 관리와 기타 프로젝트 정보를 저장해 줄 `package.json`을 설치 해줍니다.\n\n```bash\nnpm init // 또는\nyarn init -y\n```\n\n### 환경 구축에 필요한 패키지 설치\n\n```bash\nnpm install react react-dom // react 설치\nnpm install -D typescript @types/react @types/react-dom // typescript 설치\nnpm install tsc-init // tsconfig 설치\n\nnpm install -D webpack webpack-cli // 웹팩 라이브러리와 명령어를 통해 웹팩을 이용할 수 있는 라이브러리 설치\nnpm install -D html-webpack-plugin webpack-dev-server ts-loader  // 각각 번들 후 html파일을 만들어주는 플러그인, 개발할 때 사용할 웹 서버, typescript파일을 javascript로 변환하는 webpack loader 설치\n```\n\n위에 파일들을 설치하고 나면 이제부터 본격적인 세팅을 합니다.\n\n### webpack.config.js 파일 설정\n\n웹팩 파일 설정입니다. \n\n```jsx\n// webpack.config.js\nconst { resolve } = require('path'); // path 설정에 도움을 줍니다.\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');\nconst ReactRefreshTypeScript = require('react-refresh-typescript');\n\nconst isDevelopment = process.env.NODE_ENV === 'development';\n\nmodule.exports = {\n  entry: resolve(__dirname, 'src', 'index.tsx'), \n  output: {\n    path: resolve(__dirname, 'dist'), // 번들 파일이 저장될 디렉토리\n    filename: 'bundle.js', // 파일 이름\n    assetModuleFilename: 'assets/[name][ext]', // 에셋의 파일 이름\n    clean: true, // 빌드 이전 결과물 정리 옵션\n    publicPath: '/', // 빌드된 파일 앞에 붙일 경로\n  },\n  resolve: {\n    extensions: ['.ts', '.tsx', '...'], // 파일 확장자. TS및 JSX확자자ㅡㄹ 설정했습니다.\n    alias: { // 절대경로 설정\n      types: resolve(__dirname, 'src', 'types'),\n      pages: resolve(__dirname, 'src', 'pages'),\n      components: resolve(__dirname, 'src', 'components'),\n      hooks: resolve(__dirname, 'src', 'hooks'),\n      apis: resolve(__dirname, 'src', 'apis'),\n      utils: resolve(__dirname, 'src', 'utils'),\n      assets: resolve(__dirname, 'src', 'assets'),\n      constants: resolve(__dirname, 'src', 'constants'),\n      contexts: resolve(__dirname, 'src', 'contexts'),\n    },\n  },\n  module: { // 로더 및 규칙 설정\n    rules: [\n      {\n        test: /\\.tsx?$/i, // ts-loader를 사용했습니다. babel-loader를 사용하지 않은 이유는 IE까지 폴리필 지원을 하지 않아도 되기 때문입니ㅏㄷ.\n        exclude: /node_modules/,\n        loader: 'ts-loader',\n        options: {\n          getCustomTransformers: () => ({\n            before: isDevelopment ? [ReactRefreshTypeScript()] : [],\n          }),\n          transpileOnly: isDevelopment,\n        },\n      },\n      {\n        test: /\\.(png|jpg|jpeg|svg|woff|woff2|eot|ttf|otf)$/i,\n        type: 'asset/resource',\n      },\n    ],\n  },\n  plugins: [\n    new HtmlWebpackPlugin({ //빌드된 다음에 템플릿을 지정해줍니다.\n      template: resolve(__dirname, 'public', 'index.html'),\n    }),\n    ...(isDevelopment ? [new ReactRefreshWebpackPlugin()] : []),\n  ],\n  devServer: {\n    open: true,\n    port: 8282, // 기본은 3000번이지만 커스텀 기념으로 바꿨씁니다.\n    static: {\n      directory: resolve(__dirname, 'public'),\n    },\n    historyApiFallback: true,\n  },\n};\n```\n\n`entry`: 웹팩의 진입점을 의미. react에서는 src의 index.js에서 모든게 시작됩니다.\n\n`output`: 번들된 파일의 출력 경로를 정의합니다.\n\n`resolve`: 모듈 해석 옵션을 설정합니다.\n\n`module`: 로더의 규칙을 설정합니다.\n\n- 보통은 .css,.scss파일 확장을 위해 `style-loader`를 사용하기도 하지만, 피움에서는 CSS-in-JS를 선택했기 때문에 해당 확장자들이 존재하지 않아서 따로 설정하지 않았습니다.\n\n`plugins`:  웹팩 플러그인을 설정합니다. 플러그인은 빌드 과정을 확장하거나 수정하는데 사용됩니다.\n\n`devServer`: 개발 서버 옵션(localhost)을 설정합니다. \n\n> `ReactRefreshWebpackPlugin`은 리액트에서 저장을 파일 저장을 할 때마다 상태 초기화를 막아주는 역할을 하는 플러그인 입니다. CRA에서는 기본적으로 제공되어 있는 기능이지만, custom기능에는 존재하지 않기에 추가해 줬습니다.\n\n### tsconfig파일 설정\n\ntsconfig파일은 typescript의 버전과 모듈 등 컴파일 과정에서 어떤 버전으로 실행할 것인지 등을 설정하는 파일입니다.\n\n```json\n{\n  \"compilerOptions\": { // 컴파일러 옵션 설정\n    \"target\": \"ES2016\", // 컴파일 하는 JS 버전을 ES2016으로 설정\n    \"module\": \"CommonJS\", // 컴파일된 모듈 시스템 설정\n    \"jsx\": \"react-jsx\", // JSX문법을 어떻게 컴파일 할지 설정\n\n    \"strict\": true, // 엄격한 타입 체크\n    \"exactOptionalPropertyTypes\": true, // 선택적 프로퍼티 타입을 체크함\n    \"skipLibCheck\": true, // 라이브러리 파일의 타입 체크를 건너뜀\n    \"esModuleInterop\": true, // CJS 및 ES 모듈을 함께 사용할 때 옵션을 설정 ES6 모듈 사양을 준수하여 CJS사용 가능하게 함. (즉 import 가능)\n\n    \"baseUrl\": \"src\", // 루트가 되는 url\n    \"paths\": { // 절대 경로\n      \"types/*\": [\"types/*\"],\n      \"pages/*\": [\"pages/*\"],\n      \"components/*\": [\"components/*\"],\n      \"contexts/*\": [\"contexts/*\"],\n      \"hooks/*\": [\"hooks/*\"],\n      \"utils/*\": [\"utils/*\"],\n      \"assets/*\": [\"assets/*\"],\n      \"constants/*\": [\"constants/*\"]\n    },\n\n    \"types\": [\"cypress\"] // 타입 정의 파일 지정\n  },\n  \"include\": [\"src/**/*\", \"cypress/**/*\"] // 컴파일할 소스 코드 파일 정의\n}\n```\n\n피움에서는 IE를 제외한 모든 브라우저를 타겟으로 설정하고 있기 때문에 최대한 낮은 버전의 `JavaScript`를 타겟으로 설정했습니다. ES2016을 설정하고 처음 코드를 작성하다가 `import`가 제대로 이루어지지 않는 것을 보고 문제를 찾다가 `esModuleInterop`옵션을 true로 설정해 줘야지 CJS에서도 import가 가능하다는 것을 알게 되었습니다. \n\n또한, 상대 경로가 아닌 절대경로 사용을 선택했는데, 이는 복잡한 파일 구조를 보기 쉽게 알아보기 위해 설정했습니다.\n\n> `esModuleInterop`설정은 target으로 하는 옵션이 node16이거나 nodenext인 경우에는 true로 되어있지만, 그게 아닌 경우에는 false이므로, import 구문을 사용하고 싶다면 옵션을 true로 하는것이 좋습니다.\n\n### package.json 설정\n\n이제 설정한 웹팩과 tsconfig를 확인해 보기 위해서는 실행 스크립트를 알아야 합니다. 보통 자주 사용하는 명령어로는 `start`와 `build`가 있습니다. 그리고 나머지 명령어는 스토리북이나 cypress에 대한 명령어들입니다.\n```json\n{ //package.json\n//...\n\t\"name\": \"pium-frontend\",\n  \"version\": \"1.0.0\",\n  \"description\": \"피움 프론트엔드\",\n  \"main\": \"src/index.tsx\",\n  \"scripts\": {\n    \"test\": \"echo test is not prepared\",\n    \"start\": \"webpack-dev-server --mode=development\",\n    \"build\": \"NODE_ENV=production webpack\",\n    \"storybook\": \"storybook dev -p 6006\",\n    \"build-storybook\": \"storybook build -o ./dist/storybook\",\n    \"cypress\": \"cypress open\"\n  },\n//...\n}\n```\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 인수테스트를 작성하면서 다음과 같은 문제가 발생했다. RestAssured를 사용하고 있다. 각 테스트별로 (DB)데이터가 격리된 테스트를 수행하고 싶다. 이에 다음과 같은 시행착오를 거쳤다. 최종적으로 작성된 코드를 보고싶다면 최종코드를 확인해주세요. 시행착오 JPA를 사용하고 있는 현 시점에서…","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"date":"August 03, 2023","title":"인수테스트 데이터 초기화하기","tags":["인수테스트","RestDocs","테스트"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)'가 작성했습니다.\n\n## 서론\n\n인수테스트를 작성하면서 다음과 같은 문제가 발생했다.\n\n- RestAssured를 사용하고 있다.\n- 각 테스트별로 (DB)데이터가 격리된 테스트를 수행하고 싶다.\n\n이에 다음과 같은 시행착오를 거쳤다.\n\n> 최종적으로 작성된 코드를 보고싶다면 최종코드를 확인해주세요.\n\n## 시행착오\n\n\n```java\n@Transactional\n@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)\nclass DictionaryPlantApiTest {\n  ...\n}\n```\n\nJPA를 사용하고 있는 현 시점에서`@Transactional`을 이용해서 하나의 테스트(트랜잭션)이 끝날 때 데이터가 롤백되는 현상을 기대했다.\n\n```java\n@Test\nvoid 사전_식물_상세정보_조회_시_사전_식물_정보_반환() {\n\n    // dictionaryPlantRepository.save() 에 대한 Fixture\n    DictionaryPlant REQUEST = dictionaryPlantSupport.builder().build();\n\n    DictionaryPlantResponse RESPONSE = RestAssured\n            .given().log().all()\n            .when()\n            .get(\"/dictionary-plants/{id}\", REQUEST.getId())\n            .then()\n            .log().all()\n            .statusCode(HttpStatus.OK.value())\n            .extract().as(DictionaryPlantResponse.class);\n    );\n    \n    ...\n}\n```\n\n![](.index_images/807f392f.png)\n\n하지만 테스트를 수행할 때 JPARepository로 save한 값을 RestAssured를 이용해 조회하면 데이터가 반영되지 않는 문제가 발생했다.\n\n### 문제 인식\n\n[Stack Overflow](https://stackoverflow.com/questions/41763417/api-test-transactional-rollback)의 다음 글을 읽어본 뒤 다음과 같은 지식을 얻었다.\n\n> @Transactional only works within the same thread, and as such the rollback provided by Spring will only work on the objects that were persisted on the thread where the transaction was started.\nYour rest-assured test will perform an integration test and will hit your Spring context on another thread. So although your rest-assured test would be able to see the objects persisted in your test setup, Spring will never be able to cleanup resources persisted in your rest-assured test automatically.\nThe only way to tackle this is to delete the entities yourself in your test (Using an Junit Rule, or cleaning up any state in your test setup).\n\n요약하면 다음과 같다.\n\n> 트랜잭션은 동일한 스레드 내에서 동작한다.\nSpring에서 제공하는 롤백은 트랜잭션이 시작된 스레드 내에서 생긴 객체에 대해서만 동작한다.\nRestAssured는 별도의 스레드를 통해 Spring 컨텍스트를 이용한다.\n이 때문에 RestAssured는 전역적으로 설정된 데이터 (Data.sql과 같은 설정으로 생긴 데이터)에는 접근할 수 있으나 Transaction과 같이 별도의 스레드에서만 제공되는 값에 대해서는 접근할 수 없다.\n... (해결방법 후략)\n\n위와 같이 별도의 RestAssured의 요청이 스레드로 동작하기 때문에 하나의 트랜잭션에서 별개로 저장한 값에 접근할 수 없다는 결론이 나왔다.\n\n> 자세한 내용은 [하마드의 트러블슈팅 글](https://pium-official.github.io/transactional-not-in-restassured/)을 참고해주세요~\n\n## 해결방법\n\n이 문제에 대해서 다양한 해결방법이 존재하고 각각의 장단점을 비교한 뒤 최종적으로 어떤 방식을 선택할지 고민해보자.\n\n### 1️⃣ DirtiesContext 사용하기\n\n매 테스트마다 Context를 새롭게 띄워서 데이터를 매번 초기화하는 방법을 생각해볼 수 있다.\n\n#### 장점\n\n컨텍스트를 다시 로드하면서 테스트간 격리 환경을 명확하게 구분할 수 있다.\n\n#### 단점\n\n- 매 테스트마다 컨텍스트를 다시 로드하기 때문에 속도가 상대적으로 느리다.\n- @Nested 내부에 정의되어있는 테스트에 대해 DirtiesContext가 적용되지 않는 문제가 있다.\n  [Spring @Nested 관련 공식 문서](https://docs.spring.io/spring-framework/reference/testing/testcontext-framework/support-classes.html#testcontext-junit-jupiter-nested-test-configuration)\n  @Nested 내부에 정의된 테스트에 DirtiesContext를 전파하기 위해 아래 설정을 추가해줘야한다.\n\n```java\n// 클래스레벨에 다음 어노테이션을 추가해주거나\n@NestedTestConfiguration(value = NestedTestConfiguration.EnclosingConfiguration.OVERRIDE)\n```\n\n혹은 properteis 설정을 변경해주는 방식도 존재한다.\n\n```properties\n# properties 파일에 다음 설정을 추가해주어 전역적으로 @Nested 기본 전략을 설정할 수 있다.\nspring.test.enclosing.configuration=OVERRIDE\n```\n> 참고 문서 : [Changing the default enclosing configuration inheritance mode](https://docs.spring.io/spring-framework/reference/testing/annotations/integration-junit-jupiter.html#integration-testing-annotations-nestedtestconfiguration)\n\n### 2️⃣ @SQL 사용하기\n\n@SQL 어노테이션을 사용하여 매 테스트 실행 전 SQL 스크립트를 실행하여 테이블을 다시 만들 수 있다.\n\n```java\n@Sql(\"classpath:init.sql\")\n@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)\nclass DictionaryPlantApiTest {\n  ...\n}\n```\n\n#### 장점\n\n- 여러 스크립트를 수행할 수 있다.\n- 스키마 초기화 후 테이터도 함께 넣을 수 있다.\n\n#### 단점\n\n- 테스트에 사용하는 DB가 변경되었을 때 해당 벤더사의 Dialect에 맞게 SQL문을 고쳐줘야한다.\n- 쿼리를 텍스트로 관리하다보니 컴파일타임에 오류를 잡기 어렵다.\n- 테이블 연관관계가 존재하는 경우 쿼리문 작성 순서에 신경을 많이 써야한다.\n\n### 3️⃣ InitializingBean 사용하기\n\n`InitializingBean`을 이용하여 스프링 Bean이 초기화, 소멸 될 때 행위를 추가할 수 있다.\n\n```java\n// InitializingBean의 생김새\npublic interface InitializingBean {\n\tvoid afterPropertiesSet() throws Exception;\n}\n```\n\n이를 이용해 @Test 어노테이션으로 Bean이 등록될 때 마다 DB을 초기화하는 상황을 기대할 수 있다.\n\n**Entity Manager를 이용해 DB 초기화하기**\n\nJPA를 사용하는 입장으로 SQL문을 작성하기 보다는 EntityManager를 이용해보는것이 정적인 쿼리 관리에 들이는 소요가 적을 것이라고 생각된다.\n\n이에 EntityManager를 이용하여 DB를 초기화하는 방법을 알아보자.\n\n> 아래부터는 https://ttl-blog.tistory.com/1407 를 참고하여 진행된 글입니다.\n\n#### table 이름 조회하기\n\n```java\n@Component\n@Profile(\"test\")\npublic class DatabaseCleaner implements InitializingBean {\n\n\t// 테이블 이름들을 저장할 List\n    private final List<String> tables = new ArrayList<>();\n\n\t// 엔티티 매니저를 선언한다\n    @PersistenceContext\n    private EntityManager entityManager;\n\n    @SuppressWarnings(\"unchecked\")\n    @PostConstruct\n    public void findDatabaseTableNames() {\n        List<Object[]> tableInfos = entityManager.createNativeQuery(\"SHOW TABLES\").getResultList();\n        for (Object[] tableInfo : tableInfos) {\n            String tableName = (String) tableInfo[0];\n            tableNames.add(tableName);\n        }\n    }\n}\n```\n\nEntityManager를 이용하여 모든 테이블의 이름을 가져온다.\n\n#### 테이블 초기화하기 & 실행하기\n\n```java\n@Component\n@Profile(\"test\")\npublic class DatabaseCleaner implements InitializingBean {\n\n\t// 테이블 이름들을 저장할 List\n    private final List<String> tables = new ArrayList<>();\n\n\t// 엔티티 매니저를 선언한다\n    @PersistenceContext\n    private EntityManager entityManager;\n\n\t// 테이블 이름을 조회한다\n    @SuppressWarnings(\"unchecked\")\n    @PostConstruct\n    public void findDatabaseTableNames() {\n        ...\n    }\n    \n    // 테이블을 초기화한다\n    private void truncate() {\n        entityManager.createNativeQuery(String.format(\"SET FOREIGN_KEY_CHECKS %d\", 0)).executeUpdate();\n        for (String tableName : tableNames) {\n            entityManager.createNativeQuery(String.format(\"TRUNCATE TABLE %s\", tableName)).executeUpdate();\n        }\n        entityManager.createNativeQuery(String.format(\"SET FOREIGN_KEY_CHECKS %d\", 1)).executeUpdate();\n    }\n\n    @Override\n    public void afterPropertiesSet() throws Exception {\n        findDatabaseTableNames();\n    }\n\n    @Transactional\n    public void clear() {\n        entityManager.clear();\n        truncate();\n    }\n}\n```\ntruncate를 수행하여 모든 테이블의 데이터를 초기화하고 실행한다.\n\n결과적으로 봤을 때 다음과 같은 흐름으로 데이터베이스 초기화가 수행된다.\n\n- Bean이 생성된 이후 Table 이름을 찾는다.\n- 영속성 컨텍스트의 1차 캐시를 비우고 테이블을 초기화한다.\n\n#### 테스트코드에 적용하기\n\n인수테스트를 `AcceptanceTest`로 분리하고 상속받는 구조로 변경했다.\n\n```java\n@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)\npublic class AcceptanceTest {\n\n    @LocalServerPort\n    int port;\n\n    @Autowired\n    private DatabaseCleaner databaseCleaner;\n\n    @BeforeEach\n    void setUp() {\n        RestAssured.port = port;\n        databaseCleaner.clear();\n    }\n}\n```\n\n작업한 내용을 적용하면 위와 같이 코드를 작성할 수 있다.\n\n#### 장점\n\n- 테스트 코드가 쿼리에 의존적이지 않다.\n- 설정을 분리하여 관리할 수 있다.\n\n#### 단점\n\n- JPA에 종속적인 설정이기 때문에 JPA를 사용하지 않거나 ORM을 제외하는 상황을 고려한다면 해당 방식의 도입을 생각해볼 필요가 있다.\n- AcceptenceTest 이외에 다른 통합테스트에서 사용하려면 중복된 코드를 작성해야한다.\n- Bean 생성 주기에 대한 설정이기 때문에 해당 클래스를 프로덕션에 남용할 수 있는 가능성이 존재한다.\n    - 테스트 코드지만 프로덕션에도 적용될 수 있는 설정이 그닥 마음에 들진 않는다.\n\n### 4️⃣ JUnit5 Extension 사용하기\n\n현재 코드는 AcceptenceTest를 사용하는 코드에 대해서만 DB 초기화를 진행하고있다.\n\nRestAssured가 별도의 스레드에서 동작하기 때문에 위와같이 구성했지만 별도의 통합 테스트에서도 DB 초기화 설정이 필요할 수 있다.\n\n@BeforeEach 내부에 clear를 선언하지 않고도 간단한 설정만으로 DB 초기화 로직을 적용하도록 개선해보자.\n\n이를 위해 JUnit5의 Extension을 사용하여 해당 설정을 리팩터링해볼 것이다.\n\n#### JUnit5 Extension이란?\n\nJunit5에서 제공하는 테스트의 생명주기에 대해 각각의 환경에 대해 확장할 수 있도록 제공하는 인터페이스다.\n\n다음과 같은 생성주기에 대한 확장을 제공한다.\n\n\n- BeforeAllCallback - @BeforeAll 실행 전에 실행된다.\n- BeforeEachCallback - @BeforeEach 실행 전에 실행된다.\n- BeforeTestExecutionCallback - 각 테스트가 실행되기 직전에 실행된다.\n- AfterTestExecutionCallback : 각 테스트가 종료된 후 실행된다.\n- AfterEachCallback : @AfterEach 실행 이후에 실행된다.\n- AfterAllCallback : @AfterAll 실행 이후에 실행된다.\n\n\n> Referenced By https://ttl-blog.tistory.com/1407\n\n#### BeforeEachCallback 이용하기\n\n현재 `@BeforeEach`에서 DatabaseCleaner가 수행되고 있으므로 `@BeforeEach` 이전에 실행될 수 있도록 `BeforeEachCallback`을 이용해보자.\n\nExtension을 이용하기 위해 기존에 DatabaseCleaner에 붙어있던 `implements InitializingBean`은 제거해줬다.\n\n```java\n@Component\npublic class DatabaseCleaner {\n\n    private final List<String> tableNames = new ArrayList<>();\n\n    @PersistenceContext\n    private EntityManager entityManager;\n\n\t// 바뀐부분 : 의존성 주입이후 초기화 수행 시 Table을 조회한다.\n    @PostConstruct\n    @SuppressWarnings(\"unchecked\")\n    private void findDatabaseTableNames() {\n        List<Object[]> tableInfos = entityManager.createNativeQuery(\"SHOW TABLES\").getResultList();\n        for (Object[] tableInfo : tableInfos) {\n            String tableName = (String) tableInfo[0];\n            tableNames.add(tableName);\n        }\n    }\n\n    private void truncate() {\n        entityManager.createNativeQuery(String.format(\"SET FOREIGN_KEY_CHECKS %d\", 0)).executeUpdate();\n        for (String tableName : tableNames) {\n            entityManager.createNativeQuery(String.format(\"TRUNCATE TABLE %s\", tableName)).executeUpdate();\n        }\n        entityManager.createNativeQuery(String.format(\"SET FOREIGN_KEY_CHECKS %d\", 1)).executeUpdate();\n    }\n\n    @Transactional\n    public void clear() {\n        entityManager.clear();\n        truncate();\n    }\n}\n```\n\n이후 `DatabaseClearExtension` 클래스를 다음과 같이 생성해준다.\n\n```java\npublic class DatabaseClearExtension implements BeforeEachCallback {\n\n    @Override\n    public void beforeEach(ExtensionContext context) throws Exception {\n        DatabaseCleaner databaseCleaner = getDataCleaner(context);\n        databaseCleaner.clear();\n    }\n\n    private DatabaseCleaner getDataCleaner(ExtensionContext extensionContext) {\n        return SpringExtension.getApplicationContext(extensionContext)\n                .getBean(DatabaseCleaner.class);\n    }\n}\n```\n\n#### 간결해진 테스트코드\n\n```java\n@ExtendWith(DatabaseClearExtension.class)\n@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)\npublic class AcceptanceTest {\n\n    @LocalServerPort\n    int port;\n\n    @BeforeEach\n    void setUp() {\n        RestAssured.port = port;\n    }\n}\n```\n\n이제 `@ExtendWith(DatabaseClearExtension.class)` 어노테이션만 붙여주면 테스트별로 DB를 초기화할 수 있다.\n\n각 테스트별로 truncate 문도 잘 수행되는 것을 확인할 수 있다.\n![](.index_images/086045e1.png)\n\n## 🚀 정리\n\n다양한 방법을 시도해보면서 결론적으로 BeforeEachCallback을 사용하는 방식까지 적용해봤다.\n깔끔하게 정리된 테스트를 보니 기분이 좋다. 👍\n\n### 최종 코드\n\n![](.index_images/21f5d279.png)\n\n패키지 구조는 위와 같이 구성되었고 각각의 코드는 다음과 같다.\n\n```java\n// DatabaseCleaner.java\n@Component\npublic class DatabaseCleaner {\n\n    private final List<String> tableNames = new ArrayList<>();\n\n    @PersistenceContext\n    private EntityManager entityManager;\n\n    @SuppressWarnings(\"unchecked\")\n    @PostConstruct\n    private void findDatabaseTableNames() {\n        List<Object[]> tableInfos = entityManager.createNativeQuery(\"SHOW TABLES\").getResultList();\n        for (Object[] tableInfo : tableInfos) {\n            String tableName = (String) tableInfo[0];\n            tableNames.add(tableName);\n        }\n    }\n\n    private void truncate() {\n        entityManager.createNativeQuery(String.format(\"SET FOREIGN_KEY_CHECKS %d\", 0)).executeUpdate();\n        for (String tableName : tableNames) {\n            entityManager.createNativeQuery(String.format(\"TRUNCATE TABLE %s\", tableName)).executeUpdate();\n        }\n        entityManager.createNativeQuery(String.format(\"SET FOREIGN_KEY_CHECKS %d\", 1)).executeUpdate();\n    }\n\n    @Transactional\n    public void clear() {\n        entityManager.clear();\n        truncate();\n    }\n}\n\n// DatabaseClearExtension.java\npublic class DatabaseClearExtension implements BeforeEachCallback {\n\n    @Override\n    public void beforeEach(ExtensionContext context) throws Exception {\n        DatabaseCleaner databaseCleaner = getDataCleaner(context);\n        databaseCleaner.clear();\n    }\n\n    private DatabaseCleaner getDataCleaner(ExtensionContext extensionContext) {\n        return SpringExtension.getApplicationContext(extensionContext)\n                .getBean(DatabaseCleaner.class);\n    }\n}\n\n// AcceptanceTest.java\n@ExtendWith(DatabaseClearExtension.class)\n@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)\npublic class AcceptanceTest {\n\n    @LocalServerPort\n    int port;\n\n    @BeforeEach\n    void setUp() {\n        RestAssured.port = port;\n    }\n}\n\n\n// DictionaryPlantApiTest.java\n\nclass DictionaryPlantApiTest extends AcceptanceTest {\n\t...\n}\n```\n\n## Reference\n\nhttps://ttl-blog.tistory.com/1407\nhttps://mangkyu.tistory.com/264\nhttps://stackoverflow.com/questions/41763417/api-test-transactional-rollback\nhttps://stackoverflow.com/questions/62142428/dirtiescontext-does-not-work-with-nested-tests\nhttps://unluckyjung.github.io/testcode/2021/05/08/Independent-Test-Mehod/\nhttps://www.baeldung.com/junit-5-extensions"},{"excerpt":"이 글은 우테코 피움팀 크루 '하마드'가 작성했습니다. 개요 우아한테크코스 5기 피움 서비스의 인수 테스트를 작성하던 도중, 실제 포트에 애플리케이션을 구동시켜 테스트를 하는 \n환경에서 테스트를 할 때, 테스트 메소드에서 분명히 해당 리소스를 저장했는데도 RestAssured의 GET 요청이 수행되지 않는 경우가 있었다. 이 이유를 파악하고 해결 과정을 …","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"date":"July 31, 2023","title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)","tags":["Transaction","SpringbootTest"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[하마드](https://github.com/rawfishthelgh)'가 작성했습니다.\n\n## 개요\n우아한테크코스 5기 피움 서비스의 인수 테스트를 작성하던 도중, 실제 포트에 애플리케이션을 구동시켜 테스트를 하는 `@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)`\n환경에서 테스트를 할 때, 테스트 메소드에서 분명히 해당 리소스를 저장했는데도 RestAssured의 GET 요청이 수행되지 않는 경우가 있었다. 이 이유를 파악하고 해결 과정을 정리한다\n## 상황\n\n![img.png](.index_images/img.png)\n\n당시 다음과 같은 인수 테스트 환경에서 테스트를 수행하고 있었다. 각 테스트 메소드가 끝난 후 트랜잭션을 롤백시켜 격리를 보장하기 위해 클래스 레벨에 `@Transactional` 어노테이션을 선언했었다.\n\n![img_1.png](.index_images/img_1.png)\n\nAcceptanceTest 클래스를 상속받아 사전 식물의 조회를 테스트하는 인수 테스트를 작성했다.\n37번째 줄의 `DictionaryPlant REQUEST = dictionaryPlantSupport.builder().build();` 는\n![img_2.png](.index_images/img_2.png)\n다음과 같은 형태로 repository에 테스트용 엔티티 객체를 save하는 과정을 간편하게 하기 위해 작성된 DictionarySupport 클래스와 코드이다. 즉 37번 라인을 사용하면 임의의 객체 정보를 dB에 저장하는 insert 작업이 일어난다.\n\n즉, 현재 테스트 메소드는 repository에 사전 식물 객체를 저장하고, 이를 RestAssured를 활용하여 실제 서버에서 요청을 보내 저장된 사전 식물이 조회되는지를 확인하는 과정이다.\n\n![img_3.png](.index_images/img_3.png)\n\n그런데, 200 OK를 기대했던 테스트의 결과가 404 not found가 응답되고 사전 식물이 존재하지 않는다는 예외 메세지가 뜨는 것을 확인하게 되었다.\n\n뭘까? insert 쿼리가 날아가지 않은 걸까? 로그를 확인해 보았다.\n![img_4.png](.index_images/img_4.png)\n그러나, 로그에는 정확히 우리가 DictionarySupport에서 지정한 저장 메소드의 Insert 쿼리가 날아가는 것을 보고 있었다. 심지어 value 값도 모두 정확히 들어갔다.\n![img_5.png](.index_images/img_5.png)\nselect 쿼리가 잘못된게 아닌가? 확인해봤지만 예상한대로 나갔다.\n여기까지 봐서는 이해가 안 간다. insert를 하고 select를 했는데 조회가 안 되니 말이다.\n## RandomPort 환경에서의 스레드와 트랜잭션\n이를 이해하기 위해서는 RandomPort 환경에서의 요청이 어떤 스레드를 갖는지를 알아야 한다. 이 내용은 스프링 공식 문서를 들여다볼 필요가 있다.\n> If your test is @Transactional, it rolls back the transaction at the end of each test method by default. However, as using this arrangement with either RANDOM_PORT or DEFINED_PORT implicitly provides a real servlet environment, the HTTP client and server run in separate threads and, thus, in separate transactions. Any transaction initiated on the server does not roll back in this case.\n\n> 테스트에 @Transactional이 붙어 있으면 롤백을 보장할 수 있다. 단, RANDOM_PORT 나 DEFINED_PORT 환경에서 테스트를 수행하면, 실제 서블릿 환경에서 테스트를 진행한다. 이 때 http 클라이언트(테스트)와 서버는 서로 다른 스레드를 갖는다. 즉 별개의 트랜잭션이 수행되는 것이다. 따라서 서버 쪽에서의 트랜잭션은 롤백되지 않는다.\n\n쉽게 설명하자면, 랜덤 포트 환경에서 테스트를 수행하는 순간, localhost 포트 어딘가에 내장 서버를 띄운다. 그리고 그 서버에서 요청을 보내도록 하는 것이 RestAssured 이다. 따라서 RestAssured에서 보내는 요청은, 내가 해당 테스트 메소드에서 실행하는 스레드와 별개의 스레드를 갖는다. 따라서 트랜잭션도 각자 별개로 갖는다.\n\n자, 아까 우리가 AcceptanceTest의 클래스 레벨에서 `@Transactional`을 선언했음을 기억할 것이다. 클래스 레벨에 이 어노테이션을 선언하면, 자동적으로 해당 클래스와 그를 상속한 메소드 레벨에 모두 트랜잭션이 걸린다.\n![img_6.png](.index_images/img_6.png)\n따라서, 현재 테스트 메소드의 트랜잭션 범위는 다음 화살표와 같이 테스트가 끝날 때 까지 유지된다.\n\n우리는 여기서 트랜잭션의 개념에 대해 다시 짚을 필요가 있다.\n\"트랜잭션이 끝나지 않았다\"는 의미는 무엇인가?\n내가 수행한 insert, update, delete 문이 커밋, 혹은 롤백되지 않았다는 뜻이다.\n\n커밋되지 않았다는 뜻은 무엇인가?\n데이터베이스의 갱신이 이뤄졌어도, 다른 스레드에서 확인할 수 없다는 뜻이다.\n왜? 트랜잭션은 각자 격리되어 서로의 트랜잭션이 끝나기 전 까지는 연산 과정을 볼 수 없기 때문이다.(트랜잭션의 Isolation(격리성) 특징을 기억하자)\n\n따라서, 현재 트랜잭션이 끝나기도 전에, 즉 반영되기도 전에 RestAssured를 통해 띄운 별개의 서버 스레드에서 GET 요청이 들어가니 해당 데이터를 확인할 수 없는 것이다.\n정확히 말하면 트랜잭션이 커밋되지 않았을 때 까지의 데이터는, 다른 스레드 입장에서 그냥 없는 데이터다. 없는걸 조회하니 당연히 값이 안 나온다.\n\n![img_7.png](.index_images/img_7.png)\n그래서 `@Transactional` 어노테이션을 제거하고 테스트를 수행했더니, 다음과 같이 통과하는 것을 볼 수 있다.\n![img_8.png](.index_images/img_8.png)\n이해를 쉽게 하기 위해 바뀐 트랜잭션의 범위를 화살표로 표현하면, DictionaryPlant를 저장하는 과정에서 트랜잭션이 끝나고 커밋이 되어 db에 영속화가 완료된다.\n따라서 이후 랜덤 포트의 스레드에서도 해당 데이터를 조회할 수 있다.\n\n\n## 트랜잭션의 격리 이해하기\n\n![img_9.png](.index_images/img_9.png)\n![img_10.png](.index_images/img_10.png)\n해당 동작에 대해 조금 더 설명하기 위해 별개의 스레드에 h2 database 콘솔을 띄워 확인해 보겠다. 위의 두 콘솔 화면은 세션 id가 다른 별개의 스레드를 갖는다. 편의상 위를 스레드A, 아래를 B라 하겠다\n\n![img_11.png](.index_images/img_11.png)\n스레드 A에서 트랜잭션을 시작하기위해 Autocommit을 False로 변경한 후, 두 명의 member 데이터를 insert 했다.\n![img_12.png](.index_images/img_12.png)\n이 때 A에서 select 문을 실행하면 데이터가 들어가 있는 것을 확인할 수 있다.\n![img_13.png](.index_images/img_13.png)\n그러나, B에서 동일한 select문을 실행하면 데이터를 확인할 수 없다.\n왜냐? 스레드 A의 트랜잭션은 끝나지 않았기 때문에 A에서 보이는 데이터는 \"임시 반영\"된 데이터일 뿐, \"영속화\"되지 않았기 때문이다.\n![img_14.png](.index_images/img_14.png)\n만약 위와 같이 스레드 A에서 커밋을 하고 나면\n![img_15.png](.index_images/img_15.png)\n이제는 스레드 B에서도 동일한 데이터를 확인할 수 있다.\n## 결론\n결국 메소드 레벨에 `@Transactional` 어노테이션이 붙은 탓에 save 메소드를 성공적으로 수행해도, 트랜잭션이 끝나지 않아(정확히 말하면 커밋되지 않아) 랜덤 포트 서버의 스레드에서 확인할 수 없는 것이다.\n따라서 랜덤 포트 환경의 격리성을 보장하고자 할 때는 `@Transactional` 어노테이션을 사용하기 보다는, truncate를 하는 sql 스크립트를 사용하는 방법을 고려하는게 더 적절하다고 생각한다.\n\n\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 현재 피움팀 서버는  요청으로 이뤄져있다.\n는 WWW 상에서 정보를 주고 받는 프로토콜인데, 누군가 네트워크에서 신호를 가로채면 내용이 노출되는 문제가 발생할 수 있다.\n이를 해결해주는 프로토콜이 바로 이다. 는 정보를 암호화하는 SSL을 이용한 프로토콜이다. …","fields":{"slug":"/apply-https/"},"frontmatter":{"date":"July 28, 2023","title":"내 서버에 HTTPS 설정하기","tags":["HTTPS"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)', '[그레이](https://github.com/kim0914)', '[조이](https://github.com/yeonkkk)', '[하마드](https://github.com/rawfishthelgh)'가 작성했습니다.\n\n\n## 서론\n\n현재 피움팀 서버는 `HTTP` 요청으로 이뤄져있다.\n`HTTP`는 WWW 상에서 정보를 주고 받는 프로토콜인데, 누군가 네트워크에서 신호를 가로채면 내용이 노출되는 문제가 발생할 수 있다.\n이를 해결해주는 프로토콜이 바로 `HTTPS`이다.\n\n`HTTPS`는 정보를 암호화하는 SSL을 이용한 프로토콜이다. \n현재는 TLS 방식도 사용되는데 여기에서 **핵심은 보안 문제를 해결하기 위해 암호화**를 한다는 것이다.\n\n대칭키와 공개키, 인증서와 같은 방식을 사용해 HTTPS를 적용할 수 있다.\n이번 글에서는 `Certbots`을 이용해 `HTTPS`를 nginx에 쉽게 설치하고 적용하는 방법을 다뤄본다.\n\nHTTP, HTTPS에 대한 자세한 내용은 별도의 글에서 다룰 예정이다.\n\n`Let's Encrypt`에서는 인증서를 무료로 발급해주고 있고 `Certbots`과 함께 사용하기를 권장하기 때문에 `Certbots`을 사용하기로 결정했다.  \n\n이 내용은 아래 이미지에서 확인할 수 있다.  \n![img.png](img.png)\n\n\n\n## Certbot 설치\n\n서버에 HTTPS 설정을 해보자\n[Certbot 공식문서](https://certbot.eff.org/)\n\n> 공식문서의 가이드를 따라 작성된 문서입니다.\n> https://certbot.eff.org/instructions\n\n![](.index_images/a8ec6c59.png)\n\n```shell\n# certbot을 설치하기 위한 snap을 설치한다.\nsudo apt update\nsudo apt install snapd\n\n# 이미 설치되어있는 certbot을 제거한다.\nsudo apt-get remove certbot\n\n# certbot을 설치한다.\nsudo snap install --classic certbot\n\n# certbot이 잘 설치되어있는지 확인한다.\nsudo ln -s /snap/bin/certbot /usr/bin/certbot\n\n# certbot을 nginx에 연결하기\nsudo certbot --nginx\n```\n## HTTPS 설정\n\n![](.index_images/5498d43a.png)\n\n```shell\n# certbot이 SSL 인증서를 자동 갱신하는 cron을 등록한다\nsudo certbot renew --dry-run\n```\n\n## NGINX 설정 확인\n\nNGINX 설정에 다음과 같이 certbot이 HTTPS 설정을 추가한 것을 확인할 수 있다.\n\n![](.index_images/3d08df23.png)\n\n## Reference\n\nhttps://certbot.eff.org/instructions\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. 사건의 발단 이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국  파일의 크기를 보니 무려 16m…","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"date":"July 28, 2023","title":"bundle-analyze를 통한 bundle 크기 분석","tags":["bundle","최적화"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[클린](https://github.com/hozzijeong)'가 작성했습니다.\n\n## 사건의 발단\n\n이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국 `bundle.js` 파일의 크기를 보니 무려 16m나 되었던 것입니다.\n\n![image](https://github.com/pium-official/pium-official.github.io/assets/50974359/72ec258f-77e0-41aa-8bcd-c4c3d3b0410e)\n\n왜 이렇게 크기가 크지? 라는 생각을 하며 크게 2가지의 경우를 생찾아봤습니다. 하지만 다음과 같은 이유로 원인이 아님을 알았습니다.\n\n1. minify가 되지 않았다 → webpack 4 이상을 사용하면서 자동으로 `production` 일때는 자동으로 설정\n2. css 파일 크기가 너무 큼 → `styled-component`를 사용하기 때문에 .css 가 없음.\n\n따라서 `bundle.js`의 성능을 확인해 볼 필요가 있었고 검색하던 도중 [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)라는 라이브러리를 알게되었습니다.\n\n## Webpack Bundle Analyzer\n\nwebpack을 통해 build한 bundle의 성능을 측정하는 라이브러리로 모든 번들에 대한 트리를 시각화 해서 보여주는 이점을 갖고 있습니다. 사용법은 매우 간단합니다. 우선 설치를 해줍니다.\n\n```jsx\n# NPM\nnpm install --save-dev webpack-bundle-analyzer\n# Yarn\nyarn add -D webpack-bundle-analyzer\n```\n\n설치를 한 뒤 `webpack.config.js` 파일 내부에서 플러그인을 사용해 줍니다.\n\n```jsx\nconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\n\nmodule.exports = {\n  plugins: [\n    new BundleAnalyzerPlugin()\n  ]\n}\n```\n\n플러그인 안에 옵션을 설정할 수 있는데, [여기](https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin)에서 옵션에 대한 정보를 확인할 수 있습니다.\n\n위에 플러그인 옵션에서 `generateStatsFile` 을 `true` 로 설정한 다음에 `package.json`에 `scripts` 에다음 명령어를 통해 실행할 수 있습니다.\n\n```jsx\nanalyze: webpack-bundle-analyzer bundle/output/path/stats.json\n```\n\n![image](https://github.com/pium-official/pium-official.github.io/assets/50974359/6bc524c4-4866-4ebe-9daa-95035e0c0dd5)\n\n실행한 뒤에 bundle을 분석해 봤더니 react-icons에서 15.3m나 차지하고 있었습니다. 드디어 문제의 원흉을 찾아냈습니다. 그렇다면 react-icons를 대체할 수 있는 방법이 있을까요?\n\n### Icons\n\n[여기](https://icones.js.org/collection/all?s=material-symbols:cancel)에 가시면 다양한 아이콘들을 찾아볼 수 있습니다. 원하는 아이콘을 선택한 다음에 SVG, Component 등으로 코드를 반환해 줍니다. 이를 통해서 react-icons를 제거하고 icons를 사용해서 아이콘을 대체할 수 있었습니다.\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 본 설명 글은 다음과 같은 환경에서 진행됩니다. 배포서버 : Ubuntu 22.04.2 LTS DB서버 : Ubuntu 22.04.2 LTS 배포서버와 DB서버는 동일한 VPC를 사용하고 있습니다. DB : MySQL 8.0.33 Application : Spr…","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"date":"July 28, 2023","title":"Table Drop 못하게 막아버리기","tags":["DB","MySQL"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)', '[그레이](https://github.com/kim0914)', '[조이](https://github.com/yeonkkk)', '[하마드](https://github.com/rawfishthelgh)'가 작성했습니다.\n\n\n## 서론\n\n본 설명 글은 다음과 같은 환경에서 진행됩니다.\n> - 배포서버 : Ubuntu 22.04.2 LTS\n> - DB서버 : Ubuntu 22.04.2 LTS\n> - 배포서버와 DB서버는 동일한 VPC를 사용하고 있습니다.\n> - DB : MySQL 8.0.33\n> - Application : SpringBoot 3.1.1\n\n개발 과정에서 실수로 Application 단에서 DB 혹은 테이블을 Drop 해버리는 상황이 있을 수 있다.\n\n테이블의 수정이 제한된 유저를 생성하여 해당 유저를 Application에서 사용하도록 구성해보자. \n\n> 도움을 주신 G선생님께 감사의 인사 올리며 시작하겠습니다.\n> \n> ![](.index_images/c34a6c3a.png)\n\n## 유저 생성하기\n\n> 이후 진행할 작업에서 권한 부여를 위해 root 권한이 필요합니다.\n\n우선 root 권한을 가진 계정으로 MySQL에 로그인 한다.\n\n```shell\n# MySQL에 로그인\nsudo mysql -u root -p\n```\n\nApplication에서 사용할 유저를 생성한다.\n\n```sql\nCREATE USER 'pium'@'localhost' IDENTIFIED BY 'password';\n```\n\n> 만약 외부에서 접근해야하는 유저의 경우 다음 명령어를 참고하세요\n> \n> ```sql\n> # 외부 모든 IP에 대한 pium 이라는 유저 생성 \n> CREATE USER 'pium'@'%' IDENTIFIED BY 'password';\n> \n> # 특정 인스턴스에서만 접속가능한 pium 이라는 유저 생성 \n> CREATE USER 'pium'@'접속할 인스턴스의 private ip' IDENTIFIED BY 'password';\n> ```\n\n## 권한 부여하기\n\nMySQL에서 설정할 수 있는 권한은 아래와 같다.\n\n| 권한                | 내용                     |\n|-------------------|------------------------|\n| CREATE, ALTER, DROP | 테이블 생성, 변경, 삭제  |\n| SELECT, INSERT, UPDATE, DELETE | 테이블의 레코드 조회, 입력, 수정, 삭제 |\n| RELOAD| 권한 부여된 내용을 리로드 |\n| SHUTDOWN| 서버 종료 작업 실행 |\n| ALL| 모든 권한 허용 |\n| USAGE| 권한 없이 계정만 생성 |\n\n우리는 `INSERT`, `UPDATE`, `SELECT`, `DELETE`만 사용하면 되기 떄문에, 새로 생성한 유저에게 해당 권한만 부여한다.\n\n```sql\nGRANT SELECT, INSERT, UPDATE, DELETE ON pium_db.* TO 'pium'@'localhost';\n```\n\n설정한 권한을 `flush` 명령어를 이용해 적용한다.\n\n```sql\nFLUSH PRIVILEGES;\n```\n\n## 확인하기\n\n![](.index_images/bd8e631c.png)\n\n실제로 생성된 유저로 접속하여 Drop Table 명령어를 수행했을 때 권한 부족으로 수행되지 않음을 확인할 수 있다.\n\n## Application properties 적용\n\nApplication의 설정파일에 생성한 유저의 정보를 작성한다.\n\n![](.index_images/54161808.png)\n\n이를 통해 Applicaiton에서는 Table의 생성, 수정, 삭제에 대한 조작을 할 수 없게 되었다.\n\n만약 테이블의 생성, 수정, 삭제에 대한 작업이 필요할 경우 DBA 혹은 DB 담당자에게 요청하는 프로세스를 거쳐야만 한다.\n\n## Reference\n\n- Chat GTP 4\n- 피움 백엔드 팀의 집단지성\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 현재 피움팀의 젠킨스에서 빌드 트리거로 을 사용하고있다.  해당 설정은 Github에서 유발되는 모든 WebHook에 대해 빌드 트리거가 동작하는 설정이다.  빌드 스크립트에서 위처럼 triggers 설정을 별도로 지정할 수 있지만 현재 프로젝트 구조상 더 세분화된 설정이 필요한 상태다.  현재 …","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"date":"July 25, 2023","title":"PR 라벨로 젠킨스 빌드유발을 구분하기","tags":["젠킨스","CI"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)'가 작성했습니다.\n\n## 서론\n\n현재 피움팀의 젠킨스에서 빌드 트리거로 `GitHub hook trigger for GITScm polling`을 사용하고있다.\n\n![](.index_images/bc288fb6.png)\n\n해당 설정은 Github에서 유발되는 모든 WebHook에 대해 빌드 트리거가 동작하는 설정이다.\n\n![](.index_images/c0a90061.png)\n\n빌드 스크립트에서 위처럼 triggers 설정을 별도로 지정할 수 있지만 현재 프로젝트 구조상 더 세분화된 설정이 필요한 상태다.\n\n![](.index_images/b47bf110.png)\n\n현재 레포지토리 하나에 프론트, 백엔드 코드가 같이 관리되고있다.\nPR이 Merge 되었을 때 각 트랙별로 코드가 빌드 및 배포될 수 있도록 구성해야한다.\n\n## 어떻게 할까?\n\n현재 하나의 레포지토리에서 두개의 코드가 관리되고 있기 떄문에 단순히 develop 브랜치의 변경감지로는 어느 트랙의 작업내용인지 구분하기가 어렵다.\n\n![](.index_images/88fd7187.png)\n\n현재 피움은 라벨을 이용하여 트랙별 작업구분을 하고 있다.\n\n이를 이용하여 라벨별로 빌드, 배포를 진행할 수 있도록 구성해보자.\n\n## Generic Webhook Trigger 설치\n\n![](.index_images/82e40c68.png)\n\nGeneric Webhook Trigger는 젠킨스에서 제공하는 플러그인으로 HTTP 요청을 수신하여 JSON, XML 형태의 데이터를 추출하여 트리거를 지정할 수 있는 플러그인이다.\n\nGeneric Webhook Trigger를 사용하여 빌드 유발 상황을 구분해보자.\n\n![](.index_images/4ff8e063.png)\n\n플러그인을 설치했다면 파이프라인의 Build Triggers 설정에서 다음과 같은 탭을 확인 할 수 있다.\n\n![](.index_images/7b51b24a.png)\n\n해당 설정을 클릭해보면 다음과 같은 설명을 확인할 수 있다.\n\n`http://JENKINS_URL/generic-webhook-trigger/invoke` 로 오는 요청에 대해 트리거가 수행된다는 말이 적혀져있다.\n\n위 설명에 맞춰 GitHub에서 WebHook 설정을 변경해주자.\n\n> 위에서 설명한 탭에 대해서는 아직 저장하지않고 깃허브로 넘어와서 진행합니다.\n>\n> 젠킨스 설정은 아래에서 설명하는 `Github WebHook 설정`이후 이어서 진행합니다.\n\n## Github WebHook 설정\n\n![](.index_images/eebe67d7.png)\n\n`프로젝트 레포지토리` -> `Settings` -> `Webhooks 탭`에 들어와서 웹훅을 새로 만들어보자.\n\n![](.index_images/19691acb.png)\n\nPayload URL을 위에서 확인한 `Generic Webhook Trigger`의 설정에 맞게 작성한다.\n\n그리고 트리거가 동작하는 이벤트에 대해서 `Send me everything` 옵션을 체크한다.\n\n![](.index_images/5e2c402b.png)\n\nAdd webhook을 한 뒤 다시 등록한 웹 훅을 클릭하여 `Recent Deliveries` 탭을 확인해본다.\n\n![](.index_images/bb813e21.png)\n\n내용을 보면 요청을 보낼 때 Payload에 다양한 정보들이 담겨있는 것을 확인할 수 있다.\n\n### (이해하기) JSONPath 살펴보기\n\n> 해당 과정은 원리를 이해하기 위한 과정으로 수행하지 않아도 무관합니다.\n\n![](.index_images/4ff6a8c1.png)\n![](.index_images/f6916224.png)\n\nPR과 연관된 요청이 발생했을 때는 Payload에 pull_request에 대한 정보가 추가된다.\n\n![](.index_images/c301431e.png)\n\nhttps://jsonpath.com 에 접속하여 해당 Payload를 붙여넣어 확인해본다.\n\nJSONPath로 표현했을 때 `$.pull_request.merged`를 확인하면 해당 요청이 PR이 merge된 요청인지 확인할 수 있다.\n\n![](.index_images/0d6d400d.png)\n\n`$.pull_request.base.ref`는 해당 PR의 base 브랜치를 의미한다.\n\n예를들어 feature -> develop 형태라면 develop이 나온다\n\n![](.index_images/47afaad7.png)\n\n`$.pull_request.labels..name`는 해당 PR의 라벨들의 이름을 의미한다.\n\n## Generic Webhook Trigger 설정\n\n> ![](.index_images/5b94c679.png)\n파이프라인 설정 구성에 들어와서 작업을 이어나갑니다.\n\n![](.index_images/f9141614.png)\n\n기존에 설정해둔 `GitHub hook trigger for GITScm polling` 설정을 해제한다.\n\n![](.index_images/40676eae.png)\n\n그리고 Generic WebHook Trigger 를 활성화한다.\n\n### Post content parameters 설정\n\n`Post content parameters`의 추가 버튼을 눌러 파라미터를 추가한다.\n\n![](.index_images/f66fbb52.png)\n\n`$.pull_request.merged`를 등록하여 Merge 되었는지 여부를 가져온다.\n\n![](.index_images/2f09a4a8.png)\n\n`$.pull_request.base.ref`를 등록하여 base 브랜치를 가져온다.\n\n원하는 값은 develop 브랜치가 될 것이다.\n\n![](.index_images/d7a4b4fc.png)\n\n`$.pull_request.labels..name`를 등록하여 라벨들의 이름을 가져온다.\n\n원하는 값은 등록된 라벨들 중에 `백엔드`를 포함하는 값이 존재하는 상황이 될 것이다.\n\n### Optional filter 설정\n\n아래로 내리다보면 Optional filter 탭을 볼 수 있다.\n\n![](.index_images/3f3d0f71.png)\n\nExpression에 다음과 같은 정규표현식을 작성했다.\n\n`(?=.*true)(?=.*develop)(?=.*백엔드).*`\n\n또한 Text 부분에는 위에서 파라미터로 선언한 값들을 사용했다.\n\n위 표현식으로 다음과 같은 효과를 기대할 수 있다.\n\n`merge가 true 이고`, `브랜치가 develop 이고`, `라벨에 백엔드가 존재`하는 작업에 대해 트리거를 수행하는것을 기대할 수 있다.\n\n### Token 설정\n\n![](.index_images/b55101b4.png)\n\nToken 탭에 토큰 이름을 작성한다.\n\n![](.index_images/8e4baf8e.png)\n\n이 때 GitHub WebHook 설정에 들어가서 Payload URL에 token 파라미터를 포함하도록 수정한다.\n\n![](.index_images/675ca490.png)\n\n바로 아래 탭에서 TokenCredential에 토큰에 대한 Secret Key를 추가해줘야한다.\n\n외부에서 빌드를 유발하기 위해서는 token을 확인하는 방식이 존재하는데 이 때 Jenkins의 Credential에 있는 정보를 기반으로 수행한다.\n\n> token을 사용하지 않는 경우 계정정보를 입력할 수도 있지만 해당 과정에서는 token을 등록하는 방식을 사용합니다.\n\n![](.index_images/639919be.png)\n\n위와 같은 정보로 Secret text를 작성하고 등록하고 적용한다.\n\n## 응답 확인하기\n\n![](.index_images/8f20f94d.png)\n\nGitHub의 WebHook 탭의 Recent Deliveries 탭으로 가서 확인해보면 Response Body값에 다음과 같은 응답이 담겨있는 것을 확인할 수 있다.\n\n```json\n{\n  \"jobs\": {\n    \"pium-dev\": {\n      \"regexpFilterExpression\": \"(?=.*true)(?=.*develop)(?=.*백엔드).*\",\n      \"triggered\": true,\n      \"resolvedVariables\": {\n        \"BRANCH\": \"develop\",\n        \"LABELS\": \"[\\\"?️ \\\\b리팩터링\\\",\\\"? 백엔드\\\"]\",\n        \"LABELS_0\": \"?️ \\b리팩터링\",\n        \"LABELS_1\": \"? 백엔드\",\n        \"MERGED\": \"true\"\n      },\n      \"regexpFilterText\": \"true develop [\\\"?️ \\\\b리팩터링\\\",\\\"? 백엔드\\\"]\",\n      \"id\": 248,\n      \"url\": \"queue/item/248/\"\n    }\n  },\n  \"message\": \"Triggered jobs.\"\n}\n```\n\n`regexpFilterText`에 원하는 값이 잘 들어간 것을 확인할 수 있다.\n\n## 결론\n\n젠킨스의 `Generic Webhook Trigger` 플러그인을 이용하여 Merge 여부, target branch, label 값을 비교하고 빌드를 유발하는 설정을 했다.\n\n경우에 따라 세부적인 검증을 추가할 수 있을 것 같다.\n\n### 트러블 슈팅\n\nGeneric Webhook Trigger 설정 - Token 설정에서 많이 헤맸다.\n\n![](.index_images/1c588600.png)\n\n`{\"jobs\":null,\"message\":\"Did not find any jobs with GenericTrigger configured! If you are using a token, you need to pass it like ...trigger/invoke?token=TOKENHERE. If you are not using a token, you need to authenticate like http://user:passsword@example.org/generic-webhook... \"}`\n\n404 에러와 함께 위 메시지가 반환되었는데 Jenkins의 Token에 대해 이해를 하지 못해 생긴 문제였다.\n\n> 왜 다들 Token이 뭔지는 설명을 안해주는거지..?? ㅠㅠ\n>\n> `외부에서 빌드를 유발하기 위해서는 token을 확인하는데 이 때 Jenkins의 Credential에 있는 정보를 기반으로 수행한다.`\n>\n> 이 한마디를 이해하기 위해 하루가 걸렸다... 😇\n\n## Reference\n\n### 설정 과정에서 참고한 글\n\nhttps://bepoz-study-diary.tistory.com/385\n\nhttps://velog.io/@zayson/Jenkins-CICD-4.-WebHook%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC\n\n\n### 트러블 슈팅 과정에서 참고한 글\n\nhttps://georgik.rocks/jenkins-generic-webhook-plugin-failed-with-did-not-find-any-jobs-with-generictrigger-configured/\n\nhttps://pikachu987.tistory.com/61"},{"excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 이번 피움 서비스에서 CI/CD를 적용하기 위해 Jekins와 Github Webhook을 이용했습니다. 본 글에서는 Jenkins와 Github Webhook을 이용한 SpringBoot 서버 자동 빌드, 자동 배포 과정을 다루겠습니다. Jenkins 설치 과정은 피움 팀 젠킨스 설치하기 를 참고하…","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"date":"July 24, 2023","title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기","tags":["CI/CD","젠킨스","Webhook","설정"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[그레이](https://github.com/Kim0914)'가 작성했습니다.\n\n이번 피움 서비스에서 CI/CD를 적용하기 위해 Jekins와 Github Webhook을 이용했습니다.\n\n\n\n본 글에서는 Jenkins와 Github Webhook을 이용한 SpringBoot 서버 자동 빌드, 자동 배포 과정을 다루겠습니다.\n\n\n\nJenkins 설치 과정은 [피움 팀 젠킨스 설치하기](https://pium-official.github.io/jenkins-setting/) 를 참고하시면 됩니다 !\n\n\n\n작업 환경\n\n- 인스턴스: AWS EC2 t4g.small\n- OS: Ubuntu 22.04.2 LTS\n- RAM: 2GB\n\n\n## Jenkins 접속\n젠킨스를 접속하는 방법은 간단합니다. 젠킨스를 설치한 인스턴스 public IP와 port를 주소창에 입력하면 쉽게 접근할 수 있습니다.\n\n\n\n정상적으로 접속하면 다음과 같은 화면을 만나게 됩니다.\n![](.index_images/img.png)\n\n---\n## Github Webhook 설정\n먼저 Webhook을 설정하기 위해 현재 프로젝트의 깃허브 레포지토리로 이동합니다.\n\n\n\n레포지토리의 Settings를 눌러서 접속할 수 있습니다. 이후 왼쪽 메뉴바에 Webhooks를 누르면 아래와 같은 화면을 볼 수 있습니다.\n![](.index_images/img_1.png)\n\n오른쪽 상단의 Add Webhook 버튼을 눌러 webhook을 추가하는 화면으로 이동합니다.\n\n\n\n그러면 아래와 같은 Payload URL, Content Type, Secret을 입력하는 폼이 나타납니다.\n![](.index_images/img_2.png)\n\n**Payload URL**은 젠킨스가 설치되어 있는 서버의 `도메인 주소:포트/github-webhook/` 을 입력합니다.\n\n젠킨스의 기본 포트는 8080으로 설정되어 있습니다.\n\n주소 마지막에 / 는 꼭 넣어주셔야 합니다.\n\n/를 넣지 않으면 redirect URL로 인식해 정상적으로 동작하지 않습니다.\n\n\n\n**Content-type**은 `application/json`을 선택합니다.\n\n\n\nSecret은 비워두면 됩니다.\n\n\n\n마지막으로 어떤 동작에서 webhook을 발생시킬지 선택하면 됩니다.\n\n저희 팀의 경우에는 **Let me select individual events**를 눌러 **push**와 **pull request**가 발생했을 때 webhook이 동작하도록 선택했습니다.\n\n\n\n모든 선택을 마친 후 **Add webhook 버튼을 누르면 토큰이 발행**됩니다.\n\n\n\n토큰을 생성할 때 토큰 권한도 함께 설정할 수 있는데, 이 때 repo와 admin:repo_hook을 선택해주시면 됩니다.\n\n\n\n만약 CI를 통해 PR에 comment를 남기는 등의 write가 필요없는 경우에는 wirte 권한을 빼줄 수 있을 것 같습니다.\n\n\n\n해당 토큰은 생성 후 재발행되지 않기 때문에 따로 보관을 하는 것이 좋습니다.\n\n---\n## Credentials 생성\n다시 젠킨스 화면으로 이동해서 Credentials를 등록하여 Github webhook을 연동 시켜야 합니다.\n\n\n\n젠킨스 메인 화면에서 Jenkins 관리 페이지로 접속하면 Security 탭에 Credentials를 눌러 접속합니다.\n![](.index_images/img_3.png)\n\nAdd Credentials를 누릅니다.\n![](.index_images/img_4.png)\n\n그러면 아래와 같은 화면을 볼 수 있습니다.\n\n\n\n깃허브 webhook에서 발급받은 토큰을 이용해 크리덴셜 값을 생성합니다.\n![](.index_images/img_5.png)\n\n**kind**는 `Username with password`를 선택합니다.\n\n\n\n**username**에는 깃허브 토큰을 발급받은 `깃허브 아이디`를 작성합니다.\n\n\n\n**password**에는 `해당 토큰 값`을 넣으면 됩니다.\n\n\n\n**ID**는 젠킨스에서 이 **크리덴셜을 식별하기 위한 이름이므로 크게 의미가 없는 값** 입니다.\n\n---\n### Gradle 설정\n현재 우리 팀은 스프링 부트 서버를 빌드하기 때문에 gradle이 반드시 필요합니다.\n\n\n\n젠킨스 메인 화면에서 대시보드 -> 젠킨스 관리 -> Tools를 누르면 아래와 같은 Gradle 설정 화면을 볼 수 있습니다.\n![](.index_images/img_6.png)\n\nGradle 8.2.1 버전을 추가했습니다.\n\n추가를 완료하고 바로 페이지를 나가면 안됩니다.\n\n가장 아래에 있는 파란색 save 버튼을 눌러야 해당 설정이 저장됩니다 !!\n\n\n\nGradle 설정까지 마치면 빌드할 준비를 모두 마쳤습니다.\n\n\n\n이제 CI를 자동으로 실행하기 위해서는 CI 스크립트를 작성해야 합니다.\n\n---\n## CI 스크립트 작성\n드디어 CI를 담당하는 젠킨스 아이템을 생성할 시간입니다 !\n\n\n\n대시보드에서 New Item을 누르면 아래와 같은 화면을 볼 수 있습니다.\n![](.index_images/img_7.png)\n\n상단에 아이템 이름을 설정하고 Pipeline을 구축할 것이기 때문에 Pipeline을 선택하고 OK를 누릅니다.\n\n\n\n이후 아래와 같이 아이템을 설정할 수 있는 화면이 나옵니다.\n![](.index_images/img_8.png)\n\n저희는 깃허브 프로젝트를 사용하고 있기 때문에 Github Project를 체크한 후 레포지토리의 url을 입력합니다.\n\n\n\n다음으로 Build Trigger를 선택해야하는데, Github webhook을 사용할 계획이므로 Github hook triger for GITScm polling을 선택합니다. 해당 버튼을 클릭하면 아래에 스크립트를 작성하는 칸이 나옵니다.\n![](.index_images/img_9.png)\n\n\n\nScript칸에 팀에서 필요로 하는 CI Script를 입력하면 됩니다.\n\n\n\n여기서 저장 버튼 위에 보이는 Pipeline Syntax를 누르면 깃허브를 이용해 접근할 수 있는 스크립트를 생성하는 화면이 나옵니다.\n![](.index_images/img_10.png)\n\nSample Step을 Git으로 설정한 후 아래에 값을 입력하면 됩니다.\n\n\n\nCredentials에는 좀 전에 생성했던 크리덴셜을 선택하면 됩니다. 해당 정보에 토큰 값이 있기 때문에 정확한 크리덴셜을 선택해야 합니다.\n\n크리덴셜은 생성할 때 입력한 ID와 동일하게 보여집니다.\n\n\n\n모두 입력했다면 Generate Pipeline Script를 눌러 완성된 스크립트를 확인합니다.\n\n\n\n해당 스크립트를 만드는 이유는 빌드 과정에서 Github 저장소에서 저장소를 복제해야하기 때문입니다.\n\n그러므로 저장소에 대한 접근 권한이 반드시 필요합니다.\n\n\n\n전체 빌드 스크립트는 아래와 같습니다.\n\n```shell\npipeline {\n    agent any\n    tools {\n        gradle 'gradle'\n    }\n    triggers {\n        githubPush()\n    }\n    stages {\n        stage('저장소 복제') {\n            steps {\n                // 여기서 방금 생성된 깃허브 스크립트 넣기\n        }\n        \n        stage('빌드') {\n            steps {\n                sh '''\n                cd backend/pium\n                ./gradlew clean build\n                '''\n            }\n            post {\n                failure {\n                    slackSend (\n                        channel: '#알림-젠킨스',\n                        color: '#FF0000',\n                        message: \"백엔드 Build 실패...😢\"\n                    )\n                }\n            }\n        }\n    }\n}\n```\n\n\nstages에서 깃허브 저장소에 있는 프로젝트를 가져온 후, 본인의 프로젝트 디렉토리로 이동해 build를 진행하도록 하면 됩니다.\n\n디렉토리를 옮기는 부분에서 몇 번 에러가 있었는데, Jenkins 대시보드의 Console Output을 이용해 디버깅하면서 수정해나가면 쉽게 설정할 수 있습니다.\n\n\n\n지금까지 올바르게 적용되었다면 CI 설정은 모두 정상적으로 마쳤습니다.\n\n\n\n다음으로 CD(자동 배포) 설정 방법을 알아보겠습니다.\n\n---\n## SSH Agent 설치\n현재 빌드 서버와 운영 서버가 서로 다른 인스턴스로 분리되어 있기 때문에, 젠킨스 빌드 서버에서 빌드한 파일을 운영서버로 전달해야\n\n합니다. 이때 다른 인스턴스로의 접속이 필요하므로 SSH 연결 설정을 해야 합니다.\n\n\n\n기존의 블로그나 여러 레퍼런스를 찾아보면 Publish Over SSH를 많이 사용하는데, 현재 접속 불가 이슈가 있습니다.\n\n그러므로 SSH Agent를 사용해야 합니다.\n\n\n\nJenkins 관리의 Plugin 탭을 들어가서 설치할 수 있습니다.\n\n\n\nJenkins도 하나의 서버에서 동작하고 있기 때문에 운영서버로 접속하기 위한 pem 키가 필요합니다.\n\n\n\n대시보드 -> 젠킨스 관리 -> Credentials 로 이동합니다.\n\n\n\n깃허브 크리덴셜을 생성하는 것과 동일한 방법으로 pem 키를 크리덴셜로 설정합니다.\n![](.index_images/img_11.png)\n\n**kind**는 `SSH Username with private key`를 선택합니다.\n\n\n\n**id**는 깃허브 크리덴셜과 마찬가지로 식별자이기 때문에 `원하는 값을` 입력하면 됩니다.\n\n\n\n**username**은 인스턴스의 HostName ex) ubuntu@123-345-678-23의 `ubuntu` 를 입력하면 됩니다.\n\n\n\n마지막으로 **인스턴스를 생성하면서 받았던 pem 키를 Add 버튼을 눌러 추가**합니다.\n\npem 키에 있는 모든 내용(Begin, End 포함)을 다 복사해서 넣어야합니다.\n\n---\n## CD 스크립트 작성\n이제 젠킨스가 설치된 서버에서 빌드된 결과물을 운영 서버로 전달하는 스크립트를 작성해야 합니다.\n\n이때 scp 라는 프로토콜을 사용하여 파일을 전달합니다.\n\n\n\n저희 팀이 사용한 스크립트는 아래와 같습니다.\n\n빌드 성공 유뮤, 배포 성공 유무를 슬랙과 연동해 사용하고 있습니다 !\n\n```shell\npipeline {\n    agent any\n    tools {\n        gradle 'gradle'\n    }\n    triggers {\n        githubPush()\n    }\n    stages {\n        stage('저장소 복제') {\n            steps {\n                // 깃허브 크리덴셜\n            }\n        }\n        \n        stage('빌드') {\n            steps {\n                sh '''\n                cd //프로젝트 위치\n                ./gradlew clean build\n                '''\n            }\n            post {\n                failure {\n                    slackSend (\n                        channel: '#알림-젠킨스',\n                        color: '#FF0000',\n                        message: \"백엔드 Build 실패...😢\"\n                    )\n                }\n            }\n        }\n        stage('배포') {\n            steps {\n                sshagent(credentials: ['pem 키로 생성한 크리덴셜 ID']) {\n                    sh '''\n                        cd //프로젝트 위치\n                        \n                        ssh -o StrictHostKeyChecking=no {HostName}@{Private IP} uptime\n                        cd build/libs\n                        \n                        scp {빌드된 Jar 파일명} {HostName}@{Private IP}:/home/ubuntu\n                        ssh -t {HostName}@{Private IP} {운영서버 배포 스크립트 파일}\n                    '''\n                }\n            }\n            post {\n                success {\n                    slackSend (\n                        channel: '#알림-젠킨스',\n                        color: '#00FF00',\n                        message: \"백엔드 배포 성공! 🚀\"\n                    )\n                }\n                failure {\n                    slackSend (\n                        channel: '#알림-젠킨스',\n                        color: '#FF0000',\n                        message: \"백엔드 배포 실패 🥲\"\n                    )\n                }\n            }\n        }\n    }\n}\n```\n\n\nCI/CD 설정을 모두 마친 후 깃허브 프로젝트에 push, pull request와 같은 trigger가 발생하면 아래와 같이 빌드 결과를 볼 수 있습니다.\n![](.index_images/img_12.png)\n\n### Reference\n[베베의 CI/CD 글](https://developer-nyong.tistory.com/47#article-7-1--ssh-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EC%84%A4%EC%B9%98)\n"},{"excerpt":"이 글은 우아한테크코스 5기, 피움팀 크루 '참새'가 작성했습니다. 서론  피움의 프론트엔드에서는 서버 상태 관리를 위해 Tanstack Query를 사용하기로 하였다. 이 글에서는 많고 많은 상태 관리 라이브러리 중 Tanstack Query를 사용하기로 결정한 이유를 소개하고자 한다. 설치한 버전: 5.0.0-alpha.86 Tanstack query…","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"date":"July 23, 2023","title":"프론트엔드: Tanstack Query 사용에 대하여","tags":["Tanstack Query","React Query","리액트 쿼리"]},"rawMarkdownBody":"\n> 이 글은 우아한테크코스 5기, 피움팀 크루 '[참새](https://github.com/WaiNaat)'가 작성했습니다.\n \n\n## 서론\n\n![Tanstack: High-quality open-source software for web developers. Headless, type-safe, and powerful utilities for state management, routing, data visualization, charts, tables, and more.](.index_images/tanstack.png)\n\n피움의 프론트엔드에서는 서버 상태 관리를 위해 [Tanstack Query](https://tanstack.com/query/v5/docs/react/overview)를 사용하기로 하였다.\n\n이 글에서는 많고 많은 상태 관리 라이브러리 중 Tanstack Query를 사용하기로 결정한 이유를 소개하고자 한다.\n\n> 설치한 버전: 5.0.0-alpha.86\n\n## Tanstack query로 얻을 수 있는 개발적인 이점\n\n### 코드 간소화와 컴포넌트의 관심사 분리\n\nTanstack query에서 제공하는 다양한 함수들을 활용하면 비동기 통신의 처리 코드를 선언형으로 만들 수 있다. 또한 Tanstack query가 서버와의 통신을 대신해주기 때문에 컴포넌트의 렌더링 함수는 UI/UX의 구현이라는 보다 근본적인 내용에 집중할 수 있다. 조금 더 풀어서 설명하면 네 가지로 나눌 수 있다.\n\n우선 `<Suspense>`와 `<ErrorBoundary>`의 편한 사용이 가능하다. 이 둘을 사용하기 위해서는 각각 promise 또는 error를 throw하는 과정이 필요하다. 특히 error가 아닌 것을 던진다는 생각은 기존의 틀을 깨는 것으로 (eslint에 [관련 설정](https://eslint.org/docs/latest/rules/no-throw-literal)이 있다는 점으로 미루어 볼 때 자주 사용하는 기법이 아니었을 것이다) 새로운 코드를 짜야 한다. [Suspense를 설명하는 리액트 공식 문서](https://react.dev/reference/react/Suspense#displaying-a-fallback-while-content-is-loading)의 첫 번째 예제에서 Fork를 눌러 `Albums.js`안의 `use()`함수를 보면 promise를 던지기 위해 굉장히 재미있는 기법을 사용하고 있다는 걸 확인할 수 있다. 이러한 일련의 과정을 tanstack query가 대신하기 때문에 편리한 사용이 가능하다.\n\n다음으로 낙관적 업데이트를 적용하기에 유리하다. `useMutation`의 `onSuccess`, `onError`, `onSettled`와 같은 설정을 이용하면 된다.\n\n세 번째로는 비동기 통신의 결과 타입을 자동으로 추론해준다는 점이다. 따라서 컴포넌트 내부에서 불필요한 타입 가드 및 추론, 강제 타입 지정과 같은 행동을 하지 않아도 되므로 타입스크립트를 더 깔끔하게 사용할 수 있다.\n\n마지막으로 서버 상태 처리를 위한 전역 상태 관리 라이브러리를 도입하지 않아도 된다. 물론 이건 비단 tanstack query만의 장점은 아니다. 하지만 캐싱을 이용해서 전역 상태를 이용하지 않고도 여러 컴포넌트에서 같은 쿼리를 요청했을 경우 추가적인 통신 없이도 정보를 전달받을 수 있다는 점은 매력적이다.\n\n### 비동기 통신\n\n1. 캐싱을 지원하기 때문에 서버와의 불필요한 통신을 줄일 수 있다.\n2. 다양한 상황에서 자동 refetch가 가능해서 원한다면 항상 최신 값을 유지할 수 있다.\n3. 여러 컴포넌트가 같은 쿼리를 사용할 때, 해당 쿼리로부터 반환되는 데이터가 바뀌었다면 그 컴포넌트들을 한 번에 업데이트할 수 있다.\n4. 쿼리가 오랫동안 사용되지 않으면 가비지 컬렉터를 자동으로 불러서 정리한다.\n\n## 다른 라이브러리와의 비교\n\n우리 팀에서는 Recoil 이외의 다른 전역 상태 라이브러리나 서버 상태 라이브러리를 사용해본 경험이 많은 크루가 없어서 간단하게만 비교하였다.\n\n### [SWR](https://github.com/vercel/swr)\n\nNext.js 팀에서 만든 서버 상태 관리 라이브러리. 데이터 캐싱이라는 측면에 집중했다. 따라서 다른 라이브러리와 비교했을 때 굉장히 가벼운 편에 속한다.\n\n### [Tanstack Query](https://tanstack.com/query/v5/docs/react)\n\n데이터 캐싱뿐만이 아니라 에러 처리나 무한 스크롤과 같은 다양한 기능을 지원한다. 비슷한 기능을 하는 리액트 쿼리의 [`useQuery`](https://tanstack.com/query/v5/docs/react/reference/useQuery)와 SWR의 [`useSWR`](https://swr.vercel.app/docs/data-fetching)의 반환값을 확인해보았을 때 받을 수 있는 정보의 양이 차이가 많이 난다. 다양한 상황을 고려한 UI를 보여준다면 Tanstack query를 활용하는 것이 좋겠다는 생각을 했다. 추가적으로 받아온 데이터의 일차 가공이 필요하다면 `useQuery`에서 `selector`를 사용할 수 있다는 점도 상대적인 장점이라고 생각한다.\n\n### Redux, Recoil 등 다른 전역 상태 관리 라이브러리\n\n현재 피움 서비스 내에서 전역적으로 관리할 값이 많지 않다고 판단하였다.\n\n또한 일반적인 전역 상태 라이브러리의 경우 서버 상태를 나타나기에는 부적절한 것 같다. 특히 Recoil은 selector의 캐시 문제로 인해 사용자의 장바구니 목록처럼 자주 변하는 값을 받아오기 굉장히 힘들었던 기억이 있다.\n\n## Tanstack Query로 사용자에게 어떤 서비스를 제공하고자 하는지\n\n우리가 추구해야 하는 것은 기술적 고점이 아니다. 그렇기 때문에 이 라이브러리를 도입해서 사용자에게 어떤 경험을 선사할 수 있을지 고민하였다.\n\n1. Suspense\n    - Suspense는 사용자에게 '지금 무슨 일을 하는 중이다'라는 암시를 준다. 따라서 사용자의 기다리는 시간을 편하게 할 수 있다.\n    - 피움 서비스의 '식물 사전' 기능은 공공데이터를 활용한다. 현재 사용하고 있는 공공데이터의 경우 이용에 제약이 없어서 DB에 저장할 수 있다. 만약 그렇지 않아서 항상 백엔드 서버에서 공공데이터 API와의 통신을 추가적으로 진행해야 할 경우 정보를 받아오는 데 시간이 걸린다. 이 때 Suspense를 잘 활용할 수 있을 것이다.\n2. Refetch\n    - 피움 서비스는 모바일 환경을 우선적으로 고려하고 있다.\n    - 지하철 와이파이처럼 인터넷이 불안정한 곳에서는 요청이 잘 가지 않을 수 있다. 이 때 사용자가 같은 행동을 두 번 하지 않더라도 tanstack query가 자동적으로 요청을 보내서 UX 측면의 개선이 가능하다.\n3. caching\n    - '식물 사전 정보'는 변하지 않는 자료이다. 따라서 사용자가 여러 번 요청을 하더라도 매번 같은 정보를 보게 된다. 이러한 요청에 대해서는 `staletime`을 길게 잡아 캐시를 오래 유지한다면 불필요한 서버와의 통신을 줄이고 사용자 경험도 개선할 수 있다.\n    - '내가 키우는 식물 목록'이나 '내가 키우는 식물의 상세 정보'도 사용자가 값을 추가하거나 바꾸지 않는 이상 변하지 않는 값이다. 이 친구들도 적절한 캐싱을 사용하면 서버와의 통신을 줄여 사용자의 대기시간을 줄일 수 있다.\n4. 무한 스크롤\n    - 피움에서는 자신의 식물에게 물을 준 날짜들을 기억해서 타임라인 형태로 볼 수 있도록 제공할 계획이다. 타임라인은 시간의 흐름을 나타내기 위한 도구이다. '시간'과 '흐름' 모두 연속성을 띠는 표현인 만큼 무한 스크롤을 이용해 유의미한 경험을 제공할 것이다.\n\n\n### Tanstack Query v5를 사용하게 된 이유\n\n마지막으로 피움 프론트엔드에서 Tanstack query의 다섯 번째 메이저 버전을 사용하기로 한 이유를 짧게 남긴다. Tanstack query v5는 [획기적인 변화](https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5)가 있고, alpha 단계이다.\n\n1. 어차피 버전은 5로 흘러간다. 피움 프론트엔드의 세 크루 모두 Tanstack query를 처음 배우는 단계라면 굳이 역사의 뒤안길로 흘러갈 v4부터 배울 필요는 없다고 생각한다.\n2. 문서를 살펴본 결과 v5의 '획기적인 변화'는 대부분 기존의 불필요하거나 문제를 일으키기 쉬운 기능을 제거하는 것이었다. 따라서 만약 v4를 학습해야 한다면 기존의 v5 공부 내용에서 덧붙이는 방법으로 가능할 것이다.\n3. 현재 피움 서비스에서는 복잡한 서버와의 데이터 통신은 없을 것 같다. 따라서 alpha 단계이기 때문에 무언가가 안 되는 상황은 없을 것으로 예상된다.\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론  http://pium.life 로 접속하면 피움의 홈페이지가 나오기까지의 과정을 기록으로 남겨보려고 한다. 본 과정은 서버 구축을 처음 하면서 과정을 이해하기위해 작성된 글입니다. 빠르게 따라할 수 있는 설정 기반 글을 원한다면 마지막 목차인 정리를 확인해보시길 바랍니다. 본 과정에서는 소량의 …","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"date":"July 18, 2023","title":"피움의 배포과정","tags":["배포","인프라"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)'가 작성했습니다.\n \n\n## 서론\n\n![](.index_images/3162b98e.png)\n\nhttp://pium.life 로 접속하면 피움의 홈페이지가 나오기까지의 과정을 기록으로 남겨보려고 한다.\n\n> 본 과정은 서버 구축을 처음 하면서 과정을 이해하기위해 작성된 글입니다.\n> \n> 빠르게 따라할 수 있는 설정 기반 글을 원한다면 마지막 목차인 정리를 확인해보시길 바랍니다.\n\n> 본 과정에서는 소량의 과금(?)이 존재합니다.\n> (도메인 구입비용 : 약 4000원)\n\n## 도메인 정하기\n\n![](.index_images/8e211be2.png)\n\n> 도메인을 구입하기 위해 도메인 호스팅 사이트 [가비아](https://www.gabia.com/)를 이용했다.\n\n`pium.com` `pium.co.kr` `pium.net` 등등.\n서비스의 이름으로 자주 사용하는 도메인을 생성하고싶었으나 이미 존재하거나 가격이 너무 비싸다는 문제가 있었다.\n\n적당한 가격에 서비스의 이름을 가진 도메인인 `pium.life`를 선택했다. (1년 4000원)\n\n## 도메인 설정하기\n\n> 가비아 서비스를 기준으로 과정이 진행됩니다.\n\n`3.123.123.123`과 같은 인스턴스 public ip 주소를 `pium.life`로 별칭을 지정해주자.\n\n![](.index_images/ce5d100b.png)\n\n우측 상단의 `My 가비아` 탭으로 들어간다.\n\n![](.index_images/48a0d2d6.png)\n\n우측의 `DNS 관리툴` 탭으로 들어간다.\n\n![](.index_images/dbaa42b0.png)\n\n도메인의 `설정` 탭으로 들어간다.\n\n![](.index_images/0b4d4be0.png)\n\nDNS 관리 탭의 `설정` 혹은 `레코드 수정`에 들어간다.\n\n![](.index_images/d830ba27.png)\n\n위와 같이 레코드를 추가하고 저장한다.\n\n> CNAME 설정은 향후 서브도메인 설정을 위한 설정입니다.\n\n이제 http://pium.life 로 접속하면 서버로 바로 접속할 수 있게된다. (SSH 접속이 아닌 HTTP 접속을 의미한다.)\n\n## 환경 살펴보기\n\n피움은 하나의 EC2에 프론트엔드, 백엔드의 배포를 모두 진행하려고한다.\n\n이를 위해서라면 서로 다른 포트에 서비스를 띄워둔 뒤 각 요청별로 포트를 분산시킬 필요가 있다.\n\n![](.index_images/ee357fa5.png)\n\n때문에 위와 같은 흐름으로 요청이 진행되는 것이 최종 목표다!\n\n### EC2 보안규칙\n\n우아한테크코스 과정에서 제공되는 EC2의 보안규칙은 다음과 같다.\n\n- 사내에서만 22번 포트 접속 가능\n- 80, 443은 열려있음\n- 이외의 포트는 열려있지 않음.\n\n우리가 흔히 개발을 하면서 사용하는 3000번 포트 혹은 8080번 포트를 통해 해당 서버에 접근하지 못한다는 이야기다.\n\n즉, 다시말해 pium.life:8080과 같은 접근이 안된다는 이야기다.\n\n인바운드 규칙에서 8080 혹은 3000번 포트를 열어버리는 방법도 있겠지만 보안 규칙에 손대지 않으면서 해결할 수 있는 방법을 찾아보자.\n\n## nginx로 포트포워딩하기\n\nlinux에 존재하는 `iptables` 명령어를 통해 서버 자체적으로 포트포워딩 환경을 구성할 수도 있지만 현재 피움은 하나의 서버에서 두개의 어플리케이션을 배포하고 있고, 도메인도 하나다.\n\n따라서 후에 설명할 서브도메인을 적용하기 위해서라도 nginx를 이용하기로 한다.\n\n### nginx 설치하기\n\n```shell\nsudo apt install nginx\n```\n\n```shell\nsystemctl status nginx\n```\n\n![](.index_images/28e0139a.png)\n\n이제 주소창에 인스턴스 ip 를 치고 접속하면 다음과 같이 nginx default 페이지를 볼 수 있다. \n\n![](.index_images/9345764b.png)\n\n### 80 포트 접속을 8080 포트로\n\n> 해당 과정은 8080포트에 애플리케이션이 구동중인 상태에서 진행됩니다. \n> 다음 명령어로 8080포트에서 애플리케이션이 구동중인지 확인한다.\n>\n> ```shell\n> lsof -i tcp:8080\n> ```\n> ![](.index_images/1573063d.png)\n\n이제 nginx 설정파일을 작성하여 80포트로 오는 요청을 8080포트로 전환시켜본다.\n\n```shell\ncd /etc/nginx/sites-available/\n\nsudo vi default\n```\n\n> 주석처리 되어있는 부분은 제외하고 코드로 표현합니다.\n\n```shell\n# 변경 전 파일내용\nserver {\n        listen 80 default_server;\n        listen [::]:80 default_server;\n\n        root /var/www/html;\n\n        index index.html index.htm index.nginx-debian.html;\n\n        server_name _;\n\n        location / {\n                try_files $uri $uri/ =404;\n        }\n}\n```\n\n처음 파일을 열어보면 위와같이 설정되어있을 것이다.\n\n최대한 간략하게 포트를 변경한다는 목적만 달성해보기 위해 다음 내용들을 수정해보자.\n\n- `root /var/www/html;` 주석처리\n- `index index.html index.htm index.nginx-debian.html;` 주석처리\n- `location / { ... }` 내부 내용에 다음 내용 추가\n  - `proxy_set_header Host $host:$server_port;`\n  - `proxy_set_header X-Real-IP $remote_addr;`\n  - `proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;`\n  - `proxy_pass http://127.0.0.1:8080;`\n\n```shell\n# 변경된 파일내용\nserver {\n        listen 80 default_server;\n        listen [::]:80 default_server;\n\n        # root /var/www/html;\n\n        # index index.html index.htm index.nginx-debian.html;\n\n        server_name _;\n\n        location / {\n                proxy_set_header Host $host:$server_port;\n                proxy_set_header X-Real-IP $remote_addr;\n                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n                proxy_pass http://127.0.0.1:8080;\n        }\n}\n```\n\n위와같이 설정파일을 수정했다면 다음 명령어를 수행해 nginx를 다시 시작한다.\n\n```shell\nsudo systemctl restart nginx\n```\n\n![](.index_images/232c6d5d.png)\n\n스프링부트 애플리케이션을 실행중이였다면 위와같은 Whitelabel Error Page를 확인할 수 있을것이다.\n\n## 서브도메인 구성하기\n\n이제 80포트에서 8080포트로 요청을 변환하는 과정은 성공했다.\n\n하나의 서버에 프론트엔드, 백엔드 코드가 같이 띄워져야하므로 서브도메인을 통해 페이지와 API를 구분해줘야한다.\n\n### index 파일 지정하기 - default 파일 수정\n\n프론트에서 빌드 산출물로 나온 index.html을 기본 페이지로 참고하도록 설정하자.\n\n```shell\ncd /etc/nginx/sites-available/\n\nsudo vi default\n```\n\n```shell\n# 변경 전 설정내용\nserver {\n        listen 80 default_server;\n        listen [::]:80 default_server;\n\n        # root /var/www/html;\n\n        # index index.html index.htm index.nginx-debian.html;\n\n        server_name _;\n\n        location / {\n                proxy_set_header Host $host:$server_port;\n                proxy_set_header X-Real-IP $remote_addr;\n                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n                proxy_pass http://127.0.0.1:8080;\n        }\n}\n```\n\n기존에 80포트를 8080포트로 포워딩시켜주는 설정을 바꿔준다.\n\n```shell\n# 변경 후 설정내용\nserver {\n        listen 80 default_server;\n        listen [::]:80 default_server;\n\n        root /var/www/html;\n\n        index index.html;\n\n        server_name pium.life;\n\n        location / {\n        }\n}\n```\n\n이제 pium.life로 접속하면 `/var/www/html` 경로에 있는 `index.html`을 참조하도록 설정되었다.\n\n위 설정에 따르면 `index.html` 및 `bundle.js`, `assets` 등의 프론트 리소스들은 서버의 `/var/www/html`를 기준으로 위치시키면 된다.\n\n> 빌드 산출물 및 CD와 관련된 내용은 본 게시글에서 다루지 않습니다.\n\n### API 서버 지정하기 - api_config 파일 만들기\n\nhttp://api.pium.life 로 API를 호출하도록 구성해보자.\n\nnginx는 기본적으로 `/etc/nginx/sites-enabled` 경로에 있는 파일들을 참고하여 설정파일에 적용한다.\n\n> `/etc/nginx/nginx.conf` 파일의 60번째 줄 참고\n> \n> ![](.index_images/f4ceb33e.png)\n\n다음 과정을 통해 서브도메인 설정을 해보자.\n\n```shell\ncd /etc/nginx/sites-available\n\nsudo vi api_config\n```\n\n```shell\n# api_config 파일 내용\nserver {\n        listen 80;\n        listen [::]:80;\n\n        server_name api.pium.life;\n        \n        location / {\n                proxy_set_header Host $host:$server_port;\n                proxy_set_header X-Real-IP $remote_addr;\n                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\n                proxy_pass http://127.0.0.1:8080;\n        }\n}\n```\n\n`server_name` 옵션을 통해 api.pium.life 라는 도메인으로 접근하는 요청을 확인하고, 맞다면 8080 포트로 변경한다.\n\n위와 같이 파일을 작성했으면 `sites-enabled` 경로에 soft link(바로가기)를 생성한다.\n\n```shell\nln -s /etc/nginx/sites-available/api_config /etc/nginx/sites-enabled/api_config\n```\n\n이제 nginx를 재시작하여 설정을 적용해보자.\n\n> 💡 Tip : `nginx -t` 명령어를 통해 현재 설정파일이 정상적으로 작성되었는지 확인할 수있다.\n> \n> ![](.index_images/10d7627b.png)\n\n![](.index_images/04601361.png)\n\nhttp://api.pium.life 로 접속하면 API로 연결되는것을 확인할 수 있다.\n\n## 정리\n\n- 8080 포트에 API 애플리케이션을 실행한다.\n- 도메인 구입 및 A 레코드, CNAME을 설정한다.\n- nginx를 설치한다.\n- 프론트 빌드 산출물을 `/var/www/html` 경로에 준비한다. (index.html, bundle.js, assets 등)\n- 서브도메인 및 포트포워딩 설정한다.\n\n### nginx 설정 명령어 따라가기\n\n```shell\n# nginx 설치\nsudo apt install nginx\n\n# default 파일 수정\nsudo vi /etc/nginx/sites-available/default\n```\n\n```shell\n# /etc/nginx/sites-available/default 파일 내용\nserver {\n        listen 80 default_server;\n        listen [::]:80 default_server;\n\n        root /var/www/html;\n\n        index index.html;\n\n        server_name pium.life;\n\n        location / {\n        }\n}\n```\n\n```shell\n# api_config 파일 작성\nsudo vi /etc/nginx/sites-available/api_config\n```\n\n```shell\n# api_config 파일 내용\nserver {\n        listen 80 default_server;\n        listen [::]:80 default_server;\n\n        root /var/www/html;\n\n        index index.html;\n\n        server_name pium.life;\n\n        location / {\n        }\n}\n```\n\n```shell\n# nginx 재시작 및 설정적용\nsudo systemctl restart nginx\n```\n\n## Reference\n\nhttps://jminie.tistory.com/110\n\nhttps://customer.gabia.com/manual/domain/287/1201"},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다. 정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.\n이에 Jenkins를 설치하고 환경설정을 빌드서버 환경을 구축한 일련의 과정을 기록해두려고한다. 작업 환경 : Ubuntu 22.04.2 LTS 공식문서 살펴보기 젠킨스 공…","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"date":"July 16, 2023","title":"젠킨스 설치하기","tags":["CI/CD","젠킨스","설정"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)'가 작성했습니다.\n \n\n## 서론\n\n피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다.\n\n정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.\n이에 Jenkins를 설치하고 환경설정을 빌드서버 환경을 구축한 일련의 과정을 기록해두려고한다.\n\n> 작업 환경 : Ubuntu 22.04.2 LTS\n\n## 공식문서 살펴보기\n\n[젠킨스 공식문서](https://www.jenkins.io/doc/book/installing/linux/)를 확인하면 설치 방법이 친절하게 나와있다.\n\n아무것도 없는 EC2 환경에서 Jenkins를 설치하고 구동하는 과정을 따라가보자.\n\n## (Optional) Swap 메모리 설정하기\n\n프리티어환경에서 Jenkins를 사용하면 자칫 메모리가 부족한 상황이 발생할 수도 있다.\n2GB의 메모리는 젠킨스와 빌드를 모두 견디기 어려울 수도 있다.\n\n다음 명령어를 통해 서버에 Swap 메모리를 할당하자.\n\n```shell\nsudo fallocate -l 2G /swapfile\nsudo chmod 600 /swapfile\nsudo mkswap /swapfile\nsudo swapon /swapfile\n\nfree -h # 확인명령어\n```\n\n> [Swap 메모리 할당하기](https://velog.io/@junho5336/Swap-%EB%A9%94%EB%AA%A8%EB%A6%AC-%ED%95%A0%EB%8B%B9%ED%95%98%EA%B8%B0)를 참고\n\n## java 설치하기\n\n> 설치 방법은 [공식문서](https://www.jenkins.io/doc/book/installing/linux/)를 확인하면서 진행하고있습니다.\n\n현재 사용할 jenkins의 버전은 java 17을 사용한다.\njava 17버전을 설치하자\n\n```shell\nsudo apt update\nsudo apt install openjdk-17-jre\njava -version\n```\n\n![](.index_images/93d56503.png)\n\n## jenkins 설치하기\n\n다음 명령어를 수행하여 jenkins를 설치한다.\n\n```shell\ncurl -fsSL https://pkg.jenkins.io/debian-stable/jenkins.io-2023.key | sudo tee \\\n  /usr/share/keyrings/jenkins-keyring.asc > /dev/null\necho deb [signed-by=/usr/share/keyrings/jenkins-keyring.asc] \\\n  https://pkg.jenkins.io/debian-stable binary/ | sudo tee \\\n  /etc/apt/sources.list.d/jenkins.list > /dev/null\nsudo apt-get update\nsudo apt-get install jenkins\n\nsudo systemctl status jenkins # 실행상태 확인\n```\n\n![](.index_images/99b45540.png)\n\n\n## jenkins 접속하기 & 초기설정\n\n> jenkins는 기본적으로 8080포트를 사용한다.\n> jenkins의 포트를 변경하는 방법에 대해서는 본 글에서 다루지는 않는다.\n\n`{인스턴스-public-ip}:8080` 으로 접속하면 다음과 같은 화면을 볼 수 있다.\n\n![](.index_images/4492665d.png)\n\n다시 EC2 화면으로 넘어와서 다음 명령어를 수행하여 `initialAdminPassword`를 알 수 있다.\n\n```shell\nsudo cat /var/lib/jenkins/secrets/initialAdminPassword\n```\n\n![](.index_images/f55b94c9.png)\n\n확인한 암호를 화면에 입력한 뒤 Continue 버튼을 눌러 계속 진행한다.\n\n![](.index_images/28fea7e9.png)\n\n초기 플러그인 세팅 화면이 나오는데 `Install suggested plugins` 를 눌러 초기 플러그인 설정을 진행한다. \n\n![](.index_images/c78a9517.png)\n\n![](.index_images/82bae04f.png)\n\n초기 Admin 유저를 생성할 수 있다.\n\n![](.index_images/a8f14e43.png)\n\njenkins의 기본 URL을 설정할 수 있다. 기본값을 권장한다. \n\n![](.index_images/84efb2c8.png)\n\n여기까지 했으면 초기 설정은 완료했다고 볼 수 있다.\n\n만약 위 과정에서 admin 유저를 생성하지 않았다면 `admin` 이라는 기본 유저로 로그인 할 수 있다고 설명하고 있다.\n비밀번호는 `initialAdminPassword` 과정에서 입력했던 값으로 설정되어있다.\n\n![](.index_images/60ba97ad.png)\n\n이렇게 Jenkins를 설치할 수 있다.\n\n## Reference\n\nhttps://www.jenkins.io/doc/book/installing/linux/\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 서론 JPA를 이용해 엔티티를 설계하다가  어노테이션과 @Column의 의 차이점이 궁금해져 알아보았습니다. nullable = false ?? JPA는 엔티티를 매핑하고 설계하면 자동으로 DDL을 생성해 주는 기능을 제공합니다. \n또한 엔티티의 각 컬럼들에 대해 NOT NULL, UNIQUE 등과 …","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"date":"July 16, 2023","title":"@NotNull과 nullable = false는 어떤 차이가 있을까?","tags":["JPA","Validation","nullable"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[그레이](https://github.com/Kim0914)'가 작성했습니다.\n\n\n## 서론\n\nJPA를 이용해 엔티티를 설계하다가 `@NotNull` 어노테이션과 @Column의 `nullable=false`의 차이점이 궁금해져 알아보았습니다.\n\n\n## nullable = false ??\n\nJPA는 엔티티를 매핑하고 설계하면 자동으로 DDL을 생성해 주는 기능을 제공합니다. \n또한 엔티티의 각 컬럼들에 대해 NOT NULL, UNIQUE 등과 같은 제약 조건이 포함되는 경우에도 자동으로 DDL을 생성해 줍니다.\n\n\n\n엔티티를 설계할 때 일반적으로 @Column 어노테이션을 활용합니다. \n@Column 어노테이션에서 해당 컬럼의 NOT NULL 제약을 설정할 수 있는데 `@Column(name = \"email\", nullable = false)`와 같이 nullable=false 설정을 걸어주면, 해당 제약 조건을 명시할 수 있습니다. \n따로 명시하지 않으면 nullable의 기본 값은 true입니다.\n\n\n\n간단한 User 엔티티를 생성해 보겠습니다.\n\n```java\n@Entity\n@Table(name = \"user\")\npublic class User extends AuditingEntity {\n\n    @Id\n    @GeneratedValue(strategy = GenerationType.IDENTITY)\n    @Column(name = \"id\", updatable = false)\n    private Long id;\n\n    @Column(name = \"user_id\", length = 20)\n    private String userId;\n\n    @Column(name = \"password\", length = 20)\n    private String password;\n\n    @Column(name = \"name\", length = 20)\n    private String name;\n\n    @Column(name = \"email\", nullable = false, length = 50)\n    private String email;\n}\n```\n\nUser 테이블의 email 필드는 반드시 값이 존재해야 합니다. \n즉, **NOT NULL 제약 조건이 필요**합니다. \n여기서 JPA가 자동으로 생성하는 DDL을 확인해 보겠습니다.\n\n![](./.index_images/img.png)\n\n`email varchar(50) not null` 과 같이 not null 제약 조건이 자동으로 명시됨을 알 수 있습니다.\n\n\n\n하지만 DDL은 애플리케이션 내부가 아닌 데이터베이스 컬럼의 속성에 대한 조건이므로, 스프링(자바) 애플리케이션 내 User 엔티티의 email 필드는 null이 허용됩니다.\n\n\n\n테스트 코드로 확인해 보겠습니다.\n\n```java\n@TestConstructor(autowireMode = TestConstructor.AutowireMode.ALL)\n@DataJpaTest\nclass UserRepositoryTest {\n\n    private final UserRepository userRepository;\n\n    public UserRepositoryTest(UserRepository userRepository) {\n        this.userRepository = userRepository;\n    }\n\n    @Test\n    void save() {\n        User user = new User(\"gray1234\", \"password\", \"gray\", null);\n\n        User savedUser = userRepository.save(user);\n\n        assertThat(savedUser).isEqualTo(user);\n    }\n}\n```\n\n![](./.index_images/img2.png)\n\n테스트가 실패함을 확인할 수 있습니다.\n\n\n\n하지만 여기서 주의 깊게 살펴볼 점이 있습니다. 예외 메시지를 따라 올라가 보면 insert 쿼리가 한 번 발생한 것을 알 수 있습니다. 또한 발생한 예외 타입이 JdbcSQL.... Exception입니다.\n\n\n\n즉 애플리케이션 내부가 아닌, 데이터베이스 내에서 예외가 발생했다는 것입니다.\n\n![](./.index_images/img3.png)\n\n애플리케이션 내에서는 email 컬럼의 null을 체크하지 못하고, 데이터베이스에 쿼리가 실행될 때 예외가 발생한다는 것입니다. 또한 insert 쿼리가 데이베이스에서 실행되므로 Auto Increment인 PK가 증가합니다.\n\n![](./.index_images/img4.png)\n\n첫 번째 유저를 저장할 때는 email 값을 null로 할당한 후 try - catch를 이용해 예외를 삼키고, 두 번째 유저는 정상적으로 저장한 후 PK를 출력해 봤습니다. 예상한 것처럼, 두 번째 유저의 PK는 2 임을 확인할 수 있습니다.\n\n\n\n**그렇다면, 애플리케이션 내 엔티티에서는 null을 어떻게 막을 수 있을까요?**\n\n\n## @NotNull과 함께라면?\n\n`@NotNull`은 java validation에 속하며 `@Valid`를 이용한 요청을 처리하는 단계에서 예외를 잡을 수도 있고, bean validation을 통해 예외를 검증할 수도 있습니다.\n\n\n\n우리가 DTO와 같이 클래스의 필드를 검증하는 방법과 동일하게 엔티티의 필드도 검증할 수 있습니다. 당연히 같은 자바 객체이고 도메인이기 때문에 동일하게 적용할 수 있습니다.\n\n\n\n@Valid 어노테이션도 없이 어떻게?라고 생각할 수 있는데요, Hibernate는 엔티티에 적용된 Bean Validation 어노테이션 역시 DDL로 변환합니다. \n@NotNull은 nullable=false와 마찬가지로 DDL 상에서 해당 컬럼이 NOT NULL 제약조건을 가짐을 명시합니다.\n\n\n\n스프링 공식문서인 밸덩에서도 이를 명확히 언급하고 있습니다. [밸덩 바로가기](https://www.baeldung.com/hibernate-notnull-vs-nullable)\n\n\n\n이전 User 테이블에 nullable=false를 제거한 후 @NotNull 어노테이션만 붙여준 후 생성되는 DDL을 살펴보겠습니다.\n\n```java\n@Entity\n@Table(name = \"user\")\npublic class User extends AuditingEntity {\n\n    @Id\n    @GeneratedValue(strategy = GenerationType.IDENTITY)\n    @Column(name = \"id\", updatable = false)\n    private Long id;\n\n    @Column(name = \"user_id\", length = 20)\n    private String userId;\n\n    @Column(name = \"password\", length = 20)\n    private String password;\n\n    @Column(name = \"name\", length = 20)\n    private String name;\n\n    @NotNull\n    @Column(name = \"email\", length = 50)\n    private String email;\n}\n```\n\n![](./.index_images/img5.png)\n\n동일하게 **email varchar(50) not null** 과 같이 not null 제약 조건이 자동으로 명시됨을 알 수 있습니다.\n\nHibernate에 의해 DDL이 자동으로 생성되는 기능을 끄고 싶다면 아래와 같이 설정하면 됩니다.\n\n```properties\nspring.jpa.properties.hibernate.validator.apply_to_ddl=false\n```\n\n그렇다면 nullable = false와 어떤 차이가 있을까요?\n\n차이점을 알아보기 위해 이전에 User의 email 필드에 null을 세팅한 후 저장하는 테스트 코드를 실행해보겠습니다.\n\n![](./.index_images/img6.png)\n\n다음과 같이 `javax.validation.ConstraintViolationException` 예외가 발생한다는 것을 알 수 있습니다. 또한 nullable=false 방식 때 발생하던 **insert 쿼리가 발생하지 않는다**는 점도 함께 볼 수 있습니다.\n\n\n\n`javax.validation.ConstraintViolationException` 예외가 발생했다는 것은 스프링(자바) 애플리케이션 내에서 예외를 잡았다는 것입니다. 그러므로 데이터베이스에 쿼리가 실행될 일이 없습니다.\n\n\n\n좀 더 정확하게 말하면 객체가 생성되는 시점이 아닌 **엔티티가 영속화되는 시점에 예외가 발생**합니다.\n\n\n\n확실하게 알아보기 위해 동일한 User1, User2 저장 테스트를 실행해 보면 2번째로 저장한 유저의 PK가 1 임을 알 수 있습니다.\n\n![](./.index_images/img7.png)\n\n또한 @NotNull을 어노테이션을 사용하게 되면 예외 메시지를 직접 작성할 수 있는 장점도 존재합니다.\n\n---\n\n여담으로, @NotNull 없이 nullable=false 만 설정한 경우에도 NULL 검증을 진행하고 싶다면 아래와 같이 설정하면 됩니다.\n```properties\nspring.jpa.properties.hibernate.check_nullability=true\n```\n![](./.index_images/img8.png)\n\n\b스프링(자바) 애플리케이션 단에서 예외가 잡히는 것을 볼 수 있습니다. 하지만 예외 타입이 hibernate.PropertyValueException으로 다릅니다.\n\n\n\n굳이 추천하는 방법은 아닌 것 같습니다.\n\n\n\n또한 `@NotBlank`나 `@NotEmpty`는 자동으로 DDL을 생성해주지 않습니다.\n\n그러므로 @NotBlank나 @NotEmpty를 사용하는 경우에는 `@Column(nullable=false)`를 반드시 추가해야 DDL에 NOT NULL 제약조건이 반영됩니다.\n\n---\n\n## 정리\n**@Column(nullable = false)**\nDDL을 자동으로 생성하지만, 애플리케이션의 영속성 컨텍스트에서 엔티티 필드에 null이 들어가는 것을 막지 못한다.\n\n또한 데이터베이스에 쿼리가 실행된 후 예외가 발생한다.\n\n\n\n**@NotNull**\nDDL을 자동으로 생성하고 애플리케이션의 영속성 컨텍스트에서 엔티티 필드에 null이 들어가는 것을 막는다.\n\n잘못된 제약 조건인 경우 데이터베이스에 불필요한 쿼리를 날리지 않는다.\n\n추가적으로 Bean Validation 방식은 예외 메세지를 직접 작성할 수 있다.\n\n또한 @Size와 같이 다른 validation을 통해 엔티티 필드 값을 검증할 수 있다.\n\n\n단점으로는 코드가 지저분해지고, JPA를 이용한 엔티티화 시킨 것이 아닌 객체라면 @NotNull 어노테이션을 해석하지 못한다.\n\n\n하이버네이트에서는 nullable=false보다 @NotNull 사용을 조금 더 권장하고 있다.\n\n\n## 레퍼런스\nhttps://www.baeldung.com/hibernate-notnull-vs-nullable\n\nhttps://kafcamus.tistory.com/15\n\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀의 기술블로그를 만들기까지의 험난한 과정을 정리해보려고 한다. 플랫폼 선정 팀 블로그를 작성하기 위해 다양한 플랫폼들을 고려해봤다. 티스토리 티스토리는 팀 블로그 기능을 통해 다양한 작성자 및 관리자를 지정할 수 있다. 하지만 UI를 직접 수정할 수 없을 뿐더러 제공되어있는 스킨들이 대부분 …","fields":{"slug":"/blog-starter/"},"frontmatter":{"date":"July 09, 2023","title":"피움 블로그 생성과정","tags":["블로그","세팅"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)'가 작성했습니다.\n \n\n## 서론\n\n피움팀의 기술블로그를 만들기까지의 험난한 과정을 정리해보려고 한다.\n\n## 플랫폼 선정\n\n팀 블로그를 작성하기 위해 다양한 플랫폼들을 고려해봤다.\n\n### 티스토리\n\n티스토리는 팀 블로그 기능을 통해 다양한 작성자 및 관리자를 지정할 수 있다.\n\n하지만 UI를 직접 수정할 수 없을 뿐더러 제공되어있는 스킨들이 대부분 마음에 들지 않았다.\n\nUI 선정과정에 너무많은 힘을 들일 것 같아서 티스토리는 사용하지 않았다.\n\n### Notion\n\n현재 팀 문서 정리를 Notion으로 관리하고있다.\n\n자유롭게 템플릿을 관리할 수 있어서 가장 매력적으로 다가온 툴이였지만 SEO를 적용하지 못하고, 도메인을 별도로 지정해야한다는 단점이 있어 선택하지 않았다.\n\n> 중간에 vercel에서 제공하는 notion 배포기능을 사용하는 방식이 있었지만 Organizaiton으로 레포지토리를 관리하고 있는 현재 상황에서 해당 서비스를 이용하려면 유료였기 때문에 해당 부분도 사용하지 못했다.\n[Notion-backed Next.js Blog](https://vercel.com/templates/next.js/notion-blog)\n\n\n### Velog\n\n팀 계정을 생성해서 Velog에 글을 게시하는 방법을 생각해봤다.\n\n팀 계정을 생성한다는 부분에서 팀 프로젝트가 계속 진행되면서 계정을 관리하는 리소스가 추가되는것이 우려되었기 때문에 선택하지 않았다.\n\n\n### GitBook\n\nGitBook을 이용해서 팀 블로그를 운영할 수도 있겠지만 UI 구성적인 측면에서 기술블로그와는 거리가 멀었기 때문에 선택하지 않았다.\n\n\n### GitHub Pages\n\n정적인 페이지를 무료로 호스팅할 수 있고, 마음만 먹으면 자유롭게 커스터마이징 할 수 있는 환경이라는 부분이 매력있게 다가와 GitHub Pages를 선택했다.\n\n## GitHub Pages로 팀 블로그 만들기\n\n이제 본격적으로 GitHub Pages를 이용하여 팀 블로그를 만드는 과정을 차근차근 따라가보자.\n\ngatsby를 이용하여 블로그 배포를 진행했다. 사용한 템플릿은 gatsby-starter-hoodie이며 블로그에 친절하게 사용법이 게시되어있다.\n\n[🐙 gatsby-starter-hoodie](https://github.com/devHudi/gatsby-starter-hoodie)\n[🚀 gatsby-starter-hoodie 사용 방법 보러가기](https://hoodie.gatsbyjs.io/about-hoodie-kr/)\n\n> 필자는 gatsby에 대해 아무것도 모르는 상태로 해당 작업을 진행했습니다. 😵‍💫\n최대한 알기 쉽게 정리하려고 노력했습니다만... 잘못된 부분이 있다면 댓글로 남겨주시면 감사하겠습니다.\n\n### gatsby란?\n\n우선 사용하고자하는 gatsby가 무엇인지부터 알고 진행해보자.\n\n[위키백과](https://en.wikipedia.org/wiki/Gatsby_(JavaScript_framework))에 따르면\n\n**개츠비는 React와 GraphQL을 사용하여 Node.js 위에 구축된 오픈소스 정적 사이트 생성기입니다.**\n\n라고 설명되어있다.\n\n`Node.js 위에 구축된` 해당 문구로부터 로컬 환경에 Node.js가 필요하다는 것을 알 수 있다.\n\n### node 설치하기\n\n```shell\nbrew install node\n```\n\n![](.index_images/dd266184.png)\n\n`node -v` 명령어를 통해 잘 설치되었는지 확인해본다.\n\n### npx 설치하기\n\n리액트를 공부하자는 글이 아니기 때문에 간단히만 알고 넘어가자\n\nnpx는 npm 사용시에 발생하는 발생할 수 있는 여러 문제점을 해결하기 위해 설계되었다고한다.\n진행하는 과정에서 npx를 사용할 것이기 때문에 npx도 설치하고 넘어가자.\n\n```shell\nnpm install npx -g\n```\n\n![](.index_images/ff1c3736.png)\n\n`npx -v` 명령어를 통해 잘 설치되었는지 확인해본다.\n\n### gatsby-cli 설치하기\n\ngatsby 명령어를 사용하기 위해 gatsby-cli를 설치한다.\n\n```shell\nnpm install -g gatsby-cli\n```\n\n![](.index_images/6494ac93.png)\n\n`gatsby -v` 명령어를 통해 잘 설치되었는지 확인해본다.\n\n### Gatsby 사이트 생성\n\n> 여기서부터는 [Hudi의 Gatsby 환경 구성하기](https://hoodie.gatsbyjs.io/quick-start-kr/)를 따라가는 내용입니다.\n\n> 환경은 Pium의 프로젝트 환경에 맞게 진행됩니다.\n\ngatsby를 이용하여 새로운 사이트를 생성한다.\n이때 `gatsby-starter-hoodie`를 참고하여 구성한다.\n\n```node\nnpx gatsby new pium-official.github.io https://github.com/devHudi/gatsby-starter-hoodie\n```\n\n### 프로젝트 시작해보기\n\n``` shell\ncd pium-official.github.io\n\nnpm run start\n```\n\n![](.index_images/19f5a8e2.png)\n\n`localhost:8000`으로 프로젝트가 열리는 모습을 볼 수 있다.\n\n![](.index_images/7810b698.png)\n\n### 블로그 커스텀하기\n\n해당 부분은 원작자의 [🚀 2.빠르게 시작하기](https://hoodie.gatsbyjs.io/quick-start-kr/)를 참고하여 진행하면 된다.\n\n### GitHub Pages로 배포하기\n\n이제 배포할 페이지를 다 만들었다!\nGitHub Pages를 이용해 배포를 진행해보자.\n\n우선 GitHub Repository를 생성한다.\n\n> pium-official Organization에서 `pium-official.github.io` 레포지토리를 생성했다.\n\n![](.index_images/b084df05.png)\n\n```shell\ngit remote add origin https://github.com/pium-official/pium-official.github.io\n```\n\n```node\nnpm run deploy-gh\n```\n\n위 명령어를 수행하면 팀 레포지토리에 gh-pages 브랜치가 생성되고 build된 결과물이 올라온다. 해당 파일을 기준으로 GitHub Pages에서 배포를 진행한다.\n\n![](.index_images/3db58ec3.png)\n\n> GitHub Pages에서 배포 기준으로 잡는 브랜치를 확인 & 변경하고 싶다면 Settings - Pages 에서 다음 항목을 확인하면 된다.\n> ![](.index_images/b9a5c99c.png)\n\n![](.index_images/1877666d.png)\n\nGitHub Actions 탭에서 `pages build and deployment` 작업이 완료된것을 확인하고 https://pium-official.github.io/ 로 접속해보면 페이지가 성공적으로 배포된것을 확인할 수 있다!!\n\n> https:://{팀 레포명}.github.io\n\n![](.index_images/f35d015e.png)\n\n### 글 작성하기\n\n해당 템플릿에 글을 작성하는 방식은 원작자의 [🤔 3. 작성 가이드](https://hoodie.gatsbyjs.io/writing-guide-kr/)를 참고하면 된다.\n\n### GitHub Actions workflow\n\n현재까지 진행한 작업으로는 다음과 같은 흐름으로 배포를 진행할 수 있다.\n\n1. 로컬에서 글을 작성한다.\n2. 글을 작성한 뒤 `npm run deploy-gh` 명령어를 수행해서 배포를 진행한다.\n\n위 방식은 혼자서 작업할 때는 문제가 없으나 여러명이 함께 글을 작성하기에는 많이 번거롭다.\n\n우리는 다음과 같은 방식으로 배포를 하는 방향을 기대하고 있다.\n\n1. 로컬에서 글을 작성한다.\n2. 글을 작성한 뒤 main 브랜치로 push한다.\n3. main 브랜치에 작업내용이 push 되었을 때 빌드 및 배포가 자동적으로 이뤄진다.\n\n위에서 3번 작업내용을 수행하기 위해 GitHub Actions의 workflow 기능을 이용할 수 있다.\n\n### workflow 작성하기\n\n`gatsby-starter-hoodie`에서 기본적으로 제공하고 있는 workflow는 다음과 같이 구성되어있다.\n\n```yml\nname: CI\n\non:\n  pull_request:\n    branches:\n      - main\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v2\n      - uses: actions/setup-node@v2\n        with:\n          node-version: 20.3.1\n\n      - name: Install node packages\n        run: yarn\n        \n      - name: Check lint\n        run: yarn check:lint\n        \n      - name: Check prettier\n        run: yarn check:prettier\n      \n      - name: Build\n        run: yarn build\n```\n\n> 자세한 구문에 대한 설명 및 내용은 [공식문서](https://docs.github.com/ko/actions/using-workflows/workflow-syntax-for-github-actions)를 참고해보면 좋다.\n\n기존에 존재하는 ci.yml 파일은 삭제하고 아래와 같은 deploy.yml을 작성해보자.\n\n> workflow에 대한 yml파일의 경로는 반드시 `.github/workflows` 폴더 내부에 존재해야한다.\n> ![](.index_images/d9fc2f50.png)\n \n\n```yml\nname: Deploy\n\non: # 어떤 작업이 수행될 때 deploy.yml 작업이 수행된다. (트리거)\n  push: # push 작업이 수행될 때\n    branches: # 특정 브랜치를 대상으로\n      - main\n\npermissions: # github action이 수행되는 환경에서 특정 권한을 준다\n  contents: write\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v2\n      - uses: actions/setup-node@v2\n        with:\n          node-version: 20.3.1\n\n      - name: Install node packages\n        run: yarn\n\n      - name: Build\n        run: yarn build\n\n      - name: Deploy 🚀\n        uses: JamesIves/github-pages-deploy-action@v4\n        with:\n          folder: public\n```\n\n> `JamesIves/github-pages-deploy-action@v4` 작업에서 수행하는 내용 중 쓰기권한을 요구하는 작업이 있기 때문에 permissions 설정을 해야한다.\n[관련 이슈 - Failed with exit code 128, Permission Denied](https://github.com/JamesIves/github-pages-deploy-action/issues/1110)\n\n위 deploy.yml 파일을 작성했다면 프로젝트 내부에서 변경사항에 대한 commit을 수행하고 git push를 해본다.\n\n``` shell\ngit branch -m main\n\ngit push origin main\n```\n\n![](.index_images/0491f96f.png)\n\n위 내용을 대략적으로 설명해보자면 다음과 같다.\n\nmain 브랜치에 대한 코드를 build해보고 성공한다면 결과물을 gh-pages 브랜치로 배포한다.\n\n이제 글을 작성하고 main 브랜치로 push하기만 하면 배포까지 자동으로 수행된다.\n로컬에서 `npm run deploy-gh`는 더이상 사용할 필요가 없다.\n\n## 결론\n\n블로그를 생성하고 배포하고 자동화하는 과정까지 차근차근 진행해봤다.\n\n여러버 삽질을 거친 끝에 완성했기 때문에 더 애정이 많이 가는 것 같다. 👍\n\n## Reference\n\nhttps://hoodie.gatsbyjs.io/\nhttps://docs.github.com/ko/actions/using-workflows/workflow-syntax-for-github-actions\nhttps://studium-anywhere.tistory.com/21\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 기획부터 개발까지 하나의 프로그램이 생성되는 모든 프로세스를 경험할 수 있는 시간을 가졌다. 피움팀에서 어떤 방식을 통해 아이디어와 기능을 도출해나갔는지 기록해두고자 한다. 스프린트란? 스프린트는 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간을 의미한다. 여기서는 기획부터 데모수준의 프로…","fields":{"slug":"/sprint-idea/"},"frontmatter":{"date":"July 08, 2023","title":"구글 스프린트 기반 아이디어 도출","tags":["아이디어","기획"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)'가 작성했습니다.\n\n## 서론\n\n기획부터 개발까지 하나의 프로그램이 생성되는 모든 프로세스를 경험할 수 있는 시간을 가졌다.\n\n피움팀에서 어떤 방식을 통해 아이디어와 기능을 도출해나갔는지 기록해두고자 한다.\n\n## 스프린트란?\n\n스프린트는 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간을 의미한다.\n\n여기서는 기획부터 데모수준의 프로그램이 나오는 단계까지를 하나의 스프린트라고 생각해볼 수 있겠다.\n\n피움 팀은 구글 스프린트의 방법론을 차용해서 기능을 도출했다.\n\n### 구글 스프린트\n\n![](.index_images/googlesprint.png)\n\n5일간 결과물을 도출하는 방법론으로 다음과 같은 17단계로 이어진다.\n\n1. 현재 상황에 대한 구성원들의 생각과 문제 상황 공유\n2. 스프린트를 통해 해결하고자 하는 목표 설정\n3. 스프린트 질문 도출\n4. 이해관계자의 구매 여정 Map 작성\n5. 전문가 조언\n6. HMW(어떻게 하면 ~할 수 있을까) 작성 및 선정\n7. 스프린트 기간에 주력하고자 하는 1순위 타깃과 질문 선정\n8. 번갯불 대화 및 솔루션 스케치\n9. 고객 선정을 위한 설문지 작성\n10. 프로토타입 제작을 위한 최종 솔루션 선정\n11. 프로토타입 제작을 위한 스토리보드 만들기\n12. 프로토타입 제작\n13. 프로토타입 완성 및 시연\n14. 고객 인터뷰용 질문 만들기 (인터뷰 담당자)\n15. 타깃 고객 인터뷰 및 학습\n16. 스프린트 이후의 개발 플랜 점검 및 향후 일정 논의\n17. 성찰\n\n### Figma - Figjam\n\n오프라인 환경에서 종이, 캔버스, 포스트잇을 이용해서 각자의 의견을 종합해볼 수도 있지만 시간, 공간적 제약이 있을 때는 Figma를 사용해볼 수도 있다.\n\n디자인 툴인 Figma에는 Figjam이라는 기능을 제공한다.\n\n![](.index_images/figjam.png)\n\nFigjam에서는 포스트잇, 연필그리기, 스티커붙이기, 타이머 등의 기능들을 제공한다.\n\n> 개인적으로 타이머 기능을 적극 활용하는 것이 좋다고 생각했다.\n위 [구글 스프린트](###구글-스프린트)의 `8. 번갯불 대화 및 솔루션 스케치` 항목에서 추구하는 목적이 무엇인지 생각해보면 정해진 시간내로 서로의 의견을 제시하여 회의가 늘어지지 않게 하기 위함임을 알 수 있다.\n정해야할 내용이 많은 만큼 시간이 늘어지는 것만큼은 가장 경계해야한다고 생각한다.\n\n## 서비스 주제\n\n![](.index_images/b95b5dfe.png)\n\n`식물을 잘 키울 수 있도록 도와주는 서비스`라는 주제로 팀이 이뤄졌다.\n\n위 포스터를 확인했을 때 큰 주제로 추상적인 목표들이 즐비해있음을 확인할 수 있다.\n주어진 시간이 짧기 때문에 핵심기능을 추려야할 필요가 있다.\n\n> 💡 모든 과정을 진행할 때 이야기를 듣는 사람들은 형광펜 혹은 스티커 기능을 이용해 중요하다고 생각하는 부분에 색칠을 하며 듣는다. 형광펜과 스티커를 이용한 호응을 이용해 공통 관심사에 집중할 수 있으며 집중력이 분산되는 것도 예방할 수 있다.\n\n> ⏰ 모든 과정에는 제한시간이 존재한다.\n제한시간을 두고 회의가 루즈해지는 것을 막아야만한다!!\n\n### 서비스의 목적과 가치\n\n![](.index_images/959281a8.png)\n\n서비스의 목적과 가치에 대해 구상한다.\n\n이 단계에서는 `서비스가 어떤 기능을 제공함으로서 어떤 문제를 해결한다`를 이야기하며 각자가 추상적인 목표를 어떤 방향으로 구체화하고 있는지 공유한다.\n\n> ⏰ 제한시간 : 3분\n\n### 서비스의 대상\n\n![](.index_images/db53c739.png)\n\n어떤 사용자가 이 서비스를 사용할 지 떠올리고 각자의 생각을 작성한다.\n\n이후 각자가 자신의 생각을 이야기하는 시간을 가진다.\n\n> ⏰ 제한시간 : 3분\n\n\n### 어떻게 하면 ~문제를 해결할 수 있을까?\n\n![](.index_images/1c560fdf.png)\n\n어떻게 하면 ~ 문제를 해결할 수 있을까? 라는 질문들을 작성하고 이야기한다.\n\n이 과정을 통해 해결해야할 문제들을 인지할 수 있다.\n\n이 때 기술적인 질문이 나오지 않도록 경계해야한다.\n해당 과정을 수행하는 이유는 서비스의 목적을 구체화하기 위함이다.\n\n- 어떻게 하면 제 시간에 식물에 물을 줄 수 있을까? (O)\n- 어떻게 하면 무중단 배포를 할 수 있을까? (X)\n\n> ⏰ 제한시간 : 5 ~ 8분\n\n### 워드 클라우드\n\n![](.index_images/07da0c75.png)\n\n위 단계에서 나온 키워드들을 기준으로 단어들을 나열한다.\n중요하게 생각되는 단어들은 크고 굵게 표기한다.\n\n이 과정을 통해 키워드를 간략하게 추릴 수 있다.\n\n> ⏰ 제한시간 : X\n\n### (선택) 모바일 vs 데스크탑\n\n![](.index_images/8f5a28d2.png)\n\n생각하는 서비스가 어떤 환경에서 운영될지 생각해본다.\n\n이 과정을 통해 서비스가 어떻게 그려질지 대략적으로 생각해볼 수 있다.\n\n> ⏰ 제한시간 : 2분\n\n### 장치/요소/기능 브레인스토밍\n\n![](.index_images/2d693ea9.png)\n\n앞서 설정한 문제, 키워드 등을 참고하여 개발하고자 하는 서비스에 있을 것 같은 기능들을 브레인 스토밍 식으로 작성한다.\n\n이 과정을 통해 서비스에 존재할 수 있는 기능들을 파악할 수 있다.\n\n> ⏰ 제한시간 : 5 ~ 8분\n\n### 지도 만들기\n\n![](.index_images/2bb017bc.png)\n\n앞서 정의한 서비스 대상을 참고하여 구체적인 페르소나를 지정한다.\n페르소나를 참고하여 어떤 페이지들이 존재할지 생각해본다.\n\n위(`장치/요소/기능 브레인스토밍`)에서 도출된 기능들을 기반으로 각 페이지에 기능들을 작성한다.\n\n이 과정을 통해 대략적인 서비스 흐름과 구성을 생각해 볼 수 있다.\n\n> ⏰ 제한시간 : X\n\n### 페이지 그려보기\n\n![](.index_images/efe27f26.png)\n\n위 `지도 만들기` 활동에서 도출된 페이지들을 직접 그려보는 시간을 가진다.\n팀원들 각자가 페이지가 어떻게 구성될지 대략적으로 그려본다.\n\n잘 그릴 필요는 없다. 연필로 어떤 버튼이 어디에 위치할지, 어떤 기능이 존재하는지 정도만 알아볼 수 있을정도로 가볍게 스케치해도 좋다.\n\n이 과정을 통해 각자가 생각하는 View를 공유하면서 서비스의 구현 방향성에 대한 싱크를 맞춰갈 수 있다.\n\n> ⏰ 제한시간 : 각 페이지별 5분\n\n### 결정권자 정하기 & 페이지 정하기\n\n![](.index_images/9f853c4e.png)\n\n위 과정에서 작성한 페이지 중 하나의 페이지를 결정하기 위해 결정권자를 정한다.\n\n결정권자는 팀원들의 투표로 정하고 페이지를 결정할 때 만큼은 결정권자의 권한이 가장 높은 수직적인 구조로 진행된다.\n즉, 다시말해 페이지는 결정권자의 선택으로 정해진다.\n\n결정권자를 뽑았다면 각 페이지를 정하는 시간을 가진다.\n\n이 때 결정권자가 아닌 다른 팀원들은 자신의 페이지 혹은 자신이 마음에 드는 페이지에 대해 결정권자를 설득한다.\n\n페이지를 결정 할 때 여러 페이지의 기능을 합칠 수도 있다.\n\n> ⏰ 제한시간 : 각 페이지별 5분 \n> 결정된 페이지들은 명예의전당👑 에 복사하여 올려둔다.\n> ![](.index_images/e4e8a0fb.png)\n\n\n### BDD\n\nBDD(Behavior Driven Development, 행위 주도 개발) 방법론을 차용한 방식으로 given - when - then 절로 해당 페이지에서 일어날 수 있는 모든 이벤트에 대해 정의한다.\n\n이 과정을 통해 구체적인 기능 명세를 할 수 있다.\n\n![](.index_images/faa7372e.png)\n\n해당 방식은 UI 기반의 기능 명세에 치중할 수 있기 때문에 API 설계가 요구된다면 API 명세를 하는것을 추천한다.\n\n> ⏰ 제한시간 : X\n\n## 결론\n\n구글 스프린트를 기반으로 피움 팀이 아이디어를 구체화하는 과정을 정리해봤다.\n\n아이디어 도출 과정에 정답은 없지만 스프린트를 처음 해본 입장에서는 참고하면 좋은 방법이라고 생각되어 기록으로 남겨봤다.\n\n## Reference\n\n[구글스프린트](https://brunch.co.kr/@brunchjwshim/90)\n[테오의 스프린트](https://velog.io/@teo/google-sprint-14)\n[Atlassian Sprint](https://www.atlassian.com/ko/agile/scrum/sprints)\nhttps://www.thesprintbook.com/the-design-sprint"}]}},"pageContext":{}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-pages-search-jsx","path":"/search/","result":{"data":{"allMarkdownRemark":{"nodes":[{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 사건의 발단  3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.  그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다. 당황하지 않고 침착하게 f12를 눌러 개발자도구를 열고 네트워크탭을 확인해보니 API가 이상하게 호출되고있었다. 평소 프론트분들을 굉장…","fields":{"slug":"/restdocs-start/"},"frontmatter":{"date":"August 11, 2023","title":"RestDocs로 API 문서화하기","tags":["문서화","RestDocs","테스트"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)'가 작성했습니다.\n\n## 사건의 발단\n\n![](.index_images/c4fe129c.png)\n\n3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.\n\n![](.index_images/dbb1d706.png)\n\n그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다.\n\n당황하지 않고 침착하게 f12를 눌러 개발자도구를 열고 네트워크탭을 확인해보니 API가 이상하게 호출되고있었다.\n\n평소 프론트분들을 굉장히 신뢰하던 주노는 설마 하는 마음에 Notion을 열어봤다. 아니나다를까 Notion에 API 명세가 이상하게 작성되어있었다.\n\n범인은 바로 이것저것 끄적이다가 되돌리기를 하지 않은 주노...\n\n![](.index_images/03624593.png)\n\n위와 같은 사건을 겪으면서 사람 손으로 작성되는 문서의 신뢰도 문제를 인지했고, API 문서화를 자동화할 수 있는 기술의 필요성을 느꼈다.\n\n## 서론\n\nAPI 문서화 방식에 대해 찾아본 결과 크게 두가지 방법을 알 수 있었다.\n\n### 알아보기\n\n`1. Spring RestDocs`\n\nSpring Rest Docs는 Spring에서 제공하는 문서화 도구다.\n\n- 테스트 작성이 강제된다는 특징이 있다.\n- 테스트를 통해 도출된 결과를 문서로 작성하기 프로덕션 코드에 영향이 없다는 특징이 있다.\n- 아래 설명할 Swagger와 비교했을 때 설정이 약간 번거롭다는 단점이 있다. \n\n`2. Swagger` \n\nSwagger는 API 문서화를 돕는 오픈소스 툴이다.\n\n- 테스트 작성이 필수가 아니라는 특징이 있다.\n- swagger 이용 시 실제 API가 호출된다는 특징이 있다.\n- 테스트 작성을 안하는 대신 프로덕션 코드에 문서ㅘ와 관련된 코드가 작성된다. (DTO, Controller 등)\n\n### Spring RestDocs\n\n피움 팀은 RestDocs를 사용하기로 결정했고 이유는 다음과 같다.\n\n- 현재 피움팀은 각 계층별 테스트를 꼼꼼하게 작성하고있고 인수테스트까지 작성하고 관리하고있으므로 테스트가 강제된다는 점은 큰 단점으로 다가오지 않았다.\n- 코드리뷰가 필수적으로 이뤄지는 현 스프린트 단계에서 프로덕션 코드의 가독성을 해치는 방향이 오히려 큰 단점이 될 수 있다.\n- 성공하는 테스트에 대해서만 문서화가 이뤄지기 때문에 문제상황에서 필요했던 문서의 신뢰성을 충족시킨다.\n- (프론트 쵸파가 RestDocs를 좋아한다 🦌)\n\n> [피움🌱 문서화 도입 관련 discussion](https://github.com/woowacourse-teams/2023-pium/discussions/181)\n\n## 시작하기\n\nRestDocs를 설정하는 과정을 정리하려고한다.\n\n### RestAssured vs MockMvc?\n\nRestDocs를 적용하는 방법은 RestAssured를 기반으로 문서를 생성하는 방법과 MockMvc를 기반으로 문서를 생성하는 방법으로 크게 두가지가 있다.\n\n피움팀은 현재 인수테스트도 작성되어있기 때문에 RestAssured를 사용해도 충분히 문제가 없다.\n\n하지만 여러 계층이 협업하는 인수테스트 환경에 문서화와 관련된 코드가 작성된다면 안그래도 복잡한 인수테스트 코드의 가독성을 해칠 것이라고 우려되었다.\n\n슬라이스 테스트를 수행하여 비교적 코드의 무게가 가벼운 Controller 테스트가 MockMvc로 작성되어있었기 때문에 MockMvc를 기반으로 RestAssured를 적용하기로 결정했다.\n\n### Gradle 설정\n\n> TIP : `asciidoctor`는 adoc 파일을 html 등으로 변환해주는 도구입니다\n\n```gradle\nplugins {\n    ...\n    id \"org.asciidoctor.jvm.convert\" version \"3.3.2\" // asciidoctor 플러그인 추가\n}\n\nconfigurations {\n    asciidoctorExt // asciidoctorExt에 대한 선언\n    ...\n}\n\n\ndependencies {\n    ...\n    asciidoctorExt 'org.springframework.restdocs:spring-restdocs-asciidoctor' // asciidoctorExt에 spring-restdocs-asciidoctor 의존성 추가\n    testImplementation 'org.springframework.restdocs:spring-restdocs-mockmvc' // mockMvc 사용\n}\n\next {\n    snippetsDir = file('build/generated-snippets') // 스니펫이 생성되는 디렉터리 경로를 설정\n}\n\ntest {\n    outputs.dir snippetsDir // 스니펫이 생성되는 디렉터리를 설정\n}\n\nasciidoctor { // Gradle이 asciidoctor Task를 수행하는 설정 (함수 선언)\n    configurations 'asciidoctorExt' // asciidoctor 확장 설정\n    baseDirFollowsSourceFile() // .adoc 파일을 include 하면서 사용하기 위한 설정\n    inputs.dir snippetsDir // 스니펫을 불러올 위치 설정\n    dependsOn test // Gradle의 test Task 이후 asciidoctor를 수행\n}\n\nasciidoctor.doFirst { // asciidoctor Task가 수행될 때 가장 먼저 수행\n    delete file('src/main/resources/static/docs')\n}\n\ntask copyDocument(type: Copy) { // 생성된 html 파일을 옮긴다\n    dependsOn asciidoctor // Gradle의 asciidoctor Task 이후 수행\n    from file(\"${asciidoctor.outputDir}\")\n    into file(\"src/main/resources/static/docs\")\n}\n\nbuild {\n    dependsOn copyDocument // build 이후 html 파일 복사\n}\n\nbootJar {\n    dependsOn asciidoctor // asciidoctor 이후 bootJar 수행\n    from (\"${asciidoctor.outputDir}\") {\n        into 'static/docs'\n    }\n    ...\n}\n```\n\n### 테스트 코드 작성하기\n\n우선 다음과 같은 방식으로 코드를 작성할 수 있다.\n\n```java\n@AutoConfigureRestDocs\n@WebMvcTest(controllers = PetPlantController.class)\nclass PetPlantControllerTest {\n\n    @Autowired\n    private MockMvc mockMvc;\n\n    @MockBean\n    private PetPlantService petPlantService;\n    \n    @Test\n    void 반려_식물_단건_조회_정상_요청시_200을_반환() throws Exception {\n        PetPlantResponse response = RESPONSE.피우미_응답;\n        given(petPlantService.read(anyLong(), any(Member.class)))\n                .willReturn(response);\n    \n        mockMvc.perform(get(\"/pet-plants/{id}\", 1L)\n                        .header(\"Authorization\", \"pium@gmail.com\")\n                        .contentType(MediaType.APPLICATION_JSON)\n                        .characterEncoding(StandardCharsets.UTF_8))\n                .andDo(document(\n                            \"petPlant/findById/\",\n                            Preprocessors.preprocessRequest(Preprocessors.prettyPrint()),\n                            Preprocessors.preprocessResponse(Preprocessors.prettyPrint()),\n                            requestHeaders(\n                                    headerWithName(\"Authorization\").description(\"사용자 인증 정보\")\n                            ),\n                            pathParameters(\n                                    parameterWithName(\"id\").description(\"반려 식물 ID\")\n                            )\n                        )\n                )\n                .andExpect(status().isOk())\n                .andDo(print());\n    }\n}\n```\n\n`andDo(document(...))` 부분이 문서화와 관련된 내용들이다.\n\n`document()` 내부의 파라미터를 하나씩 살펴보자\n\n- `\"petPlant/findById/\"`\n\n스니펫이 생성되는 대상 디렉터리 명이다. \n\n해당 테스트가 완료되면 문서화 대상으로 지정한 값들에 대해 `.adoc` 문서가 생성된다.\n\n생성 흐름과정은 뒤에서 설명한다.\n\n우선 각 파라미터가 어떤 결과물을 도출하는지 확인해보자.\n\n![](.index_images/22e5bb11.png)\n\n- `Preprocessors.preprocessRequest(prettyPrint())`\n\n요청값을 읽기 쉬운 서식으로 지정한다.\n\n![](.index_images/f25529d5.png)\n\n- `Preprocessors.preprocessResponse(prettyPrint())` \n\n응답값을 읽기 쉬운 서식으로 지정한다.\n\n![](.index_images/207cbfe0.png)\n\n> [Preprocessors 관련 공식문서](https://docs.spring.io/spring-restdocs/docs/current/reference/htmlsingle/#customizing-requests-and-responses-preprocessors)\n\n- `requestHeaders(headerWithName(\"Authorization\").description(\"사용자 인증 정보\"))` : RequestHeader에 대한 명세를 한다.\n\n![](.index_images/4282f935.png)\n\n- `queryParameters(parameterWithName(\"name\").description(\"사전 식물 검색 파라미터\"))`\n\n![](.index_images/c9dbf6a8.png)\n\n- `pathParameters(parameterWithName(\"id\").description(\"반려 식물 ID\"))`\n\n![](.index_images/f0d0524b.png)\n\n> `pathParameters`를 사용하기 위해\n> \n> mockMvc.perform(`get`(\"/pet-plants/{id}\", 1L) 에서\n> \n> `RestDocumentationRequestBuilders`의 `get()` 메서드를 사용해야한다는 부분을 신경써야한다.\n> \n> 자세한 내용은 [공식문서 참고](https://docs.spring.io/spring-restdocs/docs/current/api/org/springframework/restdocs/mockmvc/RestDocumentationRequestBuilders.html)\n> \n> ![](.index_images/cc09df18.png)\n> 고마워요 ! 리뷰어 그레이 ! \n\n문서화를 수행하고자 하는 나머지 테스트들에도 동일한 방법으로 작성해준다. \n\n### adoc 스니펫 생성하기\n\n> Snippet : 단편, 부분적, 작은 조각이라는 뜻으로 여기서는 `문서 조각` 정도로 이해하면 된다.\n> \n> 문서 조각을 모아서 하나의 문서를 만들게 된다.\n\n이렇게 작성한 테스트들을 수행해보자.\n\n![](.index_images/35bc712c.png)\n\n그러면 `build/generated-snippets/{파라미터에서 설정한경로}`에 adoc 파일이 생성된 것을 확인 할 수 있다.\n\n![](.index_images/5dd3f00f.png)\n\n```adoc\n// http-request.adoc 파일\n[source,http,options=\"nowrap\"]\n----\nGET /pet-plants/1 HTTP/1.1\nContent-Type: application/json;charset=UTF-8\nAuthorization: pium@gmail.com\nHost: localhost:8080\n\n----\n```\n\n### asciidoc 문서 생성하기\n\n위에서 생성한 adoc 스니펫들을 모아 하나의 API 문서를 만든다.\n\n`src > docs > asciidoc` 디렉터리를 생성하고 `.adoc` 파일을 생성한다.\n\n![](.index_images/850cce57.png)\n\nAPI가 여러개인 경우 각각을 파일로 관리한 뒤 하나의 adoc 파일로 include하여 합칠 수도 있다.\n\n#### index.adoc\n\n다음과 같이 adoc 파일을 작성할 수 있다.\n\n```adoc\n// index.adoc\n= Pium Application API Document\n:doctype: book\n:source-highlighter: highlightjs\n:sectlinks:\n:toc: left\n:toclevels: 3\n\ninclude::dictionaryPlant.adoc[]\ninclude::petPlant.adoc[]\ninclude::reminder.adoc[]\ninclude::history.adoc[]\n```\n\n```adoc\n// petPlants.adoc\n== 반려 식물(PetPlants)\n\n=== 반려 식물 단건 조회\n\n==== Request\n\ninclude::{snippets}/petPlant/findById/http-request.adoc[]\ninclude::{snippets}/petPlant/findById/request-headers.adoc[]\ninclude::{snippets}/petPlant/findById/path-parameters.adoc[]\n\n==== Response\n\ninclude::{snippets}/petPlant/findById/http-response.adoc[]\n...\n```\n\nadoc 파일의 자세한 문법은 [asciidoctor 공식문서 참고](https://docs.asciidoctor.org/asciidoc/latest/syntax-quick-reference/)\n\n### HTML 문서 생성하기\n\n이제 웹 페이지가 읽을 수 있도록 HTML 문서를 생성해보자.\n\nHTML 문서는 `src > docs > asciidoc`에 생성된다.\n\n다음 명령어를 수행해보자.\n\n```shell\n./gradlew asciidoctor\n```\n\n![](.index_images/3b9772e1.png)\n\n그러면 `build > docs > asciidoc` 경로에 문서가 생성된다.\n\n![](.index_images/5daac1d0.png)\n\n### 애플리케이션에서 확인해보기\n\nhttp://localhost:8080/docs/index.html 으로 접속해서 문서를 확인해보자.\n\n우선 gradle build를 수행한다.\n\n```shell\n./gradlew build\n```\n\n![](.index_images/adb0a6ab.png)\n\n이전에 Gradle에서 작성했던 스크립트 내용 중 copyDocument Task가 build가 일어난 뒤 수행되기 때문이다.\n\n```gradle\ntask copyDocument(type: Copy) { // 생성된 html 파일을 옮긴다\n    dependsOn asciidoctor // Gradle의 asciidoctor Task 이후 수행\n    from file(\"${asciidoctor.outputDir}\")\n    into file(\"src/main/resources/static/docs\")\n}\n\nbuild {\n    dependsOn copyDocument // build 이후 html 파일 복사\n}\n```\n\n그러면 `src > main > resources > static > docs` 경로에 HTML 문서가 생성된다.\n\n![](.index_images/6b2555b4.png)\n\n로컬에서 구동되는 애플리케이션은 해당 경로를 참조하기 때문에 파일을 복사해줬다.\n\n이제 어플리케이션을 구동하고 http://localhost:8080/docs/index.html 로 접속하면 다음과 같이 문서를 확인할 수 있다.\n\n![](.index_images/ad2fa30b.png)\n\n## Reference\n\n- https://spring.io/projects/spring-restdocs\n- https://hudi.blog/spring-rest-docs/\n- https://techblog.woowahan.com/2597/\n- https://dallog.github.io/apply-rest-docs/"},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. OAuth란? 현재 개발하고 있는 서비스에서 구글 캘린더에 접근을 한다고 가정을 해봅시다. 현재 접근하는 사용자의 구글 캘린더 정보를 얻고자 한다면 구글 계정으로 로그인을 해야합니다. 진짜 간단한 방법이 있습니다. 사용자로부터 구글 id와 password를 받고 저희가 대신 로그인 해서 해당 사용자의 …","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"date":"August 10, 2023","title":"내가 이해한 OAuth2.0","tags":["OAuth2.0"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[클린](https://github.com/hozzijeong)'가 작성했습니다.\n\n\n## OAuth란?\n\n현재 개발하고 있는 서비스에서 구글 캘린더에 접근을 한다고 가정을 해봅시다. 현재 접근하는 사용자의 구글 캘린더 정보를 얻고자 한다면 구글 계정으로 로그인을 해야합니다. 진짜 간단한 방법이 있습니다. 사용자로부터 구글 id와 password를 받고 저희가 대신 로그인 해서 해당 사용자의 계정 정보를 받아오는 것입니다.\n\n하지만 이 방법은 매우 위험합니다. 계정 정보가 탈취당할 수도 있고, 애초에 **대리 로그인**이라니 신개념 보이스피싱으로 오해받을 수도 있습니다.\n\n제일 괜찮은 방법은 구글 자체에서 로그인 서비스를 대체할 수 있는 방식을 만들어서 제공을 하는 것입니다. 실제로  과거에 AuthSub라는 자체 개발한 방법을 통해 구현을 했지만 이 정형화 되지 않은 방법은 다양한 문제를 야기할 수 있었습니다. 흔히 카카오 로그인, 구글 로그인, 깃헙 로그인 등등 여러가지의 방식이 존재하는데 형식이 통일되어 있지 않다면 이 모든 것들을 각각 구현해서 사용을 해야하는 문제점이 있습니다. \n\n이러한 문제점을 해결하기 위해 나타난 개념이 OAuth입니다. 초기 버전인 1.0은 범위문제, 불확실한 역할, 보안 문제등으로 인해서 많이 사용 되지 않고 OAuth 2.0이 통상적으로 많이 사용 되고 있습니다. \n\n> 💡 **인증과 인가**: 인증은 요청자의 신원을 확인하는 것이고, 인가는 신원이 확인된 어느 사람이 권한이 있는지를 확인하는 것입니다. 개인적으로 생각했을때 인증은 사람의 직업 검증하는 것이고 인가는 그 사람의 직책을 통해 권한을 접근한다고 생각합니다. (직책에 따른 정보 접근 권한이 다르기 때문)\n\n\n## OAuth 2.0\n\nOAuth2.0을 이해하기 위해서는 크게 4가지 용어를 알고 있으면 됩니다. 바로 Resource Owner, Client, Resource Server, Authorization Server입니다. 각각의 역할과 설명은 다음과 같습니다.\n\n![image](https://github.com/pium-official/pium-official.github.io/assets/50974359/c65c8e80-b04a-4b51-b66a-dbdd6d43b543)\n\n- `Resource Owner`**:** 리소스(정보)의 주인. 즉,서비스를 이용하고자 하는 사용자를 의미합니다.\n- `Client`: 리소스(정보)를 가공 혹은 Resource Owner에게 제공하는 주체. OAuth 2.0을 개발하는 어플리케이션(서비스)을 의미한다.\n- `Resource Server`: 리소스(정보)를 갖고 있는 주체. 흔히 카카오, 구글, Github등 사용자 정보를 제공하는 주체를 의미한다.\n- `Authorization Server`: Resource Owner를 인증하고, Client에 인가를 할당하는 역할이다.\n\nOAuth를 가장 많이 도입한 기능 중 하나는 소셜 로그인입니다. 하나의 예시를 들어보겠습니다. 사용자가 Todo앱에 접근하려고 합니다. 사용자의 Todo인지를 확인하기 위해서는 로그인 기능이 필요합니다. 그런데 사용자는 회원가입을 하기 귀찮습니다. 이 과정에서 사용자의 기본 정보 (이메일, 닉네임, 프로필 사진 등)를 갖고 있는 소셜 네트워크가 있다고 생각해 봅시다. Client는 이 소셜 네트워크를 통해서 사용자에게 간단한 회원가입/로그인 기능을 제공할 수 있습니다. 이제 본인이 Todo앱에 회원가입을 하고, 나의 Todo를 카카오 스토리에 공유한다고 상상하고 OAuth의 동작과정에 대해 한번 알아보겠습니다.\n\n> 💡 OAuth에는 크게 4가지 grant(승인 방식)가 있는데, 이번에 다루는 승인 방식은 기본적으로 사용되고 있는 **Authorization Code Grant(권한 부여 승인 코드 방식)** 을 통해 기준으로 설명하겠습니다.\n\n![image](https://github.com/pium-official/pium-official.github.io/assets/50974359/e4f90a4b-6783-4d32-974a-2fdc2c5d3ae3)\n\n- 첫 번째는 로그인 요청입니다. 흔히 우리가 알고있는 “카카오로 로그인하기”를 클릭 했을 때 나오는 설정되는 방식입니다. 이때 Authorization Server에 4가지 파라미터를 동봉해서 보냅니다.\n    - client_id(required): Server에서 발급받은 인증 id입니다.\n    - redirect_uri(optional): Server에 등록할 때 함께 입력한 redirect_uri입니다.\n    - response_type(required): 반드시`code`로 설정해야 합니다.\n    - scope(optional): 제공하는 정보 범위를 설정합니다.\n- Authorization Server에서 Resource Owner에게 아이디와 비밀번호를 요구합니다. 사용자 인증이 된다면, 미리 입력받은 redierct_uri로 이동합니다.\n- 해당 uri로 리다이렉트 되면서 함께 동봉되어 온 Authorization Code를 받고 이 코드를 Access Token으로 교환합니다.\n- 교환한 Access Token을 통해서 Resource Server에서 원하는 데이터를 얻을 수 있습니다. (Todo일정을 카카오 스토리에 공유할 수 있습니다!!)\n\n위와 같은 과정을 통해서 OAuth를 통해서 제 3의 서비스에서 사용자의 정보에 인가를 받아서 가공하거나 직접적으로 제공할 수 있습니다.\n\n사용자로부터 로그인 정보를 받아서 로그인을 하고 사용자의 권한을 부여받은 Access Token을 통해서 Reource Server로부터 데이터를 얻는 것입니다.\n\n---\n\n### OAuth공부를 하면서 들었던 의문점\n\nAccess Token을 통해서 Resource에 있는 데이터를 얻는 것은 알겠는데, 그래서 이게 로그인이랑 어떤 관련이 있는가? 그리고, Client DB에 있는 데이터나 API랑도 관련이 있나?\n\nAuthorization Server를 통해서 넘겨받은 Access Token을 활용하면 소셜 로그인을 구현할 수 있었고, 해당 토큰을 통해서 모든 정보에 접근이 가능하겠구나 생각을 했었습니다. 하지만, 이 Access Token은 Resource Server에 있는 데이터를 얻는데 필요한 Access Token이고 **Client 내부에서 접근하는 DB와 API랑은 관련이 없다는 것입니다.**\n\nClient에서는 넘겨받은 Access Token을 통해서 개별적으로 구축한 member DB에서 해당 유저를 식별하고, 그에 맞는 로그인 기능을 구현해야 합니다.\n\n![image](https://github.com/pium-official/pium-official.github.io/assets/50974359/e6c1a44b-6e6e-4034-bca6-cfe9e2c5d8c0)\n\n로그인 기능을 개별적으로 구현해야 한다는 얘기를 듣고, Client의 역할을 어떻게 분리가 되는지에 대해 의문이 들었습니다. 여기서 Client는 사용자가 이용하는 앱 서비스인데, 사용자와 직접적인 인터렉션을 하는 Client(FE)와 데이터를 제공하는 Sever(BE)로 분리가 됩니다. \n\n그렇다면 OAuth를 이용한 서비스를 구현할 때 Client안에서는 어떤 일이 일어날까요?\n\n1. 사용자 로그인 페이지 제공 (FE)\n2. redirect_uri로 이동시키고, 넘겨받은 Autorization Code를 BE로 넘겨줌 (FE)\n3. FE로부터 넘겨받은 Autorization Code를 Authorization Server에 전달하고, Access Token과 Refresh Token을 받음(BE)\n4. 넘겨 받은 Access Token을 통해 Resource Owner 정보 조회(BE)\n5. DB Table에 해당 유저 확인 후 Client Session이나 Client Token 전달(BE)\n6. 전달 받은 Session이나 Token을 통해서 유저 로그인 유지 (FE)\n7. 사용자가 Client의 서비스를 이용하고자 할 때 Client Session을 통해 인증을 함 (FE)\n8. Client에서 제공하고자 하는 데이터가 Resource Server에서 얻어야 하는 데이터라면, 저장해 놓았던 Access Token을 통해 Resource Server로 부터 데이터를 받아옴. 그리고 Client에서 제공하는 API와 잘 조합해서 데이터 제공(BE)\n9. 사용자가 확인 가능하게 UI제공 (FE)\n\n![image](https://github.com/pium-official/pium-official.github.io/assets/50974359/a668a660-8b62-4fbd-8caf-e3998c570a1c)\n\nClient에서의 역할을 나눠보면 다음과 같습니다.\n\n### FE\n\n- 로그인 페이지 제공\n- redirect_uri를 통해 Authorization Code 전달\n- Resource Server에 맞는 UI 제공\n\n### BE\n\n- 전달받은 Authorization Code를 통해 Access Token 교환\n- Access Token을 통해 Resource Server에 있는 데이터 요청 및 가공\n- Access Token만료 시 Refresh Token으로 Access Token 갱신\n\n---\n\n### 참조\n\n[OAuth의 인증 종류](https://blog.naver.com/mds_datasecurity/222182943542)\n\n[OAuth의 개념과 동작 원리](https://hudi.blog/oauth-2.0/)\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. style-lint, husky를 통한 컨벤션 자동화 하기 프로젝트는 혼자 할 수 도 있지만 팀원들과 함께 진행하는 경우도 있습니다. 피움의 경우에 팀원들과 함께 진행하고 있습니다. 개인적으로 생각했을 때 코드를 작성한다는 것은 그 자체로 하나의 문서를 만드는 것이라고 생각합니다. 그리고 그 문서의 양…","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"date":"August 07, 2023","title":"stylelint와 husky를 통해 컨벤션 통일하기","tags":["stylelint","husky","컨벤션"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[클린](https://github.com/hozzijeong)'가 작성했습니다.\n\n# style-lint, husky를 통한 컨벤션 자동화 하기\n\n프로젝트는 혼자 할 수 도 있지만 팀원들과 함께 진행하는 경우도 있습니다. 피움의 경우에 팀원들과 함께 진행하고 있습니다. 개인적으로 생각했을 때 코드를 작성한다는 것은 그 자체로 하나의 문서를 만드는 것이라고 생각합니다. 그리고 그 문서의 양식을 통일하는 것이 가독성이나 유지 보수를 수월하게 한다고 생각합니다. 그렇기에 각각의 팀바다 코드 컨벤션이 존재하고, 그 컨벤션을 강제하도록 하는 플러그인 (`eslint`, `prettier`)이 존재합니다. \n\n이번에 소개할 기능은 css컨벤션을 맞출 수 있게 도와주는 style-lint와 git 메세지 양식을 지정해주는 husky에 대해 소개해 보려 합니다. \n\n### Stylelint\n\n[링크](https://stylelint.io/)\n\n> A mighty CSS linter that helps you avoid errors and enforce conventions.\n> \n\nstylelint의 소개글 입니다. 간단하게 말해서 css 에러를 피하고 컨벤션을 강요하도록 하는 기능입니다. 설치는 다음과 같습니다. 저희는 styled-component를 사용하기 때문에 해당 요건에 맞는 라이브러리를 설치하겠습니다.\n\n```bash\nnpm install --save-dev stylelint stylelint-config-styled-components\n```\n\n라이브러리 설치가 끝나면 `.stylelintic`이라는 파일에서 원하는 css규칙을 결정할 수 있습니다. \n\n```json\n{\n  \"extends\": [\"stylelint-config-clean-order\", \"stylelint-config-styled-components\"],\n  \"plugins\": [\"stylelint-order\"],\n  \"customSyntax\": \"postcss-styled-syntax\"\n}\n```\n\n피움에서는 `stlyelint-order`라는 플러그인을 설치한 뒤에 해당 규칙에 따라 css 컨벤션을 정했습니다. 실행시키는 방법은 다음과 같습니다.\n\n```json\n\"scripts\": {\n\t\"stylelint\": \"stylelint --ignore-path .gitignore '**/*.(ts|tsx)'\",\n}\n```\n\n위와같이 설정하고 명령어를 입력하게 된다면 css파일을 돌면서 규칙에 맞지 않는 파일을 찾아줍니다. \n\n```bash\nnpm run stylelint\n```\n\n![image](https://github.com/pium-official/pium-official.github.io/assets/50974359/ddb7ccf7-48ac-498f-a01b-199966021c93)\n\n\n하지만 우린 좀 더 편한걸 원합니다. 매번 실행시키고 경고창들을 변경하기 보다 실행시킬때마다 자동으로 수정시켜주는걸 원합니다. 만약 그것을 원한다면 명령어에 `—fix`만을 추가해주면 됩니다.\n\n```json\n\"scripts\": {\n\t\"stylelint\": \"stylelint --ignore-path .gitignore '**/*.(ts|tsx)' --fix\",\n}\n```\n\n\nhttps://github.com/pium-official/pium-official.github.io/assets/50974359/0f9aa05c-a861-4601-a959-58754752294d\n\n\n여기에 더 가서 파일을 저장할 때마다 실행시킬수도 있습니다.\n\nvsc의 `setting.json`에 들어가서 stylelint에 대한 설정을 해주면 됩니다. (vsCode extension을 먼저 설치해야 합니다)\n\n```json\n//...\n\t\"editor.codeActionsOnSave\": {\n\t\t\"source.fixAll.stylelint\": true,\n\t\t\"source.fixAll.eslint\": true,\n\t\t\"source.fixAll.prettier\": true\n\t},\n\t\"stylelint.validate\": [\n\t\t\"typescript\",\n\t\t\"typescriptreact\",\n\t\t\"css\",\n\t\t\"less\",\n\t\t\"postcss\",\n\t\t\"scss\",\n\t\t\"html\",\n\t\t\"javascript\",\n\t\t\"vue-html\",\n\t\t\"vue-postcss\",\n\t\t\"sass\",\n\t\t\"markdown\",\n\t\t\"vue\"\n\t],\n//...\n```\n\ncodeActionOnSave는 저장할때마다 stylelint에 있는 모든 것을 fix한다는 것이고 아래에 있는 stylelint.validate는 해당 옵션을 적용시킬 확장자를 의미합니다. 위와 같이 설정하고 저장한다면 저장을 할 때마다 자동으로 컨벤션 적용이 되는 것을 볼 수 있습니다.\n\n### Husky\n\n[링크](https://typicode.github.io/husky/)\n\n> Husky improves your commits and more 🐶 *woof!*\n> \n> \n> You can use it to **lint your commit messages**, **run tests**, **lint code**, etc... when you commit or push. Husky supports **[all Git hooks](https://git-scm.com/docs/githooks)**.\n> \n\n이번에는 `git`에 대한 컨벤션을 맞추기 위해 `husky`라는 라이브러리를 통해 `git hook`을 실행하보려 합니다. `git`에는 `commit`, `push` 등의 명령어가 있지만, 각각의 명령어가 실행되기 전에 전반적으로 실행시키고 싶은 명령어가 있거나, 컨벤션을 맞추거나, `commit` 메세지 형식을 강제할 수 있습니다. 이러한 일련의 과정이 필요한 이유는 팀 컨벤션에 맞춰진 **신뢰성 있는 코드**를 원격 저장소에 저장하기 위해서 입니다. 예시로 앞서 얘기한 `stylelint`가 적용이 되지 않은 코드가 원격 저장소에 올라가게 된다면, 컨벤션이 맞춰지지 않은것이고 공통된 문서로써의 역할을 잃을 수 있습니다. 이에 각각의 명령어기 실행되기 전에 단계를 `pre`라는 접두사를 붙여서 `pre-commit` 또는 `pre-push`단계라고 하는데, 이 각각의 단계에서 `test`를 실행하거나 build`를` 실행할 수도 있습니다.\n\n다음 명령어를 통해 설치할 수 있습니다.\n\n```bash\nnpm install husky --save-dev\nnpx husky install // 이 명령어를 통해서 git hook을 사용할 수 있도록 함.\n```\n\n`hooks`를 만들기 위해서는 다음과 같이 입력하면 됩니다. `husky add <file> [cmd]` → 이와 같은 형식으로 `husky` 폴더를 생성할 수 있습니다. (단, 해당 명령어를 입력하기 전에 `husky install`을 꼭 해야합니다!)\n\n```bash\nnpx husky add .husky/pre-commit \"npm test\"\n```\n\n위와같이 설정하고 나면 .husky폴더에 다음과 같은 파일이 생성됩니다.\n\n![image](https://github.com/pium-official/pium-official.github.io/assets/50974359/82a9d271-4748-4871-be3a-220ca36c2de0)\n\n이제 모든 커밋을 하기 전에 `npm test`명령어가 실행되게 됩니다. 이제, `test`를 통과하지 못한다면 `commit`은 일어나지 않습니다. 이를 통해 원격 저장소에 올라가는 코드들의 신뢰성은 급상승 하게 됩니다! \n\n하지만 하나의 단점이 있습니다. 피움 프로젝트를 모노레포 형식으로 진행하고 있는데, `husky`가 `githook`이기 때문에 `npm`에 의존성이 없는 `backend` 폴더에서도 커밋이 발생하기 전에 해당 `npm test`가 실행된다는 점입니다. 이는 상당히 좋지 못합니다… `pre-commit` 단계에서 명령어를 `cd frontend && npm test`와 같이 변경해서 실행해봐도 백엔드에서 커밋을 할때마다 해당 명령어가 실행된다는게 상당히 비효율적인 방식이라고 생각했습니다. 따라서 피움 프론트엔드 CI는 husky로 진행하지 않기로 했습니다. 단, `commit` 메세지 형태는 강제할 수 있었습니다. `git` 컨벤션인 부분이라 FE/BE 모두 공통으로 해당되는 내용이었기에 해당 부분만 추가하는 방식으로 `husky`를 사용하기로 했습니다.\n\n```bash\n#!/usr/bin/env sh\n. \"$(dirname -- \"$0\")/_/husky.sh\"\n\n# 커밋 컨벤션\n# 0. 검사 예외 조건 (자동 생성, 최초 커밋)\n# - Merge branch*, Merge pull request*, initial*\n# 1. 접두사의 글자는 소문자\n# 2. 맨 마지막 글자 '.' 마침표 금지\n# 3. 커밋 접두사 (규칙: '접두사' + '콜론' + ' ')\n# - feat: 새로운 기능 추가\n# - fix: 버그 수정\n# - docs: 문서의 수정\n# - style: (코드의 수정 없이) 스타일(style)만 변경(들여쓰기 같은 포맷이나 세미콜론을 빼먹은 경우)\n# - refactor: 코드를 리펙토링\n# - test: Test 관련한 코드의 추가, 수정\n# - chore: (코드의 수정 없이) 설정을 변경\n# - design: css 코드 수정\n# - build: build 및 관련 설정 변경\n\nCOMMIT_MSG_FILE=$1\nFIRST_LINE=`head -n1 ${COMMIT_MSG_FILE}`\nRES=\"needCheck\" # needCheck, auto, initial, lintError*, clear\n\nif [[ $FIRST_LINE =~ ^(Merge branch) ]] ||\n   [[ $FIRST_LINE =~ ^(Merge pull request) ]]; then\n  RES=\"auto\"\nfi\n\nif [[ $FIRST_LINE =~ ^(initial) ]]; then\n  RES=\"initial\"\nfi\n\nif [ $RES == \"needCheck\" ]; then\n  if [[ $FIRST_LINE =~ (\\.)$ ]]; then\n    RES=\"lintError1\"\n  fi\n\n  if [[ ! $FIRST_LINE =~ ^(feat: ) ]] &&\n     [[ ! $FIRST_LINE =~ ^(fix: ) ]] &&\n     [[ ! $FIRST_LINE =~ ^(docs: ) ]] &&\n     [[ ! $FIRST_LINE =~ ^(style: ) ]] &&\n     [[ ! $FIRST_LINE =~ ^(refactor: ) ]] &&\n     [[ ! $FIRST_LINE =~ ^(test: ) ]] &&\n     [[ ! $FIRST_LINE =~ ^(design: ) ]] &&\n     [[ ! $FIRST_LINE =~ ^(build: ) ]] &&\n     [[ ! $FIRST_LINE =~ ^(chore: ) ]]; then\n    RES=\"lintError2\"\n  fi\n\n  if [[ ! $RES =~ ^(lintError) ]]; then\n    RES=\"clear\"\n  fi\nfi\n\nif [[ $RES =~ ^(lintError) ]]; then\n  if [[ $RES == \"lintError1\" ]]; then\n    echo \"CommitLint#1: 문장 마지막의 ('.') 마침표를 제거해주세요.\"\n  fi\n  if [[ $RES == \"lintError2\" ]]; then\n    echo \"CommitLint#2: 접두사, 콜론, 띄어쓰기 형태를 확인하세요. (feat: , fix: , docs: , style: , refactor: , test: , chore: )\"\n  fi\n  exit 1\nelif [[ $RES == \"auto\" ]]; then\n  echo \"Automatically generated commit message from git\"\nelif [[ $RES == \"initial\" ]]; then\n  echo \"Initial commit\"\nelif [[ $RES == \"clear\" ]]; then\n  echo \"Pass commit lint!\"\nfi\n\nexit 0\n```\n\n프로젝트 `git` 컨벤션에 맞춰서 메세지 작성을 강제 했고, 이를 통해 `commit` 메세지 통일을 할 수 있었습니다!\n\n---\n\n### 맺는말\n프로젝트는 팀원들이 하나의 문서를 만드는 것이라고 생각을 합니다. 그리고 통일된 문서를 만들때 가장 필요한 것은 규칙(컨벤션)이고 그 규칙을 자동으로 강제할 수 있고, 코드의 신뢰성을 높여줄 수 있는 라이브러리에 대해서 한번 알아봤습니다.\n스타일 컨벤션을 맞추기 위해서는 `stylelint`를 `git hook`을 통해 `git`컨벤션을 맞추고 싶은 경우에는 `husky`를 통해서 컨벤션을 통일 할 수 있었습니다.\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. CRA없에 webpack으로 react 세팅하기 피움 서비스 환경을 만들기로 하면서, FE의 개발 스펙은 React + TypeScript로 설정하였습니다. React는 당연 현존 최강 라이브러리이고, 여기에 JavaScript의 동적 타입을 컴파일 단계에서 잡아주는 TypeScript까지 더해서 안정…","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"date":"August 06, 2023","title":"webpack으로만 React 설정하기 (without CRA)","tags":["React","Webpack"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[클린](https://github.com/hozzijeong)'가 작성했습니다.\n\n\n# CRA없에 webpack으로 react 세팅하기\n\n피움 서비스 환경을 만들기로 하면서, FE의 개발 스펙은 React + TypeScript로 설정하였습니다. React는 당연 현존 최강 라이브러리이고, 여기에 JavaScript의 동적 타입을 컴파일 단계에서 잡아주는 TypeScript까지 더해서 안정적인 서비스를 개발하려고 합니다. \n\n평소같았으면 `CRA`를 통해 손쉽게 리액트 설치를 하고 개발을 시작했을 텐데, CRA의 단점이 이미 정교하게 세팅된 babel과 webpack 설정을 따라 개발을 해야 한다는 것이고 그에 따른 트레이드 오프가 상당히 많이 발생할 수 있다는 점입니다. (하나의 예시로 CRA를 통해서는 절대경로 지정 하기가 어렵습니다.) 또한, 이왕에 내 서비스 개발하는거 남이 차려준 밥상 보다 내가 직접 한번 해보겠다는 생각으로 webpack으로만 react세팅을 시도해 보려고합니다 (가장 큰 원인은 요구사항이 CRA없이 webpack으로 react 설치하는 거였습니다 ㅎ)\n\n### package.json 설치\n\n우선 가장 처음 해야할 단계입니다. react, typescript, webpack 등 우리가 설치할 의존성 관리와 기타 프로젝트 정보를 저장해 줄 `package.json`을 설치 해줍니다.\n\n```bash\nnpm init // 또는\nyarn init -y\n```\n\n### 환경 구축에 필요한 패키지 설치\n\n```bash\nnpm install react react-dom // react 설치\nnpm install -D typescript @types/react @types/react-dom // typescript 설치\nnpm install tsc-init // tsconfig 설치\n\nnpm install -D webpack webpack-cli // 웹팩 라이브러리와 명령어를 통해 웹팩을 이용할 수 있는 라이브러리 설치\nnpm install -D html-webpack-plugin webpack-dev-server ts-loader  // 각각 번들 후 html파일을 만들어주는 플러그인, 개발할 때 사용할 웹 서버, typescript파일을 javascript로 변환하는 webpack loader 설치\n```\n\n위에 파일들을 설치하고 나면 이제부터 본격적인 세팅을 합니다.\n\n### webpack.config.js 파일 설정\n\n웹팩 파일 설정입니다. \n\n```jsx\n// webpack.config.js\nconst { resolve } = require('path'); // path 설정에 도움을 줍니다.\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');\nconst ReactRefreshTypeScript = require('react-refresh-typescript');\n\nconst isDevelopment = process.env.NODE_ENV === 'development';\n\nmodule.exports = {\n  entry: resolve(__dirname, 'src', 'index.tsx'), \n  output: {\n    path: resolve(__dirname, 'dist'), // 번들 파일이 저장될 디렉토리\n    filename: 'bundle.js', // 파일 이름\n    assetModuleFilename: 'assets/[name][ext]', // 에셋의 파일 이름\n    clean: true, // 빌드 이전 결과물 정리 옵션\n    publicPath: '/', // 빌드된 파일 앞에 붙일 경로\n  },\n  resolve: {\n    extensions: ['.ts', '.tsx', '...'], // 파일 확장자. TS및 JSX확자자ㅡㄹ 설정했습니다.\n    alias: { // 절대경로 설정\n      types: resolve(__dirname, 'src', 'types'),\n      pages: resolve(__dirname, 'src', 'pages'),\n      components: resolve(__dirname, 'src', 'components'),\n      hooks: resolve(__dirname, 'src', 'hooks'),\n      apis: resolve(__dirname, 'src', 'apis'),\n      utils: resolve(__dirname, 'src', 'utils'),\n      assets: resolve(__dirname, 'src', 'assets'),\n      constants: resolve(__dirname, 'src', 'constants'),\n      contexts: resolve(__dirname, 'src', 'contexts'),\n    },\n  },\n  module: { // 로더 및 규칙 설정\n    rules: [\n      {\n        test: /\\.tsx?$/i, // ts-loader를 사용했습니다. babel-loader를 사용하지 않은 이유는 IE까지 폴리필 지원을 하지 않아도 되기 때문입니ㅏㄷ.\n        exclude: /node_modules/,\n        loader: 'ts-loader',\n        options: {\n          getCustomTransformers: () => ({\n            before: isDevelopment ? [ReactRefreshTypeScript()] : [],\n          }),\n          transpileOnly: isDevelopment,\n        },\n      },\n      {\n        test: /\\.(png|jpg|jpeg|svg|woff|woff2|eot|ttf|otf)$/i,\n        type: 'asset/resource',\n      },\n    ],\n  },\n  plugins: [\n    new HtmlWebpackPlugin({ //빌드된 다음에 템플릿을 지정해줍니다.\n      template: resolve(__dirname, 'public', 'index.html'),\n    }),\n    ...(isDevelopment ? [new ReactRefreshWebpackPlugin()] : []),\n  ],\n  devServer: {\n    open: true,\n    port: 8282, // 기본은 3000번이지만 커스텀 기념으로 바꿨씁니다.\n    static: {\n      directory: resolve(__dirname, 'public'),\n    },\n    historyApiFallback: true,\n  },\n};\n```\n\n`entry`: 웹팩의 진입점을 의미. react에서는 src의 index.js에서 모든게 시작됩니다.\n\n`output`: 번들된 파일의 출력 경로를 정의합니다.\n\n`resolve`: 모듈 해석 옵션을 설정합니다.\n\n`module`: 로더의 규칙을 설정합니다.\n\n- 보통은 .css,.scss파일 확장을 위해 `style-loader`를 사용하기도 하지만, 피움에서는 CSS-in-JS를 선택했기 때문에 해당 확장자들이 존재하지 않아서 따로 설정하지 않았습니다.\n\n`plugins`:  웹팩 플러그인을 설정합니다. 플러그인은 빌드 과정을 확장하거나 수정하는데 사용됩니다.\n\n`devServer`: 개발 서버 옵션(localhost)을 설정합니다. \n\n> `ReactRefreshWebpackPlugin`은 리액트에서 저장을 파일 저장을 할 때마다 상태 초기화를 막아주는 역할을 하는 플러그인 입니다. CRA에서는 기본적으로 제공되어 있는 기능이지만, custom기능에는 존재하지 않기에 추가해 줬습니다.\n\n### tsconfig파일 설정\n\ntsconfig파일은 typescript의 버전과 모듈 등 컴파일 과정에서 어떤 버전으로 실행할 것인지 등을 설정하는 파일입니다.\n\n```json\n{\n  \"compilerOptions\": { // 컴파일러 옵션 설정\n    \"target\": \"ES2016\", // 컴파일 하는 JS 버전을 ES2016으로 설정\n    \"module\": \"CommonJS\", // 컴파일된 모듈 시스템 설정\n    \"jsx\": \"react-jsx\", // JSX문법을 어떻게 컴파일 할지 설정\n\n    \"strict\": true, // 엄격한 타입 체크\n    \"exactOptionalPropertyTypes\": true, // 선택적 프로퍼티 타입을 체크함\n    \"skipLibCheck\": true, // 라이브러리 파일의 타입 체크를 건너뜀\n    \"esModuleInterop\": true, // CJS 및 ES 모듈을 함께 사용할 때 옵션을 설정 ES6 모듈 사양을 준수하여 CJS사용 가능하게 함. (즉 import 가능)\n\n    \"baseUrl\": \"src\", // 루트가 되는 url\n    \"paths\": { // 절대 경로\n      \"types/*\": [\"types/*\"],\n      \"pages/*\": [\"pages/*\"],\n      \"components/*\": [\"components/*\"],\n      \"contexts/*\": [\"contexts/*\"],\n      \"hooks/*\": [\"hooks/*\"],\n      \"utils/*\": [\"utils/*\"],\n      \"assets/*\": [\"assets/*\"],\n      \"constants/*\": [\"constants/*\"]\n    },\n\n    \"types\": [\"cypress\"] // 타입 정의 파일 지정\n  },\n  \"include\": [\"src/**/*\", \"cypress/**/*\"] // 컴파일할 소스 코드 파일 정의\n}\n```\n\n피움에서는 IE를 제외한 모든 브라우저를 타겟으로 설정하고 있기 때문에 최대한 낮은 버전의 `JavaScript`를 타겟으로 설정했습니다. ES2016을 설정하고 처음 코드를 작성하다가 `import`가 제대로 이루어지지 않는 것을 보고 문제를 찾다가 `esModuleInterop`옵션을 true로 설정해 줘야지 CJS에서도 import가 가능하다는 것을 알게 되었습니다. \n\n또한, 상대 경로가 아닌 절대경로 사용을 선택했는데, 이는 복잡한 파일 구조를 보기 쉽게 알아보기 위해 설정했습니다.\n\n> `esModuleInterop`설정은 target으로 하는 옵션이 node16이거나 nodenext인 경우에는 true로 되어있지만, 그게 아닌 경우에는 false이므로, import 구문을 사용하고 싶다면 옵션을 true로 하는것이 좋습니다.\n\n### package.json 설정\n\n이제 설정한 웹팩과 tsconfig를 확인해 보기 위해서는 실행 스크립트를 알아야 합니다. 보통 자주 사용하는 명령어로는 `start`와 `build`가 있습니다. 그리고 나머지 명령어는 스토리북이나 cypress에 대한 명령어들입니다.\n```json\n{ //package.json\n//...\n\t\"name\": \"pium-frontend\",\n  \"version\": \"1.0.0\",\n  \"description\": \"피움 프론트엔드\",\n  \"main\": \"src/index.tsx\",\n  \"scripts\": {\n    \"test\": \"echo test is not prepared\",\n    \"start\": \"webpack-dev-server --mode=development\",\n    \"build\": \"NODE_ENV=production webpack\",\n    \"storybook\": \"storybook dev -p 6006\",\n    \"build-storybook\": \"storybook build -o ./dist/storybook\",\n    \"cypress\": \"cypress open\"\n  },\n//...\n}\n```\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 인수테스트를 작성하면서 다음과 같은 문제가 발생했다. RestAssured를 사용하고 있다. 각 테스트별로 (DB)데이터가 격리된 테스트를 수행하고 싶다. 이에 다음과 같은 시행착오를 거쳤다. 최종적으로 작성된 코드를 보고싶다면 최종코드를 확인해주세요. 시행착오 JPA를 사용하고 있는 현 시점에서…","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"date":"August 03, 2023","title":"인수테스트 데이터 초기화하기","tags":["인수테스트","RestDocs","테스트"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)'가 작성했습니다.\n\n## 서론\n\n인수테스트를 작성하면서 다음과 같은 문제가 발생했다.\n\n- RestAssured를 사용하고 있다.\n- 각 테스트별로 (DB)데이터가 격리된 테스트를 수행하고 싶다.\n\n이에 다음과 같은 시행착오를 거쳤다.\n\n> 최종적으로 작성된 코드를 보고싶다면 최종코드를 확인해주세요.\n\n## 시행착오\n\n\n```java\n@Transactional\n@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)\nclass DictionaryPlantApiTest {\n  ...\n}\n```\n\nJPA를 사용하고 있는 현 시점에서`@Transactional`을 이용해서 하나의 테스트(트랜잭션)이 끝날 때 데이터가 롤백되는 현상을 기대했다.\n\n```java\n@Test\nvoid 사전_식물_상세정보_조회_시_사전_식물_정보_반환() {\n\n    // dictionaryPlantRepository.save() 에 대한 Fixture\n    DictionaryPlant REQUEST = dictionaryPlantSupport.builder().build();\n\n    DictionaryPlantResponse RESPONSE = RestAssured\n            .given().log().all()\n            .when()\n            .get(\"/dictionary-plants/{id}\", REQUEST.getId())\n            .then()\n            .log().all()\n            .statusCode(HttpStatus.OK.value())\n            .extract().as(DictionaryPlantResponse.class);\n    );\n    \n    ...\n}\n```\n\n![](.index_images/807f392f.png)\n\n하지만 테스트를 수행할 때 JPARepository로 save한 값을 RestAssured를 이용해 조회하면 데이터가 반영되지 않는 문제가 발생했다.\n\n### 문제 인식\n\n[Stack Overflow](https://stackoverflow.com/questions/41763417/api-test-transactional-rollback)의 다음 글을 읽어본 뒤 다음과 같은 지식을 얻었다.\n\n> @Transactional only works within the same thread, and as such the rollback provided by Spring will only work on the objects that were persisted on the thread where the transaction was started.\nYour rest-assured test will perform an integration test and will hit your Spring context on another thread. So although your rest-assured test would be able to see the objects persisted in your test setup, Spring will never be able to cleanup resources persisted in your rest-assured test automatically.\nThe only way to tackle this is to delete the entities yourself in your test (Using an Junit Rule, or cleaning up any state in your test setup).\n\n요약하면 다음과 같다.\n\n> 트랜잭션은 동일한 스레드 내에서 동작한다.\nSpring에서 제공하는 롤백은 트랜잭션이 시작된 스레드 내에서 생긴 객체에 대해서만 동작한다.\nRestAssured는 별도의 스레드를 통해 Spring 컨텍스트를 이용한다.\n이 때문에 RestAssured는 전역적으로 설정된 데이터 (Data.sql과 같은 설정으로 생긴 데이터)에는 접근할 수 있으나 Transaction과 같이 별도의 스레드에서만 제공되는 값에 대해서는 접근할 수 없다.\n... (해결방법 후략)\n\n위와 같이 별도의 RestAssured의 요청이 스레드로 동작하기 때문에 하나의 트랜잭션에서 별개로 저장한 값에 접근할 수 없다는 결론이 나왔다.\n\n> 자세한 내용은 [하마드의 트러블슈팅 글](https://pium-official.github.io/transactional-not-in-restassured/)을 참고해주세요~\n\n## 해결방법\n\n이 문제에 대해서 다양한 해결방법이 존재하고 각각의 장단점을 비교한 뒤 최종적으로 어떤 방식을 선택할지 고민해보자.\n\n### 1️⃣ DirtiesContext 사용하기\n\n매 테스트마다 Context를 새롭게 띄워서 데이터를 매번 초기화하는 방법을 생각해볼 수 있다.\n\n#### 장점\n\n컨텍스트를 다시 로드하면서 테스트간 격리 환경을 명확하게 구분할 수 있다.\n\n#### 단점\n\n- 매 테스트마다 컨텍스트를 다시 로드하기 때문에 속도가 상대적으로 느리다.\n- @Nested 내부에 정의되어있는 테스트에 대해 DirtiesContext가 적용되지 않는 문제가 있다.\n  [Spring @Nested 관련 공식 문서](https://docs.spring.io/spring-framework/reference/testing/testcontext-framework/support-classes.html#testcontext-junit-jupiter-nested-test-configuration)\n  @Nested 내부에 정의된 테스트에 DirtiesContext를 전파하기 위해 아래 설정을 추가해줘야한다.\n\n```java\n// 클래스레벨에 다음 어노테이션을 추가해주거나\n@NestedTestConfiguration(value = NestedTestConfiguration.EnclosingConfiguration.OVERRIDE)\n```\n\n혹은 properteis 설정을 변경해주는 방식도 존재한다.\n\n```properties\n# properties 파일에 다음 설정을 추가해주어 전역적으로 @Nested 기본 전략을 설정할 수 있다.\nspring.test.enclosing.configuration=OVERRIDE\n```\n> 참고 문서 : [Changing the default enclosing configuration inheritance mode](https://docs.spring.io/spring-framework/reference/testing/annotations/integration-junit-jupiter.html#integration-testing-annotations-nestedtestconfiguration)\n\n### 2️⃣ @SQL 사용하기\n\n@SQL 어노테이션을 사용하여 매 테스트 실행 전 SQL 스크립트를 실행하여 테이블을 다시 만들 수 있다.\n\n```java\n@Sql(\"classpath:init.sql\")\n@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)\nclass DictionaryPlantApiTest {\n  ...\n}\n```\n\n#### 장점\n\n- 여러 스크립트를 수행할 수 있다.\n- 스키마 초기화 후 테이터도 함께 넣을 수 있다.\n\n#### 단점\n\n- 테스트에 사용하는 DB가 변경되었을 때 해당 벤더사의 Dialect에 맞게 SQL문을 고쳐줘야한다.\n- 쿼리를 텍스트로 관리하다보니 컴파일타임에 오류를 잡기 어렵다.\n- 테이블 연관관계가 존재하는 경우 쿼리문 작성 순서에 신경을 많이 써야한다.\n\n### 3️⃣ InitializingBean 사용하기\n\n`InitializingBean`을 이용하여 스프링 Bean이 초기화, 소멸 될 때 행위를 추가할 수 있다.\n\n```java\n// InitializingBean의 생김새\npublic interface InitializingBean {\n\tvoid afterPropertiesSet() throws Exception;\n}\n```\n\n이를 이용해 @Test 어노테이션으로 Bean이 등록될 때 마다 DB을 초기화하는 상황을 기대할 수 있다.\n\n**Entity Manager를 이용해 DB 초기화하기**\n\nJPA를 사용하는 입장으로 SQL문을 작성하기 보다는 EntityManager를 이용해보는것이 정적인 쿼리 관리에 들이는 소요가 적을 것이라고 생각된다.\n\n이에 EntityManager를 이용하여 DB를 초기화하는 방법을 알아보자.\n\n> 아래부터는 https://ttl-blog.tistory.com/1407 를 참고하여 진행된 글입니다.\n\n#### table 이름 조회하기\n\n```java\n@Component\n@Profile(\"test\")\npublic class DatabaseCleaner implements InitializingBean {\n\n\t// 테이블 이름들을 저장할 List\n    private final List<String> tables = new ArrayList<>();\n\n\t// 엔티티 매니저를 선언한다\n    @PersistenceContext\n    private EntityManager entityManager;\n\n    @SuppressWarnings(\"unchecked\")\n    @PostConstruct\n    public void findDatabaseTableNames() {\n        List<Object[]> tableInfos = entityManager.createNativeQuery(\"SHOW TABLES\").getResultList();\n        for (Object[] tableInfo : tableInfos) {\n            String tableName = (String) tableInfo[0];\n            tableNames.add(tableName);\n        }\n    }\n}\n```\n\nEntityManager를 이용하여 모든 테이블의 이름을 가져온다.\n\n#### 테이블 초기화하기 & 실행하기\n\n```java\n@Component\n@Profile(\"test\")\npublic class DatabaseCleaner implements InitializingBean {\n\n\t// 테이블 이름들을 저장할 List\n    private final List<String> tables = new ArrayList<>();\n\n\t// 엔티티 매니저를 선언한다\n    @PersistenceContext\n    private EntityManager entityManager;\n\n\t// 테이블 이름을 조회한다\n    @SuppressWarnings(\"unchecked\")\n    @PostConstruct\n    public void findDatabaseTableNames() {\n        ...\n    }\n    \n    // 테이블을 초기화한다\n    private void truncate() {\n        entityManager.createNativeQuery(String.format(\"SET FOREIGN_KEY_CHECKS %d\", 0)).executeUpdate();\n        for (String tableName : tableNames) {\n            entityManager.createNativeQuery(String.format(\"TRUNCATE TABLE %s\", tableName)).executeUpdate();\n        }\n        entityManager.createNativeQuery(String.format(\"SET FOREIGN_KEY_CHECKS %d\", 1)).executeUpdate();\n    }\n\n    @Override\n    public void afterPropertiesSet() throws Exception {\n        findDatabaseTableNames();\n    }\n\n    @Transactional\n    public void clear() {\n        entityManager.clear();\n        truncate();\n    }\n}\n```\ntruncate를 수행하여 모든 테이블의 데이터를 초기화하고 실행한다.\n\n결과적으로 봤을 때 다음과 같은 흐름으로 데이터베이스 초기화가 수행된다.\n\n- Bean이 생성된 이후 Table 이름을 찾는다.\n- 영속성 컨텍스트의 1차 캐시를 비우고 테이블을 초기화한다.\n\n#### 테스트코드에 적용하기\n\n인수테스트를 `AcceptanceTest`로 분리하고 상속받는 구조로 변경했다.\n\n```java\n@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)\npublic class AcceptanceTest {\n\n    @LocalServerPort\n    int port;\n\n    @Autowired\n    private DatabaseCleaner databaseCleaner;\n\n    @BeforeEach\n    void setUp() {\n        RestAssured.port = port;\n        databaseCleaner.clear();\n    }\n}\n```\n\n작업한 내용을 적용하면 위와 같이 코드를 작성할 수 있다.\n\n#### 장점\n\n- 테스트 코드가 쿼리에 의존적이지 않다.\n- 설정을 분리하여 관리할 수 있다.\n\n#### 단점\n\n- JPA에 종속적인 설정이기 때문에 JPA를 사용하지 않거나 ORM을 제외하는 상황을 고려한다면 해당 방식의 도입을 생각해볼 필요가 있다.\n- AcceptenceTest 이외에 다른 통합테스트에서 사용하려면 중복된 코드를 작성해야한다.\n- Bean 생성 주기에 대한 설정이기 때문에 해당 클래스를 프로덕션에 남용할 수 있는 가능성이 존재한다.\n    - 테스트 코드지만 프로덕션에도 적용될 수 있는 설정이 그닥 마음에 들진 않는다.\n\n### 4️⃣ JUnit5 Extension 사용하기\n\n현재 코드는 AcceptenceTest를 사용하는 코드에 대해서만 DB 초기화를 진행하고있다.\n\nRestAssured가 별도의 스레드에서 동작하기 때문에 위와같이 구성했지만 별도의 통합 테스트에서도 DB 초기화 설정이 필요할 수 있다.\n\n@BeforeEach 내부에 clear를 선언하지 않고도 간단한 설정만으로 DB 초기화 로직을 적용하도록 개선해보자.\n\n이를 위해 JUnit5의 Extension을 사용하여 해당 설정을 리팩터링해볼 것이다.\n\n#### JUnit5 Extension이란?\n\nJunit5에서 제공하는 테스트의 생명주기에 대해 각각의 환경에 대해 확장할 수 있도록 제공하는 인터페이스다.\n\n다음과 같은 생성주기에 대한 확장을 제공한다.\n\n\n- BeforeAllCallback - @BeforeAll 실행 전에 실행된다.\n- BeforeEachCallback - @BeforeEach 실행 전에 실행된다.\n- BeforeTestExecutionCallback - 각 테스트가 실행되기 직전에 실행된다.\n- AfterTestExecutionCallback : 각 테스트가 종료된 후 실행된다.\n- AfterEachCallback : @AfterEach 실행 이후에 실행된다.\n- AfterAllCallback : @AfterAll 실행 이후에 실행된다.\n\n\n> Referenced By https://ttl-blog.tistory.com/1407\n\n#### BeforeEachCallback 이용하기\n\n현재 `@BeforeEach`에서 DatabaseCleaner가 수행되고 있으므로 `@BeforeEach` 이전에 실행될 수 있도록 `BeforeEachCallback`을 이용해보자.\n\nExtension을 이용하기 위해 기존에 DatabaseCleaner에 붙어있던 `implements InitializingBean`은 제거해줬다.\n\n```java\n@Component\npublic class DatabaseCleaner {\n\n    private final List<String> tableNames = new ArrayList<>();\n\n    @PersistenceContext\n    private EntityManager entityManager;\n\n\t// 바뀐부분 : 의존성 주입이후 초기화 수행 시 Table을 조회한다.\n    @PostConstruct\n    @SuppressWarnings(\"unchecked\")\n    private void findDatabaseTableNames() {\n        List<Object[]> tableInfos = entityManager.createNativeQuery(\"SHOW TABLES\").getResultList();\n        for (Object[] tableInfo : tableInfos) {\n            String tableName = (String) tableInfo[0];\n            tableNames.add(tableName);\n        }\n    }\n\n    private void truncate() {\n        entityManager.createNativeQuery(String.format(\"SET FOREIGN_KEY_CHECKS %d\", 0)).executeUpdate();\n        for (String tableName : tableNames) {\n            entityManager.createNativeQuery(String.format(\"TRUNCATE TABLE %s\", tableName)).executeUpdate();\n        }\n        entityManager.createNativeQuery(String.format(\"SET FOREIGN_KEY_CHECKS %d\", 1)).executeUpdate();\n    }\n\n    @Transactional\n    public void clear() {\n        entityManager.clear();\n        truncate();\n    }\n}\n```\n\n이후 `DatabaseClearExtension` 클래스를 다음과 같이 생성해준다.\n\n```java\npublic class DatabaseClearExtension implements BeforeEachCallback {\n\n    @Override\n    public void beforeEach(ExtensionContext context) throws Exception {\n        DatabaseCleaner databaseCleaner = getDataCleaner(context);\n        databaseCleaner.clear();\n    }\n\n    private DatabaseCleaner getDataCleaner(ExtensionContext extensionContext) {\n        return SpringExtension.getApplicationContext(extensionContext)\n                .getBean(DatabaseCleaner.class);\n    }\n}\n```\n\n#### 간결해진 테스트코드\n\n```java\n@ExtendWith(DatabaseClearExtension.class)\n@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)\npublic class AcceptanceTest {\n\n    @LocalServerPort\n    int port;\n\n    @BeforeEach\n    void setUp() {\n        RestAssured.port = port;\n    }\n}\n```\n\n이제 `@ExtendWith(DatabaseClearExtension.class)` 어노테이션만 붙여주면 테스트별로 DB를 초기화할 수 있다.\n\n각 테스트별로 truncate 문도 잘 수행되는 것을 확인할 수 있다.\n![](.index_images/086045e1.png)\n\n## 🚀 정리\n\n다양한 방법을 시도해보면서 결론적으로 BeforeEachCallback을 사용하는 방식까지 적용해봤다.\n깔끔하게 정리된 테스트를 보니 기분이 좋다. 👍\n\n### 최종 코드\n\n![](.index_images/21f5d279.png)\n\n패키지 구조는 위와 같이 구성되었고 각각의 코드는 다음과 같다.\n\n```java\n// DatabaseCleaner.java\n@Component\npublic class DatabaseCleaner {\n\n    private final List<String> tableNames = new ArrayList<>();\n\n    @PersistenceContext\n    private EntityManager entityManager;\n\n    @SuppressWarnings(\"unchecked\")\n    @PostConstruct\n    private void findDatabaseTableNames() {\n        List<Object[]> tableInfos = entityManager.createNativeQuery(\"SHOW TABLES\").getResultList();\n        for (Object[] tableInfo : tableInfos) {\n            String tableName = (String) tableInfo[0];\n            tableNames.add(tableName);\n        }\n    }\n\n    private void truncate() {\n        entityManager.createNativeQuery(String.format(\"SET FOREIGN_KEY_CHECKS %d\", 0)).executeUpdate();\n        for (String tableName : tableNames) {\n            entityManager.createNativeQuery(String.format(\"TRUNCATE TABLE %s\", tableName)).executeUpdate();\n        }\n        entityManager.createNativeQuery(String.format(\"SET FOREIGN_KEY_CHECKS %d\", 1)).executeUpdate();\n    }\n\n    @Transactional\n    public void clear() {\n        entityManager.clear();\n        truncate();\n    }\n}\n\n// DatabaseClearExtension.java\npublic class DatabaseClearExtension implements BeforeEachCallback {\n\n    @Override\n    public void beforeEach(ExtensionContext context) throws Exception {\n        DatabaseCleaner databaseCleaner = getDataCleaner(context);\n        databaseCleaner.clear();\n    }\n\n    private DatabaseCleaner getDataCleaner(ExtensionContext extensionContext) {\n        return SpringExtension.getApplicationContext(extensionContext)\n                .getBean(DatabaseCleaner.class);\n    }\n}\n\n// AcceptanceTest.java\n@ExtendWith(DatabaseClearExtension.class)\n@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)\npublic class AcceptanceTest {\n\n    @LocalServerPort\n    int port;\n\n    @BeforeEach\n    void setUp() {\n        RestAssured.port = port;\n    }\n}\n\n\n// DictionaryPlantApiTest.java\n\nclass DictionaryPlantApiTest extends AcceptanceTest {\n\t...\n}\n```\n\n## Reference\n\nhttps://ttl-blog.tistory.com/1407\nhttps://mangkyu.tistory.com/264\nhttps://stackoverflow.com/questions/41763417/api-test-transactional-rollback\nhttps://stackoverflow.com/questions/62142428/dirtiescontext-does-not-work-with-nested-tests\nhttps://unluckyjung.github.io/testcode/2021/05/08/Independent-Test-Mehod/\nhttps://www.baeldung.com/junit-5-extensions"},{"excerpt":"이 글은 우테코 피움팀 크루 '하마드'가 작성했습니다. 개요 우아한테크코스 5기 피움 서비스의 인수 테스트를 작성하던 도중, 실제 포트에 애플리케이션을 구동시켜 테스트를 하는 \n환경에서 테스트를 할 때, 테스트 메소드에서 분명히 해당 리소스를 저장했는데도 RestAssured의 GET 요청이 수행되지 않는 경우가 있었다. 이 이유를 파악하고 해결 과정을 …","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"date":"July 31, 2023","title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)","tags":["Transaction","SpringbootTest"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[하마드](https://github.com/rawfishthelgh)'가 작성했습니다.\n\n## 개요\n우아한테크코스 5기 피움 서비스의 인수 테스트를 작성하던 도중, 실제 포트에 애플리케이션을 구동시켜 테스트를 하는 `@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)`\n환경에서 테스트를 할 때, 테스트 메소드에서 분명히 해당 리소스를 저장했는데도 RestAssured의 GET 요청이 수행되지 않는 경우가 있었다. 이 이유를 파악하고 해결 과정을 정리한다\n## 상황\n\n![img.png](.index_images/img.png)\n\n당시 다음과 같은 인수 테스트 환경에서 테스트를 수행하고 있었다. 각 테스트 메소드가 끝난 후 트랜잭션을 롤백시켜 격리를 보장하기 위해 클래스 레벨에 `@Transactional` 어노테이션을 선언했었다.\n\n![img_1.png](.index_images/img_1.png)\n\nAcceptanceTest 클래스를 상속받아 사전 식물의 조회를 테스트하는 인수 테스트를 작성했다.\n37번째 줄의 `DictionaryPlant REQUEST = dictionaryPlantSupport.builder().build();` 는\n![img_2.png](.index_images/img_2.png)\n다음과 같은 형태로 repository에 테스트용 엔티티 객체를 save하는 과정을 간편하게 하기 위해 작성된 DictionarySupport 클래스와 코드이다. 즉 37번 라인을 사용하면 임의의 객체 정보를 dB에 저장하는 insert 작업이 일어난다.\n\n즉, 현재 테스트 메소드는 repository에 사전 식물 객체를 저장하고, 이를 RestAssured를 활용하여 실제 서버에서 요청을 보내 저장된 사전 식물이 조회되는지를 확인하는 과정이다.\n\n![img_3.png](.index_images/img_3.png)\n\n그런데, 200 OK를 기대했던 테스트의 결과가 404 not found가 응답되고 사전 식물이 존재하지 않는다는 예외 메세지가 뜨는 것을 확인하게 되었다.\n\n뭘까? insert 쿼리가 날아가지 않은 걸까? 로그를 확인해 보았다.\n![img_4.png](.index_images/img_4.png)\n그러나, 로그에는 정확히 우리가 DictionarySupport에서 지정한 저장 메소드의 Insert 쿼리가 날아가는 것을 보고 있었다. 심지어 value 값도 모두 정확히 들어갔다.\n![img_5.png](.index_images/img_5.png)\nselect 쿼리가 잘못된게 아닌가? 확인해봤지만 예상한대로 나갔다.\n여기까지 봐서는 이해가 안 간다. insert를 하고 select를 했는데 조회가 안 되니 말이다.\n## RandomPort 환경에서의 스레드와 트랜잭션\n이를 이해하기 위해서는 RandomPort 환경에서의 요청이 어떤 스레드를 갖는지를 알아야 한다. 이 내용은 스프링 공식 문서를 들여다볼 필요가 있다.\n> If your test is @Transactional, it rolls back the transaction at the end of each test method by default. However, as using this arrangement with either RANDOM_PORT or DEFINED_PORT implicitly provides a real servlet environment, the HTTP client and server run in separate threads and, thus, in separate transactions. Any transaction initiated on the server does not roll back in this case.\n\n> 테스트에 @Transactional이 붙어 있으면 롤백을 보장할 수 있다. 단, RANDOM_PORT 나 DEFINED_PORT 환경에서 테스트를 수행하면, 실제 서블릿 환경에서 테스트를 진행한다. 이 때 http 클라이언트(테스트)와 서버는 서로 다른 스레드를 갖는다. 즉 별개의 트랜잭션이 수행되는 것이다. 따라서 서버 쪽에서의 트랜잭션은 롤백되지 않는다.\n\n쉽게 설명하자면, 랜덤 포트 환경에서 테스트를 수행하는 순간, localhost 포트 어딘가에 내장 서버를 띄운다. 그리고 그 서버에서 요청을 보내도록 하는 것이 RestAssured 이다. 따라서 RestAssured에서 보내는 요청은, 내가 해당 테스트 메소드에서 실행하는 스레드와 별개의 스레드를 갖는다. 따라서 트랜잭션도 각자 별개로 갖는다.\n\n자, 아까 우리가 AcceptanceTest의 클래스 레벨에서 `@Transactional`을 선언했음을 기억할 것이다. 클래스 레벨에 이 어노테이션을 선언하면, 자동적으로 해당 클래스와 그를 상속한 메소드 레벨에 모두 트랜잭션이 걸린다.\n![img_6.png](.index_images/img_6.png)\n따라서, 현재 테스트 메소드의 트랜잭션 범위는 다음 화살표와 같이 테스트가 끝날 때 까지 유지된다.\n\n우리는 여기서 트랜잭션의 개념에 대해 다시 짚을 필요가 있다.\n\"트랜잭션이 끝나지 않았다\"는 의미는 무엇인가?\n내가 수행한 insert, update, delete 문이 커밋, 혹은 롤백되지 않았다는 뜻이다.\n\n커밋되지 않았다는 뜻은 무엇인가?\n데이터베이스의 갱신이 이뤄졌어도, 다른 스레드에서 확인할 수 없다는 뜻이다.\n왜? 트랜잭션은 각자 격리되어 서로의 트랜잭션이 끝나기 전 까지는 연산 과정을 볼 수 없기 때문이다.(트랜잭션의 Isolation(격리성) 특징을 기억하자)\n\n따라서, 현재 트랜잭션이 끝나기도 전에, 즉 반영되기도 전에 RestAssured를 통해 띄운 별개의 서버 스레드에서 GET 요청이 들어가니 해당 데이터를 확인할 수 없는 것이다.\n정확히 말하면 트랜잭션이 커밋되지 않았을 때 까지의 데이터는, 다른 스레드 입장에서 그냥 없는 데이터다. 없는걸 조회하니 당연히 값이 안 나온다.\n\n![img_7.png](.index_images/img_7.png)\n그래서 `@Transactional` 어노테이션을 제거하고 테스트를 수행했더니, 다음과 같이 통과하는 것을 볼 수 있다.\n![img_8.png](.index_images/img_8.png)\n이해를 쉽게 하기 위해 바뀐 트랜잭션의 범위를 화살표로 표현하면, DictionaryPlant를 저장하는 과정에서 트랜잭션이 끝나고 커밋이 되어 db에 영속화가 완료된다.\n따라서 이후 랜덤 포트의 스레드에서도 해당 데이터를 조회할 수 있다.\n\n\n## 트랜잭션의 격리 이해하기\n\n![img_9.png](.index_images/img_9.png)\n![img_10.png](.index_images/img_10.png)\n해당 동작에 대해 조금 더 설명하기 위해 별개의 스레드에 h2 database 콘솔을 띄워 확인해 보겠다. 위의 두 콘솔 화면은 세션 id가 다른 별개의 스레드를 갖는다. 편의상 위를 스레드A, 아래를 B라 하겠다\n\n![img_11.png](.index_images/img_11.png)\n스레드 A에서 트랜잭션을 시작하기위해 Autocommit을 False로 변경한 후, 두 명의 member 데이터를 insert 했다.\n![img_12.png](.index_images/img_12.png)\n이 때 A에서 select 문을 실행하면 데이터가 들어가 있는 것을 확인할 수 있다.\n![img_13.png](.index_images/img_13.png)\n그러나, B에서 동일한 select문을 실행하면 데이터를 확인할 수 없다.\n왜냐? 스레드 A의 트랜잭션은 끝나지 않았기 때문에 A에서 보이는 데이터는 \"임시 반영\"된 데이터일 뿐, \"영속화\"되지 않았기 때문이다.\n![img_14.png](.index_images/img_14.png)\n만약 위와 같이 스레드 A에서 커밋을 하고 나면\n![img_15.png](.index_images/img_15.png)\n이제는 스레드 B에서도 동일한 데이터를 확인할 수 있다.\n## 결론\n결국 메소드 레벨에 `@Transactional` 어노테이션이 붙은 탓에 save 메소드를 성공적으로 수행해도, 트랜잭션이 끝나지 않아(정확히 말하면 커밋되지 않아) 랜덤 포트 서버의 스레드에서 확인할 수 없는 것이다.\n따라서 랜덤 포트 환경의 격리성을 보장하고자 할 때는 `@Transactional` 어노테이션을 사용하기 보다는, truncate를 하는 sql 스크립트를 사용하는 방법을 고려하는게 더 적절하다고 생각한다.\n\n\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. 사건의 발단 이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국  파일의 크기를 보니 무려 16m…","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"date":"July 28, 2023","title":"bundle-analyze를 통한 bundle 크기 분석","tags":["bundle","최적화"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[클린](https://github.com/hozzijeong)'가 작성했습니다.\n\n## 사건의 발단\n\n이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국 `bundle.js` 파일의 크기를 보니 무려 16m나 되었던 것입니다.\n\n![image](https://github.com/pium-official/pium-official.github.io/assets/50974359/72ec258f-77e0-41aa-8bcd-c4c3d3b0410e)\n\n왜 이렇게 크기가 크지? 라는 생각을 하며 크게 2가지의 경우를 생찾아봤습니다. 하지만 다음과 같은 이유로 원인이 아님을 알았습니다.\n\n1. minify가 되지 않았다 → webpack 4 이상을 사용하면서 자동으로 `production` 일때는 자동으로 설정\n2. css 파일 크기가 너무 큼 → `styled-component`를 사용하기 때문에 .css 가 없음.\n\n따라서 `bundle.js`의 성능을 확인해 볼 필요가 있었고 검색하던 도중 [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)라는 라이브러리를 알게되었습니다.\n\n## Webpack Bundle Analyzer\n\nwebpack을 통해 build한 bundle의 성능을 측정하는 라이브러리로 모든 번들에 대한 트리를 시각화 해서 보여주는 이점을 갖고 있습니다. 사용법은 매우 간단합니다. 우선 설치를 해줍니다.\n\n```jsx\n# NPM\nnpm install --save-dev webpack-bundle-analyzer\n# Yarn\nyarn add -D webpack-bundle-analyzer\n```\n\n설치를 한 뒤 `webpack.config.js` 파일 내부에서 플러그인을 사용해 줍니다.\n\n```jsx\nconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\n\nmodule.exports = {\n  plugins: [\n    new BundleAnalyzerPlugin()\n  ]\n}\n```\n\n플러그인 안에 옵션을 설정할 수 있는데, [여기](https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin)에서 옵션에 대한 정보를 확인할 수 있습니다.\n\n위에 플러그인 옵션에서 `generateStatsFile` 을 `true` 로 설정한 다음에 `package.json`에 `scripts` 에다음 명령어를 통해 실행할 수 있습니다.\n\n```jsx\nanalyze: webpack-bundle-analyzer bundle/output/path/stats.json\n```\n\n![image](https://github.com/pium-official/pium-official.github.io/assets/50974359/6bc524c4-4866-4ebe-9daa-95035e0c0dd5)\n\n실행한 뒤에 bundle을 분석해 봤더니 react-icons에서 15.3m나 차지하고 있었습니다. 드디어 문제의 원흉을 찾아냈습니다. 그렇다면 react-icons를 대체할 수 있는 방법이 있을까요?\n\n### Icons\n\n[여기](https://icones.js.org/collection/all?s=material-symbols:cancel)에 가시면 다양한 아이콘들을 찾아볼 수 있습니다. 원하는 아이콘을 선택한 다음에 SVG, Component 등으로 코드를 반환해 줍니다. 이를 통해서 react-icons를 제거하고 icons를 사용해서 아이콘을 대체할 수 있었습니다.\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 현재 피움팀 서버는  요청으로 이뤄져있다.\n는 WWW 상에서 정보를 주고 받는 프로토콜인데, 누군가 네트워크에서 신호를 가로채면 내용이 노출되는 문제가 발생할 수 있다.\n이를 해결해주는 프로토콜이 바로 이다. 는 정보를 암호화하는 SSL을 이용한 프로토콜이다. …","fields":{"slug":"/apply-https/"},"frontmatter":{"date":"July 28, 2023","title":"내 서버에 HTTPS 설정하기","tags":["HTTPS"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)', '[그레이](https://github.com/kim0914)', '[조이](https://github.com/yeonkkk)', '[하마드](https://github.com/rawfishthelgh)'가 작성했습니다.\n\n\n## 서론\n\n현재 피움팀 서버는 `HTTP` 요청으로 이뤄져있다.\n`HTTP`는 WWW 상에서 정보를 주고 받는 프로토콜인데, 누군가 네트워크에서 신호를 가로채면 내용이 노출되는 문제가 발생할 수 있다.\n이를 해결해주는 프로토콜이 바로 `HTTPS`이다.\n\n`HTTPS`는 정보를 암호화하는 SSL을 이용한 프로토콜이다. \n현재는 TLS 방식도 사용되는데 여기에서 **핵심은 보안 문제를 해결하기 위해 암호화**를 한다는 것이다.\n\n대칭키와 공개키, 인증서와 같은 방식을 사용해 HTTPS를 적용할 수 있다.\n이번 글에서는 `Certbots`을 이용해 `HTTPS`를 nginx에 쉽게 설치하고 적용하는 방법을 다뤄본다.\n\nHTTP, HTTPS에 대한 자세한 내용은 별도의 글에서 다룰 예정이다.\n\n`Let's Encrypt`에서는 인증서를 무료로 발급해주고 있고 `Certbots`과 함께 사용하기를 권장하기 때문에 `Certbots`을 사용하기로 결정했다.  \n\n이 내용은 아래 이미지에서 확인할 수 있다.  \n![img.png](img.png)\n\n\n\n## Certbot 설치\n\n서버에 HTTPS 설정을 해보자\n[Certbot 공식문서](https://certbot.eff.org/)\n\n> 공식문서의 가이드를 따라 작성된 문서입니다.\n> https://certbot.eff.org/instructions\n\n![](.index_images/a8ec6c59.png)\n\n```shell\n# certbot을 설치하기 위한 snap을 설치한다.\nsudo apt update\nsudo apt install snapd\n\n# 이미 설치되어있는 certbot을 제거한다.\nsudo apt-get remove certbot\n\n# certbot을 설치한다.\nsudo snap install --classic certbot\n\n# certbot이 잘 설치되어있는지 확인한다.\nsudo ln -s /snap/bin/certbot /usr/bin/certbot\n\n# certbot을 nginx에 연결하기\nsudo certbot --nginx\n```\n## HTTPS 설정\n\n![](.index_images/5498d43a.png)\n\n```shell\n# certbot이 SSL 인증서를 자동 갱신하는 cron을 등록한다\nsudo certbot renew --dry-run\n```\n\n## NGINX 설정 확인\n\nNGINX 설정에 다음과 같이 certbot이 HTTPS 설정을 추가한 것을 확인할 수 있다.\n\n![](.index_images/3d08df23.png)\n\n## Reference\n\nhttps://certbot.eff.org/instructions\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 본 설명 글은 다음과 같은 환경에서 진행됩니다. 배포서버 : Ubuntu 22.04.2 LTS DB서버 : Ubuntu 22.04.2 LTS 배포서버와 DB서버는 동일한 VPC를 사용하고 있습니다. DB : MySQL 8.0.33 Application : Spr…","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"date":"July 28, 2023","title":"Table Drop 못하게 막아버리기","tags":["DB","MySQL"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)', '[그레이](https://github.com/kim0914)', '[조이](https://github.com/yeonkkk)', '[하마드](https://github.com/rawfishthelgh)'가 작성했습니다.\n\n\n## 서론\n\n본 설명 글은 다음과 같은 환경에서 진행됩니다.\n> - 배포서버 : Ubuntu 22.04.2 LTS\n> - DB서버 : Ubuntu 22.04.2 LTS\n> - 배포서버와 DB서버는 동일한 VPC를 사용하고 있습니다.\n> - DB : MySQL 8.0.33\n> - Application : SpringBoot 3.1.1\n\n개발 과정에서 실수로 Application 단에서 DB 혹은 테이블을 Drop 해버리는 상황이 있을 수 있다.\n\n테이블의 수정이 제한된 유저를 생성하여 해당 유저를 Application에서 사용하도록 구성해보자. \n\n> 도움을 주신 G선생님께 감사의 인사 올리며 시작하겠습니다.\n> \n> ![](.index_images/c34a6c3a.png)\n\n## 유저 생성하기\n\n> 이후 진행할 작업에서 권한 부여를 위해 root 권한이 필요합니다.\n\n우선 root 권한을 가진 계정으로 MySQL에 로그인 한다.\n\n```shell\n# MySQL에 로그인\nsudo mysql -u root -p\n```\n\nApplication에서 사용할 유저를 생성한다.\n\n```sql\nCREATE USER 'pium'@'localhost' IDENTIFIED BY 'password';\n```\n\n> 만약 외부에서 접근해야하는 유저의 경우 다음 명령어를 참고하세요\n> \n> ```sql\n> # 외부 모든 IP에 대한 pium 이라는 유저 생성 \n> CREATE USER 'pium'@'%' IDENTIFIED BY 'password';\n> \n> # 특정 인스턴스에서만 접속가능한 pium 이라는 유저 생성 \n> CREATE USER 'pium'@'접속할 인스턴스의 private ip' IDENTIFIED BY 'password';\n> ```\n\n## 권한 부여하기\n\nMySQL에서 설정할 수 있는 권한은 아래와 같다.\n\n| 권한                | 내용                     |\n|-------------------|------------------------|\n| CREATE, ALTER, DROP | 테이블 생성, 변경, 삭제  |\n| SELECT, INSERT, UPDATE, DELETE | 테이블의 레코드 조회, 입력, 수정, 삭제 |\n| RELOAD| 권한 부여된 내용을 리로드 |\n| SHUTDOWN| 서버 종료 작업 실행 |\n| ALL| 모든 권한 허용 |\n| USAGE| 권한 없이 계정만 생성 |\n\n우리는 `INSERT`, `UPDATE`, `SELECT`, `DELETE`만 사용하면 되기 떄문에, 새로 생성한 유저에게 해당 권한만 부여한다.\n\n```sql\nGRANT SELECT, INSERT, UPDATE, DELETE ON pium_db.* TO 'pium'@'localhost';\n```\n\n설정한 권한을 `flush` 명령어를 이용해 적용한다.\n\n```sql\nFLUSH PRIVILEGES;\n```\n\n## 확인하기\n\n![](.index_images/bd8e631c.png)\n\n실제로 생성된 유저로 접속하여 Drop Table 명령어를 수행했을 때 권한 부족으로 수행되지 않음을 확인할 수 있다.\n\n## Application properties 적용\n\nApplication의 설정파일에 생성한 유저의 정보를 작성한다.\n\n![](.index_images/54161808.png)\n\n이를 통해 Applicaiton에서는 Table의 생성, 수정, 삭제에 대한 조작을 할 수 없게 되었다.\n\n만약 테이블의 생성, 수정, 삭제에 대한 작업이 필요할 경우 DBA 혹은 DB 담당자에게 요청하는 프로세스를 거쳐야만 한다.\n\n## Reference\n\n- Chat GTP 4\n- 피움 백엔드 팀의 집단지성\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 현재 피움팀의 젠킨스에서 빌드 트리거로 을 사용하고있다.  해당 설정은 Github에서 유발되는 모든 WebHook에 대해 빌드 트리거가 동작하는 설정이다.  빌드 스크립트에서 위처럼 triggers 설정을 별도로 지정할 수 있지만 현재 프로젝트 구조상 더 세분화된 설정이 필요한 상태다.  현재 …","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"date":"July 25, 2023","title":"PR 라벨로 젠킨스 빌드유발을 구분하기","tags":["젠킨스","CI"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)'가 작성했습니다.\n\n## 서론\n\n현재 피움팀의 젠킨스에서 빌드 트리거로 `GitHub hook trigger for GITScm polling`을 사용하고있다.\n\n![](.index_images/bc288fb6.png)\n\n해당 설정은 Github에서 유발되는 모든 WebHook에 대해 빌드 트리거가 동작하는 설정이다.\n\n![](.index_images/c0a90061.png)\n\n빌드 스크립트에서 위처럼 triggers 설정을 별도로 지정할 수 있지만 현재 프로젝트 구조상 더 세분화된 설정이 필요한 상태다.\n\n![](.index_images/b47bf110.png)\n\n현재 레포지토리 하나에 프론트, 백엔드 코드가 같이 관리되고있다.\nPR이 Merge 되었을 때 각 트랙별로 코드가 빌드 및 배포될 수 있도록 구성해야한다.\n\n## 어떻게 할까?\n\n현재 하나의 레포지토리에서 두개의 코드가 관리되고 있기 떄문에 단순히 develop 브랜치의 변경감지로는 어느 트랙의 작업내용인지 구분하기가 어렵다.\n\n![](.index_images/88fd7187.png)\n\n현재 피움은 라벨을 이용하여 트랙별 작업구분을 하고 있다.\n\n이를 이용하여 라벨별로 빌드, 배포를 진행할 수 있도록 구성해보자.\n\n## Generic Webhook Trigger 설치\n\n![](.index_images/82e40c68.png)\n\nGeneric Webhook Trigger는 젠킨스에서 제공하는 플러그인으로 HTTP 요청을 수신하여 JSON, XML 형태의 데이터를 추출하여 트리거를 지정할 수 있는 플러그인이다.\n\nGeneric Webhook Trigger를 사용하여 빌드 유발 상황을 구분해보자.\n\n![](.index_images/4ff8e063.png)\n\n플러그인을 설치했다면 파이프라인의 Build Triggers 설정에서 다음과 같은 탭을 확인 할 수 있다.\n\n![](.index_images/7b51b24a.png)\n\n해당 설정을 클릭해보면 다음과 같은 설명을 확인할 수 있다.\n\n`http://JENKINS_URL/generic-webhook-trigger/invoke` 로 오는 요청에 대해 트리거가 수행된다는 말이 적혀져있다.\n\n위 설명에 맞춰 GitHub에서 WebHook 설정을 변경해주자.\n\n> 위에서 설명한 탭에 대해서는 아직 저장하지않고 깃허브로 넘어와서 진행합니다.\n>\n> 젠킨스 설정은 아래에서 설명하는 `Github WebHook 설정`이후 이어서 진행합니다.\n\n## Github WebHook 설정\n\n![](.index_images/eebe67d7.png)\n\n`프로젝트 레포지토리` -> `Settings` -> `Webhooks 탭`에 들어와서 웹훅을 새로 만들어보자.\n\n![](.index_images/19691acb.png)\n\nPayload URL을 위에서 확인한 `Generic Webhook Trigger`의 설정에 맞게 작성한다.\n\n그리고 트리거가 동작하는 이벤트에 대해서 `Send me everything` 옵션을 체크한다.\n\n![](.index_images/5e2c402b.png)\n\nAdd webhook을 한 뒤 다시 등록한 웹 훅을 클릭하여 `Recent Deliveries` 탭을 확인해본다.\n\n![](.index_images/bb813e21.png)\n\n내용을 보면 요청을 보낼 때 Payload에 다양한 정보들이 담겨있는 것을 확인할 수 있다.\n\n### (이해하기) JSONPath 살펴보기\n\n> 해당 과정은 원리를 이해하기 위한 과정으로 수행하지 않아도 무관합니다.\n\n![](.index_images/4ff6a8c1.png)\n![](.index_images/f6916224.png)\n\nPR과 연관된 요청이 발생했을 때는 Payload에 pull_request에 대한 정보가 추가된다.\n\n![](.index_images/c301431e.png)\n\nhttps://jsonpath.com 에 접속하여 해당 Payload를 붙여넣어 확인해본다.\n\nJSONPath로 표현했을 때 `$.pull_request.merged`를 확인하면 해당 요청이 PR이 merge된 요청인지 확인할 수 있다.\n\n![](.index_images/0d6d400d.png)\n\n`$.pull_request.base.ref`는 해당 PR의 base 브랜치를 의미한다.\n\n예를들어 feature -> develop 형태라면 develop이 나온다\n\n![](.index_images/47afaad7.png)\n\n`$.pull_request.labels..name`는 해당 PR의 라벨들의 이름을 의미한다.\n\n## Generic Webhook Trigger 설정\n\n> ![](.index_images/5b94c679.png)\n파이프라인 설정 구성에 들어와서 작업을 이어나갑니다.\n\n![](.index_images/f9141614.png)\n\n기존에 설정해둔 `GitHub hook trigger for GITScm polling` 설정을 해제한다.\n\n![](.index_images/40676eae.png)\n\n그리고 Generic WebHook Trigger 를 활성화한다.\n\n### Post content parameters 설정\n\n`Post content parameters`의 추가 버튼을 눌러 파라미터를 추가한다.\n\n![](.index_images/f66fbb52.png)\n\n`$.pull_request.merged`를 등록하여 Merge 되었는지 여부를 가져온다.\n\n![](.index_images/2f09a4a8.png)\n\n`$.pull_request.base.ref`를 등록하여 base 브랜치를 가져온다.\n\n원하는 값은 develop 브랜치가 될 것이다.\n\n![](.index_images/d7a4b4fc.png)\n\n`$.pull_request.labels..name`를 등록하여 라벨들의 이름을 가져온다.\n\n원하는 값은 등록된 라벨들 중에 `백엔드`를 포함하는 값이 존재하는 상황이 될 것이다.\n\n### Optional filter 설정\n\n아래로 내리다보면 Optional filter 탭을 볼 수 있다.\n\n![](.index_images/3f3d0f71.png)\n\nExpression에 다음과 같은 정규표현식을 작성했다.\n\n`(?=.*true)(?=.*develop)(?=.*백엔드).*`\n\n또한 Text 부분에는 위에서 파라미터로 선언한 값들을 사용했다.\n\n위 표현식으로 다음과 같은 효과를 기대할 수 있다.\n\n`merge가 true 이고`, `브랜치가 develop 이고`, `라벨에 백엔드가 존재`하는 작업에 대해 트리거를 수행하는것을 기대할 수 있다.\n\n### Token 설정\n\n![](.index_images/b55101b4.png)\n\nToken 탭에 토큰 이름을 작성한다.\n\n![](.index_images/8e4baf8e.png)\n\n이 때 GitHub WebHook 설정에 들어가서 Payload URL에 token 파라미터를 포함하도록 수정한다.\n\n![](.index_images/675ca490.png)\n\n바로 아래 탭에서 TokenCredential에 토큰에 대한 Secret Key를 추가해줘야한다.\n\n외부에서 빌드를 유발하기 위해서는 token을 확인하는 방식이 존재하는데 이 때 Jenkins의 Credential에 있는 정보를 기반으로 수행한다.\n\n> token을 사용하지 않는 경우 계정정보를 입력할 수도 있지만 해당 과정에서는 token을 등록하는 방식을 사용합니다.\n\n![](.index_images/639919be.png)\n\n위와 같은 정보로 Secret text를 작성하고 등록하고 적용한다.\n\n## 응답 확인하기\n\n![](.index_images/8f20f94d.png)\n\nGitHub의 WebHook 탭의 Recent Deliveries 탭으로 가서 확인해보면 Response Body값에 다음과 같은 응답이 담겨있는 것을 확인할 수 있다.\n\n```json\n{\n  \"jobs\": {\n    \"pium-dev\": {\n      \"regexpFilterExpression\": \"(?=.*true)(?=.*develop)(?=.*백엔드).*\",\n      \"triggered\": true,\n      \"resolvedVariables\": {\n        \"BRANCH\": \"develop\",\n        \"LABELS\": \"[\\\"?️ \\\\b리팩터링\\\",\\\"? 백엔드\\\"]\",\n        \"LABELS_0\": \"?️ \\b리팩터링\",\n        \"LABELS_1\": \"? 백엔드\",\n        \"MERGED\": \"true\"\n      },\n      \"regexpFilterText\": \"true develop [\\\"?️ \\\\b리팩터링\\\",\\\"? 백엔드\\\"]\",\n      \"id\": 248,\n      \"url\": \"queue/item/248/\"\n    }\n  },\n  \"message\": \"Triggered jobs.\"\n}\n```\n\n`regexpFilterText`에 원하는 값이 잘 들어간 것을 확인할 수 있다.\n\n## 결론\n\n젠킨스의 `Generic Webhook Trigger` 플러그인을 이용하여 Merge 여부, target branch, label 값을 비교하고 빌드를 유발하는 설정을 했다.\n\n경우에 따라 세부적인 검증을 추가할 수 있을 것 같다.\n\n### 트러블 슈팅\n\nGeneric Webhook Trigger 설정 - Token 설정에서 많이 헤맸다.\n\n![](.index_images/1c588600.png)\n\n`{\"jobs\":null,\"message\":\"Did not find any jobs with GenericTrigger configured! If you are using a token, you need to pass it like ...trigger/invoke?token=TOKENHERE. If you are not using a token, you need to authenticate like http://user:passsword@example.org/generic-webhook... \"}`\n\n404 에러와 함께 위 메시지가 반환되었는데 Jenkins의 Token에 대해 이해를 하지 못해 생긴 문제였다.\n\n> 왜 다들 Token이 뭔지는 설명을 안해주는거지..?? ㅠㅠ\n>\n> `외부에서 빌드를 유발하기 위해서는 token을 확인하는데 이 때 Jenkins의 Credential에 있는 정보를 기반으로 수행한다.`\n>\n> 이 한마디를 이해하기 위해 하루가 걸렸다... 😇\n\n## Reference\n\n### 설정 과정에서 참고한 글\n\nhttps://bepoz-study-diary.tistory.com/385\n\nhttps://velog.io/@zayson/Jenkins-CICD-4.-WebHook%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC\n\n\n### 트러블 슈팅 과정에서 참고한 글\n\nhttps://georgik.rocks/jenkins-generic-webhook-plugin-failed-with-did-not-find-any-jobs-with-generictrigger-configured/\n\nhttps://pikachu987.tistory.com/61"},{"excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 이번 피움 서비스에서 CI/CD를 적용하기 위해 Jekins와 Github Webhook을 이용했습니다. 본 글에서는 Jenkins와 Github Webhook을 이용한 SpringBoot 서버 자동 빌드, 자동 배포 과정을 다루겠습니다. Jenkins 설치 과정은 피움 팀 젠킨스 설치하기 를 참고하…","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"date":"July 24, 2023","title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기","tags":["CI/CD","젠킨스","Webhook","설정"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[그레이](https://github.com/Kim0914)'가 작성했습니다.\n\n이번 피움 서비스에서 CI/CD를 적용하기 위해 Jekins와 Github Webhook을 이용했습니다.\n\n\n\n본 글에서는 Jenkins와 Github Webhook을 이용한 SpringBoot 서버 자동 빌드, 자동 배포 과정을 다루겠습니다.\n\n\n\nJenkins 설치 과정은 [피움 팀 젠킨스 설치하기](https://pium-official.github.io/jenkins-setting/) 를 참고하시면 됩니다 !\n\n\n\n작업 환경\n\n- 인스턴스: AWS EC2 t4g.small\n- OS: Ubuntu 22.04.2 LTS\n- RAM: 2GB\n\n\n## Jenkins 접속\n젠킨스를 접속하는 방법은 간단합니다. 젠킨스를 설치한 인스턴스 public IP와 port를 주소창에 입력하면 쉽게 접근할 수 있습니다.\n\n\n\n정상적으로 접속하면 다음과 같은 화면을 만나게 됩니다.\n![](.index_images/img.png)\n\n---\n## Github Webhook 설정\n먼저 Webhook을 설정하기 위해 현재 프로젝트의 깃허브 레포지토리로 이동합니다.\n\n\n\n레포지토리의 Settings를 눌러서 접속할 수 있습니다. 이후 왼쪽 메뉴바에 Webhooks를 누르면 아래와 같은 화면을 볼 수 있습니다.\n![](.index_images/img_1.png)\n\n오른쪽 상단의 Add Webhook 버튼을 눌러 webhook을 추가하는 화면으로 이동합니다.\n\n\n\n그러면 아래와 같은 Payload URL, Content Type, Secret을 입력하는 폼이 나타납니다.\n![](.index_images/img_2.png)\n\n**Payload URL**은 젠킨스가 설치되어 있는 서버의 `도메인 주소:포트/github-webhook/` 을 입력합니다.\n\n젠킨스의 기본 포트는 8080으로 설정되어 있습니다.\n\n주소 마지막에 / 는 꼭 넣어주셔야 합니다.\n\n/를 넣지 않으면 redirect URL로 인식해 정상적으로 동작하지 않습니다.\n\n\n\n**Content-type**은 `application/json`을 선택합니다.\n\n\n\nSecret은 비워두면 됩니다.\n\n\n\n마지막으로 어떤 동작에서 webhook을 발생시킬지 선택하면 됩니다.\n\n저희 팀의 경우에는 **Let me select individual events**를 눌러 **push**와 **pull request**가 발생했을 때 webhook이 동작하도록 선택했습니다.\n\n\n\n모든 선택을 마친 후 **Add webhook 버튼을 누르면 토큰이 발행**됩니다.\n\n\n\n토큰을 생성할 때 토큰 권한도 함께 설정할 수 있는데, 이 때 repo와 admin:repo_hook을 선택해주시면 됩니다.\n\n\n\n만약 CI를 통해 PR에 comment를 남기는 등의 write가 필요없는 경우에는 wirte 권한을 빼줄 수 있을 것 같습니다.\n\n\n\n해당 토큰은 생성 후 재발행되지 않기 때문에 따로 보관을 하는 것이 좋습니다.\n\n---\n## Credentials 생성\n다시 젠킨스 화면으로 이동해서 Credentials를 등록하여 Github webhook을 연동 시켜야 합니다.\n\n\n\n젠킨스 메인 화면에서 Jenkins 관리 페이지로 접속하면 Security 탭에 Credentials를 눌러 접속합니다.\n![](.index_images/img_3.png)\n\nAdd Credentials를 누릅니다.\n![](.index_images/img_4.png)\n\n그러면 아래와 같은 화면을 볼 수 있습니다.\n\n\n\n깃허브 webhook에서 발급받은 토큰을 이용해 크리덴셜 값을 생성합니다.\n![](.index_images/img_5.png)\n\n**kind**는 `Username with password`를 선택합니다.\n\n\n\n**username**에는 깃허브 토큰을 발급받은 `깃허브 아이디`를 작성합니다.\n\n\n\n**password**에는 `해당 토큰 값`을 넣으면 됩니다.\n\n\n\n**ID**는 젠킨스에서 이 **크리덴셜을 식별하기 위한 이름이므로 크게 의미가 없는 값** 입니다.\n\n---\n### Gradle 설정\n현재 우리 팀은 스프링 부트 서버를 빌드하기 때문에 gradle이 반드시 필요합니다.\n\n\n\n젠킨스 메인 화면에서 대시보드 -> 젠킨스 관리 -> Tools를 누르면 아래와 같은 Gradle 설정 화면을 볼 수 있습니다.\n![](.index_images/img_6.png)\n\nGradle 8.2.1 버전을 추가했습니다.\n\n추가를 완료하고 바로 페이지를 나가면 안됩니다.\n\n가장 아래에 있는 파란색 save 버튼을 눌러야 해당 설정이 저장됩니다 !!\n\n\n\nGradle 설정까지 마치면 빌드할 준비를 모두 마쳤습니다.\n\n\n\n이제 CI를 자동으로 실행하기 위해서는 CI 스크립트를 작성해야 합니다.\n\n---\n## CI 스크립트 작성\n드디어 CI를 담당하는 젠킨스 아이템을 생성할 시간입니다 !\n\n\n\n대시보드에서 New Item을 누르면 아래와 같은 화면을 볼 수 있습니다.\n![](.index_images/img_7.png)\n\n상단에 아이템 이름을 설정하고 Pipeline을 구축할 것이기 때문에 Pipeline을 선택하고 OK를 누릅니다.\n\n\n\n이후 아래와 같이 아이템을 설정할 수 있는 화면이 나옵니다.\n![](.index_images/img_8.png)\n\n저희는 깃허브 프로젝트를 사용하고 있기 때문에 Github Project를 체크한 후 레포지토리의 url을 입력합니다.\n\n\n\n다음으로 Build Trigger를 선택해야하는데, Github webhook을 사용할 계획이므로 Github hook triger for GITScm polling을 선택합니다. 해당 버튼을 클릭하면 아래에 스크립트를 작성하는 칸이 나옵니다.\n![](.index_images/img_9.png)\n\n\n\nScript칸에 팀에서 필요로 하는 CI Script를 입력하면 됩니다.\n\n\n\n여기서 저장 버튼 위에 보이는 Pipeline Syntax를 누르면 깃허브를 이용해 접근할 수 있는 스크립트를 생성하는 화면이 나옵니다.\n![](.index_images/img_10.png)\n\nSample Step을 Git으로 설정한 후 아래에 값을 입력하면 됩니다.\n\n\n\nCredentials에는 좀 전에 생성했던 크리덴셜을 선택하면 됩니다. 해당 정보에 토큰 값이 있기 때문에 정확한 크리덴셜을 선택해야 합니다.\n\n크리덴셜은 생성할 때 입력한 ID와 동일하게 보여집니다.\n\n\n\n모두 입력했다면 Generate Pipeline Script를 눌러 완성된 스크립트를 확인합니다.\n\n\n\n해당 스크립트를 만드는 이유는 빌드 과정에서 Github 저장소에서 저장소를 복제해야하기 때문입니다.\n\n그러므로 저장소에 대한 접근 권한이 반드시 필요합니다.\n\n\n\n전체 빌드 스크립트는 아래와 같습니다.\n\n```shell\npipeline {\n    agent any\n    tools {\n        gradle 'gradle'\n    }\n    triggers {\n        githubPush()\n    }\n    stages {\n        stage('저장소 복제') {\n            steps {\n                // 여기서 방금 생성된 깃허브 스크립트 넣기\n        }\n        \n        stage('빌드') {\n            steps {\n                sh '''\n                cd backend/pium\n                ./gradlew clean build\n                '''\n            }\n            post {\n                failure {\n                    slackSend (\n                        channel: '#알림-젠킨스',\n                        color: '#FF0000',\n                        message: \"백엔드 Build 실패...😢\"\n                    )\n                }\n            }\n        }\n    }\n}\n```\n\n\nstages에서 깃허브 저장소에 있는 프로젝트를 가져온 후, 본인의 프로젝트 디렉토리로 이동해 build를 진행하도록 하면 됩니다.\n\n디렉토리를 옮기는 부분에서 몇 번 에러가 있었는데, Jenkins 대시보드의 Console Output을 이용해 디버깅하면서 수정해나가면 쉽게 설정할 수 있습니다.\n\n\n\n지금까지 올바르게 적용되었다면 CI 설정은 모두 정상적으로 마쳤습니다.\n\n\n\n다음으로 CD(자동 배포) 설정 방법을 알아보겠습니다.\n\n---\n## SSH Agent 설치\n현재 빌드 서버와 운영 서버가 서로 다른 인스턴스로 분리되어 있기 때문에, 젠킨스 빌드 서버에서 빌드한 파일을 운영서버로 전달해야\n\n합니다. 이때 다른 인스턴스로의 접속이 필요하므로 SSH 연결 설정을 해야 합니다.\n\n\n\n기존의 블로그나 여러 레퍼런스를 찾아보면 Publish Over SSH를 많이 사용하는데, 현재 접속 불가 이슈가 있습니다.\n\n그러므로 SSH Agent를 사용해야 합니다.\n\n\n\nJenkins 관리의 Plugin 탭을 들어가서 설치할 수 있습니다.\n\n\n\nJenkins도 하나의 서버에서 동작하고 있기 때문에 운영서버로 접속하기 위한 pem 키가 필요합니다.\n\n\n\n대시보드 -> 젠킨스 관리 -> Credentials 로 이동합니다.\n\n\n\n깃허브 크리덴셜을 생성하는 것과 동일한 방법으로 pem 키를 크리덴셜로 설정합니다.\n![](.index_images/img_11.png)\n\n**kind**는 `SSH Username with private key`를 선택합니다.\n\n\n\n**id**는 깃허브 크리덴셜과 마찬가지로 식별자이기 때문에 `원하는 값을` 입력하면 됩니다.\n\n\n\n**username**은 인스턴스의 HostName ex) ubuntu@123-345-678-23의 `ubuntu` 를 입력하면 됩니다.\n\n\n\n마지막으로 **인스턴스를 생성하면서 받았던 pem 키를 Add 버튼을 눌러 추가**합니다.\n\npem 키에 있는 모든 내용(Begin, End 포함)을 다 복사해서 넣어야합니다.\n\n---\n## CD 스크립트 작성\n이제 젠킨스가 설치된 서버에서 빌드된 결과물을 운영 서버로 전달하는 스크립트를 작성해야 합니다.\n\n이때 scp 라는 프로토콜을 사용하여 파일을 전달합니다.\n\n\n\n저희 팀이 사용한 스크립트는 아래와 같습니다.\n\n빌드 성공 유뮤, 배포 성공 유무를 슬랙과 연동해 사용하고 있습니다 !\n\n```shell\npipeline {\n    agent any\n    tools {\n        gradle 'gradle'\n    }\n    triggers {\n        githubPush()\n    }\n    stages {\n        stage('저장소 복제') {\n            steps {\n                // 깃허브 크리덴셜\n            }\n        }\n        \n        stage('빌드') {\n            steps {\n                sh '''\n                cd //프로젝트 위치\n                ./gradlew clean build\n                '''\n            }\n            post {\n                failure {\n                    slackSend (\n                        channel: '#알림-젠킨스',\n                        color: '#FF0000',\n                        message: \"백엔드 Build 실패...😢\"\n                    )\n                }\n            }\n        }\n        stage('배포') {\n            steps {\n                sshagent(credentials: ['pem 키로 생성한 크리덴셜 ID']) {\n                    sh '''\n                        cd //프로젝트 위치\n                        \n                        ssh -o StrictHostKeyChecking=no {HostName}@{Private IP} uptime\n                        cd build/libs\n                        \n                        scp {빌드된 Jar 파일명} {HostName}@{Private IP}:/home/ubuntu\n                        ssh -t {HostName}@{Private IP} {운영서버 배포 스크립트 파일}\n                    '''\n                }\n            }\n            post {\n                success {\n                    slackSend (\n                        channel: '#알림-젠킨스',\n                        color: '#00FF00',\n                        message: \"백엔드 배포 성공! 🚀\"\n                    )\n                }\n                failure {\n                    slackSend (\n                        channel: '#알림-젠킨스',\n                        color: '#FF0000',\n                        message: \"백엔드 배포 실패 🥲\"\n                    )\n                }\n            }\n        }\n    }\n}\n```\n\n\nCI/CD 설정을 모두 마친 후 깃허브 프로젝트에 push, pull request와 같은 trigger가 발생하면 아래와 같이 빌드 결과를 볼 수 있습니다.\n![](.index_images/img_12.png)\n\n### Reference\n[베베의 CI/CD 글](https://developer-nyong.tistory.com/47#article-7-1--ssh-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EC%84%A4%EC%B9%98)\n"},{"excerpt":"이 글은 우아한테크코스 5기, 피움팀 크루 '참새'가 작성했습니다. 서론  피움의 프론트엔드에서는 서버 상태 관리를 위해 Tanstack Query를 사용하기로 하였다. 이 글에서는 많고 많은 상태 관리 라이브러리 중 Tanstack Query를 사용하기로 결정한 이유를 소개하고자 한다. 설치한 버전: 5.0.0-alpha.86 Tanstack query…","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"date":"July 23, 2023","title":"프론트엔드: Tanstack Query 사용에 대하여","tags":["Tanstack Query","React Query","리액트 쿼리"]},"rawMarkdownBody":"\n> 이 글은 우아한테크코스 5기, 피움팀 크루 '[참새](https://github.com/WaiNaat)'가 작성했습니다.\n \n\n## 서론\n\n![Tanstack: High-quality open-source software for web developers. Headless, type-safe, and powerful utilities for state management, routing, data visualization, charts, tables, and more.](.index_images/tanstack.png)\n\n피움의 프론트엔드에서는 서버 상태 관리를 위해 [Tanstack Query](https://tanstack.com/query/v5/docs/react/overview)를 사용하기로 하였다.\n\n이 글에서는 많고 많은 상태 관리 라이브러리 중 Tanstack Query를 사용하기로 결정한 이유를 소개하고자 한다.\n\n> 설치한 버전: 5.0.0-alpha.86\n\n## Tanstack query로 얻을 수 있는 개발적인 이점\n\n### 코드 간소화와 컴포넌트의 관심사 분리\n\nTanstack query에서 제공하는 다양한 함수들을 활용하면 비동기 통신의 처리 코드를 선언형으로 만들 수 있다. 또한 Tanstack query가 서버와의 통신을 대신해주기 때문에 컴포넌트의 렌더링 함수는 UI/UX의 구현이라는 보다 근본적인 내용에 집중할 수 있다. 조금 더 풀어서 설명하면 네 가지로 나눌 수 있다.\n\n우선 `<Suspense>`와 `<ErrorBoundary>`의 편한 사용이 가능하다. 이 둘을 사용하기 위해서는 각각 promise 또는 error를 throw하는 과정이 필요하다. 특히 error가 아닌 것을 던진다는 생각은 기존의 틀을 깨는 것으로 (eslint에 [관련 설정](https://eslint.org/docs/latest/rules/no-throw-literal)이 있다는 점으로 미루어 볼 때 자주 사용하는 기법이 아니었을 것이다) 새로운 코드를 짜야 한다. [Suspense를 설명하는 리액트 공식 문서](https://react.dev/reference/react/Suspense#displaying-a-fallback-while-content-is-loading)의 첫 번째 예제에서 Fork를 눌러 `Albums.js`안의 `use()`함수를 보면 promise를 던지기 위해 굉장히 재미있는 기법을 사용하고 있다는 걸 확인할 수 있다. 이러한 일련의 과정을 tanstack query가 대신하기 때문에 편리한 사용이 가능하다.\n\n다음으로 낙관적 업데이트를 적용하기에 유리하다. `useMutation`의 `onSuccess`, `onError`, `onSettled`와 같은 설정을 이용하면 된다.\n\n세 번째로는 비동기 통신의 결과 타입을 자동으로 추론해준다는 점이다. 따라서 컴포넌트 내부에서 불필요한 타입 가드 및 추론, 강제 타입 지정과 같은 행동을 하지 않아도 되므로 타입스크립트를 더 깔끔하게 사용할 수 있다.\n\n마지막으로 서버 상태 처리를 위한 전역 상태 관리 라이브러리를 도입하지 않아도 된다. 물론 이건 비단 tanstack query만의 장점은 아니다. 하지만 캐싱을 이용해서 전역 상태를 이용하지 않고도 여러 컴포넌트에서 같은 쿼리를 요청했을 경우 추가적인 통신 없이도 정보를 전달받을 수 있다는 점은 매력적이다.\n\n### 비동기 통신\n\n1. 캐싱을 지원하기 때문에 서버와의 불필요한 통신을 줄일 수 있다.\n2. 다양한 상황에서 자동 refetch가 가능해서 원한다면 항상 최신 값을 유지할 수 있다.\n3. 여러 컴포넌트가 같은 쿼리를 사용할 때, 해당 쿼리로부터 반환되는 데이터가 바뀌었다면 그 컴포넌트들을 한 번에 업데이트할 수 있다.\n4. 쿼리가 오랫동안 사용되지 않으면 가비지 컬렉터를 자동으로 불러서 정리한다.\n\n## 다른 라이브러리와의 비교\n\n우리 팀에서는 Recoil 이외의 다른 전역 상태 라이브러리나 서버 상태 라이브러리를 사용해본 경험이 많은 크루가 없어서 간단하게만 비교하였다.\n\n### [SWR](https://github.com/vercel/swr)\n\nNext.js 팀에서 만든 서버 상태 관리 라이브러리. 데이터 캐싱이라는 측면에 집중했다. 따라서 다른 라이브러리와 비교했을 때 굉장히 가벼운 편에 속한다.\n\n### [Tanstack Query](https://tanstack.com/query/v5/docs/react)\n\n데이터 캐싱뿐만이 아니라 에러 처리나 무한 스크롤과 같은 다양한 기능을 지원한다. 비슷한 기능을 하는 리액트 쿼리의 [`useQuery`](https://tanstack.com/query/v5/docs/react/reference/useQuery)와 SWR의 [`useSWR`](https://swr.vercel.app/docs/data-fetching)의 반환값을 확인해보았을 때 받을 수 있는 정보의 양이 차이가 많이 난다. 다양한 상황을 고려한 UI를 보여준다면 Tanstack query를 활용하는 것이 좋겠다는 생각을 했다. 추가적으로 받아온 데이터의 일차 가공이 필요하다면 `useQuery`에서 `selector`를 사용할 수 있다는 점도 상대적인 장점이라고 생각한다.\n\n### Redux, Recoil 등 다른 전역 상태 관리 라이브러리\n\n현재 피움 서비스 내에서 전역적으로 관리할 값이 많지 않다고 판단하였다.\n\n또한 일반적인 전역 상태 라이브러리의 경우 서버 상태를 나타나기에는 부적절한 것 같다. 특히 Recoil은 selector의 캐시 문제로 인해 사용자의 장바구니 목록처럼 자주 변하는 값을 받아오기 굉장히 힘들었던 기억이 있다.\n\n## Tanstack Query로 사용자에게 어떤 서비스를 제공하고자 하는지\n\n우리가 추구해야 하는 것은 기술적 고점이 아니다. 그렇기 때문에 이 라이브러리를 도입해서 사용자에게 어떤 경험을 선사할 수 있을지 고민하였다.\n\n1. Suspense\n    - Suspense는 사용자에게 '지금 무슨 일을 하는 중이다'라는 암시를 준다. 따라서 사용자의 기다리는 시간을 편하게 할 수 있다.\n    - 피움 서비스의 '식물 사전' 기능은 공공데이터를 활용한다. 현재 사용하고 있는 공공데이터의 경우 이용에 제약이 없어서 DB에 저장할 수 있다. 만약 그렇지 않아서 항상 백엔드 서버에서 공공데이터 API와의 통신을 추가적으로 진행해야 할 경우 정보를 받아오는 데 시간이 걸린다. 이 때 Suspense를 잘 활용할 수 있을 것이다.\n2. Refetch\n    - 피움 서비스는 모바일 환경을 우선적으로 고려하고 있다.\n    - 지하철 와이파이처럼 인터넷이 불안정한 곳에서는 요청이 잘 가지 않을 수 있다. 이 때 사용자가 같은 행동을 두 번 하지 않더라도 tanstack query가 자동적으로 요청을 보내서 UX 측면의 개선이 가능하다.\n3. caching\n    - '식물 사전 정보'는 변하지 않는 자료이다. 따라서 사용자가 여러 번 요청을 하더라도 매번 같은 정보를 보게 된다. 이러한 요청에 대해서는 `staletime`을 길게 잡아 캐시를 오래 유지한다면 불필요한 서버와의 통신을 줄이고 사용자 경험도 개선할 수 있다.\n    - '내가 키우는 식물 목록'이나 '내가 키우는 식물의 상세 정보'도 사용자가 값을 추가하거나 바꾸지 않는 이상 변하지 않는 값이다. 이 친구들도 적절한 캐싱을 사용하면 서버와의 통신을 줄여 사용자의 대기시간을 줄일 수 있다.\n4. 무한 스크롤\n    - 피움에서는 자신의 식물에게 물을 준 날짜들을 기억해서 타임라인 형태로 볼 수 있도록 제공할 계획이다. 타임라인은 시간의 흐름을 나타내기 위한 도구이다. '시간'과 '흐름' 모두 연속성을 띠는 표현인 만큼 무한 스크롤을 이용해 유의미한 경험을 제공할 것이다.\n\n\n### Tanstack Query v5를 사용하게 된 이유\n\n마지막으로 피움 프론트엔드에서 Tanstack query의 다섯 번째 메이저 버전을 사용하기로 한 이유를 짧게 남긴다. Tanstack query v5는 [획기적인 변화](https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5)가 있고, alpha 단계이다.\n\n1. 어차피 버전은 5로 흘러간다. 피움 프론트엔드의 세 크루 모두 Tanstack query를 처음 배우는 단계라면 굳이 역사의 뒤안길로 흘러갈 v4부터 배울 필요는 없다고 생각한다.\n2. 문서를 살펴본 결과 v5의 '획기적인 변화'는 대부분 기존의 불필요하거나 문제를 일으키기 쉬운 기능을 제거하는 것이었다. 따라서 만약 v4를 학습해야 한다면 기존의 v5 공부 내용에서 덧붙이는 방법으로 가능할 것이다.\n3. 현재 피움 서비스에서는 복잡한 서버와의 데이터 통신은 없을 것 같다. 따라서 alpha 단계이기 때문에 무언가가 안 되는 상황은 없을 것으로 예상된다.\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론  http://pium.life 로 접속하면 피움의 홈페이지가 나오기까지의 과정을 기록으로 남겨보려고 한다. 본 과정은 서버 구축을 처음 하면서 과정을 이해하기위해 작성된 글입니다. 빠르게 따라할 수 있는 설정 기반 글을 원한다면 마지막 목차인 정리를 확인해보시길 바랍니다. 본 과정에서는 소량의 …","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"date":"July 18, 2023","title":"피움의 배포과정","tags":["배포","인프라"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)'가 작성했습니다.\n \n\n## 서론\n\n![](.index_images/3162b98e.png)\n\nhttp://pium.life 로 접속하면 피움의 홈페이지가 나오기까지의 과정을 기록으로 남겨보려고 한다.\n\n> 본 과정은 서버 구축을 처음 하면서 과정을 이해하기위해 작성된 글입니다.\n> \n> 빠르게 따라할 수 있는 설정 기반 글을 원한다면 마지막 목차인 정리를 확인해보시길 바랍니다.\n\n> 본 과정에서는 소량의 과금(?)이 존재합니다.\n> (도메인 구입비용 : 약 4000원)\n\n## 도메인 정하기\n\n![](.index_images/8e211be2.png)\n\n> 도메인을 구입하기 위해 도메인 호스팅 사이트 [가비아](https://www.gabia.com/)를 이용했다.\n\n`pium.com` `pium.co.kr` `pium.net` 등등.\n서비스의 이름으로 자주 사용하는 도메인을 생성하고싶었으나 이미 존재하거나 가격이 너무 비싸다는 문제가 있었다.\n\n적당한 가격에 서비스의 이름을 가진 도메인인 `pium.life`를 선택했다. (1년 4000원)\n\n## 도메인 설정하기\n\n> 가비아 서비스를 기준으로 과정이 진행됩니다.\n\n`3.123.123.123`과 같은 인스턴스 public ip 주소를 `pium.life`로 별칭을 지정해주자.\n\n![](.index_images/ce5d100b.png)\n\n우측 상단의 `My 가비아` 탭으로 들어간다.\n\n![](.index_images/48a0d2d6.png)\n\n우측의 `DNS 관리툴` 탭으로 들어간다.\n\n![](.index_images/dbaa42b0.png)\n\n도메인의 `설정` 탭으로 들어간다.\n\n![](.index_images/0b4d4be0.png)\n\nDNS 관리 탭의 `설정` 혹은 `레코드 수정`에 들어간다.\n\n![](.index_images/d830ba27.png)\n\n위와 같이 레코드를 추가하고 저장한다.\n\n> CNAME 설정은 향후 서브도메인 설정을 위한 설정입니다.\n\n이제 http://pium.life 로 접속하면 서버로 바로 접속할 수 있게된다. (SSH 접속이 아닌 HTTP 접속을 의미한다.)\n\n## 환경 살펴보기\n\n피움은 하나의 EC2에 프론트엔드, 백엔드의 배포를 모두 진행하려고한다.\n\n이를 위해서라면 서로 다른 포트에 서비스를 띄워둔 뒤 각 요청별로 포트를 분산시킬 필요가 있다.\n\n![](.index_images/ee357fa5.png)\n\n때문에 위와 같은 흐름으로 요청이 진행되는 것이 최종 목표다!\n\n### EC2 보안규칙\n\n우아한테크코스 과정에서 제공되는 EC2의 보안규칙은 다음과 같다.\n\n- 사내에서만 22번 포트 접속 가능\n- 80, 443은 열려있음\n- 이외의 포트는 열려있지 않음.\n\n우리가 흔히 개발을 하면서 사용하는 3000번 포트 혹은 8080번 포트를 통해 해당 서버에 접근하지 못한다는 이야기다.\n\n즉, 다시말해 pium.life:8080과 같은 접근이 안된다는 이야기다.\n\n인바운드 규칙에서 8080 혹은 3000번 포트를 열어버리는 방법도 있겠지만 보안 규칙에 손대지 않으면서 해결할 수 있는 방법을 찾아보자.\n\n## nginx로 포트포워딩하기\n\nlinux에 존재하는 `iptables` 명령어를 통해 서버 자체적으로 포트포워딩 환경을 구성할 수도 있지만 현재 피움은 하나의 서버에서 두개의 어플리케이션을 배포하고 있고, 도메인도 하나다.\n\n따라서 후에 설명할 서브도메인을 적용하기 위해서라도 nginx를 이용하기로 한다.\n\n### nginx 설치하기\n\n```shell\nsudo apt install nginx\n```\n\n```shell\nsystemctl status nginx\n```\n\n![](.index_images/28e0139a.png)\n\n이제 주소창에 인스턴스 ip 를 치고 접속하면 다음과 같이 nginx default 페이지를 볼 수 있다. \n\n![](.index_images/9345764b.png)\n\n### 80 포트 접속을 8080 포트로\n\n> 해당 과정은 8080포트에 애플리케이션이 구동중인 상태에서 진행됩니다. \n> 다음 명령어로 8080포트에서 애플리케이션이 구동중인지 확인한다.\n>\n> ```shell\n> lsof -i tcp:8080\n> ```\n> ![](.index_images/1573063d.png)\n\n이제 nginx 설정파일을 작성하여 80포트로 오는 요청을 8080포트로 전환시켜본다.\n\n```shell\ncd /etc/nginx/sites-available/\n\nsudo vi default\n```\n\n> 주석처리 되어있는 부분은 제외하고 코드로 표현합니다.\n\n```shell\n# 변경 전 파일내용\nserver {\n        listen 80 default_server;\n        listen [::]:80 default_server;\n\n        root /var/www/html;\n\n        index index.html index.htm index.nginx-debian.html;\n\n        server_name _;\n\n        location / {\n                try_files $uri $uri/ =404;\n        }\n}\n```\n\n처음 파일을 열어보면 위와같이 설정되어있을 것이다.\n\n최대한 간략하게 포트를 변경한다는 목적만 달성해보기 위해 다음 내용들을 수정해보자.\n\n- `root /var/www/html;` 주석처리\n- `index index.html index.htm index.nginx-debian.html;` 주석처리\n- `location / { ... }` 내부 내용에 다음 내용 추가\n  - `proxy_set_header Host $host:$server_port;`\n  - `proxy_set_header X-Real-IP $remote_addr;`\n  - `proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;`\n  - `proxy_pass http://127.0.0.1:8080;`\n\n```shell\n# 변경된 파일내용\nserver {\n        listen 80 default_server;\n        listen [::]:80 default_server;\n\n        # root /var/www/html;\n\n        # index index.html index.htm index.nginx-debian.html;\n\n        server_name _;\n\n        location / {\n                proxy_set_header Host $host:$server_port;\n                proxy_set_header X-Real-IP $remote_addr;\n                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n                proxy_pass http://127.0.0.1:8080;\n        }\n}\n```\n\n위와같이 설정파일을 수정했다면 다음 명령어를 수행해 nginx를 다시 시작한다.\n\n```shell\nsudo systemctl restart nginx\n```\n\n![](.index_images/232c6d5d.png)\n\n스프링부트 애플리케이션을 실행중이였다면 위와같은 Whitelabel Error Page를 확인할 수 있을것이다.\n\n## 서브도메인 구성하기\n\n이제 80포트에서 8080포트로 요청을 변환하는 과정은 성공했다.\n\n하나의 서버에 프론트엔드, 백엔드 코드가 같이 띄워져야하므로 서브도메인을 통해 페이지와 API를 구분해줘야한다.\n\n### index 파일 지정하기 - default 파일 수정\n\n프론트에서 빌드 산출물로 나온 index.html을 기본 페이지로 참고하도록 설정하자.\n\n```shell\ncd /etc/nginx/sites-available/\n\nsudo vi default\n```\n\n```shell\n# 변경 전 설정내용\nserver {\n        listen 80 default_server;\n        listen [::]:80 default_server;\n\n        # root /var/www/html;\n\n        # index index.html index.htm index.nginx-debian.html;\n\n        server_name _;\n\n        location / {\n                proxy_set_header Host $host:$server_port;\n                proxy_set_header X-Real-IP $remote_addr;\n                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n                proxy_pass http://127.0.0.1:8080;\n        }\n}\n```\n\n기존에 80포트를 8080포트로 포워딩시켜주는 설정을 바꿔준다.\n\n```shell\n# 변경 후 설정내용\nserver {\n        listen 80 default_server;\n        listen [::]:80 default_server;\n\n        root /var/www/html;\n\n        index index.html;\n\n        server_name pium.life;\n\n        location / {\n        }\n}\n```\n\n이제 pium.life로 접속하면 `/var/www/html` 경로에 있는 `index.html`을 참조하도록 설정되었다.\n\n위 설정에 따르면 `index.html` 및 `bundle.js`, `assets` 등의 프론트 리소스들은 서버의 `/var/www/html`를 기준으로 위치시키면 된다.\n\n> 빌드 산출물 및 CD와 관련된 내용은 본 게시글에서 다루지 않습니다.\n\n### API 서버 지정하기 - api_config 파일 만들기\n\nhttp://api.pium.life 로 API를 호출하도록 구성해보자.\n\nnginx는 기본적으로 `/etc/nginx/sites-enabled` 경로에 있는 파일들을 참고하여 설정파일에 적용한다.\n\n> `/etc/nginx/nginx.conf` 파일의 60번째 줄 참고\n> \n> ![](.index_images/f4ceb33e.png)\n\n다음 과정을 통해 서브도메인 설정을 해보자.\n\n```shell\ncd /etc/nginx/sites-available\n\nsudo vi api_config\n```\n\n```shell\n# api_config 파일 내용\nserver {\n        listen 80;\n        listen [::]:80;\n\n        server_name api.pium.life;\n        \n        location / {\n                proxy_set_header Host $host:$server_port;\n                proxy_set_header X-Real-IP $remote_addr;\n                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\n                proxy_pass http://127.0.0.1:8080;\n        }\n}\n```\n\n`server_name` 옵션을 통해 api.pium.life 라는 도메인으로 접근하는 요청을 확인하고, 맞다면 8080 포트로 변경한다.\n\n위와 같이 파일을 작성했으면 `sites-enabled` 경로에 soft link(바로가기)를 생성한다.\n\n```shell\nln -s /etc/nginx/sites-available/api_config /etc/nginx/sites-enabled/api_config\n```\n\n이제 nginx를 재시작하여 설정을 적용해보자.\n\n> 💡 Tip : `nginx -t` 명령어를 통해 현재 설정파일이 정상적으로 작성되었는지 확인할 수있다.\n> \n> ![](.index_images/10d7627b.png)\n\n![](.index_images/04601361.png)\n\nhttp://api.pium.life 로 접속하면 API로 연결되는것을 확인할 수 있다.\n\n## 정리\n\n- 8080 포트에 API 애플리케이션을 실행한다.\n- 도메인 구입 및 A 레코드, CNAME을 설정한다.\n- nginx를 설치한다.\n- 프론트 빌드 산출물을 `/var/www/html` 경로에 준비한다. (index.html, bundle.js, assets 등)\n- 서브도메인 및 포트포워딩 설정한다.\n\n### nginx 설정 명령어 따라가기\n\n```shell\n# nginx 설치\nsudo apt install nginx\n\n# default 파일 수정\nsudo vi /etc/nginx/sites-available/default\n```\n\n```shell\n# /etc/nginx/sites-available/default 파일 내용\nserver {\n        listen 80 default_server;\n        listen [::]:80 default_server;\n\n        root /var/www/html;\n\n        index index.html;\n\n        server_name pium.life;\n\n        location / {\n        }\n}\n```\n\n```shell\n# api_config 파일 작성\nsudo vi /etc/nginx/sites-available/api_config\n```\n\n```shell\n# api_config 파일 내용\nserver {\n        listen 80 default_server;\n        listen [::]:80 default_server;\n\n        root /var/www/html;\n\n        index index.html;\n\n        server_name pium.life;\n\n        location / {\n        }\n}\n```\n\n```shell\n# nginx 재시작 및 설정적용\nsudo systemctl restart nginx\n```\n\n## Reference\n\nhttps://jminie.tistory.com/110\n\nhttps://customer.gabia.com/manual/domain/287/1201"},{"excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 서론 JPA를 이용해 엔티티를 설계하다가  어노테이션과 @Column의 의 차이점이 궁금해져 알아보았습니다. nullable = false ?? JPA는 엔티티를 매핑하고 설계하면 자동으로 DDL을 생성해 주는 기능을 제공합니다. \n또한 엔티티의 각 컬럼들에 대해 NOT NULL, UNIQUE 등과 …","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"date":"July 16, 2023","title":"@NotNull과 nullable = false는 어떤 차이가 있을까?","tags":["JPA","Validation","nullable"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[그레이](https://github.com/Kim0914)'가 작성했습니다.\n\n\n## 서론\n\nJPA를 이용해 엔티티를 설계하다가 `@NotNull` 어노테이션과 @Column의 `nullable=false`의 차이점이 궁금해져 알아보았습니다.\n\n\n## nullable = false ??\n\nJPA는 엔티티를 매핑하고 설계하면 자동으로 DDL을 생성해 주는 기능을 제공합니다. \n또한 엔티티의 각 컬럼들에 대해 NOT NULL, UNIQUE 등과 같은 제약 조건이 포함되는 경우에도 자동으로 DDL을 생성해 줍니다.\n\n\n\n엔티티를 설계할 때 일반적으로 @Column 어노테이션을 활용합니다. \n@Column 어노테이션에서 해당 컬럼의 NOT NULL 제약을 설정할 수 있는데 `@Column(name = \"email\", nullable = false)`와 같이 nullable=false 설정을 걸어주면, 해당 제약 조건을 명시할 수 있습니다. \n따로 명시하지 않으면 nullable의 기본 값은 true입니다.\n\n\n\n간단한 User 엔티티를 생성해 보겠습니다.\n\n```java\n@Entity\n@Table(name = \"user\")\npublic class User extends AuditingEntity {\n\n    @Id\n    @GeneratedValue(strategy = GenerationType.IDENTITY)\n    @Column(name = \"id\", updatable = false)\n    private Long id;\n\n    @Column(name = \"user_id\", length = 20)\n    private String userId;\n\n    @Column(name = \"password\", length = 20)\n    private String password;\n\n    @Column(name = \"name\", length = 20)\n    private String name;\n\n    @Column(name = \"email\", nullable = false, length = 50)\n    private String email;\n}\n```\n\nUser 테이블의 email 필드는 반드시 값이 존재해야 합니다. \n즉, **NOT NULL 제약 조건이 필요**합니다. \n여기서 JPA가 자동으로 생성하는 DDL을 확인해 보겠습니다.\n\n![](./.index_images/img.png)\n\n`email varchar(50) not null` 과 같이 not null 제약 조건이 자동으로 명시됨을 알 수 있습니다.\n\n\n\n하지만 DDL은 애플리케이션 내부가 아닌 데이터베이스 컬럼의 속성에 대한 조건이므로, 스프링(자바) 애플리케이션 내 User 엔티티의 email 필드는 null이 허용됩니다.\n\n\n\n테스트 코드로 확인해 보겠습니다.\n\n```java\n@TestConstructor(autowireMode = TestConstructor.AutowireMode.ALL)\n@DataJpaTest\nclass UserRepositoryTest {\n\n    private final UserRepository userRepository;\n\n    public UserRepositoryTest(UserRepository userRepository) {\n        this.userRepository = userRepository;\n    }\n\n    @Test\n    void save() {\n        User user = new User(\"gray1234\", \"password\", \"gray\", null);\n\n        User savedUser = userRepository.save(user);\n\n        assertThat(savedUser).isEqualTo(user);\n    }\n}\n```\n\n![](./.index_images/img2.png)\n\n테스트가 실패함을 확인할 수 있습니다.\n\n\n\n하지만 여기서 주의 깊게 살펴볼 점이 있습니다. 예외 메시지를 따라 올라가 보면 insert 쿼리가 한 번 발생한 것을 알 수 있습니다. 또한 발생한 예외 타입이 JdbcSQL.... Exception입니다.\n\n\n\n즉 애플리케이션 내부가 아닌, 데이터베이스 내에서 예외가 발생했다는 것입니다.\n\n![](./.index_images/img3.png)\n\n애플리케이션 내에서는 email 컬럼의 null을 체크하지 못하고, 데이터베이스에 쿼리가 실행될 때 예외가 발생한다는 것입니다. 또한 insert 쿼리가 데이베이스에서 실행되므로 Auto Increment인 PK가 증가합니다.\n\n![](./.index_images/img4.png)\n\n첫 번째 유저를 저장할 때는 email 값을 null로 할당한 후 try - catch를 이용해 예외를 삼키고, 두 번째 유저는 정상적으로 저장한 후 PK를 출력해 봤습니다. 예상한 것처럼, 두 번째 유저의 PK는 2 임을 확인할 수 있습니다.\n\n\n\n**그렇다면, 애플리케이션 내 엔티티에서는 null을 어떻게 막을 수 있을까요?**\n\n\n## @NotNull과 함께라면?\n\n`@NotNull`은 java validation에 속하며 `@Valid`를 이용한 요청을 처리하는 단계에서 예외를 잡을 수도 있고, bean validation을 통해 예외를 검증할 수도 있습니다.\n\n\n\n우리가 DTO와 같이 클래스의 필드를 검증하는 방법과 동일하게 엔티티의 필드도 검증할 수 있습니다. 당연히 같은 자바 객체이고 도메인이기 때문에 동일하게 적용할 수 있습니다.\n\n\n\n@Valid 어노테이션도 없이 어떻게?라고 생각할 수 있는데요, Hibernate는 엔티티에 적용된 Bean Validation 어노테이션 역시 DDL로 변환합니다. \n@NotNull은 nullable=false와 마찬가지로 DDL 상에서 해당 컬럼이 NOT NULL 제약조건을 가짐을 명시합니다.\n\n\n\n스프링 공식문서인 밸덩에서도 이를 명확히 언급하고 있습니다. [밸덩 바로가기](https://www.baeldung.com/hibernate-notnull-vs-nullable)\n\n\n\n이전 User 테이블에 nullable=false를 제거한 후 @NotNull 어노테이션만 붙여준 후 생성되는 DDL을 살펴보겠습니다.\n\n```java\n@Entity\n@Table(name = \"user\")\npublic class User extends AuditingEntity {\n\n    @Id\n    @GeneratedValue(strategy = GenerationType.IDENTITY)\n    @Column(name = \"id\", updatable = false)\n    private Long id;\n\n    @Column(name = \"user_id\", length = 20)\n    private String userId;\n\n    @Column(name = \"password\", length = 20)\n    private String password;\n\n    @Column(name = \"name\", length = 20)\n    private String name;\n\n    @NotNull\n    @Column(name = \"email\", length = 50)\n    private String email;\n}\n```\n\n![](./.index_images/img5.png)\n\n동일하게 **email varchar(50) not null** 과 같이 not null 제약 조건이 자동으로 명시됨을 알 수 있습니다.\n\nHibernate에 의해 DDL이 자동으로 생성되는 기능을 끄고 싶다면 아래와 같이 설정하면 됩니다.\n\n```properties\nspring.jpa.properties.hibernate.validator.apply_to_ddl=false\n```\n\n그렇다면 nullable = false와 어떤 차이가 있을까요?\n\n차이점을 알아보기 위해 이전에 User의 email 필드에 null을 세팅한 후 저장하는 테스트 코드를 실행해보겠습니다.\n\n![](./.index_images/img6.png)\n\n다음과 같이 `javax.validation.ConstraintViolationException` 예외가 발생한다는 것을 알 수 있습니다. 또한 nullable=false 방식 때 발생하던 **insert 쿼리가 발생하지 않는다**는 점도 함께 볼 수 있습니다.\n\n\n\n`javax.validation.ConstraintViolationException` 예외가 발생했다는 것은 스프링(자바) 애플리케이션 내에서 예외를 잡았다는 것입니다. 그러므로 데이터베이스에 쿼리가 실행될 일이 없습니다.\n\n\n\n좀 더 정확하게 말하면 객체가 생성되는 시점이 아닌 **엔티티가 영속화되는 시점에 예외가 발생**합니다.\n\n\n\n확실하게 알아보기 위해 동일한 User1, User2 저장 테스트를 실행해 보면 2번째로 저장한 유저의 PK가 1 임을 알 수 있습니다.\n\n![](./.index_images/img7.png)\n\n또한 @NotNull을 어노테이션을 사용하게 되면 예외 메시지를 직접 작성할 수 있는 장점도 존재합니다.\n\n---\n\n여담으로, @NotNull 없이 nullable=false 만 설정한 경우에도 NULL 검증을 진행하고 싶다면 아래와 같이 설정하면 됩니다.\n```properties\nspring.jpa.properties.hibernate.check_nullability=true\n```\n![](./.index_images/img8.png)\n\n\b스프링(자바) 애플리케이션 단에서 예외가 잡히는 것을 볼 수 있습니다. 하지만 예외 타입이 hibernate.PropertyValueException으로 다릅니다.\n\n\n\n굳이 추천하는 방법은 아닌 것 같습니다.\n\n\n\n또한 `@NotBlank`나 `@NotEmpty`는 자동으로 DDL을 생성해주지 않습니다.\n\n그러므로 @NotBlank나 @NotEmpty를 사용하는 경우에는 `@Column(nullable=false)`를 반드시 추가해야 DDL에 NOT NULL 제약조건이 반영됩니다.\n\n---\n\n## 정리\n**@Column(nullable = false)**\nDDL을 자동으로 생성하지만, 애플리케이션의 영속성 컨텍스트에서 엔티티 필드에 null이 들어가는 것을 막지 못한다.\n\n또한 데이터베이스에 쿼리가 실행된 후 예외가 발생한다.\n\n\n\n**@NotNull**\nDDL을 자동으로 생성하고 애플리케이션의 영속성 컨텍스트에서 엔티티 필드에 null이 들어가는 것을 막는다.\n\n잘못된 제약 조건인 경우 데이터베이스에 불필요한 쿼리를 날리지 않는다.\n\n추가적으로 Bean Validation 방식은 예외 메세지를 직접 작성할 수 있다.\n\n또한 @Size와 같이 다른 validation을 통해 엔티티 필드 값을 검증할 수 있다.\n\n\n단점으로는 코드가 지저분해지고, JPA를 이용한 엔티티화 시킨 것이 아닌 객체라면 @NotNull 어노테이션을 해석하지 못한다.\n\n\n하이버네이트에서는 nullable=false보다 @NotNull 사용을 조금 더 권장하고 있다.\n\n\n## 레퍼런스\nhttps://www.baeldung.com/hibernate-notnull-vs-nullable\n\nhttps://kafcamus.tistory.com/15\n\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다. 정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.\n이에 Jenkins를 설치하고 환경설정을 빌드서버 환경을 구축한 일련의 과정을 기록해두려고한다. 작업 환경 : Ubuntu 22.04.2 LTS 공식문서 살펴보기 젠킨스 공…","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"date":"July 16, 2023","title":"젠킨스 설치하기","tags":["CI/CD","젠킨스","설정"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)'가 작성했습니다.\n \n\n## 서론\n\n피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다.\n\n정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.\n이에 Jenkins를 설치하고 환경설정을 빌드서버 환경을 구축한 일련의 과정을 기록해두려고한다.\n\n> 작업 환경 : Ubuntu 22.04.2 LTS\n\n## 공식문서 살펴보기\n\n[젠킨스 공식문서](https://www.jenkins.io/doc/book/installing/linux/)를 확인하면 설치 방법이 친절하게 나와있다.\n\n아무것도 없는 EC2 환경에서 Jenkins를 설치하고 구동하는 과정을 따라가보자.\n\n## (Optional) Swap 메모리 설정하기\n\n프리티어환경에서 Jenkins를 사용하면 자칫 메모리가 부족한 상황이 발생할 수도 있다.\n2GB의 메모리는 젠킨스와 빌드를 모두 견디기 어려울 수도 있다.\n\n다음 명령어를 통해 서버에 Swap 메모리를 할당하자.\n\n```shell\nsudo fallocate -l 2G /swapfile\nsudo chmod 600 /swapfile\nsudo mkswap /swapfile\nsudo swapon /swapfile\n\nfree -h # 확인명령어\n```\n\n> [Swap 메모리 할당하기](https://velog.io/@junho5336/Swap-%EB%A9%94%EB%AA%A8%EB%A6%AC-%ED%95%A0%EB%8B%B9%ED%95%98%EA%B8%B0)를 참고\n\n## java 설치하기\n\n> 설치 방법은 [공식문서](https://www.jenkins.io/doc/book/installing/linux/)를 확인하면서 진행하고있습니다.\n\n현재 사용할 jenkins의 버전은 java 17을 사용한다.\njava 17버전을 설치하자\n\n```shell\nsudo apt update\nsudo apt install openjdk-17-jre\njava -version\n```\n\n![](.index_images/93d56503.png)\n\n## jenkins 설치하기\n\n다음 명령어를 수행하여 jenkins를 설치한다.\n\n```shell\ncurl -fsSL https://pkg.jenkins.io/debian-stable/jenkins.io-2023.key | sudo tee \\\n  /usr/share/keyrings/jenkins-keyring.asc > /dev/null\necho deb [signed-by=/usr/share/keyrings/jenkins-keyring.asc] \\\n  https://pkg.jenkins.io/debian-stable binary/ | sudo tee \\\n  /etc/apt/sources.list.d/jenkins.list > /dev/null\nsudo apt-get update\nsudo apt-get install jenkins\n\nsudo systemctl status jenkins # 실행상태 확인\n```\n\n![](.index_images/99b45540.png)\n\n\n## jenkins 접속하기 & 초기설정\n\n> jenkins는 기본적으로 8080포트를 사용한다.\n> jenkins의 포트를 변경하는 방법에 대해서는 본 글에서 다루지는 않는다.\n\n`{인스턴스-public-ip}:8080` 으로 접속하면 다음과 같은 화면을 볼 수 있다.\n\n![](.index_images/4492665d.png)\n\n다시 EC2 화면으로 넘어와서 다음 명령어를 수행하여 `initialAdminPassword`를 알 수 있다.\n\n```shell\nsudo cat /var/lib/jenkins/secrets/initialAdminPassword\n```\n\n![](.index_images/f55b94c9.png)\n\n확인한 암호를 화면에 입력한 뒤 Continue 버튼을 눌러 계속 진행한다.\n\n![](.index_images/28fea7e9.png)\n\n초기 플러그인 세팅 화면이 나오는데 `Install suggested plugins` 를 눌러 초기 플러그인 설정을 진행한다. \n\n![](.index_images/c78a9517.png)\n\n![](.index_images/82bae04f.png)\n\n초기 Admin 유저를 생성할 수 있다.\n\n![](.index_images/a8f14e43.png)\n\njenkins의 기본 URL을 설정할 수 있다. 기본값을 권장한다. \n\n![](.index_images/84efb2c8.png)\n\n여기까지 했으면 초기 설정은 완료했다고 볼 수 있다.\n\n만약 위 과정에서 admin 유저를 생성하지 않았다면 `admin` 이라는 기본 유저로 로그인 할 수 있다고 설명하고 있다.\n비밀번호는 `initialAdminPassword` 과정에서 입력했던 값으로 설정되어있다.\n\n![](.index_images/60ba97ad.png)\n\n이렇게 Jenkins를 설치할 수 있다.\n\n## Reference\n\nhttps://www.jenkins.io/doc/book/installing/linux/\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀의 기술블로그를 만들기까지의 험난한 과정을 정리해보려고 한다. 플랫폼 선정 팀 블로그를 작성하기 위해 다양한 플랫폼들을 고려해봤다. 티스토리 티스토리는 팀 블로그 기능을 통해 다양한 작성자 및 관리자를 지정할 수 있다. 하지만 UI를 직접 수정할 수 없을 뿐더러 제공되어있는 스킨들이 대부분 …","fields":{"slug":"/blog-starter/"},"frontmatter":{"date":"July 09, 2023","title":"피움 블로그 생성과정","tags":["블로그","세팅"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)'가 작성했습니다.\n \n\n## 서론\n\n피움팀의 기술블로그를 만들기까지의 험난한 과정을 정리해보려고 한다.\n\n## 플랫폼 선정\n\n팀 블로그를 작성하기 위해 다양한 플랫폼들을 고려해봤다.\n\n### 티스토리\n\n티스토리는 팀 블로그 기능을 통해 다양한 작성자 및 관리자를 지정할 수 있다.\n\n하지만 UI를 직접 수정할 수 없을 뿐더러 제공되어있는 스킨들이 대부분 마음에 들지 않았다.\n\nUI 선정과정에 너무많은 힘을 들일 것 같아서 티스토리는 사용하지 않았다.\n\n### Notion\n\n현재 팀 문서 정리를 Notion으로 관리하고있다.\n\n자유롭게 템플릿을 관리할 수 있어서 가장 매력적으로 다가온 툴이였지만 SEO를 적용하지 못하고, 도메인을 별도로 지정해야한다는 단점이 있어 선택하지 않았다.\n\n> 중간에 vercel에서 제공하는 notion 배포기능을 사용하는 방식이 있었지만 Organizaiton으로 레포지토리를 관리하고 있는 현재 상황에서 해당 서비스를 이용하려면 유료였기 때문에 해당 부분도 사용하지 못했다.\n[Notion-backed Next.js Blog](https://vercel.com/templates/next.js/notion-blog)\n\n\n### Velog\n\n팀 계정을 생성해서 Velog에 글을 게시하는 방법을 생각해봤다.\n\n팀 계정을 생성한다는 부분에서 팀 프로젝트가 계속 진행되면서 계정을 관리하는 리소스가 추가되는것이 우려되었기 때문에 선택하지 않았다.\n\n\n### GitBook\n\nGitBook을 이용해서 팀 블로그를 운영할 수도 있겠지만 UI 구성적인 측면에서 기술블로그와는 거리가 멀었기 때문에 선택하지 않았다.\n\n\n### GitHub Pages\n\n정적인 페이지를 무료로 호스팅할 수 있고, 마음만 먹으면 자유롭게 커스터마이징 할 수 있는 환경이라는 부분이 매력있게 다가와 GitHub Pages를 선택했다.\n\n## GitHub Pages로 팀 블로그 만들기\n\n이제 본격적으로 GitHub Pages를 이용하여 팀 블로그를 만드는 과정을 차근차근 따라가보자.\n\ngatsby를 이용하여 블로그 배포를 진행했다. 사용한 템플릿은 gatsby-starter-hoodie이며 블로그에 친절하게 사용법이 게시되어있다.\n\n[🐙 gatsby-starter-hoodie](https://github.com/devHudi/gatsby-starter-hoodie)\n[🚀 gatsby-starter-hoodie 사용 방법 보러가기](https://hoodie.gatsbyjs.io/about-hoodie-kr/)\n\n> 필자는 gatsby에 대해 아무것도 모르는 상태로 해당 작업을 진행했습니다. 😵‍💫\n최대한 알기 쉽게 정리하려고 노력했습니다만... 잘못된 부분이 있다면 댓글로 남겨주시면 감사하겠습니다.\n\n### gatsby란?\n\n우선 사용하고자하는 gatsby가 무엇인지부터 알고 진행해보자.\n\n[위키백과](https://en.wikipedia.org/wiki/Gatsby_(JavaScript_framework))에 따르면\n\n**개츠비는 React와 GraphQL을 사용하여 Node.js 위에 구축된 오픈소스 정적 사이트 생성기입니다.**\n\n라고 설명되어있다.\n\n`Node.js 위에 구축된` 해당 문구로부터 로컬 환경에 Node.js가 필요하다는 것을 알 수 있다.\n\n### node 설치하기\n\n```shell\nbrew install node\n```\n\n![](.index_images/dd266184.png)\n\n`node -v` 명령어를 통해 잘 설치되었는지 확인해본다.\n\n### npx 설치하기\n\n리액트를 공부하자는 글이 아니기 때문에 간단히만 알고 넘어가자\n\nnpx는 npm 사용시에 발생하는 발생할 수 있는 여러 문제점을 해결하기 위해 설계되었다고한다.\n진행하는 과정에서 npx를 사용할 것이기 때문에 npx도 설치하고 넘어가자.\n\n```shell\nnpm install npx -g\n```\n\n![](.index_images/ff1c3736.png)\n\n`npx -v` 명령어를 통해 잘 설치되었는지 확인해본다.\n\n### gatsby-cli 설치하기\n\ngatsby 명령어를 사용하기 위해 gatsby-cli를 설치한다.\n\n```shell\nnpm install -g gatsby-cli\n```\n\n![](.index_images/6494ac93.png)\n\n`gatsby -v` 명령어를 통해 잘 설치되었는지 확인해본다.\n\n### Gatsby 사이트 생성\n\n> 여기서부터는 [Hudi의 Gatsby 환경 구성하기](https://hoodie.gatsbyjs.io/quick-start-kr/)를 따라가는 내용입니다.\n\n> 환경은 Pium의 프로젝트 환경에 맞게 진행됩니다.\n\ngatsby를 이용하여 새로운 사이트를 생성한다.\n이때 `gatsby-starter-hoodie`를 참고하여 구성한다.\n\n```node\nnpx gatsby new pium-official.github.io https://github.com/devHudi/gatsby-starter-hoodie\n```\n\n### 프로젝트 시작해보기\n\n``` shell\ncd pium-official.github.io\n\nnpm run start\n```\n\n![](.index_images/19f5a8e2.png)\n\n`localhost:8000`으로 프로젝트가 열리는 모습을 볼 수 있다.\n\n![](.index_images/7810b698.png)\n\n### 블로그 커스텀하기\n\n해당 부분은 원작자의 [🚀 2.빠르게 시작하기](https://hoodie.gatsbyjs.io/quick-start-kr/)를 참고하여 진행하면 된다.\n\n### GitHub Pages로 배포하기\n\n이제 배포할 페이지를 다 만들었다!\nGitHub Pages를 이용해 배포를 진행해보자.\n\n우선 GitHub Repository를 생성한다.\n\n> pium-official Organization에서 `pium-official.github.io` 레포지토리를 생성했다.\n\n![](.index_images/b084df05.png)\n\n```shell\ngit remote add origin https://github.com/pium-official/pium-official.github.io\n```\n\n```node\nnpm run deploy-gh\n```\n\n위 명령어를 수행하면 팀 레포지토리에 gh-pages 브랜치가 생성되고 build된 결과물이 올라온다. 해당 파일을 기준으로 GitHub Pages에서 배포를 진행한다.\n\n![](.index_images/3db58ec3.png)\n\n> GitHub Pages에서 배포 기준으로 잡는 브랜치를 확인 & 변경하고 싶다면 Settings - Pages 에서 다음 항목을 확인하면 된다.\n> ![](.index_images/b9a5c99c.png)\n\n![](.index_images/1877666d.png)\n\nGitHub Actions 탭에서 `pages build and deployment` 작업이 완료된것을 확인하고 https://pium-official.github.io/ 로 접속해보면 페이지가 성공적으로 배포된것을 확인할 수 있다!!\n\n> https:://{팀 레포명}.github.io\n\n![](.index_images/f35d015e.png)\n\n### 글 작성하기\n\n해당 템플릿에 글을 작성하는 방식은 원작자의 [🤔 3. 작성 가이드](https://hoodie.gatsbyjs.io/writing-guide-kr/)를 참고하면 된다.\n\n### GitHub Actions workflow\n\n현재까지 진행한 작업으로는 다음과 같은 흐름으로 배포를 진행할 수 있다.\n\n1. 로컬에서 글을 작성한다.\n2. 글을 작성한 뒤 `npm run deploy-gh` 명령어를 수행해서 배포를 진행한다.\n\n위 방식은 혼자서 작업할 때는 문제가 없으나 여러명이 함께 글을 작성하기에는 많이 번거롭다.\n\n우리는 다음과 같은 방식으로 배포를 하는 방향을 기대하고 있다.\n\n1. 로컬에서 글을 작성한다.\n2. 글을 작성한 뒤 main 브랜치로 push한다.\n3. main 브랜치에 작업내용이 push 되었을 때 빌드 및 배포가 자동적으로 이뤄진다.\n\n위에서 3번 작업내용을 수행하기 위해 GitHub Actions의 workflow 기능을 이용할 수 있다.\n\n### workflow 작성하기\n\n`gatsby-starter-hoodie`에서 기본적으로 제공하고 있는 workflow는 다음과 같이 구성되어있다.\n\n```yml\nname: CI\n\non:\n  pull_request:\n    branches:\n      - main\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v2\n      - uses: actions/setup-node@v2\n        with:\n          node-version: 20.3.1\n\n      - name: Install node packages\n        run: yarn\n        \n      - name: Check lint\n        run: yarn check:lint\n        \n      - name: Check prettier\n        run: yarn check:prettier\n      \n      - name: Build\n        run: yarn build\n```\n\n> 자세한 구문에 대한 설명 및 내용은 [공식문서](https://docs.github.com/ko/actions/using-workflows/workflow-syntax-for-github-actions)를 참고해보면 좋다.\n\n기존에 존재하는 ci.yml 파일은 삭제하고 아래와 같은 deploy.yml을 작성해보자.\n\n> workflow에 대한 yml파일의 경로는 반드시 `.github/workflows` 폴더 내부에 존재해야한다.\n> ![](.index_images/d9fc2f50.png)\n \n\n```yml\nname: Deploy\n\non: # 어떤 작업이 수행될 때 deploy.yml 작업이 수행된다. (트리거)\n  push: # push 작업이 수행될 때\n    branches: # 특정 브랜치를 대상으로\n      - main\n\npermissions: # github action이 수행되는 환경에서 특정 권한을 준다\n  contents: write\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v2\n      - uses: actions/setup-node@v2\n        with:\n          node-version: 20.3.1\n\n      - name: Install node packages\n        run: yarn\n\n      - name: Build\n        run: yarn build\n\n      - name: Deploy 🚀\n        uses: JamesIves/github-pages-deploy-action@v4\n        with:\n          folder: public\n```\n\n> `JamesIves/github-pages-deploy-action@v4` 작업에서 수행하는 내용 중 쓰기권한을 요구하는 작업이 있기 때문에 permissions 설정을 해야한다.\n[관련 이슈 - Failed with exit code 128, Permission Denied](https://github.com/JamesIves/github-pages-deploy-action/issues/1110)\n\n위 deploy.yml 파일을 작성했다면 프로젝트 내부에서 변경사항에 대한 commit을 수행하고 git push를 해본다.\n\n``` shell\ngit branch -m main\n\ngit push origin main\n```\n\n![](.index_images/0491f96f.png)\n\n위 내용을 대략적으로 설명해보자면 다음과 같다.\n\nmain 브랜치에 대한 코드를 build해보고 성공한다면 결과물을 gh-pages 브랜치로 배포한다.\n\n이제 글을 작성하고 main 브랜치로 push하기만 하면 배포까지 자동으로 수행된다.\n로컬에서 `npm run deploy-gh`는 더이상 사용할 필요가 없다.\n\n## 결론\n\n블로그를 생성하고 배포하고 자동화하는 과정까지 차근차근 진행해봤다.\n\n여러버 삽질을 거친 끝에 완성했기 때문에 더 애정이 많이 가는 것 같다. 👍\n\n## Reference\n\nhttps://hoodie.gatsbyjs.io/\nhttps://docs.github.com/ko/actions/using-workflows/workflow-syntax-for-github-actions\nhttps://studium-anywhere.tistory.com/21\n"},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 기획부터 개발까지 하나의 프로그램이 생성되는 모든 프로세스를 경험할 수 있는 시간을 가졌다. 피움팀에서 어떤 방식을 통해 아이디어와 기능을 도출해나갔는지 기록해두고자 한다. 스프린트란? 스프린트는 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간을 의미한다. 여기서는 기획부터 데모수준의 프로…","fields":{"slug":"/sprint-idea/"},"frontmatter":{"date":"July 08, 2023","title":"구글 스프린트 기반 아이디어 도출","tags":["아이디어","기획"]},"rawMarkdownBody":"\n> 이 글은 우테코 피움팀 크루 '[주노](https://github.com/Choi-JJunho)'가 작성했습니다.\n\n## 서론\n\n기획부터 개발까지 하나의 프로그램이 생성되는 모든 프로세스를 경험할 수 있는 시간을 가졌다.\n\n피움팀에서 어떤 방식을 통해 아이디어와 기능을 도출해나갔는지 기록해두고자 한다.\n\n## 스프린트란?\n\n스프린트는 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간을 의미한다.\n\n여기서는 기획부터 데모수준의 프로그램이 나오는 단계까지를 하나의 스프린트라고 생각해볼 수 있겠다.\n\n피움 팀은 구글 스프린트의 방법론을 차용해서 기능을 도출했다.\n\n### 구글 스프린트\n\n![](.index_images/googlesprint.png)\n\n5일간 결과물을 도출하는 방법론으로 다음과 같은 17단계로 이어진다.\n\n1. 현재 상황에 대한 구성원들의 생각과 문제 상황 공유\n2. 스프린트를 통해 해결하고자 하는 목표 설정\n3. 스프린트 질문 도출\n4. 이해관계자의 구매 여정 Map 작성\n5. 전문가 조언\n6. HMW(어떻게 하면 ~할 수 있을까) 작성 및 선정\n7. 스프린트 기간에 주력하고자 하는 1순위 타깃과 질문 선정\n8. 번갯불 대화 및 솔루션 스케치\n9. 고객 선정을 위한 설문지 작성\n10. 프로토타입 제작을 위한 최종 솔루션 선정\n11. 프로토타입 제작을 위한 스토리보드 만들기\n12. 프로토타입 제작\n13. 프로토타입 완성 및 시연\n14. 고객 인터뷰용 질문 만들기 (인터뷰 담당자)\n15. 타깃 고객 인터뷰 및 학습\n16. 스프린트 이후의 개발 플랜 점검 및 향후 일정 논의\n17. 성찰\n\n### Figma - Figjam\n\n오프라인 환경에서 종이, 캔버스, 포스트잇을 이용해서 각자의 의견을 종합해볼 수도 있지만 시간, 공간적 제약이 있을 때는 Figma를 사용해볼 수도 있다.\n\n디자인 툴인 Figma에는 Figjam이라는 기능을 제공한다.\n\n![](.index_images/figjam.png)\n\nFigjam에서는 포스트잇, 연필그리기, 스티커붙이기, 타이머 등의 기능들을 제공한다.\n\n> 개인적으로 타이머 기능을 적극 활용하는 것이 좋다고 생각했다.\n위 [구글 스프린트](###구글-스프린트)의 `8. 번갯불 대화 및 솔루션 스케치` 항목에서 추구하는 목적이 무엇인지 생각해보면 정해진 시간내로 서로의 의견을 제시하여 회의가 늘어지지 않게 하기 위함임을 알 수 있다.\n정해야할 내용이 많은 만큼 시간이 늘어지는 것만큼은 가장 경계해야한다고 생각한다.\n\n## 서비스 주제\n\n![](.index_images/b95b5dfe.png)\n\n`식물을 잘 키울 수 있도록 도와주는 서비스`라는 주제로 팀이 이뤄졌다.\n\n위 포스터를 확인했을 때 큰 주제로 추상적인 목표들이 즐비해있음을 확인할 수 있다.\n주어진 시간이 짧기 때문에 핵심기능을 추려야할 필요가 있다.\n\n> 💡 모든 과정을 진행할 때 이야기를 듣는 사람들은 형광펜 혹은 스티커 기능을 이용해 중요하다고 생각하는 부분에 색칠을 하며 듣는다. 형광펜과 스티커를 이용한 호응을 이용해 공통 관심사에 집중할 수 있으며 집중력이 분산되는 것도 예방할 수 있다.\n\n> ⏰ 모든 과정에는 제한시간이 존재한다.\n제한시간을 두고 회의가 루즈해지는 것을 막아야만한다!!\n\n### 서비스의 목적과 가치\n\n![](.index_images/959281a8.png)\n\n서비스의 목적과 가치에 대해 구상한다.\n\n이 단계에서는 `서비스가 어떤 기능을 제공함으로서 어떤 문제를 해결한다`를 이야기하며 각자가 추상적인 목표를 어떤 방향으로 구체화하고 있는지 공유한다.\n\n> ⏰ 제한시간 : 3분\n\n### 서비스의 대상\n\n![](.index_images/db53c739.png)\n\n어떤 사용자가 이 서비스를 사용할 지 떠올리고 각자의 생각을 작성한다.\n\n이후 각자가 자신의 생각을 이야기하는 시간을 가진다.\n\n> ⏰ 제한시간 : 3분\n\n\n### 어떻게 하면 ~문제를 해결할 수 있을까?\n\n![](.index_images/1c560fdf.png)\n\n어떻게 하면 ~ 문제를 해결할 수 있을까? 라는 질문들을 작성하고 이야기한다.\n\n이 과정을 통해 해결해야할 문제들을 인지할 수 있다.\n\n이 때 기술적인 질문이 나오지 않도록 경계해야한다.\n해당 과정을 수행하는 이유는 서비스의 목적을 구체화하기 위함이다.\n\n- 어떻게 하면 제 시간에 식물에 물을 줄 수 있을까? (O)\n- 어떻게 하면 무중단 배포를 할 수 있을까? (X)\n\n> ⏰ 제한시간 : 5 ~ 8분\n\n### 워드 클라우드\n\n![](.index_images/07da0c75.png)\n\n위 단계에서 나온 키워드들을 기준으로 단어들을 나열한다.\n중요하게 생각되는 단어들은 크고 굵게 표기한다.\n\n이 과정을 통해 키워드를 간략하게 추릴 수 있다.\n\n> ⏰ 제한시간 : X\n\n### (선택) 모바일 vs 데스크탑\n\n![](.index_images/8f5a28d2.png)\n\n생각하는 서비스가 어떤 환경에서 운영될지 생각해본다.\n\n이 과정을 통해 서비스가 어떻게 그려질지 대략적으로 생각해볼 수 있다.\n\n> ⏰ 제한시간 : 2분\n\n### 장치/요소/기능 브레인스토밍\n\n![](.index_images/2d693ea9.png)\n\n앞서 설정한 문제, 키워드 등을 참고하여 개발하고자 하는 서비스에 있을 것 같은 기능들을 브레인 스토밍 식으로 작성한다.\n\n이 과정을 통해 서비스에 존재할 수 있는 기능들을 파악할 수 있다.\n\n> ⏰ 제한시간 : 5 ~ 8분\n\n### 지도 만들기\n\n![](.index_images/2bb017bc.png)\n\n앞서 정의한 서비스 대상을 참고하여 구체적인 페르소나를 지정한다.\n페르소나를 참고하여 어떤 페이지들이 존재할지 생각해본다.\n\n위(`장치/요소/기능 브레인스토밍`)에서 도출된 기능들을 기반으로 각 페이지에 기능들을 작성한다.\n\n이 과정을 통해 대략적인 서비스 흐름과 구성을 생각해 볼 수 있다.\n\n> ⏰ 제한시간 : X\n\n### 페이지 그려보기\n\n![](.index_images/efe27f26.png)\n\n위 `지도 만들기` 활동에서 도출된 페이지들을 직접 그려보는 시간을 가진다.\n팀원들 각자가 페이지가 어떻게 구성될지 대략적으로 그려본다.\n\n잘 그릴 필요는 없다. 연필로 어떤 버튼이 어디에 위치할지, 어떤 기능이 존재하는지 정도만 알아볼 수 있을정도로 가볍게 스케치해도 좋다.\n\n이 과정을 통해 각자가 생각하는 View를 공유하면서 서비스의 구현 방향성에 대한 싱크를 맞춰갈 수 있다.\n\n> ⏰ 제한시간 : 각 페이지별 5분\n\n### 결정권자 정하기 & 페이지 정하기\n\n![](.index_images/9f853c4e.png)\n\n위 과정에서 작성한 페이지 중 하나의 페이지를 결정하기 위해 결정권자를 정한다.\n\n결정권자는 팀원들의 투표로 정하고 페이지를 결정할 때 만큼은 결정권자의 권한이 가장 높은 수직적인 구조로 진행된다.\n즉, 다시말해 페이지는 결정권자의 선택으로 정해진다.\n\n결정권자를 뽑았다면 각 페이지를 정하는 시간을 가진다.\n\n이 때 결정권자가 아닌 다른 팀원들은 자신의 페이지 혹은 자신이 마음에 드는 페이지에 대해 결정권자를 설득한다.\n\n페이지를 결정 할 때 여러 페이지의 기능을 합칠 수도 있다.\n\n> ⏰ 제한시간 : 각 페이지별 5분 \n> 결정된 페이지들은 명예의전당👑 에 복사하여 올려둔다.\n> ![](.index_images/e4e8a0fb.png)\n\n\n### BDD\n\nBDD(Behavior Driven Development, 행위 주도 개발) 방법론을 차용한 방식으로 given - when - then 절로 해당 페이지에서 일어날 수 있는 모든 이벤트에 대해 정의한다.\n\n이 과정을 통해 구체적인 기능 명세를 할 수 있다.\n\n![](.index_images/faa7372e.png)\n\n해당 방식은 UI 기반의 기능 명세에 치중할 수 있기 때문에 API 설계가 요구된다면 API 명세를 하는것을 추천한다.\n\n> ⏰ 제한시간 : X\n\n## 결론\n\n구글 스프린트를 기반으로 피움 팀이 아이디어를 구체화하는 과정을 정리해봤다.\n\n아이디어 도출 과정에 정답은 없지만 스프린트를 처음 해본 입장에서는 참고하면 좋은 방법이라고 생각되어 기록으로 남겨봤다.\n\n## Reference\n\n[구글스프린트](https://brunch.co.kr/@brunchjwshim/90)\n[테오의 스프린트](https://velog.io/@teo/google-sprint-14)\n[Atlassian Sprint](https://www.atlassian.com/ko/agile/scrum/sprints)\nhttps://www.thesprintbook.com/the-design-sprint"}]}},"pageContext":{}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/series/page-data.json b/page-data/series/page-data.json
index 7dfd7d39..0a199cce 100644
--- a/page-data/series/page-data.json
+++ b/page-data/series/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-pages-series-jsx","path":"/series/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"allMarkdownRemark":{"group":[{"fieldValue":"CI","totalCount":1},{"fieldValue":"CI/CD","totalCount":2},{"fieldValue":"DB","totalCount":1},{"fieldValue":"HTTPS","totalCount":1},{"fieldValue":"JPA","totalCount":1},{"fieldValue":"MySQL","totalCount":1},{"fieldValue":"OAuth2.0","totalCount":1},{"fieldValue":"React","totalCount":1},{"fieldValue":"React Query","totalCount":1},{"fieldValue":"RestDocs","totalCount":2},{"fieldValue":"SpringbootTest","totalCount":1},{"fieldValue":"Tanstack Query","totalCount":1},{"fieldValue":"Transaction","totalCount":1},{"fieldValue":"Validation","totalCount":1},{"fieldValue":"Webhook","totalCount":1},{"fieldValue":"Webpack","totalCount":1},{"fieldValue":"bundle","totalCount":1},{"fieldValue":"husky","totalCount":1},{"fieldValue":"nullable","totalCount":1},{"fieldValue":"stylelint","totalCount":1},{"fieldValue":"기획","totalCount":1},{"fieldValue":"리액트 쿼리","totalCount":1},{"fieldValue":"문서화","totalCount":1},{"fieldValue":"배포","totalCount":1},{"fieldValue":"블로그","totalCount":1},{"fieldValue":"설정","totalCount":2},{"fieldValue":"세팅","totalCount":1},{"fieldValue":"아이디어","totalCount":1},{"fieldValue":"인수테스트","totalCount":1},{"fieldValue":"인프라","totalCount":1},{"fieldValue":"젠킨스","totalCount":3},{"fieldValue":"최적화","totalCount":1},{"fieldValue":"컨벤션","totalCount":1},{"fieldValue":"테스트","totalCount":2}],"nodes":[{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 사건의 발단  3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.  그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다. 당황하지 않고 침착하게 f12를 눌러 개발자도구를 열고 네트워크탭을 확인해보니 API가 이상하게 호출되고있었다. 평소 프론트분들을 굉장…","fields":{"slug":"/restdocs-start/"},"frontmatter":{"date":"August 11, 2023","update":"Aug 11, 2023","title":"RestDocs로 API 문서화하기","tags":["문서화","RestDocs","테스트"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. OAuth란? 현재 개발하고 있는 서비스에서 구글 캘린더에 접근을 한다고 가정을 해봅시다. 현재 접근하는 사용자의 구글 캘린더 정보를 얻고자 한다면 구글 계정으로 로그인을 해야합니다. 진짜 간단한 방법이 있습니다. 사용자로부터 구글 id와 password를 받고 저희가 대신 로그인 해서 해당 사용자의 …","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"date":"August 10, 2023","update":"Aug 10, 2023","title":"내가 이해한 OAuth2.0","tags":["OAuth2.0"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. style-lint, husky를 통한 컨벤션 자동화 하기 프로젝트는 혼자 할 수 도 있지만 팀원들과 함께 진행하는 경우도 있습니다. 피움의 경우에 팀원들과 함께 진행하고 있습니다. 개인적으로 생각했을 때 코드를 작성한다는 것은 그 자체로 하나의 문서를 만드는 것이라고 생각합니다. 그리고 그 문서의 양…","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"date":"August 07, 2023","update":"Aug 07, 2023","title":"stylelint와 husky를 통해 컨벤션 통일하기","tags":["stylelint","husky","컨벤션"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. CRA없에 webpack으로 react 세팅하기 피움 서비스 환경을 만들기로 하면서, FE의 개발 스펙은 React + TypeScript로 설정하였습니다. React는 당연 현존 최강 라이브러리이고, 여기에 JavaScript의 동적 타입을 컴파일 단계에서 잡아주는 TypeScript까지 더해서 안정…","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"date":"August 06, 2023","update":"Aug 06, 2023","title":"webpack으로만 React 설정하기 (without CRA)","tags":["React","Webpack"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 인수테스트를 작성하면서 다음과 같은 문제가 발생했다. RestAssured를 사용하고 있다. 각 테스트별로 (DB)데이터가 격리된 테스트를 수행하고 싶다. 이에 다음과 같은 시행착오를 거쳤다. 최종적으로 작성된 코드를 보고싶다면 최종코드를 확인해주세요. 시행착오 JPA를 사용하고 있는 현 시점에서…","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"date":"August 03, 2023","update":"Aug 03, 2023","title":"인수테스트 데이터 초기화하기","tags":["인수테스트","RestDocs","테스트"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '하마드'가 작성했습니다. 개요 우아한테크코스 5기 피움 서비스의 인수 테스트를 작성하던 도중, 실제 포트에 애플리케이션을 구동시켜 테스트를 하는 \n환경에서 테스트를 할 때, 테스트 메소드에서 분명히 해당 리소스를 저장했는데도 RestAssured의 GET 요청이 수행되지 않는 경우가 있었다. 이 이유를 파악하고 해결 과정을 …","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"date":"July 31, 2023","update":"Jul 31, 2023","title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)","tags":["Transaction","SpringbootTest"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 현재 피움팀 서버는  요청으로 이뤄져있다.\n는 WWW 상에서 정보를 주고 받는 프로토콜인데, 누군가 네트워크에서 신호를 가로채면 내용이 노출되는 문제가 발생할 수 있다.\n이를 해결해주는 프로토콜이 바로 이다. 는 정보를 암호화하는 SSL을 이용한 프로토콜이다. …","fields":{"slug":"/apply-https/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"내 서버에 HTTPS 설정하기","tags":["HTTPS"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. 사건의 발단 이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국  파일의 크기를 보니 무려 16m…","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"bundle-analyze를 통한 bundle 크기 분석","tags":["bundle","최적화"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 본 설명 글은 다음과 같은 환경에서 진행됩니다. 배포서버 : Ubuntu 22.04.2 LTS DB서버 : Ubuntu 22.04.2 LTS 배포서버와 DB서버는 동일한 VPC를 사용하고 있습니다. DB : MySQL 8.0.33 Application : Spr…","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"Table Drop 못하게 막아버리기","tags":["DB","MySQL"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 현재 피움팀의 젠킨스에서 빌드 트리거로 을 사용하고있다.  해당 설정은 Github에서 유발되는 모든 WebHook에 대해 빌드 트리거가 동작하는 설정이다.  빌드 스크립트에서 위처럼 triggers 설정을 별도로 지정할 수 있지만 현재 프로젝트 구조상 더 세분화된 설정이 필요한 상태다.  현재 …","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"date":"July 25, 2023","update":"Jul 25, 2023","title":"PR 라벨로 젠킨스 빌드유발을 구분하기","tags":["젠킨스","CI"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 이번 피움 서비스에서 CI/CD를 적용하기 위해 Jekins와 Github Webhook을 이용했습니다. 본 글에서는 Jenkins와 Github Webhook을 이용한 SpringBoot 서버 자동 빌드, 자동 배포 과정을 다루겠습니다. Jenkins 설치 과정은 피움 팀 젠킨스 설치하기 를 참고하…","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"date":"July 24, 2023","update":"Jul 24, 2023","title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기","tags":["CI/CD","젠킨스","Webhook","설정"],"series":null}},{"excerpt":"이 글은 우아한테크코스 5기, 피움팀 크루 '참새'가 작성했습니다. 서론  피움의 프론트엔드에서는 서버 상태 관리를 위해 Tanstack Query를 사용하기로 하였다. 이 글에서는 많고 많은 상태 관리 라이브러리 중 Tanstack Query를 사용하기로 결정한 이유를 소개하고자 한다. 설치한 버전: 5.0.0-alpha.86 Tanstack query…","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"date":"July 23, 2023","update":"Jul 23, 2023","title":"프론트엔드: Tanstack Query 사용에 대하여","tags":["Tanstack Query","React Query","리액트 쿼리"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론  http://pium.life 로 접속하면 피움의 홈페이지가 나오기까지의 과정을 기록으로 남겨보려고 한다. 본 과정은 서버 구축을 처음 하면서 과정을 이해하기위해 작성된 글입니다. 빠르게 따라할 수 있는 설정 기반 글을 원한다면 마지막 목차인 정리를 확인해보시길 바랍니다. 본 과정에서는 소량의 …","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"date":"July 18, 2023","update":"Jul 18, 2023","title":"피움의 배포과정","tags":["배포","인프라"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다. 정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.\n이에 Jenkins를 설치하고 환경설정을 빌드서버 환경을 구축한 일련의 과정을 기록해두려고한다. 작업 환경 : Ubuntu 22.04.2 LTS 공식문서 살펴보기 젠킨스 공…","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"date":"July 16, 2023","update":"Jul 16, 2023","title":"젠킨스 설치하기","tags":["CI/CD","젠킨스","설정"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 서론 JPA를 이용해 엔티티를 설계하다가  어노테이션과 @Column의 의 차이점이 궁금해져 알아보았습니다. nullable = false ?? JPA는 엔티티를 매핑하고 설계하면 자동으로 DDL을 생성해 주는 기능을 제공합니다. \n또한 엔티티의 각 컬럼들에 대해 NOT NULL, UNIQUE 등과 …","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"date":"July 16, 2023","update":"Jul 16, 2023","title":"@NotNull과 nullable = false는 어떤 차이가 있을까?","tags":["JPA","Validation","nullable"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀의 기술블로그를 만들기까지의 험난한 과정을 정리해보려고 한다. 플랫폼 선정 팀 블로그를 작성하기 위해 다양한 플랫폼들을 고려해봤다. 티스토리 티스토리는 팀 블로그 기능을 통해 다양한 작성자 및 관리자를 지정할 수 있다. 하지만 UI를 직접 수정할 수 없을 뿐더러 제공되어있는 스킨들이 대부분 …","fields":{"slug":"/blog-starter/"},"frontmatter":{"date":"July 09, 2023","update":"Jul 09, 2023","title":"피움 블로그 생성과정","tags":["블로그","세팅"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 기획부터 개발까지 하나의 프로그램이 생성되는 모든 프로세스를 경험할 수 있는 시간을 가졌다. 피움팀에서 어떤 방식을 통해 아이디어와 기능을 도출해나갔는지 기록해두고자 한다. 스프린트란? 스프린트는 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간을 의미한다. 여기서는 기획부터 데모수준의 프로…","fields":{"slug":"/sprint-idea/"},"frontmatter":{"date":"July 08, 2023","update":"Jul 08, 2023","title":"구글 스프린트 기반 아이디어 도출","tags":["아이디어","기획"],"series":null}}]}},"pageContext":{}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-pages-series-jsx","path":"/series/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"allMarkdownRemark":{"group":[{"fieldValue":"CI","totalCount":1},{"fieldValue":"CI/CD","totalCount":2},{"fieldValue":"DB","totalCount":1},{"fieldValue":"HTTPS","totalCount":1},{"fieldValue":"JPA","totalCount":1},{"fieldValue":"MySQL","totalCount":1},{"fieldValue":"OAuth2.0","totalCount":1},{"fieldValue":"React","totalCount":1},{"fieldValue":"React Query","totalCount":1},{"fieldValue":"RestDocs","totalCount":2},{"fieldValue":"SpringbootTest","totalCount":1},{"fieldValue":"Tanstack Query","totalCount":1},{"fieldValue":"Transaction","totalCount":1},{"fieldValue":"Validation","totalCount":1},{"fieldValue":"Webhook","totalCount":1},{"fieldValue":"Webpack","totalCount":1},{"fieldValue":"bundle","totalCount":1},{"fieldValue":"husky","totalCount":1},{"fieldValue":"nullable","totalCount":1},{"fieldValue":"stylelint","totalCount":1},{"fieldValue":"기획","totalCount":1},{"fieldValue":"리액트 쿼리","totalCount":1},{"fieldValue":"문서화","totalCount":1},{"fieldValue":"배포","totalCount":1},{"fieldValue":"블로그","totalCount":1},{"fieldValue":"설정","totalCount":2},{"fieldValue":"세팅","totalCount":1},{"fieldValue":"아이디어","totalCount":1},{"fieldValue":"인수테스트","totalCount":1},{"fieldValue":"인프라","totalCount":1},{"fieldValue":"젠킨스","totalCount":3},{"fieldValue":"최적화","totalCount":1},{"fieldValue":"컨벤션","totalCount":1},{"fieldValue":"테스트","totalCount":2}],"nodes":[{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 사건의 발단  3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.  그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다. 당황하지 않고 침착하게 f12를 눌러 개발자도구를 열고 네트워크탭을 확인해보니 API가 이상하게 호출되고있었다. 평소 프론트분들을 굉장…","fields":{"slug":"/restdocs-start/"},"frontmatter":{"date":"August 11, 2023","update":"Aug 11, 2023","title":"RestDocs로 API 문서화하기","tags":["문서화","RestDocs","테스트"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. OAuth란? 현재 개발하고 있는 서비스에서 구글 캘린더에 접근을 한다고 가정을 해봅시다. 현재 접근하는 사용자의 구글 캘린더 정보를 얻고자 한다면 구글 계정으로 로그인을 해야합니다. 진짜 간단한 방법이 있습니다. 사용자로부터 구글 id와 password를 받고 저희가 대신 로그인 해서 해당 사용자의 …","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"date":"August 10, 2023","update":"Aug 10, 2023","title":"내가 이해한 OAuth2.0","tags":["OAuth2.0"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. style-lint, husky를 통한 컨벤션 자동화 하기 프로젝트는 혼자 할 수 도 있지만 팀원들과 함께 진행하는 경우도 있습니다. 피움의 경우에 팀원들과 함께 진행하고 있습니다. 개인적으로 생각했을 때 코드를 작성한다는 것은 그 자체로 하나의 문서를 만드는 것이라고 생각합니다. 그리고 그 문서의 양…","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"date":"August 07, 2023","update":"Aug 07, 2023","title":"stylelint와 husky를 통해 컨벤션 통일하기","tags":["stylelint","husky","컨벤션"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. CRA없에 webpack으로 react 세팅하기 피움 서비스 환경을 만들기로 하면서, FE의 개발 스펙은 React + TypeScript로 설정하였습니다. React는 당연 현존 최강 라이브러리이고, 여기에 JavaScript의 동적 타입을 컴파일 단계에서 잡아주는 TypeScript까지 더해서 안정…","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"date":"August 06, 2023","update":"Aug 06, 2023","title":"webpack으로만 React 설정하기 (without CRA)","tags":["React","Webpack"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 인수테스트를 작성하면서 다음과 같은 문제가 발생했다. RestAssured를 사용하고 있다. 각 테스트별로 (DB)데이터가 격리된 테스트를 수행하고 싶다. 이에 다음과 같은 시행착오를 거쳤다. 최종적으로 작성된 코드를 보고싶다면 최종코드를 확인해주세요. 시행착오 JPA를 사용하고 있는 현 시점에서…","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"date":"August 03, 2023","update":"Aug 03, 2023","title":"인수테스트 데이터 초기화하기","tags":["인수테스트","RestDocs","테스트"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '하마드'가 작성했습니다. 개요 우아한테크코스 5기 피움 서비스의 인수 테스트를 작성하던 도중, 실제 포트에 애플리케이션을 구동시켜 테스트를 하는 \n환경에서 테스트를 할 때, 테스트 메소드에서 분명히 해당 리소스를 저장했는데도 RestAssured의 GET 요청이 수행되지 않는 경우가 있었다. 이 이유를 파악하고 해결 과정을 …","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"date":"July 31, 2023","update":"Jul 31, 2023","title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)","tags":["Transaction","SpringbootTest"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. 사건의 발단 이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국  파일의 크기를 보니 무려 16m…","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"bundle-analyze를 통한 bundle 크기 분석","tags":["bundle","최적화"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 현재 피움팀 서버는  요청으로 이뤄져있다.\n는 WWW 상에서 정보를 주고 받는 프로토콜인데, 누군가 네트워크에서 신호를 가로채면 내용이 노출되는 문제가 발생할 수 있다.\n이를 해결해주는 프로토콜이 바로 이다. 는 정보를 암호화하는 SSL을 이용한 프로토콜이다. …","fields":{"slug":"/apply-https/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"내 서버에 HTTPS 설정하기","tags":["HTTPS"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 본 설명 글은 다음과 같은 환경에서 진행됩니다. 배포서버 : Ubuntu 22.04.2 LTS DB서버 : Ubuntu 22.04.2 LTS 배포서버와 DB서버는 동일한 VPC를 사용하고 있습니다. DB : MySQL 8.0.33 Application : Spr…","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"Table Drop 못하게 막아버리기","tags":["DB","MySQL"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 현재 피움팀의 젠킨스에서 빌드 트리거로 을 사용하고있다.  해당 설정은 Github에서 유발되는 모든 WebHook에 대해 빌드 트리거가 동작하는 설정이다.  빌드 스크립트에서 위처럼 triggers 설정을 별도로 지정할 수 있지만 현재 프로젝트 구조상 더 세분화된 설정이 필요한 상태다.  현재 …","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"date":"July 25, 2023","update":"Jul 25, 2023","title":"PR 라벨로 젠킨스 빌드유발을 구분하기","tags":["젠킨스","CI"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 이번 피움 서비스에서 CI/CD를 적용하기 위해 Jekins와 Github Webhook을 이용했습니다. 본 글에서는 Jenkins와 Github Webhook을 이용한 SpringBoot 서버 자동 빌드, 자동 배포 과정을 다루겠습니다. Jenkins 설치 과정은 피움 팀 젠킨스 설치하기 를 참고하…","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"date":"July 24, 2023","update":"Jul 24, 2023","title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기","tags":["CI/CD","젠킨스","Webhook","설정"],"series":null}},{"excerpt":"이 글은 우아한테크코스 5기, 피움팀 크루 '참새'가 작성했습니다. 서론  피움의 프론트엔드에서는 서버 상태 관리를 위해 Tanstack Query를 사용하기로 하였다. 이 글에서는 많고 많은 상태 관리 라이브러리 중 Tanstack Query를 사용하기로 결정한 이유를 소개하고자 한다. 설치한 버전: 5.0.0-alpha.86 Tanstack query…","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"date":"July 23, 2023","update":"Jul 23, 2023","title":"프론트엔드: Tanstack Query 사용에 대하여","tags":["Tanstack Query","React Query","리액트 쿼리"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론  http://pium.life 로 접속하면 피움의 홈페이지가 나오기까지의 과정을 기록으로 남겨보려고 한다. 본 과정은 서버 구축을 처음 하면서 과정을 이해하기위해 작성된 글입니다. 빠르게 따라할 수 있는 설정 기반 글을 원한다면 마지막 목차인 정리를 확인해보시길 바랍니다. 본 과정에서는 소량의 …","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"date":"July 18, 2023","update":"Jul 18, 2023","title":"피움의 배포과정","tags":["배포","인프라"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 서론 JPA를 이용해 엔티티를 설계하다가  어노테이션과 @Column의 의 차이점이 궁금해져 알아보았습니다. nullable = false ?? JPA는 엔티티를 매핑하고 설계하면 자동으로 DDL을 생성해 주는 기능을 제공합니다. \n또한 엔티티의 각 컬럼들에 대해 NOT NULL, UNIQUE 등과 …","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"date":"July 16, 2023","update":"Jul 16, 2023","title":"@NotNull과 nullable = false는 어떤 차이가 있을까?","tags":["JPA","Validation","nullable"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다. 정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.\n이에 Jenkins를 설치하고 환경설정을 빌드서버 환경을 구축한 일련의 과정을 기록해두려고한다. 작업 환경 : Ubuntu 22.04.2 LTS 공식문서 살펴보기 젠킨스 공…","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"date":"July 16, 2023","update":"Jul 16, 2023","title":"젠킨스 설치하기","tags":["CI/CD","젠킨스","설정"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀의 기술블로그를 만들기까지의 험난한 과정을 정리해보려고 한다. 플랫폼 선정 팀 블로그를 작성하기 위해 다양한 플랫폼들을 고려해봤다. 티스토리 티스토리는 팀 블로그 기능을 통해 다양한 작성자 및 관리자를 지정할 수 있다. 하지만 UI를 직접 수정할 수 없을 뿐더러 제공되어있는 스킨들이 대부분 …","fields":{"slug":"/blog-starter/"},"frontmatter":{"date":"July 09, 2023","update":"Jul 09, 2023","title":"피움 블로그 생성과정","tags":["블로그","세팅"],"series":null}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 기획부터 개발까지 하나의 프로그램이 생성되는 모든 프로세스를 경험할 수 있는 시간을 가졌다. 피움팀에서 어떤 방식을 통해 아이디어와 기능을 도출해나갔는지 기록해두고자 한다. 스프린트란? 스프린트는 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간을 의미한다. 여기서는 기획부터 데모수준의 프로…","fields":{"slug":"/sprint-idea/"},"frontmatter":{"date":"July 08, 2023","update":"Jul 08, 2023","title":"구글 스프린트 기반 아이디어 도출","tags":["아이디어","기획"],"series":null}}]}},"pageContext":{}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/sprint-idea/page-data.json b/page-data/sprint-idea/page-data.json
index 370f83af..ff5acf68 100644
--- a/page-data/sprint-idea/page-data.json
+++ b/page-data/sprint-idea/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/sprint-idea/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 기획부터 개발까지 하나의 프로그램이 생성되는 모든 프로세스를 경험할 수 있는 시간을 가졌다. 피움팀에서 어떤 방식을 통해 아이디어와 기능을 도출해나갔는지 기록해두고자 한다. 스프린트란? 스프린트는 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간을 의미한다. 여기서는 기획부터 데모수준의 프로…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p>기획부터 개발까지 하나의 프로그램이 생성되는 모든 프로세스를 경험할 수 있는 시간을 가졌다.</p>\n<p>피움팀에서 어떤 방식을 통해 아이디어와 기능을 도출해나갔는지 기록해두고자 한다.</p>\n<h2>스프린트란?</h2>\n<p>스프린트는 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간을 의미한다.</p>\n<p>여기서는 기획부터 데모수준의 프로그램이 나오는 단계까지를 하나의 스프린트라고 생각해볼 수 있겠다.</p>\n<p>피움 팀은 구글 스프린트의 방법론을 차용해서 기능을 도출했다.</p>\n<h3>구글 스프린트</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/42a9ee4a83f74684b69e8c94baa4b74d/8b93e/googlesprint.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 35.29411764705882%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAABmklEQVR42k2RS2/aQBSF/QfbtNvkb7RdsWyrqt33+Q8akuCmWCRRLQOB1FgNmCCHh/MAC/MmwSVAQ6OvMyNZ6uLonjl3dO7MuVp0O+F/TEZ9fs+mis9uxorfTkeqxud5dKP6ssZ63NPuV3es/yx4WK+UkDG+0+sGXPoNjvMWq+UcyzyikM/SDwPFx2LoL8dmNOixXET8Xd8DDyzmEVrl1MH+WVAXzr0zTopFqq5LvV6nVqsJ0zwl2yYMQ9XzfR9dT2GaJjvJJIXjHKndJJ8+vOf6ykd7/eolT59ssPH4Ee/eviFrWaTTaTzPE4NsDMNQxlubm8JIp91ukxdDisI8kUiQ3P7Kl88fefH8GV7NRZN/Hw97TASmkwGV8ikX4hVBp4PrVsjlspRKNocHGfxWE7dSZjjo02o2cJwSF0KTkcnoFvMZmgxWkuVdpILe1/f4cXQgnt/iW2oXxz7hrFpWmlerkt7XhVYUGTfZ29lWPF6ihCYPsSCNc5bJYcZgOh6oTHrdjup1g2uxhJBmw6PVOGfY7xK0LxViD4l/Fz7ou1SODSgAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='googlesprint' title='' src='/static/42a9ee4a83f74684b69e8c94baa4b74d/ca1dc/googlesprint.png' srcset='/static/42a9ee4a83f74684b69e8c94baa4b74d/e7570/googlesprint.png 170w,\n/static/42a9ee4a83f74684b69e8c94baa4b74d/f46e7/googlesprint.png 340w,\n/static/42a9ee4a83f74684b69e8c94baa4b74d/ca1dc/googlesprint.png 680w,\n/static/42a9ee4a83f74684b69e8c94baa4b74d/02d09/googlesprint.png 1020w,\n/static/42a9ee4a83f74684b69e8c94baa4b74d/9d567/googlesprint.png 1360w,\n/static/42a9ee4a83f74684b69e8c94baa4b74d/8b93e/googlesprint.png 2662w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>5일간 결과물을 도출하는 방법론으로 다음과 같은 17단계로 이어진다.</p>\n<ol>\n<li>현재 상황에 대한 구성원들의 생각과 문제 상황 공유</li>\n<li>스프린트를 통해 해결하고자 하는 목표 설정</li>\n<li>스프린트 질문 도출</li>\n<li>이해관계자의 구매 여정 Map 작성</li>\n<li>전문가 조언</li>\n<li>HMW(어떻게 하면 ~할 수 있을까) 작성 및 선정</li>\n<li>스프린트 기간에 주력하고자 하는 1순위 타깃과 질문 선정</li>\n<li>번갯불 대화 및 솔루션 스케치</li>\n<li>고객 선정을 위한 설문지 작성</li>\n<li>프로토타입 제작을 위한 최종 솔루션 선정</li>\n<li>프로토타입 제작을 위한 스토리보드 만들기</li>\n<li>프로토타입 제작</li>\n<li>프로토타입 완성 및 시연</li>\n<li>고객 인터뷰용 질문 만들기 (인터뷰 담당자)</li>\n<li>타깃 고객 인터뷰 및 학습</li>\n<li>스프린트 이후의 개발 플랜 점검 및 향후 일정 논의</li>\n<li>성찰</li>\n</ol>\n<h3>Figma - Figjam</h3>\n<p>오프라인 환경에서 종이, 캔버스, 포스트잇을 이용해서 각자의 의견을 종합해볼 수도 있지만 시간, 공간적 제약이 있을 때는 Figma를 사용해볼 수도 있다.</p>\n<p>디자인 툴인 Figma에는 Figjam이라는 기능을 제공한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/220b3658614f0cbf96a85c33b623f225/eeb59/figjam.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 49.411764705882355%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABAElEQVR42oVSy27CMBD0z/MFPfUD+IfeekO9tQdoK4QQCBTUkIRYjY1f6yGQJk3JUmxZ1nrHs7Nji+3U4qgNKBK4EWOE8w7eBSbX7HlusF8RfHAQWbpHWUiQv0A6knZ1l3/mdbE+LoQA8TR5xi7JYCpeYUvXVzTIUk1KTQExGj9g9vEJb/4j/FXEnfVViugDjPawKtwl+GNB5O0R1As4EOvnjfyl5ZvenA9bIPHEnHrBgZo4do9xz9eBwutxNBp5KlGsSmzevpEs1vhKZlinFXSl6v/m4ZzjFVprcV4tgOr2HGksXjQmjwHv8w1ep0sst3MkWQlXY5VSkFIOyA5FjhMwZxKE5M8u3wAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='figjam' title='' src='/static/220b3658614f0cbf96a85c33b623f225/ca1dc/figjam.png' srcset='/static/220b3658614f0cbf96a85c33b623f225/e7570/figjam.png 170w,\n/static/220b3658614f0cbf96a85c33b623f225/f46e7/figjam.png 340w,\n/static/220b3658614f0cbf96a85c33b623f225/ca1dc/figjam.png 680w,\n/static/220b3658614f0cbf96a85c33b623f225/02d09/figjam.png 1020w,\n/static/220b3658614f0cbf96a85c33b623f225/9d567/figjam.png 1360w,\n/static/220b3658614f0cbf96a85c33b623f225/eeb59/figjam.png 1915w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Figjam에서는 포스트잇, 연필그리기, 스티커붙이기, 타이머 등의 기능들을 제공한다.</p>\n<blockquote>\n<p>개인적으로 타이머 기능을 적극 활용하는 것이 좋다고 생각했다.\n위 <a href=\"###%EA%B5%AC%EA%B8%80-%EC%8A%A4%ED%94%84%EB%A6%B0%ED%8A%B8\">구글 스프린트</a>의 <code class=\"language-text\">8. 번갯불 대화 및 솔루션 스케치</code> 항목에서 추구하는 목적이 무엇인지 생각해보면 정해진 시간내로 서로의 의견을 제시하여 회의가 늘어지지 않게 하기 위함임을 알 수 있다.\n정해야할 내용이 많은 만큼 시간이 늘어지는 것만큼은 가장 경계해야한다고 생각한다.</p>\n</blockquote>\n<h2>서비스 주제</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6944fe6d40ce96200429ad63128f9d7c/e96ee/b95b5dfe.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 56.470588235294116%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAACw0lEQVR42jVT/UtTURi++97U6fBjzokrhBIsSy0VMr9Cc+5ud3cf193NpBItl2VFxaBfgiCDatt1ny7DNTUiCiyDUunHiiJ/KSj6b57ee0c/HJ5zDue87/M87/syqrgTWskJfcIDU8oDY9oLU5qDPumGYVleHuilMuqk8p1eonfKPf2R75MyuqElZE4UFtCdvwJmlYN2axKqrSC0bwXoin6onrCoz4vof3kTXRsL6CjNo+/FIszpIDSUUJ3glGAyysFVhMxY8RaCW1E4Pl3HqS9LCOyn4PqRgGr7PAx5Dpa0H0efzynr8NpFtBdnYM2HYC+IsK2E0VwIE0ZQm/WXGaoej8O6zUH8yeL2HzcWf4cR+0vnX0OoeOVDXTaC7o2rOLl5DXU5kaT5UEUMqzMBBS0ZgRgLqEzxZYZ6iYP5NX36zIHfd2Pwqx+j3zgMfneh8k0A1lyImF0gFiIa8pNoyAkUWKB9kFgJaFwRyJYQLFle8ZgYsphYc8K2dwnm3QVY9qKo2Y3C+HEWKpJsy0XQSf7ZC1MkNaLIay5MU2AR9bkwGsnj2qy8n6SAPBjrQxc80z2wPeOh3gnD8F6E7oMI/WYAJolFJVW8jbw7Vir7eHx9DkeKs2gqhEi+FzUZLypSXlRTd6jjsuQED3PcC2MqgMb7Y/D42mF9MA5mWX5AVSYmHaWo4p1hmafPPmoZHyXyK2iiYMaknzxkcaA0AUZH5TZnWTCUqfXOIGa67Gi5Owx1hqdeZMkrAZ3r8+ggdo6n50i2gCaqrr0gVzqi+Nq2PgX3uyBZMwrGturC2e0RCuiDIzYMsceBgfQA+nbGoYl7lFaQl17yQkPNr0mwVE03oVtBNRGyxk7jMpFoXSLJVcSiJTkGJsfjYGwIU30O9D/qR2/pDE2NBwbp/8SUp8VI0yRjBaGG0EqJem+MoCk2gEP3nPgHWWq5267TrOQAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='b95b5dfe' title='' src='/static/6944fe6d40ce96200429ad63128f9d7c/ca1dc/b95b5dfe.png' srcset='/static/6944fe6d40ce96200429ad63128f9d7c/e7570/b95b5dfe.png 170w,\n/static/6944fe6d40ce96200429ad63128f9d7c/f46e7/b95b5dfe.png 340w,\n/static/6944fe6d40ce96200429ad63128f9d7c/ca1dc/b95b5dfe.png 680w,\n/static/6944fe6d40ce96200429ad63128f9d7c/02d09/b95b5dfe.png 1020w,\n/static/6944fe6d40ce96200429ad63128f9d7c/9d567/b95b5dfe.png 1360w,\n/static/6944fe6d40ce96200429ad63128f9d7c/e96ee/b95b5dfe.png 3200w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">식물을 잘 키울 수 있도록 도와주는 서비스</code>라는 주제로 팀이 이뤄졌다.</p>\n<p>위 포스터를 확인했을 때 큰 주제로 추상적인 목표들이 즐비해있음을 확인할 수 있다.\n주어진 시간이 짧기 때문에 핵심기능을 추려야할 필요가 있다.</p>\n<blockquote>\n<p>💡 모든 과정을 진행할 때 이야기를 듣는 사람들은 형광펜 혹은 스티커 기능을 이용해 중요하다고 생각하는 부분에 색칠을 하며 듣는다. 형광펜과 스티커를 이용한 호응을 이용해 공통 관심사에 집중할 수 있으며 집중력이 분산되는 것도 예방할 수 있다.</p>\n</blockquote>\n<blockquote>\n<p>⏰ 모든 과정에는 제한시간이 존재한다.\n제한시간을 두고 회의가 루즈해지는 것을 막아야만한다!!</p>\n</blockquote>\n<h3>서비스의 목적과 가치</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/8d5ecc06de673c5ea99b5f3142bd3d10/2ab73/959281a8.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 92.94117647058823%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAAAsTAAALEwEAmpwYAAAEDElEQVR42oWUaVDUdRjHHadeNE0vmml62fS6XnRYU6kVCBg6wEoeoNONdtg4poNNL7QDaUhYlmN3/wtsXEscoTEhSsi1QEiCyiVHy8a9AiI3csnu/9OzqwxaWL+Z7zz/3/X5Pf/f8zy/dUibvTVNeXUxjS0N1DVUU1lTSv3VWq4011FzsZLi0kKxFfQO2DlXUkCnrc29DVVVudNWLKwbtUFvwzJV+X9R+8sA1p+7KfvJRkVeF1YZqzrTS01Bv/TtNJwfoTy3mz+KhnE0w0Cj6rFuDTbCzW4B5nwIca9AmgYydt7VLkgNULEEQZaMW0SZgTK2zUm2xoklYJlU/3kUbyeJr4PBC3QvQ2G4APP2q8S+AKWmYa42XqahronWa23UJE7RmzCAI62TkQwbA8oE7Sd+Y0gXyWBMLBOGaEo+sKPbCIqPy+NU4TE38IAAX4SylGFaOi7T3NRCu62Vi6ZpehLsODKuMZFrZyhlko6vz+HQHacrKoJRfQQlH9nQbRKgrwBfvQeoFQ8r02/QP9pFX38ffSM9/G6aZCjJgatoHIqnGM9YoPOb89xOi2YuRY8zXceFsK61gKAVD6uNMzg6Rum9cpP+1lFqT81xQ5lhLn+ahfwpBpV5Ok5YWUw2M2fKYsmcRvH73eg2u4HqKjA3DBKkE6OZJCKkn8g9DiJDRMEjKG/dJnmri6StTpL8VJJ83f150YJHio8TgzcYfVgFZu+XDS+B13Ez608H84hlHw9l7+bx1DAit49jegP03qpnozua+n/o38ADLkwbBHhS4eHyHTx6NpT1RYE8lhPK9/6TJB1ykKCvRlEuYfp0FL3cmWHL3QO81wDmiIcmyaGA8DyeMIfxlHKYJ02f8HT8UaJ8Z/nxux7MpaWkl1eR/OV19K8JxOc/gO47jJdFcdudnNIsER24SHTQErptSx5vzCd7sZTVkVlSR0r4EPqN/wPM2S93IXcY/u0SIfljvJd3i72/3uLEERWTHGQMXsT0zgymd2cxBtzG8Cb3wdYEGgR4SDvP9oohgkvG0NTPEi6T+W/30WE5TGfaF9gsn9GUqPNUxUow1gZKHhokKIdjFgmyTrCzeJLg2lmOHYWCvZ2MXfRitt4bV9smrhcdlM0rQPXBQL0Aj2hd7LrkYl8V7Kl3ceyIAENtLF7RoDbtgHZ/hqX6jVtcnvR5IDDvY0lsyfYEjUrMHhfa3S5iQ5aJ9YMzYR3imQ/qn77yxm3mxoWDKH4CFIBRqsPoi0fKVgmsBPDsVwLMDIWoZ+X5kfLTPbcq7fPu6C+QFmgnPchOhqYLs/8g2g1S+/JH9ypW0i7qGXHgcwFezoKKaKhKuCNrvHrnW6w1Vl6hH0Sn5HkTWy7rrDqZj+N+yVo3o6VA5W/OEXP1lJieygAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='959281a8' title='' src='/static/8d5ecc06de673c5ea99b5f3142bd3d10/ca1dc/959281a8.png' srcset='/static/8d5ecc06de673c5ea99b5f3142bd3d10/e7570/959281a8.png 170w,\n/static/8d5ecc06de673c5ea99b5f3142bd3d10/f46e7/959281a8.png 340w,\n/static/8d5ecc06de673c5ea99b5f3142bd3d10/ca1dc/959281a8.png 680w,\n/static/8d5ecc06de673c5ea99b5f3142bd3d10/2ab73/959281a8.png 749w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>서비스의 목적과 가치에 대해 구상한다.</p>\n<p>이 단계에서는 <code class=\"language-text\">서비스가 어떤 기능을 제공함으로서 어떤 문제를 해결한다</code>를 이야기하며 각자가 추상적인 목표를 어떤 방향으로 구체화하고 있는지 공유한다.</p>\n<blockquote>\n<p>⏰ 제한시간 : 3분</p>\n</blockquote>\n<h3>서비스의 대상</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 482px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/1565d40b7b67d5c466f4c07c539338e6/b58a3/db53c739.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 131.1764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFOElEQVR42pWVW3BTRRjH+6D4AD745IyPvjg644M+yICjIIgI40A7IGBx9EUZdHxgcAZ1RAQqAtMKFahAW2hLL9Cm9wulQgu9NwlN0vRqoW3a9JI0TZsmObmdy8/tjbZSZ3RP/mc3Z3d/+e+339lEybKM2Wymt7eX9vZ2vF7vbNtisTAyMsL4+Dg2m42uri7sdjtWq5W+vj4cDgczRdM0lpaoGcDV5GRuZGaSnJKC3mAgMTGRo0ePUlhYSPW9avLzdaSmpFJcXMyZs2eJj4/HIMbNFEVRlkGjZm5TU1OookPy+1CEY7/PRzgUxuly4hR9QfHMK/oionY6nAwMDCBJ0soOZ24RWaHK0kuxqYt7oq5v72PIPQV+4cDUT9hoQDPZcVvEUgNTsxPHXG66bcM8FmExjNgZ9LoXgYFwhF/SS/n63BG+SznI6csXsXaPglPFfaWJ/vM6JpL12G804RqfnJ3Y3KUn+W4BVY0WslobKes3LgKDAphd1kJyUQUJd7PIjdfhbhwDD9iz2mjMyOdxWjPuvHHcEx5mFtnX24y5PovGNj3lnRbck9NLHIYiZN4xklHeSlalhRMVZZhsdnCJT3o79gt1DFZY8ebVYxzuwadIJD38k3RTG81ZLTTk1PDI71jusOi+GV11K4X3TdyqNNI97ASHgpzlxnthAqVAxK5QPJvUkFHoG+wX8bMz3jpGS5MRm3dsESirCoFIiFA4LOIZRBIKqhFkn0zY5ic0KqH0+4kMiFoKoakyaiSCGg6JtBHjNPXJbkctbLcmLkVc/1bUeS2OX9LWtCffZ4E5gw/YVRPPjw15bK/7mZjaU2ypOUaNox1/KMBEjxU6u5CsfXg6GvB11qF0tqN2WNBG7U/n4THLdZ69toF1uu+JurmDZ3JiiEpdz82BaqpG2qhNOsLtk7Gk/7oHQ9wr3IlbS2nCtzw6fhIS9XPutCXA0x0FrMrfzUtVn/NiaTRr8rfxQs4eMmx1IrlFbFPj6Eg7TEP2OQJXz9CX/AO21GNISRdQq2oW1r0ITOop5/n8T1mdH8uq3K1C7/Jq9kGyB5tBCqKlp+DNScN18wpkpKLduAbZQmU/odXfXhbVWeCpDh1RmR+wJm8vz93ay+q8/WzKPU2B/aFwKBFM+11ALwr9gZJxCTkjCTnzMkpmAur920/H0Cf7sXmcDPpHsQeHGZLstHr+wh3xzW6t7AmiCC3UqkcS8iO7Rdr4w08DO70SBfphKh8rlA5pYiNUwupckmjTIuiDJ9DsZ1GHzqANH8f/qABPd7U4IeJEn5C/Z37VqgBqYb5pvcfL+Q/YktfARl0bMdUBJsPy3CCnjmDdG4xUrGOkZD2O8rfQF72G5c7rRIxrkZvXifOvbh6ozDhUKenx8ZUuwH6Dyt5mjc9E6KYXgK5SpMbNDOZswyhSqe7KBozpb9OZtgnX5QMEmjaBt2WJQ1GazAESzjmIEaDdDXCoUQBDc0BtvBha38NZuZPqvFhqS96kRbjMLd6H+fp5MHyCOt24HFg0rBDdJPOFXuVgi0pygzihg/NA5wxwI3TsI2C4hGT4DVq+JFJ7gMmOQ3jr44TD2uXAgKzikmQmggouIWdIQVWVJQ7FsiwfobVtFcDDqKZoNPMO3HUidUw7xbnZsBy4YtEWgCVgfh+s0QK6A9q2zMFFW7XsEn8NHwpg83KgtoIWgIwXIevfQWndLkDbBHy+npWAmTajTTX9D4eu2wQNOwmZ9qNaY/8h8czyMZrH+B+A8++mKt4iVbw9anAUJbCSRsRvB5/M+htqcBfde3gE/QAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='db53c739' title='' src='/static/1565d40b7b67d5c466f4c07c539338e6/b58a3/db53c739.png' srcset='/static/1565d40b7b67d5c466f4c07c539338e6/e7570/db53c739.png 170w,\n/static/1565d40b7b67d5c466f4c07c539338e6/f46e7/db53c739.png 340w,\n/static/1565d40b7b67d5c466f4c07c539338e6/b58a3/db53c739.png 482w' sizes='(max-width: 482px) 100vw, 482px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>어떤 사용자가 이 서비스를 사용할 지 떠올리고 각자의 생각을 작성한다.</p>\n<p>이후 각자가 자신의 생각을 이야기하는 시간을 가진다.</p>\n<blockquote>\n<p>⏰ 제한시간 : 3분</p>\n</blockquote>\n<h3>어떻게 하면 ~문제를 해결할 수 있을까?</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/b0779a001d5012f919647c1262166104/cf75f/1c560fdf.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 64.11764705882354%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAADDklEQVR42m2Ty28bVRTG/Q8Cy+wQyy66QEIgVd0goopVJSqiEkjcxJmHZzwznrE9Ez/jzNhx/IifkGCa0BY1D8evpizIonn8uBnIAokrHX33fOfe7z6Ovgj/jpubmxBHoxGVSpVWq8XwtyHNZkvklTAODvbp9Xph7fLyMlx/e3v7H4zcC94Tk8mEfr9Pr9ul027z+vWrsPbhwxXX19dcXd2EIXbwfyMyn88Zj8eh0HQ6ZTwZc3J6xsnZiLPROcenU+bzKZPpWxHnzKenzO7mE8GNZ8zFvtm5wJP3XMzfEclms6iqSsIwqQQ+frmAYVhsGGVkK8uatSNqNi/MLJKZ4pfcAy52PiJpxTlSB7xcb7GnV/lTOWZ7s3wvGA9F8nmPUl7kCQcz6QnORk7mUARqTgE1mcF3n9IvfkM8oXNgDejoHQpGlmGiSS0tBHO5HHpcxbYsmoMm9ZpPrRbQ/7krBA0cQ6L7Ypna2o/0VyR8VaGV+pzAXsLU1kiZz8N1s/hbRvYfd4J5ouKGsnhyqdLCFXmpVKTu17F0G1vXuZCXeaOsc7G6Rs9cYdxYoO0sceQvcL6zgKmnxbNrNHM1IunCNp/mj3mc7fIwPeDR5iFxVWIvWuZIa4jTdXrfPWMgRRlGn1FX19lMPaXqLtLxlqg6K3SMKu/0N2x5RSJurshDd8gTd4/HQnAx08C1dfbdGl3bJyH+avTE5KUk8156TncjQbfwiL+aH3Oo7XORGFMxt/jV6FC6E0wXSjzIHLKYGvJZYcaXpQMmX6c5+Ukm4Vh4kk5aiNqaQ1rTMHSDXFKl4MQoic43LB89kUBSZVzPJeIVynzh9fk2U+F7r8EP6YDGssUgqtFWGvyuNymJPzrUBtSsomiSw6vVLkHcF91XRbc1LNPE0HQ2PY+I5RX4JDvmK6eNGVtFlWLENJnYhkxWzlDWy9hKip6+S0qxUGWVvlanrLisy7EwVxSFWCyGbdtEWsJe1u4+2d0eQRDgCx9Xg3+8u13ZphyUBedTCjEgEPxWsIUvTHDv8bvwfV/4vsnffXFOQwjolxYAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='1c560fdf' title='' src='/static/b0779a001d5012f919647c1262166104/ca1dc/1c560fdf.png' srcset='/static/b0779a001d5012f919647c1262166104/e7570/1c560fdf.png 170w,\n/static/b0779a001d5012f919647c1262166104/f46e7/1c560fdf.png 340w,\n/static/b0779a001d5012f919647c1262166104/ca1dc/1c560fdf.png 680w,\n/static/b0779a001d5012f919647c1262166104/02d09/1c560fdf.png 1020w,\n/static/b0779a001d5012f919647c1262166104/cf75f/1c560fdf.png 1078w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>어떻게 하면 ~ 문제를 해결할 수 있을까? 라는 질문들을 작성하고 이야기한다.</p>\n<p>이 과정을 통해 해결해야할 문제들을 인지할 수 있다.</p>\n<p>이 때 기술적인 질문이 나오지 않도록 경계해야한다.\n해당 과정을 수행하는 이유는 서비스의 목적을 구체화하기 위함이다.</p>\n<ul>\n<li>어떻게 하면 제 시간에 식물에 물을 줄 수 있을까? (O)</li>\n<li>어떻게 하면 무중단 배포를 할 수 있을까? (X)</li>\n</ul>\n<blockquote>\n<p>⏰ 제한시간 : 5 ~ 8분</p>\n</blockquote>\n<h3>워드 클라우드</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/70641b5a84fd2f9bb79e54fec36d3260/0c082/07da0c75.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 72.35294117647058%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAABpklEQVR42nWUjW6CQBCEef8HbEwMBBRBQEUF/AFx6rfJtlfbXnI53NudmZ27M3o+n/p3zrPm/qp2u1adJ2rqWn3eaJpGjY9Jj8fj9T3pfr9rfuVSE3kxgXEcbZM5DIN2Ta02rRV/LBUnsdIsVZUUOiwrdceznvqudVADhOl2uxnbX4P9/X6vqqq02+00xYN0B04G6DmARv7hGygry9IKAbhcLkZELM9zldutiqpUURZK09Ti9csKBh1GDtZ1nRUzN5uNDoeDqeI3A3AAmqbR0PU6n886nU62EqMeMQbIaNtWx+Pxq83r9WoJdJBlmamEmBUASCF0MnKIRyTgn6tbLBbGxiSRwT6GowgraJFcWlTgo7UMIMUkhieNWtrxW8AoikJxHGu9XptSapIksfj25a0dih93yERstVrZ9BNEFS2xujV935tqXyGJUERBeB9DAo8BgmeAUuwX2UUAZvcQMEDDF+KqUIgdoXqAOQD2vF328PnrpYRPB1+4MsQAdbWQunchud/jH08vDLrBML63jVdeCDAk7939este4A8/nJ7D9N/vfyifYQc+OXTzteAAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='07da0c75' title='' src='/static/70641b5a84fd2f9bb79e54fec36d3260/ca1dc/07da0c75.png' srcset='/static/70641b5a84fd2f9bb79e54fec36d3260/e7570/07da0c75.png 170w,\n/static/70641b5a84fd2f9bb79e54fec36d3260/f46e7/07da0c75.png 340w,\n/static/70641b5a84fd2f9bb79e54fec36d3260/ca1dc/07da0c75.png 680w,\n/static/70641b5a84fd2f9bb79e54fec36d3260/0c082/07da0c75.png 804w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>위 단계에서 나온 키워드들을 기준으로 단어들을 나열한다.\n중요하게 생각되는 단어들은 크고 굵게 표기한다.</p>\n<p>이 과정을 통해 키워드를 간략하게 추릴 수 있다.</p>\n<blockquote>\n<p>⏰ 제한시간 : X</p>\n</blockquote>\n<h3>(선택) 모바일 vs 데스크탑</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/e98ef896a522c59419d537e2183120e8/2cbcd/8f5a28d2.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 34.705882352941174%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA6UlEQVR42p1Py46CQBDk/39iD1687C9wJCFikJnhjULCY5cLWWIWWBVKp8n4SDzoTtKZTlV3dZU2TRPmwuWp/laEvoCp0iS5XnXgrMP31xEr8/dh4V+CZfGHz2WDxUcDe92R09NpxDiONCT/+14tK/ye1+aLR2S7PTzxg8Ohv7pQTl59V8HtdgfhMvg+h2EY4JwjiiKYpomiKJDnOWFlWcJxHOrDMESSJAiCAJZlwXVdtG07R07TFLa9gef50HUdQggalstSsKqqC+ehrmvCJR/HMYnKw4wxZFmGYRhmhzJ/3/cEPIvxTuQz584XuVFWs+AAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='8f5a28d2' title='' src='/static/e98ef896a522c59419d537e2183120e8/ca1dc/8f5a28d2.png' srcset='/static/e98ef896a522c59419d537e2183120e8/e7570/8f5a28d2.png 170w,\n/static/e98ef896a522c59419d537e2183120e8/f46e7/8f5a28d2.png 340w,\n/static/e98ef896a522c59419d537e2183120e8/ca1dc/8f5a28d2.png 680w,\n/static/e98ef896a522c59419d537e2183120e8/2cbcd/8f5a28d2.png 764w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>생각하는 서비스가 어떤 환경에서 운영될지 생각해본다.</p>\n<p>이 과정을 통해 서비스가 어떻게 그려질지 대략적으로 생각해볼 수 있다.</p>\n<blockquote>\n<p>⏰ 제한시간 : 2분</p>\n</blockquote>\n<h3>장치/요소/기능 브레인스토밍</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/1e645927501f2d913d6591289ce0174f/ed9c8/2d693ea9.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 62.35294117647059%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA+UlEQVR42o2S6wqDMAxG+/6v6B8RryCCN7yb7QQirtRtgVhs05MvaZy87TgOOc9Tuq6TLMukLEtJkkSd/zzPpSgKXdM01ZX9fd+5Luu6XgzHhw1W37Zt0yTLssg34y6xuCOLZeKATDgGrKoqGYZBz+7nFnM3hDmoJtfP2jSNAgn8x1Qhn1C5QOq6VqhV8DcQhdM0fYCBAGUNJQyZlmwvZGVbb1AXRZHEcXyVbH0MOfcUiAJU3ntnQMbDXviXShiwnJF9m+dZ2raVcRzVvwFt9LDHOUQZw8wrPz3cHWatcibXv2RD3fd9cOZCsAtor2p9wEMQ9uzc4v24FxCIsUaKl2LQAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='2d693ea9' title='' src='/static/1e645927501f2d913d6591289ce0174f/ca1dc/2d693ea9.png' srcset='/static/1e645927501f2d913d6591289ce0174f/e7570/2d693ea9.png 170w,\n/static/1e645927501f2d913d6591289ce0174f/f46e7/2d693ea9.png 340w,\n/static/1e645927501f2d913d6591289ce0174f/ca1dc/2d693ea9.png 680w,\n/static/1e645927501f2d913d6591289ce0174f/02d09/2d693ea9.png 1020w,\n/static/1e645927501f2d913d6591289ce0174f/ed9c8/2d693ea9.png 1245w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>앞서 설정한 문제, 키워드 등을 참고하여 개발하고자 하는 서비스에 있을 것 같은 기능들을 브레인 스토밍 식으로 작성한다.</p>\n<p>이 과정을 통해 서비스에 존재할 수 있는 기능들을 파악할 수 있다.</p>\n<blockquote>\n<p>⏰ 제한시간 : 5 ~ 8분</p>\n</blockquote>\n<h3>지도 만들기</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/058bac759478396584248cefebdce165/d621b/2bb017bc.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 37.05882352941176%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAABDUlEQVR42l1QW26EMAzM/W/QY/QSPUDV/wUJPngtjwTIAzL1uFCt1tLIjmPP2DZ4sZyz+uM4EEJASglVVaGua8QYFbc9nw283/Bu5jxPHIJXI9G6rti2DdZa9Xe8rk5r2raWnMP7QMY5h7Yb9GGtAwVISL/vu+K8BJdlQdM0ugHBHnrvvU7P2Hx9V/j4/NGGcCUJknAqClKANs8zyrLU6W8REjHvZHrWmb63GGePI4lS8Ei8kyizgcUsugm5clEU/4R6ruveBN8mCknOp4wd8Hg8ME6TNhK87STqbJokH4V4HEf9o1jfdZoL0jsM/R/hfVC9hayYRClzZYFUaEx/cvIU5Z2QY1Awl7n6DbFfC/oiZLMMy8cAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='2bb017bc' title='' src='/static/058bac759478396584248cefebdce165/ca1dc/2bb017bc.png' srcset='/static/058bac759478396584248cefebdce165/e7570/2bb017bc.png 170w,\n/static/058bac759478396584248cefebdce165/f46e7/2bb017bc.png 340w,\n/static/058bac759478396584248cefebdce165/ca1dc/2bb017bc.png 680w,\n/static/058bac759478396584248cefebdce165/02d09/2bb017bc.png 1020w,\n/static/058bac759478396584248cefebdce165/9d567/2bb017bc.png 1360w,\n/static/058bac759478396584248cefebdce165/d621b/2bb017bc.png 1439w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>앞서 정의한 서비스 대상을 참고하여 구체적인 페르소나를 지정한다.\n페르소나를 참고하여 어떤 페이지들이 존재할지 생각해본다.</p>\n<p>위(<code class=\"language-text\">장치/요소/기능 브레인스토밍</code>)에서 도출된 기능들을 기반으로 각 페이지에 기능들을 작성한다.</p>\n<p>이 과정을 통해 대략적인 서비스 흐름과 구성을 생각해 볼 수 있다.</p>\n<blockquote>\n<p>⏰ 제한시간 : X</p>\n</blockquote>\n<h3>페이지 그려보기</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/535c843fc7491a9b1193802999045ddc/d703b/efe27f26.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 98.23529411764706%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAADCUlEQVR42nVUfYvbNhzO9/9IZX+MUsbGCqXj2I5C6dJLE9uxbOtdsq08e37KOeR6N4FQSKJHz5u0A8flcsF1rQvm6NA+fkD+8YRy7PHpj1/w+bd3+PD+V+QY8HLPy3WH51HWgrXOFfMyw+seS0pY5hX//PUR+6+P8D5gWRdow//kcgO6n7vETXmeEWNETAEheSzLgjAvaHuFb/sfCDEhhADN/6gvDzj9/h7PcDdm29iVUuqXOecKJCOGleAzjPWwLmAYBmitEfKCsfsCdfjzTXaVoYAI6EyWdZbIzRETfTTOYtQTJoJ57zEqrjHDhrmyu/fuxnD7cJVM+SslrzNaR1aWoMZVuaLA+8hDNCajbgCvADeGYvY0MISyUPqMQ3eCIytPMGstfYwY2h5Kn9H49v8ly8mSrKw5ZUpOlJ7xdf8NZ9VT7gTnHCS8oT3CEVza8DPDV7WRqmQCXZhfKSs6rRiIw/Go0Z81WRqqAGs0VwVvsasMqz9kJmCJMxd2rcwobkIKhqADPUxIosA8wpkzjk37yjuxTeZuQ5ZiF0rffhR21jCg2ZIdw9GGPzSs1EhQBuUdP7O3wVNvgTcB3nnsxD8BSMIy51qblQH15x4N5U6TgVIDrLfQ3QVBZ3pq2VGyJ6gar4lHBiheV8nSP0H3gaxmhbREdOPAemjsn47oujMrNOLfzyv8cA1EbFqXa5gyPMMaxvFlD8+NR15y9bAjgOeVc9I9Y2p1rnd+xTiNNfX7pPNzvXYCJAzlaolPKUd2ztdHwRFUHQ9kIcmu6A+BvyeoQXHP8qIumQfIIbstHUlRgAuLLT2UIjeNgukl5Vhn92QReWCnm9qKe8BbynJTJBjvr1csLpYe8g5T5qmbarFHeiMH9u2BXlucXIO05reLvQHWPkoXeZdHTVAytLL51MJMU/V45M2JrMk0THXPm+/hRlVek8D30GQFxaqc/cikezw8/F1ZWjKWFMUKI1dRnrv1+g7cA9diy5dGq+qdT2SXPZOlbDLbfz9gC05SlDVTlTzKahiqsvvxHwbVE1DyCDAZAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='efe27f26' title='' src='/static/535c843fc7491a9b1193802999045ddc/ca1dc/efe27f26.png' srcset='/static/535c843fc7491a9b1193802999045ddc/e7570/efe27f26.png 170w,\n/static/535c843fc7491a9b1193802999045ddc/f46e7/efe27f26.png 340w,\n/static/535c843fc7491a9b1193802999045ddc/ca1dc/efe27f26.png 680w,\n/static/535c843fc7491a9b1193802999045ddc/d703b/efe27f26.png 786w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>위 <code class=\"language-text\">지도 만들기</code> 활동에서 도출된 페이지들을 직접 그려보는 시간을 가진다.\n팀원들 각자가 페이지가 어떻게 구성될지 대략적으로 그려본다.</p>\n<p>잘 그릴 필요는 없다. 연필로 어떤 버튼이 어디에 위치할지, 어떤 기능이 존재하는지 정도만 알아볼 수 있을정도로 가볍게 스케치해도 좋다.</p>\n<p>이 과정을 통해 각자가 생각하는 View를 공유하면서 서비스의 구현 방향성에 대한 싱크를 맞춰갈 수 있다.</p>\n<blockquote>\n<p>⏰ 제한시간 : 각 페이지별 5분</p>\n</blockquote>\n<h3>결정권자 정하기 &#x26; 페이지 정하기</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6f4640ebaab36872787ea3c684cd1730/5fbd7/9f853c4e.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 18.823529411764707%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAx0lEQVR42oVPSQrCQBDMK32Gj/DgF/QqiKCIN0HBS4QcPAqCGLdEgktcCEHNLD1TjhNBxYMNQxXd1dVTDv6U5gIq408G0oAQEkSEYLVEtAl/9M7XslIWo/EQs14FLInBJ3MkfdfYASNvAK9RwiEK0Gm30G3X37tam2cMtfpwVNrCebtAPHXB7ylwzSBPF9tv1qooFwsI12YeH+H7/ofh64eMCUukicIyZjmRApeU9xWB8VzDjeZm45vbJo2SwqIkjl2QYh9JPABZ0jE0dwJ48AAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='9f853c4e' title='' src='/static/6f4640ebaab36872787ea3c684cd1730/ca1dc/9f853c4e.png' srcset='/static/6f4640ebaab36872787ea3c684cd1730/e7570/9f853c4e.png 170w,\n/static/6f4640ebaab36872787ea3c684cd1730/f46e7/9f853c4e.png 340w,\n/static/6f4640ebaab36872787ea3c684cd1730/ca1dc/9f853c4e.png 680w,\n/static/6f4640ebaab36872787ea3c684cd1730/02d09/9f853c4e.png 1020w,\n/static/6f4640ebaab36872787ea3c684cd1730/5fbd7/9f853c4e.png 1276w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>위 과정에서 작성한 페이지 중 하나의 페이지를 결정하기 위해 결정권자를 정한다.</p>\n<p>결정권자는 팀원들의 투표로 정하고 페이지를 결정할 때 만큼은 결정권자의 권한이 가장 높은 수직적인 구조로 진행된다.\n즉, 다시말해 페이지는 결정권자의 선택으로 정해진다.</p>\n<p>결정권자를 뽑았다면 각 페이지를 정하는 시간을 가진다.</p>\n<p>이 때 결정권자가 아닌 다른 팀원들은 자신의 페이지 혹은 자신이 마음에 드는 페이지에 대해 결정권자를 설득한다.</p>\n<p>페이지를 결정 할 때 여러 페이지의 기능을 합칠 수도 있다.</p>\n<blockquote>\n<p>⏰ 제한시간 : 각 페이지별 5분\n결정된 페이지들은 명예의전당👑 에 복사하여 올려둔다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 249px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/69b90d64e0e9f639c72d30b6addbfd44/14a1f/e4e8a0fb.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 311.7647058823529%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAA+CAYAAAArvjtdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFE0lEQVR42q1Yy47jRBTNh/AhfASfAGLLgu9gwwJpFjAs2cyCGYQEEgLBCBg2I6Y1NOoWnaFb5NHdiR07Tvwqv6p8uLccpytuO3Eaqrtkx1W+uVX33HNPZaCUwqEupQJQ4o8Tgc8+D/HsKwF3IelZNWbOHYCnliXq1navVHX9+ekMH737Fz75YIi1k23m7M4d8E2z1xN2Ov+RU4UA0qDUhvSzxrxWg3XnJZhf4Kw82MEaC9+DSETrFw9Mr9qaOW6fnWP2/U+wX74iL8N2g/WLWZbBcRzdbdvGcrnUVyll9SL18bOvcfv+h7h59Bjhwqmeb1Zxz2BRFFitVliv19vOxmuD3EbjJ5hM38No9DGiyNp4qPYvubl8c3zyzwWs69eYXw8Rx+H+PWxG2TReP89ziSIvkeXFBpu7czRsuoLQFqgS1TNZ5lBl0RrEQXNZ+4yzoUwJFCpvx2rbkm9vbzGdThGG5h5V1yhfIcxcpDLub5CjzZ1Bvd2bsoqmny200crD8rDBfUvebr42pLo97NrDQ5HvmtefHIz8ZrB3jQ/2QaU5OU1TypBIX5VU+3O5HlRGbjZbnuc6+rmkoHUQyg7B8gunp6e4uLjAeDy+IwbDwyRJ9LxmhnQSLEOGDTU95c/sXSxiJCLR8x4clPoze8d7GMfxPe8fDJtDWO0NG24xLdVfx/D9GEWXh30yRRMDGfBWAVaJDS9cktHocE3hl7gUcDcjqRmdxvwggu3ewPVcBGGPIsW0X8Pm6upKB6FuTKgrP6QvA0U708YPAnsfN0pZUs1xoMLnSMNTrAPRmtu9YSNJPTiui9h/g9VyhLUfH4bN3ihTFyJDGEuEUdYN7F4GN5/rDGrTQEdniqC0u7y81CWiZBlSlv1KQJNxyk0xLyjdHMeFbdmwiDjs+VzD656Hh/iwvua0Z34UYLF0tWhiY71qCmua4XCo6av2kFtEHo5pudfWHNZi0Rm8QdMb3qPz83NMJpNtALiFxDL23MbaXWnGMcf2Fvo69cxSqmgPMyKGs8UYr6y/IaJYp2Yv2HQqB/ofRQu8CWYoC9m95GPoq0tEPcwgw8nw1pxjwmywrwabva7FfL0nVQzPe+2hjjJlShAEWuUytLgC1rRmuaR2V+F9PuTiY1kW5pQFrK/rl7j5vg+X2MbzPC2V67E4SfH46S948sMJMZLa5UP2ggFddyHEdozJl7+EO3uZbAyymv319SVeno30Hg+6RFDzGX9ZLeq1ejBweJBguwiDjZhCoE2+9IZN80BZHkNffaDUS3AekiIFqa6CghBlCda5+G/ahveOoeJYCwznE7y4OYfMi+2xrS4TvQ1yQJhkbWdBkkQgFSzryKCi2p1ZdPSNtNGdsx4D+ubmBrPZjM5zIw1kc1zQUld0vF0Tc6eZ0AaK+bdIfnsbmH2xa9A8UjAs2CPz4MjPPT/A9czGre1QoQ+q1HN+RPr7OyjnX+7icJ9c45amGaLQx9K1EUc+slTcYXHzU8HRQWEmV0pC0j3rnlKph9XlLYWVUpeD/4Vgm+J852imis1B/AixFOYeRsGfEIWvT6SZSnbLwbE4FEWAcXimj7h8n8pKH6pkhsL6DqW4qmDTfJEJlLHYXKKkZRUyJ0INEaYe3VeppxbfQL54C+X00S4O74Sl3Eo1s6WFwNwj5TAbw/EoW9IKhyq+hJp+itI/af+JoItgC/IwzgO9f9XnbLdAHatgFUGmNH5p2sJHR1luf275F9esBX2J7TpSAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='e4e8a0fb' title='' src='/static/69b90d64e0e9f639c72d30b6addbfd44/14a1f/e4e8a0fb.png' srcset='/static/69b90d64e0e9f639c72d30b6addbfd44/e7570/e4e8a0fb.png 170w,\n/static/69b90d64e0e9f639c72d30b6addbfd44/14a1f/e4e8a0fb.png 249w' sizes='(max-width: 249px) 100vw, 249px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n</blockquote>\n<h3>BDD</h3>\n<p>BDD(Behavior Driven Development, 행위 주도 개발) 방법론을 차용한 방식으로 given - when - then 절로 해당 페이지에서 일어날 수 있는 모든 이벤트에 대해 정의한다.</p>\n<p>이 과정을 통해 구체적인 기능 명세를 할 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/c4a430c5a8881a8d1b8a65f39cbe0504/eb638/faa7372e.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 40%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABa0lEQVR42pWSTU7DMBCFcwnOyI4FW+AG7FjDih1SKy6AKv5URJEqWiRAhLRNUqokpEnj/Dhx8vBMmwqJFZZG9tjOm2+eY2Azms1cVRUsy4Lneev9pvlXGCJJEEeRjhjJaoU8FRiNxpjZzlawLEtIKTlXSqEoCtR1zWe/1ywYCYGgyBCm3xCFRCJDTRlpVH1xg+04DlzX5fVKFzVNk4uQ+GQyQZZl2+JGMHyGe3KK1wsT4egFw45CZy+FdVOyEY1WTXQXYRgyDQXlZA2J0n4QBFgul0xqzAf3MA+P8HDch/t0i8t9hYMdoH/WsKCqGvh+wJRpmjKh7/tMlec575PfQnfKhPPFFT5nu+h372DbPUwfFQbngPfWCipE2mMKGq1f7QMSGZ0RNflsLL5sWO9DjHtTzB2bPlm3irXJJEA0FNRuS9kSxnHMgiRMuSFLiUxU+Liu9QtLFqA26/rvL0FnREHt0dwWoyIkRnd+APAPYZtmY5CnAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='faa7372e' title='' src='/static/c4a430c5a8881a8d1b8a65f39cbe0504/ca1dc/faa7372e.png' srcset='/static/c4a430c5a8881a8d1b8a65f39cbe0504/e7570/faa7372e.png 170w,\n/static/c4a430c5a8881a8d1b8a65f39cbe0504/f46e7/faa7372e.png 340w,\n/static/c4a430c5a8881a8d1b8a65f39cbe0504/ca1dc/faa7372e.png 680w,\n/static/c4a430c5a8881a8d1b8a65f39cbe0504/02d09/faa7372e.png 1020w,\n/static/c4a430c5a8881a8d1b8a65f39cbe0504/9d567/faa7372e.png 1360w,\n/static/c4a430c5a8881a8d1b8a65f39cbe0504/eb638/faa7372e.png 1422w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>해당 방식은 UI 기반의 기능 명세에 치중할 수 있기 때문에 API 설계가 요구된다면 API 명세를 하는것을 추천한다.</p>\n<blockquote>\n<p>⏰ 제한시간 : X</p>\n</blockquote>\n<h2>결론</h2>\n<p>구글 스프린트를 기반으로 피움 팀이 아이디어를 구체화하는 과정을 정리해봤다.</p>\n<p>아이디어 도출 과정에 정답은 없지만 스프린트를 처음 해본 입장에서는 참고하면 좋은 방법이라고 생각되어 기록으로 남겨봤다.</p>\n<h2>Reference</h2>\n<p><a href=\"https://brunch.co.kr/@brunchjwshim/90\">구글스프린트</a>\n<a href=\"https://velog.io/@teo/google-sprint-14\">테오의 스프린트</a>\n<a href=\"https://www.atlassian.com/ko/agile/scrum/sprints\">Atlassian Sprint</a>\n<a href=\"https://www.thesprintbook.com/the-design-sprint\">https://www.thesprintbook.com/the-design-sprint</a></p>","frontmatter":{"title":"구글 스프린트 기반 아이디어 도출","date":"July 08, 2023","update":"July 08, 2023","tags":["아이디어","기획"],"series":null},"fields":{"slug":"/sprint-idea/","readingTime":{"minutes":11.66}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":null,"next":{"fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},"pageContext":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","series":null,"previousPostId":null,"nextPostId":"4a9246fb-171b-5973-88fc-864034e78afd"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/sprint-idea/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 기획부터 개발까지 하나의 프로그램이 생성되는 모든 프로세스를 경험할 수 있는 시간을 가졌다. 피움팀에서 어떤 방식을 통해 아이디어와 기능을 도출해나갔는지 기록해두고자 한다. 스프린트란? 스프린트는 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간을 의미한다. 여기서는 기획부터 데모수준의 프로…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/Choi-JJunho\">주노</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>서론</h2>\n<p>기획부터 개발까지 하나의 프로그램이 생성되는 모든 프로세스를 경험할 수 있는 시간을 가졌다.</p>\n<p>피움팀에서 어떤 방식을 통해 아이디어와 기능을 도출해나갔는지 기록해두고자 한다.</p>\n<h2>스프린트란?</h2>\n<p>스프린트는 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간을 의미한다.</p>\n<p>여기서는 기획부터 데모수준의 프로그램이 나오는 단계까지를 하나의 스프린트라고 생각해볼 수 있겠다.</p>\n<p>피움 팀은 구글 스프린트의 방법론을 차용해서 기능을 도출했다.</p>\n<h3>구글 스프린트</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/42a9ee4a83f74684b69e8c94baa4b74d/8b93e/googlesprint.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 35.29411764705882%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAABmklEQVR42k2RS2/aQBSF/QfbtNvkb7RdsWyrqt33+Q8akuCmWCRRLQOB1FgNmCCHh/MAC/MmwSVAQ6OvMyNZ6uLonjl3dO7MuVp0O+F/TEZ9fs+mis9uxorfTkeqxud5dKP6ssZ63NPuV3es/yx4WK+UkDG+0+sGXPoNjvMWq+UcyzyikM/SDwPFx2LoL8dmNOixXET8Xd8DDyzmEVrl1MH+WVAXzr0zTopFqq5LvV6nVqsJ0zwl2yYMQ9XzfR9dT2GaJjvJJIXjHKndJJ8+vOf6ykd7/eolT59ssPH4Ee/eviFrWaTTaTzPE4NsDMNQxlubm8JIp91ukxdDisI8kUiQ3P7Kl88fefH8GV7NRZN/Hw97TASmkwGV8ikX4hVBp4PrVsjlspRKNocHGfxWE7dSZjjo02o2cJwSF0KTkcnoFvMZmgxWkuVdpILe1/f4cXQgnt/iW2oXxz7hrFpWmlerkt7XhVYUGTfZ29lWPF6ihCYPsSCNc5bJYcZgOh6oTHrdjup1g2uxhJBmw6PVOGfY7xK0LxViD4l/Fz7ou1SODSgAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='googlesprint' title='' src='/static/42a9ee4a83f74684b69e8c94baa4b74d/ca1dc/googlesprint.png' srcset='/static/42a9ee4a83f74684b69e8c94baa4b74d/e7570/googlesprint.png 170w,\n/static/42a9ee4a83f74684b69e8c94baa4b74d/f46e7/googlesprint.png 340w,\n/static/42a9ee4a83f74684b69e8c94baa4b74d/ca1dc/googlesprint.png 680w,\n/static/42a9ee4a83f74684b69e8c94baa4b74d/02d09/googlesprint.png 1020w,\n/static/42a9ee4a83f74684b69e8c94baa4b74d/9d567/googlesprint.png 1360w,\n/static/42a9ee4a83f74684b69e8c94baa4b74d/8b93e/googlesprint.png 2662w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>5일간 결과물을 도출하는 방법론으로 다음과 같은 17단계로 이어진다.</p>\n<ol>\n<li>현재 상황에 대한 구성원들의 생각과 문제 상황 공유</li>\n<li>스프린트를 통해 해결하고자 하는 목표 설정</li>\n<li>스프린트 질문 도출</li>\n<li>이해관계자의 구매 여정 Map 작성</li>\n<li>전문가 조언</li>\n<li>HMW(어떻게 하면 ~할 수 있을까) 작성 및 선정</li>\n<li>스프린트 기간에 주력하고자 하는 1순위 타깃과 질문 선정</li>\n<li>번갯불 대화 및 솔루션 스케치</li>\n<li>고객 선정을 위한 설문지 작성</li>\n<li>프로토타입 제작을 위한 최종 솔루션 선정</li>\n<li>프로토타입 제작을 위한 스토리보드 만들기</li>\n<li>프로토타입 제작</li>\n<li>프로토타입 완성 및 시연</li>\n<li>고객 인터뷰용 질문 만들기 (인터뷰 담당자)</li>\n<li>타깃 고객 인터뷰 및 학습</li>\n<li>스프린트 이후의 개발 플랜 점검 및 향후 일정 논의</li>\n<li>성찰</li>\n</ol>\n<h3>Figma - Figjam</h3>\n<p>오프라인 환경에서 종이, 캔버스, 포스트잇을 이용해서 각자의 의견을 종합해볼 수도 있지만 시간, 공간적 제약이 있을 때는 Figma를 사용해볼 수도 있다.</p>\n<p>디자인 툴인 Figma에는 Figjam이라는 기능을 제공한다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/220b3658614f0cbf96a85c33b623f225/eeb59/figjam.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 49.411764705882355%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABAElEQVR42oVSy27CMBD0z/MFPfUD+IfeekO9tQdoK4QQCBTUkIRYjY1f6yGQJk3JUmxZ1nrHs7Nji+3U4qgNKBK4EWOE8w7eBSbX7HlusF8RfHAQWbpHWUiQv0A6knZ1l3/mdbE+LoQA8TR5xi7JYCpeYUvXVzTIUk1KTQExGj9g9vEJb/4j/FXEnfVViugDjPawKtwl+GNB5O0R1As4EOvnjfyl5ZvenA9bIPHEnHrBgZo4do9xz9eBwutxNBp5KlGsSmzevpEs1vhKZlinFXSl6v/m4ZzjFVprcV4tgOr2HGksXjQmjwHv8w1ep0sst3MkWQlXY5VSkFIOyA5FjhMwZxKE5M8u3wAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='figjam' title='' src='/static/220b3658614f0cbf96a85c33b623f225/ca1dc/figjam.png' srcset='/static/220b3658614f0cbf96a85c33b623f225/e7570/figjam.png 170w,\n/static/220b3658614f0cbf96a85c33b623f225/f46e7/figjam.png 340w,\n/static/220b3658614f0cbf96a85c33b623f225/ca1dc/figjam.png 680w,\n/static/220b3658614f0cbf96a85c33b623f225/02d09/figjam.png 1020w,\n/static/220b3658614f0cbf96a85c33b623f225/9d567/figjam.png 1360w,\n/static/220b3658614f0cbf96a85c33b623f225/eeb59/figjam.png 1915w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>Figjam에서는 포스트잇, 연필그리기, 스티커붙이기, 타이머 등의 기능들을 제공한다.</p>\n<blockquote>\n<p>개인적으로 타이머 기능을 적극 활용하는 것이 좋다고 생각했다.\n위 <a href=\"###%EA%B5%AC%EA%B8%80-%EC%8A%A4%ED%94%84%EB%A6%B0%ED%8A%B8\">구글 스프린트</a>의 <code class=\"language-text\">8. 번갯불 대화 및 솔루션 스케치</code> 항목에서 추구하는 목적이 무엇인지 생각해보면 정해진 시간내로 서로의 의견을 제시하여 회의가 늘어지지 않게 하기 위함임을 알 수 있다.\n정해야할 내용이 많은 만큼 시간이 늘어지는 것만큼은 가장 경계해야한다고 생각한다.</p>\n</blockquote>\n<h2>서비스 주제</h2>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6944fe6d40ce96200429ad63128f9d7c/e96ee/b95b5dfe.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 56.470588235294116%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAACw0lEQVR42jVT/UtTURi++97U6fBjzokrhBIsSy0VMr9Cc+5ud3cf193NpBItl2VFxaBfgiCDatt1ny7DNTUiCiyDUunHiiJ/KSj6b57ee0c/HJ5zDue87/M87/syqrgTWskJfcIDU8oDY9oLU5qDPumGYVleHuilMuqk8p1eonfKPf2R75MyuqElZE4UFtCdvwJmlYN2axKqrSC0bwXoin6onrCoz4vof3kTXRsL6CjNo+/FIszpIDSUUJ3glGAyysFVhMxY8RaCW1E4Pl3HqS9LCOyn4PqRgGr7PAx5Dpa0H0efzynr8NpFtBdnYM2HYC+IsK2E0VwIE0ZQm/WXGaoej8O6zUH8yeL2HzcWf4cR+0vnX0OoeOVDXTaC7o2rOLl5DXU5kaT5UEUMqzMBBS0ZgRgLqEzxZYZ6iYP5NX36zIHfd2Pwqx+j3zgMfneh8k0A1lyImF0gFiIa8pNoyAkUWKB9kFgJaFwRyJYQLFle8ZgYsphYc8K2dwnm3QVY9qKo2Y3C+HEWKpJsy0XQSf7ZC1MkNaLIay5MU2AR9bkwGsnj2qy8n6SAPBjrQxc80z2wPeOh3gnD8F6E7oMI/WYAJolFJVW8jbw7Vir7eHx9DkeKs2gqhEi+FzUZLypSXlRTd6jjsuQED3PcC2MqgMb7Y/D42mF9MA5mWX5AVSYmHaWo4p1hmafPPmoZHyXyK2iiYMaknzxkcaA0AUZH5TZnWTCUqfXOIGa67Gi5Owx1hqdeZMkrAZ3r8+ggdo6n50i2gCaqrr0gVzqi+Nq2PgX3uyBZMwrGturC2e0RCuiDIzYMsceBgfQA+nbGoYl7lFaQl17yQkPNr0mwVE03oVtBNRGyxk7jMpFoXSLJVcSiJTkGJsfjYGwIU30O9D/qR2/pDE2NBwbp/8SUp8VI0yRjBaGG0EqJem+MoCk2gEP3nPgHWWq5267TrOQAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='b95b5dfe' title='' src='/static/6944fe6d40ce96200429ad63128f9d7c/ca1dc/b95b5dfe.png' srcset='/static/6944fe6d40ce96200429ad63128f9d7c/e7570/b95b5dfe.png 170w,\n/static/6944fe6d40ce96200429ad63128f9d7c/f46e7/b95b5dfe.png 340w,\n/static/6944fe6d40ce96200429ad63128f9d7c/ca1dc/b95b5dfe.png 680w,\n/static/6944fe6d40ce96200429ad63128f9d7c/02d09/b95b5dfe.png 1020w,\n/static/6944fe6d40ce96200429ad63128f9d7c/9d567/b95b5dfe.png 1360w,\n/static/6944fe6d40ce96200429ad63128f9d7c/e96ee/b95b5dfe.png 3200w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p><code class=\"language-text\">식물을 잘 키울 수 있도록 도와주는 서비스</code>라는 주제로 팀이 이뤄졌다.</p>\n<p>위 포스터를 확인했을 때 큰 주제로 추상적인 목표들이 즐비해있음을 확인할 수 있다.\n주어진 시간이 짧기 때문에 핵심기능을 추려야할 필요가 있다.</p>\n<blockquote>\n<p>💡 모든 과정을 진행할 때 이야기를 듣는 사람들은 형광펜 혹은 스티커 기능을 이용해 중요하다고 생각하는 부분에 색칠을 하며 듣는다. 형광펜과 스티커를 이용한 호응을 이용해 공통 관심사에 집중할 수 있으며 집중력이 분산되는 것도 예방할 수 있다.</p>\n</blockquote>\n<blockquote>\n<p>⏰ 모든 과정에는 제한시간이 존재한다.\n제한시간을 두고 회의가 루즈해지는 것을 막아야만한다!!</p>\n</blockquote>\n<h3>서비스의 목적과 가치</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/8d5ecc06de673c5ea99b5f3142bd3d10/2ab73/959281a8.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 92.94117647058823%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAAAsTAAALEwEAmpwYAAAEDElEQVR42oWUaVDUdRjHHadeNE0vmml62fS6XnRYU6kVCBg6wEoeoNONdtg4poNNL7QDaUhYlmN3/wtsXEscoTEhSsi1QEiCyiVHy8a9AiI3csnu/9OzqwxaWL+Z7zz/3/X5Pf/f8zy/dUibvTVNeXUxjS0N1DVUU1lTSv3VWq4011FzsZLi0kKxFfQO2DlXUkCnrc29DVVVudNWLKwbtUFvwzJV+X9R+8sA1p+7KfvJRkVeF1YZqzrTS01Bv/TtNJwfoTy3mz+KhnE0w0Cj6rFuDTbCzW4B5nwIca9AmgYydt7VLkgNULEEQZaMW0SZgTK2zUm2xoklYJlU/3kUbyeJr4PBC3QvQ2G4APP2q8S+AKWmYa42XqahronWa23UJE7RmzCAI62TkQwbA8oE7Sd+Y0gXyWBMLBOGaEo+sKPbCIqPy+NU4TE38IAAX4SylGFaOi7T3NRCu62Vi6ZpehLsODKuMZFrZyhlko6vz+HQHacrKoJRfQQlH9nQbRKgrwBfvQeoFQ8r02/QP9pFX38ffSM9/G6aZCjJgatoHIqnGM9YoPOb89xOi2YuRY8zXceFsK61gKAVD6uNMzg6Rum9cpP+1lFqT81xQ5lhLn+ahfwpBpV5Ok5YWUw2M2fKYsmcRvH73eg2u4HqKjA3DBKkE6OZJCKkn8g9DiJDRMEjKG/dJnmri6StTpL8VJJ83f150YJHio8TgzcYfVgFZu+XDS+B13Ez608H84hlHw9l7+bx1DAit49jegP03qpnozua+n/o38ADLkwbBHhS4eHyHTx6NpT1RYE8lhPK9/6TJB1ykKCvRlEuYfp0FL3cmWHL3QO81wDmiIcmyaGA8DyeMIfxlHKYJ02f8HT8UaJ8Z/nxux7MpaWkl1eR/OV19K8JxOc/gO47jJdFcdudnNIsER24SHTQErptSx5vzCd7sZTVkVlSR0r4EPqN/wPM2S93IXcY/u0SIfljvJd3i72/3uLEERWTHGQMXsT0zgymd2cxBtzG8Cb3wdYEGgR4SDvP9oohgkvG0NTPEi6T+W/30WE5TGfaF9gsn9GUqPNUxUow1gZKHhokKIdjFgmyTrCzeJLg2lmOHYWCvZ2MXfRitt4bV9smrhcdlM0rQPXBQL0Aj2hd7LrkYl8V7Kl3ceyIAENtLF7RoDbtgHZ/hqX6jVtcnvR5IDDvY0lsyfYEjUrMHhfa3S5iQ5aJ9YMzYR3imQ/qn77yxm3mxoWDKH4CFIBRqsPoi0fKVgmsBPDsVwLMDIWoZ+X5kfLTPbcq7fPu6C+QFmgnPchOhqYLs/8g2g1S+/JH9ypW0i7qGXHgcwFezoKKaKhKuCNrvHrnW6w1Vl6hH0Sn5HkTWy7rrDqZj+N+yVo3o6VA5W/OEXP1lJieygAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='959281a8' title='' src='/static/8d5ecc06de673c5ea99b5f3142bd3d10/ca1dc/959281a8.png' srcset='/static/8d5ecc06de673c5ea99b5f3142bd3d10/e7570/959281a8.png 170w,\n/static/8d5ecc06de673c5ea99b5f3142bd3d10/f46e7/959281a8.png 340w,\n/static/8d5ecc06de673c5ea99b5f3142bd3d10/ca1dc/959281a8.png 680w,\n/static/8d5ecc06de673c5ea99b5f3142bd3d10/2ab73/959281a8.png 749w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>서비스의 목적과 가치에 대해 구상한다.</p>\n<p>이 단계에서는 <code class=\"language-text\">서비스가 어떤 기능을 제공함으로서 어떤 문제를 해결한다</code>를 이야기하며 각자가 추상적인 목표를 어떤 방향으로 구체화하고 있는지 공유한다.</p>\n<blockquote>\n<p>⏰ 제한시간 : 3분</p>\n</blockquote>\n<h3>서비스의 대상</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 482px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/1565d40b7b67d5c466f4c07c539338e6/b58a3/db53c739.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 131.1764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFOElEQVR42pWVW3BTRRjH+6D4AD745IyPvjg644M+yICjIIgI40A7IGBx9EUZdHxgcAZ1RAQqAtMKFahAW2hLL9Cm9wulQgu9NwlN0vRqoW3a9JI0TZsmObmdy8/tjbZSZ3RP/mc3Z3d/+e+339lEybKM2Wymt7eX9vZ2vF7vbNtisTAyMsL4+Dg2m42uri7sdjtWq5W+vj4cDgczRdM0lpaoGcDV5GRuZGaSnJKC3mAgMTGRo0ePUlhYSPW9avLzdaSmpFJcXMyZs2eJj4/HIMbNFEVRlkGjZm5TU1OookPy+1CEY7/PRzgUxuly4hR9QfHMK/oionY6nAwMDCBJ0soOZ24RWaHK0kuxqYt7oq5v72PIPQV+4cDUT9hoQDPZcVvEUgNTsxPHXG66bcM8FmExjNgZ9LoXgYFwhF/SS/n63BG+SznI6csXsXaPglPFfaWJ/vM6JpL12G804RqfnJ3Y3KUn+W4BVY0WslobKes3LgKDAphd1kJyUQUJd7PIjdfhbhwDD9iz2mjMyOdxWjPuvHHcEx5mFtnX24y5PovGNj3lnRbck9NLHIYiZN4xklHeSlalhRMVZZhsdnCJT3o79gt1DFZY8ebVYxzuwadIJD38k3RTG81ZLTTk1PDI71jusOi+GV11K4X3TdyqNNI97ASHgpzlxnthAqVAxK5QPJvUkFHoG+wX8bMz3jpGS5MRm3dsESirCoFIiFA4LOIZRBIKqhFkn0zY5ic0KqH0+4kMiFoKoakyaiSCGg6JtBHjNPXJbkctbLcmLkVc/1bUeS2OX9LWtCffZ4E5gw/YVRPPjw15bK/7mZjaU2ypOUaNox1/KMBEjxU6u5CsfXg6GvB11qF0tqN2WNBG7U/n4THLdZ69toF1uu+JurmDZ3JiiEpdz82BaqpG2qhNOsLtk7Gk/7oHQ9wr3IlbS2nCtzw6fhIS9XPutCXA0x0FrMrfzUtVn/NiaTRr8rfxQs4eMmx1IrlFbFPj6Eg7TEP2OQJXz9CX/AO21GNISRdQq2oW1r0ITOop5/n8T1mdH8uq3K1C7/Jq9kGyB5tBCqKlp+DNScN18wpkpKLduAbZQmU/odXfXhbVWeCpDh1RmR+wJm8vz93ay+q8/WzKPU2B/aFwKBFM+11ALwr9gZJxCTkjCTnzMkpmAur920/H0Cf7sXmcDPpHsQeHGZLstHr+wh3xzW6t7AmiCC3UqkcS8iO7Rdr4w08DO70SBfphKh8rlA5pYiNUwupckmjTIuiDJ9DsZ1GHzqANH8f/qABPd7U4IeJEn5C/Z37VqgBqYb5pvcfL+Q/YktfARl0bMdUBJsPy3CCnjmDdG4xUrGOkZD2O8rfQF72G5c7rRIxrkZvXifOvbh6ozDhUKenx8ZUuwH6Dyt5mjc9E6KYXgK5SpMbNDOZswyhSqe7KBozpb9OZtgnX5QMEmjaBt2WJQ1GazAESzjmIEaDdDXCoUQBDc0BtvBha38NZuZPqvFhqS96kRbjMLd6H+fp5MHyCOt24HFg0rBDdJPOFXuVgi0pygzihg/NA5wxwI3TsI2C4hGT4DVq+JFJ7gMmOQ3jr44TD2uXAgKzikmQmggouIWdIQVWVJQ7FsiwfobVtFcDDqKZoNPMO3HUidUw7xbnZsBy4YtEWgCVgfh+s0QK6A9q2zMFFW7XsEn8NHwpg83KgtoIWgIwXIevfQWndLkDbBHy+npWAmTajTTX9D4eu2wQNOwmZ9qNaY/8h8czyMZrH+B+A8++mKt4iVbw9anAUJbCSRsRvB5/M+htqcBfde3gE/QAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='db53c739' title='' src='/static/1565d40b7b67d5c466f4c07c539338e6/b58a3/db53c739.png' srcset='/static/1565d40b7b67d5c466f4c07c539338e6/e7570/db53c739.png 170w,\n/static/1565d40b7b67d5c466f4c07c539338e6/f46e7/db53c739.png 340w,\n/static/1565d40b7b67d5c466f4c07c539338e6/b58a3/db53c739.png 482w' sizes='(max-width: 482px) 100vw, 482px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>어떤 사용자가 이 서비스를 사용할 지 떠올리고 각자의 생각을 작성한다.</p>\n<p>이후 각자가 자신의 생각을 이야기하는 시간을 가진다.</p>\n<blockquote>\n<p>⏰ 제한시간 : 3분</p>\n</blockquote>\n<h3>어떻게 하면 ~문제를 해결할 수 있을까?</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/b0779a001d5012f919647c1262166104/cf75f/1c560fdf.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 64.11764705882354%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAADDklEQVR42m2Ty28bVRTG/Q8Cy+wQyy66QEIgVd0goopVJSqiEkjcxJmHZzwznrE9Ez/jzNhx/IifkGCa0BY1D8evpizIonn8uBnIAokrHX33fOfe7z6Ovgj/jpubmxBHoxGVSpVWq8XwtyHNZkvklTAODvbp9Xph7fLyMlx/e3v7H4zcC94Tk8mEfr9Pr9ul027z+vWrsPbhwxXX19dcXd2EIXbwfyMyn88Zj8eh0HQ6ZTwZc3J6xsnZiLPROcenU+bzKZPpWxHnzKenzO7mE8GNZ8zFvtm5wJP3XMzfEclms6iqSsIwqQQ+frmAYVhsGGVkK8uatSNqNi/MLJKZ4pfcAy52PiJpxTlSB7xcb7GnV/lTOWZ7s3wvGA9F8nmPUl7kCQcz6QnORk7mUARqTgE1mcF3n9IvfkM8oXNgDejoHQpGlmGiSS0tBHO5HHpcxbYsmoMm9ZpPrRbQ/7krBA0cQ6L7Ypna2o/0VyR8VaGV+pzAXsLU1kiZz8N1s/hbRvYfd4J5ouKGsnhyqdLCFXmpVKTu17F0G1vXuZCXeaOsc7G6Rs9cYdxYoO0sceQvcL6zgKmnxbNrNHM1IunCNp/mj3mc7fIwPeDR5iFxVWIvWuZIa4jTdXrfPWMgRRlGn1FX19lMPaXqLtLxlqg6K3SMKu/0N2x5RSJurshDd8gTd4/HQnAx08C1dfbdGl3bJyH+avTE5KUk8156TncjQbfwiL+aH3Oo7XORGFMxt/jV6FC6E0wXSjzIHLKYGvJZYcaXpQMmX6c5+Ukm4Vh4kk5aiNqaQ1rTMHSDXFKl4MQoic43LB89kUBSZVzPJeIVynzh9fk2U+F7r8EP6YDGssUgqtFWGvyuNymJPzrUBtSsomiSw6vVLkHcF91XRbc1LNPE0HQ2PY+I5RX4JDvmK6eNGVtFlWLENJnYhkxWzlDWy9hKip6+S0qxUGWVvlanrLisy7EwVxSFWCyGbdtEWsJe1u4+2d0eQRDgCx9Xg3+8u13ZphyUBedTCjEgEPxWsIUvTHDv8bvwfV/4vsnffXFOQwjolxYAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='1c560fdf' title='' src='/static/b0779a001d5012f919647c1262166104/ca1dc/1c560fdf.png' srcset='/static/b0779a001d5012f919647c1262166104/e7570/1c560fdf.png 170w,\n/static/b0779a001d5012f919647c1262166104/f46e7/1c560fdf.png 340w,\n/static/b0779a001d5012f919647c1262166104/ca1dc/1c560fdf.png 680w,\n/static/b0779a001d5012f919647c1262166104/02d09/1c560fdf.png 1020w,\n/static/b0779a001d5012f919647c1262166104/cf75f/1c560fdf.png 1078w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>어떻게 하면 ~ 문제를 해결할 수 있을까? 라는 질문들을 작성하고 이야기한다.</p>\n<p>이 과정을 통해 해결해야할 문제들을 인지할 수 있다.</p>\n<p>이 때 기술적인 질문이 나오지 않도록 경계해야한다.\n해당 과정을 수행하는 이유는 서비스의 목적을 구체화하기 위함이다.</p>\n<ul>\n<li>어떻게 하면 제 시간에 식물에 물을 줄 수 있을까? (O)</li>\n<li>어떻게 하면 무중단 배포를 할 수 있을까? (X)</li>\n</ul>\n<blockquote>\n<p>⏰ 제한시간 : 5 ~ 8분</p>\n</blockquote>\n<h3>워드 클라우드</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/70641b5a84fd2f9bb79e54fec36d3260/0c082/07da0c75.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 72.35294117647058%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAABpklEQVR42nWUjW6CQBCEef8HbEwMBBRBQEUF/AFx6rfJtlfbXnI53NudmZ27M3o+n/p3zrPm/qp2u1adJ2rqWn3eaJpGjY9Jj8fj9T3pfr9rfuVSE3kxgXEcbZM5DIN2Ta02rRV/LBUnsdIsVZUUOiwrdceznvqudVADhOl2uxnbX4P9/X6vqqq02+00xYN0B04G6DmARv7hGygry9IKAbhcLkZELM9zldutiqpUURZK09Ti9csKBh1GDtZ1nRUzN5uNDoeDqeI3A3AAmqbR0PU6n886nU62EqMeMQbIaNtWx+Pxq83r9WoJdJBlmamEmBUASCF0MnKIRyTgn6tbLBbGxiSRwT6GowgraJFcWlTgo7UMIMUkhieNWtrxW8AoikJxHGu9XptSapIksfj25a0dih93yERstVrZ9BNEFS2xujV935tqXyGJUERBeB9DAo8BgmeAUuwX2UUAZvcQMEDDF+KqUIgdoXqAOQD2vF328PnrpYRPB1+4MsQAdbWQunchud/jH08vDLrBML63jVdeCDAk7939este4A8/nJ7D9N/vfyifYQc+OXTzteAAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='07da0c75' title='' src='/static/70641b5a84fd2f9bb79e54fec36d3260/ca1dc/07da0c75.png' srcset='/static/70641b5a84fd2f9bb79e54fec36d3260/e7570/07da0c75.png 170w,\n/static/70641b5a84fd2f9bb79e54fec36d3260/f46e7/07da0c75.png 340w,\n/static/70641b5a84fd2f9bb79e54fec36d3260/ca1dc/07da0c75.png 680w,\n/static/70641b5a84fd2f9bb79e54fec36d3260/0c082/07da0c75.png 804w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>위 단계에서 나온 키워드들을 기준으로 단어들을 나열한다.\n중요하게 생각되는 단어들은 크고 굵게 표기한다.</p>\n<p>이 과정을 통해 키워드를 간략하게 추릴 수 있다.</p>\n<blockquote>\n<p>⏰ 제한시간 : X</p>\n</blockquote>\n<h3>(선택) 모바일 vs 데스크탑</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/e98ef896a522c59419d537e2183120e8/2cbcd/8f5a28d2.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 34.705882352941174%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA6UlEQVR42p1Py46CQBDk/39iD1687C9wJCFikJnhjULCY5cLWWIWWBVKp8n4SDzoTtKZTlV3dZU2TRPmwuWp/laEvoCp0iS5XnXgrMP31xEr8/dh4V+CZfGHz2WDxUcDe92R09NpxDiONCT/+14tK/ye1+aLR2S7PTzxg8Ohv7pQTl59V8HtdgfhMvg+h2EY4JwjiiKYpomiKJDnOWFlWcJxHOrDMESSJAiCAJZlwXVdtG07R07TFLa9gef50HUdQggalstSsKqqC+ehrmvCJR/HMYnKw4wxZFmGYRhmhzJ/3/cEPIvxTuQz584XuVFWs+AAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='8f5a28d2' title='' src='/static/e98ef896a522c59419d537e2183120e8/ca1dc/8f5a28d2.png' srcset='/static/e98ef896a522c59419d537e2183120e8/e7570/8f5a28d2.png 170w,\n/static/e98ef896a522c59419d537e2183120e8/f46e7/8f5a28d2.png 340w,\n/static/e98ef896a522c59419d537e2183120e8/ca1dc/8f5a28d2.png 680w,\n/static/e98ef896a522c59419d537e2183120e8/2cbcd/8f5a28d2.png 764w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>생각하는 서비스가 어떤 환경에서 운영될지 생각해본다.</p>\n<p>이 과정을 통해 서비스가 어떻게 그려질지 대략적으로 생각해볼 수 있다.</p>\n<blockquote>\n<p>⏰ 제한시간 : 2분</p>\n</blockquote>\n<h3>장치/요소/기능 브레인스토밍</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/1e645927501f2d913d6591289ce0174f/ed9c8/2d693ea9.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 62.35294117647059%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA+UlEQVR42o2S6wqDMAxG+/6v6B8RryCCN7yb7QQirtRtgVhs05MvaZy87TgOOc9Tuq6TLMukLEtJkkSd/zzPpSgKXdM01ZX9fd+5Luu6XgzHhw1W37Zt0yTLssg34y6xuCOLZeKATDgGrKoqGYZBz+7nFnM3hDmoJtfP2jSNAgn8x1Qhn1C5QOq6VqhV8DcQhdM0fYCBAGUNJQyZlmwvZGVbb1AXRZHEcXyVbH0MOfcUiAJU3ntnQMbDXviXShiwnJF9m+dZ2raVcRzVvwFt9LDHOUQZw8wrPz3cHWatcibXv2RD3fd9cOZCsAtor2p9wEMQ9uzc4v24FxCIsUaKl2LQAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='2d693ea9' title='' src='/static/1e645927501f2d913d6591289ce0174f/ca1dc/2d693ea9.png' srcset='/static/1e645927501f2d913d6591289ce0174f/e7570/2d693ea9.png 170w,\n/static/1e645927501f2d913d6591289ce0174f/f46e7/2d693ea9.png 340w,\n/static/1e645927501f2d913d6591289ce0174f/ca1dc/2d693ea9.png 680w,\n/static/1e645927501f2d913d6591289ce0174f/02d09/2d693ea9.png 1020w,\n/static/1e645927501f2d913d6591289ce0174f/ed9c8/2d693ea9.png 1245w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>앞서 설정한 문제, 키워드 등을 참고하여 개발하고자 하는 서비스에 있을 것 같은 기능들을 브레인 스토밍 식으로 작성한다.</p>\n<p>이 과정을 통해 서비스에 존재할 수 있는 기능들을 파악할 수 있다.</p>\n<blockquote>\n<p>⏰ 제한시간 : 5 ~ 8분</p>\n</blockquote>\n<h3>지도 만들기</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/058bac759478396584248cefebdce165/d621b/2bb017bc.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 37.05882352941176%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAABDUlEQVR42l1QW26EMAzM/W/QY/QSPUDV/wUJPngtjwTIAzL1uFCt1tLIjmPP2DZ4sZyz+uM4EEJASglVVaGua8QYFbc9nw283/Bu5jxPHIJXI9G6rti2DdZa9Xe8rk5r2raWnMP7QMY5h7Yb9GGtAwVISL/vu+K8BJdlQdM0ugHBHnrvvU7P2Hx9V/j4/NGGcCUJknAqClKANs8zyrLU6W8REjHvZHrWmb63GGePI4lS8Ei8kyizgcUsugm5clEU/4R6ruveBN8mCknOp4wd8Hg8ME6TNhK87STqbJokH4V4HEf9o1jfdZoL0jsM/R/hfVC9hayYRClzZYFUaEx/cvIU5Z2QY1Awl7n6DbFfC/oiZLMMy8cAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='2bb017bc' title='' src='/static/058bac759478396584248cefebdce165/ca1dc/2bb017bc.png' srcset='/static/058bac759478396584248cefebdce165/e7570/2bb017bc.png 170w,\n/static/058bac759478396584248cefebdce165/f46e7/2bb017bc.png 340w,\n/static/058bac759478396584248cefebdce165/ca1dc/2bb017bc.png 680w,\n/static/058bac759478396584248cefebdce165/02d09/2bb017bc.png 1020w,\n/static/058bac759478396584248cefebdce165/9d567/2bb017bc.png 1360w,\n/static/058bac759478396584248cefebdce165/d621b/2bb017bc.png 1439w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>앞서 정의한 서비스 대상을 참고하여 구체적인 페르소나를 지정한다.\n페르소나를 참고하여 어떤 페이지들이 존재할지 생각해본다.</p>\n<p>위(<code class=\"language-text\">장치/요소/기능 브레인스토밍</code>)에서 도출된 기능들을 기반으로 각 페이지에 기능들을 작성한다.</p>\n<p>이 과정을 통해 대략적인 서비스 흐름과 구성을 생각해 볼 수 있다.</p>\n<blockquote>\n<p>⏰ 제한시간 : X</p>\n</blockquote>\n<h3>페이지 그려보기</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/535c843fc7491a9b1193802999045ddc/d703b/efe27f26.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 98.23529411764706%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAADCUlEQVR42nVUfYvbNhzO9/9IZX+MUsbGCqXj2I5C6dJLE9uxbOtdsq08e37KOeR6N4FQSKJHz5u0A8flcsF1rQvm6NA+fkD+8YRy7PHpj1/w+bd3+PD+V+QY8HLPy3WH51HWgrXOFfMyw+seS0pY5hX//PUR+6+P8D5gWRdow//kcgO6n7vETXmeEWNETAEheSzLgjAvaHuFb/sfCDEhhADN/6gvDzj9/h7PcDdm29iVUuqXOecKJCOGleAzjPWwLmAYBmitEfKCsfsCdfjzTXaVoYAI6EyWdZbIzRETfTTOYtQTJoJ57zEqrjHDhrmyu/fuxnD7cJVM+SslrzNaR1aWoMZVuaLA+8hDNCajbgCvADeGYvY0MISyUPqMQ3eCIytPMGstfYwY2h5Kn9H49v8ly8mSrKw5ZUpOlJ7xdf8NZ9VT7gTnHCS8oT3CEVza8DPDV7WRqmQCXZhfKSs6rRiIw/Go0Z81WRqqAGs0VwVvsasMqz9kJmCJMxd2rcwobkIKhqADPUxIosA8wpkzjk37yjuxTeZuQ5ZiF0rffhR21jCg2ZIdw9GGPzSs1EhQBuUdP7O3wVNvgTcB3nnsxD8BSMIy51qblQH15x4N5U6TgVIDrLfQ3QVBZ3pq2VGyJ6gar4lHBiheV8nSP0H3gaxmhbREdOPAemjsn47oujMrNOLfzyv8cA1EbFqXa5gyPMMaxvFlD8+NR15y9bAjgOeVc9I9Y2p1rnd+xTiNNfX7pPNzvXYCJAzlaolPKUd2ztdHwRFUHQ9kIcmu6A+BvyeoQXHP8qIumQfIIbstHUlRgAuLLT2UIjeNgukl5Vhn92QReWCnm9qKe8BbynJTJBjvr1csLpYe8g5T5qmbarFHeiMH9u2BXlucXIO05reLvQHWPkoXeZdHTVAytLL51MJMU/V45M2JrMk0THXPm+/hRlVek8D30GQFxaqc/cikezw8/F1ZWjKWFMUKI1dRnrv1+g7cA9diy5dGq+qdT2SXPZOlbDLbfz9gC05SlDVTlTzKahiqsvvxHwbVE1DyCDAZAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='efe27f26' title='' src='/static/535c843fc7491a9b1193802999045ddc/ca1dc/efe27f26.png' srcset='/static/535c843fc7491a9b1193802999045ddc/e7570/efe27f26.png 170w,\n/static/535c843fc7491a9b1193802999045ddc/f46e7/efe27f26.png 340w,\n/static/535c843fc7491a9b1193802999045ddc/ca1dc/efe27f26.png 680w,\n/static/535c843fc7491a9b1193802999045ddc/d703b/efe27f26.png 786w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>위 <code class=\"language-text\">지도 만들기</code> 활동에서 도출된 페이지들을 직접 그려보는 시간을 가진다.\n팀원들 각자가 페이지가 어떻게 구성될지 대략적으로 그려본다.</p>\n<p>잘 그릴 필요는 없다. 연필로 어떤 버튼이 어디에 위치할지, 어떤 기능이 존재하는지 정도만 알아볼 수 있을정도로 가볍게 스케치해도 좋다.</p>\n<p>이 과정을 통해 각자가 생각하는 View를 공유하면서 서비스의 구현 방향성에 대한 싱크를 맞춰갈 수 있다.</p>\n<blockquote>\n<p>⏰ 제한시간 : 각 페이지별 5분</p>\n</blockquote>\n<h3>결정권자 정하기 &#x26; 페이지 정하기</h3>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/6f4640ebaab36872787ea3c684cd1730/5fbd7/9f853c4e.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 18.823529411764707%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAx0lEQVR42oVPSQrCQBDMK32Gj/DgF/QqiKCIN0HBS4QcPAqCGLdEgktcCEHNLD1TjhNBxYMNQxXd1dVTDv6U5gIq408G0oAQEkSEYLVEtAl/9M7XslIWo/EQs14FLInBJ3MkfdfYASNvAK9RwiEK0Gm30G3X37tam2cMtfpwVNrCebtAPHXB7ylwzSBPF9tv1qooFwsI12YeH+H7/ofh64eMCUukicIyZjmRApeU9xWB8VzDjeZm45vbJo2SwqIkjl2QYh9JPABZ0jE0dwJ48AAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='9f853c4e' title='' src='/static/6f4640ebaab36872787ea3c684cd1730/ca1dc/9f853c4e.png' srcset='/static/6f4640ebaab36872787ea3c684cd1730/e7570/9f853c4e.png 170w,\n/static/6f4640ebaab36872787ea3c684cd1730/f46e7/9f853c4e.png 340w,\n/static/6f4640ebaab36872787ea3c684cd1730/ca1dc/9f853c4e.png 680w,\n/static/6f4640ebaab36872787ea3c684cd1730/02d09/9f853c4e.png 1020w,\n/static/6f4640ebaab36872787ea3c684cd1730/5fbd7/9f853c4e.png 1276w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>위 과정에서 작성한 페이지 중 하나의 페이지를 결정하기 위해 결정권자를 정한다.</p>\n<p>결정권자는 팀원들의 투표로 정하고 페이지를 결정할 때 만큼은 결정권자의 권한이 가장 높은 수직적인 구조로 진행된다.\n즉, 다시말해 페이지는 결정권자의 선택으로 정해진다.</p>\n<p>결정권자를 뽑았다면 각 페이지를 정하는 시간을 가진다.</p>\n<p>이 때 결정권자가 아닌 다른 팀원들은 자신의 페이지 혹은 자신이 마음에 드는 페이지에 대해 결정권자를 설득한다.</p>\n<p>페이지를 결정 할 때 여러 페이지의 기능을 합칠 수도 있다.</p>\n<blockquote>\n<p>⏰ 제한시간 : 각 페이지별 5분\n결정된 페이지들은 명예의전당👑 에 복사하여 올려둔다.\n<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 249px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/69b90d64e0e9f639c72d30b6addbfd44/14a1f/e4e8a0fb.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 311.7647058823529%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAA+CAYAAAArvjtdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFE0lEQVR42q1Yy47jRBTNh/AhfASfAGLLgu9gwwJpFjAs2cyCGYQEEgLBCBg2I6Y1NOoWnaFb5NHdiR07Tvwqv6p8uLccpytuO3Eaqrtkx1W+uVX33HNPZaCUwqEupQJQ4o8Tgc8+D/HsKwF3IelZNWbOHYCnliXq1navVHX9+ekMH737Fz75YIi1k23m7M4d8E2z1xN2Ov+RU4UA0qDUhvSzxrxWg3XnJZhf4Kw82MEaC9+DSETrFw9Mr9qaOW6fnWP2/U+wX74iL8N2g/WLWZbBcRzdbdvGcrnUVyll9SL18bOvcfv+h7h59Bjhwqmeb1Zxz2BRFFitVliv19vOxmuD3EbjJ5hM38No9DGiyNp4qPYvubl8c3zyzwWs69eYXw8Rx+H+PWxG2TReP89ziSIvkeXFBpu7czRsuoLQFqgS1TNZ5lBl0RrEQXNZ+4yzoUwJFCpvx2rbkm9vbzGdThGG5h5V1yhfIcxcpDLub5CjzZ1Bvd2bsoqmny200crD8rDBfUvebr42pLo97NrDQ5HvmtefHIz8ZrB3jQ/2QaU5OU1TypBIX5VU+3O5HlRGbjZbnuc6+rmkoHUQyg7B8gunp6e4uLjAeDy+IwbDwyRJ9LxmhnQSLEOGDTU95c/sXSxiJCLR8x4clPoze8d7GMfxPe8fDJtDWO0NG24xLdVfx/D9GEWXh30yRRMDGfBWAVaJDS9cktHocE3hl7gUcDcjqRmdxvwggu3ewPVcBGGPIsW0X8Pm6upKB6FuTKgrP6QvA0U708YPAnsfN0pZUs1xoMLnSMNTrAPRmtu9YSNJPTiui9h/g9VyhLUfH4bN3ihTFyJDGEuEUdYN7F4GN5/rDGrTQEdniqC0u7y81CWiZBlSlv1KQJNxyk0xLyjdHMeFbdmwiDjs+VzD656Hh/iwvua0Z34UYLF0tWhiY71qCmua4XCo6av2kFtEHo5pudfWHNZi0Rm8QdMb3qPz83NMJpNtALiFxDL23MbaXWnGMcf2Fvo69cxSqmgPMyKGs8UYr6y/IaJYp2Yv2HQqB/ofRQu8CWYoC9m95GPoq0tEPcwgw8nw1pxjwmywrwabva7FfL0nVQzPe+2hjjJlShAEWuUytLgC1rRmuaR2V+F9PuTiY1kW5pQFrK/rl7j5vg+X2MbzPC2V67E4SfH46S948sMJMZLa5UP2ggFddyHEdozJl7+EO3uZbAyymv319SVeno30Hg+6RFDzGX9ZLeq1ejBweJBguwiDjZhCoE2+9IZN80BZHkNffaDUS3AekiIFqa6CghBlCda5+G/ahveOoeJYCwznE7y4OYfMi+2xrS4TvQ1yQJhkbWdBkkQgFSzryKCi2p1ZdPSNtNGdsx4D+ubmBrPZjM5zIw1kc1zQUld0vF0Tc6eZ0AaK+bdIfnsbmH2xa9A8UjAs2CPz4MjPPT/A9czGre1QoQ+q1HN+RPr7OyjnX+7icJ9c45amGaLQx9K1EUc+slTcYXHzU8HRQWEmV0pC0j3rnlKph9XlLYWVUpeD/4Vgm+J852imis1B/AixFOYeRsGfEIWvT6SZSnbLwbE4FEWAcXimj7h8n8pKH6pkhsL6DqW4qmDTfJEJlLHYXKKkZRUyJ0INEaYe3VeppxbfQL54C+X00S4O74Sl3Eo1s6WFwNwj5TAbw/EoW9IKhyq+hJp+itI/af+JoItgC/IwzgO9f9XnbLdAHatgFUGmNH5p2sJHR1luf275F9esBX2J7TpSAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='e4e8a0fb' title='' src='/static/69b90d64e0e9f639c72d30b6addbfd44/14a1f/e4e8a0fb.png' srcset='/static/69b90d64e0e9f639c72d30b6addbfd44/e7570/e4e8a0fb.png 170w,\n/static/69b90d64e0e9f639c72d30b6addbfd44/14a1f/e4e8a0fb.png 249w' sizes='(max-width: 249px) 100vw, 249px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n</blockquote>\n<h3>BDD</h3>\n<p>BDD(Behavior Driven Development, 행위 주도 개발) 방법론을 차용한 방식으로 given - when - then 절로 해당 페이지에서 일어날 수 있는 모든 이벤트에 대해 정의한다.</p>\n<p>이 과정을 통해 구체적인 기능 명세를 할 수 있다.</p>\n<p><span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;'>\n      <a class='gatsby-resp-image-link' href='/static/c4a430c5a8881a8d1b8a65f39cbe0504/eb638/faa7372e.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 40%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABa0lEQVR42pWSTU7DMBCFcwnOyI4FW+AG7FjDih1SKy6AKv5URJEqWiRAhLRNUqokpEnj/Dhx8vBMmwqJFZZG9tjOm2+eY2Azms1cVRUsy4Lneev9pvlXGCJJEEeRjhjJaoU8FRiNxpjZzlawLEtIKTlXSqEoCtR1zWe/1ywYCYGgyBCm3xCFRCJDTRlpVH1xg+04DlzX5fVKFzVNk4uQ+GQyQZZl2+JGMHyGe3KK1wsT4egFw45CZy+FdVOyEY1WTXQXYRgyDQXlZA2J0n4QBFgul0xqzAf3MA+P8HDch/t0i8t9hYMdoH/WsKCqGvh+wJRpmjKh7/tMlec575PfQnfKhPPFFT5nu+h372DbPUwfFQbngPfWCipE2mMKGq1f7QMSGZ0RNflsLL5sWO9DjHtTzB2bPlm3irXJJEA0FNRuS9kSxnHMgiRMuSFLiUxU+Liu9QtLFqA26/rvL0FnREHt0dwWoyIkRnd+APAPYZtmY5CnAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='faa7372e' title='' src='/static/c4a430c5a8881a8d1b8a65f39cbe0504/ca1dc/faa7372e.png' srcset='/static/c4a430c5a8881a8d1b8a65f39cbe0504/e7570/faa7372e.png 170w,\n/static/c4a430c5a8881a8d1b8a65f39cbe0504/f46e7/faa7372e.png 340w,\n/static/c4a430c5a8881a8d1b8a65f39cbe0504/ca1dc/faa7372e.png 680w,\n/static/c4a430c5a8881a8d1b8a65f39cbe0504/02d09/faa7372e.png 1020w,\n/static/c4a430c5a8881a8d1b8a65f39cbe0504/9d567/faa7372e.png 1360w,\n/static/c4a430c5a8881a8d1b8a65f39cbe0504/eb638/faa7372e.png 1422w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span></p>\n<p>해당 방식은 UI 기반의 기능 명세에 치중할 수 있기 때문에 API 설계가 요구된다면 API 명세를 하는것을 추천한다.</p>\n<blockquote>\n<p>⏰ 제한시간 : X</p>\n</blockquote>\n<h2>결론</h2>\n<p>구글 스프린트를 기반으로 피움 팀이 아이디어를 구체화하는 과정을 정리해봤다.</p>\n<p>아이디어 도출 과정에 정답은 없지만 스프린트를 처음 해본 입장에서는 참고하면 좋은 방법이라고 생각되어 기록으로 남겨봤다.</p>\n<h2>Reference</h2>\n<p><a href=\"https://brunch.co.kr/@brunchjwshim/90\">구글스프린트</a>\n<a href=\"https://velog.io/@teo/google-sprint-14\">테오의 스프린트</a>\n<a href=\"https://www.atlassian.com/ko/agile/scrum/sprints\">Atlassian Sprint</a>\n<a href=\"https://www.thesprintbook.com/the-design-sprint\">https://www.thesprintbook.com/the-design-sprint</a></p>","frontmatter":{"title":"구글 스프린트 기반 아이디어 도출","date":"July 08, 2023","update":"July 08, 2023","tags":["아이디어","기획"],"series":null},"fields":{"slug":"/sprint-idea/","readingTime":{"minutes":11.66}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":null,"next":{"fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},"pageContext":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","series":null,"previousPostId":null,"nextPostId":"4a9246fb-171b-5973-88fc-864034e78afd"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/stylelint-and-husky/page-data.json b/page-data/stylelint-and-husky/page-data.json
index 63175af4..984f3957 100644
--- a/page-data/stylelint-and-husky/page-data.json
+++ b/page-data/stylelint-and-husky/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/stylelint-and-husky/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"66383c86-e2c8-533a-90e0-2effae572742","excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. style-lint, husky를 통한 컨벤션 자동화 하기 프로젝트는 혼자 할 수 도 있지만 팀원들과 함께 진행하는 경우도 있습니다. 피움의 경우에 팀원들과 함께 진행하고 있습니다. 개인적으로 생각했을 때 코드를 작성한다는 것은 그 자체로 하나의 문서를 만드는 것이라고 생각합니다. 그리고 그 문서의 양…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/hozzijeong\">클린</a>'가 작성했습니다.</p>\n</blockquote>\n<h1>style-lint, husky를 통한 컨벤션 자동화 하기</h1>\n<p>프로젝트는 혼자 할 수 도 있지만 팀원들과 함께 진행하는 경우도 있습니다. 피움의 경우에 팀원들과 함께 진행하고 있습니다. 개인적으로 생각했을 때 코드를 작성한다는 것은 그 자체로 하나의 문서를 만드는 것이라고 생각합니다. 그리고 그 문서의 양식을 통일하는 것이 가독성이나 유지 보수를 수월하게 한다고 생각합니다. 그렇기에 각각의 팀바다 코드 컨벤션이 존재하고, 그 컨벤션을 강제하도록 하는 플러그인 (<code class=\"language-text\">eslint</code>, <code class=\"language-text\">prettier</code>)이 존재합니다. </p>\n<p>이번에 소개할 기능은 css컨벤션을 맞출 수 있게 도와주는 style-lint와 git 메세지 양식을 지정해주는 husky에 대해 소개해 보려 합니다. </p>\n<h3>Stylelint</h3>\n<p><a href=\"https://stylelint.io/\">링크</a></p>\n<blockquote>\n<p>A mighty CSS linter that helps you avoid errors and enforce conventions.</p>\n</blockquote>\n<p>stylelint의 소개글 입니다. 간단하게 말해서 css 에러를 피하고 컨벤션을 강요하도록 하는 기능입니다. 설치는 다음과 같습니다. 저희는 styled-component를 사용하기 때문에 해당 요건에 맞는 라이브러리를 설치하겠습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> --save-dev stylelint stylelint-config-styled-components</code></pre></div>\n<p>라이브러리 설치가 끝나면 <code class=\"language-text\">.stylelintic</code>이라는 파일에서 원하는 css규칙을 결정할 수 있습니다. </p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">\"extends\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"stylelint-config-clean-order\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"stylelint-config-styled-components\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"plugins\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"stylelint-order\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"customSyntax\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"postcss-styled-syntax\"</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>피움에서는 <code class=\"language-text\">stlyelint-order</code>라는 플러그인을 설치한 뒤에 해당 규칙에 따라 css 컨벤션을 정했습니다. 실행시키는 방법은 다음과 같습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token property\">\"scripts\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token property\">\"stylelint\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"stylelint --ignore-path .gitignore '**/*.(ts|tsx)'\"</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>위와같이 설정하고 명령어를 입력하게 된다면 css파일을 돌면서 규칙에 맞지 않는 파일을 찾아줍니다. </p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> run stylelint</code></pre></div>\n<p><img src=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/ddb7ccf7-48ac-498f-a01b-199966021c93\" alt=\"image\"></p>\n<p>하지만 우린 좀 더 편한걸 원합니다. 매번 실행시키고 경고창들을 변경하기 보다 실행시킬때마다 자동으로 수정시켜주는걸 원합니다. 만약 그것을 원한다면 명령어에 <code class=\"language-text\">—fix</code>만을 추가해주면 됩니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token property\">\"scripts\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token property\">\"stylelint\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"stylelint --ignore-path .gitignore '**/*.(ts|tsx)' --fix\"</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><a href=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/0f9aa05c-a861-4601-a959-58754752294d\">https://github.com/pium-official/pium-official.github.io/assets/50974359/0f9aa05c-a861-4601-a959-58754752294d</a></p>\n<p>여기에 더 가서 파일을 저장할 때마다 실행시킬수도 있습니다.</p>\n<p>vsc의 <code class=\"language-text\">setting.json</code>에 들어가서 stylelint에 대한 설정을 해주면 됩니다. (vsCode extension을 먼저 설치해야 합니다)</p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token comment\">//...</span>\n\t<span class=\"token property\">\"editor.codeActionsOnSave\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n\t\t<span class=\"token property\">\"source.fixAll.stylelint\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token property\">\"source.fixAll.eslint\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token property\">\"source.fixAll.prettier\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span>\n\t<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\t<span class=\"token property\">\"stylelint.validate\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n\t\t<span class=\"token string\">\"typescript\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"typescriptreact\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"css\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"less\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"postcss\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"scss\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"html\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"javascript\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"vue-html\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"vue-postcss\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"sass\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"markdown\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"vue\"</span>\n\t<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token comment\">//...</span></code></pre></div>\n<p>codeActionOnSave는 저장할때마다 stylelint에 있는 모든 것을 fix한다는 것이고 아래에 있는 stylelint.validate는 해당 옵션을 적용시킬 확장자를 의미합니다. 위와 같이 설정하고 저장한다면 저장을 할 때마다 자동으로 컨벤션 적용이 되는 것을 볼 수 있습니다.</p>\n<h3>Husky</h3>\n<p><a href=\"https://typicode.github.io/husky/\">링크</a></p>\n<blockquote>\n<p>Husky improves your commits and more 🐶 <em>woof!</em></p>\n<p>You can use it to <strong>lint your commit messages</strong>, <strong>run tests</strong>, <strong>lint code</strong>, etc... when you commit or push. Husky supports <strong><a href=\"https://git-scm.com/docs/githooks\">all Git hooks</a></strong>.</p>\n</blockquote>\n<p>이번에는 <code class=\"language-text\">git</code>에 대한 컨벤션을 맞추기 위해 <code class=\"language-text\">husky</code>라는 라이브러리를 통해 <code class=\"language-text\">git hook</code>을 실행하보려 합니다. <code class=\"language-text\">git</code>에는 <code class=\"language-text\">commit</code>, <code class=\"language-text\">push</code> 등의 명령어가 있지만, 각각의 명령어가 실행되기 전에 전반적으로 실행시키고 싶은 명령어가 있거나, 컨벤션을 맞추거나, <code class=\"language-text\">commit</code> 메세지 형식을 강제할 수 있습니다. 이러한 일련의 과정이 필요한 이유는 팀 컨벤션에 맞춰진 <strong>신뢰성 있는 코드</strong>를 원격 저장소에 저장하기 위해서 입니다. 예시로 앞서 얘기한 <code class=\"language-text\">stylelint</code>가 적용이 되지 않은 코드가 원격 저장소에 올라가게 된다면, 컨벤션이 맞춰지지 않은것이고 공통된 문서로써의 역할을 잃을 수 있습니다. 이에 각각의 명령어기 실행되기 전에 단계를 <code class=\"language-text\">pre</code>라는 접두사를 붙여서 <code class=\"language-text\">pre-commit</code> 또는 <code class=\"language-text\">pre-push</code>단계라고 하는데, 이 각각의 단계에서 <code class=\"language-text\">test</code>를 실행하거나 build<code class=\"language-text\">를</code> 실행할 수도 있습니다.</p>\n<p>다음 명령어를 통해 설치할 수 있습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> husky --save-dev\nnpx husky <span class=\"token function\">install</span> // 이 명령어를 통해서 <span class=\"token function\">git</span> hook을 사용할 수 있도록 함.</code></pre></div>\n<p><code class=\"language-text\">hooks</code>를 만들기 위해서는 다음과 같이 입력하면 됩니다. <code class=\"language-text\">husky add &lt;file> [cmd]</code> → 이와 같은 형식으로 <code class=\"language-text\">husky</code> 폴더를 생성할 수 있습니다. (단, 해당 명령어를 입력하기 전에 <code class=\"language-text\">husky install</code>을 꼭 해야합니다!)</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">npx husky <span class=\"token function\">add</span> .husky/pre-commit <span class=\"token string\">\"npm test\"</span></code></pre></div>\n<p>위와같이 설정하고 나면 .husky폴더에 다음과 같은 파일이 생성됩니다.</p>\n<p><img src=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/82a9d271-4748-4871-be3a-220ca36c2de0\" alt=\"image\"></p>\n<p>이제 모든 커밋을 하기 전에 <code class=\"language-text\">npm test</code>명령어가 실행되게 됩니다. 이제, <code class=\"language-text\">test</code>를 통과하지 못한다면 <code class=\"language-text\">commit</code>은 일어나지 않습니다. 이를 통해 원격 저장소에 올라가는 코드들의 신뢰성은 급상승 하게 됩니다! </p>\n<p>하지만 하나의 단점이 있습니다. 피움 프로젝트를 모노레포 형식으로 진행하고 있는데, <code class=\"language-text\">husky</code>가 <code class=\"language-text\">githook</code>이기 때문에 <code class=\"language-text\">npm</code>에 의존성이 없는 <code class=\"language-text\">backend</code> 폴더에서도 커밋이 발생하기 전에 해당 <code class=\"language-text\">npm test</code>가 실행된다는 점입니다. 이는 상당히 좋지 못합니다… <code class=\"language-text\">pre-commit</code> 단계에서 명령어를 <code class=\"language-text\">cd frontend &amp;&amp; npm test</code>와 같이 변경해서 실행해봐도 백엔드에서 커밋을 할때마다 해당 명령어가 실행된다는게 상당히 비효율적인 방식이라고 생각했습니다. 따라서 피움 프론트엔드 CI는 husky로 진행하지 않기로 했습니다. 단, <code class=\"language-text\">commit</code> 메세지 형태는 강제할 수 있었습니다. <code class=\"language-text\">git</code> 컨벤션인 부분이라 FE/BE 모두 공통으로 해당되는 내용이었기에 해당 부분만 추가하는 방식으로 <code class=\"language-text\">husky</code>를 사용하기로 했습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token shebang important\">#!/usr/bin/env sh</span>\n<span class=\"token builtin class-name\">.</span> <span class=\"token string\">\"<span class=\"token variable\"><span class=\"token variable\">$(</span><span class=\"token function\">dirname</span> -- <span class=\"token string\">\"<span class=\"token variable\">$0</span>\"</span><span class=\"token variable\">)</span></span>/_/husky.sh\"</span>\n\n<span class=\"token comment\"># 커밋 컨벤션</span>\n<span class=\"token comment\"># 0. 검사 예외 조건 (자동 생성, 최초 커밋)</span>\n<span class=\"token comment\"># - Merge branch*, Merge pull request*, initial*</span>\n<span class=\"token comment\"># 1. 접두사의 글자는 소문자</span>\n<span class=\"token comment\"># 2. 맨 마지막 글자 '.' 마침표 금지</span>\n<span class=\"token comment\"># 3. 커밋 접두사 (규칙: '접두사' + '콜론' + ' ')</span>\n<span class=\"token comment\"># - feat: 새로운 기능 추가</span>\n<span class=\"token comment\"># - fix: 버그 수정</span>\n<span class=\"token comment\"># - docs: 문서의 수정</span>\n<span class=\"token comment\"># - style: (코드의 수정 없이) 스타일(style)만 변경(들여쓰기 같은 포맷이나 세미콜론을 빼먹은 경우)</span>\n<span class=\"token comment\"># - refactor: 코드를 리펙토링</span>\n<span class=\"token comment\"># - test: Test 관련한 코드의 추가, 수정</span>\n<span class=\"token comment\"># - chore: (코드의 수정 없이) 설정을 변경</span>\n<span class=\"token comment\"># - design: css 코드 수정</span>\n<span class=\"token comment\"># - build: build 및 관련 설정 변경</span>\n\n<span class=\"token assign-left variable\">COMMIT_MSG_FILE</span><span class=\"token operator\">=</span><span class=\"token variable\">$1</span>\n<span class=\"token assign-left variable\">FIRST_LINE</span><span class=\"token operator\">=</span><span class=\"token variable\"><span class=\"token variable\">`</span><span class=\"token function\">head</span> <span class=\"token parameter variable\">-n1</span> $<span class=\"token punctuation\">{</span>COMMIT_MSG_FILE<span class=\"token punctuation\">}</span><span class=\"token variable\">`</span></span>\n<span class=\"token assign-left variable\">RES</span><span class=\"token operator\">=</span><span class=\"token string\">\"needCheck\"</span> <span class=\"token comment\"># needCheck, auto, initial, lintError*, clear</span>\n\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>Merge branch<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">||</span>\n   <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>Merge pull request<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n  <span class=\"token assign-left variable\">RES</span><span class=\"token operator\">=</span><span class=\"token string\">\"auto\"</span>\n<span class=\"token keyword\">fi</span>\n\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>initial<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n  <span class=\"token assign-left variable\">RES</span><span class=\"token operator\">=</span><span class=\"token string\">\"initial\"</span>\n<span class=\"token keyword\">fi</span>\n\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span> <span class=\"token variable\">$RES</span> <span class=\"token operator\">==</span> <span class=\"token string\">\"needCheck\"</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">\\</span>.<span class=\"token punctuation\">)</span>$ <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n    <span class=\"token assign-left variable\">RES</span><span class=\"token operator\">=</span><span class=\"token string\">\"lintError1\"</span>\n  <span class=\"token keyword\">fi</span>\n\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>feat: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">&amp;&amp;</span>\n     <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>fix: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">&amp;&amp;</span>\n     <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>docs: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">&amp;&amp;</span>\n     <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>style: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">&amp;&amp;</span>\n     <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>refactor: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">&amp;&amp;</span>\n     <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>test: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">&amp;&amp;</span>\n     <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>design: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">&amp;&amp;</span>\n     <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>build: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">&amp;&amp;</span>\n     <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>chore: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n    <span class=\"token assign-left variable\">RES</span><span class=\"token operator\">=</span><span class=\"token string\">\"lintError2\"</span>\n  <span class=\"token keyword\">fi</span>\n\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$RES</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>lintError<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n    <span class=\"token assign-left variable\">RES</span><span class=\"token operator\">=</span><span class=\"token string\">\"clear\"</span>\n  <span class=\"token keyword\">fi</span>\n<span class=\"token keyword\">fi</span>\n\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$RES</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>lintError<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$RES</span> <span class=\"token operator\">==</span> <span class=\"token string\">\"lintError1\"</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n    <span class=\"token builtin class-name\">echo</span> <span class=\"token string\">\"CommitLint#1: 문장 마지막의 ('.') 마침표를 제거해주세요.\"</span>\n  <span class=\"token keyword\">fi</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$RES</span> <span class=\"token operator\">==</span> <span class=\"token string\">\"lintError2\"</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n    <span class=\"token builtin class-name\">echo</span> <span class=\"token string\">\"CommitLint#2: 접두사, 콜론, 띄어쓰기 형태를 확인하세요. (feat: , fix: , docs: , style: , refactor: , test: , chore: )\"</span>\n  <span class=\"token keyword\">fi</span>\n  <span class=\"token builtin class-name\">exit</span> <span class=\"token number\">1</span>\n<span class=\"token keyword\">elif</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$RES</span> <span class=\"token operator\">==</span> <span class=\"token string\">\"auto\"</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n  <span class=\"token builtin class-name\">echo</span> <span class=\"token string\">\"Automatically generated commit message from git\"</span>\n<span class=\"token keyword\">elif</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$RES</span> <span class=\"token operator\">==</span> <span class=\"token string\">\"initial\"</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n  <span class=\"token builtin class-name\">echo</span> <span class=\"token string\">\"Initial commit\"</span>\n<span class=\"token keyword\">elif</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$RES</span> <span class=\"token operator\">==</span> <span class=\"token string\">\"clear\"</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n  <span class=\"token builtin class-name\">echo</span> <span class=\"token string\">\"Pass commit lint!\"</span>\n<span class=\"token keyword\">fi</span>\n\n<span class=\"token builtin class-name\">exit</span> <span class=\"token number\">0</span></code></pre></div>\n<p>프로젝트 <code class=\"language-text\">git</code> 컨벤션에 맞춰서 메세지 작성을 강제 했고, 이를 통해 <code class=\"language-text\">commit</code> 메세지 통일을 할 수 있었습니다!</p>\n<hr>\n<h3>맺는말</h3>\n<p>프로젝트는 팀원들이 하나의 문서를 만드는 것이라고 생각을 합니다. 그리고 통일된 문서를 만들때 가장 필요한 것은 규칙(컨벤션)이고 그 규칙을 자동으로 강제할 수 있고, 코드의 신뢰성을 높여줄 수 있는 라이브러리에 대해서 한번 알아봤습니다.\n스타일 컨벤션을 맞추기 위해서는 <code class=\"language-text\">stylelint</code>를 <code class=\"language-text\">git hook</code>을 통해 <code class=\"language-text\">git</code>컨벤션을 맞추고 싶은 경우에는 <code class=\"language-text\">husky</code>를 통해서 컨벤션을 통일 할 수 있었습니다.</p>","frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기","date":"August 07, 2023","update":"August 07, 2023","tags":["stylelint","husky","컨벤션"],"series":null},"fields":{"slug":"/stylelint-and-husky/","readingTime":{"minutes":11.01}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}},"next":{"fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},"pageContext":{"id":"66383c86-e2c8-533a-90e0-2effae572742","series":null,"previousPostId":"15def1d5-c20f-5d07-b46e-24a14661365f","nextPostId":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/stylelint-and-husky/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"66383c86-e2c8-533a-90e0-2effae572742","excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. style-lint, husky를 통한 컨벤션 자동화 하기 프로젝트는 혼자 할 수 도 있지만 팀원들과 함께 진행하는 경우도 있습니다. 피움의 경우에 팀원들과 함께 진행하고 있습니다. 개인적으로 생각했을 때 코드를 작성한다는 것은 그 자체로 하나의 문서를 만드는 것이라고 생각합니다. 그리고 그 문서의 양…","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/hozzijeong\">클린</a>'가 작성했습니다.</p>\n</blockquote>\n<h1>style-lint, husky를 통한 컨벤션 자동화 하기</h1>\n<p>프로젝트는 혼자 할 수 도 있지만 팀원들과 함께 진행하는 경우도 있습니다. 피움의 경우에 팀원들과 함께 진행하고 있습니다. 개인적으로 생각했을 때 코드를 작성한다는 것은 그 자체로 하나의 문서를 만드는 것이라고 생각합니다. 그리고 그 문서의 양식을 통일하는 것이 가독성이나 유지 보수를 수월하게 한다고 생각합니다. 그렇기에 각각의 팀바다 코드 컨벤션이 존재하고, 그 컨벤션을 강제하도록 하는 플러그인 (<code class=\"language-text\">eslint</code>, <code class=\"language-text\">prettier</code>)이 존재합니다. </p>\n<p>이번에 소개할 기능은 css컨벤션을 맞출 수 있게 도와주는 style-lint와 git 메세지 양식을 지정해주는 husky에 대해 소개해 보려 합니다. </p>\n<h3>Stylelint</h3>\n<p><a href=\"https://stylelint.io/\">링크</a></p>\n<blockquote>\n<p>A mighty CSS linter that helps you avoid errors and enforce conventions.</p>\n</blockquote>\n<p>stylelint의 소개글 입니다. 간단하게 말해서 css 에러를 피하고 컨벤션을 강요하도록 하는 기능입니다. 설치는 다음과 같습니다. 저희는 styled-component를 사용하기 때문에 해당 요건에 맞는 라이브러리를 설치하겠습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> --save-dev stylelint stylelint-config-styled-components</code></pre></div>\n<p>라이브러리 설치가 끝나면 <code class=\"language-text\">.stylelintic</code>이라는 파일에서 원하는 css규칙을 결정할 수 있습니다. </p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">\"extends\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"stylelint-config-clean-order\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"stylelint-config-styled-components\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"plugins\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"stylelint-order\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"customSyntax\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"postcss-styled-syntax\"</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>피움에서는 <code class=\"language-text\">stlyelint-order</code>라는 플러그인을 설치한 뒤에 해당 규칙에 따라 css 컨벤션을 정했습니다. 실행시키는 방법은 다음과 같습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token property\">\"scripts\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token property\">\"stylelint\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"stylelint --ignore-path .gitignore '**/*.(ts|tsx)'\"</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>위와같이 설정하고 명령어를 입력하게 된다면 css파일을 돌면서 규칙에 맞지 않는 파일을 찾아줍니다. </p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> run stylelint</code></pre></div>\n<p><img src=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/ddb7ccf7-48ac-498f-a01b-199966021c93\" alt=\"image\"></p>\n<p>하지만 우린 좀 더 편한걸 원합니다. 매번 실행시키고 경고창들을 변경하기 보다 실행시킬때마다 자동으로 수정시켜주는걸 원합니다. 만약 그것을 원한다면 명령어에 <code class=\"language-text\">—fix</code>만을 추가해주면 됩니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token property\">\"scripts\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token property\">\"stylelint\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"stylelint --ignore-path .gitignore '**/*.(ts|tsx)' --fix\"</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><a href=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/0f9aa05c-a861-4601-a959-58754752294d\">https://github.com/pium-official/pium-official.github.io/assets/50974359/0f9aa05c-a861-4601-a959-58754752294d</a></p>\n<p>여기에 더 가서 파일을 저장할 때마다 실행시킬수도 있습니다.</p>\n<p>vsc의 <code class=\"language-text\">setting.json</code>에 들어가서 stylelint에 대한 설정을 해주면 됩니다. (vsCode extension을 먼저 설치해야 합니다)</p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token comment\">//...</span>\n\t<span class=\"token property\">\"editor.codeActionsOnSave\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n\t\t<span class=\"token property\">\"source.fixAll.stylelint\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token property\">\"source.fixAll.eslint\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token property\">\"source.fixAll.prettier\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span>\n\t<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\t<span class=\"token property\">\"stylelint.validate\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n\t\t<span class=\"token string\">\"typescript\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"typescriptreact\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"css\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"less\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"postcss\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"scss\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"html\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"javascript\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"vue-html\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"vue-postcss\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"sass\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"markdown\"</span><span class=\"token punctuation\">,</span>\n\t\t<span class=\"token string\">\"vue\"</span>\n\t<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token comment\">//...</span></code></pre></div>\n<p>codeActionOnSave는 저장할때마다 stylelint에 있는 모든 것을 fix한다는 것이고 아래에 있는 stylelint.validate는 해당 옵션을 적용시킬 확장자를 의미합니다. 위와 같이 설정하고 저장한다면 저장을 할 때마다 자동으로 컨벤션 적용이 되는 것을 볼 수 있습니다.</p>\n<h3>Husky</h3>\n<p><a href=\"https://typicode.github.io/husky/\">링크</a></p>\n<blockquote>\n<p>Husky improves your commits and more 🐶 <em>woof!</em></p>\n<p>You can use it to <strong>lint your commit messages</strong>, <strong>run tests</strong>, <strong>lint code</strong>, etc... when you commit or push. Husky supports <strong><a href=\"https://git-scm.com/docs/githooks\">all Git hooks</a></strong>.</p>\n</blockquote>\n<p>이번에는 <code class=\"language-text\">git</code>에 대한 컨벤션을 맞추기 위해 <code class=\"language-text\">husky</code>라는 라이브러리를 통해 <code class=\"language-text\">git hook</code>을 실행하보려 합니다. <code class=\"language-text\">git</code>에는 <code class=\"language-text\">commit</code>, <code class=\"language-text\">push</code> 등의 명령어가 있지만, 각각의 명령어가 실행되기 전에 전반적으로 실행시키고 싶은 명령어가 있거나, 컨벤션을 맞추거나, <code class=\"language-text\">commit</code> 메세지 형식을 강제할 수 있습니다. 이러한 일련의 과정이 필요한 이유는 팀 컨벤션에 맞춰진 <strong>신뢰성 있는 코드</strong>를 원격 저장소에 저장하기 위해서 입니다. 예시로 앞서 얘기한 <code class=\"language-text\">stylelint</code>가 적용이 되지 않은 코드가 원격 저장소에 올라가게 된다면, 컨벤션이 맞춰지지 않은것이고 공통된 문서로써의 역할을 잃을 수 있습니다. 이에 각각의 명령어기 실행되기 전에 단계를 <code class=\"language-text\">pre</code>라는 접두사를 붙여서 <code class=\"language-text\">pre-commit</code> 또는 <code class=\"language-text\">pre-push</code>단계라고 하는데, 이 각각의 단계에서 <code class=\"language-text\">test</code>를 실행하거나 build<code class=\"language-text\">를</code> 실행할 수도 있습니다.</p>\n<p>다음 명령어를 통해 설치할 수 있습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> husky --save-dev\nnpx husky <span class=\"token function\">install</span> // 이 명령어를 통해서 <span class=\"token function\">git</span> hook을 사용할 수 있도록 함.</code></pre></div>\n<p><code class=\"language-text\">hooks</code>를 만들기 위해서는 다음과 같이 입력하면 됩니다. <code class=\"language-text\">husky add &lt;file> [cmd]</code> → 이와 같은 형식으로 <code class=\"language-text\">husky</code> 폴더를 생성할 수 있습니다. (단, 해당 명령어를 입력하기 전에 <code class=\"language-text\">husky install</code>을 꼭 해야합니다!)</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">npx husky <span class=\"token function\">add</span> .husky/pre-commit <span class=\"token string\">\"npm test\"</span></code></pre></div>\n<p>위와같이 설정하고 나면 .husky폴더에 다음과 같은 파일이 생성됩니다.</p>\n<p><img src=\"https://github.com/pium-official/pium-official.github.io/assets/50974359/82a9d271-4748-4871-be3a-220ca36c2de0\" alt=\"image\"></p>\n<p>이제 모든 커밋을 하기 전에 <code class=\"language-text\">npm test</code>명령어가 실행되게 됩니다. 이제, <code class=\"language-text\">test</code>를 통과하지 못한다면 <code class=\"language-text\">commit</code>은 일어나지 않습니다. 이를 통해 원격 저장소에 올라가는 코드들의 신뢰성은 급상승 하게 됩니다! </p>\n<p>하지만 하나의 단점이 있습니다. 피움 프로젝트를 모노레포 형식으로 진행하고 있는데, <code class=\"language-text\">husky</code>가 <code class=\"language-text\">githook</code>이기 때문에 <code class=\"language-text\">npm</code>에 의존성이 없는 <code class=\"language-text\">backend</code> 폴더에서도 커밋이 발생하기 전에 해당 <code class=\"language-text\">npm test</code>가 실행된다는 점입니다. 이는 상당히 좋지 못합니다… <code class=\"language-text\">pre-commit</code> 단계에서 명령어를 <code class=\"language-text\">cd frontend &amp;&amp; npm test</code>와 같이 변경해서 실행해봐도 백엔드에서 커밋을 할때마다 해당 명령어가 실행된다는게 상당히 비효율적인 방식이라고 생각했습니다. 따라서 피움 프론트엔드 CI는 husky로 진행하지 않기로 했습니다. 단, <code class=\"language-text\">commit</code> 메세지 형태는 강제할 수 있었습니다. <code class=\"language-text\">git</code> 컨벤션인 부분이라 FE/BE 모두 공통으로 해당되는 내용이었기에 해당 부분만 추가하는 방식으로 <code class=\"language-text\">husky</code>를 사용하기로 했습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token shebang important\">#!/usr/bin/env sh</span>\n<span class=\"token builtin class-name\">.</span> <span class=\"token string\">\"<span class=\"token variable\"><span class=\"token variable\">$(</span><span class=\"token function\">dirname</span> -- <span class=\"token string\">\"<span class=\"token variable\">$0</span>\"</span><span class=\"token variable\">)</span></span>/_/husky.sh\"</span>\n\n<span class=\"token comment\"># 커밋 컨벤션</span>\n<span class=\"token comment\"># 0. 검사 예외 조건 (자동 생성, 최초 커밋)</span>\n<span class=\"token comment\"># - Merge branch*, Merge pull request*, initial*</span>\n<span class=\"token comment\"># 1. 접두사의 글자는 소문자</span>\n<span class=\"token comment\"># 2. 맨 마지막 글자 '.' 마침표 금지</span>\n<span class=\"token comment\"># 3. 커밋 접두사 (규칙: '접두사' + '콜론' + ' ')</span>\n<span class=\"token comment\"># - feat: 새로운 기능 추가</span>\n<span class=\"token comment\"># - fix: 버그 수정</span>\n<span class=\"token comment\"># - docs: 문서의 수정</span>\n<span class=\"token comment\"># - style: (코드의 수정 없이) 스타일(style)만 변경(들여쓰기 같은 포맷이나 세미콜론을 빼먹은 경우)</span>\n<span class=\"token comment\"># - refactor: 코드를 리펙토링</span>\n<span class=\"token comment\"># - test: Test 관련한 코드의 추가, 수정</span>\n<span class=\"token comment\"># - chore: (코드의 수정 없이) 설정을 변경</span>\n<span class=\"token comment\"># - design: css 코드 수정</span>\n<span class=\"token comment\"># - build: build 및 관련 설정 변경</span>\n\n<span class=\"token assign-left variable\">COMMIT_MSG_FILE</span><span class=\"token operator\">=</span><span class=\"token variable\">$1</span>\n<span class=\"token assign-left variable\">FIRST_LINE</span><span class=\"token operator\">=</span><span class=\"token variable\"><span class=\"token variable\">`</span><span class=\"token function\">head</span> <span class=\"token parameter variable\">-n1</span> $<span class=\"token punctuation\">{</span>COMMIT_MSG_FILE<span class=\"token punctuation\">}</span><span class=\"token variable\">`</span></span>\n<span class=\"token assign-left variable\">RES</span><span class=\"token operator\">=</span><span class=\"token string\">\"needCheck\"</span> <span class=\"token comment\"># needCheck, auto, initial, lintError*, clear</span>\n\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>Merge branch<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">||</span>\n   <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>Merge pull request<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n  <span class=\"token assign-left variable\">RES</span><span class=\"token operator\">=</span><span class=\"token string\">\"auto\"</span>\n<span class=\"token keyword\">fi</span>\n\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>initial<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n  <span class=\"token assign-left variable\">RES</span><span class=\"token operator\">=</span><span class=\"token string\">\"initial\"</span>\n<span class=\"token keyword\">fi</span>\n\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span> <span class=\"token variable\">$RES</span> <span class=\"token operator\">==</span> <span class=\"token string\">\"needCheck\"</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">\\</span>.<span class=\"token punctuation\">)</span>$ <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n    <span class=\"token assign-left variable\">RES</span><span class=\"token operator\">=</span><span class=\"token string\">\"lintError1\"</span>\n  <span class=\"token keyword\">fi</span>\n\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>feat: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">&amp;&amp;</span>\n     <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>fix: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">&amp;&amp;</span>\n     <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>docs: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">&amp;&amp;</span>\n     <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>style: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">&amp;&amp;</span>\n     <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>refactor: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">&amp;&amp;</span>\n     <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>test: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">&amp;&amp;</span>\n     <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>design: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">&amp;&amp;</span>\n     <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>build: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">&amp;&amp;</span>\n     <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$FIRST_LINE</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>chore: <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n    <span class=\"token assign-left variable\">RES</span><span class=\"token operator\">=</span><span class=\"token string\">\"lintError2\"</span>\n  <span class=\"token keyword\">fi</span>\n\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token operator\">!</span> <span class=\"token variable\">$RES</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>lintError<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n    <span class=\"token assign-left variable\">RES</span><span class=\"token operator\">=</span><span class=\"token string\">\"clear\"</span>\n  <span class=\"token keyword\">fi</span>\n<span class=\"token keyword\">fi</span>\n\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$RES</span> <span class=\"token operator\">=~</span> ^<span class=\"token punctuation\">(</span>lintError<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$RES</span> <span class=\"token operator\">==</span> <span class=\"token string\">\"lintError1\"</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n    <span class=\"token builtin class-name\">echo</span> <span class=\"token string\">\"CommitLint#1: 문장 마지막의 ('.') 마침표를 제거해주세요.\"</span>\n  <span class=\"token keyword\">fi</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$RES</span> <span class=\"token operator\">==</span> <span class=\"token string\">\"lintError2\"</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n    <span class=\"token builtin class-name\">echo</span> <span class=\"token string\">\"CommitLint#2: 접두사, 콜론, 띄어쓰기 형태를 확인하세요. (feat: , fix: , docs: , style: , refactor: , test: , chore: )\"</span>\n  <span class=\"token keyword\">fi</span>\n  <span class=\"token builtin class-name\">exit</span> <span class=\"token number\">1</span>\n<span class=\"token keyword\">elif</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$RES</span> <span class=\"token operator\">==</span> <span class=\"token string\">\"auto\"</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n  <span class=\"token builtin class-name\">echo</span> <span class=\"token string\">\"Automatically generated commit message from git\"</span>\n<span class=\"token keyword\">elif</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$RES</span> <span class=\"token operator\">==</span> <span class=\"token string\">\"initial\"</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n  <span class=\"token builtin class-name\">echo</span> <span class=\"token string\">\"Initial commit\"</span>\n<span class=\"token keyword\">elif</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">[</span> <span class=\"token variable\">$RES</span> <span class=\"token operator\">==</span> <span class=\"token string\">\"clear\"</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token keyword\">then</span>\n  <span class=\"token builtin class-name\">echo</span> <span class=\"token string\">\"Pass commit lint!\"</span>\n<span class=\"token keyword\">fi</span>\n\n<span class=\"token builtin class-name\">exit</span> <span class=\"token number\">0</span></code></pre></div>\n<p>프로젝트 <code class=\"language-text\">git</code> 컨벤션에 맞춰서 메세지 작성을 강제 했고, 이를 통해 <code class=\"language-text\">commit</code> 메세지 통일을 할 수 있었습니다!</p>\n<hr>\n<h3>맺는말</h3>\n<p>프로젝트는 팀원들이 하나의 문서를 만드는 것이라고 생각을 합니다. 그리고 통일된 문서를 만들때 가장 필요한 것은 규칙(컨벤션)이고 그 규칙을 자동으로 강제할 수 있고, 코드의 신뢰성을 높여줄 수 있는 라이브러리에 대해서 한번 알아봤습니다.\n스타일 컨벤션을 맞추기 위해서는 <code class=\"language-text\">stylelint</code>를 <code class=\"language-text\">git hook</code>을 통해 <code class=\"language-text\">git</code>컨벤션을 맞추고 싶은 경우에는 <code class=\"language-text\">husky</code>를 통해서 컨벤션을 통일 할 수 있었습니다.</p>","frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기","date":"August 07, 2023","update":"August 07, 2023","tags":["stylelint","husky","컨벤션"],"series":null},"fields":{"slug":"/stylelint-and-husky/","readingTime":{"minutes":11.01}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}},"next":{"fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},"pageContext":{"id":"66383c86-e2c8-533a-90e0-2effae572742","series":null,"previousPostId":"15def1d5-c20f-5d07-b46e-24a14661365f","nextPostId":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/tags/page-data.json b/page-data/tags/page-data.json
index 3d4985b4..ccf1e15e 100644
--- a/page-data/tags/page-data.json
+++ b/page-data/tags/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-pages-tags-jsx","path":"/tags/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"allMarkdownRemark":{"group":[{"fieldValue":"CI","totalCount":1},{"fieldValue":"CI/CD","totalCount":2},{"fieldValue":"DB","totalCount":1},{"fieldValue":"HTTPS","totalCount":1},{"fieldValue":"JPA","totalCount":1},{"fieldValue":"MySQL","totalCount":1},{"fieldValue":"OAuth2.0","totalCount":1},{"fieldValue":"React","totalCount":1},{"fieldValue":"React Query","totalCount":1},{"fieldValue":"RestDocs","totalCount":2},{"fieldValue":"SpringbootTest","totalCount":1},{"fieldValue":"Tanstack Query","totalCount":1},{"fieldValue":"Transaction","totalCount":1},{"fieldValue":"Validation","totalCount":1},{"fieldValue":"Webhook","totalCount":1},{"fieldValue":"Webpack","totalCount":1},{"fieldValue":"bundle","totalCount":1},{"fieldValue":"husky","totalCount":1},{"fieldValue":"nullable","totalCount":1},{"fieldValue":"stylelint","totalCount":1},{"fieldValue":"기획","totalCount":1},{"fieldValue":"리액트 쿼리","totalCount":1},{"fieldValue":"문서화","totalCount":1},{"fieldValue":"배포","totalCount":1},{"fieldValue":"블로그","totalCount":1},{"fieldValue":"설정","totalCount":2},{"fieldValue":"세팅","totalCount":1},{"fieldValue":"아이디어","totalCount":1},{"fieldValue":"인수테스트","totalCount":1},{"fieldValue":"인프라","totalCount":1},{"fieldValue":"젠킨스","totalCount":3},{"fieldValue":"최적화","totalCount":1},{"fieldValue":"컨벤션","totalCount":1},{"fieldValue":"테스트","totalCount":2}],"nodes":[{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 사건의 발단  3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.  그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다. 당황하지 않고 침착하게 f12를 눌러 개발자도구를 열고 네트워크탭을 확인해보니 API가 이상하게 호출되고있었다. 평소 프론트분들을 굉장…","fields":{"slug":"/restdocs-start/"},"frontmatter":{"date":"August 11, 2023","update":"Aug 11, 2023","title":"RestDocs로 API 문서화하기","tags":["문서화","RestDocs","테스트"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. OAuth란? 현재 개발하고 있는 서비스에서 구글 캘린더에 접근을 한다고 가정을 해봅시다. 현재 접근하는 사용자의 구글 캘린더 정보를 얻고자 한다면 구글 계정으로 로그인을 해야합니다. 진짜 간단한 방법이 있습니다. 사용자로부터 구글 id와 password를 받고 저희가 대신 로그인 해서 해당 사용자의 …","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"date":"August 10, 2023","update":"Aug 10, 2023","title":"내가 이해한 OAuth2.0","tags":["OAuth2.0"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. style-lint, husky를 통한 컨벤션 자동화 하기 프로젝트는 혼자 할 수 도 있지만 팀원들과 함께 진행하는 경우도 있습니다. 피움의 경우에 팀원들과 함께 진행하고 있습니다. 개인적으로 생각했을 때 코드를 작성한다는 것은 그 자체로 하나의 문서를 만드는 것이라고 생각합니다. 그리고 그 문서의 양…","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"date":"August 07, 2023","update":"Aug 07, 2023","title":"stylelint와 husky를 통해 컨벤션 통일하기","tags":["stylelint","husky","컨벤션"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. CRA없에 webpack으로 react 세팅하기 피움 서비스 환경을 만들기로 하면서, FE의 개발 스펙은 React + TypeScript로 설정하였습니다. React는 당연 현존 최강 라이브러리이고, 여기에 JavaScript의 동적 타입을 컴파일 단계에서 잡아주는 TypeScript까지 더해서 안정…","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"date":"August 06, 2023","update":"Aug 06, 2023","title":"webpack으로만 React 설정하기 (without CRA)","tags":["React","Webpack"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 인수테스트를 작성하면서 다음과 같은 문제가 발생했다. RestAssured를 사용하고 있다. 각 테스트별로 (DB)데이터가 격리된 테스트를 수행하고 싶다. 이에 다음과 같은 시행착오를 거쳤다. 최종적으로 작성된 코드를 보고싶다면 최종코드를 확인해주세요. 시행착오 JPA를 사용하고 있는 현 시점에서…","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"date":"August 03, 2023","update":"Aug 03, 2023","title":"인수테스트 데이터 초기화하기","tags":["인수테스트","RestDocs","테스트"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '하마드'가 작성했습니다. 개요 우아한테크코스 5기 피움 서비스의 인수 테스트를 작성하던 도중, 실제 포트에 애플리케이션을 구동시켜 테스트를 하는 \n환경에서 테스트를 할 때, 테스트 메소드에서 분명히 해당 리소스를 저장했는데도 RestAssured의 GET 요청이 수행되지 않는 경우가 있었다. 이 이유를 파악하고 해결 과정을 …","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"date":"July 31, 2023","update":"Jul 31, 2023","title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)","tags":["Transaction","SpringbootTest"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 현재 피움팀 서버는  요청으로 이뤄져있다.\n는 WWW 상에서 정보를 주고 받는 프로토콜인데, 누군가 네트워크에서 신호를 가로채면 내용이 노출되는 문제가 발생할 수 있다.\n이를 해결해주는 프로토콜이 바로 이다. 는 정보를 암호화하는 SSL을 이용한 프로토콜이다. …","fields":{"slug":"/apply-https/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"내 서버에 HTTPS 설정하기","tags":["HTTPS"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. 사건의 발단 이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국  파일의 크기를 보니 무려 16m…","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"bundle-analyze를 통한 bundle 크기 분석","tags":["bundle","최적화"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 본 설명 글은 다음과 같은 환경에서 진행됩니다. 배포서버 : Ubuntu 22.04.2 LTS DB서버 : Ubuntu 22.04.2 LTS 배포서버와 DB서버는 동일한 VPC를 사용하고 있습니다. DB : MySQL 8.0.33 Application : Spr…","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"Table Drop 못하게 막아버리기","tags":["DB","MySQL"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 현재 피움팀의 젠킨스에서 빌드 트리거로 을 사용하고있다.  해당 설정은 Github에서 유발되는 모든 WebHook에 대해 빌드 트리거가 동작하는 설정이다.  빌드 스크립트에서 위처럼 triggers 설정을 별도로 지정할 수 있지만 현재 프로젝트 구조상 더 세분화된 설정이 필요한 상태다.  현재 …","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"date":"July 25, 2023","update":"Jul 25, 2023","title":"PR 라벨로 젠킨스 빌드유발을 구분하기","tags":["젠킨스","CI"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 이번 피움 서비스에서 CI/CD를 적용하기 위해 Jekins와 Github Webhook을 이용했습니다. 본 글에서는 Jenkins와 Github Webhook을 이용한 SpringBoot 서버 자동 빌드, 자동 배포 과정을 다루겠습니다. Jenkins 설치 과정은 피움 팀 젠킨스 설치하기 를 참고하…","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"date":"July 24, 2023","update":"Jul 24, 2023","title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기","tags":["CI/CD","젠킨스","Webhook","설정"]}},{"excerpt":"이 글은 우아한테크코스 5기, 피움팀 크루 '참새'가 작성했습니다. 서론  피움의 프론트엔드에서는 서버 상태 관리를 위해 Tanstack Query를 사용하기로 하였다. 이 글에서는 많고 많은 상태 관리 라이브러리 중 Tanstack Query를 사용하기로 결정한 이유를 소개하고자 한다. 설치한 버전: 5.0.0-alpha.86 Tanstack query…","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"date":"July 23, 2023","update":"Jul 23, 2023","title":"프론트엔드: Tanstack Query 사용에 대하여","tags":["Tanstack Query","React Query","리액트 쿼리"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론  http://pium.life 로 접속하면 피움의 홈페이지가 나오기까지의 과정을 기록으로 남겨보려고 한다. 본 과정은 서버 구축을 처음 하면서 과정을 이해하기위해 작성된 글입니다. 빠르게 따라할 수 있는 설정 기반 글을 원한다면 마지막 목차인 정리를 확인해보시길 바랍니다. 본 과정에서는 소량의 …","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"date":"July 18, 2023","update":"Jul 18, 2023","title":"피움의 배포과정","tags":["배포","인프라"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다. 정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.\n이에 Jenkins를 설치하고 환경설정을 빌드서버 환경을 구축한 일련의 과정을 기록해두려고한다. 작업 환경 : Ubuntu 22.04.2 LTS 공식문서 살펴보기 젠킨스 공…","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"date":"July 16, 2023","update":"Jul 16, 2023","title":"젠킨스 설치하기","tags":["CI/CD","젠킨스","설정"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 서론 JPA를 이용해 엔티티를 설계하다가  어노테이션과 @Column의 의 차이점이 궁금해져 알아보았습니다. nullable = false ?? JPA는 엔티티를 매핑하고 설계하면 자동으로 DDL을 생성해 주는 기능을 제공합니다. \n또한 엔티티의 각 컬럼들에 대해 NOT NULL, UNIQUE 등과 …","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"date":"July 16, 2023","update":"Jul 16, 2023","title":"@NotNull과 nullable = false는 어떤 차이가 있을까?","tags":["JPA","Validation","nullable"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀의 기술블로그를 만들기까지의 험난한 과정을 정리해보려고 한다. 플랫폼 선정 팀 블로그를 작성하기 위해 다양한 플랫폼들을 고려해봤다. 티스토리 티스토리는 팀 블로그 기능을 통해 다양한 작성자 및 관리자를 지정할 수 있다. 하지만 UI를 직접 수정할 수 없을 뿐더러 제공되어있는 스킨들이 대부분 …","fields":{"slug":"/blog-starter/"},"frontmatter":{"date":"July 09, 2023","update":"Jul 09, 2023","title":"피움 블로그 생성과정","tags":["블로그","세팅"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 기획부터 개발까지 하나의 프로그램이 생성되는 모든 프로세스를 경험할 수 있는 시간을 가졌다. 피움팀에서 어떤 방식을 통해 아이디어와 기능을 도출해나갔는지 기록해두고자 한다. 스프린트란? 스프린트는 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간을 의미한다. 여기서는 기획부터 데모수준의 프로…","fields":{"slug":"/sprint-idea/"},"frontmatter":{"date":"July 08, 2023","update":"Jul 08, 2023","title":"구글 스프린트 기반 아이디어 도출","tags":["아이디어","기획"]}}]}},"pageContext":{}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-pages-tags-jsx","path":"/tags/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"allMarkdownRemark":{"group":[{"fieldValue":"CI","totalCount":1},{"fieldValue":"CI/CD","totalCount":2},{"fieldValue":"DB","totalCount":1},{"fieldValue":"HTTPS","totalCount":1},{"fieldValue":"JPA","totalCount":1},{"fieldValue":"MySQL","totalCount":1},{"fieldValue":"OAuth2.0","totalCount":1},{"fieldValue":"React","totalCount":1},{"fieldValue":"React Query","totalCount":1},{"fieldValue":"RestDocs","totalCount":2},{"fieldValue":"SpringbootTest","totalCount":1},{"fieldValue":"Tanstack Query","totalCount":1},{"fieldValue":"Transaction","totalCount":1},{"fieldValue":"Validation","totalCount":1},{"fieldValue":"Webhook","totalCount":1},{"fieldValue":"Webpack","totalCount":1},{"fieldValue":"bundle","totalCount":1},{"fieldValue":"husky","totalCount":1},{"fieldValue":"nullable","totalCount":1},{"fieldValue":"stylelint","totalCount":1},{"fieldValue":"기획","totalCount":1},{"fieldValue":"리액트 쿼리","totalCount":1},{"fieldValue":"문서화","totalCount":1},{"fieldValue":"배포","totalCount":1},{"fieldValue":"블로그","totalCount":1},{"fieldValue":"설정","totalCount":2},{"fieldValue":"세팅","totalCount":1},{"fieldValue":"아이디어","totalCount":1},{"fieldValue":"인수테스트","totalCount":1},{"fieldValue":"인프라","totalCount":1},{"fieldValue":"젠킨스","totalCount":3},{"fieldValue":"최적화","totalCount":1},{"fieldValue":"컨벤션","totalCount":1},{"fieldValue":"테스트","totalCount":2}],"nodes":[{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 사건의 발단  3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.  그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다. 당황하지 않고 침착하게 f12를 눌러 개발자도구를 열고 네트워크탭을 확인해보니 API가 이상하게 호출되고있었다. 평소 프론트분들을 굉장…","fields":{"slug":"/restdocs-start/"},"frontmatter":{"date":"August 11, 2023","update":"Aug 11, 2023","title":"RestDocs로 API 문서화하기","tags":["문서화","RestDocs","테스트"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. OAuth란? 현재 개발하고 있는 서비스에서 구글 캘린더에 접근을 한다고 가정을 해봅시다. 현재 접근하는 사용자의 구글 캘린더 정보를 얻고자 한다면 구글 계정으로 로그인을 해야합니다. 진짜 간단한 방법이 있습니다. 사용자로부터 구글 id와 password를 받고 저희가 대신 로그인 해서 해당 사용자의 …","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"date":"August 10, 2023","update":"Aug 10, 2023","title":"내가 이해한 OAuth2.0","tags":["OAuth2.0"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. style-lint, husky를 통한 컨벤션 자동화 하기 프로젝트는 혼자 할 수 도 있지만 팀원들과 함께 진행하는 경우도 있습니다. 피움의 경우에 팀원들과 함께 진행하고 있습니다. 개인적으로 생각했을 때 코드를 작성한다는 것은 그 자체로 하나의 문서를 만드는 것이라고 생각합니다. 그리고 그 문서의 양…","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"date":"August 07, 2023","update":"Aug 07, 2023","title":"stylelint와 husky를 통해 컨벤션 통일하기","tags":["stylelint","husky","컨벤션"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. CRA없에 webpack으로 react 세팅하기 피움 서비스 환경을 만들기로 하면서, FE의 개발 스펙은 React + TypeScript로 설정하였습니다. React는 당연 현존 최강 라이브러리이고, 여기에 JavaScript의 동적 타입을 컴파일 단계에서 잡아주는 TypeScript까지 더해서 안정…","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"date":"August 06, 2023","update":"Aug 06, 2023","title":"webpack으로만 React 설정하기 (without CRA)","tags":["React","Webpack"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 인수테스트를 작성하면서 다음과 같은 문제가 발생했다. RestAssured를 사용하고 있다. 각 테스트별로 (DB)데이터가 격리된 테스트를 수행하고 싶다. 이에 다음과 같은 시행착오를 거쳤다. 최종적으로 작성된 코드를 보고싶다면 최종코드를 확인해주세요. 시행착오 JPA를 사용하고 있는 현 시점에서…","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"date":"August 03, 2023","update":"Aug 03, 2023","title":"인수테스트 데이터 초기화하기","tags":["인수테스트","RestDocs","테스트"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '하마드'가 작성했습니다. 개요 우아한테크코스 5기 피움 서비스의 인수 테스트를 작성하던 도중, 실제 포트에 애플리케이션을 구동시켜 테스트를 하는 \n환경에서 테스트를 할 때, 테스트 메소드에서 분명히 해당 리소스를 저장했는데도 RestAssured의 GET 요청이 수행되지 않는 경우가 있었다. 이 이유를 파악하고 해결 과정을 …","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"date":"July 31, 2023","update":"Jul 31, 2023","title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)","tags":["Transaction","SpringbootTest"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. 사건의 발단 이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국  파일의 크기를 보니 무려 16m…","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"bundle-analyze를 통한 bundle 크기 분석","tags":["bundle","최적화"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 현재 피움팀 서버는  요청으로 이뤄져있다.\n는 WWW 상에서 정보를 주고 받는 프로토콜인데, 누군가 네트워크에서 신호를 가로채면 내용이 노출되는 문제가 발생할 수 있다.\n이를 해결해주는 프로토콜이 바로 이다. 는 정보를 암호화하는 SSL을 이용한 프로토콜이다. …","fields":{"slug":"/apply-https/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"내 서버에 HTTPS 설정하기","tags":["HTTPS"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 본 설명 글은 다음과 같은 환경에서 진행됩니다. 배포서버 : Ubuntu 22.04.2 LTS DB서버 : Ubuntu 22.04.2 LTS 배포서버와 DB서버는 동일한 VPC를 사용하고 있습니다. DB : MySQL 8.0.33 Application : Spr…","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"date":"July 28, 2023","update":"Jul 28, 2023","title":"Table Drop 못하게 막아버리기","tags":["DB","MySQL"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 현재 피움팀의 젠킨스에서 빌드 트리거로 을 사용하고있다.  해당 설정은 Github에서 유발되는 모든 WebHook에 대해 빌드 트리거가 동작하는 설정이다.  빌드 스크립트에서 위처럼 triggers 설정을 별도로 지정할 수 있지만 현재 프로젝트 구조상 더 세분화된 설정이 필요한 상태다.  현재 …","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"date":"July 25, 2023","update":"Jul 25, 2023","title":"PR 라벨로 젠킨스 빌드유발을 구분하기","tags":["젠킨스","CI"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 이번 피움 서비스에서 CI/CD를 적용하기 위해 Jekins와 Github Webhook을 이용했습니다. 본 글에서는 Jenkins와 Github Webhook을 이용한 SpringBoot 서버 자동 빌드, 자동 배포 과정을 다루겠습니다. Jenkins 설치 과정은 피움 팀 젠킨스 설치하기 를 참고하…","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"date":"July 24, 2023","update":"Jul 24, 2023","title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기","tags":["CI/CD","젠킨스","Webhook","설정"]}},{"excerpt":"이 글은 우아한테크코스 5기, 피움팀 크루 '참새'가 작성했습니다. 서론  피움의 프론트엔드에서는 서버 상태 관리를 위해 Tanstack Query를 사용하기로 하였다. 이 글에서는 많고 많은 상태 관리 라이브러리 중 Tanstack Query를 사용하기로 결정한 이유를 소개하고자 한다. 설치한 버전: 5.0.0-alpha.86 Tanstack query…","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"date":"July 23, 2023","update":"Jul 23, 2023","title":"프론트엔드: Tanstack Query 사용에 대하여","tags":["Tanstack Query","React Query","리액트 쿼리"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론  http://pium.life 로 접속하면 피움의 홈페이지가 나오기까지의 과정을 기록으로 남겨보려고 한다. 본 과정은 서버 구축을 처음 하면서 과정을 이해하기위해 작성된 글입니다. 빠르게 따라할 수 있는 설정 기반 글을 원한다면 마지막 목차인 정리를 확인해보시길 바랍니다. 본 과정에서는 소량의 …","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"date":"July 18, 2023","update":"Jul 18, 2023","title":"피움의 배포과정","tags":["배포","인프라"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 서론 JPA를 이용해 엔티티를 설계하다가  어노테이션과 @Column의 의 차이점이 궁금해져 알아보았습니다. nullable = false ?? JPA는 엔티티를 매핑하고 설계하면 자동으로 DDL을 생성해 주는 기능을 제공합니다. \n또한 엔티티의 각 컬럼들에 대해 NOT NULL, UNIQUE 등과 …","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"date":"July 16, 2023","update":"Jul 16, 2023","title":"@NotNull과 nullable = false는 어떤 차이가 있을까?","tags":["JPA","Validation","nullable"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다. 정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.\n이에 Jenkins를 설치하고 환경설정을 빌드서버 환경을 구축한 일련의 과정을 기록해두려고한다. 작업 환경 : Ubuntu 22.04.2 LTS 공식문서 살펴보기 젠킨스 공…","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"date":"July 16, 2023","update":"Jul 16, 2023","title":"젠킨스 설치하기","tags":["CI/CD","젠킨스","설정"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀의 기술블로그를 만들기까지의 험난한 과정을 정리해보려고 한다. 플랫폼 선정 팀 블로그를 작성하기 위해 다양한 플랫폼들을 고려해봤다. 티스토리 티스토리는 팀 블로그 기능을 통해 다양한 작성자 및 관리자를 지정할 수 있다. 하지만 UI를 직접 수정할 수 없을 뿐더러 제공되어있는 스킨들이 대부분 …","fields":{"slug":"/blog-starter/"},"frontmatter":{"date":"July 09, 2023","update":"Jul 09, 2023","title":"피움 블로그 생성과정","tags":["블로그","세팅"]}},{"excerpt":"이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 기획부터 개발까지 하나의 프로그램이 생성되는 모든 프로세스를 경험할 수 있는 시간을 가졌다. 피움팀에서 어떤 방식을 통해 아이디어와 기능을 도출해나갔는지 기록해두고자 한다. 스프린트란? 스프린트는 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간을 의미한다. 여기서는 기획부터 데모수준의 프로…","fields":{"slug":"/sprint-idea/"},"frontmatter":{"date":"July 08, 2023","update":"Jul 08, 2023","title":"구글 스프린트 기반 아이디어 도출","tags":["아이디어","기획"]}}]}},"pageContext":{}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/page-data/transactional-not-in-restassured/page-data.json b/page-data/transactional-not-in-restassured/page-data.json
index 103e3dbd..8c28926d 100644
--- a/page-data/transactional-not-in-restassured/page-data.json
+++ b/page-data/transactional-not-in-restassured/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-post-jsx","path":"/transactional-not-in-restassured/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","excerpt":"이 글은 우테코 피움팀 크루 '하마드'가 작성했습니다. 개요 우아한테크코스 5기 피움 서비스의 인수 테스트를 작성하던 도중, 실제 포트에 애플리케이션을 구동시켜 테스트를 하는 \n환경에서 테스트를 할 때, 테스트 메소드에서 분명히 해당 리소스를 저장했는데도 RestAssured의 GET 요청이 수행되지 않는 경우가 있었다. 이 이유를 파악하고 해결 과정을 …","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/rawfishthelgh\">하마드</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>개요</h2>\n<p>우아한테크코스 5기 피움 서비스의 인수 테스트를 작성하던 도중, 실제 포트에 애플리케이션을 구동시켜 테스트를 하는 <code class=\"language-text\">@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)</code>\n환경에서 테스트를 할 때, 테스트 메소드에서 분명히 해당 리소스를 저장했는데도 RestAssured의 GET 요청이 수행되지 않는 경우가 있었다. 이 이유를 파악하고 해결 과정을 정리한다</p>\n<h2>상황</h2>\n<p><figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 612px; '>\n      <a class='gatsby-resp-image-link' href='/static/3b1906144ab7bcc604f65124969f17bf/dbf98/img.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 44.11764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABP0lEQVR42pWS23KDMAxE+ZiG4gu2DAbiQJnc89L//53tGtKmfWg7eTgjIewdeaVimkpM0wbz2wZ994q69sTBuUzODbxXEFGMGs7X8BKYe9bCck6cwBPHe8VlLnGg4GV+wTwL9ucb5sMJ+9MVaZwRgkFKJcZdiaEv0Q9hqfdDwnY3IcYBqR0xtAmx6VE0uQNrEUzupIE0kSKMxLKutYFS9huaVEStUasvNCm0NYidUMDyeRVbVzBG86dmNAvWrjy+7ZrfozV2IeeFdxrHqcJ+8kjbCsNQ0guzdPYp8AyFzU+1NLrOT3QsZuyji2cF8xS73qONDqElQVBVq0c6o/Ud9cOGXwWFq3DmlN8vGrejo589p8eppZGT3KLj5MQHRIlom4a+/SO47Br9ElcjeFknzP3KLPt23y/Pc8Ldy1b8xQePMxWKeSYlywAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img.png' title='' src='/static/3b1906144ab7bcc604f65124969f17bf/dbf98/img.png' srcset='/static/3b1906144ab7bcc604f65124969f17bf/e7570/img.png 170w,\n/static/3b1906144ab7bcc604f65124969f17bf/f46e7/img.png 340w,\n/static/3b1906144ab7bcc604f65124969f17bf/dbf98/img.png 612w' sizes='(max-width: 612px) 100vw, 612px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img.png</figcaption>\n  </figure></p>\n<p>당시 다음과 같은 인수 테스트 환경에서 테스트를 수행하고 있었다. 각 테스트 메소드가 끝난 후 트랜잭션을 롤백시켜 격리를 보장하기 위해 클래스 레벨에 <code class=\"language-text\">@Transactional</code> 어노테이션을 선언했었다.</p>\n<p><figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/ca7f5b43bee99b38af5cf3a2048a5422/be814/img_1.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 81.17647058823529%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB+ElEQVR42pVU2W7bMBD071jiLVLULUpy4iRI0P//mukuZddtUNTqw0DwYjmag/IphIixqzDNLYaxgQ8edeXg65oQYayDUQpKlCjL5zi5UMNaheANtHHQ2kBJAS01lNIQpUBRFCjKo4SkwlqBGEo4Z3dF1kIrQ8psJi4PkmXCykdUVqIOBtYFCKlwPhc4kyp+/g/ZjbCGlBLeiWzbGUXqBKwh20rui2z5hqeEnkphQmdKNMGSdUPkGtFRrhSBFFQIl6J13jtUihCCljV87BC7gTAihBa+iqQ65qK0IWjOs3hCSJYFv5nscKttP1KWVA6pFLLMRFyUpGwPWb4T8jI/h3FCoOad96h8oBvgcpZH7P5RSil2NW3bIjZkl6JgOEeE8n5AHMkwUoYyq+OsQmzR9AO6dkRqVzRtj5ow9QumdqF8O1Ks/6GQCNkSF8O269hgXDZs6xs+lx9I2wvGtGJZX3FNH9i2N/QD5WxsPvMdJ7Zl6e6xbR6w3XFZsS5XfKQvpHUnnAivCxGma/7Ne0ru2f6OvRSxB84KQ91gSAuW9Ir3+RMzEU6kuJtmrDR7md4xs+p52a9R8RfL9wZ3woieDs/zBVc6PNDBKW3ox5nmCWm6YB42pHTJL2Kllr99Q38mWj1avmdQCvGrUSkeV0Xc5vkj+DYX4tH+T70P9csXQSMNAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_1.png' title='' src='/static/ca7f5b43bee99b38af5cf3a2048a5422/ca1dc/img_1.png' srcset='/static/ca7f5b43bee99b38af5cf3a2048a5422/e7570/img_1.png 170w,\n/static/ca7f5b43bee99b38af5cf3a2048a5422/f46e7/img_1.png 340w,\n/static/ca7f5b43bee99b38af5cf3a2048a5422/ca1dc/img_1.png 680w,\n/static/ca7f5b43bee99b38af5cf3a2048a5422/02d09/img_1.png 1020w,\n/static/ca7f5b43bee99b38af5cf3a2048a5422/be814/img_1.png 1199w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_1.png</figcaption>\n  </figure></p>\n<p>AcceptanceTest 클래스를 상속받아 사전 식물의 조회를 테스트하는 인수 테스트를 작성했다.\n37번째 줄의 <code class=\"language-text\">DictionaryPlant REQUEST = dictionaryPlantSupport.builder().build();</code> 는\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/7769cb4beb02f5aecd8ee8bd8c479f8d/d8785/img_2.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 114.70588235294117%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAXCAYAAAALHW+jAAAACXBIWXMAAAsTAAALEwEAmpwYAAACO0lEQVR42p1V2XLbMAzM51giCfCW6CNxmqOd6bT//zdbgJYzidvEch92SI+lJbC7oO5irng8WsGANlvEOGAcFSOMMTfjLs0TjvcFz8eMl9c92nZCSAk+BCE1GM3YyTvM9UPuYqkg5xCdAckL7EMnVOieiQUenkJfrbFfE4ZUwUyYEiN6RggRISakFJFiAAkJn+FYCK9VKBoSOVRvMOeIaW5ouwO22xm7VmGdvbFlIXREcPIiWQNnLazAWHfCraYoIQthjQpGYnE65Y6UM4hZHhxvcLloWw6BDEqgriE7Wto0b+3eVKGV1jxZBDHFsYivkL33rldIfN3ddxVOUiHBuxGHzNiJKWqMVprj4rqg67qe0HVSVmPMgGEYsBk2At1v+uSsbrlMrZMlNmglIFepsM7Y1iS5jJIA36tbq+NbhfqDpe2SCrbtgP3uoa9ZJsZJTkkO/VfbdonZ+b8PhMbY3p7O8ePzd0wS7FRk7JKXGEVZZfwCnxAXLHt9xrG7JDzFxIsJD08vyHPp1ZnlklgZm0mm5CMhe4/74xOm3dxPVsL1OSyfED4+Y/9wRBSj1kamE2YhrIn6jUM60xLyXCtef//Ct58/UA9yP+aTdl710qATfYquoVscPEMvi1gKamuoGnRZWcaSPP317CVOo+cub5URw0ZCvdlgbnKLH7YIlZFb6CP5laYnl5dr6qyVaqo6GtFzajsU+UxQkHmXG6m7fi3YSnCGmqIVa3Tsu0N6VSumpROq0JdO/u9X7w+6HMK31cY5UAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_2.png' title='' src='/static/7769cb4beb02f5aecd8ee8bd8c479f8d/ca1dc/img_2.png' srcset='/static/7769cb4beb02f5aecd8ee8bd8c479f8d/e7570/img_2.png 170w,\n/static/7769cb4beb02f5aecd8ee8bd8c479f8d/f46e7/img_2.png 340w,\n/static/7769cb4beb02f5aecd8ee8bd8c479f8d/ca1dc/img_2.png 680w,\n/static/7769cb4beb02f5aecd8ee8bd8c479f8d/02d09/img_2.png 1020w,\n/static/7769cb4beb02f5aecd8ee8bd8c479f8d/d8785/img_2.png 1021w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_2.png</figcaption>\n  </figure>\n다음과 같은 형태로 repository에 테스트용 엔티티 객체를 save하는 과정을 간편하게 하기 위해 작성된 DictionarySupport 클래스와 코드이다. 즉 37번 라인을 사용하면 임의의 객체 정보를 dB에 저장하는 insert 작업이 일어난다.</p>\n<p>즉, 현재 테스트 메소드는 repository에 사전 식물 객체를 저장하고, 이를 RestAssured를 활용하여 실제 서버에서 요청을 보내 저장된 사전 식물이 조회되는지를 확인하는 과정이다.</p>\n<p><figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/f2b0fbb841ccdb7ac66fbb5af7d00017/5205e/img_3.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 62.35294117647059%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABjklEQVR42p1T2XKCQBDkaxKVaxeWS1ZQIgSjVpL//5hJ9wrEVMWH5KGrB4bpOfHquhZrrZRlKUVRiFJKoij6gTiOHWgHQSC+7zt7/vbe51GsaRpp21byPHeOzWbjggja93j0fvZ5qTFigCzLloxhGC6Bf4UXIVhDKIaQ1tqBov8WrBHcAGSDGaSAmuYUPMLk/1VwnyTygpbJdRTLLlZSco5wPmEuz8DqDmtivV7mNtuLYJWm8ortjpjhHq13SgNKDuBe32wLrgCLpNu8kLKqhLPnzDkiVvy9FDz0cFyTVEadyDsSfKQGbBx/IvCS3jDiCjok3+HELBnCW9gU5+m4szFob4DQlZWCL2CKXpDgLZneo/pDlotFMMX2ENpBvFC4z8B3S1WwXYUGWz6i7BOCh4nPFIPQaeKBlUGkRVUW4i2ejSnkWZeyUuDISKgSSfGtl6NUtsqWWekIQYqwpZwC+JOOfS9d17mZcQnhvOkgXBA4oOXMtaydKFseJ1HijGoGtDiiuiNmyAsopgt4dDZfOs56o8n5OYsAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_3.png' title='' src='/static/f2b0fbb841ccdb7ac66fbb5af7d00017/ca1dc/img_3.png' srcset='/static/f2b0fbb841ccdb7ac66fbb5af7d00017/e7570/img_3.png 170w,\n/static/f2b0fbb841ccdb7ac66fbb5af7d00017/f46e7/img_3.png 340w,\n/static/f2b0fbb841ccdb7ac66fbb5af7d00017/ca1dc/img_3.png 680w,\n/static/f2b0fbb841ccdb7ac66fbb5af7d00017/02d09/img_3.png 1020w,\n/static/f2b0fbb841ccdb7ac66fbb5af7d00017/5205e/img_3.png 1222w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_3.png</figcaption>\n  </figure></p>\n<p>그런데, 200 OK를 기대했던 테스트의 결과가 404 not found가 응답되고 사전 식물이 존재하지 않는다는 예외 메세지가 뜨는 것을 확인하게 되었다.</p>\n<p>뭘까? insert 쿼리가 날아가지 않은 걸까? 로그를 확인해 보았다.\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/53bd1215f3b30f53aa9578bb03b24e6d/cd35d/img_4.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 27.058823529411764%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAs0lEQVR42m2PaxKDIAyEvU5FQ6C+EXS8/522LpbW6fTHNyQ7ybKpvPfo+x6qCuccrLUQkQzr31710vTGpWueqeZ5RggB67piGIbMNE1YliUP8EPW1MYT9U/IuWwaudHCGJOpUkrYtg3HcWAcx7y873vu+SvTs97PmRATanGoW4eHFDxMK1/DGCNoShMaMnHpeUrXdbmmxivUCpqGy/VF/X6LIdOVhOXUfwk5Q307UXUfg19eAqWgtd77uY4AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_4.png' title='' src='/static/53bd1215f3b30f53aa9578bb03b24e6d/ca1dc/img_4.png' srcset='/static/53bd1215f3b30f53aa9578bb03b24e6d/e7570/img_4.png 170w,\n/static/53bd1215f3b30f53aa9578bb03b24e6d/f46e7/img_4.png 340w,\n/static/53bd1215f3b30f53aa9578bb03b24e6d/ca1dc/img_4.png 680w,\n/static/53bd1215f3b30f53aa9578bb03b24e6d/02d09/img_4.png 1020w,\n/static/53bd1215f3b30f53aa9578bb03b24e6d/9d567/img_4.png 1360w,\n/static/53bd1215f3b30f53aa9578bb03b24e6d/cd35d/img_4.png 2035w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_4.png</figcaption>\n  </figure>\n그러나, 로그에는 정확히 우리가 DictionarySupport에서 지정한 저장 메소드의 Insert 쿼리가 날아가는 것을 보고 있었다. 심지어 value 값도 모두 정확히 들어갔다.\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 342px; '>\n      <a class='gatsby-resp-image-link' href='/static/294f14641caf877174683d3cedcc9f93/28260/img_5.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 161.76470588235296%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAYAAAASYli2AAAACXBIWXMAAAsTAAALEwEAmpwYAAACQklEQVR42p2WWZaCMBBF3YwjCs7zPKHufz/V3LSPk0agwY8cSEFuXg0paIzHY4vvd7vdbnY8Hu1yudhoNLJer2dBENQejSiKLAxDm06nDna9Xm0+n1un0/kK2ggTYLfbdVBAm83GttutoXw2m1m/368FdkBNWq2WTSYT5zrQ8/ns5oPBIB2VgCiQElTt93tbrVZuKAyHw8Gp/09tCgwSIK4TSxYDU5K4B/Z4PFwoyqB/FAJEIa7iMmDud7udU8mIJKAqUApRhDqAhCCO45ouJ5M8l5/Pp63XawerUp+5QBQBOZ1OruC1geJZOyk+EJdJBjHFbeBfJ0VAVGFXKVWuQwFRgUJcvCfnnILmmcZXSSEJXKVSz79OCkCyLChz7Mw59zSPWkBiBQgoAxtKCQOFXnRiCpNCDHVCtAF2NsG+WCzqJUUKSQoK2YDyAdput9M1lVwWQAnhhPCM9iYY87w4FhZ2notspLpU88iqLG1fLCaGSgRwQMvl0nV3NiHjfnJygSzEZRSpuQIE5n9r8uryIynsDIi6IyEAUaISAo7t9Xq5d7InpzApvAxEan2VKnDshQqzSfEbLDEDIAg21BPnUoX+R0oLUYvL2GRnI/okm5fGkBrjSMllKVT3ltvY9In9UBi9P/TD4dA1UBZSwNjYgKEiVoaxFf1ZfLisOkQJV9zEZf+exFANeb0xBVKgvEyMGIBxFRtxJTHcExJghd1GLnNe1VnUoVngn1vZyhrt77/N+2Gz2Uz/wvzWxTOSltddsuMHtxr30NPOq8oAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_5.png' title='' src='/static/294f14641caf877174683d3cedcc9f93/28260/img_5.png' srcset='/static/294f14641caf877174683d3cedcc9f93/e7570/img_5.png 170w,\n/static/294f14641caf877174683d3cedcc9f93/f46e7/img_5.png 340w,\n/static/294f14641caf877174683d3cedcc9f93/28260/img_5.png 342w' sizes='(max-width: 342px) 100vw, 342px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_5.png</figcaption>\n  </figure>\nselect 쿼리가 잘못된게 아닌가? 확인해봤지만 예상한대로 나갔다.\n여기까지 봐서는 이해가 안 간다. insert를 하고 select를 했는데 조회가 안 되니 말이다.</p>\n<h2>RandomPort 환경에서의 스레드와 트랜잭션</h2>\n<p>이를 이해하기 위해서는 RandomPort 환경에서의 요청이 어떤 스레드를 갖는지를 알아야 한다. 이 내용은 스프링 공식 문서를 들여다볼 필요가 있다.</p>\n<blockquote>\n<p>If your test is @Transactional, it rolls back the transaction at the end of each test method by default. However, as using this arrangement with either RANDOM<em>PORT or DEFINED</em>PORT implicitly provides a real servlet environment, the HTTP client and server run in separate threads and, thus, in separate transactions. Any transaction initiated on the server does not roll back in this case.</p>\n</blockquote>\n<blockquote>\n<p>테스트에 @Transactional이 붙어 있으면 롤백을 보장할 수 있다. 단, RANDOM<em>PORT 나 DEFINED</em>PORT 환경에서 테스트를 수행하면, 실제 서블릿 환경에서 테스트를 진행한다. 이 때 http 클라이언트(테스트)와 서버는 서로 다른 스레드를 갖는다. 즉 별개의 트랜잭션이 수행되는 것이다. 따라서 서버 쪽에서의 트랜잭션은 롤백되지 않는다.</p>\n</blockquote>\n<p>쉽게 설명하자면, 랜덤 포트 환경에서 테스트를 수행하는 순간, localhost 포트 어딘가에 내장 서버를 띄운다. 그리고 그 서버에서 요청을 보내도록 하는 것이 RestAssured 이다. 따라서 RestAssured에서 보내는 요청은, 내가 해당 테스트 메소드에서 실행하는 스레드와 별개의 스레드를 갖는다. 따라서 트랜잭션도 각자 별개로 갖는다.</p>\n<p>자, 아까 우리가 AcceptanceTest의 클래스 레벨에서 <code class=\"language-text\">@Transactional</code>을 선언했음을 기억할 것이다. 클래스 레벨에 이 어노테이션을 선언하면, 자동적으로 해당 클래스와 그를 상속한 메소드 레벨에 모두 트랜잭션이 걸린다.\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/d6076111fb8289c4122ae2aa222c682b/95234/img_6.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 63.52941176470588%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAACCElEQVR42o1Sy3KcMBDcD/HBr6rdBYQQC0KABAj2ETu2kzjH5JBUKofccs7Pd1qsfVvX+jBISKOe7p5ZmDJCXUg0pYTOBeoyRcV/IQTiOEaSJFgx9HqN71dXWHKf8Dx+IxZK5TC1QVVp6BBFQUCNYqORqwJ5vkG6KTAw+e/FxXlAKSUKXcG0DlXdQpsGWZYjJ0iapkyKEBFEMvnh9vY8YEQpMlMwjUWSJhBScKVUEUORXQBOCKyY9/Xm5h2A0RqZUvDjFnVrUVYGWpt5zWQKmYqZoYoiPL8HMJiuyLDSJQr6pzYbZHnOlfvAmAWXDLle4cv1NZahUec8VASoG4fGOa4t+sqjNmRr6tlX13j4yuFb8DTLEJPtm4Dhs6Y/hkBumDCMezyNz9hN9+inHXpaMY53+DQ84HfVwnTDrCQoOw3Ii4gVNT0LHra2x95+QGc9O2/nZrXO49BM+JGXKFk4o6rkZU5PMDwC1hybzk/w0x6P/jO2ZDXu79CRtSPTx+EefwqL7nDPnB0UGxmUBZDwPnqxYfF6ELyylNP1Iz4OTxiHPQtsacOIhudTP+Fn4WD9DqPfo7HdcVbJNoTgNAiRYCFEOv9oY2Z5DZlO7Q627fnIUW6HgsUOtORflFKJh+OddQPvepRaz/MaGEs2bCHTUOGIHow+FRH9qinv1+UlVtwnSXwiL5wJ/AedCZ3HwfdnegAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_6.png' title='' src='/static/d6076111fb8289c4122ae2aa222c682b/ca1dc/img_6.png' srcset='/static/d6076111fb8289c4122ae2aa222c682b/e7570/img_6.png 170w,\n/static/d6076111fb8289c4122ae2aa222c682b/f46e7/img_6.png 340w,\n/static/d6076111fb8289c4122ae2aa222c682b/ca1dc/img_6.png 680w,\n/static/d6076111fb8289c4122ae2aa222c682b/02d09/img_6.png 1020w,\n/static/d6076111fb8289c4122ae2aa222c682b/95234/img_6.png 1079w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_6.png</figcaption>\n  </figure>\n따라서, 현재 테스트 메소드의 트랜잭션 범위는 다음 화살표와 같이 테스트가 끝날 때 까지 유지된다.</p>\n<p>우리는 여기서 트랜잭션의 개념에 대해 다시 짚을 필요가 있다.\n\"트랜잭션이 끝나지 않았다\"는 의미는 무엇인가?\n내가 수행한 insert, update, delete 문이 커밋, 혹은 롤백되지 않았다는 뜻이다.</p>\n<p>커밋되지 않았다는 뜻은 무엇인가?\n데이터베이스의 갱신이 이뤄졌어도, 다른 스레드에서 확인할 수 없다는 뜻이다.\n왜? 트랜잭션은 각자 격리되어 서로의 트랜잭션이 끝나기 전 까지는 연산 과정을 볼 수 없기 때문이다.(트랜잭션의 Isolation(격리성) 특징을 기억하자)</p>\n<p>따라서, 현재 트랜잭션이 끝나기도 전에, 즉 반영되기도 전에 RestAssured를 통해 띄운 별개의 서버 스레드에서 GET 요청이 들어가니 해당 데이터를 확인할 수 없는 것이다.\n정확히 말하면 트랜잭션이 커밋되지 않았을 때 까지의 데이터는, 다른 스레드 입장에서 그냥 없는 데이터다. 없는걸 조회하니 당연히 값이 안 나온다.</p>\n<p><figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/ceb0b6e59d5718b93c731d3ca7bb2780/6b882/img_7.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 48.23529411764706%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABRklEQVR42qWS7U7CMBSGdzms+4xrYV27dRvocHyJQYKoP9QQvf8beD10RDRBEvXHk+esSU/fs9ZpV/cY325wdbPG5eIOzZI8X0GPWqjhGGY8p3pCdQtZXyMtm7M4evaI6fYNk80O5ewB5XQL2axRzJ6QFiPEoYcoDOF7DAHhey585h79FVpzouYZavGKcrmDnncW7Qvk4h08bzAQCbjUYIlEL+KEQC8ekPud471TCwtjSpgrqFwj00drcm5yJDxBJiV0UeCCC3h+YGGfDm3dOaQ1H44yFVRZf8fU0NUIiehDKYXSGGufNnied5au4Ql0NbSppExR1zU45wgCSsOY5fcNy6FNyJOEmkrbLKTLiaLI+s8JhRAwh5EL+pf773805PbJZFkGrTWqqkIcx3DdHm1mJ3Fkbn4YuYYYpN2o+zEPBHTAOT4Av3tJV9XHv5kAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_7.png' title='' src='/static/ceb0b6e59d5718b93c731d3ca7bb2780/ca1dc/img_7.png' srcset='/static/ceb0b6e59d5718b93c731d3ca7bb2780/e7570/img_7.png 170w,\n/static/ceb0b6e59d5718b93c731d3ca7bb2780/f46e7/img_7.png 340w,\n/static/ceb0b6e59d5718b93c731d3ca7bb2780/ca1dc/img_7.png 680w,\n/static/ceb0b6e59d5718b93c731d3ca7bb2780/02d09/img_7.png 1020w,\n/static/ceb0b6e59d5718b93c731d3ca7bb2780/6b882/img_7.png 1270w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_7.png</figcaption>\n  </figure>\n그래서 <code class=\"language-text\">@Transactional</code> 어노테이션을 제거하고 테스트를 수행했더니, 다음과 같이 통과하는 것을 볼 수 있다.\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/539d3abcceb71f6a558289e0848ac19d/adc5a/img_8.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 65.88235294117646%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB5ElEQVR42o2TWXLbMBBEdZpEXACCBMANJMBdtuQ4qdz/Lp0ZWJU4VbGcj+EGqPF6enRyvUBrFVpToFI56krAVhJCCqRp+lclWRYre1CnUgk0tUFjK9TWkJhCU2kS1yiLCpU2UFSdlJi+fkF/PkPyAR8JCllA2wZtN6DpHOq2R1kaaG2hVPm2Mc9R0r1KEogsRf6IkC9FoTD4CZUhMqtRlAWkohYYGwkl0TFR+ondKMi9YYLejTDWolAqkqmyjEJSCOS0nv2HWBTkzbIo0PYD2SbLTUfCNWzbUQ8FZJbgTFaTNEGapJ8LMkVJIdRNG8U02Wx1D6vraFcTdWt7NKajdx1po6tHPTxTciw2rQfm7cDr+hNP2yum/RK/7dsN1+U71u0Zzgc61HzYhlN2P5HJOupjN3gc4zOmcaPnEa0bMIwTVnfA+xVd7yhE+UCQh5V6xIRh3hCWHS/zD+zzFfP+hHFa4JcNl+WGy3SL1IHeSwotIWf5v0JJSZCDcETiaHyu4RvWcGCcF4xhRj8GhLDh8Ff4sCJMWwxQ0UTwFAieBJFH6lP+zjInzbZXt8M7FvJ0SIg/bum7cx5jP2GkNT6Y14ypibaiMVNxzE78n2VUFv5d2Z9ncZ/DtyIaquzd3miVU78n/wtNaJuLDpSLtQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_8.png' title='' src='/static/539d3abcceb71f6a558289e0848ac19d/ca1dc/img_8.png' srcset='/static/539d3abcceb71f6a558289e0848ac19d/e7570/img_8.png 170w,\n/static/539d3abcceb71f6a558289e0848ac19d/f46e7/img_8.png 340w,\n/static/539d3abcceb71f6a558289e0848ac19d/ca1dc/img_8.png 680w,\n/static/539d3abcceb71f6a558289e0848ac19d/02d09/img_8.png 1020w,\n/static/539d3abcceb71f6a558289e0848ac19d/adc5a/img_8.png 1068w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_8.png</figcaption>\n  </figure>\n이해를 쉽게 하기 위해 바뀐 트랜잭션의 범위를 화살표로 표현하면, DictionaryPlant를 저장하는 과정에서 트랜잭션이 끝나고 커밋이 되어 db에 영속화가 완료된다.\n따라서 이후 랜덤 포트의 스레드에서도 해당 데이터를 조회할 수 있다.</p>\n<h2>트랜잭션의 격리 이해하기</h2>\n<p><figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/4f297df537bbdf2952dc4a88a14279c2/bb51b/img_9.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 31.176470588235293%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABKUlEQVR42pWQ2W6CYBCFef+3atKkjbF1A5X152dREGRxAeHCr6NJm3jZk0xmO3NmMsa16+me1lEXJaHr4fkKO1L4WhNFCUEoPk5ROkaFEV6knz0l9UBJL0kJo5gk3WEUh4yyyCiqI73EVx1walusc8iuzmjrmizfczo35OLPdYWqRLiIORYHDjJzubacu5ZaekYZWxyzJSvPY2FO0OGM/c7G207Yrj/w3LnULJbuO475Rq6XxNEKz5kSKotYb3DsCYG/INuHGHUp5/sBruuSZXvZmMvGC/Z2JsRvzNUnrjNns5lK7UvEHcryyO3WMQyD2I2+7yTvGcdBLiwSIZtY1pqmaUSwoKoqIfU8cL/fn/aL15gXPHJDp7k8VpGmqfwof4qN4/gn+F/8AJlXwUVIVOQyAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_9.png' title='' src='/static/4f297df537bbdf2952dc4a88a14279c2/ca1dc/img_9.png' srcset='/static/4f297df537bbdf2952dc4a88a14279c2/e7570/img_9.png 170w,\n/static/4f297df537bbdf2952dc4a88a14279c2/f46e7/img_9.png 340w,\n/static/4f297df537bbdf2952dc4a88a14279c2/ca1dc/img_9.png 680w,\n/static/4f297df537bbdf2952dc4a88a14279c2/02d09/img_9.png 1020w,\n/static/4f297df537bbdf2952dc4a88a14279c2/bb51b/img_9.png 1320w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_9.png</figcaption>\n  </figure>\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/3ceedd46236c90d9fb1d34efce28e1ad/bb51b/img_10.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 31.176470588235293%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABK0lEQVR42pWQWW/CMBCE8///VaVKrRAtZziSkIOQ2M5JCCSQB74uSK3EY0ca7eHZWdvWpevphJeu41TVJOGecH/AVwf2aYrShjh5xEyiIkk1sdZESfLsH1L1PFMm49i0WHmmKXJNXpX0kl8in1PTYLchaa1p6hptFKf2SGZS2roiqGKCPKbMMzKZOV9OtF1DXZdYRWxT6jkLz2O2HBGFE1S6xduM2Kw+8Nyp9Gzm7jvO8g0TzYn3CzxnTBjYxNEaZzvC383QKsSqi4jdzsd1XbRWstHIxjPbzUSE3ywXn7jOlPV6LL0vMXcoipLrteN2uwmv9H0ndc8w3OSG+UHES2x7xfEoz8pyqqoSUc8D9/v9yV+85rzgUVtRYvCDgEQ+2RjzNBuG4c/wv/gBd/7CXiOatnUAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_10.png' title='' src='/static/3ceedd46236c90d9fb1d34efce28e1ad/ca1dc/img_10.png' srcset='/static/3ceedd46236c90d9fb1d34efce28e1ad/e7570/img_10.png 170w,\n/static/3ceedd46236c90d9fb1d34efce28e1ad/f46e7/img_10.png 340w,\n/static/3ceedd46236c90d9fb1d34efce28e1ad/ca1dc/img_10.png 680w,\n/static/3ceedd46236c90d9fb1d34efce28e1ad/02d09/img_10.png 1020w,\n/static/3ceedd46236c90d9fb1d34efce28e1ad/bb51b/img_10.png 1320w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_10.png</figcaption>\n  </figure>\n해당 동작에 대해 조금 더 설명하기 위해 별개의 스레드에 h2 database 콘솔을 띄워 확인해 보겠다. 위의 두 콘솔 화면은 세션 id가 다른 별개의 스레드를 갖는다. 편의상 위를 스레드A, 아래를 B라 하겠다</p>\n<p><figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/dd9a54c5ddfb5b0d712987298da827f7/bb51b/img_11.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 61.1764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB2UlEQVR42p2S627aQBBG/f5PVLWVWlVVGlLCJQHHXGyv1/cLYEJsAwmcjEFp/iRN1ZGOvLMz++23Ixt1XVPXDZWwXq4IPY3nhziRjw5DojjBDyPiJCWIYsIwRsdCFBHI/qmWZoTSl2Y5RpEl5FlMvizY5gmVdtis15gbj7hMWa+WIhax2ZRkacxGcrX08RYhq0VBUWQ0zQPV7p6yXIlgYFKmI0aOw615TaBviKMp9qTLdHKFp0x832I4/8ls9INUj/D1mKl1hW2PpH7HxOpgzwckscIoFx5KebjKJREneZZSVQ8M+xcMfn+nc/GF8W0Hy7oWkS5aTSkWC3a7hv1+d6JparbbRva2GFmiGA569PsDsV8QyWwWciCS+SVaEyhFnufsdzs5tKVpac7fU940HI9HXsJQYYbjuARBQCzDbsUeHx/FsUJ5HnPbFncWrutKn8NsNjsxmUxOmKYpLvevggdRb284HA48PT39WddVLeW2djjtnV28OjnHOX+ptxi8Ea1w+5T/iTcFW4dp7LEsNHmqZe0Qh478QsmHGG/fc6TX7fH50yXdziXfvv7ipnfJ/XIu2H/lXUHtjplbPZLQkkaPaq15KL0PMd6bhecMKZI7mo0WMSXN/8Yzt32JpfyIHOcAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_11.png' title='' src='/static/dd9a54c5ddfb5b0d712987298da827f7/ca1dc/img_11.png' srcset='/static/dd9a54c5ddfb5b0d712987298da827f7/e7570/img_11.png 170w,\n/static/dd9a54c5ddfb5b0d712987298da827f7/f46e7/img_11.png 340w,\n/static/dd9a54c5ddfb5b0d712987298da827f7/ca1dc/img_11.png 680w,\n/static/dd9a54c5ddfb5b0d712987298da827f7/02d09/img_11.png 1020w,\n/static/dd9a54c5ddfb5b0d712987298da827f7/bb51b/img_11.png 1320w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_11.png</figcaption>\n  </figure>\n스레드 A에서 트랜잭션을 시작하기위해 Autocommit을 False로 변경한 후, 두 명의 member 데이터를 insert 했다.\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/84f758604ced9d204da78e6b1297ec26/bb51b/img_12.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 61.1764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABsElEQVR42p2S627aQBBG/f6vFCmq0qa0KmBIXRIgvt/XVwzYgDAnQ4r6i1ApIx1pdnb1zbe7o7VtS9t2bIVVWRG6Hq4fYkU+XhgSxQl+GBEnKUEUE4YxXixEEYHU3/dSRSjnUpWh5SohUzFZmbPLEraexXq1YrZ2ieuUVVWKWMSqqVBpzFrWTunjFiFVkZPniq7bsN031HUlgsGMOjUwLIvfsxGB90QcLTAXQ5YvP3GdmbhaYNgDln8eUJ5B4Bss57+wTEP2n5nLOfN1QhI7aHXh4jgutmOTiBOlUrbbDfr4kYn+jcH3O0ajB8ajr8yfhzj2C1mWiauW3W4ndJe8Y7/foanEYToZo+sTsZ8TydsURUGapjRNIw2U5IqqqjjH6XR656PQnFBhWTZBEBDLY5dlyeFwkK4dnwmtv3Ts+57j8fg3P/Zy7e3ZjtSPF/p/7m6hXetyFv60w2vFs5vzj+XKJUtdksgiDi0ZoeS/aNf7nJjqU77cy2eNhtzfDXjSf9CUr4J5k+uCpx7ft1ksTFYy5Jbtsm4yNrUjuDf50KG5nIrLR7m2zGckzirvInibN7s0jkTeQnWyAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_12.png' title='' src='/static/84f758604ced9d204da78e6b1297ec26/ca1dc/img_12.png' srcset='/static/84f758604ced9d204da78e6b1297ec26/e7570/img_12.png 170w,\n/static/84f758604ced9d204da78e6b1297ec26/f46e7/img_12.png 340w,\n/static/84f758604ced9d204da78e6b1297ec26/ca1dc/img_12.png 680w,\n/static/84f758604ced9d204da78e6b1297ec26/02d09/img_12.png 1020w,\n/static/84f758604ced9d204da78e6b1297ec26/bb51b/img_12.png 1320w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_12.png</figcaption>\n  </figure>\n이 때 A에서 select 문을 실행하면 데이터가 들어가 있는 것을 확인할 수 있다.\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/a14fa4ce271f012ac9459d49853e0136/bb51b/img_13.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 61.1764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABrUlEQVR42p2SaW/aUBBF/f9/UdVWqpQuJCoYkrpsCd6w/bzhDbwEYU6GFvUTJFVGOvJ43ujea+tpTdPQNC21UGY5vuPirH3MYI3r+wQqZO0HqDCSp48fhHhhiC29J3MvUARypqKYstyipXFIEiuSLKVLQmrXZFuWTLcOqogo80zEAsoqJ5a9rbzbmYeTBeSblDSNadoddVdRFJkIelOKyMAwTX5NR3juAypYsloOeZzf4dhTfH+JYQ14NG6IXYP12uBx8RNzZcj5jIXsrZ4mhMpGKzYOtu1g2RahJInjiLreMda/Mxl/Y/DjE6PRDfroK4vZENuakyQJbdvQdZ3QnvuW5+cOLQ5t7ic64/FE4qcEQcBmsyGKIqqqEoNY+pg8zznV8Xj8w7XSbD/GNC08z0MpRZZl7Pd7cW15T2n92bHvew6Hw9/+0Mtn16c4Mj+c6f+lew3tkstJ+N0JLw1PaSLlkKUuSeRKb6J8U65Q+CbaZZ8j+lDn44cBw7tbvnwe8KDfUmVPwupVrgq61m+Wck2UN5dFh7p02RXOm2jX/oVj3pOGM9qtK2K2LP8fLwCCjo9W5E5IAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_13.png' title='' src='/static/a14fa4ce271f012ac9459d49853e0136/ca1dc/img_13.png' srcset='/static/a14fa4ce271f012ac9459d49853e0136/e7570/img_13.png 170w,\n/static/a14fa4ce271f012ac9459d49853e0136/f46e7/img_13.png 340w,\n/static/a14fa4ce271f012ac9459d49853e0136/ca1dc/img_13.png 680w,\n/static/a14fa4ce271f012ac9459d49853e0136/02d09/img_13.png 1020w,\n/static/a14fa4ce271f012ac9459d49853e0136/bb51b/img_13.png 1320w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_13.png</figcaption>\n  </figure>\n그러나, B에서 동일한 select문을 실행하면 데이터를 확인할 수 없다.\n왜냐? 스레드 A의 트랜잭션은 끝나지 않았기 때문에 A에서 보이는 데이터는 \"임시 반영\"된 데이터일 뿐, \"영속화\"되지 않았기 때문이다.\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/cad5de9cbe3d1b7864510b0f468b3b0e/bb51b/img_14.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 61.1764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABiUlEQVR42p2S2W7bMBBF9f9/1NcCblC4iTfVW2LtFClqsWRHkm3YOqWE5M0B3AxwwCE5y+WAVtM0NE1LbaiKPcIP8EOBE4cEQhBLRShipEqIYokQkkAa4pjInA93iUaYuESnWJlWpFqSFhmnVFEHDseqYnn0kZXmUO5RKuZwLNGJ5Lgv8IoQPxfs84ws07TtO/X5QGlirSxaUiY2tuOwWD4TBXNkvGW3fWa7/o27swmDFfO3Ea9/f6IDmyi0ed2Mccyd763YmLjd2xQlPawy9/E8H9dzByVaJ9R1zXQyYjF/YjH7ZRJeWC3HbFZ/8Nw1aZoaVQ2n08nQfvgt5/MJSyuP2fSFyWRq5GfEZjZ5ng9J/Wy7DkM3rL31S/e5uWOWJzSO4xJFEdIMuygKLpeL6dryHbNuQ/eO2+3G9Xr98K/Ds+FT3eNY97r0hb+t8N5hr1arkCIT5tskVHv1MNZXnezZiPHTDzK1Nn/P4VDsHuJuwX4WSmyGYnXl814+zpdPPpYhzaEP8v6LfxfakdB3SsWxAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_14.png' title='' src='/static/cad5de9cbe3d1b7864510b0f468b3b0e/ca1dc/img_14.png' srcset='/static/cad5de9cbe3d1b7864510b0f468b3b0e/e7570/img_14.png 170w,\n/static/cad5de9cbe3d1b7864510b0f468b3b0e/f46e7/img_14.png 340w,\n/static/cad5de9cbe3d1b7864510b0f468b3b0e/ca1dc/img_14.png 680w,\n/static/cad5de9cbe3d1b7864510b0f468b3b0e/02d09/img_14.png 1020w,\n/static/cad5de9cbe3d1b7864510b0f468b3b0e/bb51b/img_14.png 1320w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_14.png</figcaption>\n  </figure>\n만약 위와 같이 스레드 A에서 커밋을 하고 나면\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/8a07b84cb0cb833d12cc4a29bef34245/bb51b/img_15.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 69.41176470588235%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB5UlEQVR42p2T3VLbMBCF/f6v1JvOlIEWSBpKgBAnshNbsuw4/sN24jjkQzK9hLSDZs7srqxzdi3tOvt9R9cdaNo9eZYTrAO8VYCQAYGUqEgbq1A6HuJQRYRmzw9D1qEcvtk9qTTlS42zSWI2m4S8zOiNrX1BVZRM6xWqiCmyDKUkVVmi4/fYyyR+psi3W5JNbIqpabqaPM9w0nBGkTwyFSsen0ao9T2RmuOJCUt3TBi4RJFgFtziza7I5DNh+Mh8do1YTFn5M9znG+PfGZ6Ps9ULxNLl2Z2zXvuGHFJVOXe/L7ib/ODXz2+DPxp/5+nhEm85JdaKpi5o2xd2trq6pG0q9vsWJ9Ee4/Et49GINE2R5k6s9TxBHJu78j2EEKaq0Ai0tLsd3eHA8fhKfzwaexx8a/v+iLOSsSH5aK1JkoSiKDgYgiV/ZTn7Q8+h69iZzBZ93w/ZmqYZDpxOr39xssE7+BzOR1ms4Jcr/Exwk4SUhSbbRqY/FVkaUeWpaanzcD7Oc+Lhz5ibq2umk2suLy64n1zykgsD7yw+EXzFnS8ZjexL56YLXNJE05QedeGfxYeC9hGC1ROL+cRMhmQTm+ylNIQvCtolzJQE3oRyuxwO2t/5l9iZCk9oaUYyXdBW6/8Ws3gDYHcmGVjfnroAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_15.png' title='' src='/static/8a07b84cb0cb833d12cc4a29bef34245/ca1dc/img_15.png' srcset='/static/8a07b84cb0cb833d12cc4a29bef34245/e7570/img_15.png 170w,\n/static/8a07b84cb0cb833d12cc4a29bef34245/f46e7/img_15.png 340w,\n/static/8a07b84cb0cb833d12cc4a29bef34245/ca1dc/img_15.png 680w,\n/static/8a07b84cb0cb833d12cc4a29bef34245/02d09/img_15.png 1020w,\n/static/8a07b84cb0cb833d12cc4a29bef34245/bb51b/img_15.png 1320w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_15.png</figcaption>\n  </figure>\n이제는 스레드 B에서도 동일한 데이터를 확인할 수 있다.</p>\n<h2>결론</h2>\n<p>결국 메소드 레벨에 <code class=\"language-text\">@Transactional</code> 어노테이션이 붙은 탓에 save 메소드를 성공적으로 수행해도, 트랜잭션이 끝나지 않아(정확히 말하면 커밋되지 않아) 랜덤 포트 서버의 스레드에서 확인할 수 없는 것이다.\n따라서 랜덤 포트 환경의 격리성을 보장하고자 할 때는 <code class=\"language-text\">@Transactional</code> 어노테이션을 사용하기 보다는, truncate를 하는 sql 스크립트를 사용하는 방법을 고려하는게 더 적절하다고 생각한다.</p>","frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)","date":"July 31, 2023","update":"July 31, 2023","tags":["Transaction","SpringbootTest"],"series":null},"fields":{"slug":"/transactional-not-in-restassured/","readingTime":{"minutes":9.67}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}},"next":{"fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},"pageContext":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","series":null,"previousPostId":"707f8ffb-1409-5c27-b15a-5661b235c226","nextPostId":"80aa708e-ef8a-5c79-9644-cb8c04d55a63"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
+{"componentChunkName":"component---src-templates-post-jsx","path":"/transactional-not-in-restassured/","result":{"data":{"site":{"siteMetadata":{"title":"pium.log"}},"markdownRemark":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","excerpt":"이 글은 우테코 피움팀 크루 '하마드'가 작성했습니다. 개요 우아한테크코스 5기 피움 서비스의 인수 테스트를 작성하던 도중, 실제 포트에 애플리케이션을 구동시켜 테스트를 하는 \n환경에서 테스트를 할 때, 테스트 메소드에서 분명히 해당 리소스를 저장했는데도 RestAssured의 GET 요청이 수행되지 않는 경우가 있었다. 이 이유를 파악하고 해결 과정을 …","html":"<blockquote>\n<p>이 글은 우테코 피움팀 크루 '<a href=\"https://github.com/rawfishthelgh\">하마드</a>'가 작성했습니다.</p>\n</blockquote>\n<h2>개요</h2>\n<p>우아한테크코스 5기 피움 서비스의 인수 테스트를 작성하던 도중, 실제 포트에 애플리케이션을 구동시켜 테스트를 하는 <code class=\"language-text\">@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)</code>\n환경에서 테스트를 할 때, 테스트 메소드에서 분명히 해당 리소스를 저장했는데도 RestAssured의 GET 요청이 수행되지 않는 경우가 있었다. 이 이유를 파악하고 해결 과정을 정리한다</p>\n<h2>상황</h2>\n<p><figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 612px; '>\n      <a class='gatsby-resp-image-link' href='/static/3b1906144ab7bcc604f65124969f17bf/dbf98/img.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 44.11764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABP0lEQVR42pWS23KDMAxE+ZiG4gu2DAbiQJnc89L//53tGtKmfWg7eTgjIewdeaVimkpM0wbz2wZ994q69sTBuUzODbxXEFGMGs7X8BKYe9bCck6cwBPHe8VlLnGg4GV+wTwL9ucb5sMJ+9MVaZwRgkFKJcZdiaEv0Q9hqfdDwnY3IcYBqR0xtAmx6VE0uQNrEUzupIE0kSKMxLKutYFS9huaVEStUasvNCm0NYidUMDyeRVbVzBG86dmNAvWrjy+7ZrfozV2IeeFdxrHqcJ+8kjbCsNQ0guzdPYp8AyFzU+1NLrOT3QsZuyji2cF8xS73qONDqElQVBVq0c6o/Ud9cOGXwWFq3DmlN8vGrejo589p8eppZGT3KLj5MQHRIlom4a+/SO47Br9ElcjeFknzP3KLPt23y/Pc8Ldy1b8xQePMxWKeSYlywAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img.png' title='' src='/static/3b1906144ab7bcc604f65124969f17bf/dbf98/img.png' srcset='/static/3b1906144ab7bcc604f65124969f17bf/e7570/img.png 170w,\n/static/3b1906144ab7bcc604f65124969f17bf/f46e7/img.png 340w,\n/static/3b1906144ab7bcc604f65124969f17bf/dbf98/img.png 612w' sizes='(max-width: 612px) 100vw, 612px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img.png</figcaption>\n  </figure></p>\n<p>당시 다음과 같은 인수 테스트 환경에서 테스트를 수행하고 있었다. 각 테스트 메소드가 끝난 후 트랜잭션을 롤백시켜 격리를 보장하기 위해 클래스 레벨에 <code class=\"language-text\">@Transactional</code> 어노테이션을 선언했었다.</p>\n<p><figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/ca7f5b43bee99b38af5cf3a2048a5422/be814/img_1.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 81.17647058823529%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB+ElEQVR42pVU2W7bMBD071jiLVLULUpy4iRI0P//mukuZddtUNTqw0DwYjmag/IphIixqzDNLYaxgQ8edeXg65oQYayDUQpKlCjL5zi5UMNaheANtHHQ2kBJAS01lNIQpUBRFCjKo4SkwlqBGEo4Z3dF1kIrQ8psJi4PkmXCykdUVqIOBtYFCKlwPhc4kyp+/g/ZjbCGlBLeiWzbGUXqBKwh20rui2z5hqeEnkphQmdKNMGSdUPkGtFRrhSBFFQIl6J13jtUihCCljV87BC7gTAihBa+iqQ65qK0IWjOs3hCSJYFv5nscKttP1KWVA6pFLLMRFyUpGwPWb4T8jI/h3FCoOad96h8oBvgcpZH7P5RSil2NW3bIjZkl6JgOEeE8n5AHMkwUoYyq+OsQmzR9AO6dkRqVzRtj5ow9QumdqF8O1Ks/6GQCNkSF8O269hgXDZs6xs+lx9I2wvGtGJZX3FNH9i2N/QD5WxsPvMdJ7Zl6e6xbR6w3XFZsS5XfKQvpHUnnAivCxGma/7Ne0ru2f6OvRSxB84KQ91gSAuW9Ir3+RMzEU6kuJtmrDR7md4xs+p52a9R8RfL9wZ3woieDs/zBVc6PNDBKW3ox5nmCWm6YB42pHTJL2Kllr99Q38mWj1avmdQCvGrUSkeV0Xc5vkj+DYX4tH+T70P9csXQSMNAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_1.png' title='' src='/static/ca7f5b43bee99b38af5cf3a2048a5422/ca1dc/img_1.png' srcset='/static/ca7f5b43bee99b38af5cf3a2048a5422/e7570/img_1.png 170w,\n/static/ca7f5b43bee99b38af5cf3a2048a5422/f46e7/img_1.png 340w,\n/static/ca7f5b43bee99b38af5cf3a2048a5422/ca1dc/img_1.png 680w,\n/static/ca7f5b43bee99b38af5cf3a2048a5422/02d09/img_1.png 1020w,\n/static/ca7f5b43bee99b38af5cf3a2048a5422/be814/img_1.png 1199w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_1.png</figcaption>\n  </figure></p>\n<p>AcceptanceTest 클래스를 상속받아 사전 식물의 조회를 테스트하는 인수 테스트를 작성했다.\n37번째 줄의 <code class=\"language-text\">DictionaryPlant REQUEST = dictionaryPlantSupport.builder().build();</code> 는\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/7769cb4beb02f5aecd8ee8bd8c479f8d/d8785/img_2.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 114.70588235294117%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAXCAYAAAALHW+jAAAACXBIWXMAAAsTAAALEwEAmpwYAAACO0lEQVR42p1V2XLbMAzM51giCfCW6CNxmqOd6bT//zdbgJYzidvEch92SI+lJbC7oO5irng8WsGANlvEOGAcFSOMMTfjLs0TjvcFz8eMl9c92nZCSAk+BCE1GM3YyTvM9UPuYqkg5xCdAckL7EMnVOieiQUenkJfrbFfE4ZUwUyYEiN6RggRISakFJFiAAkJn+FYCK9VKBoSOVRvMOeIaW5ouwO22xm7VmGdvbFlIXREcPIiWQNnLazAWHfCraYoIQthjQpGYnE65Y6UM4hZHhxvcLloWw6BDEqgriE7Wto0b+3eVKGV1jxZBDHFsYivkL33rldIfN3ddxVOUiHBuxGHzNiJKWqMVprj4rqg67qe0HVSVmPMgGEYsBk2At1v+uSsbrlMrZMlNmglIFepsM7Y1iS5jJIA36tbq+NbhfqDpe2SCrbtgP3uoa9ZJsZJTkkO/VfbdonZ+b8PhMbY3p7O8ePzd0wS7FRk7JKXGEVZZfwCnxAXLHt9xrG7JDzFxIsJD08vyHPp1ZnlklgZm0mm5CMhe4/74xOm3dxPVsL1OSyfED4+Y/9wRBSj1kamE2YhrIn6jUM60xLyXCtef//Ct58/UA9yP+aTdl710qATfYquoVscPEMvi1gKamuoGnRZWcaSPP317CVOo+cub5URw0ZCvdlgbnKLH7YIlZFb6CP5laYnl5dr6qyVaqo6GtFzajsU+UxQkHmXG6m7fi3YSnCGmqIVa3Tsu0N6VSumpROq0JdO/u9X7w+6HMK31cY5UAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_2.png' title='' src='/static/7769cb4beb02f5aecd8ee8bd8c479f8d/ca1dc/img_2.png' srcset='/static/7769cb4beb02f5aecd8ee8bd8c479f8d/e7570/img_2.png 170w,\n/static/7769cb4beb02f5aecd8ee8bd8c479f8d/f46e7/img_2.png 340w,\n/static/7769cb4beb02f5aecd8ee8bd8c479f8d/ca1dc/img_2.png 680w,\n/static/7769cb4beb02f5aecd8ee8bd8c479f8d/02d09/img_2.png 1020w,\n/static/7769cb4beb02f5aecd8ee8bd8c479f8d/d8785/img_2.png 1021w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_2.png</figcaption>\n  </figure>\n다음과 같은 형태로 repository에 테스트용 엔티티 객체를 save하는 과정을 간편하게 하기 위해 작성된 DictionarySupport 클래스와 코드이다. 즉 37번 라인을 사용하면 임의의 객체 정보를 dB에 저장하는 insert 작업이 일어난다.</p>\n<p>즉, 현재 테스트 메소드는 repository에 사전 식물 객체를 저장하고, 이를 RestAssured를 활용하여 실제 서버에서 요청을 보내 저장된 사전 식물이 조회되는지를 확인하는 과정이다.</p>\n<p><figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/f2b0fbb841ccdb7ac66fbb5af7d00017/5205e/img_3.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 62.35294117647059%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABjklEQVR42p1T2XKCQBDkaxKVaxeWS1ZQIgSjVpL//5hJ9wrEVMWH5KGrB4bpOfHquhZrrZRlKUVRiFJKoij6gTiOHWgHQSC+7zt7/vbe51GsaRpp21byPHeOzWbjggja93j0fvZ5qTFigCzLloxhGC6Bf4UXIVhDKIaQ1tqBov8WrBHcAGSDGaSAmuYUPMLk/1VwnyTygpbJdRTLLlZSco5wPmEuz8DqDmtivV7mNtuLYJWm8ortjpjhHq13SgNKDuBe32wLrgCLpNu8kLKqhLPnzDkiVvy9FDz0cFyTVEadyDsSfKQGbBx/IvCS3jDiCjok3+HELBnCW9gU5+m4szFob4DQlZWCL2CKXpDgLZneo/pDlotFMMX2ENpBvFC4z8B3S1WwXYUGWz6i7BOCh4nPFIPQaeKBlUGkRVUW4i2ejSnkWZeyUuDISKgSSfGtl6NUtsqWWekIQYqwpZwC+JOOfS9d17mZcQnhvOkgXBA4oOXMtaydKFseJ1HijGoGtDiiuiNmyAsopgt4dDZfOs56o8n5OYsAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_3.png' title='' src='/static/f2b0fbb841ccdb7ac66fbb5af7d00017/ca1dc/img_3.png' srcset='/static/f2b0fbb841ccdb7ac66fbb5af7d00017/e7570/img_3.png 170w,\n/static/f2b0fbb841ccdb7ac66fbb5af7d00017/f46e7/img_3.png 340w,\n/static/f2b0fbb841ccdb7ac66fbb5af7d00017/ca1dc/img_3.png 680w,\n/static/f2b0fbb841ccdb7ac66fbb5af7d00017/02d09/img_3.png 1020w,\n/static/f2b0fbb841ccdb7ac66fbb5af7d00017/5205e/img_3.png 1222w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_3.png</figcaption>\n  </figure></p>\n<p>그런데, 200 OK를 기대했던 테스트의 결과가 404 not found가 응답되고 사전 식물이 존재하지 않는다는 예외 메세지가 뜨는 것을 확인하게 되었다.</p>\n<p>뭘까? insert 쿼리가 날아가지 않은 걸까? 로그를 확인해 보았다.\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/53bd1215f3b30f53aa9578bb03b24e6d/cd35d/img_4.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 27.058823529411764%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAs0lEQVR42m2PaxKDIAyEvU5FQ6C+EXS8/522LpbW6fTHNyQ7ybKpvPfo+x6qCuccrLUQkQzr31710vTGpWueqeZ5RggB67piGIbMNE1YliUP8EPW1MYT9U/IuWwaudHCGJOpUkrYtg3HcWAcx7y873vu+SvTs97PmRATanGoW4eHFDxMK1/DGCNoShMaMnHpeUrXdbmmxivUCpqGy/VF/X6LIdOVhOXUfwk5Q307UXUfg19eAqWgtd77uY4AAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_4.png' title='' src='/static/53bd1215f3b30f53aa9578bb03b24e6d/ca1dc/img_4.png' srcset='/static/53bd1215f3b30f53aa9578bb03b24e6d/e7570/img_4.png 170w,\n/static/53bd1215f3b30f53aa9578bb03b24e6d/f46e7/img_4.png 340w,\n/static/53bd1215f3b30f53aa9578bb03b24e6d/ca1dc/img_4.png 680w,\n/static/53bd1215f3b30f53aa9578bb03b24e6d/02d09/img_4.png 1020w,\n/static/53bd1215f3b30f53aa9578bb03b24e6d/9d567/img_4.png 1360w,\n/static/53bd1215f3b30f53aa9578bb03b24e6d/cd35d/img_4.png 2035w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_4.png</figcaption>\n  </figure>\n그러나, 로그에는 정확히 우리가 DictionarySupport에서 지정한 저장 메소드의 Insert 쿼리가 날아가는 것을 보고 있었다. 심지어 value 값도 모두 정확히 들어갔다.\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 342px; '>\n      <a class='gatsby-resp-image-link' href='/static/294f14641caf877174683d3cedcc9f93/28260/img_5.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 161.76470588235296%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAYAAAASYli2AAAACXBIWXMAAAsTAAALEwEAmpwYAAACQklEQVR42p2WWZaCMBBF3YwjCs7zPKHufz/V3LSPk0agwY8cSEFuXg0paIzHY4vvd7vdbnY8Hu1yudhoNLJer2dBENQejSiKLAxDm06nDna9Xm0+n1un0/kK2ggTYLfbdVBAm83GttutoXw2m1m/368FdkBNWq2WTSYT5zrQ8/ns5oPBIB2VgCiQElTt93tbrVZuKAyHw8Gp/09tCgwSIK4TSxYDU5K4B/Z4PFwoyqB/FAJEIa7iMmDud7udU8mIJKAqUApRhDqAhCCO45ouJ5M8l5/Pp63XawerUp+5QBQBOZ1OruC1geJZOyk+EJdJBjHFbeBfJ0VAVGFXKVWuQwFRgUJcvCfnnILmmcZXSSEJXKVSz79OCkCyLChz7Mw59zSPWkBiBQgoAxtKCQOFXnRiCpNCDHVCtAF2NsG+WCzqJUUKSQoK2YDyAdput9M1lVwWQAnhhPCM9iYY87w4FhZ2notspLpU88iqLG1fLCaGSgRwQMvl0nV3NiHjfnJygSzEZRSpuQIE5n9r8uryIynsDIi6IyEAUaISAo7t9Xq5d7InpzApvAxEan2VKnDshQqzSfEbLDEDIAg21BPnUoX+R0oLUYvL2GRnI/okm5fGkBrjSMllKVT3ltvY9In9UBi9P/TD4dA1UBZSwNjYgKEiVoaxFf1ZfLisOkQJV9zEZf+exFANeb0xBVKgvEyMGIBxFRtxJTHcExJghd1GLnNe1VnUoVngn1vZyhrt77/N+2Gz2Uz/wvzWxTOSltddsuMHtxr30NPOq8oAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_5.png' title='' src='/static/294f14641caf877174683d3cedcc9f93/28260/img_5.png' srcset='/static/294f14641caf877174683d3cedcc9f93/e7570/img_5.png 170w,\n/static/294f14641caf877174683d3cedcc9f93/f46e7/img_5.png 340w,\n/static/294f14641caf877174683d3cedcc9f93/28260/img_5.png 342w' sizes='(max-width: 342px) 100vw, 342px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_5.png</figcaption>\n  </figure>\nselect 쿼리가 잘못된게 아닌가? 확인해봤지만 예상한대로 나갔다.\n여기까지 봐서는 이해가 안 간다. insert를 하고 select를 했는데 조회가 안 되니 말이다.</p>\n<h2>RandomPort 환경에서의 스레드와 트랜잭션</h2>\n<p>이를 이해하기 위해서는 RandomPort 환경에서의 요청이 어떤 스레드를 갖는지를 알아야 한다. 이 내용은 스프링 공식 문서를 들여다볼 필요가 있다.</p>\n<blockquote>\n<p>If your test is @Transactional, it rolls back the transaction at the end of each test method by default. However, as using this arrangement with either RANDOM<em>PORT or DEFINED</em>PORT implicitly provides a real servlet environment, the HTTP client and server run in separate threads and, thus, in separate transactions. Any transaction initiated on the server does not roll back in this case.</p>\n</blockquote>\n<blockquote>\n<p>테스트에 @Transactional이 붙어 있으면 롤백을 보장할 수 있다. 단, RANDOM<em>PORT 나 DEFINED</em>PORT 환경에서 테스트를 수행하면, 실제 서블릿 환경에서 테스트를 진행한다. 이 때 http 클라이언트(테스트)와 서버는 서로 다른 스레드를 갖는다. 즉 별개의 트랜잭션이 수행되는 것이다. 따라서 서버 쪽에서의 트랜잭션은 롤백되지 않는다.</p>\n</blockquote>\n<p>쉽게 설명하자면, 랜덤 포트 환경에서 테스트를 수행하는 순간, localhost 포트 어딘가에 내장 서버를 띄운다. 그리고 그 서버에서 요청을 보내도록 하는 것이 RestAssured 이다. 따라서 RestAssured에서 보내는 요청은, 내가 해당 테스트 메소드에서 실행하는 스레드와 별개의 스레드를 갖는다. 따라서 트랜잭션도 각자 별개로 갖는다.</p>\n<p>자, 아까 우리가 AcceptanceTest의 클래스 레벨에서 <code class=\"language-text\">@Transactional</code>을 선언했음을 기억할 것이다. 클래스 레벨에 이 어노테이션을 선언하면, 자동적으로 해당 클래스와 그를 상속한 메소드 레벨에 모두 트랜잭션이 걸린다.\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/d6076111fb8289c4122ae2aa222c682b/95234/img_6.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 63.52941176470588%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAACCElEQVR42o1Sy3KcMBDcD/HBr6rdBYQQC0KABAj2ETu2kzjH5JBUKofccs7Pd1qsfVvX+jBISKOe7p5ZmDJCXUg0pYTOBeoyRcV/IQTiOEaSJFgx9HqN71dXWHKf8Dx+IxZK5TC1QVVp6BBFQUCNYqORqwJ5vkG6KTAw+e/FxXlAKSUKXcG0DlXdQpsGWZYjJ0iapkyKEBFEMvnh9vY8YEQpMlMwjUWSJhBScKVUEUORXQBOCKyY9/Xm5h2A0RqZUvDjFnVrUVYGWpt5zWQKmYqZoYoiPL8HMJiuyLDSJQr6pzYbZHnOlfvAmAWXDLle4cv1NZahUec8VASoG4fGOa4t+sqjNmRr6tlX13j4yuFb8DTLEJPtm4Dhs6Y/hkBumDCMezyNz9hN9+inHXpaMY53+DQ84HfVwnTDrCQoOw3Ii4gVNT0LHra2x95+QGc9O2/nZrXO49BM+JGXKFk4o6rkZU5PMDwC1hybzk/w0x6P/jO2ZDXu79CRtSPTx+EefwqL7nDPnB0UGxmUBZDwPnqxYfF6ELyylNP1Iz4OTxiHPQtsacOIhudTP+Fn4WD9DqPfo7HdcVbJNoTgNAiRYCFEOv9oY2Z5DZlO7Q627fnIUW6HgsUOtORflFKJh+OddQPvepRaz/MaGEs2bCHTUOGIHow+FRH9qinv1+UlVtwnSXwiL5wJ/AedCZ3HwfdnegAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_6.png' title='' src='/static/d6076111fb8289c4122ae2aa222c682b/ca1dc/img_6.png' srcset='/static/d6076111fb8289c4122ae2aa222c682b/e7570/img_6.png 170w,\n/static/d6076111fb8289c4122ae2aa222c682b/f46e7/img_6.png 340w,\n/static/d6076111fb8289c4122ae2aa222c682b/ca1dc/img_6.png 680w,\n/static/d6076111fb8289c4122ae2aa222c682b/02d09/img_6.png 1020w,\n/static/d6076111fb8289c4122ae2aa222c682b/95234/img_6.png 1079w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_6.png</figcaption>\n  </figure>\n따라서, 현재 테스트 메소드의 트랜잭션 범위는 다음 화살표와 같이 테스트가 끝날 때 까지 유지된다.</p>\n<p>우리는 여기서 트랜잭션의 개념에 대해 다시 짚을 필요가 있다.\n\"트랜잭션이 끝나지 않았다\"는 의미는 무엇인가?\n내가 수행한 insert, update, delete 문이 커밋, 혹은 롤백되지 않았다는 뜻이다.</p>\n<p>커밋되지 않았다는 뜻은 무엇인가?\n데이터베이스의 갱신이 이뤄졌어도, 다른 스레드에서 확인할 수 없다는 뜻이다.\n왜? 트랜잭션은 각자 격리되어 서로의 트랜잭션이 끝나기 전 까지는 연산 과정을 볼 수 없기 때문이다.(트랜잭션의 Isolation(격리성) 특징을 기억하자)</p>\n<p>따라서, 현재 트랜잭션이 끝나기도 전에, 즉 반영되기도 전에 RestAssured를 통해 띄운 별개의 서버 스레드에서 GET 요청이 들어가니 해당 데이터를 확인할 수 없는 것이다.\n정확히 말하면 트랜잭션이 커밋되지 않았을 때 까지의 데이터는, 다른 스레드 입장에서 그냥 없는 데이터다. 없는걸 조회하니 당연히 값이 안 나온다.</p>\n<p><figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/ceb0b6e59d5718b93c731d3ca7bb2780/6b882/img_7.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 48.23529411764706%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABRklEQVR42qWS7U7CMBSGdzms+4xrYV27dRvocHyJQYKoP9QQvf8beD10RDRBEvXHk+esSU/fs9ZpV/cY325wdbPG5eIOzZI8X0GPWqjhGGY8p3pCdQtZXyMtm7M4evaI6fYNk80O5ewB5XQL2axRzJ6QFiPEoYcoDOF7DAHhey585h79FVpzouYZavGKcrmDnncW7Qvk4h08bzAQCbjUYIlEL+KEQC8ekPud471TCwtjSpgrqFwj00drcm5yJDxBJiV0UeCCC3h+YGGfDm3dOaQ1H44yFVRZf8fU0NUIiehDKYXSGGufNnied5au4Ql0NbSppExR1zU45wgCSsOY5fcNy6FNyJOEmkrbLKTLiaLI+s8JhRAwh5EL+pf773805PbJZFkGrTWqqkIcx3DdHm1mJ3Fkbn4YuYYYpN2o+zEPBHTAOT4Av3tJV9XHv5kAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_7.png' title='' src='/static/ceb0b6e59d5718b93c731d3ca7bb2780/ca1dc/img_7.png' srcset='/static/ceb0b6e59d5718b93c731d3ca7bb2780/e7570/img_7.png 170w,\n/static/ceb0b6e59d5718b93c731d3ca7bb2780/f46e7/img_7.png 340w,\n/static/ceb0b6e59d5718b93c731d3ca7bb2780/ca1dc/img_7.png 680w,\n/static/ceb0b6e59d5718b93c731d3ca7bb2780/02d09/img_7.png 1020w,\n/static/ceb0b6e59d5718b93c731d3ca7bb2780/6b882/img_7.png 1270w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_7.png</figcaption>\n  </figure>\n그래서 <code class=\"language-text\">@Transactional</code> 어노테이션을 제거하고 테스트를 수행했더니, 다음과 같이 통과하는 것을 볼 수 있다.\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/539d3abcceb71f6a558289e0848ac19d/adc5a/img_8.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 65.88235294117646%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB5ElEQVR42o2TWXLbMBBEdZpEXACCBMANJMBdtuQ4qdz/Lp0ZWJU4VbGcj+EGqPF6enRyvUBrFVpToFI56krAVhJCCqRp+lclWRYre1CnUgk0tUFjK9TWkJhCU2kS1yiLCpU2UFSdlJi+fkF/PkPyAR8JCllA2wZtN6DpHOq2R1kaaG2hVPm2Mc9R0r1KEogsRf6IkC9FoTD4CZUhMqtRlAWkohYYGwkl0TFR+ondKMi9YYLejTDWolAqkqmyjEJSCOS0nv2HWBTkzbIo0PYD2SbLTUfCNWzbUQ8FZJbgTFaTNEGapJ8LMkVJIdRNG8U02Wx1D6vraFcTdWt7NKajdx1po6tHPTxTciw2rQfm7cDr+hNP2yum/RK/7dsN1+U71u0Zzgc61HzYhlN2P5HJOupjN3gc4zOmcaPnEa0bMIwTVnfA+xVd7yhE+UCQh5V6xIRh3hCWHS/zD+zzFfP+hHFa4JcNl+WGy3SL1IHeSwotIWf5v0JJSZCDcETiaHyu4RvWcGCcF4xhRj8GhLDh8Ff4sCJMWwxQ0UTwFAieBJFH6lP+zjInzbZXt8M7FvJ0SIg/bum7cx5jP2GkNT6Y14ypibaiMVNxzE78n2VUFv5d2Z9ncZ/DtyIaquzd3miVU78n/wtNaJuLDpSLtQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_8.png' title='' src='/static/539d3abcceb71f6a558289e0848ac19d/ca1dc/img_8.png' srcset='/static/539d3abcceb71f6a558289e0848ac19d/e7570/img_8.png 170w,\n/static/539d3abcceb71f6a558289e0848ac19d/f46e7/img_8.png 340w,\n/static/539d3abcceb71f6a558289e0848ac19d/ca1dc/img_8.png 680w,\n/static/539d3abcceb71f6a558289e0848ac19d/02d09/img_8.png 1020w,\n/static/539d3abcceb71f6a558289e0848ac19d/adc5a/img_8.png 1068w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_8.png</figcaption>\n  </figure>\n이해를 쉽게 하기 위해 바뀐 트랜잭션의 범위를 화살표로 표현하면, DictionaryPlant를 저장하는 과정에서 트랜잭션이 끝나고 커밋이 되어 db에 영속화가 완료된다.\n따라서 이후 랜덤 포트의 스레드에서도 해당 데이터를 조회할 수 있다.</p>\n<h2>트랜잭션의 격리 이해하기</h2>\n<p><figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/4f297df537bbdf2952dc4a88a14279c2/bb51b/img_9.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 31.176470588235293%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABKUlEQVR42pWQ2W6CYBCFef+3atKkjbF1A5X152dREGRxAeHCr6NJm3jZk0xmO3NmMsa16+me1lEXJaHr4fkKO1L4WhNFCUEoPk5ROkaFEV6knz0l9UBJL0kJo5gk3WEUh4yyyCiqI73EVx1walusc8iuzmjrmizfczo35OLPdYWqRLiIORYHDjJzubacu5ZaekYZWxyzJSvPY2FO0OGM/c7G207Yrj/w3LnULJbuO475Rq6XxNEKz5kSKotYb3DsCYG/INuHGHUp5/sBruuSZXvZmMvGC/Z2JsRvzNUnrjNns5lK7UvEHcryyO3WMQyD2I2+7yTvGcdBLiwSIZtY1pqmaUSwoKoqIfU8cL/fn/aL15gXPHJDp7k8VpGmqfwof4qN4/gn+F/8AJlXwUVIVOQyAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_9.png' title='' src='/static/4f297df537bbdf2952dc4a88a14279c2/ca1dc/img_9.png' srcset='/static/4f297df537bbdf2952dc4a88a14279c2/e7570/img_9.png 170w,\n/static/4f297df537bbdf2952dc4a88a14279c2/f46e7/img_9.png 340w,\n/static/4f297df537bbdf2952dc4a88a14279c2/ca1dc/img_9.png 680w,\n/static/4f297df537bbdf2952dc4a88a14279c2/02d09/img_9.png 1020w,\n/static/4f297df537bbdf2952dc4a88a14279c2/bb51b/img_9.png 1320w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_9.png</figcaption>\n  </figure>\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/3ceedd46236c90d9fb1d34efce28e1ad/bb51b/img_10.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 31.176470588235293%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABK0lEQVR42pWQWW/CMBCE8///VaVKrRAtZziSkIOQ2M5JCCSQB74uSK3EY0ca7eHZWdvWpevphJeu41TVJOGecH/AVwf2aYrShjh5xEyiIkk1sdZESfLsH1L1PFMm49i0WHmmKXJNXpX0kl8in1PTYLchaa1p6hptFKf2SGZS2roiqGKCPKbMMzKZOV9OtF1DXZdYRWxT6jkLz2O2HBGFE1S6xduM2Kw+8Nyp9Gzm7jvO8g0TzYn3CzxnTBjYxNEaZzvC383QKsSqi4jdzsd1XbRWstHIxjPbzUSE3ywXn7jOlPV6LL0vMXcoipLrteN2uwmv9H0ndc8w3OSG+UHES2x7xfEoz8pyqqoSUc8D9/v9yV+85rzgUVtRYvCDgEQ+2RjzNBuG4c/wv/gBd/7CXiOatnUAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_10.png' title='' src='/static/3ceedd46236c90d9fb1d34efce28e1ad/ca1dc/img_10.png' srcset='/static/3ceedd46236c90d9fb1d34efce28e1ad/e7570/img_10.png 170w,\n/static/3ceedd46236c90d9fb1d34efce28e1ad/f46e7/img_10.png 340w,\n/static/3ceedd46236c90d9fb1d34efce28e1ad/ca1dc/img_10.png 680w,\n/static/3ceedd46236c90d9fb1d34efce28e1ad/02d09/img_10.png 1020w,\n/static/3ceedd46236c90d9fb1d34efce28e1ad/bb51b/img_10.png 1320w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_10.png</figcaption>\n  </figure>\n해당 동작에 대해 조금 더 설명하기 위해 별개의 스레드에 h2 database 콘솔을 띄워 확인해 보겠다. 위의 두 콘솔 화면은 세션 id가 다른 별개의 스레드를 갖는다. 편의상 위를 스레드A, 아래를 B라 하겠다</p>\n<p><figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/dd9a54c5ddfb5b0d712987298da827f7/bb51b/img_11.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 61.1764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB2UlEQVR42p2S627aQBBG/f5PVLWVWlVVGlLCJQHHXGyv1/cLYEJsAwmcjEFp/iRN1ZGOvLMz++23Ixt1XVPXDZWwXq4IPY3nhziRjw5DojjBDyPiJCWIYsIwRsdCFBHI/qmWZoTSl2Y5RpEl5FlMvizY5gmVdtis15gbj7hMWa+WIhax2ZRkacxGcrX08RYhq0VBUWQ0zQPV7p6yXIlgYFKmI0aOw615TaBviKMp9qTLdHKFp0x832I4/8ls9INUj/D1mKl1hW2PpH7HxOpgzwckscIoFx5KebjKJREneZZSVQ8M+xcMfn+nc/GF8W0Hy7oWkS5aTSkWC3a7hv1+d6JparbbRva2GFmiGA569PsDsV8QyWwWciCS+SVaEyhFnufsdzs5tKVpac7fU940HI9HXsJQYYbjuARBQCzDbsUeHx/FsUJ5HnPbFncWrutKn8NsNjsxmUxOmKYpLvevggdRb284HA48PT39WddVLeW2djjtnV28OjnHOX+ptxi8Ea1w+5T/iTcFW4dp7LEsNHmqZe0Qh478QsmHGG/fc6TX7fH50yXdziXfvv7ipnfJ/XIu2H/lXUHtjplbPZLQkkaPaq15KL0PMd6bhecMKZI7mo0WMSXN/8Yzt32JpfyIHOcAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_11.png' title='' src='/static/dd9a54c5ddfb5b0d712987298da827f7/ca1dc/img_11.png' srcset='/static/dd9a54c5ddfb5b0d712987298da827f7/e7570/img_11.png 170w,\n/static/dd9a54c5ddfb5b0d712987298da827f7/f46e7/img_11.png 340w,\n/static/dd9a54c5ddfb5b0d712987298da827f7/ca1dc/img_11.png 680w,\n/static/dd9a54c5ddfb5b0d712987298da827f7/02d09/img_11.png 1020w,\n/static/dd9a54c5ddfb5b0d712987298da827f7/bb51b/img_11.png 1320w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_11.png</figcaption>\n  </figure>\n스레드 A에서 트랜잭션을 시작하기위해 Autocommit을 False로 변경한 후, 두 명의 member 데이터를 insert 했다.\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/84f758604ced9d204da78e6b1297ec26/bb51b/img_12.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 61.1764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABsElEQVR42p2S627aQBBG/f6vFCmq0qa0KmBIXRIgvt/XVwzYgDAnQ4r6i1ApIx1pdnb1zbe7o7VtS9t2bIVVWRG6Hq4fYkU+XhgSxQl+GBEnKUEUE4YxXixEEYHU3/dSRSjnUpWh5SohUzFZmbPLEraexXq1YrZ2ieuUVVWKWMSqqVBpzFrWTunjFiFVkZPniq7bsN031HUlgsGMOjUwLIvfsxGB90QcLTAXQ5YvP3GdmbhaYNgDln8eUJ5B4Bss57+wTEP2n5nLOfN1QhI7aHXh4jgutmOTiBOlUrbbDfr4kYn+jcH3O0ajB8ajr8yfhzj2C1mWiauW3W4ndJe8Y7/foanEYToZo+sTsZ8TydsURUGapjRNIw2U5IqqqjjH6XR656PQnFBhWTZBEBDLY5dlyeFwkK4dnwmtv3Ts+57j8fg3P/Zy7e3ZjtSPF/p/7m6hXetyFv60w2vFs5vzj+XKJUtdksgiDi0ZoeS/aNf7nJjqU77cy2eNhtzfDXjSf9CUr4J5k+uCpx7ft1ksTFYy5Jbtsm4yNrUjuDf50KG5nIrLR7m2zGckzirvInibN7s0jkTeQnWyAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_12.png' title='' src='/static/84f758604ced9d204da78e6b1297ec26/ca1dc/img_12.png' srcset='/static/84f758604ced9d204da78e6b1297ec26/e7570/img_12.png 170w,\n/static/84f758604ced9d204da78e6b1297ec26/f46e7/img_12.png 340w,\n/static/84f758604ced9d204da78e6b1297ec26/ca1dc/img_12.png 680w,\n/static/84f758604ced9d204da78e6b1297ec26/02d09/img_12.png 1020w,\n/static/84f758604ced9d204da78e6b1297ec26/bb51b/img_12.png 1320w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_12.png</figcaption>\n  </figure>\n이 때 A에서 select 문을 실행하면 데이터가 들어가 있는 것을 확인할 수 있다.\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/a14fa4ce271f012ac9459d49853e0136/bb51b/img_13.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 61.1764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABrUlEQVR42p2SaW/aUBBF/f9/UdVWqpQuJCoYkrpsCd6w/bzhDbwEYU6GFvUTJFVGOvJ43ujea+tpTdPQNC21UGY5vuPirH3MYI3r+wQqZO0HqDCSp48fhHhhiC29J3MvUARypqKYstyipXFIEiuSLKVLQmrXZFuWTLcOqogo80zEAsoqJ5a9rbzbmYeTBeSblDSNadoddVdRFJkIelOKyMAwTX5NR3juAypYsloOeZzf4dhTfH+JYQ14NG6IXYP12uBx8RNzZcj5jIXsrZ4mhMpGKzYOtu1g2RahJInjiLreMda/Mxl/Y/DjE6PRDfroK4vZENuakyQJbdvQdZ3QnvuW5+cOLQ5t7ic64/FE4qcEQcBmsyGKIqqqEoNY+pg8zznV8Xj8w7XSbD/GNC08z0MpRZZl7Pd7cW15T2n92bHvew6Hw9/+0Mtn16c4Mj+c6f+lew3tkstJ+N0JLw1PaSLlkKUuSeRKb6J8U65Q+CbaZZ8j+lDn44cBw7tbvnwe8KDfUmVPwupVrgq61m+Wck2UN5dFh7p02RXOm2jX/oVj3pOGM9qtK2K2LP8fLwCCjo9W5E5IAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_13.png' title='' src='/static/a14fa4ce271f012ac9459d49853e0136/ca1dc/img_13.png' srcset='/static/a14fa4ce271f012ac9459d49853e0136/e7570/img_13.png 170w,\n/static/a14fa4ce271f012ac9459d49853e0136/f46e7/img_13.png 340w,\n/static/a14fa4ce271f012ac9459d49853e0136/ca1dc/img_13.png 680w,\n/static/a14fa4ce271f012ac9459d49853e0136/02d09/img_13.png 1020w,\n/static/a14fa4ce271f012ac9459d49853e0136/bb51b/img_13.png 1320w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_13.png</figcaption>\n  </figure>\n그러나, B에서 동일한 select문을 실행하면 데이터를 확인할 수 없다.\n왜냐? 스레드 A의 트랜잭션은 끝나지 않았기 때문에 A에서 보이는 데이터는 \"임시 반영\"된 데이터일 뿐, \"영속화\"되지 않았기 때문이다.\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/cad5de9cbe3d1b7864510b0f468b3b0e/bb51b/img_14.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 61.1764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABiUlEQVR42p2S2W7bMBBF9f9/1NcCblC4iTfVW2LtFClqsWRHkm3YOqWE5M0B3AxwwCE5y+WAVtM0NE1LbaiKPcIP8EOBE4cEQhBLRShipEqIYokQkkAa4pjInA93iUaYuESnWJlWpFqSFhmnVFEHDseqYnn0kZXmUO5RKuZwLNGJ5Lgv8IoQPxfs84ws07TtO/X5QGlirSxaUiY2tuOwWD4TBXNkvGW3fWa7/o27swmDFfO3Ea9/f6IDmyi0ed2Mccyd763YmLjd2xQlPawy9/E8H9dzByVaJ9R1zXQyYjF/YjH7ZRJeWC3HbFZ/8Nw1aZoaVQ2n08nQfvgt5/MJSyuP2fSFyWRq5GfEZjZ5ng9J/Wy7DkM3rL31S/e5uWOWJzSO4xJFEdIMuygKLpeL6dryHbNuQ/eO2+3G9Xr98K/Ds+FT3eNY97r0hb+t8N5hr1arkCIT5tskVHv1MNZXnezZiPHTDzK1Nn/P4VDsHuJuwX4WSmyGYnXl814+zpdPPpYhzaEP8v6LfxfakdB3SsWxAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_14.png' title='' src='/static/cad5de9cbe3d1b7864510b0f468b3b0e/ca1dc/img_14.png' srcset='/static/cad5de9cbe3d1b7864510b0f468b3b0e/e7570/img_14.png 170w,\n/static/cad5de9cbe3d1b7864510b0f468b3b0e/f46e7/img_14.png 340w,\n/static/cad5de9cbe3d1b7864510b0f468b3b0e/ca1dc/img_14.png 680w,\n/static/cad5de9cbe3d1b7864510b0f468b3b0e/02d09/img_14.png 1020w,\n/static/cad5de9cbe3d1b7864510b0f468b3b0e/bb51b/img_14.png 1320w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_14.png</figcaption>\n  </figure>\n만약 위와 같이 스레드 A에서 커밋을 하고 나면\n<figure class='gatsby-resp-image-figure' style='margin-bottom: 16px;'>\n    <span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; '>\n      <a class='gatsby-resp-image-link' href='/static/8a07b84cb0cb833d12cc4a29bef34245/bb51b/img_15.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 69.41176470588235%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB5UlEQVR42p2T3VLbMBCF/f6v1JvOlIEWSBpKgBAnshNbsuw4/sN24jjkQzK9hLSDZs7srqxzdi3tOvt9R9cdaNo9eZYTrAO8VYCQAYGUqEgbq1A6HuJQRYRmzw9D1qEcvtk9qTTlS42zSWI2m4S8zOiNrX1BVZRM6xWqiCmyDKUkVVmi4/fYyyR+psi3W5JNbIqpabqaPM9w0nBGkTwyFSsen0ao9T2RmuOJCUt3TBi4RJFgFtziza7I5DNh+Mh8do1YTFn5M9znG+PfGZ6Ps9ULxNLl2Z2zXvuGHFJVOXe/L7ib/ODXz2+DPxp/5+nhEm85JdaKpi5o2xd2trq6pG0q9vsWJ9Ee4/Et49GINE2R5k6s9TxBHJu78j2EEKaq0Ai0tLsd3eHA8fhKfzwaexx8a/v+iLOSsSH5aK1JkoSiKDgYgiV/ZTn7Q8+h69iZzBZ93w/ZmqYZDpxOr39xssE7+BzOR1ms4Jcr/Exwk4SUhSbbRqY/FVkaUeWpaanzcD7Oc+Lhz5ibq2umk2suLy64n1zykgsD7yw+EXzFnS8ZjexL56YLXNJE05QedeGfxYeC9hGC1ROL+cRMhmQTm+ylNIQvCtolzJQE3oRyuxwO2t/5l9iZCk9oaUYyXdBW6/8Ws3gDYHcmGVjfnroAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='img_15.png' title='' src='/static/8a07b84cb0cb833d12cc4a29bef34245/ca1dc/img_15.png' srcset='/static/8a07b84cb0cb833d12cc4a29bef34245/e7570/img_15.png 170w,\n/static/8a07b84cb0cb833d12cc4a29bef34245/f46e7/img_15.png 340w,\n/static/8a07b84cb0cb833d12cc4a29bef34245/ca1dc/img_15.png 680w,\n/static/8a07b84cb0cb833d12cc4a29bef34245/02d09/img_15.png 1020w,\n/static/8a07b84cb0cb833d12cc4a29bef34245/bb51b/img_15.png 1320w' sizes='(max-width: 680px) 100vw, 680px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n  </a>\n    </span>\n    <figcaption class='gatsby-resp-image-figcaption'>img_15.png</figcaption>\n  </figure>\n이제는 스레드 B에서도 동일한 데이터를 확인할 수 있다.</p>\n<h2>결론</h2>\n<p>결국 메소드 레벨에 <code class=\"language-text\">@Transactional</code> 어노테이션이 붙은 탓에 save 메소드를 성공적으로 수행해도, 트랜잭션이 끝나지 않아(정확히 말하면 커밋되지 않아) 랜덤 포트 서버의 스레드에서 확인할 수 없는 것이다.\n따라서 랜덤 포트 환경의 격리성을 보장하고자 할 때는 <code class=\"language-text\">@Transactional</code> 어노테이션을 사용하기 보다는, truncate를 하는 sql 스크립트를 사용하는 방법을 고려하는게 더 적절하다고 생각한다.</p>","frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)","date":"July 31, 2023","update":"July 31, 2023","tags":["Transaction","SpringbootTest"],"series":null},"fields":{"slug":"/transactional-not-in-restassured/","readingTime":{"minutes":9.67}}},"seriesList":{"edges":[{"node":{"id":"28f1d87e-d3fc-5567-8531-57649652864f","fields":{"slug":"/sprint-idea/"},"frontmatter":{"title":"구글 스프린트 기반 아이디어 도출"}}},{"node":{"id":"4a9246fb-171b-5973-88fc-864034e78afd","fields":{"slug":"/blog-starter/"},"frontmatter":{"title":"피움 블로그 생성과정"}}},{"node":{"id":"a387bf4f-567f-50e7-b6a7-99a1a1c8971b","fields":{"slug":"/jpa-notnull-nullable/"},"frontmatter":{"title":"@NotNull과 nullable = false는 어떤 차이가 있을까?"}}},{"node":{"id":"c826ce0e-1ea7-517c-8d19-84e90a59a798","fields":{"slug":"/jenkins-setting/"},"frontmatter":{"title":"젠킨스 설치하기"}}},{"node":{"id":"a78e224b-b711-5071-8e90-013d6f4bebc3","fields":{"slug":"/pium-deploy-step/"},"frontmatter":{"title":"피움의 배포과정"}}},{"node":{"id":"ce07fbab-1ed5-5f1e-8e2f-eb430879b56a","fields":{"slug":"/fe-tanstack-query/"},"frontmatter":{"title":"프론트엔드: Tanstack Query 사용에 대하여"}}},{"node":{"id":"159c943b-1a50-57dd-aa71-7557364752a5","fields":{"slug":"/ci-cd-setting/"},"frontmatter":{"title":"Jenkins와 Github Webhook을 이용해 CI/CD 구축하기"}}},{"node":{"id":"dea45a4a-bfde-5fbb-8a97-42d3a3e77a0b","fields":{"slug":"/jenkins-hook-by-label/"},"frontmatter":{"title":"PR 라벨로 젠킨스 빌드유발을 구분하기"}}},{"node":{"id":"cecbc8b9-db00-562b-aa0b-06c406cfc44a","fields":{"slug":"/bundle-analyze/"},"frontmatter":{"title":"bundle-analyze를 통한 bundle 크기 분석"}}},{"node":{"id":"1a03734e-d413-553f-9152-1dad2fc4acca","fields":{"slug":"/apply-https/"},"frontmatter":{"title":"내 서버에 HTTPS 설정하기"}}},{"node":{"id":"707f8ffb-1409-5c27-b15a-5661b235c226","fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}}},{"node":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","fields":{"slug":"/transactional-not-in-restassured/"},"frontmatter":{"title":"[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)"}}},{"node":{"id":"80aa708e-ef8a-5c79-9644-cb8c04d55a63","fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},{"node":{"id":"15def1d5-c20f-5d07-b46e-24a14661365f","fields":{"slug":"/react-setting-without-cra/"},"frontmatter":{"title":"webpack으로만 React 설정하기 (without CRA)"}}},{"node":{"id":"66383c86-e2c8-533a-90e0-2effae572742","fields":{"slug":"/stylelint-and-husky/"},"frontmatter":{"title":"stylelint와 husky를 통해 컨벤션 통일하기"}}},{"node":{"id":"ed5951d5-beda-5a8f-adb2-07c2fcb38d5e","fields":{"slug":"/OAuth2.0/"},"frontmatter":{"title":"내가 이해한 OAuth2.0"}}},{"node":{"id":"45eeb9a3-557d-5704-8fd9-925283e1e27b","fields":{"slug":"/restdocs-start/"},"frontmatter":{"title":"RestDocs로 API 문서화하기"}}}]},"previous":{"fields":{"slug":"/db-drop-stop/"},"frontmatter":{"title":"Table Drop 못하게 막아버리기"}},"next":{"fields":{"slug":"/acceptance-test-resolve/"},"frontmatter":{"title":"인수테스트 데이터 초기화하기"}}},"pageContext":{"id":"fe4b591a-4dd5-5dd2-b18a-b318afd1e9e3","series":null,"previousPostId":"707f8ffb-1409-5c27-b15a-5661b235c226","nextPostId":"80aa708e-ef8a-5c79-9644-cb8c04d55a63"}},"staticQueryHashes":[],"slicesMap":{}}
\ No newline at end of file
diff --git a/pium-deploy-step/index.html b/pium-deploy-step/index.html
index fe8117d2..5609e9f8 100644
--- a/pium-deploy-step/index.html
+++ b/pium-deploy-step/index.html
@@ -607,7 +607,7 @@ <h3>nginx 설정 명령어 따라가기</h3>
 <span class="token function">sudo</span> systemctl restart nginx</code></pre></div>
 <h2>Reference</h2>
 <p><a href="https://jminie.tistory.com/110">https://jminie.tistory.com/110</a></p>
-<p><a href="https://customer.gabia.com/manual/domain/287/1201">https://customer.gabia.com/manual/domain/287/1201</a></p></div></div><div class="Footer__ArticleButtonContainer-sc-zqxmks-0 becwQW"><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 OEEnV"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Previous Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">@NotNull과 nullable = false는 어떤 차이가 있을까?</div></div></div></div><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 cCfvHe"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Next Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">프론트엔드: Tanstack Query 사용에 대하여</div></div></div></div></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><div class="Footer__CommentWrapper-sc-zqxmks-7 cRSPGb"><hr class="Divider-sc-1jz0jl-0 dsTUYW"/><div class="Footer__SpinnerWrapper-sc-zqxmks-8 XZnrl"><span style="display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;font-size:0;animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite;-webkit-animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite"><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span></span></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div></div></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 ivqWaF"><div></div></div></div></div></article></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/pium-deploy-step/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
+<p><a href="https://customer.gabia.com/manual/domain/287/1201">https://customer.gabia.com/manual/domain/287/1201</a></p></div></div><div class="Footer__ArticleButtonContainer-sc-zqxmks-0 becwQW"><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 OEEnV"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Previous Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">젠킨스 설치하기</div></div></div></div><div class="Footer__ArticleButtonWrapper-sc-zqxmks-4 cCfvHe"><div class="Footer__ArrowFlexWrapper-sc-zqxmks-1 gwQEOy"><div class="Footer__Arrow-sc-zqxmks-3 bhYcVf"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg></div><div class="Footer__ArticleButtonTextWrapper-sc-zqxmks-2 jxGLes"><div class="Footer__ArticleButtonLabel-sc-zqxmks-5 hngxZd">Next Post</div><div class="Footer__ArticleButtonTitle-sc-zqxmks-6 brczfR">프론트엔드: Tanstack Query 사용에 대하여</div></div></div></div></div><div id="bio" class="Bio__BioWrapper-sc-5v8ml6-0 cIxGdo"><div class="Bio__Profile-sc-5v8ml6-1 hqublI"></div><div><div class="Bio__Author-sc-5v8ml6-2 zdqtp">@<!-- -->pium</div><div class="Bio__Description-sc-5v8ml6-3 hskwiv">우아한테크코스 5기 피움팀 기술 블로그입니다.</div><div class="Bio__LinksWrapper-sc-5v8ml6-4 cZRWgC"><a href="https://github.com/woowacourse-teams/2023-pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.instagram.com/official_pium" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div></div></div><div class="Footer__CommentWrapper-sc-zqxmks-7 cRSPGb"><hr class="Divider-sc-1jz0jl-0 dsTUYW"/><div class="Footer__SpinnerWrapper-sc-zqxmks-8 XZnrl"><span style="display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;font-size:0;animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite;-webkit-animation:__react-md-spinner-animation__root-rotate 1568.235294117647ms linear infinite"><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-1-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-2-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-3-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span><span style="box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;border-color:#404040;white-space:nowrap;opacity:1;animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;-webkit-animation-name:__react-md-spinner-animation__fill-unfill-rotate, __react-md-spinner-animation__layer-4-fade-in-out;animation-duration:5332ms;-webkit-animation-duration:5332ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite"><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:0;transform:rotate(129deg);-webkit-transform:rotate(129deg);animation-name:__react-md-spinner-animation__left-spin;-webkit-animation-name:__react-md-spinner-animation__left-spin;border-color:#404040 transparent transparent #404040"></span></span><span style="display:inline-block;box-sizing:border-box;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit"><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;bottom:0;width:200%;border-width:3px;border-style:solid;animation-duration:1333ms;-webkit-animation-duration:1333ms;animation-timing-function:cubic-bezier(.4, 0, .2, 1);-webkit-animation-timing-function:cubic-bezier(.4, 0, .2, 1);animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;left:-100%;transform:rotate(-129deg);-webkit-transform:rotate(-129deg);animation-name:__react-md-spinner-animation__right-spin;-webkit-animation-name:__react-md-spinner-animation__right-spin;border-color:#404040 #404040 transparent transparent"></span></span><span style="display:inline-block;box-sizing:border-box;position:absolute;top:0;border-radius:50%;left:45%;width:10%;border-width:3px;border-color:inherit;border-top-style:solid"></span></span></span></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div class="Footer__HiddenWrapper-sc-zqxmks-9 yzdKT"><div></div></div><div class="Footer__HiddenWrapper-sc-zqxmks-9 ivqWaF"><div></div></div></div></div></article></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/pium-deploy-step/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
           <script
             id="gatsby-chunk-mapping"
           >
diff --git a/restdocs-start/index.html b/restdocs-start/index.html
index 578ced3a..56f1dbe6 100644
--- a/restdocs-start/index.html
+++ b/restdocs-start/index.html
@@ -258,16 +258,14 @@ <h2>사건의 발단</h2>
 <h2>서론</h2>
 <p>API 문서화 방식에 대해 찾아본 결과 크게 두가지 방법을 알 수 있었다.</p>
 <h3>알아보기</h3>
-<ol>
-<li>Spring RestDocs</li>
-</ol>
+<p><code class="language-text">1. Spring RestDocs</code></p>
 <p>Spring Rest Docs는 Spring에서 제공하는 문서화 도구다.</p>
 <ul>
 <li>테스트 작성이 강제된다는 특징이 있다.</li>
 <li>테스트를 통해 도출된 결과를 문서로 작성하기 프로덕션 코드에 영향이 없다는 특징이 있다.</li>
 <li>아래 설명할 Swagger와 비교했을 때 설정이 약간 번거롭다는 단점이 있다. </li>
-<li>Swagger</li>
 </ul>
+<p><code class="language-text">2. Swagger</code> </p>
 <p>Swagger는 API 문서화를 돕는 오픈소스 툴이다.</p>
 <ul>
 <li>테스트 작성이 필수가 아니라는 특징이 있다.</li>
diff --git a/rss.xml b/rss.xml
index a8156a6a..b891b05b 100644
--- a/rss.xml
+++ b/rss.xml
@@ -1,4 +1,4 @@
-<?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[RSS Feed of pium.log]]></title><description><![CDATA[우아한테크코스 5기 피움팀 기술 블로그입니다.]]></description><link>https://pium-official.github.io</link><generator>GatsbyJS</generator><lastBuildDate>Thu, 10 Aug 2023 14:28:13 GMT</lastBuildDate><item><title><![CDATA[RestDocs로 API 문서화하기]]></title><description><![CDATA[이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 사건의 발단  3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.  그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다. 당황하지 않고 침착하게 f1…]]></description><link>https://pium-official.github.io/restdocs-start/</link><guid isPermaLink="false">https://pium-official.github.io/restdocs-start/</guid><pubDate>Fri, 11 Aug 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
+<?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[RSS Feed of pium.log]]></title><description><![CDATA[우아한테크코스 5기 피움팀 기술 블로그입니다.]]></description><link>https://pium-official.github.io</link><generator>GatsbyJS</generator><lastBuildDate>Thu, 10 Aug 2023 14:31:52 GMT</lastBuildDate><item><title><![CDATA[RestDocs로 API 문서화하기]]></title><description><![CDATA[이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 사건의 발단  3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.  그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다. 당황하지 않고 침착하게 f1…]]></description><link>https://pium-official.github.io/restdocs-start/</link><guid isPermaLink="false">https://pium-official.github.io/restdocs-start/</guid><pubDate>Fri, 11 Aug 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
 &lt;p&gt;이 글은 우테코 피움팀 크루 &apos;&lt;a href=&quot;https://github.com/Choi-JJunho&quot;&gt;주노&lt;/a&gt;&apos;가 작성했습니다.&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;h2&gt;사건의 발단&lt;/h2&gt;
@@ -39,16 +39,14 @@
 &lt;h2&gt;서론&lt;/h2&gt;
 &lt;p&gt;API 문서화 방식에 대해 찾아본 결과 크게 두가지 방법을 알 수 있었다.&lt;/p&gt;
 &lt;h3&gt;알아보기&lt;/h3&gt;
-&lt;ol&gt;
-&lt;li&gt;Spring RestDocs&lt;/li&gt;
-&lt;/ol&gt;
+&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;1. Spring RestDocs&lt;/code&gt;&lt;/p&gt;
 &lt;p&gt;Spring Rest Docs는 Spring에서 제공하는 문서화 도구다.&lt;/p&gt;
 &lt;ul&gt;
 &lt;li&gt;테스트 작성이 강제된다는 특징이 있다.&lt;/li&gt;
 &lt;li&gt;테스트를 통해 도출된 결과를 문서로 작성하기 프로덕션 코드에 영향이 없다는 특징이 있다.&lt;/li&gt;
 &lt;li&gt;아래 설명할 Swagger와 비교했을 때 설정이 약간 번거롭다는 단점이 있다. &lt;/li&gt;
-&lt;li&gt;Swagger&lt;/li&gt;
 &lt;/ul&gt;
+&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;2. Swagger&lt;/code&gt; &lt;/p&gt;
 &lt;p&gt;Swagger는 API 문서화를 돕는 오픈소스 툴이다.&lt;/p&gt;
 &lt;ul&gt;
 &lt;li&gt;테스트 작성이 필수가 아니라는 특징이 있다.&lt;/li&gt;
@@ -1441,7 +1439,39 @@ select 쿼리가 잘못된게 아닌가? 확인해봤지만 예상한대로 나
 이제는 스레드 B에서도 동일한 데이터를 확인할 수 있다.&lt;/p&gt;
 &lt;h2&gt;결론&lt;/h2&gt;
 &lt;p&gt;결국 메소드 레벨에 &lt;code class=&quot;language-text&quot;&gt;@Transactional&lt;/code&gt; 어노테이션이 붙은 탓에 save 메소드를 성공적으로 수행해도, 트랜잭션이 끝나지 않아(정확히 말하면 커밋되지 않아) 랜덤 포트 서버의 스레드에서 확인할 수 없는 것이다.
-따라서 랜덤 포트 환경의 격리성을 보장하고자 할 때는 &lt;code class=&quot;language-text&quot;&gt;@Transactional&lt;/code&gt; 어노테이션을 사용하기 보다는, truncate를 하는 sql 스크립트를 사용하는 방법을 고려하는게 더 적절하다고 생각한다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[내 서버에 HTTPS 설정하기]]></title><description><![CDATA[이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 현재 피움팀 서버는  요청으로 이뤄져있다.
+따라서 랜덤 포트 환경의 격리성을 보장하고자 할 때는 &lt;code class=&quot;language-text&quot;&gt;@Transactional&lt;/code&gt; 어노테이션을 사용하기 보다는, truncate를 하는 sql 스크립트를 사용하는 방법을 고려하는게 더 적절하다고 생각한다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[bundle-analyze를 통한 bundle 크기 분석]]></title><description><![CDATA[이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. 사건의 발단 이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약…]]></description><link>https://pium-official.github.io/bundle-analyze/</link><guid isPermaLink="false">https://pium-official.github.io/bundle-analyze/</guid><pubDate>Fri, 28 Jul 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
+&lt;p&gt;이 글은 우테코 피움팀 크루 &apos;&lt;a href=&quot;https://github.com/hozzijeong&quot;&gt;클린&lt;/a&gt;&apos;가 작성했습니다.&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;h2&gt;사건의 발단&lt;/h2&gt;
+&lt;p&gt;이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국 &lt;code class=&quot;language-text&quot;&gt;bundle.js&lt;/code&gt; 파일의 크기를 보니 무려 16m나 되었던 것입니다.&lt;/p&gt;
+&lt;p&gt;&lt;img src=&quot;https://github.com/pium-official/pium-official.github.io/assets/50974359/72ec258f-77e0-41aa-8bcd-c4c3d3b0410e&quot; alt=&quot;image&quot;&gt;&lt;/p&gt;
+&lt;p&gt;왜 이렇게 크기가 크지? 라는 생각을 하며 크게 2가지의 경우를 생찾아봤습니다. 하지만 다음과 같은 이유로 원인이 아님을 알았습니다.&lt;/p&gt;
+&lt;ol&gt;
+&lt;li&gt;minify가 되지 않았다 → webpack 4 이상을 사용하면서 자동으로 &lt;code class=&quot;language-text&quot;&gt;production&lt;/code&gt; 일때는 자동으로 설정&lt;/li&gt;
+&lt;li&gt;css 파일 크기가 너무 큼 → &lt;code class=&quot;language-text&quot;&gt;styled-component&lt;/code&gt;를 사용하기 때문에 .css 가 없음.&lt;/li&gt;
+&lt;/ol&gt;
+&lt;p&gt;따라서 &lt;code class=&quot;language-text&quot;&gt;bundle.js&lt;/code&gt;의 성능을 확인해 볼 필요가 있었고 검색하던 도중 &lt;a href=&quot;https://www.npmjs.com/package/webpack-bundle-analyzer&quot;&gt;webpack-bundle-analyzer&lt;/a&gt;라는 라이브러리를 알게되었습니다.&lt;/p&gt;
+&lt;h2&gt;Webpack Bundle Analyzer&lt;/h2&gt;
+&lt;p&gt;webpack을 통해 build한 bundle의 성능을 측정하는 라이브러리로 모든 번들에 대한 트리를 시각화 해서 보여주는 이점을 갖고 있습니다. 사용법은 매우 간단합니다. 우선 설치를 해줍니다.&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;# &lt;span class=&quot;token constant&quot;&gt;NPM&lt;/span&gt;
+npm install &lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;save&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;dev webpack&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;bundle&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;analyzer
+# Yarn
+yarn add &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;D&lt;/span&gt; webpack&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;bundle&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;analyzer&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
+&lt;p&gt;설치를 한 뒤 &lt;code class=&quot;language-text&quot;&gt;webpack.config.js&lt;/code&gt; 파일 내부에서 플러그인을 사용해 줍니다.&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;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; BundleAnalyzerPlugin &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;webpack-bundle-analyzer&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;BundleAnalyzerPlugin&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+
+module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;exports &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 literal-property property&quot;&gt;plugins&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 keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;BundleAnalyzerPlugin&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;a href=&quot;https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin&quot;&gt;여기&lt;/a&gt;에서 옵션에 대한 정보를 확인할 수 있습니다.&lt;/p&gt;
+&lt;p&gt;위에 플러그인 옵션에서 &lt;code class=&quot;language-text&quot;&gt;generateStatsFile&lt;/code&gt; 을 &lt;code class=&quot;language-text&quot;&gt;true&lt;/code&gt; 로 설정한 다음에 &lt;code class=&quot;language-text&quot;&gt;package.json&lt;/code&gt;에 &lt;code class=&quot;language-text&quot;&gt;scripts&lt;/code&gt; 에다음 명령어를 통해 실행할 수 있습니다.&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;&lt;span class=&quot;token literal-property property&quot;&gt;analyze&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; webpack&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;bundle&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;analyzer bundle&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;output&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;path&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;stats&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;json&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
+&lt;p&gt;&lt;img src=&quot;https://github.com/pium-official/pium-official.github.io/assets/50974359/6bc524c4-4866-4ebe-9daa-95035e0c0dd5&quot; alt=&quot;image&quot;&gt;&lt;/p&gt;
+&lt;p&gt;실행한 뒤에 bundle을 분석해 봤더니 react-icons에서 15.3m나 차지하고 있었습니다. 드디어 문제의 원흉을 찾아냈습니다. 그렇다면 react-icons를 대체할 수 있는 방법이 있을까요?&lt;/p&gt;
+&lt;h3&gt;Icons&lt;/h3&gt;
+&lt;p&gt;&lt;a href=&quot;https://icones.js.org/collection/all?s=material-symbols:cancel&quot;&gt;여기&lt;/a&gt;에 가시면 다양한 아이콘들을 찾아볼 수 있습니다. 원하는 아이콘을 선택한 다음에 SVG, Component 등으로 코드를 반환해 줍니다. 이를 통해서 react-icons를 제거하고 icons를 사용해서 아이콘을 대체할 수 있었습니다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[내 서버에 HTTPS 설정하기]]></title><description><![CDATA[이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 현재 피움팀 서버는  요청으로 이뤄져있다.
 는 WWW…]]></description><link>https://pium-official.github.io/apply-https/</link><guid isPermaLink="false">https://pium-official.github.io/apply-https/</guid><pubDate>Fri, 28 Jul 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
 &lt;p&gt;이 글은 우테코 피움팀 크루 &apos;&lt;a href=&quot;https://github.com/Choi-JJunho&quot;&gt;주노&lt;/a&gt;&apos;, &apos;&lt;a href=&quot;https://github.com/kim0914&quot;&gt;그레이&lt;/a&gt;&apos;, &apos;&lt;a href=&quot;https://github.com/yeonkkk&quot;&gt;조이&lt;/a&gt;&apos;, &apos;&lt;a href=&quot;https://github.com/rawfishthelgh&quot;&gt;하마드&lt;/a&gt;&apos;가 작성했습니다.&lt;/p&gt;
 &lt;/blockquote&gt;
@@ -1526,39 +1556,7 @@ select 쿼리가 잘못된게 아닌가? 확인해봤지만 예상한대로 나
   &lt;/a&gt;
     &lt;/span&gt;&lt;/p&gt;
 &lt;h2&gt;Reference&lt;/h2&gt;
-&lt;p&gt;&lt;a href=&quot;https://certbot.eff.org/instructions&quot;&gt;https://certbot.eff.org/instructions&lt;/a&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[bundle-analyze를 통한 bundle 크기 분석]]></title><description><![CDATA[이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. 사건의 발단 이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약…]]></description><link>https://pium-official.github.io/bundle-analyze/</link><guid isPermaLink="false">https://pium-official.github.io/bundle-analyze/</guid><pubDate>Fri, 28 Jul 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
-&lt;p&gt;이 글은 우테코 피움팀 크루 &apos;&lt;a href=&quot;https://github.com/hozzijeong&quot;&gt;클린&lt;/a&gt;&apos;가 작성했습니다.&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;h2&gt;사건의 발단&lt;/h2&gt;
-&lt;p&gt;이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국 &lt;code class=&quot;language-text&quot;&gt;bundle.js&lt;/code&gt; 파일의 크기를 보니 무려 16m나 되었던 것입니다.&lt;/p&gt;
-&lt;p&gt;&lt;img src=&quot;https://github.com/pium-official/pium-official.github.io/assets/50974359/72ec258f-77e0-41aa-8bcd-c4c3d3b0410e&quot; alt=&quot;image&quot;&gt;&lt;/p&gt;
-&lt;p&gt;왜 이렇게 크기가 크지? 라는 생각을 하며 크게 2가지의 경우를 생찾아봤습니다. 하지만 다음과 같은 이유로 원인이 아님을 알았습니다.&lt;/p&gt;
-&lt;ol&gt;
-&lt;li&gt;minify가 되지 않았다 → webpack 4 이상을 사용하면서 자동으로 &lt;code class=&quot;language-text&quot;&gt;production&lt;/code&gt; 일때는 자동으로 설정&lt;/li&gt;
-&lt;li&gt;css 파일 크기가 너무 큼 → &lt;code class=&quot;language-text&quot;&gt;styled-component&lt;/code&gt;를 사용하기 때문에 .css 가 없음.&lt;/li&gt;
-&lt;/ol&gt;
-&lt;p&gt;따라서 &lt;code class=&quot;language-text&quot;&gt;bundle.js&lt;/code&gt;의 성능을 확인해 볼 필요가 있었고 검색하던 도중 &lt;a href=&quot;https://www.npmjs.com/package/webpack-bundle-analyzer&quot;&gt;webpack-bundle-analyzer&lt;/a&gt;라는 라이브러리를 알게되었습니다.&lt;/p&gt;
-&lt;h2&gt;Webpack Bundle Analyzer&lt;/h2&gt;
-&lt;p&gt;webpack을 통해 build한 bundle의 성능을 측정하는 라이브러리로 모든 번들에 대한 트리를 시각화 해서 보여주는 이점을 갖고 있습니다. 사용법은 매우 간단합니다. 우선 설치를 해줍니다.&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;# &lt;span class=&quot;token constant&quot;&gt;NPM&lt;/span&gt;
-npm install &lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;save&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;dev webpack&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;bundle&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;analyzer
-# Yarn
-yarn add &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;D&lt;/span&gt; webpack&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;bundle&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;analyzer&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
-&lt;p&gt;설치를 한 뒤 &lt;code class=&quot;language-text&quot;&gt;webpack.config.js&lt;/code&gt; 파일 내부에서 플러그인을 사용해 줍니다.&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;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; BundleAnalyzerPlugin &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;webpack-bundle-analyzer&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;BundleAnalyzerPlugin&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-
-module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;exports &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 literal-property property&quot;&gt;plugins&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 keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;BundleAnalyzerPlugin&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;a href=&quot;https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin&quot;&gt;여기&lt;/a&gt;에서 옵션에 대한 정보를 확인할 수 있습니다.&lt;/p&gt;
-&lt;p&gt;위에 플러그인 옵션에서 &lt;code class=&quot;language-text&quot;&gt;generateStatsFile&lt;/code&gt; 을 &lt;code class=&quot;language-text&quot;&gt;true&lt;/code&gt; 로 설정한 다음에 &lt;code class=&quot;language-text&quot;&gt;package.json&lt;/code&gt;에 &lt;code class=&quot;language-text&quot;&gt;scripts&lt;/code&gt; 에다음 명령어를 통해 실행할 수 있습니다.&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;&lt;span class=&quot;token literal-property property&quot;&gt;analyze&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; webpack&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;bundle&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;analyzer bundle&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;output&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;path&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;stats&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;json&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
-&lt;p&gt;&lt;img src=&quot;https://github.com/pium-official/pium-official.github.io/assets/50974359/6bc524c4-4866-4ebe-9daa-95035e0c0dd5&quot; alt=&quot;image&quot;&gt;&lt;/p&gt;
-&lt;p&gt;실행한 뒤에 bundle을 분석해 봤더니 react-icons에서 15.3m나 차지하고 있었습니다. 드디어 문제의 원흉을 찾아냈습니다. 그렇다면 react-icons를 대체할 수 있는 방법이 있을까요?&lt;/p&gt;
-&lt;h3&gt;Icons&lt;/h3&gt;
-&lt;p&gt;&lt;a href=&quot;https://icones.js.org/collection/all?s=material-symbols:cancel&quot;&gt;여기&lt;/a&gt;에 가시면 다양한 아이콘들을 찾아볼 수 있습니다. 원하는 아이콘을 선택한 다음에 SVG, Component 등으로 코드를 반환해 줍니다. 이를 통해서 react-icons를 제거하고 icons를 사용해서 아이콘을 대체할 수 있었습니다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Table Drop 못하게 막아버리기]]></title><description><![CDATA[이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 본 설명 글은 다음과 같은 환경에서 진행됩니다. 배포서버 : Ubuntu 22.04.2 LTS DB서버 : Ubuntu 22.04.2 LTS 배포서버와 DB…]]></description><link>https://pium-official.github.io/db-drop-stop/</link><guid isPermaLink="false">https://pium-official.github.io/db-drop-stop/</guid><pubDate>Fri, 28 Jul 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
+&lt;p&gt;&lt;a href=&quot;https://certbot.eff.org/instructions&quot;&gt;https://certbot.eff.org/instructions&lt;/a&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Table Drop 못하게 막아버리기]]></title><description><![CDATA[이 글은 우테코 피움팀 크루 '주노', '그레이', '조이', '하마드'가 작성했습니다. 서론 본 설명 글은 다음과 같은 환경에서 진행됩니다. 배포서버 : Ubuntu 22.04.2 LTS DB서버 : Ubuntu 22.04.2 LTS 배포서버와 DB…]]></description><link>https://pium-official.github.io/db-drop-stop/</link><guid isPermaLink="false">https://pium-official.github.io/db-drop-stop/</guid><pubDate>Fri, 28 Jul 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
 &lt;p&gt;이 글은 우테코 피움팀 크루 &apos;&lt;a href=&quot;https://github.com/Choi-JJunho&quot;&gt;주노&lt;/a&gt;&apos;, &apos;&lt;a href=&quot;https://github.com/kim0914&quot;&gt;그레이&lt;/a&gt;&apos;, &apos;&lt;a href=&quot;https://github.com/yeonkkk&quot;&gt;조이&lt;/a&gt;&apos;, &apos;&lt;a href=&quot;https://github.com/rawfishthelgh&quot;&gt;하마드&lt;/a&gt;&apos;가 작성했습니다.&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;h2&gt;서론&lt;/h2&gt;
@@ -2800,165 +2798,7 @@ server &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
 &lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; systemctl restart nginx&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
 &lt;h2&gt;Reference&lt;/h2&gt;
 &lt;p&gt;&lt;a href=&quot;https://jminie.tistory.com/110&quot;&gt;https://jminie.tistory.com/110&lt;/a&gt;&lt;/p&gt;
-&lt;p&gt;&lt;a href=&quot;https://customer.gabia.com/manual/domain/287/1201&quot;&gt;https://customer.gabia.com/manual/domain/287/1201&lt;/a&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[젠킨스 설치하기]]></title><description><![CDATA[이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다. 정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.
-이에 Jenkins…]]></description><link>https://pium-official.github.io/jenkins-setting/</link><guid isPermaLink="false">https://pium-official.github.io/jenkins-setting/</guid><pubDate>Sun, 16 Jul 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
-&lt;p&gt;이 글은 우테코 피움팀 크루 &apos;&lt;a href=&quot;https://github.com/Choi-JJunho&quot;&gt;주노&lt;/a&gt;&apos;가 작성했습니다.&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;h2&gt;서론&lt;/h2&gt;
-&lt;p&gt;피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다.&lt;/p&gt;
-&lt;p&gt;정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.
-이에 Jenkins를 설치하고 환경설정을 빌드서버 환경을 구축한 일련의 과정을 기록해두려고한다.&lt;/p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;작업 환경 : Ubuntu 22.04.2 LTS&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;h2&gt;공식문서 살펴보기&lt;/h2&gt;
-&lt;p&gt;&lt;a href=&quot;https://www.jenkins.io/doc/book/installing/linux/&quot;&gt;젠킨스 공식문서&lt;/a&gt;를 확인하면 설치 방법이 친절하게 나와있다.&lt;/p&gt;
-&lt;p&gt;아무것도 없는 EC2 환경에서 Jenkins를 설치하고 구동하는 과정을 따라가보자.&lt;/p&gt;
-&lt;h2&gt;(Optional) Swap 메모리 설정하기&lt;/h2&gt;
-&lt;p&gt;프리티어환경에서 Jenkins를 사용하면 자칫 메모리가 부족한 상황이 발생할 수도 있다.
-2GB의 메모리는 젠킨스와 빌드를 모두 견디기 어려울 수도 있다.&lt;/p&gt;
-&lt;p&gt;다음 명령어를 통해 서버에 Swap 메모리를 할당하자.&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;&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; fallocate &lt;span class=&quot;token parameter variable&quot;&gt;-l&lt;/span&gt; 2G /swapfile
-&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;chmod&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;600&lt;/span&gt; /swapfile
-&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;mkswap&lt;/span&gt; /swapfile
-&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;swapon&lt;/span&gt; /swapfile
-
-&lt;span class=&quot;token function&quot;&gt;free&lt;/span&gt; &lt;span class=&quot;token parameter variable&quot;&gt;-h&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;# 확인명령어&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
-&lt;blockquote&gt;
-&lt;p&gt;&lt;a href=&quot;https://velog.io/@junho5336/Swap-%EB%A9%94%EB%AA%A8%EB%A6%AC-%ED%95%A0%EB%8B%B9%ED%95%98%EA%B8%B0&quot;&gt;Swap 메모리 할당하기&lt;/a&gt;를 참고&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;h2&gt;java 설치하기&lt;/h2&gt;
-&lt;blockquote&gt;
-&lt;p&gt;설치 방법은 &lt;a href=&quot;https://www.jenkins.io/doc/book/installing/linux/&quot;&gt;공식문서&lt;/a&gt;를 확인하면서 진행하고있습니다.&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;현재 사용할 jenkins의 버전은 java 17을 사용한다.
-java 17버전을 설치하자&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;&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;apt&lt;/span&gt; update
-&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;apt&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;install&lt;/span&gt; openjdk-17-jre
-&lt;span class=&quot;token function&quot;&gt;java&lt;/span&gt; &lt;span class=&quot;token parameter variable&quot;&gt;-version&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
-&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
-      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/d0e1b4065d85f4f0f9e8e290576873b8/49bb6/93d56503.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
-    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 10.588235294117647%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAdElEQVR42mXNwQ6CMBRE0RIIW16j1LRpBfqoYP3/77tqF25cnGQyixnjHo75OXPdLshdkEW4RU/elJQSIQTGcWQYhj9932OM+em6DlOPF/WonOVkTSu6KJoz+74TY8Q510ZVlfzpSyktf8+891hrEZFmmibeU5cx4lWIWHEAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
-  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;93d56503&apos; title=&apos;&apos; src=&apos;/static/d0e1b4065d85f4f0f9e8e290576873b8/ca1dc/93d56503.png&apos; srcset=&apos;/static/d0e1b4065d85f4f0f9e8e290576873b8/e7570/93d56503.png 170w,
-/static/d0e1b4065d85f4f0f9e8e290576873b8/f46e7/93d56503.png 340w,
-/static/d0e1b4065d85f4f0f9e8e290576873b8/ca1dc/93d56503.png 680w,
-/static/d0e1b4065d85f4f0f9e8e290576873b8/49bb6/93d56503.png 775w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
-  &lt;/a&gt;
-    &lt;/span&gt;&lt;/p&gt;
-&lt;h2&gt;jenkins 설치하기&lt;/h2&gt;
-&lt;p&gt;다음 명령어를 수행하여 jenkins를 설치한다.&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;&lt;span class=&quot;token function&quot;&gt;curl&lt;/span&gt; &lt;span class=&quot;token parameter variable&quot;&gt;-fsSL&lt;/span&gt; https://pkg.jenkins.io/debian-stable/jenkins.io-2023.key &lt;span class=&quot;token operator&quot;&gt;|&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;tee&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;\&lt;/span&gt;
-  /usr/share/keyrings/jenkins-keyring.asc &lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt; /dev/null
-&lt;span class=&quot;token builtin class-name&quot;&gt;echo&lt;/span&gt; deb &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;signed-by&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;/usr/share/keyrings/jenkins-keyring.asc&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;\&lt;/span&gt;
-  https://pkg.jenkins.io/debian-stable binary/ &lt;span class=&quot;token operator&quot;&gt;|&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;tee&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;\&lt;/span&gt;
-  /etc/apt/sources.list.d/jenkins.list &lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt; /dev/null
-&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;apt-get&lt;/span&gt; update
-&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;apt-get&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;install&lt;/span&gt; jenkins
-
-&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; systemctl status jenkins &lt;span class=&quot;token comment&quot;&gt;# 실행상태 확인&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
-&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
-      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/377aacf35597393970adf4d2f550dffe/fcbeb/99b45540.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
-    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 16.470588235294116%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAf0lEQVR42m2OywrFIAxEleIjahdy1YIbBW3//w/n1oC7Lg5DEmYywmeHOipiiyi9oI2OOSfmPTHGQK3vLUbGOYcQAqy1EEJ8Q5bw3M8b1JBqAp0EpRRzHAer1ppDpJRs2vrJMqWc0XvHVS6kX+I2q4kxhtmhRMTs/Z699/xw8Qe0b0Pn0GyF9wAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
-  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;99b45540&apos; title=&apos;&apos; src=&apos;/static/377aacf35597393970adf4d2f550dffe/ca1dc/99b45540.png&apos; srcset=&apos;/static/377aacf35597393970adf4d2f550dffe/e7570/99b45540.png 170w,
-/static/377aacf35597393970adf4d2f550dffe/f46e7/99b45540.png 340w,
-/static/377aacf35597393970adf4d2f550dffe/ca1dc/99b45540.png 680w,
-/static/377aacf35597393970adf4d2f550dffe/02d09/99b45540.png 1020w,
-/static/377aacf35597393970adf4d2f550dffe/fcbeb/99b45540.png 1206w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
-  &lt;/a&gt;
-    &lt;/span&gt;&lt;/p&gt;
-&lt;h2&gt;jenkins 접속하기 &amp;#x26; 초기설정&lt;/h2&gt;
-&lt;blockquote&gt;
-&lt;p&gt;jenkins는 기본적으로 8080포트를 사용한다.
-jenkins의 포트를 변경하는 방법에 대해서는 본 글에서 다루지는 않는다.&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;{인스턴스-public-ip}:8080&lt;/code&gt; 으로 접속하면 다음과 같은 화면을 볼 수 있다.&lt;/p&gt;
-&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
-      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/1a9e2cb6709d5c991de4fa4d0d15199d/f5df9/4492665d.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
-    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 76.47058823529412%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABjklEQVR42qVT7VLCMBDk6X0Xx1fwAQT8Ib+AoQ7IYBXblCYhTT9S1rtAwA9AGDOzXELJdm9v6QyHI8xmL5hOZ5BSoSgKrNdrFKbY77XWZ6HU9t5isUCHP3jxRYYhorKsfOVz0zT4a202G1+TJDkQTiYRug99DJ4GGI/G6HV7dO5hPufnGzjn0Lath3Nc3Zd9eyCM49gfDEleKY2VLiDUGqkyyKgqailnUFt5npNq49Vzi1wZoYtvhKU20EJCZtojF+SNIG9E7mGlRlVV+/ZOthwIraZBrCRsHqB8NRkRMmhgZVl6cPu8WBnvjxKmWYa35RLvHwm0MWjIl5ou1K7xtSKUpLCqazREYq3dDdF45b8Im8b5t50FD4FgSeXWR+vB0fGi0vRAeMybUxHZDoSGs4sa55An/S9CVhVaZl9/tXwJIf+GL0spPVEYyNGhXELIJJzFoOhsbNiD8LZT4JiwXyHI4fuj/5RrPPy5bO3wnBQYTV/RiaLIeyKEQEZZvAZCZFAyx3gW4+auj9v7R3wC/VKL2SHZQ34AAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
-  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;4492665d&apos; title=&apos;&apos; src=&apos;/static/1a9e2cb6709d5c991de4fa4d0d15199d/ca1dc/4492665d.png&apos; srcset=&apos;/static/1a9e2cb6709d5c991de4fa4d0d15199d/e7570/4492665d.png 170w,
-/static/1a9e2cb6709d5c991de4fa4d0d15199d/f46e7/4492665d.png 340w,
-/static/1a9e2cb6709d5c991de4fa4d0d15199d/ca1dc/4492665d.png 680w,
-/static/1a9e2cb6709d5c991de4fa4d0d15199d/f5df9/4492665d.png 1019w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
-  &lt;/a&gt;
-    &lt;/span&gt;&lt;/p&gt;
-&lt;p&gt;다시 EC2 화면으로 넘어와서 다음 명령어를 수행하여 &lt;code class=&quot;language-text&quot;&gt;initialAdminPassword&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;&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;cat&lt;/span&gt; /var/lib/jenkins/secrets/initialAdminPassword&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
-&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
-      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/1bfdaa00e299a618f4e0d6f9a35b40f4/e42f2/f55b94c9.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
-    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 5.294117647058823%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAARElEQVR42h2KOwrAMAzFegN/Y5OlS4OTqfe/3WvxIBBCF92EfBN5flbAlmE+E7sOqgrMDCKCqsLdYWbtItJ9jNFERL8f97MZQConaOsAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
-  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;f55b94c9&apos; title=&apos;&apos; src=&apos;/static/1bfdaa00e299a618f4e0d6f9a35b40f4/ca1dc/f55b94c9.png&apos; srcset=&apos;/static/1bfdaa00e299a618f4e0d6f9a35b40f4/e7570/f55b94c9.png 170w,
-/static/1bfdaa00e299a618f4e0d6f9a35b40f4/f46e7/f55b94c9.png 340w,
-/static/1bfdaa00e299a618f4e0d6f9a35b40f4/ca1dc/f55b94c9.png 680w,
-/static/1bfdaa00e299a618f4e0d6f9a35b40f4/e42f2/f55b94c9.png 734w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
-  &lt;/a&gt;
-    &lt;/span&gt;&lt;/p&gt;
-&lt;p&gt;확인한 암호를 화면에 입력한 뒤 Continue 버튼을 눌러 계속 진행한다.&lt;/p&gt;
-&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
-      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/34da90f6397f6f2e2761f50b1c127250/583a7/28fea7e9.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
-    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 76.47058823529412%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABpElEQVR42p1T7U7jMBDsq9/LIPEM9x+O4yh/oZxU2gM1JDTxR+wkTtthZ1FaQG2BW2lkx94dz35kNJlMMJ3eYzaboa5rNE2DEAJijLqPMej5MXjv1XexWGCUZRk2m41cBL0IIaJtOwQh9L5G3/f4zBhPK8tyIATuJn9x8es3rsfXuL25xdWfMc7PLjCf/VNnEm/Wa6w/YLVa6bolzPNcP6jIOI/SR5QuYCmoBFZUK5yDMVYzYTmGsnBNqd8RFkWhH42TWiwNzFKCSw8jcKVDlLMgaIxD6tJWzcGU3xLGyqKpGMzVKkksjZJG2XddJ8VvNc2hDHxgL2HxvMQie0KWF6ilMUmCmErqdyAh0csdu8oOM+VOlNOq6g1hK46tOLVtq13m61TyDmyCoBEf1i9yrAScBqqsqmpHOMj+zJji0AyCKp00jA/+FyH9os6o35Iy/deUv0lIH5aEikiksylne5vyFUIqs9Yq6cGxGQZ7aP8xpJRUHdeBiHj3p3y3hvss9Ws8mg7Thxyj+Xyu9WAqfP0YPvpYK4Mfakwfc/w4vcTJzzFeAINXjf7ZXI+HAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
-  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;28fea7e9&apos; title=&apos;&apos; src=&apos;/static/34da90f6397f6f2e2761f50b1c127250/ca1dc/28fea7e9.png&apos; srcset=&apos;/static/34da90f6397f6f2e2761f50b1c127250/e7570/28fea7e9.png 170w,
-/static/34da90f6397f6f2e2761f50b1c127250/f46e7/28fea7e9.png 340w,
-/static/34da90f6397f6f2e2761f50b1c127250/ca1dc/28fea7e9.png 680w,
-/static/34da90f6397f6f2e2761f50b1c127250/583a7/28fea7e9.png 1013w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
-  &lt;/a&gt;
-    &lt;/span&gt;&lt;/p&gt;
-&lt;p&gt;초기 플러그인 세팅 화면이 나오는데 &lt;code class=&quot;language-text&quot;&gt;Install suggested plugins&lt;/code&gt; 를 눌러 초기 플러그인 설정을 진행한다. &lt;/p&gt;
-&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
-      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/6be6be95dbd2b5d099883b8b0c45d285/d8785/c78a9517.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
-    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 75.88235294117648%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABzUlEQVR42p1UiW6bQBT0/39SPyCRq9RxrMolji9ALAHMfS6Hp++9GIvUaatkpdGwCzs771hmhmFgt9sLwjBEksSI488hiiLal2C73WLmeR66rkdZlsQd2rYT7vte0Lat8L/G+XwWdhwHM9/3MQwDDGOD+fwB9/ffhde/nrFYLHF3Nyd+gtatbORvmafgtatgEAQyqasKNbmsqzdU9JxnGYqiEPd13VxQ01p5WatvHZ5OJ5mouMYhKGCFJfZ+DjdtEBQdorIT0TTNKE8p8ryQFHFqRmcfCq7sGN9WeyytAD9VBJVrRPqM16zDZrPBer2G67pSAMmt5Lu9hn0VDEmQp7tTiWNUwkpqqEzDJnaIraiSCmaX8PM8J7eprDHzGgvfCK6cGD8sHw+mj4Ud0HOAlRvjxctg2zZMy3zj4xGKNopbahk+iIUlbUpNQnYSLFWMJ5Vc8UiHPLsJAuoELh7D8z0Se4WjXBHi4rDojWDV9ig09eMEPNfdIDnrLn3JPZpluYTM4XPIY7XfFWVM7P+G1locVdRmfMBNUUbBgV+w8B+YDg6Pw2ya5u835TMO2R0Ljldxelu+HPJH370TNE2L/hjJtWJfAReG3R8OB/wGHbWCEuKtdfAAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
-  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;c78a9517&apos; title=&apos;&apos; src=&apos;/static/6be6be95dbd2b5d099883b8b0c45d285/ca1dc/c78a9517.png&apos; srcset=&apos;/static/6be6be95dbd2b5d099883b8b0c45d285/e7570/c78a9517.png 170w,
-/static/6be6be95dbd2b5d099883b8b0c45d285/f46e7/c78a9517.png 340w,
-/static/6be6be95dbd2b5d099883b8b0c45d285/ca1dc/c78a9517.png 680w,
-/static/6be6be95dbd2b5d099883b8b0c45d285/02d09/c78a9517.png 1020w,
-/static/6be6be95dbd2b5d099883b8b0c45d285/d8785/c78a9517.png 1021w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
-  &lt;/a&gt;
-    &lt;/span&gt;&lt;/p&gt;
-&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
-      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/c5ec863604bfad00adc41e0bcd9ca6fd/9b7e9/82bae04f.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
-    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 76.47058823529412%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABwElEQVR42pWUWW+bQBSF+f8/qw9J5FRK89ImYrFZhp3BgPGKfTrnIlBsJY2LdDQznjvfXWXL85ZYLldYrXx0XYfNZnOlvu+/Fe12ux2UUrDW6zWGYcD5fMblcpk1fdzz7vb+VvyKohiBF2PcmLWsKjRNC61rUV3X2G638mAg8Asonc3ArmtxND/8eHjGYvFT9Pi4wNMT9YwgCMV4yuIz8W4G9ib/wUTc9Kc5RWYwpXEbybfAV+cVbuogrH2oWiHLMoRhhNY0iCn7fiDF1rqSc5pmxiY3pWnkzJVNORwOY1N+O3/w5r3DizwkZYI4SQXIGpZliSiKkOe5OCpLQtfSUUIIY40pAuM4hmXbDmKVoMgL6ErLg6Io59VxHDNSK+MkFCeVaVxl7DguhOz3e3FwOp2QJAks13WR5hmKskClR2OlYolAa42Xl19wXU+M6YSRMu227QT2OTBNJS0WlaOTm2jbtpVogiAQCMUaUSwDH38BdCR31o2GSkXzo/F8vb8D6MqGUGp69PF8e/dPoG3bYsCi3yuWgWCCqKsuE8bij927TxwnziCjI4wNPB6P0gtrmjNCOVf/I/4PUISzib7v4y8mPXFDELhsegAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
-  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;82bae04f&apos; title=&apos;&apos; src=&apos;/static/c5ec863604bfad00adc41e0bcd9ca6fd/ca1dc/82bae04f.png&apos; srcset=&apos;/static/c5ec863604bfad00adc41e0bcd9ca6fd/e7570/82bae04f.png 170w,
-/static/c5ec863604bfad00adc41e0bcd9ca6fd/f46e7/82bae04f.png 340w,
-/static/c5ec863604bfad00adc41e0bcd9ca6fd/ca1dc/82bae04f.png 680w,
-/static/c5ec863604bfad00adc41e0bcd9ca6fd/9b7e9/82bae04f.png 1009w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
-  &lt;/a&gt;
-    &lt;/span&gt;&lt;/p&gt;
-&lt;p&gt;초기 Admin 유저를 생성할 수 있다.&lt;/p&gt;
-&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
-      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/407217b075d5dc4ab36ca58e5b6895fb/bb4c7/a8f14e43.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
-    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 75.88235294117648%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABV0lEQVR42pWT3W6CMBiGufOd7VJ2suwSlp2pi2Yao6A7QMlQERVULD+l9F1b0TQRRL/kSf/fvv3aGpZlYT53YNszBEGAKIpwPB5VqSP76jgcDiCEwHEcGK7rQkaSpMiyDHmeI00zUadlmYHSXLUppeAcN8HLTs/zpOBCNZbLFTqdLnq9HwyHI/T7Q4zHFlqtDkYjE6Y5Qbv9rTbWRfT6er2GsVicBU8nIiYnKMSgnFAUxQ1MwMvxRkF5VLlACrJyMdOEdFFJzthVqNqhSKoUrXJWR4NDBsYeF2NNDqPopK6+Ln9PO6TiuFTsqufvHo05jOPkeoxHue9QPFq566PQJoeExCqHlwnPOCyKy0/RBOWjJnF8zmUDeVlyLi+GVzvkVZ+0JniJjH1M8buKMNummNgujOl0Ct/3lXoYhnfZCzbbAH+eL9hgs9vha2Dj5a2N1/cuPj57+AeZf421Ajk8yQAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
-  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;a8f14e43&apos; title=&apos;&apos; src=&apos;/static/407217b075d5dc4ab36ca58e5b6895fb/ca1dc/a8f14e43.png&apos; srcset=&apos;/static/407217b075d5dc4ab36ca58e5b6895fb/e7570/a8f14e43.png 170w,
-/static/407217b075d5dc4ab36ca58e5b6895fb/f46e7/a8f14e43.png 340w,
-/static/407217b075d5dc4ab36ca58e5b6895fb/ca1dc/a8f14e43.png 680w,
-/static/407217b075d5dc4ab36ca58e5b6895fb/02d09/a8f14e43.png 1020w,
-/static/407217b075d5dc4ab36ca58e5b6895fb/bb4c7/a8f14e43.png 1023w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
-  &lt;/a&gt;
-    &lt;/span&gt;&lt;/p&gt;
-&lt;p&gt;jenkins의 기본 URL을 설정할 수 있다. 기본값을 권장한다. &lt;/p&gt;
-&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
-      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/4035960bbafbca7af5331b1611fac0f0/42a19/84efb2c8.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
-    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 75.88235294117648%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNklEQVR42u2Uy26DMBBF8/Vd9kMqddEv6CpRUJoqUtpUICIBKY+WDYSnbcytx0CiEDZRN13U0tHg8ej6zkh4ZpomXNeD47hI0xRFUSDPcx0Hzvtcf4/JsgxVVSkNB7MgCEGrLEtFBca4goFzpnNUyDnXZxSnVtu2Ovq+j1kYdoKed8BiYWC93mC7fYdl2XhZvarcUu/n8yVse38hMBYMguAsSK7yvDgdUiyVu0y1lB6ppRpSSjRE03RRIQi1v3LYtVVqYaKuaz3TJCESHPs5VSqvYw9dOinIWH0a/iBKCMH1ZYKLbrYDKsf7GnJ+1bIQQrsiBofkYMiNz6iehIiLGUZRNDnoW9a/4O8FpRz+lL/okAmJ3WeKXVjgzVKPA702pEzEcXwT0dc3PvYH3D8auHsw8PS8wg++b41+WLe4nQAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
-  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;84efb2c8&apos; title=&apos;&apos; src=&apos;/static/4035960bbafbca7af5331b1611fac0f0/ca1dc/84efb2c8.png&apos; srcset=&apos;/static/4035960bbafbca7af5331b1611fac0f0/e7570/84efb2c8.png 170w,
-/static/4035960bbafbca7af5331b1611fac0f0/f46e7/84efb2c8.png 340w,
-/static/4035960bbafbca7af5331b1611fac0f0/ca1dc/84efb2c8.png 680w,
-/static/4035960bbafbca7af5331b1611fac0f0/02d09/84efb2c8.png 1020w,
-/static/4035960bbafbca7af5331b1611fac0f0/42a19/84efb2c8.png 1024w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
-  &lt;/a&gt;
-    &lt;/span&gt;&lt;/p&gt;
-&lt;p&gt;여기까지 했으면 초기 설정은 완료했다고 볼 수 있다.&lt;/p&gt;
-&lt;p&gt;만약 위 과정에서 admin 유저를 생성하지 않았다면 &lt;code class=&quot;language-text&quot;&gt;admin&lt;/code&gt; 이라는 기본 유저로 로그인 할 수 있다고 설명하고 있다.
-비밀번호는 &lt;code class=&quot;language-text&quot;&gt;initialAdminPassword&lt;/code&gt; 과정에서 입력했던 값으로 설정되어있다.&lt;/p&gt;
-&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
-      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/f1396e60734e9dddb0c6a43f0652fc07/0d97d/60ba97ad.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
-    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 77.05882352941177%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABXklEQVR42u2Uy07DMBBF+/8s+QW+gBV71kioQNOmzqNpQiFt3onzqJ3L2G2A0iJUNmwY6WTuWJrrkZ1kNJ/PwZgFy7IRxzGyLDubNE1RFAWCIMBovV5DSqkZou979TyoB07FsJ4kCUZhGOpisfAxHk8wmzE47hIu1RPDhGla4LyF2k+InjJB/Z8RcmcYx2S42US6CDwGZt7DtR7hu1MsXQPm5A4ue0DXJNRZohcFevkFkUPS+vuE6txUiMZHU5io8xl4ZoCnBupsqnNTMrSlpekqG21laZTuKIvm+diwTB3kEZmUDupCNTlkRDq3CEabzDVKqzWeMU1DWrQvx4bblqOtS3RthbquUFUF2oar2ffIPaR7caCl3H4YJsnO8OrWxsX1Ey5vDIQp17c8HPZPcXDLw4R+XMF+LbBY05RbiXPipOF379i/4R8Yep6HKIp0of4YvyHPc/reOVarFd4AhmyNTDDm+BMAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
-  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;60ba97ad&apos; title=&apos;&apos; src=&apos;/static/f1396e60734e9dddb0c6a43f0652fc07/ca1dc/60ba97ad.png&apos; srcset=&apos;/static/f1396e60734e9dddb0c6a43f0652fc07/e7570/60ba97ad.png 170w,
-/static/f1396e60734e9dddb0c6a43f0652fc07/f46e7/60ba97ad.png 340w,
-/static/f1396e60734e9dddb0c6a43f0652fc07/ca1dc/60ba97ad.png 680w,
-/static/f1396e60734e9dddb0c6a43f0652fc07/0d97d/60ba97ad.png 1011w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
-  &lt;/a&gt;
-    &lt;/span&gt;&lt;/p&gt;
-&lt;p&gt;이렇게 Jenkins를 설치할 수 있다.&lt;/p&gt;
-&lt;h2&gt;Reference&lt;/h2&gt;
-&lt;p&gt;&lt;a href=&quot;https://www.jenkins.io/doc/book/installing/linux/&quot;&gt;https://www.jenkins.io/doc/book/installing/linux/&lt;/a&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[@NotNull과 nullable = false는 어떤 차이가 있을까?]]></title><description><![CDATA[이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 서론 JPA를 이용해 엔티티를 설계하다가  어노테이션과 @Column의 의 차이점이 궁금해져 알아보았습니다. nullable = false ?? JPA는 엔티티를 매핑하고 설계하면 자동으로 DDL…]]></description><link>https://pium-official.github.io/jpa-notnull-nullable/</link><guid isPermaLink="false">https://pium-official.github.io/jpa-notnull-nullable/</guid><pubDate>Sun, 16 Jul 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
+&lt;p&gt;&lt;a href=&quot;https://customer.gabia.com/manual/domain/287/1201&quot;&gt;https://customer.gabia.com/manual/domain/287/1201&lt;/a&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[@NotNull과 nullable = false는 어떤 차이가 있을까?]]></title><description><![CDATA[이 글은 우테코 피움팀 크루 '그레이'가 작성했습니다. 서론 JPA를 이용해 엔티티를 설계하다가  어노테이션과 @Column의 의 차이점이 궁금해져 알아보았습니다. nullable = false ?? JPA는 엔티티를 매핑하고 설계하면 자동으로 DDL…]]></description><link>https://pium-official.github.io/jpa-notnull-nullable/</link><guid isPermaLink="false">https://pium-official.github.io/jpa-notnull-nullable/</guid><pubDate>Sun, 16 Jul 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
 &lt;p&gt;이 글은 우테코 피움팀 크루 &apos;&lt;a href=&quot;https://github.com/Kim0914&quot;&gt;그레이&lt;/a&gt;&apos;가 작성했습니다.&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;h2&gt;서론&lt;/h2&gt;
@@ -3158,7 +2998,165 @@ DDL을 자동으로 생성하고 애플리케이션의 영속성 컨텍스트에
 &lt;p&gt;하이버네이트에서는 nullable=false보다 @NotNull 사용을 조금 더 권장하고 있다.&lt;/p&gt;
 &lt;h2&gt;레퍼런스&lt;/h2&gt;
 &lt;p&gt;&lt;a href=&quot;https://www.baeldung.com/hibernate-notnull-vs-nullable&quot;&gt;https://www.baeldung.com/hibernate-notnull-vs-nullable&lt;/a&gt;&lt;/p&gt;
-&lt;p&gt;&lt;a href=&quot;https://kafcamus.tistory.com/15&quot;&gt;https://kafcamus.tistory.com/15&lt;/a&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[피움 블로그 생성과정]]></title><description><![CDATA[…]]></description><link>https://pium-official.github.io/blog-starter/</link><guid isPermaLink="false">https://pium-official.github.io/blog-starter/</guid><pubDate>Sun, 09 Jul 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
+&lt;p&gt;&lt;a href=&quot;https://kafcamus.tistory.com/15&quot;&gt;https://kafcamus.tistory.com/15&lt;/a&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[젠킨스 설치하기]]></title><description><![CDATA[이 글은 우테코 피움팀 크루 '주노'가 작성했습니다. 서론 피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다. 정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.
+이에 Jenkins…]]></description><link>https://pium-official.github.io/jenkins-setting/</link><guid isPermaLink="false">https://pium-official.github.io/jenkins-setting/</guid><pubDate>Sun, 16 Jul 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
+&lt;p&gt;이 글은 우테코 피움팀 크루 &apos;&lt;a href=&quot;https://github.com/Choi-JJunho&quot;&gt;주노&lt;/a&gt;&apos;가 작성했습니다.&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;h2&gt;서론&lt;/h2&gt;
+&lt;p&gt;피움팀에서 Jenkins를 도입하고 적용하는 과정을 거쳤다.&lt;/p&gt;
+&lt;p&gt;정확한 동작과정을 몰랐기 때문에 헤매는 상황이 빈번하게 있었다.
+이에 Jenkins를 설치하고 환경설정을 빌드서버 환경을 구축한 일련의 과정을 기록해두려고한다.&lt;/p&gt;
+&lt;blockquote&gt;
+&lt;p&gt;작업 환경 : Ubuntu 22.04.2 LTS&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;h2&gt;공식문서 살펴보기&lt;/h2&gt;
+&lt;p&gt;&lt;a href=&quot;https://www.jenkins.io/doc/book/installing/linux/&quot;&gt;젠킨스 공식문서&lt;/a&gt;를 확인하면 설치 방법이 친절하게 나와있다.&lt;/p&gt;
+&lt;p&gt;아무것도 없는 EC2 환경에서 Jenkins를 설치하고 구동하는 과정을 따라가보자.&lt;/p&gt;
+&lt;h2&gt;(Optional) Swap 메모리 설정하기&lt;/h2&gt;
+&lt;p&gt;프리티어환경에서 Jenkins를 사용하면 자칫 메모리가 부족한 상황이 발생할 수도 있다.
+2GB의 메모리는 젠킨스와 빌드를 모두 견디기 어려울 수도 있다.&lt;/p&gt;
+&lt;p&gt;다음 명령어를 통해 서버에 Swap 메모리를 할당하자.&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;&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; fallocate &lt;span class=&quot;token parameter variable&quot;&gt;-l&lt;/span&gt; 2G /swapfile
+&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;chmod&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;600&lt;/span&gt; /swapfile
+&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;mkswap&lt;/span&gt; /swapfile
+&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;swapon&lt;/span&gt; /swapfile
+
+&lt;span class=&quot;token function&quot;&gt;free&lt;/span&gt; &lt;span class=&quot;token parameter variable&quot;&gt;-h&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;# 확인명령어&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
+&lt;blockquote&gt;
+&lt;p&gt;&lt;a href=&quot;https://velog.io/@junho5336/Swap-%EB%A9%94%EB%AA%A8%EB%A6%AC-%ED%95%A0%EB%8B%B9%ED%95%98%EA%B8%B0&quot;&gt;Swap 메모리 할당하기&lt;/a&gt;를 참고&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;h2&gt;java 설치하기&lt;/h2&gt;
+&lt;blockquote&gt;
+&lt;p&gt;설치 방법은 &lt;a href=&quot;https://www.jenkins.io/doc/book/installing/linux/&quot;&gt;공식문서&lt;/a&gt;를 확인하면서 진행하고있습니다.&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;현재 사용할 jenkins의 버전은 java 17을 사용한다.
+java 17버전을 설치하자&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;&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;apt&lt;/span&gt; update
+&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;apt&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;install&lt;/span&gt; openjdk-17-jre
+&lt;span class=&quot;token function&quot;&gt;java&lt;/span&gt; &lt;span class=&quot;token parameter variable&quot;&gt;-version&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
+&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
+      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/d0e1b4065d85f4f0f9e8e290576873b8/49bb6/93d56503.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
+    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 10.588235294117647%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAdElEQVR42mXNwQ6CMBRE0RIIW16j1LRpBfqoYP3/77tqF25cnGQyixnjHo75OXPdLshdkEW4RU/elJQSIQTGcWQYhj9932OM+em6DlOPF/WonOVkTSu6KJoz+74TY8Q510ZVlfzpSyktf8+891hrEZFmmibeU5cx4lWIWHEAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
+  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;93d56503&apos; title=&apos;&apos; src=&apos;/static/d0e1b4065d85f4f0f9e8e290576873b8/ca1dc/93d56503.png&apos; srcset=&apos;/static/d0e1b4065d85f4f0f9e8e290576873b8/e7570/93d56503.png 170w,
+/static/d0e1b4065d85f4f0f9e8e290576873b8/f46e7/93d56503.png 340w,
+/static/d0e1b4065d85f4f0f9e8e290576873b8/ca1dc/93d56503.png 680w,
+/static/d0e1b4065d85f4f0f9e8e290576873b8/49bb6/93d56503.png 775w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
+  &lt;/a&gt;
+    &lt;/span&gt;&lt;/p&gt;
+&lt;h2&gt;jenkins 설치하기&lt;/h2&gt;
+&lt;p&gt;다음 명령어를 수행하여 jenkins를 설치한다.&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;&lt;span class=&quot;token function&quot;&gt;curl&lt;/span&gt; &lt;span class=&quot;token parameter variable&quot;&gt;-fsSL&lt;/span&gt; https://pkg.jenkins.io/debian-stable/jenkins.io-2023.key &lt;span class=&quot;token operator&quot;&gt;|&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;tee&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;\&lt;/span&gt;
+  /usr/share/keyrings/jenkins-keyring.asc &lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt; /dev/null
+&lt;span class=&quot;token builtin class-name&quot;&gt;echo&lt;/span&gt; deb &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;signed-by&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;/usr/share/keyrings/jenkins-keyring.asc&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;\&lt;/span&gt;
+  https://pkg.jenkins.io/debian-stable binary/ &lt;span class=&quot;token operator&quot;&gt;|&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;tee&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;\&lt;/span&gt;
+  /etc/apt/sources.list.d/jenkins.list &lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt; /dev/null
+&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;apt-get&lt;/span&gt; update
+&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;apt-get&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;install&lt;/span&gt; jenkins
+
+&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; systemctl status jenkins &lt;span class=&quot;token comment&quot;&gt;# 실행상태 확인&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
+&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
+      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/377aacf35597393970adf4d2f550dffe/fcbeb/99b45540.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
+    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 16.470588235294116%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAf0lEQVR42m2OywrFIAxEleIjahdy1YIbBW3//w/n1oC7Lg5DEmYywmeHOipiiyi9oI2OOSfmPTHGQK3vLUbGOYcQAqy1EEJ8Q5bw3M8b1JBqAp0EpRRzHAer1ppDpJRs2vrJMqWc0XvHVS6kX+I2q4kxhtmhRMTs/Z699/xw8Qe0b0Pn0GyF9wAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
+  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;99b45540&apos; title=&apos;&apos; src=&apos;/static/377aacf35597393970adf4d2f550dffe/ca1dc/99b45540.png&apos; srcset=&apos;/static/377aacf35597393970adf4d2f550dffe/e7570/99b45540.png 170w,
+/static/377aacf35597393970adf4d2f550dffe/f46e7/99b45540.png 340w,
+/static/377aacf35597393970adf4d2f550dffe/ca1dc/99b45540.png 680w,
+/static/377aacf35597393970adf4d2f550dffe/02d09/99b45540.png 1020w,
+/static/377aacf35597393970adf4d2f550dffe/fcbeb/99b45540.png 1206w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
+  &lt;/a&gt;
+    &lt;/span&gt;&lt;/p&gt;
+&lt;h2&gt;jenkins 접속하기 &amp;#x26; 초기설정&lt;/h2&gt;
+&lt;blockquote&gt;
+&lt;p&gt;jenkins는 기본적으로 8080포트를 사용한다.
+jenkins의 포트를 변경하는 방법에 대해서는 본 글에서 다루지는 않는다.&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;{인스턴스-public-ip}:8080&lt;/code&gt; 으로 접속하면 다음과 같은 화면을 볼 수 있다.&lt;/p&gt;
+&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
+      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/1a9e2cb6709d5c991de4fa4d0d15199d/f5df9/4492665d.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
+    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 76.47058823529412%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABjklEQVR42qVT7VLCMBDk6X0Xx1fwAQT8Ib+AoQ7IYBXblCYhTT9S1rtAwA9AGDOzXELJdm9v6QyHI8xmL5hOZ5BSoSgKrNdrFKbY77XWZ6HU9t5isUCHP3jxRYYhorKsfOVz0zT4a202G1+TJDkQTiYRug99DJ4GGI/G6HV7dO5hPufnGzjn0Lath3Nc3Zd9eyCM49gfDEleKY2VLiDUGqkyyKgqailnUFt5npNq49Vzi1wZoYtvhKU20EJCZtojF+SNIG9E7mGlRlVV+/ZOthwIraZBrCRsHqB8NRkRMmhgZVl6cPu8WBnvjxKmWYa35RLvHwm0MWjIl5ou1K7xtSKUpLCqazREYq3dDdF45b8Im8b5t50FD4FgSeXWR+vB0fGi0vRAeMybUxHZDoSGs4sa55An/S9CVhVaZl9/tXwJIf+GL0spPVEYyNGhXELIJJzFoOhsbNiD8LZT4JiwXyHI4fuj/5RrPPy5bO3wnBQYTV/RiaLIeyKEQEZZvAZCZFAyx3gW4+auj9v7R3wC/VKL2SHZQ34AAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
+  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;4492665d&apos; title=&apos;&apos; src=&apos;/static/1a9e2cb6709d5c991de4fa4d0d15199d/ca1dc/4492665d.png&apos; srcset=&apos;/static/1a9e2cb6709d5c991de4fa4d0d15199d/e7570/4492665d.png 170w,
+/static/1a9e2cb6709d5c991de4fa4d0d15199d/f46e7/4492665d.png 340w,
+/static/1a9e2cb6709d5c991de4fa4d0d15199d/ca1dc/4492665d.png 680w,
+/static/1a9e2cb6709d5c991de4fa4d0d15199d/f5df9/4492665d.png 1019w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
+  &lt;/a&gt;
+    &lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;다시 EC2 화면으로 넘어와서 다음 명령어를 수행하여 &lt;code class=&quot;language-text&quot;&gt;initialAdminPassword&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;&lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;cat&lt;/span&gt; /var/lib/jenkins/secrets/initialAdminPassword&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
+&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
+      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/1bfdaa00e299a618f4e0d6f9a35b40f4/e42f2/f55b94c9.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
+    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 5.294117647058823%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAARElEQVR42h2KOwrAMAzFegN/Y5OlS4OTqfe/3WvxIBBCF92EfBN5flbAlmE+E7sOqgrMDCKCqsLdYWbtItJ9jNFERL8f97MZQConaOsAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
+  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;f55b94c9&apos; title=&apos;&apos; src=&apos;/static/1bfdaa00e299a618f4e0d6f9a35b40f4/ca1dc/f55b94c9.png&apos; srcset=&apos;/static/1bfdaa00e299a618f4e0d6f9a35b40f4/e7570/f55b94c9.png 170w,
+/static/1bfdaa00e299a618f4e0d6f9a35b40f4/f46e7/f55b94c9.png 340w,
+/static/1bfdaa00e299a618f4e0d6f9a35b40f4/ca1dc/f55b94c9.png 680w,
+/static/1bfdaa00e299a618f4e0d6f9a35b40f4/e42f2/f55b94c9.png 734w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
+  &lt;/a&gt;
+    &lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;확인한 암호를 화면에 입력한 뒤 Continue 버튼을 눌러 계속 진행한다.&lt;/p&gt;
+&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
+      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/34da90f6397f6f2e2761f50b1c127250/583a7/28fea7e9.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
+    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 76.47058823529412%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABpElEQVR42p1T7U7jMBDsq9/LIPEM9x+O4yh/oZxU2gM1JDTxR+wkTtthZ1FaQG2BW2lkx94dz35kNJlMMJ3eYzaboa5rNE2DEAJijLqPMej5MXjv1XexWGCUZRk2m41cBL0IIaJtOwQh9L5G3/f4zBhPK8tyIATuJn9x8es3rsfXuL25xdWfMc7PLjCf/VNnEm/Wa6w/YLVa6bolzPNcP6jIOI/SR5QuYCmoBFZUK5yDMVYzYTmGsnBNqd8RFkWhH42TWiwNzFKCSw8jcKVDlLMgaIxD6tJWzcGU3xLGyqKpGMzVKkksjZJG2XddJ8VvNc2hDHxgL2HxvMQie0KWF6ilMUmCmErqdyAh0csdu8oOM+VOlNOq6g1hK46tOLVtq13m61TyDmyCoBEf1i9yrAScBqqsqmpHOMj+zJji0AyCKp00jA/+FyH9os6o35Iy/deUv0lIH5aEikiksylne5vyFUIqs9Yq6cGxGQZ7aP8xpJRUHdeBiHj3p3y3hvss9Ws8mg7Thxyj+Xyu9WAqfP0YPvpYK4Mfakwfc/w4vcTJzzFeAINXjf7ZXI+HAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
+  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;28fea7e9&apos; title=&apos;&apos; src=&apos;/static/34da90f6397f6f2e2761f50b1c127250/ca1dc/28fea7e9.png&apos; srcset=&apos;/static/34da90f6397f6f2e2761f50b1c127250/e7570/28fea7e9.png 170w,
+/static/34da90f6397f6f2e2761f50b1c127250/f46e7/28fea7e9.png 340w,
+/static/34da90f6397f6f2e2761f50b1c127250/ca1dc/28fea7e9.png 680w,
+/static/34da90f6397f6f2e2761f50b1c127250/583a7/28fea7e9.png 1013w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
+  &lt;/a&gt;
+    &lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;초기 플러그인 세팅 화면이 나오는데 &lt;code class=&quot;language-text&quot;&gt;Install suggested plugins&lt;/code&gt; 를 눌러 초기 플러그인 설정을 진행한다. &lt;/p&gt;
+&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
+      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/6be6be95dbd2b5d099883b8b0c45d285/d8785/c78a9517.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
+    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 75.88235294117648%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABzUlEQVR42p1UiW6bQBT0/39SPyCRq9RxrMolji9ALAHMfS6Hp++9GIvUaatkpdGwCzs771hmhmFgt9sLwjBEksSI488hiiLal2C73WLmeR66rkdZlsQd2rYT7vte0Lat8L/G+XwWdhwHM9/3MQwDDGOD+fwB9/ffhde/nrFYLHF3Nyd+gtatbORvmafgtatgEAQyqasKNbmsqzdU9JxnGYqiEPd13VxQ01p5WatvHZ5OJ5mouMYhKGCFJfZ+DjdtEBQdorIT0TTNKE8p8ryQFHFqRmcfCq7sGN9WeyytAD9VBJVrRPqM16zDZrPBer2G67pSAMmt5Lu9hn0VDEmQp7tTiWNUwkpqqEzDJnaIraiSCmaX8PM8J7eprDHzGgvfCK6cGD8sHw+mj4Ud0HOAlRvjxctg2zZMy3zj4xGKNopbahk+iIUlbUpNQnYSLFWMJ5Vc8UiHPLsJAuoELh7D8z0Se4WjXBHi4rDojWDV9ig09eMEPNfdIDnrLn3JPZpluYTM4XPIY7XfFWVM7P+G1locVdRmfMBNUUbBgV+w8B+YDg6Pw2ya5u835TMO2R0Ljldxelu+HPJH370TNE2L/hjJtWJfAReG3R8OB/wGHbWCEuKtdfAAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
+  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;c78a9517&apos; title=&apos;&apos; src=&apos;/static/6be6be95dbd2b5d099883b8b0c45d285/ca1dc/c78a9517.png&apos; srcset=&apos;/static/6be6be95dbd2b5d099883b8b0c45d285/e7570/c78a9517.png 170w,
+/static/6be6be95dbd2b5d099883b8b0c45d285/f46e7/c78a9517.png 340w,
+/static/6be6be95dbd2b5d099883b8b0c45d285/ca1dc/c78a9517.png 680w,
+/static/6be6be95dbd2b5d099883b8b0c45d285/02d09/c78a9517.png 1020w,
+/static/6be6be95dbd2b5d099883b8b0c45d285/d8785/c78a9517.png 1021w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
+  &lt;/a&gt;
+    &lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
+      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/c5ec863604bfad00adc41e0bcd9ca6fd/9b7e9/82bae04f.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
+    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 76.47058823529412%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABwElEQVR42pWUWW+bQBSF+f8/qw9J5FRK89ImYrFZhp3BgPGKfTrnIlBsJY2LdDQznjvfXWXL85ZYLldYrXx0XYfNZnOlvu+/Fe12ux2UUrDW6zWGYcD5fMblcpk1fdzz7vb+VvyKohiBF2PcmLWsKjRNC61rUV3X2G638mAg8Asonc3ArmtxND/8eHjGYvFT9Pi4wNMT9YwgCMV4yuIz8W4G9ib/wUTc9Kc5RWYwpXEbybfAV+cVbuogrH2oWiHLMoRhhNY0iCn7fiDF1rqSc5pmxiY3pWnkzJVNORwOY1N+O3/w5r3DizwkZYI4SQXIGpZliSiKkOe5OCpLQtfSUUIIY40pAuM4hmXbDmKVoMgL6ErLg6Io59VxHDNSK+MkFCeVaVxl7DguhOz3e3FwOp2QJAks13WR5hmKskClR2OlYolAa42Xl19wXU+M6YSRMu227QT2OTBNJS0WlaOTm2jbtpVogiAQCMUaUSwDH38BdCR31o2GSkXzo/F8vb8D6MqGUGp69PF8e/dPoG3bYsCi3yuWgWCCqKsuE8bij927TxwnziCjI4wNPB6P0gtrmjNCOVf/I/4PUISzib7v4y8mPXFDELhsegAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
+  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;82bae04f&apos; title=&apos;&apos; src=&apos;/static/c5ec863604bfad00adc41e0bcd9ca6fd/ca1dc/82bae04f.png&apos; srcset=&apos;/static/c5ec863604bfad00adc41e0bcd9ca6fd/e7570/82bae04f.png 170w,
+/static/c5ec863604bfad00adc41e0bcd9ca6fd/f46e7/82bae04f.png 340w,
+/static/c5ec863604bfad00adc41e0bcd9ca6fd/ca1dc/82bae04f.png 680w,
+/static/c5ec863604bfad00adc41e0bcd9ca6fd/9b7e9/82bae04f.png 1009w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
+  &lt;/a&gt;
+    &lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;초기 Admin 유저를 생성할 수 있다.&lt;/p&gt;
+&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
+      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/407217b075d5dc4ab36ca58e5b6895fb/bb4c7/a8f14e43.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
+    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 75.88235294117648%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABV0lEQVR42pWT3W6CMBiGufOd7VJ2suwSlp2pi2Yao6A7QMlQERVULD+l9F1b0TQRRL/kSf/fvv3aGpZlYT53YNszBEGAKIpwPB5VqSP76jgcDiCEwHEcGK7rQkaSpMiyDHmeI00zUadlmYHSXLUppeAcN8HLTs/zpOBCNZbLFTqdLnq9HwyHI/T7Q4zHFlqtDkYjE6Y5Qbv9rTbWRfT6er2GsVicBU8nIiYnKMSgnFAUxQ1MwMvxRkF5VLlACrJyMdOEdFFJzthVqNqhSKoUrXJWR4NDBsYeF2NNDqPopK6+Ln9PO6TiuFTsqufvHo05jOPkeoxHue9QPFq566PQJoeExCqHlwnPOCyKy0/RBOWjJnF8zmUDeVlyLi+GVzvkVZ+0JniJjH1M8buKMNummNgujOl0Ct/3lXoYhnfZCzbbAH+eL9hgs9vha2Dj5a2N1/cuPj57+AeZf421Ajk8yQAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
+  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;a8f14e43&apos; title=&apos;&apos; src=&apos;/static/407217b075d5dc4ab36ca58e5b6895fb/ca1dc/a8f14e43.png&apos; srcset=&apos;/static/407217b075d5dc4ab36ca58e5b6895fb/e7570/a8f14e43.png 170w,
+/static/407217b075d5dc4ab36ca58e5b6895fb/f46e7/a8f14e43.png 340w,
+/static/407217b075d5dc4ab36ca58e5b6895fb/ca1dc/a8f14e43.png 680w,
+/static/407217b075d5dc4ab36ca58e5b6895fb/02d09/a8f14e43.png 1020w,
+/static/407217b075d5dc4ab36ca58e5b6895fb/bb4c7/a8f14e43.png 1023w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
+  &lt;/a&gt;
+    &lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;jenkins의 기본 URL을 설정할 수 있다. 기본값을 권장한다. &lt;/p&gt;
+&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
+      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/4035960bbafbca7af5331b1611fac0f0/42a19/84efb2c8.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
+    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 75.88235294117648%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNklEQVR42u2Uy26DMBBF8/Vd9kMqddEv6CpRUJoqUtpUICIBKY+WDYSnbcytx0CiEDZRN13U0tHg8ej6zkh4ZpomXNeD47hI0xRFUSDPcx0Hzvtcf4/JsgxVVSkNB7MgCEGrLEtFBca4goFzpnNUyDnXZxSnVtu2Ovq+j1kYdoKed8BiYWC93mC7fYdl2XhZvarcUu/n8yVse38hMBYMguAsSK7yvDgdUiyVu0y1lB6ppRpSSjRE03RRIQi1v3LYtVVqYaKuaz3TJCESHPs5VSqvYw9dOinIWH0a/iBKCMH1ZYKLbrYDKsf7GnJ+1bIQQrsiBofkYMiNz6iehIiLGUZRNDnoW9a/4O8FpRz+lL/okAmJ3WeKXVjgzVKPA702pEzEcXwT0dc3PvYH3D8auHsw8PS8wg++b41+WLe4nQAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
+  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;84efb2c8&apos; title=&apos;&apos; src=&apos;/static/4035960bbafbca7af5331b1611fac0f0/ca1dc/84efb2c8.png&apos; srcset=&apos;/static/4035960bbafbca7af5331b1611fac0f0/e7570/84efb2c8.png 170w,
+/static/4035960bbafbca7af5331b1611fac0f0/f46e7/84efb2c8.png 340w,
+/static/4035960bbafbca7af5331b1611fac0f0/ca1dc/84efb2c8.png 680w,
+/static/4035960bbafbca7af5331b1611fac0f0/02d09/84efb2c8.png 1020w,
+/static/4035960bbafbca7af5331b1611fac0f0/42a19/84efb2c8.png 1024w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
+  &lt;/a&gt;
+    &lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;여기까지 했으면 초기 설정은 완료했다고 볼 수 있다.&lt;/p&gt;
+&lt;p&gt;만약 위 과정에서 admin 유저를 생성하지 않았다면 &lt;code class=&quot;language-text&quot;&gt;admin&lt;/code&gt; 이라는 기본 유저로 로그인 할 수 있다고 설명하고 있다.
+비밀번호는 &lt;code class=&quot;language-text&quot;&gt;initialAdminPassword&lt;/code&gt; 과정에서 입력했던 값으로 설정되어있다.&lt;/p&gt;
+&lt;p&gt;&lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 680px; margin-bottom: 16px;&apos;&gt;
+      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/f1396e60734e9dddb0c6a43f0652fc07/0d97d/60ba97ad.png&apos; style=&apos;display: block&apos; target=&apos;_blank&apos; rel=&apos;noopener&apos;&gt;
+    &lt;span class=&apos;gatsby-resp-image-background-image&apos; style=&quot;padding-bottom: 77.05882352941177%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAABXklEQVR42u2Uy07DMBBF+/8s+QW+gBV71kioQNOmzqNpQiFt3onzqJ3L2G2A0iJUNmwY6WTuWJrrkZ1kNJ/PwZgFy7IRxzGyLDubNE1RFAWCIMBovV5DSqkZou979TyoB07FsJ4kCUZhGOpisfAxHk8wmzE47hIu1RPDhGla4LyF2k+InjJB/Z8RcmcYx2S42US6CDwGZt7DtR7hu1MsXQPm5A4ue0DXJNRZohcFevkFkUPS+vuE6txUiMZHU5io8xl4ZoCnBupsqnNTMrSlpekqG21laZTuKIvm+diwTB3kEZmUDupCNTlkRDq3CEabzDVKqzWeMU1DWrQvx4bblqOtS3RthbquUFUF2oar2ffIPaR7caCl3H4YJsnO8OrWxsX1Ey5vDIQp17c8HPZPcXDLw4R+XMF+LbBY05RbiXPipOF379i/4R8Yep6HKIp0of4YvyHPc/reOVarFd4AhmyNTDDm+BMAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
+  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;60ba97ad&apos; title=&apos;&apos; src=&apos;/static/f1396e60734e9dddb0c6a43f0652fc07/ca1dc/60ba97ad.png&apos; srcset=&apos;/static/f1396e60734e9dddb0c6a43f0652fc07/e7570/60ba97ad.png 170w,
+/static/f1396e60734e9dddb0c6a43f0652fc07/f46e7/60ba97ad.png 340w,
+/static/f1396e60734e9dddb0c6a43f0652fc07/ca1dc/60ba97ad.png 680w,
+/static/f1396e60734e9dddb0c6a43f0652fc07/0d97d/60ba97ad.png 1011w&apos; sizes=&apos;(max-width: 680px) 100vw, 680px&apos; style=&apos;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&apos; loading=&apos;lazy&apos; decoding=&apos;async&apos;&gt;
+  &lt;/a&gt;
+    &lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;이렇게 Jenkins를 설치할 수 있다.&lt;/p&gt;
+&lt;h2&gt;Reference&lt;/h2&gt;
+&lt;p&gt;&lt;a href=&quot;https://www.jenkins.io/doc/book/installing/linux/&quot;&gt;https://www.jenkins.io/doc/book/installing/linux/&lt;/a&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[피움 블로그 생성과정]]></title><description><![CDATA[…]]></description><link>https://pium-official.github.io/blog-starter/</link><guid isPermaLink="false">https://pium-official.github.io/blog-starter/</guid><pubDate>Sun, 09 Jul 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
 &lt;p&gt;이 글은 우테코 피움팀 크루 &apos;&lt;a href=&quot;https://github.com/Choi-JJunho&quot;&gt;주노&lt;/a&gt;&apos;가 작성했습니다.&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;h2&gt;서론&lt;/h2&gt;
diff --git a/search/index.html b/search/index.html
index 1794b016..19b1dc2d 100644
--- a/search/index.html
+++ b/search/index.html
@@ -71,9 +71,9 @@
 @media (max-width:768px){.jECwfK{padding:0 15px;}}/*!sc*/
 data-styled.g64[id="search__SearchWrapper-sc-1ljtwq8-0"]{content:"jECwfK,"}/*!sc*/
 </style><title data-react-helmet="true">pium.log</title><link rel="icon" href="/favicon-32x32.png?v=5f58a3c3ae96bf65023757c195615b2f" type="image/png"/><link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=5f58a3c3ae96bf65023757c195615b2f"/><link rel="sitemap" type="application/xml" href="/sitemap-index.xml"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><header class="Header__HeaderWrapper-sc-12xtq5x-0 eJajUG"><div class="Header__Inner-sc-12xtq5x-1 kPhrIW"><span class="Header__BlogTitle-sc-12xtq5x-2 ylZeC"><a href="/">pium.log</a></span><div class="Header__Menu-sc-12xtq5x-3 gpugdO"><div class="Header__ToggleWrapper-sc-12xtq5x-4 kbdpAg"><div class="Header__IconRail-sc-12xtq5x-5 bbKKxv"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg></div></div><a href="/tags/"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"></path></svg></a><a href="/series/"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"></path></svg></a><a href="/rss.xml"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M128.081 415.959c0 35.369-28.672 64.041-64.041 64.041S0 451.328 0 415.959s28.672-64.041 64.041-64.041 64.04 28.673 64.04 64.041zm175.66 47.25c-8.354-154.6-132.185-278.587-286.95-286.95C7.656 175.765 0 183.105 0 192.253v48.069c0 8.415 6.49 15.472 14.887 16.018 111.832 7.284 201.473 96.702 208.772 208.772.547 8.397 7.604 14.887 16.018 14.887h48.069c9.149.001 16.489-7.655 15.995-16.79zm144.249.288C439.596 229.677 251.465 40.445 16.503 32.01 7.473 31.686 0 38.981 0 48.016v48.068c0 8.625 6.835 15.645 15.453 15.999 191.179 7.839 344.627 161.316 352.465 352.465.353 8.618 7.373 15.453 15.999 15.453h48.068c9.034-.001 16.329-7.474 16.005-16.504z"></path></svg></a><a aria-current="page" class="" href="/search/"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" style="margin-right:0" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></a></div></div></header><div class="Body__BodyWrapper-sc-v34kqr-0 oVFRU"><div class="search__SearchWrapper-sc-1ljtwq8-0 jECwfK"><h1 class="Title__Wrapper-sc-1ttlsnf-0 kdouQu"> <!-- -->There are <!-- -->17<!-- --> post<!-- -->s<!-- -->.<!-- --> </h1><div class="TextField__Wrapper-sc-x9cxl4-0 eihHri"><input placeholder="Search" type="text" class="TextField__Input-sc-x9cxl4-2 cVhsKc"/><span class="TextField__Icon-sc-x9cxl4-1 jIHunx"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></span></div></div><div size="70" class="VerticalSpace-sc-fbwjqc-0 cUecZP"></div><div class="PostList__PostListWrapper-sc-1oqnm6-0 euTAqz"><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/restdocs-start/">RestDocs로 API 문서화하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">August 11, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">이 글은 우테코 피움팀 크루 &#x27;주노&#x27;가 작성했습니다. 사건의 발단  3차 스프린트를 진행하기 하루 전날 프론트가 배포되었다.  그런데 배포된 사이트에 들어가보니 반려 식물의 타임라인을 보는 페이지가 404를 띄우고있었다. 당황하지 않고 침착하게 f12를 눌러 개발자도구를 열고 네트워크탭을 확인해보니 API가 이상하게 호출되고있었다. 평소 프론트분들을 굉장…</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=문서화"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">문서화</div></a><a href="/tags/?q=RestDocs"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">RestDocs</div></a><a href="/tags/?q=테스트"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">테스트</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/OAuth2.0/">내가 이해한 OAuth2.0</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">August 10, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">이 글은 우테코 피움팀 크루 &#x27;클린&#x27;가 작성했습니다. OAuth란? 현재 개발하고 있는 서비스에서 구글 캘린더에 접근을 한다고 가정을 해봅시다. 현재 접근하는 사용자의 구글 캘린더 정보를 얻고자 한다면 구글 계정으로 로그인을 해야합니다. 진짜 간단한 방법이 있습니다. 사용자로부터 구글 id와 password를 받고 저희가 대신 로그인 해서 해당 사용자의 …</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=OAuth2.0"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">OAuth2.0</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/stylelint-and-husky/">stylelint와 husky를 통해 컨벤션 통일하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">August 07, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">이 글은 우테코 피움팀 크루 &#x27;클린&#x27;가 작성했습니다. style-lint, husky를 통한 컨벤션 자동화 하기 프로젝트는 혼자 할 수 도 있지만 팀원들과 함께 진행하는 경우도 있습니다. 피움의 경우에 팀원들과 함께 진행하고 있습니다. 개인적으로 생각했을 때 코드를 작성한다는 것은 그 자체로 하나의 문서를 만드는 것이라고 생각합니다. 그리고 그 문서의 양…</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=stylelint"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">stylelint</div></a><a href="/tags/?q=husky"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">husky</div></a><a href="/tags/?q=컨벤션"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">컨벤션</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/react-setting-without-cra/">webpack으로만 React 설정하기 (without CRA)</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">August 06, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">이 글은 우테코 피움팀 크루 &#x27;클린&#x27;가 작성했습니다. CRA없에 webpack으로 react 세팅하기 피움 서비스 환경을 만들기로 하면서, FE의 개발 스펙은 React + TypeScript로 설정하였습니다. React는 당연 현존 최강 라이브러리이고, 여기에 JavaScript의 동적 타입을 컴파일 단계에서 잡아주는 TypeScript까지 더해서 안정…</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=React"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">React</div></a><a href="/tags/?q=Webpack"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">Webpack</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/acceptance-test-resolve/">인수테스트 데이터 초기화하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">August 03, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">이 글은 우테코 피움팀 크루 &#x27;주노&#x27;가 작성했습니다. 서론 인수테스트를 작성하면서 다음과 같은 문제가 발생했다. RestAssured를 사용하고 있다. 각 테스트별로 (DB)데이터가 격리된 테스트를 수행하고 싶다. 이에 다음과 같은 시행착오를 거쳤다. 최종적으로 작성된 코드를 보고싶다면 최종코드를 확인해주세요. 시행착오 JPA를 사용하고 있는 현 시점에서…</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=인수테스트"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">인수테스트</div></a><a href="/tags/?q=RestDocs"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">RestDocs</div></a><a href="/tags/?q=테스트"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">테스트</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/transactional-not-in-restassured/">[트러블슈팅] @SpringbootTest의 RANDOM_PORT 환경에서 @Transactional 어노테이션을 사용했을 때, RestAssured GET 요청이 수행되지 않는 경우(트랜잭션 격리 이해하기)</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 31, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">이 글은 우테코 피움팀 크루 &#x27;하마드&#x27;가 작성했습니다. 개요 우아한테크코스 5기 피움 서비스의 인수 테스트를 작성하던 도중, 실제 포트에 애플리케이션을 구동시켜 테스트를 하는 
-환경에서 테스트를 할 때, 테스트 메소드에서 분명히 해당 리소스를 저장했는데도 RestAssured의 GET 요청이 수행되지 않는 경우가 있었다. 이 이유를 파악하고 해결 과정을 …</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=Transaction"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">Transaction</div></a><a href="/tags/?q=SpringbootTest"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">SpringbootTest</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/apply-https/">내 서버에 HTTPS 설정하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 28, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">이 글은 우테코 피움팀 크루 &#x27;주노&#x27;, &#x27;그레이&#x27;, &#x27;조이&#x27;, &#x27;하마드&#x27;가 작성했습니다. 서론 현재 피움팀 서버는  요청으로 이뤄져있다.
+환경에서 테스트를 할 때, 테스트 메소드에서 분명히 해당 리소스를 저장했는데도 RestAssured의 GET 요청이 수행되지 않는 경우가 있었다. 이 이유를 파악하고 해결 과정을 …</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=Transaction"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">Transaction</div></a><a href="/tags/?q=SpringbootTest"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">SpringbootTest</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/bundle-analyze/">bundle-analyze를 통한 bundle 크기 분석</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 28, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">이 글은 우테코 피움팀 크루 &#x27;클린&#x27;가 작성했습니다. 사건의 발단 이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국  파일의 크기를 보니 무려 16m…</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=bundle"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">bundle</div></a><a href="/tags/?q=최적화"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">최적화</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/apply-https/">내 서버에 HTTPS 설정하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 28, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">이 글은 우테코 피움팀 크루 &#x27;주노&#x27;, &#x27;그레이&#x27;, &#x27;조이&#x27;, &#x27;하마드&#x27;가 작성했습니다. 서론 현재 피움팀 서버는  요청으로 이뤄져있다.
 는 WWW 상에서 정보를 주고 받는 프로토콜인데, 누군가 네트워크에서 신호를 가로채면 내용이 노출되는 문제가 발생할 수 있다.
-이를 해결해주는 프로토콜이 바로 이다. 는 정보를 암호화하는 SSL을 이용한 프로토콜이다. …</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=HTTPS"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">HTTPS</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/bundle-analyze/">bundle-analyze를 통한 bundle 크기 분석</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 28, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">이 글은 우테코 피움팀 크루 &#x27;클린&#x27;가 작성했습니다. 사건의 발단 이번 Level3 2차 데모데이때 권장사항을 맞추기 위해서 프로덕션 배포까지 진행했습니다. 어찌 저찌 배포는 잘 끝이 났는데 문제는 첫 페이지가 로드 되는데 약 4초 가량의 시간이 걸린다는 것이었습니다. 네트워크 문제 문제인가? 하고 봤는데 아니었고, 결국  파일의 크기를 보니 무려 16m…</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=bundle"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">bundle</div></a><a href="/tags/?q=최적화"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">최적화</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/db-drop-stop/">Table Drop 못하게 막아버리기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 28, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">이 글은 우테코 피움팀 크루 &#x27;주노&#x27;, &#x27;그레이&#x27;, &#x27;조이&#x27;, &#x27;하마드&#x27;가 작성했습니다. 서론 본 설명 글은 다음과 같은 환경에서 진행됩니다. 배포서버 : Ubuntu 22.04.2 LTS DB서버 : Ubuntu 22.04.2 LTS 배포서버와 DB서버는 동일한 VPC를 사용하고 있습니다. DB : MySQL 8.0.33 Application : Spr…</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=DB"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">DB</div></a><a href="/tags/?q=MySQL"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">MySQL</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/jenkins-hook-by-label/">PR 라벨로 젠킨스 빌드유발을 구분하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 25, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">이 글은 우테코 피움팀 크루 &#x27;주노&#x27;가 작성했습니다. 서론 현재 피움팀의 젠킨스에서 빌드 트리거로 을 사용하고있다.  해당 설정은 Github에서 유발되는 모든 WebHook에 대해 빌드 트리거가 동작하는 설정이다.  빌드 스크립트에서 위처럼 triggers 설정을 별도로 지정할 수 있지만 현재 프로젝트 구조상 더 세분화된 설정이 필요한 상태다.  현재 …</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=젠킨스"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">젠킨스</div></a><a href="/tags/?q=CI"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">CI</div></a></div></div></div></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/search/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
+이를 해결해주는 프로토콜이 바로 이다. 는 정보를 암호화하는 SSL을 이용한 프로토콜이다. …</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=HTTPS"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">HTTPS</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/db-drop-stop/">Table Drop 못하게 막아버리기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 28, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">이 글은 우테코 피움팀 크루 &#x27;주노&#x27;, &#x27;그레이&#x27;, &#x27;조이&#x27;, &#x27;하마드&#x27;가 작성했습니다. 서론 본 설명 글은 다음과 같은 환경에서 진행됩니다. 배포서버 : Ubuntu 22.04.2 LTS DB서버 : Ubuntu 22.04.2 LTS 배포서버와 DB서버는 동일한 VPC를 사용하고 있습니다. DB : MySQL 8.0.33 Application : Spr…</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=DB"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">DB</div></a><a href="/tags/?q=MySQL"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">MySQL</div></a></div></div><hr class="Divider-sc-1jz0jl-0 lbAWYW"/><div class="PostList__PostWrapper-sc-1oqnm6-1 bZxncx"><h1 class="Title__Wrapper-sc-1ttlsnf-0 hlSpe"> <a href="/jenkins-hook-by-label/">PR 라벨로 젠킨스 빌드유발을 구분하기</a> </h1><p class="PostList__Date-sc-1oqnm6-2 bKKBoo">July 25, 2023</p><p class="PostList__Excerpt-sc-1oqnm6-3 hlgCLY">이 글은 우테코 피움팀 크루 &#x27;주노&#x27;가 작성했습니다. 서론 현재 피움팀의 젠킨스에서 빌드 트리거로 을 사용하고있다.  해당 설정은 Github에서 유발되는 모든 WebHook에 대해 빌드 트리거가 동작하는 설정이다.  빌드 스크립트에서 위처럼 triggers 설정을 별도로 지정할 수 있지만 현재 프로젝트 구조상 더 세분화된 설정이 필요한 상태다.  현재 …</p><div class="TagList__TagListWrapper-sc-s1uz5f-0 fKwLTl"><a href="/tags/?q=젠킨스"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">젠킨스</div></a><a href="/tags/?q=CI"><div class="TagList__TagLink-sc-s1uz5f-1 OSwVR">CI</div></a></div></div></div></div><footer class="Footer__FooterWrapper-sc-1qfqdid-0 gUOgk">© <!-- -->pium.log<!-- -->, Built with Gatsby and<!-- --> <a href="https://github.com/devHudi/gatsby-starter-hoodie" target="blank">gatsby-starter-hoodie</a> <!-- -->theme.</footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/search/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" -->
           <script
             id="gatsby-chunk-mapping"
           >
diff --git a/sitemap-0.xml b/sitemap-0.xml
index 8c14ee44..9f8999c0 100644
--- a/sitemap-0.xml
+++ b/sitemap-0.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>https://pium-official.github.io/sprint-idea/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/blog-starter/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/jenkins-setting/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/jpa-notnull-nullable/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/pium-deploy-step/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/fe-tanstack-query/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/ci-cd-setting/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/jenkins-hook-by-label/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/apply-https/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/bundle-analyze/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/db-drop-stop/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/transactional-not-in-restassured/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/acceptance-test-resolve/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/react-setting-without-cra/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/stylelint-and-husky/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/OAuth2.0/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/restdocs-start/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/search/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/series/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/tags/</loc><changefreq>daily</changefreq><priority>0.7</priority></url></urlset>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>https://pium-official.github.io/sprint-idea/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/blog-starter/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/jpa-notnull-nullable/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/jenkins-setting/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/pium-deploy-step/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/fe-tanstack-query/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/ci-cd-setting/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/jenkins-hook-by-label/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/bundle-analyze/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/apply-https/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/db-drop-stop/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/transactional-not-in-restassured/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/acceptance-test-resolve/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/react-setting-without-cra/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/stylelint-and-husky/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/OAuth2.0/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/restdocs-start/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/search/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/series/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://pium-official.github.io/tags/</loc><changefreq>daily</changefreq><priority>0.7</priority></url></urlset>
\ No newline at end of file