rss.xml

<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[RSS Feed of 괜찮을지도]]></title><description><![CDATA[안녕하세요! 괜찮을지도 기술블로그입니다.]]></description><link>https://map-befine-official.github.io</link><generator>GatsbyJS</generator><lastBuildDate>Wed, 01 Nov 2023 08:41:57 GMT</lastBuildDate><item><title><![CDATA[공간 인덱스 적용기]]></title><description><![CDATA[…]]></description><link>https://map-befine-official.github.io/spatial-index/</link><guid isPermaLink="false">https://map-befine-official.github.io/spatial-index/</guid><pubDate>Thu, 19 Oct 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;이 글은 우아한테크코스 괜찮을지도팀의 &lt;code class=&quot;language-text&quot;&gt;쥬니&lt;/code&gt;가 작성했습니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;배경&lt;/h3&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;괜찮을지도&lt;/code&gt; 서비스는 아래와 같이, 위치와 관련된 정보를 별도의 테이블로 관리하고 있습니다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/9eb08cee88053e732c4f75755a33f56a/3a6ec/diagram.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: 39.411764705882355%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABWklEQVR42n2R3UvDMBTF+9eLD+qb+CAqOAXdBBEcMhUcw02ngmMyEEWUtlu72Tb9WtqmrcckutLB9OFA7s09v5xwlftnDau1a6xwrR21sXzQQrX5hK88Q5qmhRhLwZv4MB0cNvvYv+yhcvEotcfPW2cP6L8ZUPqvGiqNO1Sveqhx7dQ7aNwOuDcHK2AMSZJI4Is6xnb9BpunXawft6U2TjpY2j1Hd/AOJYmmoD4BUm7IYsSBi5iGSLOsgAkVaVmCqUcQh64U8gQ5o4gCwhERlCAIoGoaLNuG5/twCIHrusgWAEWP0giapkPTdZjjMVzPx6dlQx+NEAQhlDAMMeIF4SABJ7/AMqwMjKJIzluWBZ8HEBIe0zQhWD8JVRWO48hLwzBg87SLvjsDDofDOaDwFkBKKSaTCTzPkw0BE4+UNzy/bQbhEWCxKKE4jmUt7pTZy+UUf8H+m5n1vgGdU1mhOVDnIQAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;diagram.png&apos; title=&apos;&apos; src=&apos;/static/9eb08cee88053e732c4f75755a33f56a/ca1dc/diagram.png&apos; srcset=&apos;/static/9eb08cee88053e732c4f75755a33f56a/e7570/diagram.png 170w,
/static/9eb08cee88053e732c4f75755a33f56a/f46e7/diagram.png 340w,
/static/9eb08cee88053e732c4f75755a33f56a/ca1dc/diagram.png 680w,
/static/9eb08cee88053e732c4f75755a33f56a/3a6ec/diagram.png 686w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;diagram.png&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;장소를 등록할 때, 주소 검색을 사용할 수도 있지만, &lt;strong&gt;지도 위의 좌표를 클릭하여 등록&lt;/strong&gt;할 수도 있습니다.
&lt;br&gt; 사용자들이 동일한 장소를 등록하기 위해 지도상의 특정 위치를 클릭한다고 가정해 보겠습니다.
&lt;br&gt; 이때, 미터 혹은 그 이하의 오차 없이 동일한 위치를 선택할 확률은 얼마나 될까요 ?
&lt;br&gt; 거의 불가능에 가깝다고 생각합니다.
&lt;br&gt; 물론, 사용자의 입력을 그대로 저장할 필요도 있었습니다.
&lt;br&gt; 하지만, 데이터의 정확성이 크게 요구되는 서비스는 아니라는 점에서, DB 공간을 효율적으로 관리하는 것이 우선시 되었습니다.
&lt;br&gt; 이에 따라, 등록 장소 반경 10M 이내에 좌표가 존재하는 경우, 기존 좌표를 재사용하기 위해 테이블을 분리한 것이었죠.&lt;/p&gt;
&lt;p&gt;데이터 공간의 효율성을 위해, 장소 등록시 마다 매번 위치 좌표와 관련된 쿼리가 수행되고 있었습니다.
&lt;br&gt; 물론, 조회용 API에서 해당 로직을 수행하지 않기 때문에 인덱싱의 중요성이 그리 높지 않았습니다.
&lt;br&gt; 하지만, 추후 사용자의 접속 위치를 기반으로 여러 기능들을 제공할 계획을 가지고 있습니다.
&lt;br&gt; 현재의 기능을 위해서도, 앞으로의 기능을 위해서도 공간 인덱스 적용은 반드시 필요한 상황이었습니다.&lt;/p&gt;
&lt;h3&gt;공간 인덱스&lt;/h3&gt;
&lt;p&gt;공간 인덱스는 2차원 공간 개념 값을 다루는 R-Tree 알고리즘을 사용합니다.
&lt;br&gt; 이러한 R-Tree 알고리즘을 이해하기 위해서는 &lt;code class=&quot;language-text&quot;&gt;MBR&lt;/code&gt;이라는 개념이 필수적입니다.
&lt;br&gt; MBR(Minimum Bounding Rectangle)은 아래 사진 하나로 설명이 가능할 것 같습니다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/3c9f6647f7be530335496f99755fd238/2d81a/mbr.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: 44.11764705882353%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABRUlEQVR42nVS2W6DQAzk/z+nqvoBjSrlgYcoQjlIRZo2XOFIOAMkYcq4WgREtWTtrr0ez3hXu91uSNMUbdtCGWN5no9itPv9jjRLUdf1KF4UBeI4QlVV0MqygGmaAjK8cDz+YGplWWK9XmO5XI6anU4nrFYrZFkGbVjAS2RBi+MYURSNWF+rKy6XC3a7HXzf73Pczz/msgrgZrNB0zSSZAHd8/yu8FP2tCRJYBhGD05Vytj89eUN+/3XHyAl0jmD7XYrIGTKlTIUCM/ME8C27V4VZzp7nyFLJ5Ifj4cUclYEoivmahwcg+d5Io85EuF99QYa/jEWs4A/gHLZjArIhnvmCTL9CU+ALA7DULqez7GcyUrXdSwWCwRB0OUDiXMEXIeg2vCF1RewLAtBtx6+D508V2bmOI6467oimU0dxxbpZKwAfwG83rW/bmsBfAAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;img.png&apos; title=&apos;&apos; src=&apos;/static/3c9f6647f7be530335496f99755fd238/ca1dc/mbr.png&apos; srcset=&apos;/static/3c9f6647f7be530335496f99755fd238/e7570/mbr.png 170w,
/static/3c9f6647f7be530335496f99755fd238/f46e7/mbr.png 340w,
/static/3c9f6647f7be530335496f99755fd238/ca1dc/mbr.png 680w,
/static/3c9f6647f7be530335496f99755fd238/2d81a/mbr.png 840w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;img.png&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;출처 : Real My SQL 8.0&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;MySQL에서는 공간 정보를 나타내는 데이터 타입으로 Point, Line, Polygon, Geometry를 지원합니다.
&lt;br&gt; MBR은 이러한 데이터 타입을 감쌀 수 있는 최소 크기의 사각형을 의미합니다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&gt;
    &lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 548px; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/ad58f108c7db6fa790c4ed37ea50ede1/9079b/r-tree.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: 65.29411764705883%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAACKElEQVR42nVTa28SQRTl/38yJiam0fiiVNimSW2t0mXB1FQp9hUFF4QmtgoEdpf37vJajnPudmg1cZLLXIY7555z5pIYj8dwHAeLxQKz2UyC+f3o9/tg3Wg0wmQyWZ+HYYhpOMV0GgdXwvd9AdRrtVqtQy8za+H87AKe56HT6cDpOqjVfiiQUIDmszn8iY9oGSHBC57XQ6l0ipNiCY3GlXRnIdnyknloIfvORBQtMZ/PpdbIbAtrNmbd9c9r9fst4M3NL7x4toknG8/x6bgorKIoZshiAqaSafR6PQEcDocIggBUR9a1Wh3lciWWzA96Q58YpB4DRmufcmYBG4+fovm7KWcE1YsEki+3xIY1QwKym/aQ6+PRMZKvUqhWayhYR9jZ3hVW2gpd9+1rBVbuAyZK/kI1EkBKaTabUkxGjFarhXq9oR6hi/03b9WlvAAQlICaSOa1gapdQxAGwlwAmdx/1X/X2ek5rtRjEYj+acnM01sGPNdTDCd3gPTlf4DL5VJ2267i4YNHKH4+geu5ck7PvqgX9/0Ag8Hwb4Zaqh5SnVPiUEnj3O3tHoinnW5HAQwk2u22jB1zNkloZgNF//LiUl6anrquKzvHotvtot/rCzAv6hqyorpK+TsMY0eGPqFnzbZtMZ6RtwpqVCxYZh6HWROZtIHs+5zKc/Kd+/7egfx7tB2byZQi4dxJJiOazO5kQQbxbN4yUrLIkhEr8KSe1tAWBtn+AZpBynJQvy4jAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;r-tree.png&apos; title=&apos;&apos; src=&apos;/static/ad58f108c7db6fa790c4ed37ea50ede1/9079b/r-tree.png&apos; srcset=&apos;/static/ad58f108c7db6fa790c4ed37ea50ede1/e7570/r-tree.png 170w,
/static/ad58f108c7db6fa790c4ed37ea50ede1/f46e7/r-tree.png 340w,
/static/ad58f108c7db6fa790c4ed37ea50ede1/9079b/r-tree.png 548w&apos; sizes=&apos;(max-width: 548px) 100vw, 548px&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;r-tree.png&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;출처 : Real My SQL 8.0&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;이러한 MBR의 포함 관계를 위 사진처럼 나타낼 수 있습니다.
&lt;br&gt; 이를 B-Tree 형태로 구현한 인덱스가 R-Tree 인덱스입니다.&lt;/p&gt;
&lt;p&gt;이 정도의 지식만 있으면, 공간 인덱스를 적용하는 데에 큰 어려움은 없습니다. &lt;/p&gt;
&lt;h3&gt;기존 코드&lt;/h3&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;    &lt;span class=&quot;token comment&quot;&gt;// LocationRepository.class&lt;/span&gt;

    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Query&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
            &lt;span class=&quot;token string&quot;&gt;&quot;SELECT l FROM Location l &quot;&lt;/span&gt;
                    &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;WHERE ( 6371000 * acos( cos( radians(:#{#current_coordinate.latitude}) ) &quot;&lt;/span&gt;
                    &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;      * cos( radians( l.coordinate.latitude ) ) &quot;&lt;/span&gt;
                    &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;      * cos( radians( l.coordinate.longitude ) - radians(:#{#current_coordinate.longitude}) ) &quot;&lt;/span&gt;
                    &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;      + sin( radians(:#{#current_coordinate.latitude}) ) &quot;&lt;/span&gt;
                    &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;      * sin( radians( l.coordinate.latitude ) ) ) ) &amp;lt;= :distance&quot;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Location&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;findAllByCoordinateAndDistanceInMeters&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;      
            &lt;span class=&quot;token annotation punctuation&quot;&gt;@Param&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;current_coordinate&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Coordinate&lt;/span&gt; coordinate&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;token annotation punctuation&quot;&gt;@Param&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;distance&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;double&lt;/span&gt; distance
    &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;br&gt; 위 로직은 &lt;code class=&quot;language-text&quot;&gt;좌표 기반 거리 계산을 위한 Haversine 공식&lt;/code&gt;을 적용한 것입니다.
&lt;br&gt; 로직을 이해하기도 어렵고, Table Full Scan을 통해 쿼리가 수행되므로, 성능 개선이 필요한 상태입니다.&lt;/p&gt;
&lt;h3&gt;공간 인덱스 적용&lt;/h3&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;//build.gradle&lt;/span&gt;

implementation &apos;org&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;hibernate&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;hibernate&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;spatial&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;6.2&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;.5&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;Final&apos;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;우선, 공간 인덱스를 적용하기 위해 위와 같은 의존성을 추가해 줍니다.
&lt;br&gt; 버전은 프로젝트에서 사용하고 있는 JPA 버전에 따라 달라집니다.&lt;/p&gt;
&lt;hr&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;    &lt;span class=&quot;token comment&quot;&gt;// Location.class&lt;/span&gt;

        &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
    &lt;span class=&quot;token comment&quot;&gt;/*
     * 4326은 데이터베이스에서 사용하는 여러 SRID 값 중, 일반적인 GPS기반의 위/경도 좌표를 저장할 때 쓰이는 값입니다.
     * */&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;static&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;final&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;GeometryFactory&lt;/span&gt; geometryFactory &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;GeometryFactory&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;PrecisionModel&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 number&quot;&gt;4326&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 annotation punctuation&quot;&gt;@Column&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;columnDefinition &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;geometry SRID 4326&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; nullable &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Point&lt;/span&gt; coordinate&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Coordinate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Point&lt;/span&gt; point&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;coordinate &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; point&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;


    &lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;static&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Coordinate&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;of&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;double&lt;/span&gt; latitude&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;double&lt;/span&gt; longitude&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;token function&quot;&gt;validateRange&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;latitude&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; longitude&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 class-name&quot;&gt;Point&lt;/span&gt; point &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; geometryFactory&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createPoint&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;&lt;span class=&quot;token namespace&quot;&gt;org&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;locationtech&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;jts&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;geom&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;/span&gt;Coordinate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;longitude&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; latitude&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

        &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Coordinate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;point&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;위 코드에서 주의 깊게 보아야 할 점은 &lt;code class=&quot;language-text&quot;&gt;SRID&lt;/code&gt;입니다.
&lt;br&gt; SRID는 여러 좌표(평면 좌표, 공간 좌표 등)를 나타내는 식별자라고 생각하시면 됩니다.
&lt;br&gt; 만약, SRID 값이 서로 다를 경우, 공간 인덱스를 적용할 수 없습니다.
&lt;br&gt; (엄밀히 이야기하자면, 인덱스를 타지 않는다고 표현하는 것이 맞는 것 같습니다.)
&lt;br&gt; 힘들게 공간 인덱스를 적용했는데 ! 실제 쿼리에서 Full-Scan이 일어난다면.. 마음이 아프겠죠 ?
&lt;br&gt; 코드 주석으로도 남겨져 있지만, 일반적인 위/경도 좌표를 저장할 때 쓰이는 값인 &lt;code class=&quot;language-text&quot;&gt;4326&lt;/code&gt;으로 SRID 값을 설정하였습니다.&lt;/p&gt;
&lt;hr&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;    &lt;span class=&quot;token comment&quot;&gt;// LocationRepository.class&lt;/span&gt;

    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Query&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
            &lt;span class=&quot;token string&quot;&gt;&quot;SELECT l FROM Location l &quot;&lt;/span&gt;
                    &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;WHERE ST_Contains(ST_Buffer(:coordinate, :distance), l.coordinate.coordinate)&quot;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Location&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;findAllByCoordinateAndDistanceInMeters&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
            &lt;span class=&quot;token annotation punctuation&quot;&gt;@Param&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;coordinate&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Point&lt;/span&gt; coordinate&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;token annotation punctuation&quot;&gt;@Param&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;distance&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;double&lt;/span&gt; distance
    &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;br&gt; 위 코드에서 &lt;code class=&quot;language-text&quot;&gt;ST_Contains&lt;/code&gt;와 &lt;code class=&quot;language-text&quot;&gt;ST_Buffer&lt;/code&gt;라는 함수가 생소하실 텐데요.
&lt;br&gt; 이는 MySQL에서 공간 인덱스를 지원해 주는 함수입니다.
&lt;br&gt; 각 함수를 간단하게 설명하자면 다음과 같습니다.
&lt;strong&gt;&lt;br&gt; ST_Buffer(Coordinate, Distance) : Coordinate로부터, Distance(Meter)내에 존재하는 MBR을 반환한다.&lt;/strong&gt;
&lt;strong&gt;&lt;br&gt; ST_Contains(MBR, Coordinate) : MBR 이내에 해당 Coordinate의 포함 여부를 반환한다.&lt;/strong&gt;
&lt;br&gt; 이처럼, MySQL에서 지원해주는 함수를 통해 공간 인덱스를 적용할 모든 준비가 끝났습니다.&lt;/p&gt;
&lt;p&gt;물론, 위 로직에서는 한 가지 문제가 존재합니다.
&lt;br&gt;&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&gt;
    &lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 282px; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/4a703b890030da2757d4709ef387cf27/75fda/st_buffer-st_contains.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: 95.29411764705883%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAAAsTAAALEwEAmpwYAAACaklEQVR42o2Uz0sbQRTH/VP0oKjg7x8XQS8qCOKPsydvXiQ5eNGDPzBUhYKYksbSELQE66qYtiElevAHKJQWGgvSaw89FCnYRO12d7Mz376ZTdbsZtNm4TGzb9989r3vvJkqzjkKxhgrMW6aDvOMKWJUFb8AwpwPc5nX4wkUz+d0GkepFI5PTpA8P8enw0P8DAaRCwRgLi/jdn0dV8oe3p+d4ej0FMcUe3F56YA6gPuKggVa/HRlBR9HRqDW14PX1ADV1dLEXK+txfXgIJ4tLWFhdRUvwuHywHgigeDaGm6GhoCGBvD2dqCz89E6OixfYyOyfX2I0M+jsZhUyhN4kEziijITCxgtRlubp8lvFPOtvx9b29ulGdJWwSTnh0gEGgVCZFEGVjAusqUqLhYXocvdYwUgvZhMOm/m5wHSSJZXARCk8Y/JSeRkiqyoZNFP5DN8fqCuriIg8mUb4+Oy2ZwainRFoj6fBfyHfm5gbmzMDbTqN2jIzM5WXLIEkoa3ExNSf7g3RQCvNzaQI10qATIRQ7FfZmbcmyJKttrm3Zs4vvf2Ai0tMP/XNjT+6u7G3mZY6i8Ynn0Yo7JNCkRrK1hXl93QsqlpLnxcgOl7gjR/ubNjl1sCfBuPI0DndX9uDpmeHik6b2oCmpulyTn5VIIm/X48IYm2olF3Y8MGpuiwh0MhPKfuf0Vjenoad6OjYAMD4HQqfg8P4+vUFF4TKEQxm3SOlV3F+ywLpqZpUFUVGtmDriNDQj/oBsy7e7Bs1vbdG4aMEbF/aE3Z+1Ba/lbkVurIDyiuxHkHltyHcDi9Lk27+csCYc//Al2kyPAhJdWGAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;img.png&apos; title=&apos;&apos; src=&apos;/static/4a703b890030da2757d4709ef387cf27/75fda/st_buffer-st_contains.png&apos; srcset=&apos;/static/4a703b890030da2757d4709ef387cf27/e7570/st_buffer-st_contains.png 170w,
/static/4a703b890030da2757d4709ef387cf27/75fda/st_buffer-st_contains.png 282w&apos; sizes=&apos;(max-width: 282px) 100vw, 282px&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;img.png&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;출처 : 매튜&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;위 사진 속 원의 원점이 좌표라고 가정하면 특정 거리 내의 좌표들은 빨간색 원 이내에 존재해야 합니다.
&lt;br&gt; 하지만, 위 로직에서는 회색의 잉여 공간(?)이 존재하게 됩니다.
&lt;br&gt; 즉, 특정 거리보다 더 멀리 있는 좌표들도 조회할 수 있게 되는 문제가 발생합니다.
&lt;br&gt; 이를 해결하는 방법은 &lt;code class=&quot;language-text&quot;&gt;ST_DISTANCE&lt;/code&gt;라는 함수를 사용하는 것입니다.
&lt;br&gt; 하지만, 해당 함수는 공간 인덱스를 지원하지 않는다는 단점이 존재합니다.
&lt;br&gt; 정확성이 요구되는 서비스라면, 공간 인덱스를 사용하기 어렵다는 뜻이죠.
&lt;br&gt; 우리 서비스에서는 &lt;code class=&quot;language-text&quot;&gt;엄청난 정확성을 요구하지 않는다는 점&lt;/code&gt;과 &lt;code class=&quot;language-text&quot;&gt;성능 향상&lt;/code&gt;의 이유에서 위의 로직을 그대로 가져가기로 결정했습니다. &lt;/p&gt;
&lt;hr&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;sql&quot;&gt;&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;ALTER&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;TABLE&lt;/span&gt; location &lt;span class=&quot;token keyword&quot;&gt;ADD&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;COLUMN&lt;/span&gt; coordinate &lt;span class=&quot;token keyword&quot;&gt;GEOMETRY&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;NOT&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;NULL&lt;/span&gt; SRID &lt;span class=&quot;token number&quot;&gt;4326&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;만약, 해당 테이블 새로 생성한 것이 아니라, 기존 테이블 구조를 변경한다면 SRID 값을 명시적으로 설정해 주어야 합니다.&lt;/strong&gt;
&lt;strong&gt;&lt;br&gt; 단순히 컬럼만 추가한다면, SRID 값이 0으로 설정되기 때문이죠.&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;sql&quot;&gt;&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;create&lt;/span&gt; spatial &lt;span class=&quot;token keyword&quot;&gt;index&lt;/span&gt; location_idx01 &lt;span class=&quot;token keyword&quot;&gt;on&lt;/span&gt; location&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;coordinate&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;/p&gt;
&lt;h3&gt;성능 테스트&lt;/h3&gt;
&lt;p&gt;총 데이터는 약 10만건이 존재하며, 1km 이내의 데이터, 3km 이내의 데이터 조회를 수행하였습니다.&lt;/p&gt;
&lt;p&gt;공간 인덱스 적용 전
1km 이내 (40건)&lt;br&gt;
&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&gt;
    &lt;span class=&apos;gatsby-resp-image-wrapper&apos; style=&apos;position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 631px; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/864352edc04fe0fb8a9ce4fc2b6fc381/077d3/test-not-spatial-1km.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: 37.05882352941176%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA9klEQVR42oWR2U6FMBRFC2EqBaSFMIaZa7ySG///67Y9RzFGDT7slBS69uJUlGUJGUUIZYzeaOypxFRoLFWJlyyGUTFyYyClhOM4EEJc5zgOzPOMqqrwlOcoohC178E4Asr5feA79Hz+USS4vW4adG2LpuvQTxMbqyRBlmWc3JalaQrf968NT7pSik1f73e8PR54vt0wjSO2bcO+70gsnKC0BkHAiWhUYcgrSX2WfZDpg9YaruvKkMla1nWNYRg4WmsuXJYFxs6UbIui4BJ6RyGoOGdAwL7v2YZyznW0lgQkMzpARpeX43ne1++cm67rcv690T/yDhUVneoxoQXOAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;test-not-spatial-1km.png&apos; title=&apos;&apos; src=&apos;/static/864352edc04fe0fb8a9ce4fc2b6fc381/077d3/test-not-spatial-1km.png&apos; srcset=&apos;/static/864352edc04fe0fb8a9ce4fc2b6fc381/e7570/test-not-spatial-1km.png 170w,
/static/864352edc04fe0fb8a9ce4fc2b6fc381/f46e7/test-not-spatial-1km.png 340w,
/static/864352edc04fe0fb8a9ce4fc2b6fc381/077d3/test-not-spatial-1km.png 631w&apos; sizes=&apos;(max-width: 631px) 100vw, 631px&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;test-not-spatial-1km.png&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;3km 이내 (300건)&lt;br&gt;
&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/211d1b93e00e49752380933d5a6356f8/00c79/test-not-spatial-3km.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: 52.94117647058824%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABWklEQVR42pVS2W6DQBBbbrIQyMENCYqCCAX1/z/PHW8Filq1TR+sZWeQx+uxapoGWZbhdDqZs6lr1FWFSGtEUYS2bU0vCAKEYWjA75/uyvd9c3FdF47rwSY8D5ZlwbZtsM+eUuo1xHEMItrvUScxxjTGIJiOCao0gZbeXnpJkmzg/bn2fFecvhOpWgrvqcZSF5ivHeYyxxSHOIoNtIKvoGIq/w3qer1+ThD2bBeishVa30EniGz5SUhI9PKT8zxHI8ZXsggdxShkScFOS9MST11DxleseCb/po51fnCbfd/jdrvhbZrQi+pcntl1ndkycT6fjUcvLEiZqVR4v9+xLAvmeQatIFgj2RqhWmKVpikOhwOKotjiRtA6tUovyxLjOOLxeBgwnyQchgGXy8UQ8SQJ8+ZJtHiusdvi5TiOUUh2klIpTyqgEk7WEvLNo79AInrFiWvxX0H+gg+BVPc0ndVKzgAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;test-not-spatial-3km.png&apos; title=&apos;&apos; src=&apos;/static/211d1b93e00e49752380933d5a6356f8/ca1dc/test-not-spatial-3km.png&apos; srcset=&apos;/static/211d1b93e00e49752380933d5a6356f8/e7570/test-not-spatial-3km.png 170w,
/static/211d1b93e00e49752380933d5a6356f8/f46e7/test-not-spatial-3km.png 340w,
/static/211d1b93e00e49752380933d5a6356f8/ca1dc/test-not-spatial-3km.png 680w,
/static/211d1b93e00e49752380933d5a6356f8/00c79/test-not-spatial-3km.png 879w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;test-not-spatial-3km.png&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;공간 인덱스 적용 후
1km 이내 (40건)&lt;br&gt;
&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/14c3ee91ccfcfdb7d96661b680facd32/3bd09/test-spatial-1km.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: 8.235294117647058%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAXElEQVR42o2OzQqAMAyDu11q1/1UGQMvvoD4/o8X7UDPHsKXlAZChy64uuG0jC0JWAQhBBDR5B/FGL8Ojd6xr4ZhDaVktOYsSCmh1gpVnfS7+ze7/EeeAU7vMDNum+ksGmreviMAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;test-spatial-1km.png&apos; title=&apos;&apos; src=&apos;/static/14c3ee91ccfcfdb7d96661b680facd32/ca1dc/test-spatial-1km.png&apos; srcset=&apos;/static/14c3ee91ccfcfdb7d96661b680facd32/e7570/test-spatial-1km.png 170w,
/static/14c3ee91ccfcfdb7d96661b680facd32/f46e7/test-spatial-1km.png 340w,
/static/14c3ee91ccfcfdb7d96661b680facd32/ca1dc/test-spatial-1km.png 680w,
/static/14c3ee91ccfcfdb7d96661b680facd32/3bd09/test-spatial-1km.png 896w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;test-spatial-1km.png&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;3km 이내 (300건)&lt;br&gt;
&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/fc391f90d439899ede99d95b34f42266/6f18b/test-spatial-3km.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: 9.411764705882353%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAX0lEQVR42mWNSwrAIAxERQU1mvjBnqD0AL3/4aZGKBS6eGTyFjOGa8U5Ku4puIQgpSCEAOccvPc/vt5a+/OGmdFW6TEnRmvovUNEkFICEW3KGlFel3PeV4djjPvXrO4B2k4sZc5AZW0AAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;test-spatial-3km.png&apos; title=&apos;&apos; src=&apos;/static/fc391f90d439899ede99d95b34f42266/ca1dc/test-spatial-3km.png&apos; srcset=&apos;/static/fc391f90d439899ede99d95b34f42266/e7570/test-spatial-3km.png 170w,
/static/fc391f90d439899ede99d95b34f42266/f46e7/test-spatial-3km.png 340w,
/static/fc391f90d439899ede99d95b34f42266/ca1dc/test-spatial-3km.png 680w,
/static/fc391f90d439899ede99d95b34f42266/6f18b/test-spatial-3km.png 886w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;test-spatial-3km.png&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;성능이 최소 10배 이상 차이 나는 것을 확인할 수 있었습니다.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;예비군으로 인해, 대신 성능 테스트를 진행해 준 &lt;code class=&quot;language-text&quot;&gt;준팍&lt;/code&gt; 고맙습니다 !&lt;/strong&gt;&lt;/p&gt;
&lt;h3&gt;마치며&lt;/h3&gt;
&lt;p&gt;공간 인덱스 적용을 위해 사용한 함수들은 &lt;code class=&quot;language-text&quot;&gt;MySQL&lt;/code&gt;에서 지원하는 함수입니다.
&lt;br&gt; 즉, 테스트 환경이 &lt;code class=&quot;language-text&quot;&gt;H2&lt;/code&gt;라면 오류가 발생할 수 있습니다.
&lt;br&gt; &lt;code class=&quot;language-text&quot;&gt;H2&lt;/code&gt;에서는 지원해 주지 않는 함수들이기 때문이죠.
&lt;br&gt; 이런 상황에서는 &lt;code class=&quot;language-text&quot;&gt;TestContainer&lt;/code&gt;를 통해 해결할 수 있습니다.&lt;/p&gt;
&lt;p&gt;테스트 환경이 &lt;code class=&quot;language-text&quot;&gt;MySQL&lt;/code&gt;이더라도, &lt;code class=&quot;language-text&quot;&gt;@DataJpaTest&lt;/code&gt;를 사용한다면 오류가 발생할 수 있습니다.
&lt;br&gt; 내부적으로 인메모리 &lt;code class=&quot;language-text&quot;&gt;H2&lt;/code&gt;를 사용하기 때문인데요.
&lt;br&gt; &lt;code class=&quot;language-text&quot;&gt;@AutoConfigureTestDatabase(replace = Replace.NONE)&lt;/code&gt;설정을 통해 해결할 수 있습니다.&lt;/p&gt;
&lt;h3&gt;참고&lt;/h3&gt;
&lt;p&gt;Real My SQL 8.0 1판/2판&lt;/p&gt;</content:encoded></item><item><title><![CDATA[괜찮을지도 사이트 최적화 진행]]></title><description><![CDATA[…]]></description><link>https://map-befine-official.github.io/how-to-optimize-website/</link><guid isPermaLink="false">https://map-befine-official.github.io/how-to-optimize-website/</guid><pubDate>Wed, 18 Oct 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;이 글은 우테코 괜찮을지도팀의 &lt;code class=&quot;language-text&quot;&gt;패트릭&lt;/code&gt;이 작성했습니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;홈페이지에서 용량을 많이 차지하고 페이지 로딩 속도에 영향을 미치는 이미지와 번들 사이즈 최적화를 진행하였습니다.&lt;/p&gt;
&lt;h2&gt;이미지 최적화&lt;/h2&gt;
&lt;p&gt;홈페이지에서 가장 많은 용량을 차지하고 페이지 로딩 속도에 가장 큰 영향을 미치는 것은 이미지라는 의견이 나왔습니다. 백엔드 쪽에서는 이미지 업로드 용량 한계치를 두고 프론트 단에서 용량을 줄이기로 하였습니다.&lt;/p&gt;
&lt;h3&gt;browser-image-compression 라이브러리 사용&lt;/h3&gt;
&lt;p&gt;&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/b9abf696ad9f3c8375d6cd4623544367/4a768/browser-compression.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: 19.411764705882355%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAABYlAAAWJQFJUiTwAAAA3klEQVR42jVQ7WqEMBD0/V/BX30FU5Ur9o+Uo3/sKxwqfqMxxpjoXZhmUxoYws7ODLsbVFWFvu8xDAO6rsM0TSjLEuM4em5ZFs81TeO5tm29vqpr8HlCu2iEnzWkfoJekGUZ4jhGmqZgEcNPUeDjdsM7YwjDEIWr8zxHFEVgjiNdkiQe3/cvPHqBt7yDOl9/gcdxgHCdF/R1YtU79stgN9rzQgg/pZQSnHMopTxP9bqu7t+c13iNtRYBGahhjIF2jUFyzLvAZhTsy2J2Qlqdwmjl/1A6A4G8Qmz+JBT4C4xBJXG8L9MZAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;Alt text&apos; title=&apos;&apos; src=&apos;/static/b9abf696ad9f3c8375d6cd4623544367/ca1dc/browser-compression.png&apos; srcset=&apos;/static/b9abf696ad9f3c8375d6cd4623544367/e7570/browser-compression.png 170w,
/static/b9abf696ad9f3c8375d6cd4623544367/f46e7/browser-compression.png 340w,
/static/b9abf696ad9f3c8375d6cd4623544367/ca1dc/browser-compression.png 680w,
/static/b9abf696ad9f3c8375d6cd4623544367/4a768/browser-compression.png 738w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;Alt text&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;그리고 하나의 이미지와 여러 개의 이미지를 압축하는 곳이 따로 있어 구분해서 적용하기 위해 custom hook으로 분리하였습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;typescript&quot;&gt;&lt;pre class=&quot;language-typescript&quot;&gt;&lt;code class=&quot;language-typescript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; imageCompression &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;browser-image-compression&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;useCompressImage&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;compressImage&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;async&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;file&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; File&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; resizingBlob &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;imageCompression&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;file&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      maxSizeMB&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// 최대 이미지 용량&lt;/span&gt;
      maxWidthOrHeight&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;750&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// 최대 이미지 크기&lt;/span&gt;
      useWebWorker&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// 비동기 처리 유무&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; resizingFile &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;File&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;resizingBlob&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; file&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      type&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; file&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;type&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; resizingFile&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;compressImageList&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;async&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;files&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; FileList&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; compressedImageList&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; File&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

    &lt;span class=&quot;token keyword&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; file &lt;span class=&quot;token keyword&quot;&gt;of&lt;/span&gt; files&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; compressedImage &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;compressImage&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;file&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      compressedImageList&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;compressedImage&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; compressedImageList&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; compressImage&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; compressImageList &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt; useCompressImage&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;이를 통해 성능이 개선된 지표입니다.
&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/87d8b8cffc0e2dc00a071b2320b0147c/544f7/optimize-compress.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: 35.88235294117647%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAABYlAAAWJQFJUiTwAAABMklEQVR42m2RbauCQBCF/f+/xi9aFGYpiCBRmUigpYUovQdpJpXncgaMe+EOLDsze3bm2VmlLEvcbjdwf71eeDwe4r/fbzyfT6zXa+z3e8Rx/F3UnE4nRFGENE0lx5im0HFdF4vFAkmSYDabwbZtbDYbNE0Dy7Lkoud56Pf7mEwmyLJMtKZpwnEcjEYj0UjBz+cjZDT6LEI67iSt61qIuNq2/WqY786o70w5HA5CNZ1OpdN8PpcGfOpgMIBhGNA0TXw+nfkgCKDrOnq9HlRVxW63k2JsKITswE6Xy0W60hh3s62qSuZJXUfIc+73+/0v4fl8RhiGMtjlconVaiWFr9crxuMxhsOhUB2PRxRFITNkLs/zL9VvU0jEp/ATfN+XS6Qh2Xa7leGTlCTUdh/C+L+CP2MEB6mVkpqxAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;Alt text&apos; title=&apos;&apos; src=&apos;/static/87d8b8cffc0e2dc00a071b2320b0147c/ca1dc/optimize-compress.png&apos; srcset=&apos;/static/87d8b8cffc0e2dc00a071b2320b0147c/e7570/optimize-compress.png 170w,
/static/87d8b8cffc0e2dc00a071b2320b0147c/f46e7/optimize-compress.png 340w,
/static/87d8b8cffc0e2dc00a071b2320b0147c/ca1dc/optimize-compress.png 680w,
/static/87d8b8cffc0e2dc00a071b2320b0147c/544f7/optimize-compress.png 684w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;Alt text&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;h2&gt;번들 사이즈&lt;/h2&gt;
&lt;p&gt;이미지 다음으로 번들 사이즈가 페이지 로딩 속도에 영향을 끼친다는 것을 알았습니다. 동적 import(lazy, suspense 이용)와 tree shaking을 통해 개선할 수 있었습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;typescript&quot;&gt;&lt;pre class=&quot;language-typescript&quot;&gt;&lt;code class=&quot;language-typescript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; SelectedTopic &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;lazy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;./pages/SelectedTopic&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; NewPin &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;lazy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;./pages/NewPin&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; NewTopic &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;lazy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;./pages/NewTopic&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; SeeAllPopularTopics &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;lazy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;./pages/SeeAllPopularTopics&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; SeeAllNearTopics &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;lazy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;./pages/SeeAllNearTopics&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; SeeAllLatestTopics &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;lazy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;./pages/SeeAllLatestTopics&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; KakaoRedirect &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;lazy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;./pages/KakaoRedirect&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; Profile &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;lazy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;./pages/Profile&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; AskLogin &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;lazy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;./pages/AskLogin&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; Bookmark &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;lazy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;./pages/Bookmark&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;typescript&quot;&gt;&lt;pre class=&quot;language-typescript&quot;&gt;&lt;code class=&quot;language-typescript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;SuspenseComp&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; children &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; SuspenseCompProps&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;Suspense fallback&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;null&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;children&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;Suspense&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  path&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;topics/:topicId&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  element&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 operator&quot;&gt;&amp;lt;&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;SelectedTopic &lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  withAuth&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&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;
  path&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;new-topic&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  element&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 operator&quot;&gt;&amp;lt;&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;NewTopic &lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  withAuth&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  path&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;new-pin&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  element&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 operator&quot;&gt;&amp;lt;&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;NewPin &lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  withAuth&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  path&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;see-all/popularity&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  element&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 operator&quot;&gt;&amp;lt;&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;SeeAllPopularTopics &lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  withAuth&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&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;
  path&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;see-all/near&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  element&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 operator&quot;&gt;&amp;lt;&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;SeeAllNearTopics &lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  withAuth&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&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;
  path&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;see-all/latest&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  element&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 operator&quot;&gt;&amp;lt;&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;SeeAllLatestTopics &lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  withAuth&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&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;
  path&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;favorite&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  element&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 operator&quot;&gt;&amp;lt;&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;Bookmark &lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  withAuth&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  path&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;my-page&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  element&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 operator&quot;&gt;&amp;lt;&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;Profile &lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  withAuth&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  path&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;/askLogin&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  element&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 operator&quot;&gt;&amp;lt;&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;AskLogin &lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;SuspenseComp&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  withAuth&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&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;ul&gt;
&lt;li&gt;개선 전
&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/fd8d5231661eed9ec1b3b8cdabd41d85/58c38/before.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: 38.82352941176471%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB0UlEQVR42n2Q7U9SYRiH+Q8thqM3AnNpvgKGKwRna7NVH/pa683VahYqtbKyjWjmUgIJKjgdgVNaULAz5JDjZZ4DVweoPtTyfvbbnu3Zc+26fwalkKZerSDXZYTtD7yRQqxJrwlvhdgof0QsC3qSbNY3Wck/wZ+5TFXboTVN/fw9hmIpT0Nr8E6Jc/f7LXz5WR7k5/HnfNwWZrgRu8qd1AzPi0tcEc/gDXVT3i3uAdzZbr2w+O0xvREro5EhvJIbl+TAlXEyJto5KdnxfJ7gnDiCe30fiiq3PzcajT/RNK0D/PRFoqkD/RsLmJ+acCWdDCcGMa3ux6zbmNdMdK8aORg9wP3wTZYDD6nVKyhKmVKphCzLZLPZdlRVxVBRq23yvDCH0dfF4Eo/DmEEa+wIPfGj2GIWbG8tHMtYCVx/gTS0haqo7XVbVTV1m9+WbcOqVmtflgrPOBE9zvj7MTyp09iTw7hEB05hFEdiFHuin2tzr5i9UOCHstvp8N8KW8CO4WLhEX2JHsZFJwPxPozBLiyRQxyOmLGtWxhI9nJvOUhgIUe1ugew9svwpRzEK7q5lL7I+fQ0E6lTTKW9TKY9TGUmmZbOEs2HyeW+6stq/G9+AohlHK0lnoWUAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;Alt text&apos; title=&apos;&apos; src=&apos;/static/fd8d5231661eed9ec1b3b8cdabd41d85/ca1dc/before.png&apos; srcset=&apos;/static/fd8d5231661eed9ec1b3b8cdabd41d85/e7570/before.png 170w,
/static/fd8d5231661eed9ec1b3b8cdabd41d85/f46e7/before.png 340w,
/static/fd8d5231661eed9ec1b3b8cdabd41d85/ca1dc/before.png 680w,
/static/fd8d5231661eed9ec1b3b8cdabd41d85/02d09/before.png 1020w,
/static/fd8d5231661eed9ec1b3b8cdabd41d85/58c38/before.png 1260w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;Alt text&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/li&gt;
&lt;li&gt;개선 후
&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/234b5b3f41dd5ce6efb8d64d758535cd/5745f/after.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: 40.588235294117645%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAABYlAAAWJQFJUiTwAAACBElEQVR42m3S30+SURzHcf48L7ppdeHKi26aXRW5tXK1NnNaelGYFmuSJGCWQ7GLLEOkNQwV04wfCciPB56HB5yiTwOBBx7enWWu1vqenYuzs/Pa+ZzvMe0VZbS9JLV6ja3UF0L5VXKNPJslD77kIO/CgyzG7rMij5Gd87M77ENxrGHUmvyqdpu/y6SoCodamUajiSfrZnhngHHZhjt+F0fwHM7QRexrncxEu1m/Y2O1Y4y42U2r0jjxjLYw/0xTRi1yUKlQ1VuMZiyc9Z+hK3ABT8HGkjRBUH3JbnyCyLaF9KaPmdcJvN4Uum7874KYviUzSEqaphhPpVEubXTRE77OUNjM1eUOrDEzO6ERIoE+ohvTjHiyOLxFqsc6Bwf7HB0dUSgUUBQFVVUxfRVgTskIrsVI6hGdgfNc2bzMZOoZk9tWFvIu/N9vEwwPUJwaImj/yKsnh9Sr4kSrSalUQpZlyuWyWLcEmEgLMCs4A7tko2f7Gg92+3govaA3OcFYcprI1DiR+ed82LrH6uInAsE4x+2qyAvaDw1N06jVaieR4zmZvX1VcAaOnJ0bERE33c/cho/p+RXee9eJWmeJuuZ5u2wlFvKTycdotvXfr/ZPl3WxUTfq6IbOlOykN3yT4Xw/b5yfWeiWWLJkeax4ce0ESd5KkFjOEJdyYJz+mpPunoI/AbfWJVgmBIeYAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;Alt text&apos; title=&apos;&apos; src=&apos;/static/234b5b3f41dd5ce6efb8d64d758535cd/ca1dc/after.png&apos; srcset=&apos;/static/234b5b3f41dd5ce6efb8d64d758535cd/e7570/after.png 170w,
/static/234b5b3f41dd5ce6efb8d64d758535cd/f46e7/after.png 340w,
/static/234b5b3f41dd5ce6efb8d64d758535cd/ca1dc/after.png 680w,
/static/234b5b3f41dd5ce6efb8d64d758535cd/02d09/after.png 1020w,
/static/234b5b3f41dd5ce6efb8d64d758535cd/5745f/after.png 1258w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;Alt text&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/li&gt;
&lt;/ul&gt;</content:encoded></item><item><title><![CDATA[백엔드와 협력해 S3에 이미지 저장하기]]></title><description><![CDATA[이 글은 우테코 괜찮을지도팀의 가 작성했습니다. 백엔드 크루 '매튜'와 협력해 S…]]></description><link>https://map-befine-official.github.io/how-to-store-image-s3/</link><guid isPermaLink="false">https://map-befine-official.github.io/how-to-store-image-s3/</guid><pubDate>Wed, 18 Oct 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;이 글은 우테코 괜찮을지도팀의 &lt;code class=&quot;language-text&quot;&gt;패트릭&lt;/code&gt;가 작성했습니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;백엔드 크루 &apos;매튜&apos;와 협력해 S3에 이미지를 저장하는 작업을 진행하였습니다. 생각보다 시간도 오래 걸리고 어려움도 많았지만 많이 배웠고 보람있는 시간이었습니다.&lt;/p&gt;
&lt;h3&gt;이미지 관련 사용자 피드백&lt;/h3&gt;
&lt;p&gt;이미지를 string으로 저장하고 있어 이미지를 저장하는데 번거럽다는 피드백을 받았습니다.&lt;/p&gt;
&lt;h2&gt;formData를 통해 이미지 서버에 전송하기&lt;/h2&gt;
&lt;p&gt;file type의 Input 태그를 만듭니다.&lt;br&gt;
file을 서버로 전송하면 해당 file 데이터를 multipart/form-data형태로 받습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;typescript&quot;&gt;&lt;pre class=&quot;language-typescript&quot;&gt;&lt;code class=&quot;language-typescript&quot;&gt;&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;ImageInputButton id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;file&quot;&lt;/span&gt; type&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;file&quot;&lt;/span&gt; name&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;image&quot;&lt;/span&gt; onChange&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;onHandler&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;form 데이터를 동적으로 생성하고 전송 가능한 객체인 formData를 써서 내용을 key와 value 형식으로 보내도록 했습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;typescript&quot;&gt;&lt;pre class=&quot;language-typescript&quot;&gt;&lt;code class=&quot;language-typescript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; formData &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;FormData&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;formImage&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   formData&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;append&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;image&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; formImage&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;h3&gt;문제 상황 : 1차 서버 에러 발생&lt;/h3&gt;
&lt;p&gt;서버 Post 요청 시 서버쪽에서 아래와 같은 에러가 발생했습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// 에러&lt;/span&gt;
&lt;span class=&quot;token class-name&quot;&gt;Caused&lt;/span&gt; by&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;&lt;span class=&quot;token namespace&quot;&gt;org&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;apache&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;tomcat&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;util&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;http&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;fileupload&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;/span&gt;FileUploadException&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; the request was rejected because no multipart boundary was found
at &lt;span class=&quot;token class-name&quot;&gt;&lt;span class=&quot;token namespace&quot;&gt;org&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;apache&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;tomcat&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;util&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;http&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;fileupload&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;impl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;/span&gt;FileItemIteratorImpl&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;init&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;FileItemIteratorImpl&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;java&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;189&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
at &lt;span class=&quot;token class-name&quot;&gt;&lt;span class=&quot;token namespace&quot;&gt;org&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;apache&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;tomcat&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;util&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;http&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;fileupload&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;impl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;/span&gt;FileItemIteratorImpl&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getMultiPartStream&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;FileItemIteratorImpl&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;java&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;205&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
at &lt;span class=&quot;token class-name&quot;&gt;&lt;span class=&quot;token namespace&quot;&gt;org&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;apache&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;tomcat&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;util&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;http&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;fileupload&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;impl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;/span&gt;FileItemIteratorImpl&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;findNextItem&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;FileItemIteratorImpl&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;java&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;224&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
at &lt;span class=&quot;token class-name&quot;&gt;&lt;span class=&quot;token namespace&quot;&gt;org&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;apache&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;tomcat&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;util&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;http&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;fileupload&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;impl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;/span&gt;FileItemIteratorImpl&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;init&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;FileItemIteratorImpl&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;java&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;142&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
at &lt;span class=&quot;token class-name&quot;&gt;&lt;span class=&quot;token namespace&quot;&gt;org&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;apache&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;tomcat&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;util&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;http&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;fileupload&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;/span&gt;FileUploadBase&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getItemIterator&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;FileUploadBase&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;java&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;252&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
at &lt;span class=&quot;token class-name&quot;&gt;&lt;span class=&quot;token namespace&quot;&gt;org&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;apache&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;tomcat&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;util&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;http&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;fileupload&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;/span&gt;FileUploadBase&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;parseRequest&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;FileUploadBase&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;java&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;276&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
at &lt;span class=&quot;token class-name&quot;&gt;&lt;span class=&quot;token namespace&quot;&gt;org&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;apache&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;catalina&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;connector&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;/span&gt;Request&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;parseParts&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Request&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;java&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2799&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;46&lt;/span&gt; common frames omitted&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;에러의 원인은 boundary를 찾지 못해 나는 것이었고 formData에 파일이 있을 경우 브라우저는 자동으로 boundary를 붙여준다는 것을 알았습니다. 여기서 Post 요청을 할 때 개발자가 content-type을 multipart/form-data로 지정해주면 브라우저가 자동으로 생성한 boundary를 덮어써 버립니다. 그리고 서버는 요청 본문을 올바르게 파싱하지 못하여 파일 및 폼 데이터를 올바르게 처리하지 못합니다.&lt;br&gt;
그래서 content-type을 지우면 해결이 될거라고 생각해 지웠습니다. 그러나 역시 문제는 쉽게 해결되지 않는 법! 또 다른 에러가 발생하였습니다.&lt;/p&gt;
&lt;h3&gt;문제 상황 : 2차 서버 에러 발생&lt;/h3&gt;
&lt;p&gt;json 데이터를 application/json 타입으로 명시해 주지 않아 octet-stream(8비트 단위의 이진 데이터)로 인식하여 발생한 에러였습니다. &apos;Blob(Binary Large Object)&apos;을 사용하여 해결할 수 있었습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; data &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;JSON&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;stringify&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;objectData&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// Blob처리로 JSON 문자열이 이진 데이터로 변환. 또한 type에 application/json을 명시&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; jsonBlob &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Blob&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; type&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &apos;application&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;json&apos; &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;

formData&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;append&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&apos;request&apos;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; jsonBlob&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;이러한 과정을 통해 서버에 이미지와 데이터를 전송할 수 있었고 이를 바탕으로 S3에 이미지를 저장할 수 있었습니다!&lt;/p&gt;</content:encoded></item><item><title><![CDATA[N + 1 문제 해결 도중 맞닥뜨린 Set 과 List 의 차이]]></title><description><![CDATA[…]]></description><link>https://map-befine-official.github.io/set-or-list/</link><guid isPermaLink="false">https://map-befine-official.github.io/set-or-list/</guid><pubDate>Sun, 15 Oct 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;이 글은 우테코 괜찮을지도의 &lt;code class=&quot;language-text&quot;&gt;매튜&lt;/code&gt;가 작성하였습니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;서론&lt;/h3&gt;
&lt;h2&gt;간단한 도메인 설명&lt;/h2&gt;
&lt;p&gt;저희 서비스에는 &lt;code class=&quot;language-text&quot;&gt;Topic&lt;/code&gt; 이라는 도메인이 존재하고, 이는 &lt;code class=&quot;language-text&quot;&gt;지도&lt;/code&gt;를 의미합니다.&lt;/p&gt;
&lt;p&gt;그리고 해당 &lt;code class=&quot;language-text&quot;&gt;지도&lt;/code&gt;는 &lt;code class=&quot;language-text&quot;&gt;Permission(권한)&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;Pin(핀)&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;Bookmark(즐겨찾기)&lt;/code&gt; 들과 &lt;code class=&quot;language-text&quot;&gt;1:N&lt;/code&gt; &lt;code class=&quot;language-text&quot;&gt;연관관계&lt;/code&gt;를 이루고 있습니다.&lt;/p&gt;
&lt;h2&gt;문제 발생 상황&lt;/h2&gt;
&lt;h3&gt;문제 상황&lt;/h3&gt;
&lt;p&gt;이 글에서 주로 탐구하고 있는 문제는 서비스 홍보를 앞두고 성능 개선을 하기 위해 &lt;code class=&quot;language-text&quot;&gt;N + 1&lt;/code&gt; 문제를 해결하고 있던 와중 발생하였습니다.&lt;/p&gt;
&lt;p&gt;일단 유의미한 성능 차이를 보기 위해, 우선적으로 &lt;code class=&quot;language-text&quot;&gt;Topic&lt;/code&gt; 과 &lt;code class=&quot;language-text&quot;&gt;Pin&lt;/code&gt; 데이터를 각각 &lt;code class=&quot;language-text&quot;&gt;10만개&lt;/code&gt;씩 넣고 진행하였습니다.&lt;/p&gt;
&lt;p&gt;또한 요청은 &lt;code class=&quot;language-text&quot;&gt;PostMan&lt;/code&gt; 을 이용하여 테스트 하였습니다.&lt;/p&gt;
&lt;p&gt;아래는 그 때의 &lt;code class=&quot;language-text&quot;&gt;코드&lt;/code&gt;입니다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Topic&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@Entity&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@NoArgsConstructor&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;access &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;PROTECTED&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@Getter&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Topic&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;BaseTimeEntity&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  

&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 생략

&lt;span class=&quot;token annotation punctuation&quot;&gt;@ManyToOne&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;fetch &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;FetchType&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;LAZY&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@JoinColumn&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;name &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;member_id&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Member&lt;/span&gt; creator&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  

&lt;span class=&quot;token annotation punctuation&quot;&gt;@OneToMany&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mappedBy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;topic&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Permission&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; permissions &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;ArrayList&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  

&lt;span class=&quot;token annotation punctuation&quot;&gt;@OneToMany&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mappedBy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;topic&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; cascade &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;CascadeType&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;PERSIST&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Pin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; pins &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;ArrayList&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  

&lt;span class=&quot;token annotation punctuation&quot;&gt;@OneToMany&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mappedBy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;topic&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; cascade &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;CascadeType&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;PERSIST&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; orphanRemoval &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Bookmark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; bookmarks &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;ArrayList&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  

&lt;span class=&quot;token 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;/li&gt;
&lt;/ul&gt;
&lt;p&gt;}&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;- TopicRepository
```java
@Repository  
public interface TopicRepository extends JpaRepository&amp;lt;Topic, Long&gt; {  

    @EntityGraph(attributePaths = {&quot;creator&quot;, &quot;permissions&quot;, &quot;bookmarks&quot;, &quot;pins&quot;})  
    List&amp;lt;Topic&gt; findAll();  

}&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;당연히 위 코드는 &lt;code class=&quot;language-text&quot;&gt;MultipleBagFetchExcepion&lt;/code&gt; 예외가 발생하였습니다. (&lt;code class=&quot;language-text&quot;&gt;MultipleBagFetchExcepion&lt;/code&gt; 자세한 설명은 &lt;a href=&quot;https://map-befine-official.github.io/jpa-multibag-fetch-exception/&quot;&gt;https://map-befine-official.github.io/jpa-multibag-fetch-exception/&lt;/a&gt; 해당 글을 확인해주세요!)&lt;/p&gt;
&lt;h3&gt;MultipleBagFetchExcepion 해결&lt;/h3&gt;
&lt;p&gt;우리는 해당 예외를 해결하기 위해 &lt;code class=&quot;language-text&quot;&gt;Topic&lt;/code&gt; 의 &lt;code class=&quot;language-text&quot;&gt;Collection&lt;/code&gt; 들의 &lt;code class=&quot;language-text&quot;&gt;자료구조&lt;/code&gt;를 &lt;code class=&quot;language-text&quot;&gt;Set&lt;/code&gt; 으로 바꿔주었습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@Entity&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@NoArgsConstructor&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;access &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;PROTECTED&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@Getter&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Topic&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;BaseTimeEntity&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  

	&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 생략
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@ManyToOne&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;fetch &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;FetchType&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;LAZY&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@JoinColumn&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;name &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;member_id&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Member&lt;/span&gt; creator&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@OneToMany&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mappedBy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;topic&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Set&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Permission&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; permissions &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;HasSet&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@OneToMany&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mappedBy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;topic&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; cascade &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;CascadeType&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;PERSIST&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Set&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Pin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; pins &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;HashSet&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@OneToMany&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mappedBy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;topic&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; cascade &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;CascadeType&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;PERSIST&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; orphanRemoval &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Set&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Bookmark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; bookmarks &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;HashSet&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  

	&lt;span class=&quot;token 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;code class=&quot;language-text&quot;&gt;Query&lt;/code&gt; 로 존재하는 모든 &lt;code class=&quot;language-text&quot;&gt;Topic&lt;/code&gt; 을 불러 올 수 있었습니다.&lt;/p&gt;
&lt;p&gt;하지만, &lt;code class=&quot;language-text&quot;&gt;카테시안 곱&lt;/code&gt; 으로 인해 요청에 대한 응답시간이 어마어마 했습니다. (대략 &lt;code class=&quot;language-text&quot;&gt;20초&lt;/code&gt; 정도?)&lt;/p&gt;
&lt;h3&gt;Topic findAll성능 개선 완료&lt;/h3&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Topic&lt;/code&gt;을 전체 조회할 때 사실 &lt;code class=&quot;language-text&quot;&gt;Bookmark(즐겨찾기)&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;Pin(핀)&lt;/code&gt; 의 세부 정보가 아닌, 이들의 개수만이 필요하기 때문에, 반정규화를 통해 이 문제를 해결하였습니다.&lt;/p&gt;
&lt;p&gt;결론적으로 아래와 같이, &lt;code class=&quot;language-text&quot;&gt;Collection&lt;/code&gt; 중에는 &lt;code class=&quot;language-text&quot;&gt;Permission&lt;/code&gt; 만을 &lt;code class=&quot;language-text&quot;&gt;join&lt;/code&gt; 해오면 되는 거죠!&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@Repository&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;interface&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;TopicRepository&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;JpaRepository&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Topic&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Long&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  

    &lt;span class=&quot;token annotation punctuation&quot;&gt;@EntityGraph&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;attributePaths &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;creator&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;permissions&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
    &lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Topic&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;findAll&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;code class=&quot;language-text&quot;&gt;Topic&lt;/code&gt; 을 아래와 같이 바꾸는 일이 있었습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@Entity&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@NoArgsConstructor&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;access &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;PROTECTED&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@Getter&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Topic&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;BaseTimeEntity&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  

	&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 생략
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@ManyToOne&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;fetch &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;FetchType&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;LAZY&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@JoinColumn&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;name &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;member_id&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Member&lt;/span&gt; creator&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@OneToMany&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mappedBy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;topic&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Set&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Permission&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; permissions &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;HasSet&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@OneToMany&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mappedBy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;topic&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; cascade &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;CascadeType&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;PERSIST&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Pin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; pins &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;ArrayList&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// Set --&gt; List 로 바꿈&lt;/span&gt;
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@OneToMany&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mappedBy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;topic&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; cascade &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;CascadeType&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;PERSIST&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; orphanRemoval &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Set&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Bookmark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; bookmarks &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;HashSet&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  

	&lt;span class=&quot;token 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;code class=&quot;language-text&quot;&gt;Collection&lt;/code&gt; 의 자료구조를 &lt;code class=&quot;language-text&quot;&gt;Set&lt;/code&gt; 만을 썼을때보다 속도가 굉장히 빨라졌었습니다.&lt;/p&gt;
&lt;p&gt;이 때 당시에 모두 이에 대해 왜 이런 것이지? 하는 의문을 가졌었지만, 시간이 없어 어쩔 수 없이 넘어갔었습니다.&lt;/p&gt;
&lt;p&gt;그리고 시간이 지나, 어느정도 여유가 생긴 지금, 해당 문제에 대해 탐구해보고자 글을 작성하게 된 것입니다.&lt;/p&gt;
&lt;h2&gt;재연&lt;/h2&gt;
&lt;h3&gt;상황을 그때와 동일하게 구성해보자.&lt;/h3&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;프로시저를&lt;/code&gt; 통해 &lt;code class=&quot;language-text&quot;&gt;Local DB&lt;/code&gt; 에다가 &lt;code class=&quot;language-text&quot;&gt;Topic&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;Bookmark&lt;/code&gt; 데이터를 &lt;code class=&quot;language-text&quot;&gt;10만개&lt;/code&gt; 가량을 넣어주고 테스트를 진행했습니다. (내 컴퓨터 살려..)&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Pin&lt;/code&gt; 데이터를 넣지 않은 이유는, 현재 &lt;code class=&quot;language-text&quot;&gt;Pin&lt;/code&gt; 은 &lt;code class=&quot;language-text&quot;&gt;반정규화&lt;/code&gt;가 진행되어 있어 &lt;code class=&quot;language-text&quot;&gt;Topic&lt;/code&gt; 전체 목록을 조회할 때, 성능에 전혀 영향을 끼치지 않기 때문입니다.&lt;/p&gt;
&lt;p&gt;그렇다고 &lt;code class=&quot;language-text&quot;&gt;Pin&lt;/code&gt; &lt;code class=&quot;language-text&quot;&gt;반정규화&lt;/code&gt;를 풀자니, 요청과 응답 시간이 비 정상적으로 너무 길어졌습니다. (대략 1분 30초 정도)&lt;/p&gt;
&lt;p&gt;그렇기 때문에 일단 &lt;code class=&quot;language-text&quot;&gt;Pin&lt;/code&gt; 은 일단 &lt;code class=&quot;language-text&quot;&gt;반정규화&lt;/code&gt;를 유지하였고, &lt;code class=&quot;language-text&quot;&gt;Bookmark&lt;/code&gt; 만 &lt;code class=&quot;language-text&quot;&gt;반정규화&lt;/code&gt;를 해제하고 진행하였습니다.&lt;/p&gt;
&lt;p&gt;그렇기 때문에 테스트를 위해서 &lt;code class=&quot;language-text&quot;&gt;자료구조&lt;/code&gt;를 변경하게 될 &lt;code class=&quot;language-text&quot;&gt;Collection&lt;/code&gt; 은 사실상 &lt;code class=&quot;language-text&quot;&gt;Permission&lt;/code&gt; 과 &lt;code class=&quot;language-text&quot;&gt;Bookmark&lt;/code&gt; 뿐인 것 입니다.&lt;/p&gt;
&lt;h3&gt;테스트 진행&lt;/h3&gt;
&lt;p&gt;말씀드린 두 &lt;code class=&quot;language-text&quot;&gt;Collection&lt;/code&gt;의  &lt;code class=&quot;language-text&quot;&gt;자료구조&lt;/code&gt;를 바꿔가며 테스트 해본 결과는 아래와 같습니다. (&lt;code class=&quot;language-text&quot;&gt;Permission&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;Bookmark&lt;/code&gt; 모두 &lt;code class=&quot;language-text&quot;&gt;Set&lt;/code&gt; 이 아닌 경우는 &lt;code class=&quot;language-text&quot;&gt;MultipleBagFetchException&lt;/code&gt;  이 발생하기 때문에 테스트하지 않았습니다.)&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Permission, Bookmark 모두 Set&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;txt&quot;&gt;&lt;pre class=&quot;language-txt&quot;&gt;&lt;code class=&quot;language-txt&quot;&gt;[http-nio-8080-exec-2] 2042 INFO  com.mapbefine.mapbefine.common.filter.LatencyLoggingFilter - Latency : 5.442s, Query count : 1, Request URI : /topics&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Permission  만 Set &lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;txt&quot;&gt;&lt;pre class=&quot;language-txt&quot;&gt;&lt;code class=&quot;language-txt&quot;&gt;[http-nio-8080-exec-3] 2181 INFO  com.mapbefine.mapbefine.common.filter.LatencyLoggingFilter - Latency : 7.074s, Query count : 1, Request URI : /topics&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Bookmark 만 Set&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;txt&quot;&gt;&lt;pre class=&quot;language-txt&quot;&gt;&lt;code class=&quot;language-txt&quot;&gt;[http-nio-8080-exec-1] 2072 INFO  com.mapbefine.mapbefine.common.filter.LatencyLoggingFilter - Latency : 5.348s, Query count : 1, Request URI : /topics&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;위 테스트 결과들만으로는 &lt;code class=&quot;language-text&quot;&gt;유의미한 차이&lt;/code&gt;가 보이지 않아 &lt;code class=&quot;language-text&quot;&gt;원인&lt;/code&gt;을 추론해보기 어려웠습니다.&lt;/p&gt;
&lt;h3&gt;지금까지 무의미한 데이터로 테스트 해본 것은 아닐까?&lt;/h3&gt;
&lt;p&gt;위와 같이 테스트하다가, 문득 &lt;code class=&quot;language-text&quot;&gt;Permission&lt;/code&gt; 에 &lt;code class=&quot;language-text&quot;&gt;데이터&lt;/code&gt;도 넣어봐야 유의미하지 않을까? 란 생각이 머리를 스쳐 지나갔고, &lt;code class=&quot;language-text&quot;&gt;Permission&lt;/code&gt; 데이터도 추가해주었습니다.&lt;/p&gt;
&lt;p&gt;하지만, &lt;code class=&quot;language-text&quot;&gt;Permission&lt;/code&gt; 을 추가해주니, &lt;code class=&quot;language-text&quot;&gt;카제인 곱&lt;/code&gt;이 엄청나게 발생되어, &lt;code class=&quot;language-text&quot;&gt;Permission&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;Bookmark&lt;/code&gt; 각각 데이터 개수가 &lt;code class=&quot;language-text&quot;&gt;3000개&lt;/code&gt;만 넘어가도 &lt;code class=&quot;language-text&quot;&gt;Java Heap&lt;/code&gt; 이 터지는 예외가 발생하게 되어, 적당히 &lt;code class=&quot;language-text&quot;&gt;2000&lt;/code&gt; 개 가량의 데이터를 각각 넣어주고, 이어서 테스트를 진행해본 결과 아래와 같은 결과가 나오게 되었습니다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Permission 과 Bookmark 모두  Set&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;txt&quot;&gt;&lt;pre class=&quot;language-txt&quot;&gt;&lt;code class=&quot;language-txt&quot;&gt;[http-nio-8080-exec-3] 1863 INFO  com.mapbefine.mapbefine.common.filter.LatencyLoggingFilter - Latency : 4.924s, Query count : 1, Request URI : /topics&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Permission 만 Set 일 때&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;txt&quot;&gt;&lt;pre class=&quot;language-txt&quot;&gt;&lt;code class=&quot;language-txt&quot;&gt;[http-nio-8080-exec-2] 1952 INFO  com.mapbefine.mapbefine.common.filter.LatencyLoggingFilter - Latency : 5.159s, Query count : 1, Request URI : /topics&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Bookmark 만 Set 일 때&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;txt&quot;&gt;&lt;pre class=&quot;language-txt&quot;&gt;&lt;code class=&quot;language-txt&quot;&gt;[http-nio-8080-exec-3] 2000 INFO  com.mapbefine.mapbefine.common.filter.LatencyLoggingFilter - Latency : 7.253s, Query count : 1, Request URI : /topics&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;테스트 데이터를 변경하더라도, 역시나 &lt;code class=&quot;language-text&quot;&gt;유의미한 차이&lt;/code&gt;를 볼 수 없었습니다.&lt;/p&gt;
&lt;h3&gt;내린 결론 (가설)&lt;/h3&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Set&lt;/code&gt; 자료구조를 사용함에 따라, &lt;code class=&quot;language-text&quot;&gt;List&lt;/code&gt; 보다는 부하가 더 발생할 수 있다고 생각합니다.&lt;/p&gt;
&lt;p&gt;자료구조 특성상 &lt;code class=&quot;language-text&quot;&gt;Set&lt;/code&gt; 은 중복을 제거해주는 연산을 실행해주어야 하니까요.&lt;/p&gt;
&lt;p&gt;하지만, 어짜피 &lt;code class=&quot;language-text&quot;&gt;List&lt;/code&gt; 를 사용하더라도 &lt;code class=&quot;language-text&quot;&gt;hibernate&lt;/code&gt; 에서 &lt;code class=&quot;language-text&quot;&gt;distinct&lt;/code&gt; 를 통해 &lt;code class=&quot;language-text&quot;&gt;중복&lt;/code&gt;을 제거해주기 때문에 더더욱이 유의미한 성능상의 차이를 가져오지 못하는 것 같습니다.&lt;/p&gt;
&lt;p&gt;정말 많이 테스트해보면서, 가끔 컴퓨터의 상태에 따라 응답시간이 비정상적으로 길어지는 경우가 있었습니다.&lt;/p&gt;
&lt;p&gt;저희는 그것을 보았던 것 아닐까요??&lt;/p&gt;
&lt;h2&gt;이대로 끝내기는 아쉬우니까!&lt;/h2&gt;
&lt;h3&gt;JPA 에서 Set 을 사용할 때 주의할 점&lt;/h3&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;문제&lt;/code&gt;를 탐구하다가 &lt;code class=&quot;language-text&quot;&gt;재미있는 글&lt;/code&gt;을 발견했습니다.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.inflearn.com/questions/321256/collection-type%EC%9C%BC%EB%A1%9C-set-%EB%8C%80%EC%8B%A0-list%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0%EA%B0%80-%EC%9E%88%EB%8A%94%EC%A7%80%EC%9A%94&quot;&gt;JPA 에서 Set 을 사용할 때 주의점&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;질문은 아래와 같았습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;txt&quot;&gt;&lt;pre class=&quot;language-txt&quot;&gt;&lt;code class=&quot;language-txt&quot;&gt;Collection type으로 Set 대신 List를 사용하시는 이유가 궁금합니다.

지금까지 나온 Collection들이 모두 unique한 Entity(또는 값 타입)들의 collection이기 때문에, Set을 활용할 경우 중복 확인 관련 부분이 깔끔해지고, 다른 질문의 답변에서 답해주신대로 값 타입 컬렉션에도 row를 모두 날리고 다시 넣는 문제를 막을 수 있어 Set에 대해 좋은 인상을 가지게 되었습니다.

그런데 기본적으로 예제가 List를 사용하여, Set을 사용하였을 때 제가 놓친 문제가 있는지 의문이 들었습니다.&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;그에 대한 영한님의 답변은 이랬습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;txt&quot;&gt;&lt;pre class=&quot;language-txt&quot;&gt;&lt;code class=&quot;language-txt&quot;&gt;안녕하세요. Catnip님

좋은 질문입니다. Set이 개념적으로 좋지만 실무에서는 성능 이슈가 있습니다.

Set은 중복을 제거해야 하는데, 그렇다는 것은 기존 데이터 중에 중복이 있는지 비교를 해야 합니다. 이게 일반적으로는 크게 문제가 없는데, 지연 로딩으로 컬렉션을 조회했을 때 문제가 됩니다.

컬력션이 아직 초기화 되지 않은 상태에서 컬렉션에 값을 넣게 되면 프록시가 강제로 초기화 되는 문제가 발생합니다. 왜냐하면 중복 데이터가 있는지 비교해야 하는데, 그럴러면 컬렉션에 모든 데이터를 로딩해야 하기 때문입니다.

반면에 List는 이런 중복 체크가 필요없이 때문에 데이터를 추가할 때 초기화가 발생하지 않습니다.

감사합니다.&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;아주 흥미로웠습니다.&lt;/p&gt;
&lt;p&gt;이를 제대로 확인해보기 위해서 테스트를 진행하였습니다.&lt;/p&gt;
&lt;h3&gt;테스트&lt;/h3&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@Test&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@Transactional&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Topic&lt;/span&gt;의_Collection_의_자료구조에_따른_초기화를_확인해보자&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  
    &lt;span class=&quot;token comment&quot;&gt;//given  &lt;/span&gt;
    &lt;span class=&quot;token class-name&quot;&gt;Member&lt;/span&gt; savedMember &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; memberRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;save&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MemberFixture&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;create&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;member&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;member@naver.com&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Role&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;USER&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 class-name&quot;&gt;Topic&lt;/span&gt; savedTopic &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; topicRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;save&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;TopicFixture&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createPublicAndAllMembersTopic&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;savedMember&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 class-name&quot;&gt;Location&lt;/span&gt; savedLocation &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; locationRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;save&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;LocationFixture&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;create&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token comment&quot;&gt;// when  &lt;/span&gt;
    entityManager&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;clear&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 class-name&quot;&gt;Topic&lt;/span&gt; findTopic &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; topicRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;findById&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;savedTopic&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;get&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 class-name&quot;&gt;Pin&lt;/span&gt; savedPin &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; pinRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;save&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;PinFixture&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;create&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;savedLocation&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; savedTopic&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; savedMember&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token comment&quot;&gt;// then  &lt;/span&gt;
    &lt;span class=&quot;token class-name&quot;&gt;System&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;out&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;println&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;=============Add Pin 이전&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
    findTopic&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addPin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;savedPin&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 class-name&quot;&gt;System&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;out&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;println&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;=============Add Pin 이후&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
    entityManager&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;flush&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;code class=&quot;language-text&quot;&gt;Pins&lt;/code&gt; 를 &lt;code class=&quot;language-text&quot;&gt;List&lt;/code&gt; 혹은 &lt;code class=&quot;language-text&quot;&gt;Set&lt;/code&gt; 으로 진행해보았다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Pins 가 List 일 때 쿼리&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;txt&quot;&gt;&lt;pre class=&quot;language-txt&quot;&gt;&lt;code class=&quot;language-txt&quot;&gt;... 이전 쿼리들
=============Add Pin 이전
=============Add Pin 이후
Hibernate: 
update
    topic 
set
    ... 수 많은 컬럼들
where
    id=?&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Pins 가 Set 일 때 쿼리&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;txt&quot;&gt;&lt;pre class=&quot;language-txt&quot;&gt;&lt;code class=&quot;language-txt&quot;&gt;... 이전 쿼리들
=============Add Pin 이전
Hibernate: 
select
	... 수 많은 컬럼들
from
    pin p1_0 
left join
    member c1_0 
        on c1_0.id=p1_0.member_id 
left join
    location l1_0 
        on l1_0.id=p1_0.location_id 
where
    p1_0.topic_id=? 
    and (
        p1_0.is_deleted = false
    ) 
=============Add Pin 이후
Hibernate: 
update
    topic 
set
	... 수 많은 컬럼들
where
    id=?&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;영한님의 말씀대로 &lt;code class=&quot;language-text&quot;&gt;List&lt;/code&gt; 는 &lt;code class=&quot;language-text&quot;&gt;Collection&lt;/code&gt; 에 값을 &lt;code class=&quot;language-text&quot;&gt;추가&lt;/code&gt; 를 진행할 때, 기존의 데이터가 필요 없으니, 초기화를 진행하지 않지만, &lt;code class=&quot;language-text&quot;&gt;Set&lt;/code&gt; 을 쓰는 경우 중복을 방지하기 위해 기존의 데이터가 필요하기 때문에 &lt;code class=&quot;language-text&quot;&gt;select&lt;/code&gt; 를 통해 값을 가져와 초기화를 진행해주는 것을 볼 수 있었습니다.&lt;/p&gt;
&lt;p&gt;즉, 이렇게 &lt;code class=&quot;language-text&quot;&gt;fetch&lt;/code&gt; 전략으로 &lt;code class=&quot;language-text&quot;&gt;Lazy Loading&lt;/code&gt; 을 사용하는 경우 &lt;code class=&quot;language-text&quot;&gt;자료구조&lt;/code&gt;로 &lt;code class=&quot;language-text&quot;&gt;Set&lt;/code&gt; 을 사용하는 경우, &lt;code class=&quot;language-text&quot;&gt;연관관계 매핑&lt;/code&gt;을 하게 되었을 때, 해당 &lt;code class=&quot;language-text&quot;&gt;부작용&lt;/code&gt;이 발생할 수 있는 것입니다.&lt;/p&gt;
&lt;p&gt;조심해서 써야겠습니다.&lt;/p&gt;
&lt;h2&gt;최종적인 결론&lt;/h2&gt;
&lt;p&gt;이 글의 최종적인 결론은 아래와 같습니다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;사실 &lt;code class=&quot;language-text&quot;&gt;Set&lt;/code&gt; 과 &lt;code class=&quot;language-text&quot;&gt;List&lt;/code&gt; 로 인한 &lt;code class=&quot;language-text&quot;&gt;성능 차이&lt;/code&gt;는 &lt;code class=&quot;language-text&quot;&gt;유의미하지 않은&lt;/code&gt; 것 같다. 우리가 착각했던 것일지도..?&lt;/li&gt;
&lt;li&gt;하지만, &lt;code class=&quot;language-text&quot;&gt;Set&lt;/code&gt; 을 무지성으로 써도 되는 것은 아니다, 이로부터 얻는 부작용이 상당히 많으니, 고심해서 사용하자 (순서 보장 x, 위에서 설명한 초기화 문제)&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;긴 글 봐주셔서 정말 감사합니다~!&lt;/p&gt;</content:encoded></item><item><title><![CDATA[JPA 엔티티를 삭제할 때 영속성과 연관 관계가 중요한 이유]]></title><description><![CDATA[이 글은 우테코 괜찮을지도의 가 작성하였습니다. 삭제 기능에 대한 리팩터링 중, 회원 차단에 대한 기존 테스트가 실패해 이를 해결해야 했는데요. JPA에 대한 지식이 부족한 상태에서 삽질을 하며 알게 된 것들을 기록하고자 합니다. 문제 상황…]]></description><link>https://map-befine-official.github.io/trouble-shooting-jpa-delete-and-persistence/</link><guid isPermaLink="false">https://map-befine-official.github.io/trouble-shooting-jpa-delete-and-persistence/</guid><pubDate>Fri, 13 Oct 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;이 글은 우테코 괜찮을지도의 &lt;code class=&quot;language-text&quot;&gt;도이&lt;/code&gt;가 작성하였습니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;삭제 기능에 대한 리팩터링 중, 회원 차단에 대한 기존 테스트가 실패해 이를 해결해야 했는데요.&lt;br&gt;
JPA에 대한 지식이 부족한 상태에서 삽질을 하며 알게 된 것들을 기록하고자 합니다.&lt;/p&gt;
&lt;h2&gt;문제 상황 1 : 쿼리의 발생 시점 찾기&lt;/h2&gt;
&lt;h3&gt;도메인: 회원 차단 기능&lt;/h3&gt;
&lt;p&gt;도메인에 대해 먼저 설명드리겠습니다.&lt;br&gt;
관리자 API에서 회원을 차단하면, 차단한 회원의 지도 &lt;code class=&quot;language-text&quot;&gt;Topic&lt;/code&gt;, 핀 &lt;code class=&quot;language-text&quot;&gt;Pin&lt;/code&gt;, 핀 이미지 &lt;code class=&quot;language-text&quot;&gt;PinImage&lt;/code&gt;를 삭제 상태(soft delete)로 변경합니다.&lt;br&gt;
그리고 매핑 테이블 역할을 하는 엔티티인 &lt;code class=&quot;language-text&quot;&gt;Bookmark 즐겨찾기&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;Atlas 모아보기&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;Permission 권한&lt;/code&gt;은 실제로 삭제(hard delete)합니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;    &lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;blockMember&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Long&lt;/span&gt; memberId&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 class-name&quot;&gt;Member&lt;/span&gt; member &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;findMemberById&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;memberId&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        member&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;updateStatus&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Status&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;BLOCKED&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

        &lt;span class=&quot;token function&quot;&gt;deleteAllRelated&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;member&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;deleteAllRelated&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Member&lt;/span&gt; member&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 class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Long&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; pinIds &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;extractPinIdsByMember&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;member&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 class-name&quot;&gt;Long&lt;/span&gt; memberId &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; member&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&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;

        permissionRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;memberId&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        atlasRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;memberId&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        bookmarkRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;memberId&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        pinImageRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByPinIds&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;pinIds&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        pinRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;memberId&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        topicRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;memberId&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;/p&gt;
&lt;ol&gt;
&lt;li&gt;차단할 회원에 대한 정보 조회&lt;/li&gt;
&lt;li&gt;회원의 상태를 차단으로 변경하는 update 쿼리 발생&lt;/li&gt;
&lt;li&gt;매핑 테이블 엔티티들을 먼저 삭제해야 함, 이 때 delete 쿼리 발생&lt;/li&gt;
&lt;li&gt;주요 도메인 엔티티들을 삭제 상태로 변경하는 update 쿼리 발생&lt;/li&gt;
&lt;/ol&gt;
&lt;h3&gt;예상과 다른 영속 동작&lt;/h3&gt;
&lt;p&gt;테스트 코드는 아래와 같습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;    &lt;span class=&quot;token annotation punctuation&quot;&gt;@DisplayName&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;Member를 차단(탈퇴시킬)할 경우, Member가 생성한 지도, 핀, 핀 이미지를 삭제 상태(soft delete)로 변경한다.&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Test&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;blockMember_Success&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;token comment&quot;&gt;//given&lt;/span&gt;
        &lt;span class=&quot;token comment&quot;&gt;// ...    &lt;/span&gt;
        &lt;span class=&quot;token comment&quot;&gt;// 객체 생성, 저장 및 기존 상태 검증 코드 생략&lt;/span&gt;
        &lt;span class=&quot;token comment&quot;&gt;// ...&lt;/span&gt;
            
        &lt;span class=&quot;token comment&quot;&gt;//when&lt;/span&gt;
        adminCommandService&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;blockMember&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;member&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

        &lt;span class=&quot;token comment&quot;&gt;//then&lt;/span&gt;
        &lt;span class=&quot;token class-name&quot;&gt;Member&lt;/span&gt; blockedMember &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; memberRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;findById&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;member&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;get&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

        &lt;span class=&quot;token function&quot;&gt;assertAll&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
            &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;blockedMember&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getStatus&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isEqualTo&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Status&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;BLOCKED&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// 실패&lt;/span&gt;
            &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;bookmarkRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;existsByMemberIdAndTopicId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;member&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&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; topic&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
            &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isFalse&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// 실패&lt;/span&gt;
            &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;atlasRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;existsByMemberIdAndTopicId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;member&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&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; topic&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isFalse&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// 실패&lt;/span&gt;
            &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;permissionRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;existsByTopicIdAndMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;topic&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&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; member&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
            &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isFalse&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// 실패&lt;/span&gt;
            &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;topicRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;existsById&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;topic&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isFalse&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; 
            &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;pinRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;existsById&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;pin&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isFalse&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;pinImageRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;existsById&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;pinImage&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isFalse&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;하지만 테스트가 실패해 로그를 보니, 실제 동작은 아래와 같았습니다. 😧😧&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;차단할 회원에 대한 정보 조회&lt;/li&gt;
&lt;li&gt;&lt;del&gt;회원의 상태를 차단으로 변경하는 update 쿼리 발생&lt;/del&gt;&lt;/li&gt;
&lt;li&gt;&lt;del&gt;매핑 테이블 엔티티들을 먼저 삭제해야 함, 이 때 delete 쿼리 발생&lt;/del&gt;&lt;/li&gt;
&lt;li&gt;주요 도메인 엔티티들을 삭제 상태로 변경하는 update 쿼리 발생&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;// when&lt;/code&gt; 절의 코드를 호출한 뒤 entityManager로 flush, clear를 해주어도 마찬가지였습니다.  &lt;/p&gt;
&lt;h2&gt;원인&lt;/h2&gt;
&lt;p&gt;이전에는 잘 통과하던 테스트인데, 왜 갑자기 예상과 다르게 작동할까요?&lt;br&gt;
JPA 영속성 컨텍스트의 쓰기 지연 때문이었습니다.  &lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;hard delete 메서드를 통해 해당 id를 가진 엔티티를 영속성 컨텍스트에서 제거한다.&lt;/li&gt;
&lt;li&gt;soft delete 메서드를 통해 update를 호출하면서, 연관된 엔티티들이 모두 영속화된다.&lt;br&gt;
➡️ (1)에서 delete 해도, 2에서 조회할 때 함께 불러와지는 &lt;code class=&quot;language-text&quot;&gt;member&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;permission&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;atlas&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;bookmark&lt;/code&gt;까지 다시 영속화된다.   &lt;/li&gt;
&lt;li&gt;영속성 컨텍스트에는 &lt;code class=&quot;language-text&quot;&gt;(차단 상태가 아닌)member&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;permission&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;atlas&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;bookmark&lt;/code&gt;가 존재한다.&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;blockMember()&lt;/code&gt; 호출 후 flush를 할 때, 영속성 컨텍스트의 상태를 기준으로 쿼리가 발생한다.&lt;br&gt;
➡️ member의 차단 상태에 대한 변경 감지도 되지 않고, delete 쿼리도 나가지 않는다.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;그래서 &lt;code class=&quot;language-text&quot;&gt;blockMember()&lt;/code&gt; 메서드를 호출한 뒤 flush를 해줘도 소용이 없었던 것입니다.  &lt;/p&gt;
&lt;h2&gt;해결&lt;/h2&gt;
&lt;p&gt;단순히 해결부터 해보자면,&lt;br&gt;
soft delete 메서드로 인한 영속화가 되기 이전에 flush해서 member의 변경, hard delete에 대한 쿼리를 발생시키면 됩니다.  &lt;/p&gt;
&lt;h3&gt;flush로 쿼리 발생 시점 조정하기&lt;/h3&gt;
&lt;p&gt;아래 처럼 서비스 단에서 해주거나, &lt;code class=&quot;language-text&quot;&gt;@Modifying&lt;/code&gt; 어노테이션을 사용할 수 있습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;deleteAllRelated&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Member&lt;/span&gt; member&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        permissionRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;memberId&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        atlasRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;memberId&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        bookmarkRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;memberId&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        &lt;span class=&quot;token comment&quot;&gt;// flush!&lt;/span&gt;
        bookmarkRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;flush&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;
        pinImageRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByPinIds&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;pinIds&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        pinRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;memberId&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        topicRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;memberId&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2&gt;문제 상황 2 : 테스트에서 발생하지 않는 일부 쿼리&lt;/h2&gt;
&lt;p&gt;그런데도 테스트는 성공하지 않았습니다. 🥲&lt;br&gt;
&lt;code class=&quot;language-text&quot;&gt;delete bookmark~&lt;/code&gt; 쿼리는 여전히 발생하지 않고 있었습니다.  &lt;/p&gt;
&lt;p&gt;테스트 메서드와 &lt;code class=&quot;language-text&quot;&gt;blockMember()&lt;/code&gt;는 같은 트랜잭션으로 묶이기 때문에 &lt;code class=&quot;language-text&quot;&gt;// when&lt;/code&gt;절에서의 영속화 상태 때문일 것이라 짐작했습니다.&lt;br&gt;
&lt;code class=&quot;language-text&quot;&gt;bookmark&lt;/code&gt;를 참조하는 &lt;code class=&quot;language-text&quot;&gt;topic&lt;/code&gt;, 또는 &lt;code class=&quot;language-text&quot;&gt;member&lt;/code&gt; 객체가 영속화되어있기 때문에 delete 쿼리가 나가지 않는 것이라 생각했습니다.  &lt;/p&gt;
&lt;p&gt;그래서 이에 대해서는 &lt;code class=&quot;language-text&quot;&gt;blockMember()&lt;/code&gt; 호출 전에 &lt;code class=&quot;language-text&quot;&gt;testEntityManager.clear()&lt;/code&gt;로 영속성 컨텍스트를 초기화해두는 것으로 해결했습니다.  &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;하지만 정확한 원인이 궁금했습니다.
왜 &lt;code class=&quot;language-text&quot;&gt;atlas&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;permission&lt;/code&gt;은 삭제되고 &lt;code class=&quot;language-text&quot;&gt;bookmark&lt;/code&gt;만 삭제되지 않았을까요?&lt;/strong&gt;  &lt;/p&gt;
&lt;h2&gt;원인&lt;/h2&gt;
&lt;p&gt;다른 매핑 테이블 엔티티들과 &lt;code class=&quot;language-text&quot;&gt;bookmark&lt;/code&gt;의 차이점을 살펴보았습니다.&lt;br&gt;
해당 엔티티만이 &lt;code class=&quot;language-text&quot;&gt;topic&lt;/code&gt;과의 연관 관계에서 &lt;code class=&quot;language-text&quot;&gt;CasecadeType.PERSIST&lt;/code&gt;가 걸려 있었습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;    &lt;span class=&quot;token comment&quot;&gt;// Topic.class&lt;/span&gt;
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@OneToMany&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mappedBy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;topic&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; cascade &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;CascadeType&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;PERSIST&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; orphanRemoval &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Bookmark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; bookmarks &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;ArrayList&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;테스트 메서드의 트랜잭션 내에서, 영속성 컨텍스트에 존재하는 &lt;code class=&quot;language-text&quot;&gt;topic&lt;/code&gt;에 &lt;code class=&quot;language-text&quot;&gt;bookmark&lt;/code&gt;가 살아있기 때문에&lt;br&gt;
&lt;code class=&quot;language-text&quot;&gt;PERSIST OPERATION&lt;/code&gt;이 발생하고 &lt;code class=&quot;language-text&quot;&gt;bookmark&lt;/code&gt;에 대한 delete 쿼리는 무시됩니다.  &lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;a href=&quot;https://download.oracle.com/otndocs/jcp/persistence-2_2-mrel-eval-spec/index.html&quot;&gt;JPA 2.2 specification&lt;/a&gt; 문서 3.2 장 Entity Instance&apos;s Life Cycle에 따르면,&lt;br&gt;
flush가 발생할 때 &lt;code class=&quot;language-text&quot;&gt;CascadeType.PERSIST&lt;/code&gt;나 &lt;code class=&quot;language-text&quot;&gt;CascadeType.ALL&lt;/code&gt;이 있을 경우 자식에 연쇄적으로 &lt;code class=&quot;language-text&quot;&gt;PERSIST OPERATION&lt;/code&gt;이 발생합니다.
&lt;code class=&quot;language-text&quot;&gt;PERSIST OPERATION&lt;/code&gt;은 연관 관계 매핑된 list의 엔티티에 대해 모두 이루어지며, 기존에 없던 값이면 새로 저장합니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;해결&lt;/h2&gt;
&lt;p&gt;이에 대해서 엔티티에 걸어놓은 조건에 따라 정상적으로 동작하도록 하려면,&lt;br&gt;
&lt;code class=&quot;language-text&quot;&gt;bookmarkRepository&lt;/code&gt;를 통해 delete 쿼리를 호출하는 대신 연관 관계를 제거하는 방식으로 삭제해주었어야 했던 것입니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;    &lt;span class=&quot;token comment&quot;&gt;// Topic.class&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;removeBookmarkBy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Member&lt;/span&gt; member&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        bookmarks&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;stream&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;filter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;bookmark &lt;span class=&quot;token operator&quot;&gt;-&gt;&lt;/span&gt; bookmark&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getMember&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isSame&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;member&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;findFirst&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;ifPresent&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;::&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;removeBookmark&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;
        bookmarkCount&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

    &lt;span class=&quot;token comment&quot;&gt;// AdminCommandService.class&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;deleteAllRelatedMember&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Member&lt;/span&gt; member&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 class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Long&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; pinIds &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;extractPinIdsByMember&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;member&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 class-name&quot;&gt;Long&lt;/span&gt; memberId &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; member&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&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;

        permissionRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;memberId&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        atlasRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;memberId&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        &lt;span class=&quot;token comment&quot;&gt;// 변경된 부분&lt;/span&gt;
        topicRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;findTopicsByBookmarksMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;memberId&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
            &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;forEach&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;topic &lt;span class=&quot;token operator&quot;&gt;-&gt;&lt;/span&gt; topic&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;removeBookmarkBy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;member&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;
        atlasRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;flush&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;
        pinImageRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByPinIds&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;pinIds&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        pinRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;memberId&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        topicRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;memberId&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;code class=&quot;language-text&quot;&gt;bookmark&lt;/code&gt;에 대한 삭제 로직을 수정하니,&lt;br&gt;
테스트 코드에서 별도의 &lt;code class=&quot;language-text&quot;&gt;clear&lt;/code&gt;를 호출하지 않아도 잘 통과하는 것을 확인할 수 있었습니다.&lt;/p&gt;
&lt;h2&gt;결론&lt;/h2&gt;
&lt;p&gt;이번 삽질을 계기로 JPA를 잘 학습한 뒤 사용해야 한다는 교훈을 다시 한 번 몸소 느꼈습니다..  &lt;/p&gt;
&lt;p&gt;엔티티의 생명 주기에 대해 잘 이해하고 객체를 생성 및 삭제해야한다는 것, 삭제할 때에도 연관 관계의 관리가 중요하다는 것을 알았습니다.
이처럼 예상하지 못한 동작을 피하기 위해 삭제 로직에서도 연관 관계 편의 메서드를 정의하는 방식으로 코드를 잘 작성할 필요가 있어 보입니다. &lt;/p&gt;
&lt;h2&gt;참고 자료&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://velog.io/@jsb100800/spring-12&quot;&gt;[Spring boot] JPA Delete is not Working, 영속성와 연관 관계를 고려했는가.&lt;/a&gt;  &lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://joont92.github.io/jpa/CascadeType-PERSIST%EB%A5%BC-%ED%95%A8%EB%B6%80%EB%A1%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0/&quot;&gt;[jpa] CascadeType.PERSIST를 함부로 사용하면 안되는 이유&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</content:encoded></item><item><title><![CDATA[HikariCP 적용기]]></title><description><![CDATA[이 글은 우아한테크코스 괜찮을지도팀의 가 작성했습니다. 배경 CPU…]]></description><link>https://map-befine-official.github.io/how-to-hikariCP/</link><guid isPermaLink="false">https://map-befine-official.github.io/how-to-hikariCP/</guid><pubDate>Tue, 10 Oct 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;이 글은 우아한테크코스 괜찮을지도팀의 &lt;code class=&quot;language-text&quot;&gt;쥬니&lt;/code&gt;가 작성했습니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;배경&lt;/h3&gt;
&lt;p&gt;CPU 코어가 하나인 컴퓨터라도 수십 또는 수백 개의 쓰레드를 &lt;code class=&quot;language-text&quot;&gt;동시에&lt;/code&gt; 지원할 수 있습니다.
&lt;br&gt; 하지만, 실제로 하나의 코어는 하나의 쓰레드만 실행할 수 있습니다.
&lt;br&gt; &lt;code class=&quot;language-text&quot;&gt;쓰레드 스케줄링&lt;/code&gt;을 통해, 하나의 코어에서도 여러 개의 쓰레드를 동시에 지원할 수 있는 것이죠.&lt;/p&gt;
&lt;p&gt;물론, 두 개의 쓰레드 A, B가 존재할 때 이를 순차적으로 실행하는 것이 성능적으로는 더 빠릅니다.
&lt;br&gt; &lt;code class=&quot;language-text&quot;&gt;Context Switching Overhead&lt;/code&gt;가 없기 때문이죠 !&lt;/p&gt;
&lt;p&gt;그렇다면, 어플리케이션과 관련된 쓰레드의 개수를 설정할 때, 코어의 개수와 동일하게 가져가면 될까요 ?
&lt;br&gt; &lt;strong&gt;결론부터 이야기하면, 그렇지 않습니다 !&lt;/strong&gt;
&lt;br&gt; 실제 어플리케이션에서는 데이터를 저장하고 있는 &lt;code class=&quot;language-text&quot;&gt;디스크&lt;/code&gt;를 고려해야 하기 때문입니다.&lt;/p&gt;
&lt;p&gt;어플리케이션에서 사용하는 데이터베이스에는 디스크가 존재합니다.
&lt;br&gt; 데이터를 읽기 위해서는, 물리적인 &lt;code class=&quot;language-text&quot;&gt;Disk Arm과 Spindle&lt;/code&gt;이 동작합니다.
&lt;br&gt; 원하는 데이터를 찾기 위해 위와 같은 동작을 수행하며, 이때 드는 비용은 상당히 큽니다.
&lt;br&gt; 이 시간을, &lt;code class=&quot;language-text&quot;&gt;I/O 대기 시간&lt;/code&gt;이라고 부르며, 해당 시간 동안 쓰레드들은 &lt;code class=&quot;language-text&quot;&gt;waiting&lt;/code&gt; 상태로 대기하게 됩니다.&lt;/p&gt;
&lt;p&gt;그렇기 때문에, I/O 대기 시간으로 인해 waiting 상태인 쓰레드가 생기게 됩니다.
&lt;br&gt; 즉, 일하지 않고 놀게 되는 코어가 생기게 됩니다.&lt;/p&gt;
&lt;p&gt;그렇다면, 데이터베이스 Connection과 관련된 &lt;code class=&quot;language-text&quot;&gt;Thread Pool&lt;/code&gt;의 크기는 어느 정도로 관리하는 게 좋을까요 ?&lt;/p&gt;
&lt;h3&gt;Hikari Connection Pool&lt;/h3&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;HikariCP&lt;/code&gt; 공식 문서에서는 아래와 같은 추천 공식을 제공하고 있습니다.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Connection Pool Size = (Core count * 2) + Effective spindle count&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;위 공식에서, &lt;code class=&quot;language-text&quot;&gt;Effective spindle count&lt;/code&gt;의 값은 사실상 하드디스크의 개수와 같다고 보면 됩니다.
&lt;br&gt; 디스크 1개당, 1개의 물리적 spindle을 가지고 있기 때문이죠.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;괜찮을지도&lt;/code&gt; 서비스의 운영 서버 EC2 환경은 2개의 코어와 1개의 디스크를 사용하고 있습니다.
&lt;br&gt; 이를 위 공식에 대입해 보면, &lt;code class=&quot;language-text&quot;&gt;Connection Pool Size = 2 * 2 + 1 = 5&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;즉, &lt;code class=&quot;language-text&quot;&gt;HikariCP&lt;/code&gt;에서 추천하는 커넥션 풀 사이즈는 5가 나오게 됩니다.&lt;/strong&gt;&lt;/p&gt;
&lt;h3&gt;성능 테스트&lt;/h3&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;HikariCP&lt;/code&gt;에서 추천하는 &lt;code class=&quot;language-text&quot;&gt;괜찮을지도&lt;/code&gt; 서비스의 커넥션 풀 사이즈는 &lt;code class=&quot;language-text&quot;&gt;5&lt;/code&gt;임을 알 수 있었습니다.
&lt;br&gt; 하지만, 이는 단순히 이론적인 내용일 뿐 맹신할 수는 없습니다.
&lt;br&gt; 그래서, &lt;code class=&quot;language-text&quot;&gt;JMETER&lt;/code&gt;를 이용한 성능 테스트를 수행하였습니다.
&lt;br&gt; 테스트에서는 다른 설정을 동일하게 두고, 커넥션 풀 사이즈만 변경하며 진행했습니다.&lt;/p&gt;
&lt;p&gt;Connection Pool Size는 아래와 같이 yml 파일을 작성하여 수정할 수 있습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yaml&quot;&gt;&lt;pre class=&quot;language-yaml&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;spring&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;datasource&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;hikari&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
      &lt;span class=&quot;token key atrule&quot;&gt;maximum-pool-size&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;5&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;- Connection Pool Size 10&lt;/strong&gt;
&lt;br&gt; 기본 설정값인 10으로 설정한 뒤, 테스트를 수행하였습니다.
&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/10a26b46520773c5069bbf584dacfc38/90f05/connection_pool_size_10.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: 47.64705882352941%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABkUlEQVR42o2R3XKbMBCFef+Hyk1nOpM06bSOsZ1icOyMkzgIIYEkJP5Od8GxL3rRMPPNWS1nj4SI0sMR6TbF29s7CllCiAKikP+HfWc+CKk0lvEaUd8P4GccR4ysX2Bg73hd943nJo6vr4isD/Bthya0k36FhpXnnIe3DVypMRiL/f6AyPkeLvSwvpv0X6g/eQa4dpi9LsCpGq52hIVpWnT0bpft6YQNGahhXEvaXXFnppre2QCrLawyMLKae76fqMnTEln6jEjbFowypGauL1CgrhpURYVK1qiUg2ZMOHvCNFPWdGI/IEkokIMUNUozh3KteIPSQOUaisIuvbOHA5QJl7WsPAz9l6eU7lDQjpIMhTSQpUVRtyh0AymqCe4XNMA9Vh7+1E+Eoq9wPTYJ3eFJOojSIT8piPcSOTHpRwVB4dJ0FBBo0w5CB8Ijp4BcXfVE88oOWP2hwN+rFMvNDovNMx7XOzzGWyzWGeLtC+5/rXH7sMT3uwV+cP0zxip5Ac+skgNpNmuc4ik74ubbHf4CH4H7TrRWz6MAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;connection_pool_size_10.png&apos; title=&apos;&apos; src=&apos;/static/10a26b46520773c5069bbf584dacfc38/ca1dc/connection_pool_size_10.png&apos; srcset=&apos;/static/10a26b46520773c5069bbf584dacfc38/e7570/connection_pool_size_10.png 170w,
/static/10a26b46520773c5069bbf584dacfc38/f46e7/connection_pool_size_10.png 340w,
/static/10a26b46520773c5069bbf584dacfc38/ca1dc/connection_pool_size_10.png 680w,
/static/10a26b46520773c5069bbf584dacfc38/90f05/connection_pool_size_10.png 917w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;connection_pool_size_10.png&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;- Connection Pool Size 5&lt;/strong&gt;
&lt;br&gt; HikariCP에서 제공하는 공식을 통해 도출된 값으로 설정한 뒤, 테스트를 수행하였습니다.
&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/8128bf50f73117b45859fedc872bdb32/3fcec/connection_pool_size_5.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: 47.05882352941176%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABVUlEQVR42l2R2XajQBBD+f9PnAzBxomTGJql9wVHoy7MHCcP96haJRUPNLfLG+ZVY9UGMSaUsgm5lJ+aH7pVj5ntjlzzPiCTFCISM402lssN9+/vPXSEn1UO3fe384Icsg6lwrlUnx9ovoYRPmaEVISYN+GYw/Ob5eACgo+I1GMfyh0xJPGbtuvh0wYbiuBCJnWmVt8luMXCzwbOeNi4CS5uj/yj5yKc5cG/3QXGF5KhWTYuy1tX1R5GaRgG9eEfO6Kl98AwowOaP+2ZgYLFZswMLTZhnS2WkT9qdljpL4dvd/0/m12FNWBZPZrz+wC1Rkw0JmUwDQumyUItHhMLSnNHnvW3J9Q+e8110Bh4UM0eSvGQ5hGTMVLHNfFopneQhOqP7PzQumO/afsvvF4GdO8K5+uMlvP5OtG7of+Y8XL6lPnl9IG2v6F7G9Ex00tmkMyu+/sf6Qu0us/J3qoAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;connection_pool_size_5.png&apos; title=&apos;&apos; src=&apos;/static/8128bf50f73117b45859fedc872bdb32/ca1dc/connection_pool_size_5.png&apos; srcset=&apos;/static/8128bf50f73117b45859fedc872bdb32/e7570/connection_pool_size_5.png 170w,
/static/8128bf50f73117b45859fedc872bdb32/f46e7/connection_pool_size_5.png 340w,
/static/8128bf50f73117b45859fedc872bdb32/ca1dc/connection_pool_size_5.png 680w,
/static/8128bf50f73117b45859fedc872bdb32/3fcec/connection_pool_size_5.png 914w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;connection_pool_size_5.png&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;유의미한 TPS 차이를 통해, 커넥션 풀 사이즈가 5일 때의 성능이 좋다는 것을 확인할 수 있었습니다.
&lt;br&gt; 물론, 트래픽 양에 따라, 다른 값을 적용하였을 때가 더 최적의 성능을 나타낼 수 있습니다.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;괜찮을지도&lt;/code&gt; 서비스에서는 성능 테스트 목표치량을 기준으로 테스트를 수행하였기 때문에, 위와 같은 결과가 도출되었습니다.&lt;/p&gt;
&lt;h3&gt;마치며&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;위에서도 이야기했지만, 공식을 통해 도출된 값이 항상 최적인 것은 아닙니다.&lt;/strong&gt;
&lt;br&gt;&lt;strong&gt;각 서비스의 특성에 맞게, 커넥션 풀 사이즈를 설정해 보시면서 테스트를 수행하여 최적의 값을 도출해 내시길 바랍니다.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;또한, 커넥션 풀 외에도 HikariCP에서 튜닝해야할 설정을 추천하고 있습니다.
&lt;br&gt; 이 부분도 &lt;a href=&quot;https://github.com/brettwooldridge/HikariCP/wiki/MySQL-Configuration&quot;&gt;참고&lt;/a&gt;하면 좋을 것 같습니다.&lt;/p&gt;
&lt;h3&gt;참고&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/brettwooldridge/HikariCP/wiki/About-Pool-Sizing&quot;&gt;HikariCP docs&lt;/a&gt;
&lt;br&gt;&lt;a href=&quot;https://github.com/brettwooldridge/HikariCP/wiki/MySQL-Configuration&quot;&gt;HikariCP MySQL Configuration&lt;/a&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Fetch join 사용 시 MultipleBagFetchException의 발생 이유와 해결 방법]]></title><description><![CDATA[이 글은 우테코 괜찮을지도팀의 가 작성했습니다. N+1과 Fetch join 백엔드에서는 조회 API로 여러 연관 관계로 인해 발생하는 N+1 문제를 해결해야 했는데요. 예를 들면 장소(이하 핀) 다건 조회의 경우, 각 핀이 속한 지도(topic…]]></description><link>https://map-befine-official.github.io/jpa-multibag-fetch-exception/</link><guid isPermaLink="false">https://map-befine-official.github.io/jpa-multibag-fetch-exception/</guid><pubDate>Wed, 04 Oct 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;이 글은 우테코 괜찮을지도팀의 &lt;code class=&quot;language-text&quot;&gt;도이&lt;/code&gt;가 작성했습니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;N+1과 Fetch join&lt;/h2&gt;
&lt;p&gt;백엔드에서는 조회 API로 여러 연관 관계로 인해 발생하는 N+1 문제를 해결해야 했는데요.&lt;br&gt;
예를 들면 장소(이하 핀) 다건 조회의 경우, 각 핀이 속한 지도(topic), 위치, 생성자, 핀 이미지들을 모두 별도로 조회하는 심각한 문제가 있었습니다.&lt;br&gt;
지도(topic) 조회 시에도 생성자, 권한 정보, 즐겨찾기 목록을 매번 불러왔고요.   &lt;/p&gt;
&lt;p&gt;&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/d27c9c172301ef1549f5e11026dc75e9/9ae5c/img.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: 122.94117647058822%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAZCAYAAAAxFw7TAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEmElEQVR42k1VaW/bRhDl//8VAQoE/VAURe0ARpMYjWzrjG5RFEWK96Wbknjo9OvMMlQtYERid+fN9fZRCjcJHt9GeHjtoTL2hf1QAjRUH5frFS9DB5+fe3jsmHjo2GhqAa60Xh3Z+P1rAw/VIb4NPbwpLi7nC6RlfEB9oOL15wBv3TG6qgV7eYC72uF0PsOPIrTaHYwVFabtYLXe4na7wLBdVNsD6G6IbX7Fap/hdDpByvIMk4kMQ9dgznS4toX395vI4nq5YB+v4bou4niLI5290FqSpvCDALZlwKHznmNjMY/EnpTnKQxDg+8H2Gw2mC8WBPiOM23GcQzPsjCdTjEajbDdbnE4HBDvdvDCkBKZQNM0dLtdzOdzyvwGKckyzEwqkyJZ5KzrOhzHwX6/F6DhcglVVcmZjJ4clNdNOtMfDDEcyXA9H0EQ4ng8QorJcSDLGPR76FGkfr+Peq0GWR6JiKvNGp7rwCWANEnEGvfK9OYYaTaGUxN91cBYt4uSo+UazdEU9f5YWIOs1hujM1KFo6LqqNSaeK5U8W+1gYluCEduC4Pzs3znvkvlIu4bxaZYJzsSFaLVBhw4mK+QZLlwZNCPdhZPAowPR7iLLaxohflmX0z3ShncrrCjGI2xiYE1R1v3Mfa3kJ0lDgTKwRioOP+/SYoV4rcvL/jrpYe66lFjT4Iu7CAT0N8/WniqD/EmW+jZK/StBeJDegfkCvLTGSn55czD/XoOXVXgEKcWUYgdUSKjyXPJ+90Gtmlgs1oipuEkRBn+8TTLSmpDE5++vOKp76KlB5Asx8PP/giVegt9eYIzRWPAhCbqhz66vR6mmk5c1ARlrhSI+ZkSuZlaYeAJ2kWLJTbbGNIuSWH5c1hehMUmLm4CgeV5jnW8Q0SE9X1fcHRJnOTMGYyzZJLrxM1Op4NavQ7TNCHxZC90Z89UP0+aAcuSfbo1PcqQb4lHoGc6x+v3kumsHS4hGy4GmoWZQyXzBh9gkDIq91GUTMLAUfmKLQicf3ye97mCNEtxYnACLmknleNmQCYyZ8HAvLmlXvGV9Egc2DgIT5erKcnMPhmBl3yUrkTG27UoIyd+5QScUY84okEgrU6X+tMsrNFElZ48jNsv2jAgZ3vnYZzk+LMyxOd/avg6cPFN9vHYNvCTKBAu1lDMABPLx8T0IM8cKIZH8pWJTAuZo1tyLjIWgMdTju5wiFZ3ANOPoDs+NocccUKDoQOcKf+K8o73Pp6I0IttAod8TGLIcpciJ3JLrMqsZb7nCUWxiMhlb3hA3Nv0Fy+ZLgzG2W33Kf54buPTYwVPbQ3fZapovSPFJscxCyhl2W63hVgmH2TqfvmZWh8sownbjkVqTp+F5YISMUVAie9fQBmyzDNxmR7swJlws/mdAflwSS1e59uiUyKKopB2yoL8vC4AWX1Zyj1SXv5W8MaeymUQfi95WqoLZ89VKMoEPVLtMam5G7AO7AtA3ZgJtWZQ7mVA0dar1V0XSyt0kAGvYtIqTX9Mk2frT2b0rSFA/mvLGpoDBU1S6+5YQ2swgawZ4gaUJZfP8r3MtFTskjb/AeCRUAJcR56vAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;img.png&apos; title=&apos;&apos; src=&apos;/static/d27c9c172301ef1549f5e11026dc75e9/ca1dc/img.png&apos; srcset=&apos;/static/d27c9c172301ef1549f5e11026dc75e9/e7570/img.png 170w,
/static/d27c9c172301ef1549f5e11026dc75e9/f46e7/img.png 340w,
/static/d27c9c172301ef1549f5e11026dc75e9/ca1dc/img.png 680w,
/static/d27c9c172301ef1549f5e11026dc75e9/9ae5c/img.png 751w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;img.png&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;따라서 함께 가져올 연관 관계들에 대해 &lt;code class=&quot;language-text&quot;&gt;Fetch join&lt;/code&gt;을 적용하는 방식으로 문제에 접근했습니다.  &lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Fetch join&lt;/code&gt;은 JPQL에서 성능 최적화를 위해 제공하는 기능입니다.  &lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;@EntityGraph&lt;/h3&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Fetch join&lt;/code&gt;을 위한 방법으로는, &lt;code class=&quot;language-text&quot;&gt;@EntityGraph&lt;/code&gt;를 선택했습니다.&lt;br&gt;
JPQL에 직접 하드코딩으로 쿼리를 작성하는 것보다, 가독성 및 유지보수성에 더 좋다고 판단했기 때문입니다.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;@EntityGraph&lt;/code&gt;는, 객체를 로딩할 때 런타임 성능을 개선하기 위해 JPA 2.1에서 도입된 기능입니다.&lt;br&gt;
JPA 2.0 이전까지는 &lt;code class=&quot;language-text&quot;&gt;FetchType&lt;/code&gt;으로만 로딩 전략을 지정할 수 있었지만&lt;br&gt;
이를 통해 객체의 연관 관계 중 그래프로 연결할 것들을 템플릿으로 정의하고, 런타임에 선택할 수 있습니다.&lt;br&gt;
원하는 필드들만 쉽게 Fetch join 시킬 수 있는 것이죠.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// PinRepository.class&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// 해당 쿼리로 데이터를 읽을 때, Topic의 필드로 존재하는 &quot;location&quot;, &quot;topic&quot;, &quot;creator&quot;, &quot;pinImages&quot;를 Fetch join으로 불러옵니다.&lt;/span&gt;
&lt;span class=&quot;token annotation punctuation&quot;&gt;@EntityGraph&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;attributePaths &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;location&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;topic&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;creator&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;pinImages&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Pin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;findAllByCreatorId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2&gt;문제 상황&lt;/h2&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;@EntityGraph&lt;/code&gt;는 동적으로 생성되므로&lt;br&gt;
해당 어노테이션에 작성한 설정이 잘못 되었어도, 컴파일 타임이 아니라 해당 쿼리를 사용하는 런타임 시점에 예외가 발생합니다.  &lt;/p&gt;
&lt;p&gt;여러 필드들을 &lt;code class=&quot;language-text&quot;&gt;attributePaths&lt;/code&gt;에 넣어본 뒤, 로컬 환경에서 API를 호출하며 쿼리 개수 및 지연 시간을 확인하던 중&lt;br&gt;
아래와 같은 오류가 발생했습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;org.hibernate.loader.MultipleBagFetchException: cannot simultaneously fetch multiple bags: 
[com.mapbefine.mapbefine.topic.domain.Topic.bookmarks, com.mapbefine.mapbefine.topic.domain.Topic.permissions]&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;호출된 쿼리는 아래와 같았습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// TopicRepository.class&lt;/span&gt;
&lt;span class=&quot;token annotation punctuation&quot;&gt;@EntityGraph&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;attributePaths &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;creator&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;permissions&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;bookmarks&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Topic&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;findAll&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2&gt;MultipleBagFetchException의 발생 이유&lt;/h2&gt;
&lt;p&gt;간단하게 이야기하면 &lt;strong&gt;&lt;code class=&quot;language-text&quot;&gt;OneToMany&lt;/code&gt; 관계를 1개보다 더 많이 Fetch join&lt;/strong&gt; 하려고 했기 때문에 발생한 문제입니다.&lt;br&gt;
&quot;permissons&quot;와 &quot;bookmarks&quot;를 동시에 Fetch join할 수 없습니다.&lt;/p&gt;
&lt;h3&gt;Fetch join과 카테시안 곱&lt;/h3&gt;
&lt;p&gt;Fetch join은 &lt;code class=&quot;language-text&quot;&gt;*ToOne&lt;/code&gt; 관계에는 개수 제한이 없지만, &lt;code class=&quot;language-text&quot;&gt;*ToMany&lt;/code&gt; 관계를 1개만 사용할 수 있습니다.&lt;br&gt;
fech join을 여러 개의 컬렉션에 적용한다면, 카테시안 곱에 의해 중복 데이터가 발생하기 때문입니다.&lt;br&gt;
Hibernate은 이에 대해 &lt;code class=&quot;language-text&quot;&gt;MultipleBagFetchException&lt;/code&gt; 예외를 던져 해당 상황 자체를 막습니다.  &lt;/p&gt;
&lt;p&gt;물론 하나의 &lt;code class=&quot;language-text&quot;&gt;OneToMany&lt;/code&gt;를 Fetch join 해도 join 대상인 엔티티 기준으로는 중복이 발생합니다.&lt;br&gt;
하지만 이에 대해서는 JPQL에서 지원하는 distinct를 사용해 엔티티의 중복을 제거할 수 있습니다.  &lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Bag&lt;/code&gt;은 Hibernate 용어로, Set과 같이 순서가 없고 List와 같이 중복을 허용하는 자료구조입니다.&lt;br&gt;
그러나 Java Collection API에는 위와 같은 개념의 자료구조가 없기 때문에, List를 Bag으로 사용합니다.&lt;br&gt;
List 로 초기화한 경우, PersistentBag 이라는 인스턴스로 매핑됩니다.&lt;br&gt;
반면 Set 으로 초기화한 경우, PersistentSet 이라는 인스턴스로 매핑됩니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;해결 방법&lt;/h2&gt;
&lt;p&gt;앞서 발생한 상황의 경우,&lt;br&gt;
즐겨찾기 개수에 대한 역정규화로 인해 &quot;bookmarks&quot;의 Fetch join이 필요가 없어지면서 문제 자체가 사라졌습니다.&lt;br&gt;
하지만 해당 예외에 대한 해결 방법과, 이러한 문제를 회피하면서 성능을 개선할 수 있는 방법을 알아두면 도움이 될 것입니다.   &lt;/p&gt;
&lt;p&gt;먼저 해당 예외에 대한 단순 해결 방법으로는 아래와 같은 것이 있습니다.   &lt;/p&gt;
&lt;h3&gt;1. 자료형을 Set으로 변경&lt;/h3&gt;
&lt;p&gt;Set은 중복을 허용하지 않기 때문에 이 경우 여러 개의 &lt;code class=&quot;language-text&quot;&gt;*ToMany&lt;/code&gt;를 허용해줍니다.&lt;br&gt;
하지만 순서를 보장할 수 없다는 단점이 있습니다.  &lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;이로 인해 화면 상 보이는 지도 목록 순서가 매번 바뀌는 문제를 겪기도 했습니다.&lt;br&gt;
Hibernate에서는 DB에서 읽어온 데이터를 저장할 때,&lt;br&gt;
List와 달리 Set에 대해서는 순서 보장을 지원하지 않기 때문에 LinkedHashSet으로도 소용이 없었습니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;2. 자식 엔티티 중 하나에만 Fetch join을 걸고, 나머지는 Lazy loading&lt;/h3&gt;
&lt;p&gt;해당 예외를 피하는 방법이긴 하지만, 기존에 목표로 삼던 성능 개선과는 거리가 멀어질 수 있습니다.   &lt;/p&gt;
&lt;p&gt;그 외에도 Fetch join 쿼리를 나누어 실행하거나, 쿼리를 여러 개로 나누었다 조립하는 방법도 있습니다.&lt;br&gt;
&lt;strong&gt;하지만 결국 원하는 건 쿼리의 수를 줄이고 성능을 개선하는 것인데, 간단하고 좋은 방법 없을까요? 🤔&lt;/strong&gt;&lt;/p&gt;
&lt;h3&gt;3. default&lt;em&gt;batch&lt;/em&gt;fetch_size 설정&lt;/h3&gt;
&lt;p&gt;불가피하게 여러 개의 &lt;code class=&quot;language-text&quot;&gt;*ToMany&lt;/code&gt;를 Fetch join 해야 할 경우,&lt;br&gt;
2번 방법을 적용하되 이 방법을 사용하면 Lazy loading으로 인해 발생하는 쿼리도 획기적으로 줄일 수 있습니다.&lt;/p&gt;
&lt;p&gt;Hibernate의 &lt;code class=&quot;language-text&quot;&gt;default_batch_fetch_size&lt;/code&gt; 설정을 바꾸면 여러 개의 &lt;code class=&quot;language-text&quot;&gt;*ToMany&lt;/code&gt;를 사용하고도 N+1 문제를 회피할 수 있기 때문입니다.&lt;br&gt;
자식 엔티티를 조회할 때는, 외래키를 사용해 아래와 같은 쿼리가 나갑니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;sql&quot;&gt;&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; permission &lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt; topic_id &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; permission &lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt; topic_id &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// ... 조회할 모든 토픽에 대해 쿼리 발생&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; bookmark &lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt; topic_id &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; bookmark &lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt; topic_id &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// ... 조회할 토픽에 대해 쿼리 발생&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;하지만 해당 옵션은 지정된 수(size) 만큼, in 절에 부모 key를 사용하는 방식으로 자식 엔티티들을 조회하도록 바꿔줍니다.&lt;br&gt;
조회하는 topic 개수 만큼 나가던 쿼리를 각 1번씩으로 줄일 수 있습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;sql&quot;&gt;&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; permission &lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt; topic_id &lt;span class=&quot;token operator&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; bookmark &lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt; topic_id &lt;span class=&quot;token operator&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2&gt;참고 자료&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://www.baeldung.com/jpa-entity-graph&quot;&gt;https://www.baeldung.com/jpa-entity-graph&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.baeldung.com/java-hibernate-multiplebagfetchexception&quot;&gt;https://www.baeldung.com/java-hibernate-multiplebagfetchexception&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://docs.spring.io/spring-data/data-jpa/docs/current/api/org/springframework/data/jpa/repository/EntityGraph.html&quot;&gt;https://docs.spring.io/spring-data/data-jpa/docs/current/api/org/springframework/data/jpa/repository/EntityGraph.html&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://jojoldu.tistory.com/457?fbclid=IwAR132BRMYHrL4D5Pu25YUglIcEN1FGTE2tacFcsVOPAT0MAzwoMX6Flzbe0&quot;&gt;https://jojoldu.tistory.com/457?fbclid=IwAR132BRMYHrL4D5Pu25YUglIcEN1FGTE2tacFcsVOPAT0MAzwoMX6Flzbe0&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://devlog-wjdrbs96.tistory.com/421&quot;&gt;https://devlog-wjdrbs96.tistory.com/421&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</content:encoded></item><item><title><![CDATA[FetchType.EAGER, FetchType.LAZY 에 대해서 알아보자!]]></title><description><![CDATA[이 글은 우테코 괜찮을지도의 가 작성하였습니다. 배경 쿼리 개선... 필요할지도?…]]></description><link>https://map-befine-official.github.io/trouble-shooting-fetch-type/</link><guid isPermaLink="false">https://map-befine-official.github.io/trouble-shooting-fetch-type/</guid><pubDate>Wed, 04 Oct 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;이 글은 우테코 괜찮을지도의 &lt;code class=&quot;language-text&quot;&gt;매튜&lt;/code&gt;가 작성하였습니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;배경&lt;/h2&gt;
&lt;h3&gt;쿼리 개선... 필요할지도?&lt;/h3&gt;
&lt;p&gt;9월 말, 추석을 앞두고 사용자 유치 계획 실행을 앞두고 있었다.&lt;/p&gt;
&lt;p&gt;우리는 행복회로를 돌리며, 많은 사용자들이 서비스에 들어올 것이라고 생각했고, 사용자들에게 좋은 경험을 선사하고 싶었다.&lt;/p&gt;
&lt;p&gt;하지만, 문제가 있었다.&lt;/p&gt;
&lt;p&gt;많은 사용자가 들어옴에 따라 평소보다 많은 트래픽이 발생할 것이고, 조금 더 좋은 경험을 제공하기 위해 추가한 지도와 핀으로 인해 데이터는 방대해졌다. &lt;/p&gt;
&lt;p&gt;자칫하면 사용자에게 좋지 않은 경험을 선사할 수 있다는 생각에 성능 개선을 목표로 삼았다.&lt;/p&gt;
&lt;p&gt;때문에 우리는 현재 발생하고 있는 &lt;code class=&quot;language-text&quot;&gt;N + 1&lt;/code&gt; 문제를 해결하고, &lt;code class=&quot;language-text&quot;&gt;인덱스&lt;/code&gt;를 활용하여 빠른 성능 개선을 계획했다.&lt;/p&gt;
&lt;p&gt;그 중에서 &lt;code class=&quot;language-text&quot;&gt;N + 1&lt;/code&gt; 문제를 해결하는 과정 중에 해당 글을 작성하게 된 문제가 발생하였다.&lt;/p&gt;
&lt;h3&gt;문제 상황&lt;/h3&gt;
&lt;p&gt;유저가 &lt;code class=&quot;language-text&quot;&gt;지도&lt;/code&gt; 목록을 조회하려는 경우 비정상적으로 쿼리가 많이나갔다.&lt;/p&gt;
&lt;p&gt;쉽게 예상할 수 있듯 당연히 &lt;code class=&quot;language-text&quot;&gt;N + 1&lt;/code&gt; 문제였다.&lt;/p&gt;
&lt;p&gt;우리는 해당 &lt;code class=&quot;language-text&quot;&gt;N + 1&lt;/code&gt; 문제를 해결하기 위해서 &lt;code class=&quot;language-text&quot;&gt;fetch join&lt;/code&gt; 을 사용했다.&lt;/p&gt;
&lt;h3&gt;N + 1 을 해결해보자!&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Topic Entity 구조 (&lt;code class=&quot;language-text&quot;&gt;지도 == Topic&lt;/code&gt;)&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@Entity&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@NoArgsConstructor&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;access &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;PROTECTED&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@Getter&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Topic&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;BaseTimeEntity&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  

&lt;span class=&quot;token annotation punctuation&quot;&gt;@Id&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@GeneratedValue&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;strategy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;GenerationType&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;IDENTITY&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Long&lt;/span&gt; id&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  

&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 생략

&lt;span class=&quot;token annotation punctuation&quot;&gt;@ManyToOne&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@JoinColumn&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;name &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;member_id&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Member&lt;/span&gt; creator&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  

&lt;span class=&quot;token annotation punctuation&quot;&gt;@OneToMany&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mappedBy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;topic&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Permission&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; permissions &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;ArrayList&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  

&lt;span class=&quot;token annotation punctuation&quot;&gt;@OneToMany&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mappedBy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;topic&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; cascade &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;CascadeType&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;PERSIST&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Pin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; pins &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;ArrayList&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  

&lt;span class=&quot;token annotation punctuation&quot;&gt;@OneToMany&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mappedBy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;topic&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; cascade &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;CascadeType&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;PERSIST&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; orphanRemoval &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Bookmark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; bookmarks &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;ArrayList&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  

&lt;span class=&quot;token annotation punctuation&quot;&gt;@Column&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;nullable &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@ColumnDefault&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;value &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;0&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;int&lt;/span&gt; pinCount &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  

&lt;span class=&quot;token annotation punctuation&quot;&gt;@Column&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;nullable &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@ColumnDefault&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;value &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;0&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;int&lt;/span&gt; bookmarkCount &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&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;/li&gt;
&lt;/ul&gt;
&lt;p&gt;}&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;- Topic Repository 
```java
@Repository  
public interface TopicRepository extends JpaRepository&amp;lt;Topic, Long&gt; {  
  
    @EntityGraph(attributePaths = {&quot;permissions&quot;})  
    List&amp;lt;Topic&gt; findAll();

	... 생략
}&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;앞선 &lt;code class=&quot;language-text&quot;&gt;Entity&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;Repository&lt;/code&gt; 는 &lt;code class=&quot;language-text&quot;&gt;지도&lt;/code&gt; 목록을 조회할 때 사용된 &lt;code class=&quot;language-text&quot;&gt;Entity&lt;/code&gt; 및 &lt;code class=&quot;language-text&quot;&gt;Repository&lt;/code&gt; 이다.&lt;/p&gt;
&lt;p&gt;마지막으로 &lt;code class=&quot;language-text&quot;&gt;Topic&lt;/code&gt; 에 필요한 정보는 아래와 같다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Topic Response&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;json&quot;&gt;&lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  
&lt;span class=&quot;token property&quot;&gt;&quot;id&quot;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;  
&lt;span class=&quot;token property&quot;&gt;&quot;name&quot;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;토픽 이름&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;  
&lt;span class=&quot;token property&quot;&gt;&quot;image&quot;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;토픽 이미지 링크&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;  
&lt;span class=&quot;token property&quot;&gt;&quot;creator&quot;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;토픽을 만든자&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;  
&lt;span class=&quot;token property&quot;&gt;&quot;pinCount&quot;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;  
&lt;span class=&quot;token property&quot;&gt;&quot;bookmarkCount&quot;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;  
&lt;span class=&quot;token property&quot;&gt;&quot;updatedAt&quot;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;2023-10-02T18:00:55.95188832&quot;&lt;/span&gt;  
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;여기서 사용자에게 &lt;code class=&quot;language-text&quot;&gt;Topic&lt;/code&gt; 목록을 제공하기 위해 부수적으로 필요한 &lt;code class=&quot;language-text&quot;&gt;Entity&lt;/code&gt; 는 &lt;code class=&quot;language-text&quot;&gt;Member&lt;/code&gt; , &lt;code class=&quot;language-text&quot;&gt;Permission&lt;/code&gt; 이었다.&lt;/p&gt;
&lt;p&gt;위에서 볼 수 있듯, &lt;code class=&quot;language-text&quot;&gt;Member&lt;/code&gt; 는 &lt;code class=&quot;language-text&quot;&gt;@ManyToOne 기본 fetch 설정&lt;/code&gt;으로 인해 &lt;code class=&quot;language-text&quot;&gt;FetchType.EAGER&lt;/code&gt; 로 설정되고, &lt;code class=&quot;language-text&quot;&gt;Permission&lt;/code&gt; 은 &lt;code class=&quot;language-text&quot;&gt;@OneToMany 기본 fetch 설정&lt;/code&gt; 인 &lt;code class=&quot;language-text&quot;&gt;FetchType.LAZY&lt;/code&gt; 이지만, &lt;code class=&quot;language-text&quot;&gt;@EntityGraph&lt;/code&gt; 를 통해서 &lt;code class=&quot;language-text&quot;&gt;fetch join&lt;/code&gt; 을 해주었기 때문에 당연히 쿼리는 한번만 나갈 줄 알았다.&lt;/p&gt;
&lt;p&gt;하지만, 결과는....&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;// 데이터 10만개를 기준으로 진행되었음
[http-nio-8080-exec-2] 16496 INFO  com.mapbefine.mapbefine.common.filter.LatencyLoggingFilter - Latency : 4.649s, Query count : 8, Request URI : /topics&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;위와 같았고, 우리는 멘붕이 올 수 밖에 없었다.&lt;/p&gt;
&lt;p&gt;우리 예상대로라면 분명히 &lt;code class=&quot;language-text&quot;&gt;Query Count&lt;/code&gt; 가 &lt;code class=&quot;language-text&quot;&gt;1&lt;/code&gt;이어야 하는데??&lt;/p&gt;
&lt;p&gt;도대체 왜 ?? ㅠㅠㅠ&lt;/p&gt;
&lt;h3&gt;해결했는데 이유를 모르겠어&lt;/h3&gt;
&lt;p&gt;다른 문제들도 많은데, 해당 문제까지 발생하여 몇 시간 동안 골머리를 앓았다.&lt;/p&gt;
&lt;p&gt;그러다 조금의 시간이 흘렀고, 마음을 가다듬고 천천히 쿼리를 뜯어보기 시작했고, 원인을 찾을 수 있었다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;sql&quot;&gt;&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;Hibernate: 
    &lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt;
		&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 수많은 컬럼들 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;
        topic t1_0 
    &lt;span class=&quot;token keyword&quot;&gt;left&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;join&lt;/span&gt;
        permission p1_0 
            &lt;span class=&quot;token keyword&quot;&gt;on&lt;/span&gt; t1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;p1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;topic_id
Hibernate: 
    &lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt;
		&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 수많은 컬럼들 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;
        member m1_0 
    &lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt;
        m1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;?

	&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;7&lt;/span&gt; 번을 member 를 찾아옴&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;우리는 &lt;code class=&quot;language-text&quot;&gt;@ManyToOne&lt;/code&gt; 의 &lt;code class=&quot;language-text&quot;&gt;기본 fetch 설정&lt;/code&gt;인 &lt;code class=&quot;language-text&quot;&gt;FetchType.EAGER&lt;/code&gt; 로 인해 &lt;code class=&quot;language-text&quot;&gt;Member&lt;/code&gt; 를 &lt;code class=&quot;language-text&quot;&gt;join&lt;/code&gt; 을 통해 가져올 것이라고 생각했지만, 실상은 &lt;code class=&quot;language-text&quot;&gt;Topic&lt;/code&gt; 을 가져올 때 &lt;code class=&quot;language-text&quot;&gt;permission&lt;/code&gt; 은 &lt;code class=&quot;language-text&quot;&gt;join&lt;/code&gt;을 잘해서 가져오지만, &lt;code class=&quot;language-text&quot;&gt;member&lt;/code&gt; 는 &lt;code class=&quot;language-text&quot;&gt;select 쿼리&lt;/code&gt;를 통해 따로 가져오고 있었다.&lt;/p&gt;
&lt;p&gt;이로 인해서 &lt;code class=&quot;language-text&quot;&gt;Query Count&lt;/code&gt; 가 &lt;code class=&quot;language-text&quot;&gt;1&lt;/code&gt;이 아니었던 것이었다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@EntityGraph&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;attributePaths &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;creator&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;permissions&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Topic&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;findAll&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;code class=&quot;language-text&quot;&gt;attributePaths&lt;/code&gt; 에 &lt;code class=&quot;language-text&quot;&gt;creator&lt;/code&gt; 를 추가해주었더니&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;[http-nio-8080-exec-5] 16826 INFO  com.mapbefine.mapbefine.common.filter.LatencyLoggingFilter - Latency : 5.941s, Query count : 1, Request URI : /topics&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;드디어 &lt;code class=&quot;language-text&quot;&gt;Query Count&lt;/code&gt; 를 &lt;code class=&quot;language-text&quot;&gt;1&lt;/code&gt;로 만들 수 있었다.&lt;/p&gt;
&lt;p&gt;도대체 왜 그런걸까???&lt;/p&gt;
&lt;p&gt;차근차근 알아가보자!&lt;/p&gt;
&lt;h2&gt;ManyToOne 테스트&lt;/h2&gt;
&lt;h3&gt;테스트를 통해서 생각을 굳혀보자!&lt;/h3&gt;
&lt;p&gt;일단 이전 상황들로 미루어 보았을 때, &lt;code class=&quot;language-text&quot;&gt;Eager&lt;/code&gt; 와 &lt;code class=&quot;language-text&quot;&gt;Lazy&lt;/code&gt; 는 단순 &lt;code class=&quot;language-text&quot;&gt;select 시기&lt;/code&gt;를 &lt;code class=&quot;language-text&quot;&gt;결정&lt;/code&gt;하는 것 같다.&lt;/p&gt;
&lt;p&gt;그렇기 때문에, &lt;code class=&quot;language-text&quot;&gt;Eager&lt;/code&gt; 로 설정하든 &lt;code class=&quot;language-text&quot;&gt;Lazy&lt;/code&gt; 로 설정하든, 따로 &lt;code class=&quot;language-text&quot;&gt;select&lt;/code&gt; 쿼리를 통해서 가져오는 것이다.&lt;/p&gt;
&lt;p&gt;이를 증명하기 위해 몇 가지 테스트를 진행해보자.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;@ManyToOne&lt;/code&gt; 을 진행하기 위해 &lt;code class=&quot;language-text&quot;&gt;대상 Entity&lt;/code&gt; 를 정하고 &lt;code class=&quot;language-text&quot;&gt;Test&lt;/code&gt; 하기 위한 &lt;code class=&quot;language-text&quot;&gt;테스트 코드&lt;/code&gt;를 짜보자!&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Permission (@ManyToOne 컬럼밖에 없어서 딱 테스트하기 좋은 Entity Class 라고 판단)&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@Entity&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@NoArgsConstructor&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;access &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;PROTECTED&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@Getter&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Permission&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;BaseTimeEntity&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Id&lt;/span&gt;  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@GeneratedValue&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;strategy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;GenerationType&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;IDENTITY&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Long&lt;/span&gt; id&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@ManyToOne&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// 여기서 Eager or Lazy 로 진행할 것 &lt;/span&gt;
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@JoinColumn&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;name &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;topic_id&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; nullable &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Topic&lt;/span&gt; topic&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@ManyToOne&lt;/span&gt;  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@JoinColumn&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;name &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;member_id&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; nullable &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Member&lt;/span&gt; member&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;ManyToOne 을 테스트 하기 위한 테스트 코드&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@ServiceTest&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;TestClass&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Autowired&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;TopicRepository&lt;/span&gt; topicRepository&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Autowired&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;MemberRepository&lt;/span&gt; memberRepository&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Autowired&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;PermissionRepository&lt;/span&gt; permissionRepository&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Autowired&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;TestEntityManager&lt;/span&gt; testEntityManager&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Member&lt;/span&gt; member&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Topic&lt;/span&gt; topic&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Permission&lt;/span&gt; permission&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@BeforeEach&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;beforeEach&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  
        &lt;span class=&quot;token comment&quot;&gt;// 멤버를 저장한다.  &lt;/span&gt;
        member &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; memberRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;save&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MemberFixture&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;create&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;member&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;member@naver.com&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Role&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;USER&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
        &lt;span class=&quot;token comment&quot;&gt;// 토픽을 저장한다.  &lt;/span&gt;
        topic &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; topicRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;save&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;TopicFixture&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createPublicAndAllMembersTopic&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;member&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
        &lt;span class=&quot;token comment&quot;&gt;// 권한을 저장한다.  &lt;/span&gt;
        permission &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; permissionRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;save&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Permission&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createPermissionAssociatedWithTopicAndMember&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;topic&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; member&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
        &lt;span class=&quot;token comment&quot;&gt;// 영속성 컨텍스트 초기화 (초기화 안하면 findById 때 쿼리가 안 날라감)&lt;/span&gt;
        testEntityManager&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;clear&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Test&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;permissionManyToOneFindById&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 class-name&quot;&gt;Permission&lt;/span&gt; permissionByFindById &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; permissionRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;findById&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;permission&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;get&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
          
        &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;permissionByFindById&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getTopic&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isEqualTo&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;topic&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
        &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;permissionByFindById&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getMember&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isEqualTo&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;member&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;code class=&quot;language-text&quot;&gt;@ManyToOne fetchType&lt;/code&gt; 은 &lt;code class=&quot;language-text&quot;&gt;Eager&lt;/code&gt; (기본 설정) 로 설정하고 테스트를 진행했다.&lt;/p&gt;
&lt;p&gt;당연히 추가적인 &lt;code class=&quot;language-text&quot;&gt;select&lt;/code&gt; 쿼리가 날아가겠지? ㅎㅎ&lt;/p&gt;
&lt;h3&gt;예상과 다른 결과&lt;/h3&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;sql&quot;&gt;&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;Hibernate: 
    &lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt;
		&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 수많은 컬럼들
    &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;
        permission p1_0 
    &lt;span class=&quot;token keyword&quot;&gt;join&lt;/span&gt;
        member m1_0 
            &lt;span class=&quot;token keyword&quot;&gt;on&lt;/span&gt; m1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;p1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;member_id 
    &lt;span class=&quot;token keyword&quot;&gt;join&lt;/span&gt;
        topic t1_0 
            &lt;span class=&quot;token keyword&quot;&gt;on&lt;/span&gt; t1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;p1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;topic_id 
    &lt;span class=&quot;token keyword&quot;&gt;left&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;join&lt;/span&gt;
        member c1_0 
            &lt;span class=&quot;token keyword&quot;&gt;on&lt;/span&gt; c1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;t1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;member_id 
    &lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt;
        p1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;?&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;아니 도대체 왜 ???&lt;/p&gt;
&lt;p&gt;예상대로라면 &lt;code class=&quot;language-text&quot;&gt;select&lt;/code&gt; 쿼리가 나가야 하는데...&lt;/p&gt;
&lt;p&gt;이해가 되지 않는다.&lt;/p&gt;
&lt;p&gt;왜 &lt;code class=&quot;language-text&quot;&gt;select&lt;/code&gt; 했다가 지 마음대로 &lt;code class=&quot;language-text&quot;&gt;join&lt;/code&gt; 해서 오는지 갈대같은 &lt;code class=&quot;language-text&quot;&gt;JPA&lt;/code&gt; 의 마음을 알 수가 없다.&lt;/p&gt;
&lt;p&gt;이 결과를 보고 이전과 다른게 뭐지... 하면서 곰곰히 생각해보았다.&lt;/p&gt;
&lt;p&gt;이 때 내가 발견한 차이점은 단 하나였다.&lt;/p&gt;
&lt;h1&gt;이전에는 목록 조회(findAll()), 이번에는 단건 조회(findById())이다.&lt;/h1&gt;
&lt;h3&gt;호다닥 findAll 로 테스트&lt;/h3&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@Test&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;permissionManyToOneFindAll&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 class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Permission&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; permission &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; permissionRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;findAll&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;/p&gt;
&lt;p&gt;결과는??&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;sql&quot;&gt;&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;Hibernate: 
    &lt;span class=&quot;token keyword&quot;&gt;insert&lt;/span&gt; 
    &lt;span class=&quot;token keyword&quot;&gt;into&lt;/span&gt;
        permission
        &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;created_at&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;member_id&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;topic_id&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;updated_at&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;id&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; 
    &lt;span class=&quot;token keyword&quot;&gt;values&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;?&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;?&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;?&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;?&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
Hibernate: 
    &lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt;
	    &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 수많은 컬럼들 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;
        permission p1_0
Hibernate: 
    &lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt;
	    &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 수많은 컬럼들 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;
        member m1_0 
    &lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt;
        m1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;?
Hibernate: 
    &lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt;
	    &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 수많은 컬럼들 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;
        topic t1_0 
    &lt;span class=&quot;token keyword&quot;&gt;left&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;join&lt;/span&gt;
        member c1_0 
            &lt;span class=&quot;token keyword&quot;&gt;on&lt;/span&gt; c1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;t1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;member_id 
    &lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt;
        t1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;?&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;역시나 예상대로 &lt;code class=&quot;language-text&quot;&gt;findAll&lt;/code&gt; 인 경우는 똑같이 &lt;code class=&quot;language-text&quot;&gt;Eager&lt;/code&gt; 이더라도 &lt;code class=&quot;language-text&quot;&gt;join&lt;/code&gt; 을 해서 가져오지 않는다.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Eager&lt;/code&gt; 로 &lt;code class=&quot;language-text&quot;&gt;findById&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;findAll&lt;/code&gt; 을 테스트 해봤으니&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Lazy&lt;/code&gt; 로 더 테스트를 진행해서 가설을 사실로 굳혀보자!&lt;/p&gt;
&lt;h3&gt;Lazy 테스트&lt;/h3&gt;
&lt;p&gt;먼저 &lt;code class=&quot;language-text&quot;&gt;findById&lt;/code&gt;로 테스트를 진행해보자.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@Test&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;permissionManyToOneFindById&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 class-name&quot;&gt;Permission&lt;/span&gt; permissionByFindById &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; permissionRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;findById&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;permission&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;get&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;permissionByFindById&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getTopic&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isEqualTo&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;topic&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
    &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;permissionByFindById&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getMember&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isEqualTo&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;member&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;div class=&quot;gatsby-highlight&quot; data-language=&quot;sql&quot;&gt;&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;Hibernate: 
    &lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt;
		&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 수많은 컬럼들 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;
        permission p1_0 
    &lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt;
        p1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;?
Hibernate: 
    &lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt;
		&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 수많은 컬럼들 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;
        topic t1_0 
    &lt;span class=&quot;token keyword&quot;&gt;left&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;join&lt;/span&gt;
        member c1_0 
            &lt;span class=&quot;token keyword&quot;&gt;on&lt;/span&gt; c1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;t1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;member_id 
    &lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt;
        t1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;?&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;결과는 당연하다.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Lazy&lt;/code&gt; 하게 가져오니 &lt;code class=&quot;language-text&quot;&gt;findById&lt;/code&gt; 로 가져오더라도 &lt;code class=&quot;language-text&quot;&gt;join&lt;/code&gt; 을 하지 않은 것이고, &lt;code class=&quot;language-text&quot;&gt;getTopic()&lt;/code&gt; 을 할 때 &lt;code class=&quot;language-text&quot;&gt;Topic&lt;/code&gt; 을 가져왔기 때문에 &lt;code class=&quot;language-text&quot;&gt;select&lt;/code&gt; 쿼리가 나갔다.&lt;/p&gt;
&lt;p&gt;근데 &lt;code class=&quot;language-text&quot;&gt;member&lt;/code&gt; 를 조회하는 &lt;code class=&quot;language-text&quot;&gt;select&lt;/code&gt; 쿼리가 없다. &lt;/p&gt;
&lt;p&gt;왜 그럴까?&lt;/p&gt;
&lt;p&gt;이유는, 이번에 처음 알았는데 &lt;code class=&quot;language-text&quot;&gt;assertJ&lt;/code&gt; 로 테스트를 진행할 때 단 하나라도 예상한 결과가 나오지 않아 테스트가 실패하게 되면 그 즉시 테스트가 종료되는 것 같다.&lt;/p&gt;
&lt;p&gt;그래서 뒤에 있는 &lt;code class=&quot;language-text&quot;&gt;getMember()&lt;/code&gt; 구문은 실행되지 않은 것이다.&lt;/p&gt;
&lt;p&gt;어쨌든, 본론으로 돌아와 &lt;code class=&quot;language-text&quot;&gt;findAll&lt;/code&gt; 도 테스트를 진행해보자.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@Test&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;permissionManyToOneFindAll&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 class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Permission&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; permission &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; permissionRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;findAll&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;permission&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;get&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getTopic&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isEqualTo&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;topic&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
    &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;permission&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;get&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getMember&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isEqualTo&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;member&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;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;sql&quot;&gt;&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;Hibernate: 
    &lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt;
		&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 수많은 컬럼들 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;
        permission p1_0
Hibernate: 
    &lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt;
		&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 수많은 컬럼들 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;
        topic t1_0 
    &lt;span class=&quot;token keyword&quot;&gt;left&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;join&lt;/span&gt;
        member c1_0 
            &lt;span class=&quot;token keyword&quot;&gt;on&lt;/span&gt; c1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;t1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;member_id 
    &lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt;
        t1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;?&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;역시 동일하다.&lt;/p&gt;
&lt;h3&gt;ManyToOne 테스트를 통해 확실하게 유추할 수 있는 것&lt;/h3&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;findAll&lt;/code&gt; 과 같은 목록 조회는 &lt;code class=&quot;language-text&quot;&gt;Eager&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;Lazy&lt;/code&gt; 가 정말 &lt;code class=&quot;language-text&quot;&gt;select 시기&lt;/code&gt;만을 결정하지만, &lt;code class=&quot;language-text&quot;&gt;findById&lt;/code&gt; 과 같은 단건 조회는 &lt;code class=&quot;language-text&quot;&gt;Eager&lt;/code&gt; 로 설정하게 되면, &lt;code class=&quot;language-text&quot;&gt;fetchType&lt;/code&gt; 이 &lt;code class=&quot;language-text&quot;&gt;select 시기 결정&lt;/code&gt;을 넘어 &lt;code class=&quot;language-text&quot;&gt;join&lt;/code&gt; 여부까지 결정할 수 있는 것이다. (최적화)&lt;/p&gt;
&lt;p&gt;결과야 뻔하긴 하지만, 남은 &lt;code class=&quot;language-text&quot;&gt;OneToMany&lt;/code&gt; 테스트들도 진행해서 위 사실을 더욱 더 굳혀보자.&lt;/p&gt;
&lt;h2&gt;OneToMany&lt;/h2&gt;
&lt;h3&gt;테스트 준비&lt;/h3&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;ManyToOne&lt;/code&gt; 테스트와 마찬가지로 &lt;code class=&quot;language-text&quot;&gt;OneToMany&lt;/code&gt; 테스트를 진행할 &lt;code class=&quot;language-text&quot;&gt;대상 Entity&lt;/code&gt; 와 &lt;code class=&quot;language-text&quot;&gt;Test 코드&lt;/code&gt;를 짜보자!&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Member Entity (OneTOMany 컬럼만 있어서 딱 적합)&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@Entity&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@NoArgsConstructor&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;access &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;PROTECTED&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@Getter&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Member&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;BaseTimeEntity&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  

&lt;span class=&quot;token annotation punctuation&quot;&gt;@Id&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@GeneratedValue&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;strategy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;GenerationType&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;IDENTITY&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Long&lt;/span&gt; id&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  

&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 생략 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;

&lt;span class=&quot;token annotation punctuation&quot;&gt;@OneToMany&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mappedBy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;creator&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Topic&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; createdTopics &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;ArrayList&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  

&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 생략 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;}&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;- Test 코드
```java
@Test  
void memberOneToManyFindById() {  
    Member memberByFindById = memberRepository.findById(member.getId()).get();  
    assertThat(memberByFindById.getCreatedTopics().get(0)).isEqualTo(topic);  
}  
  
@Test  
void memberOneToManyFindAll() {  
    List&amp;lt;Member&gt; members = memberRepository.findAll();  
    assertThat(members.get(0).getCreatedTopics().get(0)).isEqualTo(topic);  
}&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h3&gt;Eager 에 대해서 먼저 테스트 해보자!&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;findById 로 테스트&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;sql&quot;&gt;&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;Hibernate: 
&lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 수많은 컬럼들 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;
    member m1_0 
&lt;span class=&quot;token keyword&quot;&gt;left&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;join&lt;/span&gt;
    topic c1_0 
        &lt;span class=&quot;token keyword&quot;&gt;on&lt;/span&gt; m1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;c1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;member_id 
&lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt;
    m1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;?&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;이쯤되면 당연히 예상할 수 있듯이 &lt;code class=&quot;language-text&quot;&gt;join&lt;/code&gt; 을 해서 가져온다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;findAll 로 테스트&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;sql&quot;&gt;&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;Hibernate: 
&lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 수많은 컬럼들 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;
    member m1_0
Hibernate: 
&lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 수많은 컬럼들 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;
    topic c1_0 
&lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt;
    c1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;member_id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;?&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;이것도 당연히 예상할 수 있듯, &lt;code class=&quot;language-text&quot;&gt;join&lt;/code&gt; 이 아닌 &lt;code class=&quot;language-text&quot;&gt;select&lt;/code&gt; 을 해서 가져오고, 실제로 &lt;code class=&quot;language-text&quot;&gt;Topic&lt;/code&gt; 에 &lt;code class=&quot;language-text&quot;&gt;createdTopics&lt;/code&gt; 에 접근하지 않더라도 &lt;code class=&quot;language-text&quot;&gt;select&lt;/code&gt; 구문이 발생하게 된다.&lt;/p&gt;
&lt;p&gt;왜 ? 지금까지 계속보았듯 &lt;code class=&quot;language-text&quot;&gt;findAll&lt;/code&gt; 과 같은 &lt;code class=&quot;language-text&quot;&gt;목록 조회&lt;/code&gt;에서는 &lt;code class=&quot;language-text&quot;&gt;Eager&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;Lazy&lt;/code&gt; 가 &lt;code class=&quot;language-text&quot;&gt;select 시기&lt;/code&gt;만을 결정하니까&lt;/p&gt;
&lt;h3&gt;Lazy 도 테스트 해보자.&lt;/h3&gt;
&lt;p&gt;정말 뻔하니 그냥 별다른 코멘트 없이 테스트 결과만을 나열하겠다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;findById&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;sql&quot;&gt;&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;Hibernate: 
&lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 수많은 컬럼들 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;
    member m1_0 
&lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt;
    m1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;?
Hibernate: 
&lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 수많은 컬럼들 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;
    topic c1_0 
&lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt;
    c1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;member_id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;?&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;당연히 &lt;code class=&quot;language-text&quot;&gt;join&lt;/code&gt; 하지 않고&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;findAll&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;sql&quot;&gt;&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;Hibernate: 
&lt;span class=&quot;token keyword&quot;&gt;select&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; 수많은 컬럼들 &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;
    member m1_0 
&lt;span class=&quot;token keyword&quot;&gt;where&lt;/span&gt;
    m1_0&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;?&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;당연히 조회하지 않는다면 더 이상 &lt;code class=&quot;language-text&quot;&gt;select&lt;/code&gt; 쿼리를 발생시키지 않는다.&lt;/p&gt;
&lt;h2&gt;최종적인 결론&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;findById&lt;/code&gt; 는 &lt;code class=&quot;language-text&quot;&gt;FetchType&lt;/code&gt; 이 &lt;code class=&quot;language-text&quot;&gt;Eager&lt;/code&gt; 라면 &lt;code class=&quot;language-text&quot;&gt;join&lt;/code&gt; 을 해서 가져와준다 (최적화를 알아서 해주는 것)&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;findAll&lt;/code&gt; 은 &lt;code class=&quot;language-text&quot;&gt;findById&lt;/code&gt; 와 다르게 &lt;code class=&quot;language-text&quot;&gt;fetch type&lt;/code&gt; 이 &lt;code class=&quot;language-text&quot;&gt;Eager&lt;/code&gt; 인지 &lt;code class=&quot;language-text&quot;&gt;Lazy&lt;/code&gt; 인지에 따라 해당 데이터를 가져오기 위한 &lt;code class=&quot;language-text&quot;&gt;select 쿼리 발생 시기&lt;/code&gt;만을 결정한다. (즉, &lt;code class=&quot;language-text&quot;&gt;fetch type&lt;/code&gt; 으로 인해 &lt;code class=&quot;language-text&quot;&gt;join 여부&lt;/code&gt;가 결정되지 않음)&lt;/li&gt;
&lt;/ul&gt;</content:encoded></item><item><title><![CDATA[@Modifying 어노테이션의 옵션이 정상 동작하지 않는 문제]]></title><description><![CDATA[이 글은 우테코 괜찮을지도의 가 작성하였습니다. 배경 괜찮을지도 서비스에서는 테스트를  방식으로 수행하고 있습니다.
란 우리가 알고 있는  테스트에서 따온 네이밍입니다. (서비스 -> 레포지토리까지의 테스트만으로도 E2E…]]></description><link>https://map-befine-official.github.io/trouble-shooting-modifying-annotation/</link><guid isPermaLink="false">https://map-befine-official.github.io/trouble-shooting-modifying-annotation/</guid><pubDate>Mon, 02 Oct 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;이 글은 우테코 괜찮을지도의 &lt;code class=&quot;language-text&quot;&gt;쥬니&lt;/code&gt;가 작성하였습니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;배경&lt;/h3&gt;
&lt;p&gt;괜찮을지도 서비스에서는 테스트를 &lt;code class=&quot;language-text&quot;&gt;Layer To End&lt;/code&gt; 방식으로 수행하고 있습니다.&lt;br&gt;
&lt;code class=&quot;language-text&quot;&gt;Layer To End&lt;/code&gt;란 우리가 알고 있는 &lt;code class=&quot;language-text&quot;&gt;E2E&lt;/code&gt; 테스트에서 따온 네이밍입니다. (서비스 -&gt; 레포지토리까지의 테스트만으로도 E2E라고 불리는지는 잘 모르겠습니다)
&lt;br&gt; 이때, Layer는 각 계층(Service, Repo 등)을 말합니다.&lt;/p&gt;
&lt;p&gt;서비스 계층에서 데이터를 삭제하는 테스트를 수행하는 도중, 데이터가 삭제되지 않고 조회되는 문제가 발생하였습니다.
&lt;br&gt; 지금부터, 그 이야기를 시작해 보려 합니다.&lt;/p&gt;
&lt;h3&gt;문제 상황&lt;/h3&gt;
&lt;p&gt;문제를 직면한 상황은 &lt;code class=&quot;language-text&quot;&gt;사용자의 즐겨찾기 목록을 모두 삭제하는 상황&lt;/code&gt;이었습니다.
&lt;br&gt; 테스트를 위해, 각 Repositry를 사용하여 아래와 같이 데이터를 넣어주는 작업을 수행했습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Test&lt;/span&gt;
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@DisplayName&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;즐겨찾기 목록에 있는 모든 토픽을 삭제할 수 있다&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;deleteAllBookmarks_Success&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;token comment&quot;&gt;// 회원 저장&lt;/span&gt;
            &lt;span class=&quot;token class-name&quot;&gt;Member&lt;/span&gt; member &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; memberRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;save&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MemberFixture&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;create&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
            &lt;span class=&quot;token string&quot;&gt;&quot;member&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;token string&quot;&gt;&quot;member@naver.com&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;token class-name&quot;&gt;Role&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;USER&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 class-name&quot;&gt;Topic&lt;/span&gt; topic1 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;TopicFixture&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createPrivateAndGroupOnlyTopic&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;member&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 class-name&quot;&gt;Topic&lt;/span&gt; topic2 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;TopicFixture&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createPrivateAndGroupOnlyTopic&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;member&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

            &lt;span class=&quot;token comment&quot;&gt;// 지도 저장&lt;/span&gt;
            topicRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;save&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;topic1&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
            topicRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;save&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;topic2&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 class-name&quot;&gt;Bookmark&lt;/span&gt; bookmark1 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Bookmark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createWithAssociatedTopicAndMember&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;topic1&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; member&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 class-name&quot;&gt;Bookmark&lt;/span&gt; bookmark2 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Bookmark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createWithAssociatedTopicAndMember&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;topic2&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; member&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

            &lt;span class=&quot;token comment&quot;&gt;// 즐겨찾기 등록&lt;/span&gt;
            bookmarkRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;save&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;bookmark1&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
            bookmarkRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;save&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;bookmark2&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;위 코드의 결과로, 사용자(Member)와 지도(Topic)가 생성되어 있을 것이고, 사용자는 자신이 만든 지도를 즐겨찾기(Bookmark)로 등록해 놓은 상황일 것입니다.
&lt;br&gt; 이후, 아래와 같은 코드를 수행하면 해당 사용자의 즐겨찾기 목록이 전부 삭제되어, 테스트를 통과할 것이라 예상하였습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;        &lt;span class=&quot;token comment&quot;&gt;// 생략 ...&lt;/span&gt;
        
        &lt;span class=&quot;token comment&quot;&gt;// 통과 !&lt;/span&gt;
        &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;creatorBefore&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getBookmarks&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;hasSize&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

        &lt;span class=&quot;token comment&quot;&gt;// 해당 회원의 즐겨찾기 목록 전체 삭제&lt;/span&gt;
        &lt;span class=&quot;token class-name&quot;&gt;AuthMember&lt;/span&gt; user &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;MemberFixture&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createUser&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;creatorBefore&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        bookmarkCommandService&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllBookmarks&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;user&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        
        &lt;span class=&quot;token comment&quot;&gt;// 실패 !&lt;/span&gt;
        &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;bookmarkRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;findById&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;creatorBefore&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isEmpty&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;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token class-name&quot;&gt;&lt;span class=&quot;token namespace&quot;&gt;java&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;lang&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;/span&gt;AssertionError&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; 
&lt;span class=&quot;token class-name&quot;&gt;Expecting&lt;/span&gt; empty but was&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 class-name&quot;&gt;&lt;span class=&quot;token namespace&quot;&gt;com&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;mapbefine&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;mapbefine&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;bookmark&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;domain&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;/span&gt;Bookmark&lt;/span&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@23504729&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token class-name&quot;&gt;&lt;span class=&quot;token namespace&quot;&gt;com&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;mapbefine&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;mapbefine&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;bookmark&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;domain&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;/span&gt;Bookmark&lt;/span&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@2447e2e&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;br&gt; 테스트에 사용된 메서드들의 로직적인 오류를 재차 확인하였지만, 발견할 수 없었습니다.
&lt;br&gt; 그렇다면, 도대체 왜 데이터가 삭제되지 않고 조회되는 것일까요 ?&lt;/p&gt;
&lt;h3&gt;원인 파악&lt;/h3&gt;
&lt;p&gt;위 문제의 원인을 찾기 위해 여러 방법을 시도하던 중, &lt;code class=&quot;language-text&quot;&gt;TestEntityManager&lt;/code&gt;를 통해 즐겨찾기 삭제 메서드 호출 전, 후에 다음과 같은 로직을 추가하였습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Test&lt;/span&gt;
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@DisplayName&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;즐겨찾기 목록에 있는 모든 토픽을 삭제할 수 있다&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;deleteAllBookmarks_Success&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;throws&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;InterruptedException&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;token comment&quot;&gt;// 생략&lt;/span&gt;
        testEntityManager&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;flush&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;
        testEntityManager&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;clear&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;

        bookmarkCommandService&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;deleteAllBookmarks&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;user&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

        testEntityManager&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;flush&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;
        testEntityManager&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;clear&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        &lt;span class=&quot;token comment&quot;&gt;// 생략&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;즉, 삭제 메서드를 호출한 뒤, 명시적으로 영속성 컨텍스트를 flush &amp;#x26; clear 해준 것입니다.
&lt;br&gt; 위와 같은 로직을 추가하자, 테스트가 성공적으로 통과했습니다.
&lt;br&gt; 이로써, 문제 원인은 영속성 컨텍스트와 관련이 있음을 알게 되었습니다.&lt;/p&gt;
&lt;p&gt;하지만, 한 가지 의문점이 생겼습니다.
&lt;br&gt; 분명, 우리는 데이터의 변경이 일어나는 &lt;code class=&quot;language-text&quot;&gt;Repository&lt;/code&gt;의 메서드에는 &lt;code class=&quot;language-text&quot;&gt;@Modifying&lt;/code&gt; 어노테이션과 함께, &lt;code class=&quot;language-text&quot;&gt;clearAutomatically = true&lt;/code&gt;로 설정해 둔 상태였습니다.
&lt;br&gt; 테스트에서 직면한 문제처럼, 데이터를 수정(삭제)하였더라도 1차 캐시 내부에서는 수정 전 데이터가 존재할 수 있음을 인지하고 있었습니다.
&lt;br&gt; 이로인해, 수정 관련 쿼리가 실행된 후, 명시적으로 영속성 컨텍스트를 비워주었습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;interface&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;BookmarkRepository&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;JpaRepository&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Bookmark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Long&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;

    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Modifying&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;clearAutomatically &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Long&lt;/span&gt; memberId&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;code class=&quot;language-text&quot;&gt;@Modifying&lt;/code&gt; 어노테이션을 확인해 보니, 다음과같이 쓰여있었습니다.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Indicates a query method should be considered as modifying query as that changes the way it needs to be executed. &lt;br&gt;
&lt;strong&gt;This annotation is only considered if used on query methods defined through a {@link Query} annotation.&lt;/strong&gt;&lt;br&gt; It&apos;s not
applied on custom implementation methods or queries derived from the method name as they already have control over
the underlying data access APIs or specify if they are modifying by their name.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;우리가 주목할 점은, 위 설명의 두 번째 줄이었습니다.
&lt;br&gt; 간단하게 설명하자면, &lt;code class=&quot;language-text&quot;&gt;@Modifying&lt;/code&gt; 어노테이션은 &lt;code class=&quot;language-text&quot;&gt;@Query&lt;/code&gt; 어노테이션과 함께 사용될 때만 효력이 있다는 것입니다.
&lt;br&gt; 즉, 아래와 같은 &lt;code class=&quot;language-text&quot;&gt;NamedQeury&lt;/code&gt;를 사용할 때는 옵션값을 넣어주더라도 동작하지 않았던 것이죠.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;interface&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;BookmarkRepository&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;JpaRepository&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Bookmark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Long&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Modifying&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;clearAutomatically &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Long&lt;/span&gt; memberId&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;h3&gt;문제 해결&lt;/h3&gt;
&lt;p&gt;(1) &lt;code class=&quot;language-text&quot;&gt;@Query&lt;/code&gt; 어노테이션을 사용하여 직접 쿼리를 작성하는 방법과, (2) 테스트 코드에서 flush &amp;#x26; clear를 명시적으로 수행하는 방법이 있었습니다.
&lt;br&gt; 단순히 테스트 통과에 목적을 둔 것이 아니기 때문에, 실제 프로덕트 코드에서도 예상치 못한 동작을 방지하기 위해 (1)번 방법을 선택하였습니다.
&lt;br&gt; 이에 따라, &lt;code class=&quot;language-text&quot;&gt;Named Query -&gt; JPQL&lt;/code&gt;로 변경함으로써 문제를 해결할 수 있었습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;interface&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;BookmarkRepository&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;JpaRepository&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Bookmark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Long&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Modifying&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;clearAutomatically &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Query&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;delete from Bookmark b where b.member.id = :memberId&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;deleteAllByMemberId&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@Param&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;value &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;memberId&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Long&lt;/span&gt; memberId&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</content:encoded></item><item><title><![CDATA[괜찮을지도의 Nginx 활용법]]></title><description><![CDATA[이 글은 우아한테크코스 괜찮을지도팀의 가 작성했습니다. 지난 글 GitHub Actions로 CI/CD 구축하기에서 현재 저희 프로젝트의 인프라 구조를 간략하게 이미지로 설명드렸습니다. 다시 이미지를 보여드리자면, 서버의 앞단에서 Nginx…]]></description><link>https://map-befine-official.github.io/how-to-use-nginx/</link><guid isPermaLink="false">https://map-befine-official.github.io/how-to-use-nginx/</guid><pubDate>Tue, 01 Aug 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;이 글은 우아한테크코스 괜찮을지도팀의 &lt;code class=&quot;language-text&quot;&gt;도이&lt;/code&gt;가 작성했습니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;지난 글 &lt;a href=&quot;https://map-befine-official.github.io/github-actions-ci-cd&quot;&gt;GitHub Actions로 CI/CD 구축하기&lt;/a&gt;에서&lt;br&gt;
현재 저희 프로젝트의 인프라 구조를 간략하게 이미지로 설명드렸습니다.&lt;/p&gt;
&lt;p&gt;다시 이미지를 보여드리자면, 서버의 앞단에서 Nginx를 사용하고 있는데요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/45ee08747158f5004979e90c9b76cdf4/77dcf/infra_nginx.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: 41.1764705882353%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABYklEQVR42oVSy27CMBDMn/cXOFH1E3rsseqtFw4UIQUUDhxQAgkOSdqEOLEdP6a2UyhIlbrS2Ct7PfsYB8YY3OJP0wqQ/Arjdj2ANhWOJEe+fAN7f/ShgVuGYfC4mFIKUkoPn0QJaJfQXV6TGnDGoK0n2wqKbOyRRlDXNRaLBebzOZzvSIqiQBzHSJIEXc+AvoUhR6iihOlrCEsgbdJ4H4Nz/sNvqdWAYL1eoyxLnE4nRFHkq3PVUkohhBiDSYbNMURKdlA5wZm2kIPEfpeCdeyecLVaYTqdYjKZIAxDX2FVVZ6waRp03D44U7x8PCPazrzf2aq0UZglr2i4bVdqCBs38G6cYZZlSNPUJ3JVudbdWU4I+r53qsAcDjBfNYxo8JlnaDnF0/IB+/MWA1N2NBS8a0fCf80pa1vycmjpBVG2kzzNwXv2+xNcy6Nw91/m4pursnY+UoxwhPahx63vYDS+AbnzZ8y1wl3+AAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;infra_nginx.png&apos; title=&apos;&apos; src=&apos;/static/45ee08747158f5004979e90c9b76cdf4/ca1dc/infra_nginx.png&apos; srcset=&apos;/static/45ee08747158f5004979e90c9b76cdf4/e7570/infra_nginx.png 170w,
/static/45ee08747158f5004979e90c9b76cdf4/f46e7/infra_nginx.png 340w,
/static/45ee08747158f5004979e90c9b76cdf4/ca1dc/infra_nginx.png 680w,
/static/45ee08747158f5004979e90c9b76cdf4/77dcf/infra_nginx.png 930w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;infra_nginx.png&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;⚠️ 편의상 개발 서버, DB 서버 부분은 생략하고 확대한 이미지입니다.&lt;br&gt;
개발 서버의 Nginx도 같은 역할을 수행합니다.&lt;br&gt;
또, 80 포트 요청에 대해서도 443 포트로 리다이렉트해주고 있으나 이 또한 편의상 그림에는 생략하고 있습니다.  &lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;이번 글에서는 Nginx의 모든 것에 대해 설명하기보다는 Nginx를 왜 썼는지, 어떻게 썼는지에 초점을 맞춰보도록 하겠습니다.  &lt;/p&gt;
&lt;h2&gt;Nginx란?&lt;/h2&gt;
&lt;p&gt;그래도 이게 뭔지 알아야겠죠? 간단하게 설명하면, 경량화된 웹 서버 프로그램입니다.&lt;br&gt;
정적 파일을 제공하는 HTTP 서버로도, 리버스 프록시 서버로도 사용할 수 있습니다.  &lt;/p&gt;
&lt;p&gt;이제 저희의 Nginx 설정 파일을 보면서 어떻게 활용했는지 설명드리겠습니다.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;설정 파일은 과거 방식으로는 /etc/nginx/sites-available 또는 /sites-enabled에서 관리하고,&lt;br&gt;
최신 방법으로는 /etc/nginx/conf.d 디렉토리에서 관리합니다.&lt;br&gt;
또, 전역 설정을 관리하는 파일로는 &lt;code class=&quot;language-text&quot;&gt;/etc/nginx/nginx.conf&lt;/code&gt;가 있습니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;properties&quot;&gt;&lt;pre class=&quot;language-properties&quot;&gt;&lt;code class=&quot;language-properties&quot;&gt;&lt;span class=&quot;token key attr-name&quot;&gt;server&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;        # (1) HTTPS 적용 전, 서버 이름 지정&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;        server_name&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;${도메인};&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;        # (1) HTTPS 적용 : SSL을 사용하여 443포트에서 수신&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;        listen&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;443 ssl; # managed by Certbot&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;        ssl_certificate&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;/etc/letsencrypt/live/${도메인}/fullchain.pem; # managed by Certbot&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;        ssl_certificate_key&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;/etc/letsencrypt/live/${도메인}/privkey.pem; # managed by Certbot&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;        include&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;/etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;        ssl_dhparam&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;/etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;        # (3) 웹 서버의 루트 디렉토리 지정&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;        root&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;/var/www/html;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;        # (3) 웹 서버가 디렉토리를 열 때 사용할 기본 파일 지정 (나열된 순서대로 탐색)&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;        index&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;index.html index.htm index.nginx-debian.html;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;        # (2, 3) 루트 URL에 대한 동작 정의 : 프론트엔드 정적 파일 서브&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;        location&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;/ {&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;            root&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;/usr/share/nginx/html/dist;&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;            include&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;/etc/nginx/mime.types;&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;            try_files&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;$uri $uri/ /index.html;&lt;/span&gt;
        }

&lt;span class=&quot;token comment&quot;&gt;        # (2) /api/ URL에 대한 동작 정의 : 백엔드 API 연결&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;        location&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;/api/ {&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;            rewrite&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;^/api/(.*) /$1?$args break;&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;            proxy_pass&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;http://${서버 IP 주소}:8080;&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;            proxy_set_header&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;Host $host;&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;            proxy_set_header&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;X-Real-IP $remote_addr;&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;            proxy_set_header&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;X-Forwarded-For $proxy_add_x_forwarded_for;&lt;/span&gt;
        }
}

&lt;span class=&quot;token comment&quot;&gt;# 해당 도메인에 대해 80번 포트 HTTP 요청이 오면 HTTPS로 리다이렉션&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;server&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;    if&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;($host = ${도메인}) {&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;        return&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;301 https://$host$request_uri;&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;    }&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;# managed by Certbot&lt;/span&gt;
    
    
&lt;span class=&quot;token key attr-name&quot;&gt;    listen&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;80 ;&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;    listen&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;[::]:80 ;&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;    server_name&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;${도메인};&lt;/span&gt;
}&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2&gt;(1) HTTPS 적용하기&lt;/h2&gt;
&lt;p&gt;SSL 인증서만 있으면, 웹서버를 통해 쉽게 HTTPS 프로토콜을 적용할 수 있습니다.&lt;br&gt;
무료 이용이 가능하고, &lt;code class=&quot;language-text&quot;&gt;Nginx&lt;/code&gt;와 통합하여 사용하기 좋은 &lt;code class=&quot;language-text&quot;&gt;Certbot&lt;/code&gt;을 사용해 이를 적용했습니다.&lt;br&gt;
전체적인 흐름은 아래와 같습니다.  &lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;도메인을 구매하고, 레코드 A에 public IP 주소를 등록한다.&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;Cerbot&lt;/code&gt;을 설치한다.&lt;/li&gt;
&lt;li&gt;설정 파일의 server_name을 구매한 도메인으로 변경한다.&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;Certbot&lt;/code&gt;을 이용해 구매한 도메인을 이용해 SSL 인증서를 발급받는다.&lt;/li&gt;
&lt;li&gt;인증서를 발급받으면, &lt;code class=&quot;language-text&quot;&gt;Certbot&lt;/code&gt;이 자동으로 설정 파일에서 server_name이 일치하는 블록을 찾아 SSL 관련 내용들을 추가해준다.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;# managed by Certbot&lt;/code&gt;이라는 주석이 붙어있는 내용들이 &lt;code class=&quot;language-text&quot;&gt;Certbot&lt;/code&gt;이 추가해준 내용입니다.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;Certbot&lt;/code&gt;은 SSL 인증 발급 도구로, 무료 SSL 인증서 발급 기관인 &lt;code class=&quot;language-text&quot;&gt;Let&apos;s Encrypt&lt;/code&gt;와 통합되어 있습니다.&lt;br&gt;
이를 통해 쉽게 SSL 인증서를 발급받을 수 있습니다.&lt;br&gt;
또, &lt;code class=&quot;language-text&quot;&gt;Nginx&lt;/code&gt; 설정 파일을 자동 업데이트하는 방식으로 SSL 인증서를 적용할 수 있어 편리합니다.
단, 유효 기간이 90일이기 때문에 자동 갱신 설정이 별도로 필요합니다.  &lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;하단에 첨부한 참고 자료와 같이, 잘 정리된 자료가 기존에 많기 때문에 자세한 내용은 생략하겠습니다.&lt;/p&gt;
&lt;h2&gt;(2) 프론트엔드, 백엔드 요청 구분하기&lt;/h2&gt;
&lt;p&gt;저희 프로젝트의 인프라 구조에서는 프론트엔드와 백엔드가 같은 서버를 공유하므로&lt;br&gt;
클라이언트가 이용하는 화면에 대한 요청과, 백엔드 API에 대한 요청을 구분할 필요가 있었습니다.  &lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;location&lt;/code&gt; 블록을 사용해 특정 URL에 대한 동작을 설정하는 방식으로 이를 구분할 수 있었습니다.  &lt;/p&gt;
&lt;p&gt;해당하는 부분을 가져와 설명드리겠습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;properties&quot;&gt;&lt;pre class=&quot;language-properties&quot;&gt;&lt;code class=&quot;language-properties&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# 루트 URL에 대해 프론트엔드 정적 파일 서브&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;location&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;/ {&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;    root&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;/usr/share/nginx/html/dist;&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;    include&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;/etc/nginx/mime.types;&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;    try_files&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;$uri $uri/ /index.html;&lt;/span&gt;
}

&lt;span class=&quot;token comment&quot;&gt;# /api/ URL에 대해 백엔드 API 연결&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;location&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;/api/ {&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;    rewrite&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;^/api/(.*) /$1?$args break; # URL에서 /api 제거&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;    proxy_pass&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;http://${서버 IP 주소}:8080;&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;    proxy_set_header&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;Host $host;&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;    proxy_set_header&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;X-Real-IP $remote_addr;&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;    proxy_set_header&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;X-Forwarded-For $proxy_add_x_forwarded_for;&lt;/span&gt;
}&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;https://mapbefine.com/api/&lt;/code&gt; 로 시작하는 URL에 대해서는 백엔드 API와 연결합니다.  &lt;/p&gt;
&lt;p&gt;이 설정을 맞추어, 백엔드 코드에서 &lt;code class=&quot;language-text&quot;&gt;/api&lt;/code&gt;가 추가된 요청 URL을 매핑할 수도 있습니다.&lt;br&gt;
하지만 이는 자원을 명시하기 위한 내용보다는 요청을 구분하기 위함이므로,&lt;br&gt;
리버시 프록시를 거치고 나면 실제로는 &lt;code class=&quot;language-text&quot;&gt;/api&lt;/code&gt;를 제외한 요청 URL로 연결되도록 하였습니다.&lt;br&gt;
&lt;code class=&quot;language-text&quot;&gt;# URL에서 /api 제거&lt;/code&gt; 주석이 있는 부분이 해당하는 내용입니다.  &lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;proxy_set_header&lt;/code&gt;는 Nginx가 프록시 요청을 전달하기 전에, HTTP 요청 헤더를 설정하는 지시문입니다.&lt;br&gt;
원래 요청의 호스트 이름을 백엔드 서버에 전달합니다.&lt;br&gt;
필수 설정은 아니지만 IP 기반의 접근 제어, 로깅, 다중 호스트 설정 등에 유용할 수 있다고 합니다.  &lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;(3) 정적 파일 서브하기&lt;/h2&gt;
&lt;p&gt;저희는 프론트엔드의 React를 서버에서 실행시키는 대신, 빌드 결과물을 정적 파일로 서브하는 방식을 택하였습니다.&lt;br&gt;
이유는 다음과 같습니다.  &lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;어플리케이션을 서버 내에 실행하여 동적으로 파일을 생성해야 하는 상황이 아닙니다.&lt;/li&gt;
&lt;li&gt;정적 파일로 서브하여 서버 메모리를 절약할 수 있습니다.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;어플리케이션을 실행시킨 상태라면, 해당하는 URL에 대해 3000번 포트로 포워딩해주면 됩니다.&lt;/p&gt;
&lt;p&gt;반면 정적 파일로 서브한다면 어떻게 해야 할요?&lt;br&gt;
해당하는 부분을 가져와 설명드리겠습니다.&lt;/p&gt;
&lt;p&gt;아래 내용은 설정 파일의 기본 값과 같습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;properties&quot;&gt;&lt;pre class=&quot;language-properties&quot;&gt;&lt;code class=&quot;language-properties&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# (3) 웹 서버의 루트 디렉토리 지정&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;root&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;/var/www/html;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;# (3) 웹 서버가 디렉토리를 열 때 사용할 기본 파일 지정 (나열된 순서대로 탐색)&lt;/span&gt;
&lt;span class=&quot;token key attr-name&quot;&gt;index&lt;/span&gt; &lt;span class=&quot;token value attr-value&quot;&gt;index.html index.htm index.nginx-debian.html;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;https://mapbefine.com&lt;/code&gt; 요청이 들어오면, Nginx는 루트 디렉토리의 &lt;code class=&quot;language-text&quot;&gt;index.html&lt;/code&gt;을 우선적으로 찾아 반환합니다.&lt;br&gt;
따라서 해당 웹 서버의 루트 디렉토리에 우리의 빌드 결과물인 &lt;code class=&quot;language-text&quot;&gt;index.html&lt;/code&gt;와 모듈 파일들을 위치시키면 됩니다.&lt;br&gt;
반대로, 정적 파일을 저장하고 있는 위치를 root 값으로 설정해주어도 좋습니다.&lt;/p&gt;
&lt;h2&gt;결론&lt;/h2&gt;
&lt;p&gt;괜찮을지도 서버의 Nginx는&lt;br&gt;
클라이언트와 WAS(Spring Boot) 사이에 Nginx를 두어 리버스 프록시 서버로 사용하며,&lt;br&gt;
동시에 HTTPS 적용을 해결하고 HTTP 서버와 같이 정적 파일 서브도 수행하고 있습니다.&lt;/p&gt;
&lt;p&gt;다만 현재 규모에서 간단한 방법을 택한 것으로,&lt;br&gt;
서비스의 규모가 커짐에 따라 정적 파일을 별도 서버에 관리하는 것이 유리하거나 동적인 파일 생성이 필요한 경우 활용 방식은 얼마든지 달라질 수 있을 것입니다.&lt;/p&gt;
&lt;h2&gt;참고자료&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://nginx.org/en/docs/&quot;&gt;Nginx 공식 문서&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://www.baeldung.com/linux/sites-available-sites-enabled-conf-d&quot;&gt;baledung - sites-available &amp;#x26; sites-enabled, conf.d 설정 파일 방식 차이&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://hudi.blog/https-with-nginx-and-lets-encrypt/&quot;&gt;Nginx와 Let&apos;s Encrypt로 HTTPS 웹 서비스 배포하기 (feat. Certbot)&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-22-04&quot;&gt;how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-22-04 (Step2 부분 참고)&lt;/a&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[인수테스트에서 테스트 격리하기!]]></title><description><![CDATA[이 글은 우아한테크코스 괜찮을지도팀의 가 작성했습니다I 테스트 간 격리.. 왜 필요할까? 우리는 프로덕션 코드의 신뢰성을 보장하기 위해서 테스트 코드를 작성한다. 그렇기 때문에, 테스트 코드는 100번을 실행시키던 10…]]></description><link>https://map-befine-official.github.io/how-to-isolating-test/</link><guid isPermaLink="false">https://map-befine-official.github.io/how-to-isolating-test/</guid><pubDate>Mon, 31 Jul 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;이 글은 우아한테크코스 괜찮을지도팀의 &lt;code class=&quot;language-text&quot;&gt;매튜&lt;/code&gt;가 작성했습니다I&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;테스트 간 격리.. 왜 필요할까?&lt;/h2&gt;
&lt;p&gt;우리는 프로덕션 코드의 신뢰성을 보장하기 위해서 테스트 코드를 작성한다.&lt;/p&gt;
&lt;p&gt;그렇기 때문에, 테스트 코드는 100번을 실행시키던 100만번을 실행시키던, 동일한 결과를 내뱉어야한다.&lt;/p&gt;
&lt;p&gt;테스트 코드를 아무리 잘 작성하더라도, 매번 테스트의 결과가 다르다면 의미가 없다.&lt;/p&gt;
&lt;p&gt;예를 들어 아래와 같은 테스트가 있다고 해보자.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@DataJpaTest&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;ExampleTest&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  

    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Autowired&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;PinRepository&lt;/span&gt; pinRepository&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
      
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Test&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; 모든_핀을_조회한다&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  
        &lt;span class=&quot;token comment&quot;&gt;// given  &lt;/span&gt;
        &lt;span class=&quot;token class-name&quot;&gt;Pin&lt;/span&gt; pin &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Pin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
        pinRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;save&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;pin&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
          
        &lt;span class=&quot;token comment&quot;&gt;// when  &lt;/span&gt;
        &lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Pin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; pins &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; pinRepository&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;findAll&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
        &lt;span class=&quot;token comment&quot;&gt;// then  &lt;/span&gt;
        &lt;span class=&quot;token function&quot;&gt;assertAll&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;  
                &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;pins&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;hasSize&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;  
                &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;assertThat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;pins&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;get&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isEqualTo&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;pin&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
        &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;  

&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;정상적인 경우라면, 위 테스트는 통과해야한다.&lt;/p&gt;
&lt;p&gt;하지만, 테스트 간 격리를 진행하지 않은 상태에서 이 테스트 이전에 다른 테스트에서 pin 을 저장하는 동작을 수행했고, 데이터를 지워주지 않았다면?&lt;/p&gt;
&lt;p&gt;해당 테스트는 실패하게 될 것이다.&lt;/p&gt;
&lt;p&gt;위 테스트는 이전에 수행된 테스트들의 동작에도 영향을 받는, 독립적이지 못한 테스트가 된 것이다.&lt;/p&gt;
&lt;p&gt;이것이 바로 테스트 간 격리가 필요한 이유이다.&lt;/p&gt;
&lt;p&gt;그렇다면 위와 같은 상황을 @Transactional 어노테이션만으로 완벽하게 예방할 수 있을까?&lt;/p&gt;
&lt;p&gt;결론부터 말하자면 그럴 수 없다.&lt;/p&gt;
&lt;p&gt;@SpringBootTest 를 사용하는 인수테스트 같은 경우는 Port 를 지정하여 서버를 띄우게 되는데, 이 때 HTTP 클라이언트와 서버는 각기 다른 스레드에서 실행되게 된다.&lt;/p&gt;
&lt;p&gt;그렇기 때문에 테스트 코드에 @Transactional 있더라도 호출되는 쪽은 다른 스레드에서 새로운 트랜잭션을 커밋하기 때문에, 롤백 전략은 무색해지게 되고, 테스트 간 격리도 제대로 이행될 수가 없는 것이다.&lt;/p&gt;
&lt;h2&gt;그렇다면 격리를 위해 사용할 수 있는 방법들은 무엇이 있을까?&lt;/h2&gt;
&lt;p&gt;이번 포스트를 통해서 다뤄볼 방법은 3가지이다.&lt;/p&gt;
&lt;p&gt;바로 &lt;code class=&quot;language-text&quot;&gt;Dirtiest Context&lt;/code&gt;,  &lt;code class=&quot;language-text&quot;&gt;@Sql 어노테이션&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;Entity Manager&lt;/code&gt; 이다.&lt;/p&gt;
&lt;p&gt;하나씩 짚어보면서 넘어가보자.&lt;/p&gt;
&lt;h3&gt;DirtiesContext&lt;/h3&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@DirtiesContext&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;classMode &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;DirtiesContext&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;ClassMode&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;BEFORE_EACH_TEST_METHOD&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token annotation punctuation&quot;&gt;@SpringBootTest&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;webEnvironment &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;SpringBootTest&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;WebEnvironment&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;RANDOM_PORT&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;ExampleTest&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;DiriesContext&lt;/code&gt; 는 현재 테스트를 실행하고자 하는 컨텍스트에 빈이 로드되어 있으면 Dirties 를 확인하고 Bean 들을 Reload 하게 된다.&lt;/p&gt;
&lt;p&gt;즉, 테이블도 다시 만들기 때문에 테스트 간의 격리가 가능하다.&lt;/p&gt;
&lt;p&gt;하지만, 매번 테스트하기 이전에 컨텍스트를 Reload 하게 된다면, 테스트 시간은 한없이 길어지게 될 것이기 때문이다.&lt;/p&gt;
&lt;p&gt;테스트의 장점은 프로덕션 코드의 신뢰성을 보장함에도 존재하지만, 개발자가 개발을 진행중에 코드를 올바르게 작성중인지 바로 바로 응답받기 위한 수단이기도 하다.&lt;/p&gt;
&lt;p&gt;따라서, 응답 속도는 개발 진행 속도와 크게 연관되어 있는 것이다.&lt;/p&gt;
&lt;p&gt;하지만, 인수테스트에 DirtiesContext 를 난사하게 되면, 매 테스트 실행마다 속이 터지는 경험을 하게 될 것이다.&lt;/p&gt;
&lt;h3&gt;@Sql 어노테이션&lt;/h3&gt;
&lt;p&gt;해당 방법은 꽤나 획기적인 방법이다.&lt;/p&gt;
&lt;p&gt;간단한 sql 구문만으로 테스트 간의 격리를 이뤄낼 수 있다. &lt;/p&gt;
&lt;p&gt;어떤 이는 외래키 제약 조건으로 인해 한번에 데이터를 삭제하는 것이 불가능하다고 생각할 수도 있지만, 아래 코드와 같이 외래키 제약 조건을 해제해주고 데이터를 삭제하는 것이 가능하다. &lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;sql&quot;&gt;&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;SET&lt;/span&gt; FOREIGN_KEY_CHECKS &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;TRUNCATE&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;TABLE&lt;/span&gt; 테이블이름&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;SET&lt;/span&gt; FOREIGN_KEY_CHECKS &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@DataJpaTest&lt;/span&gt;
&lt;span class=&quot;token annotation punctuation&quot;&gt;@Sql&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;/truncate.sql&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;ExampleTest&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  
	&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;하지만, 해당 방법에도 단점은 존재한다.&lt;/p&gt;
&lt;p&gt;바로, 테이블이 추가될 때마다, 해당 sql 구문을 수정해주어야 한다는 것이다.&lt;/p&gt;
&lt;p&gt;큰 단점은 아니지만, 항상 신경써주어야 한다는 점에서 조금은 아쉽다는 생각이 든다. &lt;/p&gt;
&lt;h3&gt;Entity Manager&lt;/h3&gt;
&lt;p&gt;위에서도 언급하였듯 &lt;code class=&quot;language-text&quot;&gt;@Sql&lt;/code&gt; 어노테이션은 정말 강력하지만, 테이블이 추가될 때마다 sql 구문을 다시 수정해주어야 한다는 단점이 존재했다.&lt;/p&gt;
&lt;p&gt;이 때, &lt;code class=&quot;language-text&quot;&gt;@Sql&lt;/code&gt; 어노테이션의 장점을 모두 가져가면서, 위에서 언급한 단점도 보완할 수 있는 방법이 있다.&lt;/p&gt;
&lt;p&gt;바로 &lt;code class=&quot;language-text&quot;&gt;Entity Manager&lt;/code&gt; 를 활용하는 방법이다.&lt;/p&gt;
&lt;p&gt;도대체 어떻게? &lt;code class=&quot;language-text&quot;&gt;Entity Manager&lt;/code&gt; 를 통해서 Data 를 지운다는 것일까?&lt;/p&gt;
&lt;p&gt;우리는 개발자이니 코드를 통해 살펴보자. &lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@Componenet&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;DatabaseCleanup&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;implements&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;InitializingBean&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  

	&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;static&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;final&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;String&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;UNDERSCORE&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;_&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@PersistenceContext&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;EntityManager&lt;/span&gt; entityManager&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;String&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; tableNames&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Override&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;afterPropertiesSet&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;  
        tableNames &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; entityManager&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getMetamodel&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getEntities&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;stream&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
                &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;filter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;entityType &lt;span class=&quot;token operator&quot;&gt;-&gt;&lt;/span&gt; entityType&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getJavaType&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getAnnotation&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Entity&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;!=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;null&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
                &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;entityType &lt;span class=&quot;token operator&quot;&gt;-&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;convertTableNameFromCamelCaseToSnakeCase&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;entityType&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getName&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
                &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toList&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;  

    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;String&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;convertTableNameFromCamelCaseToSnakeCase&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;String&lt;/span&gt; tableName&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 class-name&quot;&gt;StringBuilder&lt;/span&gt; tableNameSnake &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;StringBuilder&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
        &lt;span class=&quot;token keyword&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;char&lt;/span&gt; letter &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; tableName&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toCharArray&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  
            &lt;span class=&quot;token function&quot;&gt;addUnderScoreForCapitalLetter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;tableNameSnake&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; letter&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
            tableNameSnake&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;append&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;letter&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
        &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;  
  
        &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; tableNameSnake&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;substring&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toLowerCase&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;  
  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;addUnderScoreForCapitalLetter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;StringBuilder&lt;/span&gt; tableNameSnake&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;char&lt;/span&gt; letter&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  
        &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Character&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isUpperCase&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;letter&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;  
            tableNameSnake&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;append&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;UNDERSCORE&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
        &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;  
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;  
  
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Entity Manager 를 통해 데이터를 관리하기 위해 DatabaseCleanup 이라는 객체를 생성해줬다.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;InitializingBean&lt;/code&gt; 을 implements 해 &lt;code class=&quot;language-text&quot;&gt;afterPropertiesSet&lt;/code&gt; 메서드를 구현하게되면, 프로퍼티가 모두 초기화되었을 때, BeanFactory에 의해 자동으로 해당 메서드가 호출되게 된다.&lt;/p&gt;
&lt;p&gt;그러니, 해당 메서드의 내부 구현으로 Entity 들의 ClassName 을 이용하여 모든 테이블명을 생성해내어 저장하면 된다. (Entity Class 명을 Camel Case -&gt; Snake Case 로 변환해준다. &lt;code class=&quot;language-text&quot;&gt;convertTableNameFromCamelCaseToSnakeCase&lt;/code&gt; 가 해당 동작을 수행해주고 있다.)&lt;/p&gt;
&lt;p&gt;위와 같이 모든 테이블명을 생성해내어 저장했다면, 해당 테이블 명들을 이용하여 Data 를 모두 지워주는 execute 를 구현해주자.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@Service&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;DatabaseCleanup&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;implements&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;InitializingBean&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  

	&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;static&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;final&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;String&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;SET_REFERENTIAL_INTEGRITY_SQL_MESSAGE&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;SET REFERENTIAL_INTEGRITY %s&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
	&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;static&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;final&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;String&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;TRUNCATE_SQL_MESSAGE&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;TRUNCATE TABLE %s&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
	&lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;static&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;final&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;String&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;ID_RESET_SQL_MESSAGE&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ALTER TABLE %s ALTER COLUMN ID RESTART WITH 1&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@PersistenceContext&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;EntityManager&lt;/span&gt; entityManager&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;List&lt;/span&gt;&lt;span class=&quot;token generics&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;String&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; tableNames&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  

	&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;

	&lt;span class=&quot;token annotation punctuation&quot;&gt;@Transactional&lt;/span&gt;  
	&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;execute&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;  
	    entityManager&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;flush&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;  
	    entityManager&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createNativeQuery&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;String&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;format&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;SET_REFERENTIAL_INTEGRITY_SQL_MESSAGE&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;executeUpdate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
	  
	    &lt;span class=&quot;token keyword&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;String&lt;/span&gt; tableName &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; tableNames&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  
	        entityManager&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createNativeQuery&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;String&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;format&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;TRUNCATE_SQL_MESSAGE&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; tableName&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;executeUpdate&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;  
	        entityManager&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createNativeQuery&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;String&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;format&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;ID_RESET_SQL_MESSAGE&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; tableName&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;executeUpdate&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;  
	  
	    entityManager&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createNativeQuery&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;String&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;format&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;SET_REFERENTIAL_INTEGRITY_SQL_MESSAGE&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;executeUpdate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
	&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
	  
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;위의 코드를 순서대로 간단하게 설명해보자면&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;외래키 제약조건을 비활성화 해준다. &lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;afterPropertiesSet&lt;/code&gt; 을 통해 생성해놓은 모든 테이블 명들을 이용하여 Data 들을 모두 Truncate 해주고, ID 값을 다시 세팅해준다.&lt;/li&gt;
&lt;li&gt;외래키 제약조건을 활성화해준다. &lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;이런 Flow 로 흘러가는 execute 메서드를 구현해주었다면&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;java&quot;&gt;&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;&lt;span class=&quot;token annotation punctuation&quot;&gt;@SpringBootTest&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;webEnvironment &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;SpringBootTest&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;WebEnvironment&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;RANDOM_PORT&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;  
&lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;ExampleTest&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@LocalServerPort&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;int&lt;/span&gt; port&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@Autowired&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;DatabaseCleanup&lt;/span&gt; databaseCleanup&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
  
    &lt;span class=&quot;token annotation punctuation&quot;&gt;@BeforeEach&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;setUp&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 class-name&quot;&gt;RestAssured&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;port &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; port&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 annotation punctuation&quot;&gt;@AfterEach&lt;/span&gt;  
    &lt;span class=&quot;token keyword&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;tearDown&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;  
        databaseCleanup&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;execute&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;  
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;  
  
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;위 코드와 같이 @AfterEach 를 통해 매 인수테스트 동작 이후 실행시켜주면, 모든 테스트들을 격리할 수 있게 되는 것이다.&lt;/p&gt;
&lt;h2&gt;결론&lt;/h2&gt;
&lt;p&gt;지금으로서는 데이터 삭제가 쉽고, 테이블이 추가되었을 때 sql 구문을 수정하지 않아도 되는 &lt;code class=&quot;language-text&quot;&gt;Entity Manager&lt;/code&gt; 를 통해 테스트를 격리하는 것이 최선의 방법으로 보인다.&lt;/p&gt;
&lt;p&gt;하지만, 추후에 이보다 더 좋은 방법을 발견하면, 면밀히 검토해보고 바꿀 의사가 충분하다고 생각한다.&lt;/p&gt;
&lt;h2&gt;참고&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://tecoble.techcourse.co.kr/post/2020-09-15-test-isolation/&quot;&gt;https://tecoble.techcourse.co.kr/post/2020-09-15-test-isolation/&lt;/a&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[EC2 환경 변수 적용 및 Actions Runner에 환경 변수 적용이 안되는 이슈]]></title><description><![CDATA[이 글은 우테코 괜찮을지도의 가 작성하였습니다. 배경 괜찮을지도 서비스는 CI/CD 툴로 Github Actions를 적용하였습니다.
 자세한 내용이 궁금하다면 ? 괜찮을지도 CI/CD 구축기 바로가기 프로젝트의 설정 파일(.yml)은 DB…]]></description><link>https://map-befine-official.github.io/trouble-shooting-actions-runner/</link><guid isPermaLink="false">https://map-befine-official.github.io/trouble-shooting-actions-runner/</guid><pubDate>Mon, 31 Jul 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;이 글은 우테코 괜찮을지도의 &lt;code class=&quot;language-text&quot;&gt;쥬니&lt;/code&gt;가 작성하였습니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;배경&lt;/h3&gt;
&lt;p&gt;괜찮을지도 서비스는 CI/CD 툴로 Github Actions를 적용하였습니다.
&lt;br&gt; 자세한 내용이 궁금하다면 ? &lt;a href=&quot;/contents/posts/github-actions-ci-cd/index.md&quot;&gt;괜찮을지도 CI/CD 구축기 바로가기&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;프로젝트의 설정 파일(.yml)은 DB 주소 등 민감한 정보를 담고 있었기 때문에, 이를 저장소에 그대로 업로드할 수 없었습니다.
&lt;br&gt;위 문제점을 해결하기 위한 과정과 실제 우리가 직면한 문제를 설명해 드리고자 합니다.&lt;/p&gt;
&lt;h3&gt;환경변수 적용&lt;/h3&gt;
&lt;p&gt;괜찮을지도는 환경 변수를 활용하여 민감한 정보를 숨기기로 했습니다.
이에 따라, 각 배포 환경(prod, dev)에 맞는 설정 파일을 아래와 같이 작성하였습니다.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yaml&quot;&gt;&lt;pre class=&quot;language-yaml&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# `application-dev`의 일부 &lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;spring&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;datasource&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;driver-class-name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; com.mysql.cj.jdbc.Driver
    &lt;span class=&quot;token key atrule&quot;&gt;url&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;MYSQL_DATABASE_URL&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; 
    &lt;span class=&quot;token key atrule&quot;&gt;username&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;MYSQL_DATABASE_USER_NAME&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;password&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;MYSQL_DATABASE_PASSWORD&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;설정 파일에서 사용한 환경 변수는 각 EC2 인스턴스에서 관리하도록 하였습니다.
&lt;br&gt;EC2 인스턴스에 환경변수를 적용하는 방법은 아래와 같습니다.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;1. EC2 터미널에 접속한다.&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;2. &apos;sudo vim ~/.bashrc&apos; 명령어를 입력한다.&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;3. .bashrc 파일의 맨 아래에 아래와 같이 필요한 환경변수를 입력한 뒤, 저장한다.&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 comment&quot;&gt;# ...&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;# 기존 .bashrc 코드 생략 &lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;#&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;# Database&lt;/span&gt;
&lt;span class=&quot;token builtin class-name&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token assign-left variable&quot;&gt;profile&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;dev&apos;&lt;/span&gt;
&lt;span class=&quot;token builtin class-name&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token assign-left variable&quot;&gt;MYSQL_DATABASE_URL&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;Database url&apos;&lt;/span&gt;
&lt;span class=&quot;token builtin class-name&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token assign-left variable&quot;&gt;MYSQL_DATABASE_USER_NAME&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;User name&apos;&lt;/span&gt;
&lt;span class=&quot;token builtin class-name&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token assign-left variable&quot;&gt;MYSQL_DATABASE_PASSWORD&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;Password&apos;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;4. &apos;source ~/.bashrc&apos; 명령어를 입력하여 환경변수를 업데이트해 준다.&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;5. &apos;echo $profile&apos; 명령어를 입력하여 환경변수가 적용되었는지 확인한다.&lt;/code&gt;&lt;/p&gt;
&lt;h3&gt;환경 변수가 Actions Runner 동작에 적용되지 않는 이슈&lt;/h3&gt;
&lt;p&gt;우리는 위 과정을 통해, 환경 변수가 EC2에 올바르게 적용된 것을 확인했습니다.
&lt;br&gt;실제로, 아래와 같은 명령어를 통해 어플리케이션을 실행할 경우 &lt;code class=&quot;language-text&quot;&gt;profile&lt;/code&gt;로 설정한 환경변수인 dev가 올바르게 적용되는 것을 확인할 수 있었습니다.&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 comment&quot;&gt;# $JAR_FILE_PATH는 &apos;deploy.sh&apos; 파일 내에 존재하는 jar 파일의 경로를 나타내는 변수입니다.&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;nohup&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sudo&lt;/span&gt; &lt;span class=&quot;token parameter variable&quot;&gt;-E&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;java&lt;/span&gt; &lt;span class=&quot;token parameter variable&quot;&gt;-jar&lt;/span&gt; &lt;span class=&quot;token variable&quot;&gt;$JAR_FILE_PATH&lt;/span&gt;/mapbefine.jar &lt;span class=&quot;token parameter variable&quot;&gt;--spring.profiles.active&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token variable&quot;&gt;$profile&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;&gt;&gt;&lt;/span&gt; &lt;span class=&quot;token variable&quot;&gt;$JAR_FILE_PATH&lt;/span&gt;/deploy.log &lt;span class=&quot;token operator&quot;&gt;&lt;span class=&quot;token file-descriptor important&quot;&gt;2&lt;/span&gt;&gt;&lt;/span&gt; &lt;span class=&quot;token variable&quot;&gt;$JAR_FILE_PATH&lt;/span&gt;/deploy-err.log &lt;span class=&quot;token operator&quot;&gt;&amp;amp;&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/aeefe9b57b1e8d4ae02a373d8e985894/d50f3/active-profile-dev.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,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAlklEQVR42nVO0Q6DIBDzRQHRRFQIczFOUED///+6gyW+7aFpr9f0rpq1gRonjASlxsJd34Mx9hdtKyG7DlJK0i2EEOCcF1TL8sa+O1j7gqbyPA/DgLquKcBKiDH+cNM0j5+LhOC/Q6VQoEop4bouxJgQQiR9QxuDaZ7hnIPzDsdx4DxPbJ+N/AnruhbPe18yeRdioKcsvv8eSSlotqJIAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;active profile dev&apos; title=&apos;&apos; src=&apos;/static/aeefe9b57b1e8d4ae02a373d8e985894/ca1dc/active-profile-dev.png&apos; srcset=&apos;/static/aeefe9b57b1e8d4ae02a373d8e985894/e7570/active-profile-dev.png 170w,
/static/aeefe9b57b1e8d4ae02a373d8e985894/f46e7/active-profile-dev.png 340w,
/static/aeefe9b57b1e8d4ae02a373d8e985894/ca1dc/active-profile-dev.png 680w,
/static/aeefe9b57b1e8d4ae02a373d8e985894/02d09/active-profile-dev.png 1020w,
/static/aeefe9b57b1e8d4ae02a373d8e985894/9d567/active-profile-dev.png 1360w,
/static/aeefe9b57b1e8d4ae02a373d8e985894/d50f3/active-profile-dev.png 2788w&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;하지만, Actions Runner를 통해 CD를 수행하는 경우 아래와 같이 환경 변수가 적용되지 않았습니다.
&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/203870e569e82274f809e7b13f7f26cc/346de/active-profile-default.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: 14.117647058823529%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAnElEQVR42lWO2w6CMBBEeXF7E6NCUWhDxRrbB2iC//9vY0FM9OFkTiaZ7Ba6uUI3F1Rao9YNysMRxBhYhhjlpNW/EBE45xmx8e+F9w+0bYe61mg7g9O5wm4ZMf4z2Jx9XEoJpRSEEGtKmT13y8EipYRxHDMTFjfG5k81niEgxIApTZhfM+7eY1+WMLaDuzk459D3/cowDLDWIsaIN/1/SWo3y4voAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;active profile default&apos; title=&apos;&apos; src=&apos;/static/203870e569e82274f809e7b13f7f26cc/ca1dc/active-profile-default.png&apos; srcset=&apos;/static/203870e569e82274f809e7b13f7f26cc/e7570/active-profile-default.png 170w,
/static/203870e569e82274f809e7b13f7f26cc/f46e7/active-profile-default.png 340w,
/static/203870e569e82274f809e7b13f7f26cc/ca1dc/active-profile-default.png 680w,
/static/203870e569e82274f809e7b13f7f26cc/02d09/active-profile-default.png 1020w,
/static/203870e569e82274f809e7b13f7f26cc/9d567/active-profile-default.png 1360w,
/static/203870e569e82274f809e7b13f7f26cc/346de/active-profile-default.png 2770w&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;h3&gt;원인 및 문제 해결&lt;/h3&gt;
&lt;p&gt;우리는 위 문제를 해결하기 위해, 아래와 같이 우리의 상황을 정리하였습니다.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;터미널에서 쉘 스크립트를 실행할 경우, 환경 변수가 적용된다.&lt;/li&gt;
&lt;li&gt;Actions Runner를 통해 쉘 스크립트를 실행할 경우, 환경변수가 적용되지 않는다.&lt;/li&gt;
&lt;li&gt;CI/CD를 구축한 뒤에 환경 변수를 적용했다.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;위 상황을 통해, 우리는 환경 변수를 적용하기 전, 이미 실행되고 있었던 Actions Runner에 환경변수가 적용되지 않았음을 직감할 수 있었습니다.
&lt;br&gt;실제로, 환경 변수는 프로세스가 시작될 때 해당 프로세스에게 제공되는 환경 설정의 일부이기 때문에, 위와 같은 문제가 발생한 것이었습니다.&lt;/p&gt;
&lt;p&gt;기존에 실행되고 있었던 Actions Runner 프로세스를 종료한 후, 재시작을 하였고 환경 변수가 올바르게 적용되는 것을 확인할 수 있었습니다.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[GitHub Actions로 CI/CD 구축하기]]></title><description><![CDATA[이 글은 우테코 괜찮을지도팀의 가 작성했습니다. 보다 편리하고 안정적인 개발 및 배포를 위해, 괜찮을지도 서비스에 CI/CD를 적용하였습니다. 이를 위한 도구로 GitHub Actions(self hosted runner…]]></description><link>https://map-befine-official.github.io/github-actions-ci-cd/</link><guid isPermaLink="false">https://map-befine-official.github.io/github-actions-ci-cd/</guid><pubDate>Sat, 29 Jul 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;이 글은 우테코 괜찮을지도팀의 &lt;code class=&quot;language-text&quot;&gt;도이&lt;/code&gt;가 작성했습니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;보다 편리하고 안정적인 개발 및 배포를 위해, 괜찮을지도 서비스에 CI/CD를 적용하였습니다.&lt;br&gt;
이를 위한 도구로 GitHub Actions(self hosted runner)를 선택한 이유와, 파이프라인, 적용 방법에 대해 설명드리겠습니다.&lt;/p&gt;
&lt;h2&gt;GitHub Actions를 사용한 이유&lt;/h2&gt;
&lt;p&gt;먼저 저희의 상황을 설명드리자면,
아래와 같은 제약 사항 안에서 개발 서버, 운영 서버의 분리가 필요했습니다.&lt;/p&gt;
&lt;h3&gt;제약 사항&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;EC2 최대 3개&lt;/li&gt;
&lt;li&gt;최대 t4g.small&lt;/li&gt;
&lt;li&gt;최대 20GiB&lt;/li&gt;
&lt;li&gt;매모리 2GiB&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;운영 서버에서 사용하는 DB는 서버 분리가 필요하다고 판단해, 세 대의 인스턴스를 각각 아래 그림과 같이 개발, 운영, 운영 DB 서버로 분담했습니다.&lt;br&gt;
그리고 이 제약 사항 안에서 알뜰하게 서버를 사용하고 트러블 슈팅하는 것을 저희의 기술적 도전으로 삼고자 합니다.&lt;/p&gt;
&lt;h3&gt;인프라 구조&lt;/h3&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/87e65d80fb642a2a2d8b157bf2909454/aaf92/infra.jpg&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: 56.470588235294116%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3lAH/8QAFhAAAwAAAAAAAAAAAAAAAAAAACBB/9oACAEBAAEFAip//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAIP/aAAgBAQAGPwJf/8QAGRAAAgMBAAAAAAAAAAAAAAAAABEBECFR/9oACAEBAAE/Ic1Iiijgq//aAAwDAQACAAMAAAAQA8//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAaEAEBAQEAAwAAAAAAAAAAAAABEQAxECFB/9oACAEBAAE/ECeJezVViTDfiYKwFaw7gV9d8f/Z&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;infra&apos; title=&apos;&apos; src=&apos;/static/87e65d80fb642a2a2d8b157bf2909454/a22ce/infra.jpg&apos; srcset=&apos;/static/87e65d80fb642a2a2d8b157bf2909454/0b705/infra.jpg 170w,
/static/87e65d80fb642a2a2d8b157bf2909454/31389/infra.jpg 340w,
/static/87e65d80fb642a2a2d8b157bf2909454/a22ce/infra.jpg 680w,
/static/87e65d80fb642a2a2d8b157bf2909454/29373/infra.jpg 1020w,
/static/87e65d80fb642a2a2d8b157bf2909454/232dc/infra.jpg 1360w,
/static/87e65d80fb642a2a2d8b157bf2909454/aaf92/infra.jpg 1920w&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;팀원들 모두가 CI/CD에 능숙하지 않은 상황에서 상대적으로 대중적이고 관련 자료를 쉽게 접할 수 있는 기술을 생각했을 때,&lt;br&gt;
Jenkins와 GitHub Actions가 고려 대상이었습니다.&lt;/p&gt;
&lt;p&gt;아래와 같은 이유로, 둘 중 GitHub Actions를 사용해 최대한 간단하게 CI/CD를 구축하는 것이 적합하다고 판단했습니다.  &lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;메모리 부담 최소화&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Jenkins를 사용하면, EC2에서 빌드 및 테스트를 수행해야 합니다.&lt;/li&gt;
&lt;li&gt;반면, GitHub Actions는 GitHub Artifact에 업로드한 빌드 결과물을 EC2에서 다운로드하면 됩니다.&lt;/li&gt;
&lt;li&gt;실제로 한 팀원이 EC2 t2g.micro에 젠킨스 CI/CD를 적용했다가, 메모리가 부족해 서버가 죽는 과거의 경험을 공유해주었습니다.&lt;/li&gt;
&lt;li&gt;때문에 적어도 CI 만큼은 GitHub Actions로 분리해 테스트 실행을 외부 서비스에 위임하기로 했습니다.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;하지만 그렇다면, 간결한 파이프라인을 위해 CI/CD를 모두 GitHub Actions로 통합하는 것이 좋다고 판단했습니다.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;EC2에서 &lt;code class=&quot;language-text&quot;&gt;./gradlew build&lt;/code&gt;를 수행해 직접 빌드 및 테스트를 할 경우 아래와 같이 총 26.2%의 사용량이 확인되지만,&lt;br&gt;
&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/3e3b041ba86d85b4ba5b6adb3ab991ab/ca756/ec2-build-usage.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: 39.411764705882355%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABoElEQVR42k2R2U7CUBCG+xJIvGWnLWWpUNqytGUTmlCgxHfwQhI3BKNeCHqhRo0RfdzfmRMgXvw5kzNz/vlmjvS9vMb7/BybuwU+by6xuV/i5+EWvySOP+ju63aOl/MZvrlmcYXns1O8Xszw9rTG43qN9Var1QqSU6vhJJxAz2uwq4bQ0B+gYVvouC56rRYMXUfdMtFqNhGOArRdB1o2i8NoFNF/ihxEIOn6EYJgBKNahUMGHhkMg2AfsxqNJlzXw2DgYxKGGE8mMC0LqXQasiwjS+Y7SfF4HJ1OB2lKNomgXC5DVRQopHw+j1KpBNuuoV6v47jXw3Q6Rb/fJ/OBMEgkEkKpVArJZBISBy7RZDIZ1Gh8wzCQy+WgqioKhYIwrVQq4p4bBkTf7XZFzM3YVNM08V4YyrKCdrstEkzBhFygbA1LtL+qacKiET3Pw3g8FoZM6DgO0dswKb83ZBIegU8mZZNisSgomYDJeIeO44o6HrlHo4e0SwbhJlzHq9sSyiKhKKp4zHQ85o5QZ0L6sB2h7/uCkE+uj8ViYn+7Hf4BLR8XxB5LO8UAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;ec2-build-usage.png&apos; title=&apos;&apos; src=&apos;/static/3e3b041ba86d85b4ba5b6adb3ab991ab/ca1dc/ec2-build-usage.png&apos; srcset=&apos;/static/3e3b041ba86d85b4ba5b6adb3ab991ab/e7570/ec2-build-usage.png 170w,
/static/3e3b041ba86d85b4ba5b6adb3ab991ab/f46e7/ec2-build-usage.png 340w,
/static/3e3b041ba86d85b4ba5b6adb3ab991ab/ca1dc/ec2-build-usage.png 680w,
/static/3e3b041ba86d85b4ba5b6adb3ab991ab/02d09/ec2-build-usage.png 1020w,
/static/3e3b041ba86d85b4ba5b6adb3ab991ab/ca756/ec2-build-usage.png 1296w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;ec2-build-usage.png&lt;/figcaption&gt;
  &lt;/figure&gt;
그 대신 Actions Runner가 가동하는 상황을 확인해본 결과, 전체 메모리의 최대 11.9%만을 사용함을 알 수 있었습니다.&lt;br&gt;
&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/da18fd4f83fb28e329badab6f664e0ab/41396/actions-runner-usage.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: 22.352941176470587%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAABEklEQVR42h2QXWuCABSG/RvrojUI+hBGGUQt01omZjS6aBeDxjZYNTO/yiw3lS7638+ki8N7Hng4HF5htVoTRRGbr0+S6MjlN+YSx/wdQ/b2lux8Ij1FhK7D0XNxfzbYq2/8rcV5H+Bs1ux323xs1vktodlsMp1MkOtVFuMRH/MZr7rGTJHp1ivMhwpvpsG038XsdWhXyvQfRbR2i4U+unkvqkyvWua+WEQQRRFd16nXajx1OpgTg4Gq8jwc0s1Z7vUYaxotSUJVFKRG4+Z22m1Mw2A4UJHypx5KJe4KBYTdbkeSJARBgOd5pGmGn+9plnE4hIRhyOkc3/h6vWLnvmVZ+L5PnFfj5blcvuO4Lo7j8A8rfZ//YZfDmwAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;actions-runner-usage.png&apos; title=&apos;&apos; src=&apos;/static/da18fd4f83fb28e329badab6f664e0ab/ca1dc/actions-runner-usage.png&apos; srcset=&apos;/static/da18fd4f83fb28e329badab6f664e0ab/e7570/actions-runner-usage.png 170w,
/static/da18fd4f83fb28e329badab6f664e0ab/f46e7/actions-runner-usage.png 340w,
/static/da18fd4f83fb28e329badab6f664e0ab/ca1dc/actions-runner-usage.png 680w,
/static/da18fd4f83fb28e329badab6f664e0ab/02d09/actions-runner-usage.png 1020w,
/static/da18fd4f83fb28e329badab6f664e0ab/9d567/actions-runner-usage.png 1360w,
/static/da18fd4f83fb28e329badab6f664e0ab/41396/actions-runner-usage.png 1610w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;actions-runner-usage.png&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;쉽고 빠른 적용 &lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;GitHub 레포지토리에서 바로 설정이 가능해 기존 개발 환경과 통합해 사용 가능합니다.&lt;/li&gt;
&lt;li&gt;YAML 파일 작성만으로도 쉽고 빠른 적용이 가능합니다.&lt;/li&gt;
&lt;li&gt;GitHub가 Runner를 관리해주기 때문에, 서버 관리 부담이 덜합니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;CI/CD 파이프라인&lt;/h2&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/7a8df2a639dab8236f0b2622d706c43a/aaf92/cicd-pipeline.jpg&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: 56.470588235294116%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAQAF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3ZQmP//EABgQAAIDAAAAAAAAAAAAAAAAAAABEDFB/9oACAEBAAEFAtTFU//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABoQAAIDAQEAAAAAAAAAAAAAAAERACExEMH/2gAIAQEAAT8hylexoBRDhNm4NPf/2gAMAwEAAgADAAAAEHDP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGxABAQEAAgMAAAAAAAAAAAAAAREAECExQXH/2gAIAQEAAT8Q6JHZiB5YJ2NiRPuIBBrXEFPbXgAIEN//2Q==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;cicd pipeline&apos; title=&apos;&apos; src=&apos;/static/7a8df2a639dab8236f0b2622d706c43a/a22ce/cicd-pipeline.jpg&apos; srcset=&apos;/static/7a8df2a639dab8236f0b2622d706c43a/0b705/cicd-pipeline.jpg 170w,
/static/7a8df2a639dab8236f0b2622d706c43a/31389/cicd-pipeline.jpg 340w,
/static/7a8df2a639dab8236f0b2622d706c43a/a22ce/cicd-pipeline.jpg 680w,
/static/7a8df2a639dab8236f0b2622d706c43a/29373/cicd-pipeline.jpg 1020w,
/static/7a8df2a639dab8236f0b2622d706c43a/232dc/cicd-pipeline.jpg 1360w,
/static/7a8df2a639dab8236f0b2622d706c43a/aaf92/cicd-pipeline.jpg 1920w&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;
CI/CD 파이프라인은 다음과 같습니다.  &lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Pull Request의 생성 또는 업데이트, Pull Request에 대한 Merge가 발생합니다.&lt;/li&gt;
&lt;li&gt;이벤트에 트리거된 &lt;code class=&quot;language-text&quot;&gt;GitHub Actions workflow&lt;/code&gt;가 실행됩니다.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;workflow&lt;/code&gt;에 작성한 내용에 의해, &lt;code class=&quot;language-text&quot;&gt;GitHub hosting Runner&lt;/code&gt;가 빌드 및 테스트를 수행합니다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;이 때, 테스트 결과를 PR 코멘트로 등록해줍니다.&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;Pull Request의 생성 또는 업데이트에 대한 workflow&lt;/code&gt;의 경우 이 단계까지만 수행합니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;Pull request Merge에 대한 workflow&lt;/code&gt;의 경우, 빌드한 결과물을 GitHub의 자체 저장소인 &lt;code class=&quot;language-text&quot;&gt;Artifact Storage&lt;/code&gt;에 업로드합니다.&lt;/li&gt;
&lt;li&gt;우리의 &lt;code class=&quot;language-text&quot;&gt;EC2&lt;/code&gt;에 설치된 &lt;code class=&quot;language-text&quot;&gt;Self Hosted Runner&lt;/code&gt;가 4번의 결과물을 다운로드 받습니다.&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;Self Hosted Runner&lt;/code&gt;가 배포 스크립트를 실행하게 하여, 필요한 어플리케이션을 실행하고 정적 파일을 적절한 위치에 배치합니다.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;2번부터 6번까지, 모두 하나의 workflow 내에서 벌어지는 일입니다.&lt;/p&gt;
&lt;h2&gt;적용 방법&lt;/h2&gt;
&lt;h3&gt;GitHub Actions workflow&lt;/h3&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;workflow&lt;/code&gt;란 하나 이상의 작업을 실행하는, 자동화된 프로세스입니다.&lt;br&gt;
레포지토리의 &lt;code class=&quot;language-text&quot;&gt;.github/workflows&lt;/code&gt; 디렉토리에 YAML 파일을 저장해 &lt;code class=&quot;language-text&quot;&gt;workflow&lt;/code&gt; 를 정의할 수 있습니다.
하나의 레포지토리는 여러 개의 &lt;code class=&quot;language-text&quot;&gt;workflow&lt;/code&gt;를 가질 수 있습니다.&lt;/p&gt;
&lt;p&gt;괜찮을지도 서비스에서는&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;pull request&lt;/code&gt;에 대한 빌드 및 테스트만 수행하는 상황 vs &lt;code class=&quot;language-text&quot;&gt;pull request merge&lt;/code&gt; 시 배포까지 수행하는 상황&lt;/li&gt;
&lt;li&gt;대상이 &lt;code class=&quot;language-text&quot;&gt;main&lt;/code&gt; 브랜치 vs &lt;code class=&quot;language-text&quot;&gt;dev&lt;/code&gt; 브랜치&lt;/li&gt;
&lt;li&gt;대상이 프론트엔드 / 백엔드&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;세 가지 상황을 고려하여 여러 개의 &lt;code class=&quot;language-text&quot;&gt;workflow&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/bf42bd6f3c4972bedd4c3962661f345e/aaf92/workflows-dev.jpg&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: 56.470588235294116%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMBAgX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHdW2CwB//EABgQAQADAQAAAAAAAAAAAAAAAAEAAhEQ/9oACAEBAAEFAlyFq7Hv/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFxAAAwEAAAAAAAAAAAAAAAAAAAIhIP/aAAgBAQAGPwKkbP8A/8QAGxABAAICAwAAAAAAAAAAAAAAAQARECFBUdH/2gAIAQEAAT8hM2gO2KoKvFzeHuP/2gAMAwEAAgADAAAAEEDP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGxAAAgIDAQAAAAAAAAAAAAAAAREAIRAxkUH/2gAIAQEAAT8QuX6YgIGVOAPyClkTbZ7Emnt7j//Z&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;workflows dev&apos; title=&apos;&apos; src=&apos;/static/bf42bd6f3c4972bedd4c3962661f345e/a22ce/workflows-dev.jpg&apos; srcset=&apos;/static/bf42bd6f3c4972bedd4c3962661f345e/0b705/workflows-dev.jpg 170w,
/static/bf42bd6f3c4972bedd4c3962661f345e/31389/workflows-dev.jpg 340w,
/static/bf42bd6f3c4972bedd4c3962661f345e/a22ce/workflows-dev.jpg 680w,
/static/bf42bd6f3c4972bedd4c3962661f345e/29373/workflows-dev.jpg 1020w,
/static/bf42bd6f3c4972bedd4c3962661f345e/232dc/workflows-dev.jpg 1360w,
/static/bf42bd6f3c4972bedd4c3962661f345e/aaf92/workflows-dev.jpg 1920w&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;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/7b25b45d7feddcba30970fd1c6a9cb32/aaf92/workflows-prod.jpg&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: 56.470588235294116%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMBAgX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHdW2CwB//EABgQAQADAQAAAAAAAAAAAAAAAAEAAhEQ/9oACAEBAAEFAlyFq7Hv/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGBAAAgMAAAAAAAAAAAAAAAAAACECESD/2gAIAQEABj8CYpXn/8QAGxABAAICAwAAAAAAAAAAAAAAAQARECFBUdH/2gAIAQEAAT8hM2gO2KoKeLm8Pcf/2gAMAwEAAgADAAAAEEDP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGxAAAgIDAQAAAAAAAAAAAAAAAREAMRAhkUH/2gAIAQEAAT8Q3L9MQEDNCgD8g0sS1nsSadvcf//Z&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;workflows prod&apos; title=&apos;&apos; src=&apos;/static/7b25b45d7feddcba30970fd1c6a9cb32/a22ce/workflows-prod.jpg&apos; srcset=&apos;/static/7b25b45d7feddcba30970fd1c6a9cb32/0b705/workflows-prod.jpg 170w,
/static/7b25b45d7feddcba30970fd1c6a9cb32/31389/workflows-prod.jpg 340w,
/static/7b25b45d7feddcba30970fd1c6a9cb32/a22ce/workflows-prod.jpg 680w,
/static/7b25b45d7feddcba30970fd1c6a9cb32/29373/workflows-prod.jpg 1020w,
/static/7b25b45d7feddcba30970fd1c6a9cb32/232dc/workflows-prod.jpg 1360w,
/static/7b25b45d7feddcba30970fd1c6a9cb32/aaf92/workflows-prod.jpg 1920w&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;h3&gt;workflow 만들기&lt;/h3&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;workflow&lt;/code&gt;는 기본적으로 아래와 같은 요소들을 가져야 합니다.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;workflow&lt;/code&gt;를 유발시킬 하나 이상의 이벤트 : &lt;code class=&quot;language-text&quot;&gt;on&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;workflow&lt;/code&gt;에서 수행할 하나 이상의 작업: &lt;code class=&quot;language-text&quot;&gt;job&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;job&lt;/code&gt; 블록 내에 단계 별 스크립트 또는 익스텐션 실행을 정의: &lt;code class=&quot;language-text&quot;&gt;step&lt;/code&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;여기서 주의할 점은, 여러개의 &lt;code class=&quot;language-text&quot;&gt;job&lt;/code&gt;은 기본적으로 병렬적으로 처리된다는 것입니다.&lt;br&gt;
순차적으로 실행하고 싶다면, &lt;code class=&quot;language-text&quot;&gt;needs&lt;/code&gt; 블록을 사용해야 합니다.  &lt;/p&gt;
&lt;p&gt;아래는 현재 적용된 workflow입니다. 이해를 돕기 위해 주석을 추가하였습니다.  &lt;/p&gt;
&lt;h3&gt;백엔드 CI workflow&lt;/h3&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yaml&quot;&gt;&lt;pre class=&quot;language-yaml&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Backend CI For Test Validation

&lt;span class=&quot;token comment&quot;&gt;# 트리거 설정&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;workflow_dispatch&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  
  &lt;span class=&quot;token key atrule&quot;&gt;pull_request&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;branches&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt; main&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; develop &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;paths&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; backend/&lt;span class=&quot;token important&quot;&gt;**&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;# 해당 디렉토리 내 파일의 변경이 있을 때만 트리거됨&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;# 테스트 결과 등록을 위한 권한 설정&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;permissions&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 
  &lt;span class=&quot;token key atrule&quot;&gt;pull-requests&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; write
  &lt;span class=&quot;token key atrule&quot;&gt;checks&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; write
  &lt;span class=&quot;token key atrule&quot;&gt;contents&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; write
  
&lt;span class=&quot;token comment&quot;&gt;# 수행할 작업들&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;jobs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;build-and-comment&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token comment&quot;&gt;# 해당 job을 실행할 환경 설정&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ubuntu&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;22.04&lt;/span&gt;

    &lt;span class=&quot;token key atrule&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/checkout@v3
    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Set up JDK 17
      &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/setup&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;java@v3
      &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;token key atrule&quot;&gt;java-version&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;17&apos;&lt;/span&gt;
        &lt;span class=&quot;token key atrule&quot;&gt;distribution&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;temurin&apos;&lt;/span&gt;
        
    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; gradlew 실행 권한 부여
      &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; chmod +x gradlew
      &lt;span class=&quot;token key atrule&quot;&gt;working-directory&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; backend

    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Gradle build 시작
      &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ./gradlew clean build
      &lt;span class=&quot;token key atrule&quot;&gt;working-directory&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; backend

    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 테스트 결과를 PR에 코멘트로 등록합니다
      &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; EnricoMi/publish&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;unit&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;test&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;result&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;action@v1
      &lt;span class=&quot;token key atrule&quot;&gt;if&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; always()
      &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;token key atrule&quot;&gt;files&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;backend/build/test-results/test/TEST-*.xml&apos;&lt;/span&gt;

    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 테스트 실패 시&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; 실패한 코드 라인에 Check 코멘트를 등록합니다
      &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; mikepenz/action&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;junit&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;report@v3
      &lt;span class=&quot;token key atrule&quot;&gt;if&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; always()
      &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;token key atrule&quot;&gt;report_paths&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;**/build/test-results/test/TEST-*.xml&apos;&lt;/span&gt;
        &lt;span class=&quot;token key atrule&quot;&gt;token&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; $&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; github.token &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;h3&gt;백엔드 CD workflow&lt;/h3&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yaml&quot;&gt;&lt;pre class=&quot;language-yaml&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Backend develop CI/CD

&lt;span class=&quot;token key atrule&quot;&gt;on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;workflow_dispatch&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  
  &lt;span class=&quot;token key atrule&quot;&gt;pull_request&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
     &lt;span class=&quot;token comment&quot;&gt;# 배포 설정은 main, develop 브랜치 별로 다르게 트리거&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;branches&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt; develop &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
     &lt;span class=&quot;token comment&quot;&gt;# 브랜치가 닫힐 때만 트리거&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;types&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;closed&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;paths&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; backend/&lt;span class=&quot;token important&quot;&gt;**&lt;/span&gt;

&lt;span class=&quot;token key atrule&quot;&gt;permissions&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;contents&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; read
  
&lt;span class=&quot;token key atrule&quot;&gt;jobs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;build-and-upload&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;    
    &lt;span class=&quot;token comment&quot;&gt;# Pull Request를 그냥 닫은 게 아니라, merge해서 닫았을 때만 실행&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;if&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; github.event.pull_request.merged
    
    &lt;span class=&quot;token key atrule&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ubuntu&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;22.04&lt;/span&gt;

    &lt;span class=&quot;token key atrule&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/checkout@v3
    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Set up JDK 17
      &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/setup&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;java@v3
      &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;token key atrule&quot;&gt;java-version&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;17&apos;&lt;/span&gt;
        &lt;span class=&quot;token key atrule&quot;&gt;distribution&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;temurin&apos;&lt;/span&gt;
        
    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; gradlew 실행 권한 부여
      &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; chmod +x gradlew
      &lt;span class=&quot;token key atrule&quot;&gt;working-directory&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; backend

    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Gradle build 시작
      &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ./gradlew clean build
      &lt;span class=&quot;token key atrule&quot;&gt;working-directory&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; backend
        
    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; jar 파일 artifact에 업로드
      &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/upload&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;artifact@v3
      &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; BackendApplication
        &lt;span class=&quot;token key atrule&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; backend/build/libs/mapbefine.jar

  &lt;span class=&quot;token key atrule&quot;&gt;deploy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
     &lt;span class=&quot;token comment&quot;&gt;# Pull Request를 그냥 닫은 게 아니라, merge해서 닫았을 때만 실행&lt;/span&gt;
     &lt;span class=&quot;token key atrule&quot;&gt;if&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; github.event.pull_request.merged

     &lt;span class=&quot;token comment&quot;&gt;# deploy는 build-and-upload 작업과 달리 self-hosted runner를 사용&lt;/span&gt;
     &lt;span class=&quot;token comment&quot;&gt;# main, develop 브랜치마다 각각 운영 서버, 개발 서버의 runner만을 실행하도록 해야 함&lt;/span&gt;
     &lt;span class=&quot;token key atrule&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt; self&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;hosted&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; dev &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;를
     &lt;span class=&quot;token comment&quot;&gt;# build-and-upload 작업이 성공적으로 완료될 경우 실행&lt;/span&gt;
     &lt;span class=&quot;token key atrule&quot;&gt;needs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; build&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;and&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;upload
  
     &lt;span class=&quot;token key atrule&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 구버전 jar 파일 삭제
        &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; rm &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;rf /home/ubuntu/backend/build/&lt;span class=&quot;token important&quot;&gt;*.jar&lt;/span&gt; 

      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; jar파일 artifact에서 다운로드
        &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/download&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;artifact@v3 
        &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
          &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; BackendApplication
          &lt;span class=&quot;token key atrule&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; /home/ubuntu/backend/build/

      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 배포하기
        &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; /home/ubuntu/backend/deploy.sh

      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 슬랙 메시지 보내기

        &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 8398a7/action&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;slack@v3
        &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
          &lt;span class=&quot;token key atrule&quot;&gt;mention&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;here&apos;&lt;/span&gt;
          &lt;span class=&quot;token key atrule&quot;&gt;if_mention&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; always
          &lt;span class=&quot;token key atrule&quot;&gt;status&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; job.status &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
          &lt;span class=&quot;token key atrule&quot;&gt;fields&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; workflow&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;job&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;commit&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;message&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;ref&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;author&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;took
        &lt;span class=&quot;token key atrule&quot;&gt;env&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
          &lt;span class=&quot;token key atrule&quot;&gt;SLACK_WEBHOOK_URL&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; $&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; secrets.SLACK_WEBHOOK_URL &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;token key atrule&quot;&gt;if&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; always()&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h3&gt;프론트엔드 CI workflow&lt;/h3&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yaml&quot;&gt;&lt;pre class=&quot;language-yaml&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Frontend CI For Test Validation
&lt;span class=&quot;token comment&quot;&gt;# 어떤 이벤트가 발생하면 실행할지 결정&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;#pull request open과 reopen 시 실행한다.&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;pull_request&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;branches&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;main&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; develop&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;paths&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; frontend/&lt;span class=&quot;token important&quot;&gt;**&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;defaults&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;working-directory&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ./frontend
&lt;span class=&quot;token key atrule&quot;&gt;jobs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;jest&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ubuntu&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;22.04&lt;/span&gt;

    &lt;span class=&quot;token key atrule&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Checkout repository
        &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/checkout@v2

      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Setup Node.js
        &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/setup&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;node@v2
        &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
          &lt;span class=&quot;token key atrule&quot;&gt;node-version&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;18&quot;&lt;/span&gt;

      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Install node modules
        &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; npm install

      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Run Jest test
        &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; npm run test&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h3&gt;프론트엔드 CD workflow&lt;/h3&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yaml&quot;&gt;&lt;pre class=&quot;language-yaml&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Frontend develop CD

&lt;span class=&quot;token key atrule&quot;&gt;on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;workflow_dispatch&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;

  &lt;span class=&quot;token key atrule&quot;&gt;pull_request&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;branches&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt; develop &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;types&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; closed &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;paths&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; frontend/&lt;span class=&quot;token important&quot;&gt;**&lt;/span&gt;

&lt;span class=&quot;token key atrule&quot;&gt;permissions&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;contents&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; read

&lt;span class=&quot;token key atrule&quot;&gt;jobs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;build-and-upload&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;if&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; github.event.pull_request.merged

    &lt;span class=&quot;token key atrule&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ubuntu&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;22.04&lt;/span&gt;

    &lt;span class=&quot;token key atrule&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/checkout@v3
      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Set up Node.js 18
        &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/setup&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;node@v3
        &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
          &lt;span class=&quot;token key atrule&quot;&gt;node-version&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;18&lt;/span&gt;
          &lt;span class=&quot;token key atrule&quot;&gt;cache&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;npm&quot;&lt;/span&gt;

      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Install npm
        &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; npm install &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;force

      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; grant excute access
        &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; chmod +x npm

      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Build project
        &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; npm run build

      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; upload to artifact
        &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/upload&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;artifact@v3
        &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
          &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; FrontendApplication
          &lt;span class=&quot;token key atrule&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; frontend/dist

  &lt;span class=&quot;token key atrule&quot;&gt;deploy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
      &lt;span class=&quot;token key atrule&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt; self&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;hosted&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; dev &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
      &lt;span class=&quot;token key atrule&quot;&gt;needs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; build&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;and&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;upload

      &lt;span class=&quot;token key atrule&quot;&gt;if&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; github.event.pull_request.merged

      &lt;span class=&quot;token key atrule&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; delete old js file
          &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; rm &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;rf /home/ubuntu/frontend/dist

        &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; download js file from artifact
          &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/download&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;artifact@v3
          &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
            &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; FrontendApplication
            &lt;span class=&quot;token key atrule&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; /home/ubuntu/frontend

        &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; deploy
          &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; /home/ubuntu/frontend/deploy.sh

        &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; send slack message

          &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 8398a7/action&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;slack@v3
          &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
            &lt;span class=&quot;token key atrule&quot;&gt;mention&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;here&apos;&lt;/span&gt;
            &lt;span class=&quot;token key atrule&quot;&gt;if_mention&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; always
            &lt;span class=&quot;token key atrule&quot;&gt;status&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; job.status &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
            &lt;span class=&quot;token key atrule&quot;&gt;fields&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; workflow&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;job&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;commit&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;message&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;ref&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;author&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;took
          &lt;span class=&quot;token key atrule&quot;&gt;env&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
            &lt;span class=&quot;token key atrule&quot;&gt;SLACK_WEBHOOK_URL&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; $&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; secrets.SLACK_WEBHOOK_URL &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
          &lt;span class=&quot;token key atrule&quot;&gt;if&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; always()&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2&gt;Self-hosted Runner&lt;/h2&gt;
&lt;p&gt;앞서 말씀드린 파이프라인 대로 배포를 하기 위해서는, 배포를 할 서버에 &lt;code class=&quot;language-text&quot;&gt;GitHub Actions&lt;/code&gt;의 &lt;code class=&quot;language-text&quot;&gt;Self-hosted Runner&lt;/code&gt;를 설치해야 합니다.  &lt;/p&gt;
&lt;p&gt;앞서 설명드린 &lt;code class=&quot;language-text&quot;&gt;workflow&lt;/code&gt;는 GitHub에서 호스팅하는 Runner가 수행할 수도 있지만,&lt;br&gt;
원하는 서버에 자체적으로 Runner를 호스팅하여 사용할 수도 있습니다.&lt;/p&gt;
&lt;p&gt;workflow의 &lt;code class=&quot;language-text&quot;&gt;runs-on&lt;/code&gt; 블록에서 어떤 Runner를 통해 작업을 수행할지 정의합니다.&lt;/p&gt;
&lt;h3&gt;EC2에 Self-hosted Runner 띄우기&lt;/h3&gt;
&lt;h4&gt;1. 다운로드&lt;/h4&gt;
&lt;p&gt;레포지토리의 &lt;code class=&quot;language-text&quot;&gt;Settings&lt;/code&gt; - &lt;code class=&quot;language-text&quot;&gt;Actions&lt;/code&gt; - &lt;code class=&quot;language-text&quot;&gt;Runners&lt;/code&gt;에 들어가면 &lt;code class=&quot;language-text&quot;&gt;New self-hosted runner&lt;/code&gt; 버튼이 있습니다.&lt;br&gt;
&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/24564f825750ff54f3a9c51f8ffb805b/d621b/create-runner.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: 51.17647058823529%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABC0lEQVR42qVS2U7DQAzs//8Or/xDJQ7BGxIliByk2e6dPaa2Q1pAPJGRrF35GI+9u3MhwlgHTcan9UHO8TjBeQ+Os8+xX2t48pVc0PQNHg9PeB8a5DkhpoyZbAdCiFRkLVaknPHRf+JkPMVmSkxiiY1iiZrcv9zhZn+Lh9dnqalftUIYKaFtOzjnxFlKhZ8rbKBiUhMDK3SimBvPpOiKiu9YCEnhcZqIqFxS1rSQKrrRoB0U+mFE23XQ2iBTbqnlUvODkPdijLn2rJUMYoXvv3Ss8b8ghM5HTJOSUXMq0v2/EEJtLA5vjexmGaVuI+RlK6VklK1Yvg29slInIeavsZnQ06ft+l5eb6vKM30SExSjfMg1AAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;create-runner.png&apos; title=&apos;&apos; src=&apos;/static/24564f825750ff54f3a9c51f8ffb805b/ca1dc/create-runner.png&apos; srcset=&apos;/static/24564f825750ff54f3a9c51f8ffb805b/e7570/create-runner.png 170w,
/static/24564f825750ff54f3a9c51f8ffb805b/f46e7/create-runner.png 340w,
/static/24564f825750ff54f3a9c51f8ffb805b/ca1dc/create-runner.png 680w,
/static/24564f825750ff54f3a9c51f8ffb805b/02d09/create-runner.png 1020w,
/static/24564f825750ff54f3a9c51f8ffb805b/9d567/create-runner.png 1360w,
/static/24564f825750ff54f3a9c51f8ffb805b/d621b/create-runner.png 1439w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;create-runner.png&lt;/figcaption&gt;
  &lt;/figure&gt;
버튼을 누르면 아래와 같은 설정 페이지로 접속하는데, Runner를 띄울 서버 환경에 맞는 설정을 선택해줍니다.&lt;br&gt;
&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/64b8788e7ab4312363528c8e98b26d58/722fb/architecture-runner.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: 51.17647058823529%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABeElEQVR42n1Ta5ODIAzs//+TN3e9+hYpAlJB97KpfX05ZnZUSJbNJp7ikmCvM2YfEeTdzR4uJPRTgJmuGCeLYTQw9ooQk4I5RPABTvbTLSOXHdY6nLZtQ4wR+74ruELK6G3EOAzoe8Fwx7JErOuqBLdVcFvB/McKIeBUSoExE0ZjhHjRA+s8vs41qs7iUrdomhbOOYkzEieKrai/yoXWY83lk3DbdkxSlnPzU+Eqt9MGBnOLMUWUPM75zDmrOm49K7sTbkpY3qRzz80zUkr6TX/oHUmYy6ooYJHzHS9C7/295FFMf/eCjWnb7kjehKg8k/5bvFAJ66ZRuY/Fm9lVGs+yFRJXjtIzUV54t+JUtDyvKvJhMJ9V22tD6m7ApekwyAg5v8BL6cTMEVpuMhHS6YOQVaqHXd9/dDnJaJwvjYLElRASdTso8XiA0xDfCFUh54pjw5LpgRLKfP1canz/Vqqy7UexYFYCI8M7yQQ4+RH47UXlg5D2/QH2dAmr1rh9agAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;architecture-runner.png&apos; title=&apos;&apos; src=&apos;/static/64b8788e7ab4312363528c8e98b26d58/ca1dc/architecture-runner.png&apos; srcset=&apos;/static/64b8788e7ab4312363528c8e98b26d58/e7570/architecture-runner.png 170w,
/static/64b8788e7ab4312363528c8e98b26d58/f46e7/architecture-runner.png 340w,
/static/64b8788e7ab4312363528c8e98b26d58/ca1dc/architecture-runner.png 680w,
/static/64b8788e7ab4312363528c8e98b26d58/02d09/architecture-runner.png 1020w,
/static/64b8788e7ab4312363528c8e98b26d58/9d567/architecture-runner.png 1360w,
/static/64b8788e7ab4312363528c8e98b26d58/722fb/architecture-runner.png 1465w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;architecture-runner.png&lt;/figcaption&gt;
  &lt;/figure&gt;
해당 환경의 터미널에서 runner package를 다운로드합니다. 선택한 설정에 맞게 제공된 커맨드를 복사해 실행하면 됩니다.&lt;br&gt;
&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/e179cbebe9b0269f6f728b54f6b7f512/d621b/download-runner.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: 54.70588235294118%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABiklEQVR42o2Ta4rcMBCE9/6HCGQh5AqBkFMElvxM2Ox4xpYfsvV+uLbUMxNm2SFJQ1lGsj5Xd0sPYGzGQGuNa+Sc0Z96xJhQckFOGXutwL7f1008tIexFicCatvEKClBK4UcAmqMop1zTTXFs2SOiuENVICWwOZwvyzs4nDAUU1Qs8YwLVhWAxsSXMw3KojeAxcjf4DOeQFa55BLkQ+6lw6/fh9wOPYU4ScFRbDerMCbjI/3gd4HqHGS1MUhoV13xM/nA55fjuh6hWFczm7HGeO8YlpWLJtDdHeAzdk4zdKMFpXj2PcYuXnivG6bCTPGys9FLjCzgMS974CJXdw2wzGdgXQ40OFM17MaoRu0aV7geCI8M2mpJoJLTO+7fBvXxnz5+g0fPj7i8dNnfH/6gdV6THpjmmygcVI/wyaFVP4OFIdModV0oLuFkFwqStmpKu+ZZzNd1Ob+CWwuZ4JaA6SbrNVqHVyICDwuV/mQBfpfwFbTdd04WrlJTeu28SQ4WTMsgXZ0WN/elFeo6FfQ1tbFBAAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;download-runner.png&apos; title=&apos;&apos; src=&apos;/static/e179cbebe9b0269f6f728b54f6b7f512/ca1dc/download-runner.png&apos; srcset=&apos;/static/e179cbebe9b0269f6f728b54f6b7f512/e7570/download-runner.png 170w,
/static/e179cbebe9b0269f6f728b54f6b7f512/f46e7/download-runner.png 340w,
/static/e179cbebe9b0269f6f728b54f6b7f512/ca1dc/download-runner.png 680w,
/static/e179cbebe9b0269f6f728b54f6b7f512/02d09/download-runner.png 1020w,
/static/e179cbebe9b0269f6f728b54f6b7f512/9d567/download-runner.png 1360w,
/static/e179cbebe9b0269f6f728b54f6b7f512/d621b/download-runner.png 1439w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;download-runner.png&lt;/figcaption&gt;
  &lt;/figure&gt;   &lt;/p&gt;
&lt;p&gt;아래는 Linux, ARM64 환경의 runner를 다운로드받기 위한 스크립트입니다.  &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 comment&quot;&gt;# Create a folder&lt;/span&gt;
$ &lt;span class=&quot;token function&quot;&gt;mkdir&lt;/span&gt; actions-runner &lt;span class=&quot;token operator&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;token builtin class-name&quot;&gt;cd&lt;/span&gt; actions-runner
&lt;span class=&quot;token comment&quot;&gt;# Download the latest runner package&lt;/span&gt;
$ &lt;span class=&quot;token function&quot;&gt;curl&lt;/span&gt; &lt;span class=&quot;token parameter variable&quot;&gt;-o&lt;/span&gt; actions-runner-linux-arm64-2.307.1.tar.gz &lt;span class=&quot;token parameter variable&quot;&gt;-L&lt;/span&gt; https://github.com/actions/runner/releases/download/v2.307.1/actions-runner-linux-arm64-2.307.1.tar.gz
&lt;span class=&quot;token comment&quot;&gt;# Optional: Validate the hash&lt;/span&gt;
$ &lt;span class=&quot;token builtin class-name&quot;&gt;echo&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;01edc84342ef4128a8f19bc2f33709b40f2f1c40e250e2a4c5e0adf620044ab3  actions-runner-linux-arm64-2.307.1.tar.gz&quot;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;|&lt;/span&gt; shasum &lt;span class=&quot;token parameter variable&quot;&gt;-a&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;256&lt;/span&gt; &lt;span class=&quot;token parameter variable&quot;&gt;-c&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;# Extract the installer&lt;/span&gt;
$ &lt;span class=&quot;token function&quot;&gt;tar&lt;/span&gt; xzf ./actions-runner-linux-arm64-2.307.1.tar.gz&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h4&gt;2. Runner 생성 및 설정&lt;/h4&gt;
&lt;p&gt;마찬가지로 제공된 스크립트에 따라, runner를 생성하고 설정합니다.&lt;br&gt;
&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/c60bf6833f878124f1a20547fc2900a9/d621b/configure-runner.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: 54.70588235294118%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABhUlEQVR42o2T60rsMBSFff+HEI4i5xUE8SkEwX/n4GVq06ZNc22azHIltTIyRdywmjaZ+bL2zs4FGNoYKKWwxZISWiEwLxEp5/p9PB7xm7goD2Mt3t9bZP65REoZatIEZWSCio6fyifa5s6AlsDicFssY9tLNG2HTo4QcsA4Gdgww4W4al7HOaZzoHO+Aq1zNb0Sh0bg/8sb3pqWEit8UFDaEm7rBsYFlmUH6H1AR0cldfpD8Xkg4N/zK55fm/ou+rECy9gPE+SoK3iOy07KdNYzrWVZFzNd9tygSHJejRNGwoyxdfNNjg4jUz8DRu6iteG4LmbvIQ4Nhr7H0PVQUq4aBjh2hGcmM38TCU2OWX0e5hfwNOrBULd397j8c42rm794eHzCZAOkMhi1gzIOxkeYkBDo8kdgdTizpnQomgYjHS50k0KoKu9FkWUqShROWmcXWFwOrJvo5NdpTnTl/IzAmm3ybJu4d8p7wFLTSWveIltvUhknzhnr6pqxbDWXeJO+N/YHaNxYBOj1FvYAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;configure-runner.png&apos; title=&apos;&apos; src=&apos;/static/c60bf6833f878124f1a20547fc2900a9/ca1dc/configure-runner.png&apos; srcset=&apos;/static/c60bf6833f878124f1a20547fc2900a9/e7570/configure-runner.png 170w,
/static/c60bf6833f878124f1a20547fc2900a9/f46e7/configure-runner.png 340w,
/static/c60bf6833f878124f1a20547fc2900a9/ca1dc/configure-runner.png 680w,
/static/c60bf6833f878124f1a20547fc2900a9/02d09/configure-runner.png 1020w,
/static/c60bf6833f878124f1a20547fc2900a9/9d567/configure-runner.png 1360w,
/static/c60bf6833f878124f1a20547fc2900a9/d621b/configure-runner.png 1439w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;configure-runner.png&lt;/figcaption&gt;
  &lt;/figure&gt;
먼저 아래 커맨드를 실행하면, 아래와 같이 Runner 환경 설정을 위해 몇 가지를 입력해야 합니다.  &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;$ ./config.sh &lt;span class=&quot;token parameter variable&quot;&gt;--url&lt;/span&gt; &lt;span class=&quot;token variable&quot;&gt;${repository URL}&lt;/span&gt; &lt;span class=&quot;token parameter variable&quot;&gt;--token&lt;/span&gt; &lt;span class=&quot;token variable&quot;&gt;${runner 생성 페이지에서 제공된 토큰}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/6fedd99483492e0a4fda63fa9cc0365f/911ab/runner-registration.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: 81.76470588235294%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAABXElEQVR42o1UabKGIAzzdo4bqGxu7/7H4DVIHPXTGX9kWqQNKS0WWusI9H0f6Sulku267rKmj+/81jTNBQU3QwjRGJMA8lEsDxqGIRpro/c++eM4Hge+EpLMSPAoJLBGkgdJdPLdZUIrFgDpIyHI4LSy2cKirG2Lal1jtyyxmyZZ/4m/phgmtm37TogNAmslChM0oLMvJWIvg7E/hDaXAiCgruukNKm4BUPVGXeyXaFWlw6/BX5FYYONk9wTugwL0qqqktKvuBAGH1K5JEX3oJiqz+q5JjAV93ssnHfROXfMIX0c4PLdzvkwAjFoyiPhPM8RWGVMYEG0yLgQINhkjADsIYYH8mquJU/hICE51lCGRA4zfQJxTw0s/ObjKmRQsGSLhLIskwKqoH/GY5dxH87u94Z3yhLOXXxLfiT0bi8pEQvgszl8s7Bf57MwPs/hFI4Hr25P7Ok39Ub4D2J5aL3E0xoNAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;runner-registration.png&apos; title=&apos;&apos; src=&apos;/static/6fedd99483492e0a4fda63fa9cc0365f/ca1dc/runner-registration.png&apos; srcset=&apos;/static/6fedd99483492e0a4fda63fa9cc0365f/e7570/runner-registration.png 170w,
/static/6fedd99483492e0a4fda63fa9cc0365f/f46e7/runner-registration.png 340w,
/static/6fedd99483492e0a4fda63fa9cc0365f/ca1dc/runner-registration.png 680w,
/static/6fedd99483492e0a4fda63fa9cc0365f/911ab/runner-registration.png 710w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;runner-registration.png&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;위 이미지처럼 name, 추가 label을 지정하고 설치한 runner를 확인하면, 다음과 같이 &lt;code class=&quot;language-text&quot;&gt;dev&lt;/code&gt; 라벨이 추가된 것을 확인할 수 있습니다.
&lt;figure class=&apos;gatsby-resp-image-figure&apos; style=&apos;margin-bottom: 16px;&apos;&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; &apos;&gt;
      &lt;a class=&apos;gatsby-resp-image-link&apos; href=&apos;/static/d42a5c2af740caa6234742b088b86f9e/9f1c6/runner-label.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: 29.411764705882355%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA8klEQVR42oVQy0oEMRDM/8P+gHr2Nxb1sOhFEPayIgvjg2F1Hnn0ZJJJpuzOqCy4aENRXZ1KdyfKWouqqtC2LSTmecZ/8e1ZP22wur7A2e0lVlfnuH/dQrnBoz40aDoN4wYYSyAiuCPQMGBgHxGz96XmWe/e9rjZ3WGz32L9+IDaNFAUEt5NxEFH1N2IxoyIcfqFaRKOX7zkOWVeVzZeIKEmLhpHCGxKnMcpMfIC1oF1iKfhQ0RvXfGMnEsvNY4B1fMLOm3Q9aY8WRvH7Iom8rxVKsNO4aNp0ff6x6Pkg+UZOecyIaXjy6nU/4rE5+KRPoJPfd3QMifHA3wAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;runner-label.png&apos; title=&apos;&apos; src=&apos;/static/d42a5c2af740caa6234742b088b86f9e/ca1dc/runner-label.png&apos; srcset=&apos;/static/d42a5c2af740caa6234742b088b86f9e/e7570/runner-label.png 170w,
/static/d42a5c2af740caa6234742b088b86f9e/f46e7/runner-label.png 340w,
/static/d42a5c2af740caa6234742b088b86f9e/ca1dc/runner-label.png 680w,
/static/d42a5c2af740caa6234742b088b86f9e/9f1c6/runner-label.png 828w&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;figcaption class=&apos;gatsby-resp-image-figcaption&apos;&gt;runner-label.png&lt;/figcaption&gt;
  &lt;/figure&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;⚠️ 개인 로컬에서 테스트로 만든 예시 이미지로, 실제 서비스의 운영 환경과는 상이합니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;더 빠른 설정을 원한다면, 아래와 같이 &lt;code class=&quot;language-text&quot;&gt;./config.sh&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;$ ./config.sh &lt;span class=&quot;token parameter variable&quot;&gt;--url&lt;/span&gt; &lt;span class=&quot;token variable&quot;&gt;${repository URL}&lt;/span&gt; &lt;span class=&quot;token parameter variable&quot;&gt;--token&lt;/span&gt; &lt;span class=&quot;token variable&quot;&gt;${runner 생성 페이지에서 제공된 토큰}&lt;/span&gt; &lt;span class=&quot;token parameter variable&quot;&gt;--name&lt;/span&gt; &lt;span class=&quot;token builtin class-name&quot;&gt;test&lt;/span&gt; &lt;span class=&quot;token parameter variable&quot;&gt;--labels&lt;/span&gt; dev&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;label을 왜 추가했을까요?&lt;/strong&gt;&lt;br&gt;
각 Runner를 구분할 수 있는 label을 지정해서 &lt;code class=&quot;language-text&quot;&gt;runs-on&lt;/code&gt; 블록에서 어떤 Runner에게 일을 시킬지 명시하기 위함입니다.&lt;br&gt;
괜찮을지도 팀은 한 리포지토리에서 운영 서버, 개발 서버에 각각 띄울 두 개의 Runner를 사용하기 때문에
이를 구분하기 위한 &lt;code class=&quot;language-text&quot;&gt;dev&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;prod&lt;/code&gt; label을 지정하였습니다.&lt;br&gt;
아래는 &lt;code class=&quot;language-text&quot;&gt;dev&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;self-hosted&lt;/code&gt; 라벨을 가진 runner를 지정하는 예시입니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yaml&quot;&gt;&lt;pre class=&quot;language-yaml&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt; self&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;hosted&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; dev &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;이미 생성한 Runner에 label을 추가하려면?&lt;/strong&gt;&lt;br&gt;
GitHub 공식문서에 따르면, 2023년 2월부터 GUI로 label을 추가하는 기능을 제공하지 않는다고 합니다.&lt;br&gt;
config.sh 파일을 수정해 설정할 수도 없습니다.&lt;br&gt;
대신 GitHub에서 제공하는 &quot;Self-hosted runners&quot; REST API를 사용해 추가해주어야 합니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h4&gt;3. Runner 실행&lt;/h4&gt;
&lt;p&gt;   Runner 설정이 완료되었다면, 아래 명령어로 Runner를 실행합니다.&lt;br&gt;
레포지토리의 &lt;code class=&quot;language-text&quot;&gt;Settings&lt;/code&gt; - &lt;code class=&quot;language-text&quot;&gt;Actions&lt;/code&gt; - &lt;code class=&quot;language-text&quot;&gt;Runners&lt;/code&gt; 페이지에서 Status가 &lt;code class=&quot;language-text&quot;&gt;idle&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;$ ./run.sh&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;참고로 서버 내 저장한 환경변수를 업데이트 했을 때에는, Runner도 재시작하기를 잊지 마세요!&lt;br&gt;
왜일까요? 자세한 내용은&lt;br&gt;
&lt;a href=&quot;https://map-befine-official.github.io/trouble-shooting-actions-runner&quot;&gt;EC2 환경 변수 적용 및 Actions Runner에 환경 변수 적용이 안되는 이슈&lt;/a&gt;에서 확인하실 수 있습니다.&lt;/p&gt;
&lt;h2&gt;참고 자료&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://docs.github.com/ko/actions/using-workflows/about-workflows&quot;&gt;https://docs.github.com/ko/actions/using-workflows/about-workflows&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://docs.github.com/en/actions/hosting-your-own-runners/managing-self-hosted-runners/about-self-hosted-runners&quot;&gt;https://docs.github.com/en/actions/hosting-your-own-runners/managing-self-hosted-runners/about-self-hosted-runners&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://docs.github.com/en/actions/hosting-your-own-runners/managing-self-hosted-runners/using-labels-with-self-hosted-runners&quot;&gt;https://docs.github.com/en/actions/hosting-your-own-runners/managing-self-hosted-runners/using-labels-with-self-hosted-runners&lt;/a&gt;  &lt;/p&gt;</content:encoded></item><item><title><![CDATA[포스트 작성 방법]]></title><description><![CDATA[이 글은 우테코 괜찮을지도팀의 가 작성했습니다. 첫 글은 포스트 작성법에 대해서 다루어보도록 하겠습니다. Repository Local 로 Clone 해오기 본인이 원하는 Directory…]]></description><link>https://map-befine-official.github.io/how-to-write-a-post/</link><guid isPermaLink="false">https://map-befine-official.github.io/how-to-write-a-post/</guid><pubDate>Mon, 24 Jul 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;이 글은 우테코 괜찮을지도팀의 &lt;code class=&quot;language-text&quot;&gt;매튜&lt;/code&gt;가 작성했습니다.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;첫 글은 포스트 작성법에 대해서 다루어보도록 하겠습니다.&lt;/p&gt;
&lt;h3&gt;Repository Local 로 Clone 해오기&lt;/h3&gt;
&lt;p&gt;본인이 원하는 Directory 로 이동해 &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;git&lt;/span&gt; clone https://github.com/map-befine-official/map-befine-official.github.io &lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;위와 같은 명령어를 이용하여 우리 팀의 Repository 를 Local 로 가져옵니다.&lt;/p&gt;
&lt;h2&gt;글 작성하기&lt;/h2&gt;
&lt;p&gt;Repository 를 Local 로 가져오셨다면, 이제 글을 작성해봅시다!&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 builtin class-name&quot;&gt;cd&lt;/span&gt; map-befine-official.github.io&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;위 명령어를 통해서 map-befine-official.github.io 에 Directory 에 들어가주시면 Contents Directory 가 보이실 겁니다.&lt;/p&gt;
&lt;p&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 builtin class-name&quot;&gt;cd&lt;/span&gt; contents/posts&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;위 명령어를 통해 contents/posts 디렉토리 내부까지 가고&lt;/p&gt;
&lt;p&gt;본인이 작성하고자 하는 주제에 걸맞는 이름으로 Directory 를 생성한 후, 만드신 Directory까지 들어가주세요&lt;/p&gt;
&lt;p&gt;저 같은 경우는 Directory 명을 how-to-write-a-post 로 지었기 때문에&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 builtin class-name&quot;&gt;cd&lt;/span&gt; how-to-write-a-post&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&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/afac0117c60ff7905d6f9cb98860a235/5b89d/command.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: 23.52941176470588%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAABYlAAAWJQFJUiTwAAABWElEQVR42iWPSzNCcRyG+2A2DEIakZBUpxviZFD/CBvUOaeT+wwRili4RO6XhTHjK5ixsuGLPP5l8cwzv3fx/ua1LK4V0fd1jEOVhbVhHA4bzm4nA71uXH1e1HQBX9JkKK5L5/CKrPQKPpGr3/6ZVZTUBsrsKp5pDUuu/MpG5YSt6ib6sUkwlmRUxFDnPYzM+HGrKTq9MdoHx+jwjGMbUqXVemYdjNLSP0KrO4p1YJQmZxCLeVhBz19IriUVzINbdp9O2XuZxTxPMLZoEBY6IbFMMJEmnNQISWruiQhs3gnsgWnsyiRt8qksrJI9uKyjF85I5y9ZvyiweZVAOxEE5zMocQ0lkSEgMvjiS0RSJq7oHJ3KFF0hgSOcpCssy/1TtcnPGKU7skf36MVbtP0qRvEGs/yAcfxI/v2Xnbcf9j6+Ofo8o/xVIr69TLMzQmNP4B85tUaD3cMfEnvzTyzTjc4AAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;command&apos; title=&apos;&apos; src=&apos;/static/afac0117c60ff7905d6f9cb98860a235/ca1dc/command.png&apos; srcset=&apos;/static/afac0117c60ff7905d6f9cb98860a235/e7570/command.png 170w,
/static/afac0117c60ff7905d6f9cb98860a235/f46e7/command.png 340w,
/static/afac0117c60ff7905d6f9cb98860a235/ca1dc/command.png 680w,
/static/afac0117c60ff7905d6f9cb98860a235/02d09/command.png 1020w,
/static/afac0117c60ff7905d6f9cb98860a235/9d567/command.png 1360w,
/static/afac0117c60ff7905d6f9cb98860a235/5b89d/command.png 1410w&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;index.md&lt;/code&gt; 파일을 만들어 작성하실 글을 Markdown 형식으로 작성 해주시면되고, &lt;code class=&quot;language-text&quot;&gt;.index_image&lt;/code&gt; 라는 이름으로 Directory 만들어 해당 Directory 에 이미지 파일을 넣어주시면 됩니다.&lt;/p&gt;
&lt;p&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/3ecb386f317dad7f94bb32cf08e0c7b7/5b89d/directory_structure.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: 20%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAABYlAAAWJQFJUiTwAAABG0lEQVR42lWOv0sCcRiHv+eildAFat6Z+eM85fBOME+L9CpaosmlllqbaqgphzLLaMmKXEQSWlojqKUpaqopaOy/efriIDQ8PO/nfXlfXtG4uKXdvad1M6B1fUez0+fossepzCdXfdqDF7qvv3Sefnj4+Obx/Y3nr08anR7bB+ds7Z+xsXvM5l6T+s4hwlurU15exyrVJN7Q+fISueIizsKqrD1siTVXo7ZSxavmKbsmqjqBEAKfogw9wjTSRKcjzMZniOkaOTODmTGGvXhMJxIJEw6FpEMkk0km1Sm56MPvDxAYG0fIg4riGyEsyyKRSKBpGoZhUKlUKJVcUqkUjuMQDAblTJc5jW3bZLNZXHeeQqFINKr//04I/gCACIWBplPJEAAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;directory structure&apos; title=&apos;&apos; src=&apos;/static/3ecb386f317dad7f94bb32cf08e0c7b7/ca1dc/directory_structure.png&apos; srcset=&apos;/static/3ecb386f317dad7f94bb32cf08e0c7b7/e7570/directory_structure.png 170w,
/static/3ecb386f317dad7f94bb32cf08e0c7b7/f46e7/directory_structure.png 340w,
/static/3ecb386f317dad7f94bb32cf08e0c7b7/ca1dc/directory_structure.png 680w,
/static/3ecb386f317dad7f94bb32cf08e0c7b7/02d09/directory_structure.png 1020w,
/static/3ecb386f317dad7f94bb32cf08e0c7b7/9d567/directory_structure.png 1360w,
/static/3ecb386f317dad7f94bb32cf08e0c7b7/5b89d/directory_structure.png 1410w&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;글 올리기!&lt;/h2&gt;
&lt;p&gt;글을 모두 작성하셨다면 이제 올리기만 하면 될 겁니다.&lt;/p&gt;
&lt;p&gt;아주 쉽습니다.&lt;/p&gt;
&lt;p&gt;그냥 main 브랜치에 push 를 하시면돼요!&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;.github/workflows/deploy.yml&lt;/code&gt; 로 인해서 push 만 하셔도 배포 될겁니다.&lt;/p&gt;
&lt;p&gt;야물딱지죠?&lt;/p&gt;
&lt;p&gt;우리 글도 한번 야무지게 써봅시다!&lt;/p&gt;
&lt;h2&gt;글의 제목 작성하기&lt;/h2&gt;
&lt;p&gt;글의 서두에 &lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;---
title: &quot;제목&quot;
description: &quot;설명&quot;
date: &quot;작성 날짜&quot;
update: &quot;수정 날짜&quot;
tags:
  - 태그들
  - ...
---&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&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/b50759e515c677df95ccad84bf69ecd1/f967b/title.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: 31.176470588235293%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAnUlEQVR42p2PywqDMBBF/Ys8RJoimOCDOom6K20xumvp///MbTp00W1cXIZhhsO5BfmANW643u6I24415fl647FGCCGglMpKYa3FSISu69G2HS4jwYcpzfEY0JgzrHWo6xplWUJrDSklH6uqOmDoHCgEhk7zwrb9MIDIJ+shPek84MkYNE3Dy7ciJxnKX7INXTKcl4Wraq145kL+gR+FuKLVhaBWTAAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;&gt;&lt;/span&gt;
  &lt;img class=&apos;gatsby-resp-image-image&apos; alt=&apos;title&apos; title=&apos;&apos; src=&apos;/static/b50759e515c677df95ccad84bf69ecd1/ca1dc/title.png&apos; srcset=&apos;/static/b50759e515c677df95ccad84bf69ecd1/e7570/title.png 170w,
/static/b50759e515c677df95ccad84bf69ecd1/f46e7/title.png 340w,
/static/b50759e515c677df95ccad84bf69ecd1/ca1dc/title.png 680w,
/static/b50759e515c677df95ccad84bf69ecd1/02d09/title.png 1020w,
/static/b50759e515c677df95ccad84bf69ecd1/9d567/title.png 1360w,
/static/b50759e515c677df95ccad84bf69ecd1/f967b/title.png 1418w&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;h2&gt;이미지 삽입&lt;/h2&gt;
&lt;p&gt;이미지를 삽입하시고 싶으시다면, &lt;/p&gt;
&lt;p&gt;저의 가이드를 모두 잘 따르셨다고 가정했을 때, .index_image 내부에 image 파일을 넣고&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;![](.index_image/{이미지 파일 명})&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;이런 식으로 작성해주시면 이미지도 정상적으로 삽입하실  수 있습니다!&lt;/p&gt;
&lt;h2&gt;주의!&lt;/h2&gt;
&lt;p&gt;다른 사람들의 정성스런 글을 날리지 않기 위해, 항상 Push 이전에 Pull 해주는 거 잊지 않으셨죠? ㅋㅋㅋ&lt;/p&gt;
&lt;p&gt;물론 Warning Message 가 뜨긴 할테지만, 잊지 말아주세용~~~&lt;/p&gt;
&lt;h2&gt;레퍼런스&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://pium-official.github.io/blog-starter/&quot;&gt;https://pium-official.github.io/blog-starter/&lt;/a&gt;&lt;/p&gt;</content:encoded></item></channel></rss>