<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>코딩햄 Study Stack</title>
    <link>https://hyem-study.tistory.com/</link>
    <description>속도보다 방향  &amp;zwj;♀️
개발의 재미에 푹 빠져보자  &amp;zwj; </description>
    <language>ko</language>
    <pubDate>Sun, 5 Jul 2026 05:24:55 +0900</pubDate>
    <generator>TISTORY</generator>
    <ttl>100</ttl>
    <managingEditor>코딩햄..</managingEditor>
    <image>
      <title>코딩햄 Study Stack</title>
      <url>https://tistory1.daumcdn.net/tistory/3124159/attach/440f5d3bb70f47c29734f3274066d607</url>
      <link>https://hyem-study.tistory.com</link>
    </image>
    <item>
      <title>[프로그래머스][PCCP 기출문제] 2번 - 퍼즐 게임 챌린지 (파이썬 풀이)</title>
      <link>https://hyem-study.tistory.com/148</link>
      <description>&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;4년만에 돌아왔습니다~.~&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;2025년에는 공부하고 발전하는 한 해가 되길 바라며&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;2025년 첫 알고리즘 문제 풀어보았어요&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #9d9d9d;&quot;&gt;확실히 오랜만에 푸는 알고리즘 문제라서&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #9d9d9d;&quot;&gt;문제 이해하는거만 한참 걸렸네요 ^_ㅠ..&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #9d9d9d;&quot;&gt;꾸준히 하면 조금 덜 바보가 되겠죠..?&lt;/span&gt;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;퍼즐 게임 챌린지&amp;nbsp;&lt;/b&gt;문제입니다.&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;난이도: Lv2&lt;/li&gt;
&lt;li&gt;풀이 언어: Python&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;문제 설명:&lt;/b&gt;&lt;/p&gt;
&lt;div data-ke-type=&quot;moreLess&quot; data-text-more=&quot;더보기&quot; data-text-less=&quot;닫기&quot;&gt;&lt;a class=&quot;btn-toggle-moreless&quot;&gt;더보기&lt;/a&gt;
&lt;div class=&quot;moreless-content&quot;&gt;&lt;a class=&quot;btn-toggle-moreless&quot;&gt;더보기&lt;/a&gt;
&lt;div class=&quot;moreless-content&quot;&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;당신은 순서대로&amp;nbsp;n개의 퍼즐을 제한 시간 내에 풀어야 하는 퍼즐 게임을 하고 있습니다. 각 퍼즐은 난이도와 소요 시간이 정해져 있습니다. 당신의 숙련도에 따라 퍼즐을 풀 때 틀리는 횟수가 바뀌게 됩니다. 현재 &lt;b&gt;퍼즐의 난이도를&amp;nbsp;diff, 현재 퍼즐의 소요 시간을&amp;nbsp;time_cur, 이전 퍼즐의 소요 시간을&amp;nbsp;time_prev, 당신의 숙련도를&amp;nbsp;level&lt;/b&gt;이라 하면, 게임은 다음과 같이 진행됩니다.&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;diff&amp;nbsp;&amp;le;&amp;nbsp;level이면 퍼즐을 틀리지 않고&amp;nbsp;time_cur만큼의 시간을 사용하여 해결합니다.&lt;/li&gt;
&lt;li&gt;diff&amp;nbsp;&amp;gt;&amp;nbsp;level이면, 퍼즐을 총&amp;nbsp;diff&amp;nbsp;-&amp;nbsp;level번 틀립니다. 퍼즐을 틀릴 때마다,&amp;nbsp;time_cur만큼의 시간을 사용하며, 추가로&amp;nbsp;time_prev만큼의 시간을 사용해 이전 퍼즐을 다시 풀고 와야 합니다.&amp;nbsp;&lt;b&gt;이전 퍼즐을 다시 풀 때는 이전 퍼즐의 난이도에 상관없이 틀리지 않습니다.&lt;/b&gt;&amp;nbsp;diff&amp;nbsp;-&amp;nbsp;level번 틀린 이후에 다시 퍼즐을 풀면&amp;nbsp;time_cur만큼의 시간을 사용하여 퍼즐을 해결합니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;예를 들어&amp;nbsp;diff&amp;nbsp;= 3,&amp;nbsp;time_cur&amp;nbsp;= 2,&amp;nbsp;time_prev&amp;nbsp;= 4인 경우,&amp;nbsp;level에 따라 퍼즐을 푸는데 걸리는 시간은 다음과 같습니다.&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;level&amp;nbsp;= 1이면, 퍼즐을 3 - 1 = 2번 틀립니다. 한 번 틀릴 때마다 2 + 4 = 6의 시간을 사용하고, 다시 퍼즐을 푸는 데 2의 시간을 사용하므로 총 6 &amp;times; 2 + 2 = 14의 시간을 사용하게 됩니다.&lt;/li&gt;
&lt;li&gt;level&amp;nbsp;= 2이면, 퍼즐을 3 - 2 = 1번 틀리므로, 6 + 2 = 8의 시간을 사용하게 됩니다.&lt;/li&gt;
&lt;li&gt;level&amp;nbsp;&amp;ge; 3이면 퍼즐을 틀리지 않으며, 2의 시간을 사용하게 됩니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;퍼즐 게임에는 전체 제한 시간&amp;nbsp;limit가 정해져 있습니다. 제한 시간 내에 퍼즐을 모두 해결하기 위한 숙련도의 최솟값을 구하려고 합니다.&amp;nbsp;&lt;b&gt;난이도, 소요 시간은 모두 양의 정수며, 숙련도도 양의 정수여야 합니다.&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;퍼즐의&lt;span&gt; &lt;/span&gt;난이도를&lt;span&gt; &lt;/span&gt;순서대로&lt;span&gt; &lt;/span&gt;담은&lt;span&gt; 1&lt;/span&gt;차원&lt;span&gt; &lt;/span&gt;정수&lt;span&gt; &lt;/span&gt;배열&lt;span&gt;&amp;nbsp;diffs, &lt;/span&gt;퍼즐의&lt;span&gt; &lt;/span&gt;소요&lt;span&gt; &lt;/span&gt;시간을&lt;span&gt; &lt;/span&gt;순서대로&lt;span&gt; &lt;/span&gt;담은&lt;span&gt; 1&lt;/span&gt;차원&lt;span&gt; &lt;/span&gt;정수&lt;span&gt; &lt;/span&gt;배열&lt;span&gt;&amp;nbsp;times, &lt;/span&gt;전체&lt;span&gt; &lt;/span&gt;제한&lt;span&gt; &lt;/span&gt;시간&lt;span&gt;&amp;nbsp;limit&lt;/span&gt;이&lt;span&gt; &lt;/span&gt;매개변수로&lt;span&gt; &lt;/span&gt;주어집니다&lt;span&gt;. &lt;/span&gt;제한&lt;span&gt; &lt;/span&gt;시간&lt;span&gt; &lt;/span&gt;내에&lt;span&gt; &lt;/span&gt;퍼즐을&lt;span&gt; &lt;/span&gt;모두&lt;span&gt; &lt;/span&gt;해결하기&lt;span&gt; &lt;/span&gt;위한&lt;span&gt; &lt;/span&gt;숙련도의&lt;span&gt; &lt;/span&gt;최솟값을&lt;span&gt; &lt;/span&gt;정수로&lt;span&gt; return &lt;/span&gt;하도록&lt;span&gt; solution &lt;/span&gt;함수를&lt;span&gt; &lt;/span&gt;완성해&lt;span&gt; &lt;/span&gt;주세요&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;요약하자면,&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;현재 퍼즐의 난이도(diff)가 내 숙련도(level)보다 작거나 같으면 현재 퍼즐의 소요시간(time_cur) 만큼의 시간 사용
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;b&gt;diff &amp;lt;= level: time_cur 사용&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;현재 퍼즐의 난이도(diff)가 내 숙련도(level)보다 크면 퍼즐을 '퍼즐 난이도 - 숙련도' 만큼 틀림
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;diff &amp;gt; level: diff-level 만큼&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;틀릴 때 마다 현재 퍼즐의 소요시간(time_cur)만큼의 시간을 사용,&lt;br /&gt;이전 퍼즐 소요시간(time_prev)만큼의 시간을 써서 이전 퍼즐도 풀어야 함!!&amp;nbsp;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;b&gt;틀릴 때 마다 (time_cur + time_prev) * (diff - level) 의 시간을 사용&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;b&gt;diff-level 만큼 틀리고 나면 현재 퍼즐 소요시간(time_cur)만큼의 시간을 써서 퍼즐 최종 해결&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;color: #006dd7;&quot;&gt;&lt;b&gt;구해야하는 결과: &lt;b&gt;전체 제한 시간 limit 내에 퍼즐을 모두 해결하기 위한 숙련도 level 의 최솟값&lt;/b&gt;&lt;/b&gt;&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;주어지는 변수&lt;/b&gt;&lt;/span&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;diffs: 퍼즐의 난이도를 순서대로 담은 1차원 정수 배열&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;times: 퍼즐의 소요 시간을 순서대로 담은 1차원 정수 배열&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;limit: 전체 제한 시간&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;내 풀이:&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;주어진 diffs (문제 난이도) 값 중 최대값 이하일 것이란거는 예측 가능합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;최대 diff 보다 숙련도가 높으면 모든 문제를 다 한번에 풀 수 있기 때문이죠&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;결론, 최대 diff 보다는 작지만 제한 시간 내에 문제를 풀 수 있는 최소 값을 찾아야 합니다!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그치만 1부터 max(diffs) 값 까지 모든 값을 순회하며 값을 찾을 수는 없습니다...성능이슈~&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;성능적 문제 해결을 위해 범위를 최대한 줄여가며 반복 탐색하게 해주는게 해결안입니다&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;-&amp;gt; 이진탐색 트리를 사용하기로 결정!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #9d9d9d;&quot;&gt;&lt;s&gt;물론 저는 이진탐색트리를 바로 떠올리진 못했어요,. 키득..&lt;/s&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #9d9d9d;&quot;&gt;&lt;s&gt;반복문 다 돌리는거 오반데..싶어서 긴 고민을 해내서 생각했습니다..&lt;/s&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;일단 숙련도(level)에 따라 퍼즐 해결에 걸리는 전체 시간을 계산하는 로직을 먼저 만들었습니다&lt;/p&gt;
&lt;pre id=&quot;code_1736302789106&quot; class=&quot;python&quot; data-ke-language=&quot;python&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;for i in range(1, len(diffs)):
    retry = max(0, diffs[i] - curLevel)
    solvedTime += (times[i] + times[i-1]) * retry + times[i]&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;현재 문제 난이도가 내 숙련도보다 큰 경우, 양수 값이 발생할 것이기 때문에&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;retry(문제 재풀이 횟수)를 구하는 것에 max 함수를 활용했습니다&lt;/p&gt;
&lt;pre id=&quot;code_1736300599359&quot; class=&quot;python&quot; data-ke-language=&quot;python&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;def solution(diffs, times, limit):
    level = 1 # 숙련도
    maxLevel = max(diffs) # 최대 난이도
    answer = maxLevel
    
    # 이진탐색 활용
    while level &amp;lt;= maxLevel:
        curLevel = (level + maxLevel) // 2
        solvedTime = times[0] # diffs[0]은 항상 1이므로 첫 문제는 바로 해결 된다고 봄
        
        for i in range(1, len(diffs)):
            retry = max(0, diffs[i] - curLevel)
            solvedTime += (times[i] + times[i-1]) * retry + times[i]
        
        if solvedTime &amp;lt;= limit:
            answer = curLevel
            maxLevel = curLevel - 1 # while문이 정상적인 타이밍에 종료되도록 값 갱신
        else:
            level = curLevel + 1
    return answer&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;막상 다 풀고보니 간단했던 문제였습니다.. 풀고나니 잼있네용.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;오늘의 알고리즘 풀이 끝~&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;문제 링크:&lt;/b&gt; &lt;a href=&quot;https://school.programmers.co.kr/learn/courses/30/lessons/340212&quot; target=&quot;_blank&quot; rel=&quot;noopener&amp;nbsp;noreferrer&quot;&gt;https://school.programmers.co.kr/learn/courses/30/lessons/340212&lt;/a&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1736300698192&quot; contenteditable=&quot;false&quot; data-ke-type=&quot;opengraph&quot; data-ke-align=&quot;alignCenter&quot; data-og-type=&quot;website&quot; data-og-title=&quot;프로그래머스&quot; data-og-description=&quot;SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프&quot; data-og-host=&quot;programmers.co.kr&quot; data-og-source-url=&quot;https://school.programmers.co.kr/learn/courses/30/lessons/340212&quot; data-og-url=&quot;https://programmers.co.kr/&quot; data-og-image=&quot;https://scrap.kakaocdn.net/dn/jOa3P/hyXWx0f6Ys/7bXFYIKJOJZY5ubCINyuN1/img.png?width=1920&amp;amp;height=960&amp;amp;face=0_0_1920_960,https://scrap.kakaocdn.net/dn/ndgF1/hyXWtjdYtF/0fWT9nXKXpOVTEIZxHd5Ak/img.png?width=1920&amp;amp;height=960&amp;amp;face=0_0_1920_960&quot;&gt;&lt;a href=&quot;https://school.programmers.co.kr/learn/courses/30/lessons/340212&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://school.programmers.co.kr/learn/courses/30/lessons/340212&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url('https://scrap.kakaocdn.net/dn/jOa3P/hyXWx0f6Ys/7bXFYIKJOJZY5ubCINyuN1/img.png?width=1920&amp;amp;height=960&amp;amp;face=0_0_1920_960,https://scrap.kakaocdn.net/dn/ndgF1/hyXWtjdYtF/0fWT9nXKXpOVTEIZxHd5Ak/img.png?width=1920&amp;amp;height=960&amp;amp;face=0_0_1920_960');&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot; data-ke-size=&quot;size16&quot;&gt;프로그래머스&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;programmers.co.kr&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>알고리즘/문제풀이</category>
      <category>pccp기출2번풀이</category>
      <category>알고리즘</category>
      <category>알고리즘문제풀이</category>
      <category>이진탐색트리문제</category>
      <category>코딩테스트</category>
      <category>코테</category>
      <category>파이썬문제풀이</category>
      <category>프로그래머스</category>
      <category>프로그래머스pccp기출</category>
      <author>코딩햄..</author>
      <guid isPermaLink="true">https://hyem-study.tistory.com/148</guid>
      <comments>https://hyem-study.tistory.com/148#entry148comment</comments>
      <pubDate>Wed, 8 Jan 2025 12:37:55 +0900</pubDate>
    </item>
    <item>
      <title>[MySQL] Error Code: 2006 - MySQL server has gone away</title>
      <link>https://hyem-study.tistory.com/147</link>
      <description>&lt;p&gt;공식문서: &lt;a href=&quot;https://dev.mysql.com/doc/refman/8.0/en/gone-away.html&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;dev.mysql.com/doc/refman/8.0/en/gone-away.html&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;b&gt;Error Code: 2006 - MySQL server has gone away&lt;/b&gt;가 발생했는데, 메뉴얼을 확인해봤다.&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;상황은 server has gone away 말그대로 서버와의 연결이 끊긴 상황&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;원인으로 2가지를 꼽을 수 있다.&lt;/p&gt;
&lt;p&gt;1. 서버 연결 자체의 문제 (실행중이던 스레드가 죽은 경우, 서버와의 연결이 끊긴채로 쿼리 실행 ... )&lt;/p&gt;
&lt;p&gt;2. 너무 큰 쿼리 실행으로 인해 DB에서 의도적으로 연결을 끊은 경우&lt;/p&gt;
&lt;p&gt;(관련 문서: &lt;a href=&quot;https://dev.mysql.com/doc/refman/8.0/en/packet-too-large.html&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;dev.mysql.com/doc/refman/8.0/en/packet-too-large.html&lt;/a&gt;)&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;2번의 경우 서버의 max_allowed_packet을 재설정하면 해결 가능하다.&lt;/p&gt;
&lt;p&gt;쿼리 제한을 증가시켜주는 것이다.&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;color: #333333;&quot;&gt;mysql 서버에 최대로 송신 가능한 패킷 용량은 1gb이다. &lt;/span&gt;(여기서 패킷은 mysql 서버에 송신되는 sql문을 말한다.)&lt;/p&gt;</description>
      <category>DB/MySQL</category>
      <author>코딩햄..</author>
      <guid isPermaLink="true">https://hyem-study.tistory.com/147</guid>
      <comments>https://hyem-study.tistory.com/147#entry147comment</comments>
      <pubDate>Thu, 1 Apr 2021 09:10:37 +0900</pubDate>
    </item>
    <item>
      <title>[프로그래머스] 수식 최대화</title>
      <link>https://hyem-study.tistory.com/146</link>
      <description>&lt;p style=&quot;text-align: center;&quot;&gt;Lv2 문제 중 카카오 기출 문제를 좀 풀어볼까 싶어서 간만에 풀었습니다.ㅎ&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;문제가 길어서 읽는게 귀찮지만..&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;막상 잘 이해하고 나면 어렵지 않은 문제입니당..&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p style=&quot;text-align: justify;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;문제 설명&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;IT 벤처 회사를 운영하고 있는&lt;span&gt;&amp;nbsp;&lt;/span&gt;라이언은 매년 사내 해커톤 대회를 개최하여 우승자에게 상금을 지급하고 있습니다.&lt;br /&gt;이번 대회에서는 우승자에게 지급되는 상금을 이전 대회와는 다르게 다음과 같은 방식으로 결정하려고 합니다.&lt;br /&gt;해커톤 대회에 참가하는 모든 참가자들에게는 숫자들과 3가지의 연산문자(+, -, *) 만으로 이루어진 연산 수식이 전달되며, 참가자의 미션은 전달받은 수식에 포함된 연산자의 우선순위를 자유롭게 재정의하여 만들 수 있는 가장 큰 숫자를 제출하는 것입니다.&lt;br /&gt;단, 연산자의 우선순위를 새로 정의할 때, 같은 순위의 연산자는 없어야 합니다. 즉,&lt;span&gt;&amp;nbsp;&lt;/span&gt;+&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;-&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;*&lt;span&gt;&amp;nbsp;&lt;/span&gt;또는&lt;span&gt;&amp;nbsp;&lt;/span&gt;-&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;*&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;+&lt;span&gt;&amp;nbsp;&lt;/span&gt;등과 같이 연산자 우선순위를 정의할 수 있으나&lt;span&gt;&amp;nbsp;&lt;/span&gt;+,*&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;-&lt;span&gt;&amp;nbsp;&lt;/span&gt;또는&lt;span&gt;&amp;nbsp;&lt;/span&gt;*&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;+,-처럼 2개 이상의 연산자가 동일한 순위를 가지도록 연산자 우선순위를 정의할 수는 없습니다. 수식에 포함된 연산자가 2개라면 정의할 수 있는 연산자 우선순위 조합은 2! = 2가지이며, 연산자가 3개라면 3! = 6가지 조합이 가능합니다.&lt;br /&gt;만약 계산된 결과가 음수라면 해당 숫자의 절댓값으로 변환하여 제출하며 제출한 숫자가 가장 큰 참가자를 우승자로 선정하며, 우승자가 제출한 숫자를 우승상금으로 지급하게 됩니다.&lt;/p&gt;
&lt;p&gt;예를 들어, 참가자 중&lt;span&gt;&amp;nbsp;&lt;/span&gt;네오가 아래와 같은 수식을 전달받았다고 가정합니다.&lt;/p&gt;
&lt;p&gt;&quot;100-200*300-500+20&quot;&lt;/p&gt;
&lt;p&gt;일반적으로 수학 및 전산학에서 약속된 연산자 우선순위에 따르면 더하기와 빼기는 서로 동등하며 곱하기는 더하기, 빼기에 비해 우선순위가 높아&lt;span&gt;&amp;nbsp;&lt;/span&gt;*&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;+,-&lt;span&gt;&amp;nbsp;&lt;/span&gt;로 우선순위가 정의되어 있습니다.&lt;br /&gt;대회 규칙에 따라&lt;span&gt;&amp;nbsp;&lt;/span&gt;+&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;-&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;*&lt;span&gt;&amp;nbsp;&lt;/span&gt;또는&lt;span&gt;&amp;nbsp;&lt;/span&gt;-&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;*&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;+&lt;span&gt;&amp;nbsp;&lt;/span&gt;등과 같이 연산자 우선순위를 정의할 수 있으나&lt;span&gt;&amp;nbsp;&lt;/span&gt;+,*&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;-&lt;span&gt;&amp;nbsp;&lt;/span&gt;또는&lt;span&gt;&amp;nbsp;&lt;/span&gt;*&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;+,-&lt;span&gt;&amp;nbsp;&lt;/span&gt;처럼 2개 이상의 연산자가 동일한 순위를 가지도록 연산자 우선순위를 정의할 수는 없습니다.&lt;br /&gt;수식에 연산자가 3개 주어졌으므로 가능한 연산자 우선순위 조합은 3! = 6가지이며, 그 중&lt;span&gt;&amp;nbsp;&lt;/span&gt;+&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;-&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;*&lt;span&gt;&amp;nbsp;&lt;/span&gt;로 연산자 우선순위를 정한다면 결괏값은 22,000원이 됩니다.&lt;br /&gt;반면에&lt;span&gt;&amp;nbsp;&lt;/span&gt;*&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;+&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;-&lt;span&gt;&amp;nbsp;&lt;/span&gt;로 연산자 우선순위를 정한다면 수식의 결괏값은 -60,420 이지만, 규칙에 따라 우승 시 상금은 절댓값인 60,420원이 됩니다.&lt;/p&gt;
&lt;p&gt;참가자에게 주어진 연산 수식이 담긴 문자열 expression이 매개변수로 주어질 때, 우승 시 받을 수 있는 가장 큰 상금 금액을 return 하도록 solution 함수를 완성해주세요.&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;b&gt;[제한사항]&lt;/b&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;expression은 길이가 3 이상 100 이하인 문자열입니다.&lt;/li&gt;
&lt;li&gt;expression은 공백문자, 괄호문자 없이 오로지 숫자와 3가지의 연산자(+, -, *) 만으로 이루어진 올바른 중위표기법(연산의 두 대상 사이에 연산기호를 사용하는 방식)으로 표현된 연산식입니다. 잘못된 연산식은 입력으로 주어지지 않습니다.
&lt;ul&gt;
&lt;li&gt;즉,&lt;span&gt;&amp;nbsp;&lt;/span&gt;&quot;402+-561*&quot;처럼 잘못된 수식은 올바른 중위표기법이 아니므로 주어지지 않습니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;expression의 피연산자(operand)는 0 이상 999 이하의 숫자입니다.
&lt;ul&gt;
&lt;li&gt;즉,&lt;span&gt;&amp;nbsp;&lt;/span&gt;&quot;100-2145*458+12&quot;처럼 999를 초과하는 피연산자가 포함된 수식은 입력으로 주어지지 않습니다.&lt;/li&gt;
&lt;li&gt;&quot;-56+100&quot;처럼 피연산자가 음수인 수식도 입력으로 주어지지 않습니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;expression은 적어도 1개 이상의 연산자를 포함하고 있습니다.&lt;/li&gt;
&lt;li&gt;연산자 우선순위를 어떻게 적용하더라도, expression의 중간 계산값과 최종 결괏값은 절댓값이 263&lt;span&gt;&amp;nbsp;&lt;/span&gt;- 1 이하가 되도록 입력이 주어집니다.&lt;/li&gt;
&lt;li&gt;같은 연산자끼리는 앞에 있는 것의 우선순위가 더 높습니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr style=&quot;box-sizing: content-box; height: 0px; overflow: visible; margin: 1.5rem 0px; border-width: 0.0625rem 0px 0px; border-color: #172334; border-image: initial; border-style: solid initial initial initial;&quot; /&gt;
&lt;p&gt;&lt;b&gt;입출력 예&lt;/b&gt;&lt;/p&gt;
&lt;table style=&quot;border-collapse: collapse; width: 100%;&quot; border=&quot;1&quot;&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style=&quot;text-align: center;&quot;&gt;&lt;b&gt;&lt;span style=&quot;color: #333333;&quot;&gt;expression&lt;/span&gt;&lt;/b&gt;&lt;/td&gt;
&lt;td style=&quot;text-align: center;&quot;&gt;&lt;b&gt;result&lt;/b&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&quot;100-200*300-500+20&quot;&lt;/td&gt;
&lt;td&gt;60420&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&quot;50*6-3*2&quot;&lt;/td&gt;
&lt;td&gt;300&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;&lt;b&gt;입출력 예에 대한 설명&lt;/b&gt;&lt;/p&gt;
&lt;div data-ke-type=&quot;moreLess&quot; data-text-more=&quot;더보기&quot; data-text-less=&quot;닫기&quot;&gt;&lt;a class=&quot;btn-toggle-moreless&quot;&gt;더보기&lt;/a&gt;
&lt;div class=&quot;moreless-content&quot;&gt;
&lt;p&gt;&lt;b&gt;입출력 예 #1&lt;/b&gt;&lt;br /&gt;*&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;+&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;-&lt;span&gt;&amp;nbsp;&lt;/span&gt;로 연산자 우선순위를 정했을 때, 가장 큰 절댓값을 얻을 수 있습니다.&lt;br /&gt;연산 순서는 아래와 같습니다.&lt;br /&gt;100-200*300-500+20&lt;br /&gt;=&lt;span&gt;&amp;nbsp;&lt;/span&gt;100-(200*300)-500+20&lt;br /&gt;=&lt;span&gt;&amp;nbsp;&lt;/span&gt;100-60000-(500+20)&lt;br /&gt;=&lt;span&gt;&amp;nbsp;&lt;/span&gt;(100-60000)-520&lt;br /&gt;=&lt;span&gt;&amp;nbsp;&lt;/span&gt;(-59900-520)&lt;br /&gt;=&lt;span&gt;&amp;nbsp;&lt;/span&gt;-60420&lt;br /&gt;따라서, 우승 시 받을 수 있는 상금은 |-60420| = 60420 입니다.&lt;/p&gt;
&lt;p&gt;&lt;b&gt;입출력 예 #2&lt;/b&gt;&lt;br /&gt;-&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;*&lt;span&gt;&amp;nbsp;&lt;/span&gt;로 연산자 우선순위를 정했을 때, 가장 큰 절댓값을 얻을 수 있습니다.&lt;br /&gt;연산 순서는 아래와 같습니다.(expression에서&lt;span&gt;&amp;nbsp;&lt;/span&gt;+&lt;span&gt;&amp;nbsp;&lt;/span&gt;연산자는 나타나지 않았으므로, 고려할 필요가 없습니다.)&lt;br /&gt;50*6-3*2&lt;br /&gt;=&lt;span&gt;&amp;nbsp;&lt;/span&gt;50*(6-3)*2&lt;br /&gt;=&lt;span&gt;&amp;nbsp;&lt;/span&gt;(50*3)*2&lt;br /&gt;=&lt;span&gt;&amp;nbsp;&lt;/span&gt;150*2&lt;br /&gt;=&lt;span&gt;&amp;nbsp;&lt;/span&gt;300&lt;br /&gt;따라서, 우승 시 받을 수 있는 상금은 300 입니다.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;&amp;lt; 내 풀이&amp;nbsp; &amp;gt;&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;1. 입력된 연산들에 대한 우선순위를 정해줘야 함 -&amp;gt; 모든 경우의 수 생성&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;2. 각 우선 순위에 따른 연산결과 값들을 저장&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;3. 가장 큰 값이 정답&lt;/p&gt;
&lt;pre id=&quot;code_1606557000531&quot; class=&quot;python&quot; data-ke-language=&quot;python&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;import re

# 우선 순위 생성
def makePriority(idx, uniqueOp, priority, visited, tmp):
    # 마지막까지 왔다면 수식 추가
    if idx == len(uniqueOp):
        priority.append(tmp[:])
        return
    # 반복문을 돌면서 추가
    for i in range(len(uniqueOp)):
        if visited[i] == 0:
            visited[i] = 1
            tmp.append(uniqueOp[i])
            makePriority(idx+1, uniqueOp, priority, visited, tmp)
            tmp.pop()
            visited[i] = 0

def solution(expression):
    # 연산
    operator = re.findall('r\d+|[+/*-]', expression)
    uniqueOp = list(set(operator))
    visited = [0]*len(uniqueOp)
    priority = []
    # 연산 우선순위 리스트
    makePriority(0, uniqueOp, priority, visited, [])
    # 전체 식
    ex = re.split(r'(\D)',expression)
    # 정답
    tmpResult = []
    for priOp in priority:
        tmpEx = ex[:]
        for op in priOp:
            while op in tmpEx:
                tmpIdx = tmpEx.index(op)
                tmpEx[tmpIdx-1] = str(eval(tmpEx[tmpIdx-1]+tmpEx[tmpIdx]+tmpEx[tmpIdx+1]))
                tmpEx = tmpEx[:tmpIdx]+tmpEx[tmpIdx+2:]
        tmpResult.append(abs(int(tmpEx[-1])))
    return max(tmpResult)&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;문제 출처: &lt;a href=&quot;https://programmers.co.kr/learn/courses/30/lessons/67257&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;programmers.co.kr/learn/courses/30/lessons/67257&lt;/a&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1606557015165&quot; contenteditable=&quot;false&quot; data-ke-type=&quot;opengraph&quot; data-og-type=&quot;website&quot; data-og-title=&quot;코딩테스트 연습 - 수식 최대화&quot; data-og-description=&quot;IT 벤처 회사를 운영하고 있는 라이언은 매년 사내 해커톤 대회를 개최하여 우승자에게 상금을 지급하고 있습니다. 이번 대회에서는 우승자에게 지급되는 상금을 이전 대회와는 다르게 다음과 &quot; data-og-host=&quot;programmers.co.kr&quot; data-og-source-url=&quot;https://programmers.co.kr/learn/courses/30/lessons/67257&quot; data-og-url=&quot;https://programmers.co.kr/learn/courses/30/lessons/67257&quot; data-og-image=&quot;https://scrap.kakaocdn.net/dn/31xEO/hyInl2b1V0/3o3j9cuJeaysSmkQwc19p0/img.jpg?width=626&amp;amp;height=626&amp;amp;face=0_0_626_626,https://scrap.kakaocdn.net/dn/b8nyjt/hyIoOhnAxB/VjaKCuCKUOScHM6gWTkW10/img.jpg?width=626&amp;amp;height=626&amp;amp;face=0_0_626_626&quot;&gt;&lt;a href=&quot;https://programmers.co.kr/learn/courses/30/lessons/67257&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://programmers.co.kr/learn/courses/30/lessons/67257&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url('https://scrap.kakaocdn.net/dn/31xEO/hyInl2b1V0/3o3j9cuJeaysSmkQwc19p0/img.jpg?width=626&amp;amp;height=626&amp;amp;face=0_0_626_626,https://scrap.kakaocdn.net/dn/b8nyjt/hyIoOhnAxB/VjaKCuCKUOScHM6gWTkW10/img.jpg?width=626&amp;amp;height=626&amp;amp;face=0_0_626_626');&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot;&gt;코딩테스트 연습 - 수식 최대화&lt;/p&gt;
&lt;p class=&quot;og-desc&quot;&gt;IT 벤처 회사를 운영하고 있는 라이언은 매년 사내 해커톤 대회를 개최하여 우승자에게 상금을 지급하고 있습니다. 이번 대회에서는 우승자에게 지급되는 상금을 이전 대회와는 다르게 다음과&lt;/p&gt;
&lt;p class=&quot;og-host&quot;&gt;programmers.co.kr&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>알고리즘/문제풀이</category>
      <category>알고리즘</category>
      <category>파이썬</category>
      <author>코딩햄..</author>
      <guid isPermaLink="true">https://hyem-study.tistory.com/146</guid>
      <comments>https://hyem-study.tistory.com/146#entry146comment</comments>
      <pubDate>Sat, 28 Nov 2020 18:51:27 +0900</pubDate>
    </item>
    <item>
      <title>[Vue.js] Vuex 상태 관리 패턴</title>
      <link>https://hyem-study.tistory.com/145</link>
      <description>&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;입사 후 첫 업무로 Vue를 활용한 프로젝트에 투입되었는데&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;이미 짜여져있는 상태 저장소들의 구조와 흐름을 이해하기 위해&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;개인적인 학습을 진행하며 정리한 내용입니당.&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;h3 id=&quot;id-[Vue.js]Vuex상태관리패턴-01.Vuex란?&quot; data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;01. Vuex란?&lt;/b&gt;&lt;/h3&gt;
&lt;p&gt;Vue.js 애플리케이션에 대한&amp;nbsp;&lt;b&gt;상태 관리 패턴 + 라이브러리&lt;/b&gt;로&lt;/p&gt;
&lt;p&gt;애플리케이션의&amp;nbsp;&lt;b&gt;모든 컴포넌트에 대한 중앙 집중식 저장소&lt;/b&gt;&amp;nbsp;역할을 하며&amp;nbsp;&lt;b&gt;예측 가능한 방식으로 상태를 변경&lt;/b&gt;&amp;nbsp;가능하다.&lt;/p&gt;
&lt;p&gt;&lt;b&gt;상태 관리 패턴&lt;/b&gt;을 통해&amp;nbsp;&lt;b&gt;단방향 데이터 흐름&lt;/b&gt;의 문제점을 해결 가능하다.&lt;/p&gt;
&lt;h4 id=&quot;id-[Vue.js]Vuex상태관리패턴-01-1.단방향데이터흐름&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;01-1. 단방향 데이터 흐름&lt;/b&gt;&lt;/h4&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-filename=&quot;flow.png&quot; data-origin-width=&quot;1280&quot; data-origin-height=&quot;866&quot; width=&quot;513&quot; height=&quot;NaN&quot; data-ke-mobilestyle=&quot;widthContent&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/yaavo/btqLscaRWIa/KvvHR7wlDiDvPkk47C2oCK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/yaavo/btqLscaRWIa/KvvHR7wlDiDvPkk47C2oCK/img.png&quot; data-alt=&quot;flow&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/yaavo/btqLscaRWIa/KvvHR7wlDiDvPkk47C2oCK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fyaavo%2FbtqLscaRWIa%2FKvvHR7wlDiDvPkk47C2oCK%2Fimg.png&quot; data-filename=&quot;flow.png&quot; data-origin-width=&quot;1280&quot; data-origin-height=&quot;866&quot; width=&quot;513&quot; height=&quot;NaN&quot; data-ke-mobilestyle=&quot;widthContent&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;flow&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p&gt;단방향 데이터 흐름에는&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;b&gt;상태, 뷰, 액션&lt;/b&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;세가지 개념이 존재한다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;상태&lt;/b&gt;는 앱을 작동하는 원본 소스&lt;/li&gt;
&lt;li&gt;&lt;b&gt;뷰&lt;/b&gt;는 상태의 선언적 매핑&lt;/li&gt;
&lt;li&gt;&lt;b&gt;액션&lt;/b&gt;은 뷰에서 사용자 입력에 대해&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;b&gt;반응적으로 상태를 바꾸는 방법&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;이러한 데이터의 흐름은&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;b&gt;공통의 상태를 공유하는 컴포넌트가 많아지는 경우에 문제&lt;/b&gt;를 야기한다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;여러 뷰가 같은 상태에 의존&lt;/b&gt;
&lt;ul&gt;
&lt;li&gt;지나치게 중첩된 컴포넌트를 통과하는 prop이 장황해 짐&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;서로 다른 뷰의 작업은 동일한 상태를 반영&lt;/b&gt;
&lt;ul&gt;
&lt;li&gt;직접 부모/자식 인스턴스를 참조하거나 이벤트를 통해 상태의 여러 복사본을 변경 및 동기화 해야함&lt;br /&gt;프로젝트 규모가 커질 수록 복잡해짐&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;결론적으로&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;b&gt;점점 유지보수가 불가능한 코드&lt;/b&gt;가 될 수 있다.&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;01-2. Vuex 흐름&lt;/b&gt;&lt;/h4&gt;
&lt;p&gt;Vuex는 단반향 데이터 흐름이 갖는 문제점을 해결하는 방안을 제공한다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-filename=&quot;vuex.png&quot; data-origin-width=&quot;701&quot; data-origin-height=&quot;551&quot; data-ke-mobilestyle=&quot;widthContent&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/JoMdm/btqLwLiQzeo/kWkE8FmwQBqueElFrdUuhk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/JoMdm/btqLwLiQzeo/kWkE8FmwQBqueElFrdUuhk/img.png&quot; data-alt=&quot;vuex flow&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/JoMdm/btqLwLiQzeo/kWkE8FmwQBqueElFrdUuhk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJoMdm%2FbtqLwLiQzeo%2FkWkE8FmwQBqueElFrdUuhk%2Fimg.png&quot; data-filename=&quot;vuex.png&quot; data-origin-width=&quot;701&quot; data-origin-height=&quot;551&quot; data-ke-mobilestyle=&quot;widthContent&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;vuex flow&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p&gt;&lt;b&gt;컴포넌트에서 공유된 상태를 추출하고 전역 싱글톤 패턴으로 관리&lt;/b&gt;한다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;컴포넌트 트리는 커다란 뷰가 됨&lt;/li&gt;
&lt;li&gt;모든 컴포넌트는 트리에 상관없이 상태 접근, 동작 트리거&lt;/li&gt;
&lt;li&gt;상태 관리 및 특정 규칙 적용과 관련된 개념을 정의, 분리&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;결론적으로&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;b&gt;코드의 구조와 유지 관리 기능을 향상&lt;/b&gt;시킨다.&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;02. 기본 개념&lt;/b&gt;&lt;/h3&gt;
&lt;p&gt;Vuex는 중심이 되는 Store와 핵심 구성인 State, Mutations, Actions, Getters로 이루어져 있다.&lt;/p&gt;
&lt;p&gt;각각 기본적인 개념을 이해하기 위해 정리한 내용은 아래와 같다.&lt;/p&gt;
&lt;p&gt;(모듈 구조 파일 작성을 기반으로 설명한다. 모듈형 구조에 대해서는 03 목차에서 설명)&lt;/p&gt;
&lt;h4 id=&quot;id-[Vue.js]Vuex상태관리패턴-02-1.Store(저장소)&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;02-1. Store (저장소)&lt;/b&gt;&lt;/h4&gt;
&lt;p&gt;Vuex 애플리케이션의 중심이다. 애플리케이션의 상태를 보유하고있는 컨테이너이다.&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;b&gt;&lt;span&gt;(1) Vuex&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;store와 일반 전역 개체의 차이점&lt;/b&gt;&lt;/p&gt;
&lt;table style=&quot;border-collapse: collapse; width: 59.2832%; height: 104px;&quot; border=&quot;1&quot;&gt;
&lt;tbody&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;width: 20.1452%; height: 20px; text-align: center;&quot;&gt;&lt;span style=&quot;color: #333333;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 38.9441%; height: 20px; text-align: center;&quot;&gt;&lt;span style=&quot;color: #333333;&quot;&gt;Vuex store&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 40.7944%; height: 20px; text-align: center;&quot;&gt;&lt;span style=&quot;color: #333333;&quot;&gt;전역 개체&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;width: 20.1452%; height: 20px; text-align: center;&quot;&gt;&lt;span style=&quot;color: #333333;&quot;&gt;반응형&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 38.9441%; height: 20px; text-align: center;&quot;&gt;O&lt;/td&gt;
&lt;td style=&quot;width: 40.7944%; height: 20px; text-align: center;&quot;&gt;X&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;width: 20.1452%; height: 20px; text-align: center;&quot;&gt;&lt;span style=&quot;color: #333333;&quot;&gt;변경 방식&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 38.9441%; height: 20px; text-align: center;&quot;&gt;커밋을 이용한 변이&lt;/td&gt;
&lt;td style=&quot;width: 40.7944%; height: 20px; text-align: center;&quot;&gt;직접&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;저장소의 상태를 직접 변경하지 않고 변이를 수행함으로서&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;b&gt;모든 상태에 대한 추적이 가능한 기록이 남게 된다.&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;코드를 읽을 때 상태 변화 이해에 도움이 된다.&lt;/p&gt;
&lt;p&gt;유의할 개념은 아래와 같다.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;컴포넌트 안에서 저장소 상태를 사용&lt;/b&gt;하는 것 = 단순히 계산된 속성 내에서&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;b&gt;상태를 반환&lt;/b&gt;하는 것&lt;/li&gt;
&lt;li&gt;&lt;b&gt;변경을 트리거&lt;/b&gt;하는 것 = 컴포넌트 메소드에서&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;b&gt;변경을 커밋&lt;/b&gt;하는 것&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 id=&quot;id-[Vue.js]Vuex상태관리패턴-02-2.State(상태)&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;02-2. State (상태)&lt;/b&gt;&lt;/h4&gt;
&lt;p&gt;프로젝트에서 공통으로 사용할 변수를 정의 하는 부분이다.&lt;/p&gt;
&lt;p&gt;&lt;b&gt;프로젝트 내의 모든 곳에서 참조 및 사용이 가능&lt;/b&gt;하다.&lt;/p&gt;
&lt;p&gt;각 컴포넌트에서 동일한 값을 사용 가능하게 해준다.&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;b&gt;ex) state.js&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1603329495092&quot; class=&quot;vue cpp&quot; data-ke-language=&quot;vue&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;export default {
    // 여러 컴포넌트에서 공통으로 사용될 변수가 정의 됨
    items : [],
    ...
}&lt;/code&gt;&lt;/pre&gt;
&lt;h4 id=&quot;id-[Vue.js]Vuex상태관리패턴-02-3.Getters&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;02-3. Getters&lt;/b&gt;&lt;/h4&gt;
&lt;p&gt;각 컴포넌트의 계싼된 속성(computed)의 공통 사용 정의이다.&lt;/p&gt;
&lt;p&gt;여러 컴포넌트에서 동일한 computed가 사용될 경우 Getters에 정의해 공통으로 쉽게 사용할 수 있다.&lt;/p&gt;
&lt;p&gt;&lt;b&gt;하위 모듈의 Getters를 불러오기 위해서&lt;/b&gt; this.$store.getters[&quot;경로명/함수명&quot;]; 을 사용해야 한다.&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;b&gt;ex) getters.js&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1603329730957&quot; class=&quot;vue routeros&quot; data-ke-language=&quot;vue&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;export default {
    items : (state) =&amp;gt; state.items,
    ...
}&lt;/code&gt;&lt;/pre&gt;
&lt;h4 id=&quot;id-[Vue.js]Vuex상태관리패턴-02-4.Mutation(변이)&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;02-4. Mutation (변이)&lt;/b&gt;&lt;/h4&gt;
&lt;p&gt;&lt;b&gt;state를 변경&lt;/b&gt;시키는 역할을 한다. (mutation을 통해서 state변경을 해야만 함)&lt;/p&gt;
&lt;p&gt;&lt;b&gt;동기 방식으로 상태 변경을 처리한다.&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;commit('함수명', '전달인자') 으로 실행시킨다.&lt;/p&gt;
&lt;p&gt;mutations 내에 함수 형태로 작성한다.&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;b&gt;ex) mutations.js&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1603329771548&quot; class=&quot;vue pf&quot; data-ke-language=&quot;vue&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;export default {
    // 함수 형태로 작성
    SET_ITEMS (state, data) {
        state.items = {};
        state.items = data;
    },
    ...
}


// 실행 시 아래와 같이 commit
commit('SET_ITEMS', data.list)&lt;/code&gt;&lt;/pre&gt;
&lt;h4 id=&quot;id-[Vue.js]Vuex상태관리패턴-02-5.Action(액션)&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;02-5. Action (액션)&lt;/b&gt;&lt;/h4&gt;
&lt;p&gt;&lt;b&gt;Mutations을 실행&lt;/b&gt;시키는 역할을 한다. (mutation이 실행되면 state도 변경되게 됨)&lt;/p&gt;
&lt;p&gt;&lt;b&gt;비동기 방식으로 처리&lt;/b&gt;한다.&lt;/p&gt;
&lt;p&gt;dispatch('함수명', '전달인자') 으로 실행시킨다.&lt;/p&gt;
&lt;p&gt;actions 내에 함수 형태로 작성한다.&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;b&gt;ex) actions.js&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1603330114424&quot; class=&quot;vue kotlin&quot; data-ke-language=&quot;vue&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;export default {
    // 함수 형태로 작성
    getItemData({ state, commit }, seq) {
        return commit('SET_ITEMS', data.list);
    },
    ...
 }

// 실행 시 아래와 같이
this.$store.dispatch('main/getItemData', ...);&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;id-[Vue.js]Vuex상태관리패턴-03.애플리케이션구조&quot; data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;02. 애플리케이션 구조&lt;/b&gt;&lt;/h3&gt;
&lt;p&gt;Vuex 코드 구조에 제한은 없지만 기본적으로 아래와 같은 원칙을 준수한다.&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;b&gt;03-1. 기본 규칙&lt;/b&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;애플리케이션 레벨의 상태는 중앙 집중된 저장소이다.&lt;/li&gt;
&lt;li&gt;상태를 변경시키는 유일반 방법은 동기 트랙잭션인&amp;nbsp;&lt;b&gt;변이를 커밋&lt;/b&gt;하는 것이다.&lt;/li&gt;
&lt;li&gt;비동기식 로직은 캡슐화되어야하며&amp;nbsp;&lt;b&gt;액션&lt;/b&gt;으로 구성된다.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;필요에 따라 저장소를&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;b&gt;모듈&lt;/b&gt;로 나눌 수 있다.&lt;/p&gt;
&lt;p&gt;각 모듈은 자체 상태, 변이, 액션, 게터 및 중첩된 모듈을 포함 할 수 있다.&lt;/p&gt;
&lt;h4 id=&quot;id-[Vue.js]Vuex상태관리패턴-03-2.코드구조&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;03-2. 코드 구조&lt;/b&gt;&lt;/h4&gt;
&lt;p&gt;모듈을 조합해 쓰는 구조로 작성된다면 프로젝트 구조의 예시는 아래와 같다.&lt;/p&gt;
&lt;p&gt;본인 프로젝트 상황에 맞게 구조를 변형할 수 있다.&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;b&gt;ex) Project Directory&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1603331227028&quot; class=&quot;plaintext&quot; data-ke-language=&quot;plaintext&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;├── index.html
├── main.js
├── api
│   └── ... # API 요청을 위한 추상화를 포함합니다.
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 모듈을 조합하고 저장소를 내보내는 곳 입니다.
    ├── actions.js        # 루트 액션
    ├── mutations.js      # 루트 변이
    └── modules
        ├── cart
        │   ├── index.js         
    	│   ├── actions.js     
    	│   ├── mutations.js     
    	│   ├── getters.js     
    	│   └── state.js   
        └── ...&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;id-[Vue.js]Vuex상태관리패턴-04.활용&quot; data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;04.&amp;nbsp;&lt;/b&gt;&lt;b&gt;활용&lt;/b&gt;&lt;/h3&gt;
&lt;p&gt;Vuex 활용 시 유의할 점과 모듈형 구조에서 store에 접근하는 방법에 대한 내용이다.&lt;/p&gt;
&lt;h4 id=&quot;id-[Vue.js]Vuex상태관리패턴-04-1.rootState활용&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;04-1.&amp;nbsp;rootState 활용&lt;/b&gt;&lt;/h4&gt;
&lt;p&gt;Vuex를 모듈형으로 활용할 때,&amp;nbsp;&lt;b&gt;기본적으로 state 변수 값은 동일 모듈에 있는 state만 참조&lt;/b&gt;하게 된다.&lt;/p&gt;
&lt;p&gt;만약 내가&amp;nbsp;&lt;b&gt;최상위 state 변수나 다른 모듈의 변수 값을 활용하기 위해서는 rootState를 활용&lt;/b&gt;해야 한다.&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;하지만&amp;nbsp;&lt;b&gt;rootState는 actions과 Getters의 인자로만 사용 가능&lt;/b&gt;하므로&lt;/p&gt;
&lt;p&gt;Mutations에서 사용하기를 원하면&amp;nbsp;&lt;b&gt;Actions에서 받아서 Mutations 쪽으로 commit해서 활용해야 한다.&lt;/b&gt;&lt;/p&gt;
&lt;h4 id=&quot;id-[Vue.js]Vuex상태관리패턴-04-2.Mutations과Actions인자&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;04-2. Mutations과 Actions 인자&lt;/b&gt;&lt;/h4&gt;
&lt;table style=&quot;border-collapse: collapse; width: 100%;&quot; border=&quot;1&quot;&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style=&quot;text-align: center;&quot; colspan=&quot;2&quot;&gt;&lt;span style=&quot;color: #333333;&quot;&gt;Mutations&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;text-align: center;&quot; colspan=&quot;2&quot;&gt;&lt;span style=&quot;color: #333333;&quot;&gt;Actions&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;text-align: center;&quot;&gt;형태&lt;/td&gt;
&lt;td style=&quot;text-align: center;&quot;&gt;인자 설명&lt;/td&gt;
&lt;td style=&quot;text-align: center;&quot;&gt;형태&lt;/td&gt;
&lt;td style=&quot;text-align: center;&quot;&gt;인자 설명&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;ul&gt;
&lt;li&gt;mutationsEx1(state, payload)&lt;span&gt;{ }&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;mutationsEx2(state, {data1, data2})&lt;span&gt;{ }&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;ul&gt;
&lt;li&gt;기본인자 - state&lt;/li&gt;
&lt;li&gt;전달인자 - payload
&lt;ul&gt;
&lt;li&gt;commit으로 넘어옴&lt;/li&gt;
&lt;li&gt;객체 형태 가능&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;ul&gt;
&lt;li&gt;actionsEx1({rootState, state, dispatch, commit}, payload){ }&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;ul&gt;
&lt;li&gt;기본인자 -&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;span&gt;{rootState, state, dispatch, commit}&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;중괄호로 묶어서 받음&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;전달인자 - payload&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;객체 형태 가능&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h4 id=&quot;id-[Vue.js]Vuex상태관리패턴-04-3.Components에서각store모듈접근방법&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;04-3. Components에서 각 store 모듈 접근 방법&lt;/b&gt;&lt;/h4&gt;
&lt;p id=&quot;id-[Vue.js]Vuex상태관리패턴-(1)State&quot; data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;(1) state&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;컴포넌트의&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;b&gt;computed&lt;/b&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;내에 작성&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;기본 접근&lt;/li&gt;
&lt;/ul&gt;
&lt;pre id=&quot;code_1603331436678&quot; class=&quot;vue pf&quot; data-ke-language=&quot;vue&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;  this.$store.state.items&lt;/code&gt;&lt;/pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;mapState&lt;/b&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;활용&lt;/li&gt;
&lt;/ul&gt;
&lt;pre id=&quot;code_1603331454478&quot; class=&quot;vue pf&quot; data-ke-language=&quot;vue&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;computed: {
    ...mapState({
        items: state =&amp;gt; state.items,
    }),&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;b&gt;(2) Mutations&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;컴포넌트의&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;b&gt;methods&lt;/b&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;영역 내에 작성&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;기본 접근&lt;/li&gt;
&lt;/ul&gt;
&lt;pre id=&quot;code_1603331495630&quot; class=&quot;vue kotlin&quot; data-ke-language=&quot;vue&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt; this.$store.commit('경로명/함수명')&lt;/code&gt;&lt;/pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;mapMutations&lt;/b&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;활용&lt;b&gt;&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;pre id=&quot;code_1603331515268&quot; class=&quot;vue dockerfile&quot; data-ke-language=&quot;vue&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;methods: {
    ..mapMutations({
        add: 'item/increment' // this.add()를 this.$store.commit('item/increment')에 매핑
    })
}&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;b&gt;(3) Actions&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;컴포넌트의&amp;nbsp;&lt;b&gt;methods&lt;/b&gt;&amp;nbsp;영역 내에 작성&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;기본 접근&lt;/li&gt;
&lt;/ul&gt;
&lt;pre id=&quot;code_1603331539532&quot; class=&quot;vue kotlin&quot; data-ke-language=&quot;vue&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;this.$store.dispatch('경로명/함수명')&lt;/code&gt;&lt;/pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;mapActions&amp;nbsp;&lt;/b&gt;활용&lt;b&gt;&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;pre id=&quot;code_1603331560254&quot; class=&quot;vue dockerfile&quot; data-ke-language=&quot;vue&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;methods: {
    ..mapActions({
        add: 'item/increment' // this.add()를 this.$store.dispatch('item/increment')에 매핑
    })
}&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;b&gt;&amp;nbsp;&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;&lt;b&gt;(4) Getters&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;컴포넌트의&amp;nbsp;&lt;b&gt;computed&lt;/b&gt;&amp;nbsp;내에 작성&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;기본 접근&lt;/li&gt;
&lt;/ul&gt;
&lt;pre id=&quot;code_1603331575738&quot; class=&quot;vue kotlin&quot; data-ke-language=&quot;vue&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;this.$store.getters[&quot;경로명/함수명&quot;];  
this.$store.getters.doneTodosCount;&lt;/code&gt;&lt;/pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;mapGetters&lt;/b&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;활용&lt;b&gt;&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;pre id=&quot;code_1603331592691&quot; class=&quot;vue less&quot; data-ke-language=&quot;vue&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;computed: {
    ...mapGetters ({
        doneCount: 'item/doneTodosCount'
    }),&lt;/code&gt;&lt;/pre&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;p&gt;참고: 공식문서 - &lt;a href=&quot;https://vuex.vuejs.org/kr/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;vuex.vuejs.org/kr/&lt;/a&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1603331634141&quot; contenteditable=&quot;false&quot; data-ke-type=&quot;opengraph&quot; data-og-type=&quot;website&quot; data-og-title=&quot;Vuex가 무엇인가요? | Vuex&quot; data-og-description=&quot;Vuex가 무엇인가요? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 &quot; data-og-host=&quot;vuex.vuejs.org&quot; data-og-source-url=&quot;https://vuex.vuejs.org/kr/&quot; data-og-url=&quot;https://vuex.vuejs.org/kr/&quot; data-og-image=&quot;https://scrap.kakaocdn.net/dn/dp9mmY/hyHXeAWJkS/9R6mADzBZi4XqbArxSsfck/img.png?width=1280&amp;amp;height=866&amp;amp;face=0_0_1280_866,https://scrap.kakaocdn.net/dn/lSWLr/hyHXq9cFaH/gGVtSFuM04NDWcGVPSfPyK/img.png?width=701&amp;amp;height=551&amp;amp;face=0_0_701_551&quot;&gt;&lt;a href=&quot;https://vuex.vuejs.org/kr/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://vuex.vuejs.org/kr/&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url('https://scrap.kakaocdn.net/dn/dp9mmY/hyHXeAWJkS/9R6mADzBZi4XqbArxSsfck/img.png?width=1280&amp;amp;height=866&amp;amp;face=0_0_1280_866,https://scrap.kakaocdn.net/dn/lSWLr/hyHXq9cFaH/gGVtSFuM04NDWcGVPSfPyK/img.png?width=701&amp;amp;height=551&amp;amp;face=0_0_701_551');&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot;&gt;Vuex가 무엇인가요? | Vuex&lt;/p&gt;
&lt;p class=&quot;og-desc&quot;&gt;Vuex가 무엇인가요? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를&lt;/p&gt;
&lt;p class=&quot;og-host&quot;&gt;vuex.vuejs.org&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>Web/Vue.js</category>
      <category>Vue</category>
      <category>Vue.js</category>
      <category>vuex</category>
      <category>뷰</category>
      <author>코딩햄..</author>
      <guid isPermaLink="true">https://hyem-study.tistory.com/145</guid>
      <comments>https://hyem-study.tistory.com/145#entry145comment</comments>
      <pubDate>Thu, 22 Oct 2020 10:58:57 +0900</pubDate>
    </item>
    <item>
      <title>[Design Pattern] Factory Method Pattern</title>
      <link>https://hyem-study.tistory.com/144</link>
      <description>&lt;p style=&quot;text-align: center;&quot;&gt;디자인 패턴 학습 후 복습한 내용입니다&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;a id=&quot;user-content-1-팩토리-메서드-패턴factory-method-pattern&quot; href=&quot;https://github.com/HyeminNoh/Tech-Stack/blob/master/docs/DesignPattern/FactoryMethodPattern.md#1-%ED%8C%A9%ED%86%A0%EB%A6%AC-%EB%A9%94%EC%84%9C%EB%93%9C-%ED%8C%A8%ED%84%B4factory-method-pattern&quot; aria-hidden=&quot;true&quot;&gt;&lt;/a&gt;1. 팩토리 메서드 패턴(Factory Method Pattern)&lt;/h3&gt;
&lt;p&gt;팩토리 메서드 패턴(Factory Method Pattern)객체 지향 디자인 패턴이다.&lt;/p&gt;
&lt;p&gt;&lt;br /&gt;&lt;b&gt;Factory method&lt;/b&gt;는&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;b&gt;부모(상위) 클래스에 알려지지 않은 구체 클래스를 생성&lt;/b&gt;하는 패턴이며.&lt;br /&gt;자식(하위) 클래스가 어떤 객체를 생성할지를 결정하도록 하는 패턴이기도 하다.&lt;br /&gt;부모(상위) 클래스 코드에 구체 클래스 이름을 감추기 위한 방법으로도 사용한다.&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;쉽게 말해, 객체 생성 로직은 Factory라는 클래스로 분리한 후&lt;br /&gt;객체 인스턴스화를 부모 클래스가 아닌 subclass에 위임하는 패턴이다.&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;a id=&quot;user-content-1-1-uml-diagram&quot; href=&quot;https://github.com/HyeminNoh/Tech-Stack/blob/master/docs/DesignPattern/FactoryMethodPattern.md#1-1-uml-diagram&quot; aria-hidden=&quot;true&quot;&gt;&lt;/a&gt;1-1. UML Diagram&lt;/h3&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; height=&quot;250px&quot; data-canonical-src=&quot;https://miro.medium.com/max/644/1*3KK37laxpxRSRVelQioIqQ.png&quot; data-origin-width=&quot;0&quot; data-origin-height=&quot;0&quot; data-ke-mobilestyle=&quot;widthContent&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ddOKW0/btqGxPYhqrw/q90vYWhnKAc8ppkzIFOM61/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ddOKW0/btqGxPYhqrw/q90vYWhnKAc8ppkzIFOM61/img.png&quot; data-alt=&quot;출처:&amp;amp;amp;nbsp;https://medium.com/@eyegochild/design-pattern-factory-method-pattern-dc72f35e1076&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ddOKW0/btqGxPYhqrw/q90vYWhnKAc8ppkzIFOM61/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FddOKW0%2FbtqGxPYhqrw%2Fq90vYWhnKAc8ppkzIFOM61%2Fimg.png&quot; height=&quot;250px&quot; data-canonical-src=&quot;https://miro.medium.com/max/644/1*3KK37laxpxRSRVelQioIqQ.png&quot; data-origin-width=&quot;0&quot; data-origin-height=&quot;0&quot; data-ke-mobilestyle=&quot;widthContent&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;출처:&amp;nbsp;https://medium.com/@eyegochild/design-pattern-factory-method-pattern-dc72f35e1076&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Creator&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;abstract factory method를 정의&lt;/li&gt;
&lt;li&gt;factory method를 호출해 &quot;Product&quot;를 생성&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Concrete Creator&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;factory method를 구현, concrete product instance 중 하나를 반환&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Product&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;factory method에 의해 생성되는 product의 base class 혹은 interface&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Concrete Product의 역할&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Product interface or class 구현&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;a id=&quot;user-content-2-구현-예시&quot; href=&quot;https://github.com/HyeminNoh/Tech-Stack/blob/master/docs/DesignPattern/FactoryMethodPattern.md#2-%EA%B5%AC%ED%98%84-%EC%98%88%EC%8B%9C&quot; aria-hidden=&quot;true&quot;&gt;&lt;/a&gt;2. 구현 예시&lt;/h3&gt;
&lt;p&gt;여러 모양의 도형이 존재할 때 각 도형 객체를 반환 후 도형을 그립니다.&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;a id=&quot;user-content-concrete-product&quot; href=&quot;https://github.com/HyeminNoh/Tech-Stack/blob/master/docs/DesignPattern/FactoryMethodPattern.md#concrete-product&quot; aria-hidden=&quot;true&quot;&gt;&lt;/a&gt;- Concrete Product&lt;/h4&gt;
&lt;pre id=&quot;code_1597209519001&quot; class=&quot;java&quot; data-ke-language=&quot;java&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;// Shape.java
public interface Shape {
    void draw();
}

// Circle.java
public class Circle implements Shape {
    @Override
    public void draw(){
        System.out.println(&quot;Circle draw&quot;);
    }
}

// Rectangle.java
public class Rectangle implements Shape {
    @Override
    public void draw(){
        System.out.println(&quot;Rectangle draw&quot;);
    }
}

// Square.java
public class Square implements Shape {
    @Override
    public void draw(){
        System.out.println(&quot;Square draw&quot;);
    }
}&lt;/code&gt;&lt;/pre&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;- Concrete Creator&lt;/h4&gt;
&lt;pre id=&quot;code_1597209537761&quot; class=&quot;java&quot; data-ke-language=&quot;java&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;// ShapeFactory.java
public class ShapeFctory {
    // Factory Method -&amp;gt; Product 생성 후 반환
    public Shape getShape(String shapeType) {
        if(shapeType == null) {
            return null;
        }
        if(shapeType.equalsIgnoreCase(&quot;CIRCLE&quot;)) {
            return new Circle();
        } else if(shapeType.equalsIgnoreCase(&quot;RECTANGLE&quot;)) {
            return new Rectangle();
        } else if(shapeType.equalsIgnoreCase(&quot;SQUARE&quot;)) {
            return new Square();
        }
        return null;
    }
}&lt;/code&gt;&lt;/pre&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;- Creator&lt;/h4&gt;
&lt;pre id=&quot;code_1597209559977&quot; class=&quot;java&quot; data-ke-language=&quot;java&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;public class FactoryPatternEx {
    public static void main(String[] args) {
        // 팩토리 클래스 객체 생성
        ShapeFactory shapeFactory = new ShapeFactory();
        
        // 원형 인스턴스를 생성
        Shape circle = shapeFactory.getShape(&quot;CIRCLE&quot;);
        circle.draw();

        // 삼각형 인스턴스를 생성
        shape rectangle = shapeFactory.getShape(&quot;RECTANGLE&quot;);
        rectangle.draw();

        // 사각형 인스턴스를 생성
        shape square = shapeFactory.getShape(&quot;SQUARE&quot;);
        square.draw();
    }
}&lt;/code&gt;&lt;/pre&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;a id=&quot;user-content-3-결론&quot; href=&quot;https://github.com/HyeminNoh/Tech-Stack/blob/master/docs/DesignPattern/FactoryMethodPattern.md#3-%EA%B2%B0%EB%A1%A0&quot; aria-hidden=&quot;true&quot;&gt;&lt;/a&gt;3. 결론&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Factory method pattern은 기존 코드를 수정하지 않고, &lt;br /&gt;클래스를 추가하는 방식으로 새로운 객체 생성을 처리할 수 있다.&lt;/li&gt;
&lt;li&gt;새로운 Product가 추가될 때마다 class를 추가하게 되므로, 점점 클래스가 많아진다.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;-&amp;gt; 경우에 맞는 사용이 디자인 패턴의 효율을 극대화 할 수 있는 듯 하다.&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;a id=&quot;user-content-reference--additional-resources&quot; href=&quot;https://github.com/HyeminNoh/Tech-Stack/blob/master/docs/DesignPattern/FactoryMethodPattern.md#reference--additional-resources&quot; aria-hidden=&quot;true&quot;&gt;&lt;/a&gt;참고&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;a href=&quot;https://ko.wikipedia.org/wiki/%ED%8C%A9%ED%86%A0%EB%A6%AC_%EB%A9%94%EC%84%9C%EB%93%9C_%ED%8C%A8%ED%84%B4&quot;&gt;Wiki&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;a href=&quot;https://medium.com/@eyegochild/design-pattern-factory-method-pattern-dc72f35e1076&quot;&gt;[Design Pattern] Factory method pattern&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;a href=&quot;https://niceman.tistory.com/143&quot;&gt;Java 디자인패턴 - 팩토리 메소드 패턴&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;</description>
      <category>SW</category>
      <category>디자인패턴</category>
      <category>팩토리메서드</category>
      <author>코딩햄..</author>
      <guid isPermaLink="true">https://hyem-study.tistory.com/144</guid>
      <comments>https://hyem-study.tistory.com/144#entry144comment</comments>
      <pubDate>Wed, 12 Aug 2020 14:20:25 +0900</pubDate>
    </item>
  </channel>
</rss>