<h2>크롬 익스텐션</h2><ul class="tight" data-tight="true"><li><p><strong>user agent switcher</strong>: user agent 변경 (PC에서 모바일 화면을 볼 수 있음)</p></li><li><p><strong>awesome screenshot</strong>: 스크롤 캡쳐, 부분 캡쳐 및 녹화 등 가능 (가입 필요)</p></li><li><p><strong>svg export</strong>: 해당 사이트의 svg 이미지를 다운로드 할 수 있게 함</p></li><li><p><strong>image downloader</strong>: 해당 사이트의 이미지를 가져와 다운로드 할 수 있게 함</p></li><li><p><strong>openwax</strong>: 접근성 테스트, 문제가 있는 부분을 알려주고 경고함</p></li><li><p><strong>React developer Tool</strong>: React로 개발된 사이트에 접속할 시 아이콘에 색이 생김</p></li><li><p><strong>vue devtools</strong>: vue로 개발된 사이트에 접속할 시 아이콘에 색이 생김</p></li></ul><hr><h2>윈도우 응용 프로그램</h2><ul class="tight" data-tight="true"><li><p><strong>SVG Viewer Extension for Windows</strong>: 윈도우 탐색기에서 svg 이미지를 미리보기 하게 함</p></li></ul><hr><h2>vs code 익스텐션</h2><ul class="tight" data-tight="true"><li><p><strong>Atom One Dark Theme</strong>: 화면의 코드 컬러를 보기 좋게 변경함</p></li><li><p><strong>live server</strong>: 새로고침을 하지 않아도 저장할 시 바로 사이트에 반영됨</p></li><li><p><strong>beautify</strong>: html, css formatter</p></li><li><p><strong>prettier</strong>: 코드 formatter. 자바스크립트 코드 포멧 자동 변경</p></li></ul><h3>beautify 기본 설정</h3><ul class="tight" data-tight="true"><li><p>beautify selection 단축키지정(alt+b)</p></li><li><p>join lines 단축키지정(alt+j)</p></li></ul><h3>prettier 기본 설정</h3><ul class="tight" data-tight="true"><li><p>default formatter → prettier로 변경</p></li><li><p>settings → format on save 체크</p></li><li><p>prettier.singleQuote(default:false)</p><ul class="tight" data-tight="true"><li><p>체크, 문자열은 홑따옴표로 통일 (변수에 html이 있을 경우 쌍따옴표가 포함됨)</p></li></ul></li><li><p>css, html파일에서도 prettier가 적용되어 한줄로 작성이 불가능하다.</p><ul class="tight" data-tight="true"><li><p>이 경우 오히려 가독성이 떨어짐.</p></li><li><p>javascript를 위해서 사용한다고 생각하면 됨.</p></li></ul></li><li><p>위 문제를 해결하기 위해 .prettierignore 파일을 프로젝트 루트 폴더에 만들고 무시 규칙을 작성.</p><ul class="tight" data-tight="true"><li><p>무시 규칙</p></li></ul></li></ul><pre spellcheck="false"><code>#Ignore all HTML files:
\**/**.html#Ignore all css files:\**/**.css</code></pre><hr><h2>vs code 단축키</h2><ul class="tight" data-tight="true"><li><p><strong>f2</strong> : 파일명 변경</p></li><li><p><strong>ctrl+/</strong> : 주석으로 변경</p></li><li><p><strong>alt+shift+A</strong> : 부분주석</p></li><li><p><strong>alt+shift+방향키 상하</strong> : 해당 줄 복사</p></li><li><p><strong>shift+del</strong> : 해당 줄 지우기</p></li><li><p><strong>alt+방향키 상하</strong> : 해당 줄 옮기기</p></li><li><p><strong>alt+shift+방향키 좌우</strong> : 확장 선택</p></li><li><p><strong>tab, shift+tab</strong> : 들여쓰기, 내어쓰기</p></li><li><p><strong>ctrl+alt+방향키 상하</strong> : 멀티 커서</p></li><li><p><strong>ctrl+D</strong> : 다음 같은 단어에 멀티커서</p></li><li><p><strong>alt+클릭</strong> : 멀티 커서</p></li></ul><hr><h2>사이트</h2><h3>유용한 사이트</h3><ul class="tight" data-tight="true"><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.dbcut.com/"><strong>[디비컷]</strong></a>: 웹디자인 참고 사이트</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://caniuse.com/"><strong>[can i use]</strong></a>: 크로스브라우징 도움 사이트</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.dothome.co.kr/"><strong>[닷홈]</strong></a>: 무료 호스팅 사이트 (유료 호스팅 가능)</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="http://www.spritecow.com/"><strong>[Sprite Cow]</strong></a>: 스프라잇 이미지의 범위를 알려줌</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://yesviz.com/"><strong>[yesviz]</strong></a>: 기기들의 viewprot를 모두 확인할 수 있음</p></li></ul><h3>Flex, Grid 설명</h3><ul class="tight" data-tight="true"><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://studiomeal.com/archives/197"><strong>[이번에야 말로 CSS Flex를 익혀보자]</strong></a>: Flex 설명 - 1분 코딩</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://studiomeal.com/archives/533"><strong>[이번에야 말로 CSS Grid를 익혀보자]</strong></a>: Grid 설명 - 1분 코딩</p></li></ul><h3>연습 게임</h3><ul class="tight" data-tight="true"><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://flukeout.github.io/"><strong>[CSS Dinner]</strong></a>: CSS 선택자 연습 사이트</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://flexboxfroggy.com/#ko"><strong>[Flexbox Frog]</strong></a>: flex 연습 게임 사이트</p></li></ul><hr><h2>기타 팁</h2><ul class="tight" data-tight="true"><li><p>닷홈 서버에 올릴 때는 html(루트 폴더)에만 넣어야함.</p></li></ul><p></p>

프론트엔드 개발 시 유용한 크롬 익스텐션, 응용프로그램, vs code 익스텐션, 단축키, 사이트 등 이전 게시글 백업

프론트엔드 개발 시 유용한 크롬 익스텐션, 응용프로그램, vs code 익스텐션, 단축키, 사이트

CodingTest

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li><p>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/challenges?order=recent">Programmers</a></p></li><li><p>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/problems/smallest-number-in-infinite-set/"> </a><a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/42748">K번째수</a></p></li><li><p>사용언어 : C#</p></li><li><p>난이도 : 하</p></li><li><p>풀이시간 : 15m</p></li><li><p>유형 : 정렬, 배열, 리스트</p></li></ul><h6>문제 설명</h6><p>배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다.</p><p>예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면</p><ol><li><p>array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다.</p></li><li><p>1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다.</p></li><li><p>2에서 나온 배열의 3번째 숫자는 5입니다.</p></li></ol><p>배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요.</p><h5>제한사항</h5><ul><li><p>array의 길이는 1 이상 100 이하입니다.</p></li><li><p>array의 각 원소는 1 이상 100 이하입니다.</p></li><li><p>commands의 길이는 1 이상 50 이하입니다.</p></li><li><p>commands의 각 원소는 길이가 3입니다.</p></li></ul><h5>입출력 예</h5><p>array commands return [1, 5, 2, 6, 3, 7, 4] [[2, 5, 3], [4, 4, 1], [1, 7, 3]] [5, 6, 3]</p><h5>입출력 예 설명</h5><p>[1, 5, 2, 6, 3, 7, 4]를 2번째부터 5번째까지 자른 후 정렬합니다. [2, 3, 5, 6]의 세 번째 숫자는 5입니다.<br>[1, 5, 2, 6, 3, 7, 4]를 4번째부터 4번째까지 자른 후 정렬합니다. [6]의 첫 번째 숫자는 6입니다.<br>[1, 5, 2, 6, 3, 7, 4]를 1번째부터 7번째까지 자릅니다. [1, 2, 3, 4, 5, 6, 7]의 세 번째 숫자는 3입니다.</p><h3>문제 풀이 접근</h3><p>이 문제는, 바로 읽히는대로 풀면 될 정도로 직관적인 문제다. <br>이 문제의 해결 플로우,<br>1. array를 주고, Command 를 준다.<br>2. 2차원 배열로 Command를 주기때문에 각 배열 하나하나가 커맨드이다.<br>3. {i,j,k} 로 주어질 때, i -&gt; j 까지 자르고 정렬하여 k 번째를 answer에 하나씩 넣어 반환</p><h3>정답 작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;
using System.Collections.Generic;

      public class Solution
    {
        public int[] solution(int[] array, int[,] commands)
        {
            int count = commands.GetLength(0);
            int[] answer;

            List&lt;int&gt; list = new List&lt;int&gt;();

            int loop = 0;

            for(int i = 0; i &lt; commands.GetLength(0); ++i)
            {
                var fst = commands[i,0] -1 ;
                var snd = commands[i, 1] - 1;
                var findIndex = commands[i, 2];

                var makeArrCount = snd - fst + 1;

                int[] processArr = new int[makeArrCount];

                int index = 0;
                for(int j = fst; j &lt;= snd; ++j)
                {
                    processArr[index] = array[j];
                    ++index;
                }

                Array.Sort(processArr);
                list.Add(processArr[findIndex - 1]);

                ++loop;
            }
            answer = list.ToArray();
            return answer;
        }
    }</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1723145153151" alt="until-1216"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>

혼자서 다시푸는 코딩테스트 준비 일지 - 12

코딩테스트 준비 - K번째수

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li><p>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/challenges?order=recent">Programmers</a></p></li><li><p>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/42746">가장 큰 수</a></p></li><li><p>사용언어 : C#</p></li><li><p>난이도 : 중하</p></li><li><p>풀이시간 : 1h13m</p></li><li><p>유형 : 정렬, 수 비교, 배열</p></li></ul><h6><strong>문제 설명</strong></h6><p>0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요.</p><p>예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다.</p><p>0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요.</p><h5>제한 사항</h5><ul><li><p>numbers의 길이는 1 이상 100,000 이하입니다.</p></li><li><p>numbers의 원소는 0 이상 1,000 이하입니다.</p></li><li><p>정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다.</p></li></ul><h5>입출력 예</h5><p>numbers return <br>[6, 10, 2] "6210"<br>[3, 30, 34, 5, 9] "9534330"</p><h3>문제 풀이 접근</h3><p>이 문제에선 삽질을 많이해서 여러번 정답을 들이밀면서 해결해보았다.<br>1. 모든 조합을 구한 뒤, 큰 수 부터 정렬하여 구하는 방법<br>2. 문제에서 원소 크기는 1000 으로 고정되었기 때문에, 자릿 수를 10000만의 자리까지 끌고 올라와서 정렬하여 비교하는 방법<br><br>먼저, 1번은 효율성에서 좋지 않아 보인다. 일단 모든 조합수를 구하는 데 있어서, O(N^2) 이 들 수 밖에 없다. 모든 원소의 값을 다 구한 뒤 정렬도 수행해야하기 때문이다.  <br>결국 O(N^2) + O(N Log N) 의 시간복잡도로 가정된다. ( 편의상 전부 적어보았음 )<br><br>그렇다면 2번의 방법은 어떤게 다른가?<br>2번은 원소의 수를 잠시 5자리 이상의 수로 연산을한 뒤 정렬을 하면, 1번에서 O(N^2)는 안들고 정렬에 대한 시간 복잡도인 +O(N Log N) 정도만 들겠다. <br><br>그러면 수를 정렬하는 방법은 단순히 [6,10,2] 등과 같이 수가 다 다르다면 상관은 없을 수 있는데, <br>[3,3000] 과 같이 앞자리가 같은수는 결국 3 * 10000 , 3000  * 10 을 하면 결국 30000으로 같다. <br>그렇기 때문에 자릿수를 맞추는 것은 수를 문자열로 바꾼 후 문자열의 길이만큼 Loop하여 추가한다. <br>그러면 33333 , 30003 이기 때문에, 3이 더 큰수로 나올 것이다. <br><br>이런 아이디어로 비교를 하여 정렬을 하게된다면 정답을 찾을 수 있다. <br><br>문제의 플로우는 아래와 같다. <br>1. Tuple을 이용하여, Key : 6자리 변경 수 , Value : 원래 수 <br>2. Key 기준으로 정렬 <br>3. List의 처음부터 끝까지 원래 수를 StringBuilder 에 Append 하면서 추가. <br>4. 그리고 Int32.Parse로 캐스팅하여 반환</p><h3>정답 작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;
using System.Text;
using System.Collections.Generic;

public class Solution {
    public string solution(int[] numbers) {
        string answer = "";
        int isZero = 0;

        if(numbers.Length == 1)
        {
            return numbers[0].ToString();
        }
        
        for(int i = 0; i &lt; numbers.Length; ++i)
        {
            if(numbers[i] == 0)
                ++isZero;
        }
        
        if(isZero == numbers.Length)
        {
            answer = "0";
            return answer;
        }
            
        
        // 모두 100000의 숫자로 변경해서 체크.
        List&lt;Tuple&lt;int,int&gt;&gt; list = new List&lt;Tuple&lt;int,int&gt;&gt;();
        
        for(int i = 0; i &lt; numbers.Length; ++i)
        {            
            int valueInt = numbers[i];
            int makeInt = MakeValue(valueInt);
            
            list.Add(new Tuple&lt;int,int&gt;(makeInt,valueInt));
        }
        
        var toArr = list.ToArray();
        
        Array.Sort(toArr, (a,b) =&gt; {return b.Item1.CompareTo(a.Item1);});
        
        StringBuilder sb = new StringBuilder();
        for(int i = 0; i &lt; toArr.Length; ++i)
        {
            var element = toArr[i];
            sb.Append(element.Item2);
        }
            
        answer = sb.ToString();
        return answer;
    }
    
    public int MakeValue(int valueInt)
    {
        int ret = 0;
        String valueString = valueInt.ToString();
        StringBuilder sb = new StringBuilder();
        int intIndex = 0;
        
        while(sb.Length != 6) // 비교는 10만으로 비교, 즉 6자리 수로 비교하겠다.
        {
            if(valueString.Length == intIndex)
                intIndex = 0;
            
            
            char element = valueString[intIndex];
            sb.Append(element);
            ++intIndex;
        }
        
        ret = Int32.Parse(sb.ToString());
        return ret;
    }
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1724065391054" alt="until-1246"><p></p>

혼자서 다시푸는 코딩테스트 준비 일지 - 13

코딩테스트 준비 - 가장 큰 수

Experience

<p>오늘은, 그동안 미뤄왔던 게임잼에서 만든 게임인 "MeMiMiC" 데모판을 인디게임들이 많은 해외 사이트인 <a target="_blank" rel="noopener noreferrer nofollow" href="http://Itch.io">Itch.io</a> 에 올려보려고 합니다.<br><br>간략하게 <a target="_blank" rel="noopener noreferrer nofollow" href="http://Itch.io">Itch.io</a> 가 무엇이냐면 인디 게임 유통 사이트라고하고, 누구나 올릴 수 있고 ,누구나 게임을 해볼 수도 있어서, 참신한 것들도 많고, 개인 습작이나 토이 프로젝트 용으로 만들어진 게임을 많이 업로드 하고 있습니다.<br><br>그리고, 상당한 규모의 온라인 게임잼이 이 사이트를 통해서도 몇몇개는 이루어 지고 있는 것으로 알고 있습니다.<br>게임쪽으로 예전에 많이 보고 배운 유투버 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.youtube.com/@Brackeys"><strong>Brackeys</strong></a><strong> </strong>가 올해 게임잼을 주최했던것으로도 알고 있습니다.</p><p>지금부터 인디 게임쪽으로는 유명한 사이트에 만들었던 미미믹을 올려보도록 하겠습니다.<br><br>들어가서 우상단에서 먼저 회원가입을 하고 로그인을 하면 초기 화면은 아래와 같습니다.</p><img src="https://image.until.blog/sin0105/article/1732122775895.png" data-width="100%" data-align="center" alt="2223"><p>가장먼저 사이트에 들어가면 DashBoard가 있습니다. <br>클릭하면 자신의 프로젝트 대시보드를 볼 수 있습니다.</p><img src="https://image.until.blog/sin0105/article/1732122809729.png" data-width="100%" data-align="center" alt="2224"><p>Create New Project를 누르면 여러 설정들이 나옵니다.<br>차근차근 설명해드리도록 하겠습니다.</p><img src="https://image.until.blog/sin0105/article/1732122880676.png" data-width="100%" data-align="center" alt="2225"><p>1. 타이틀 설정, 제목을 설정해줍니다.<br>2. Project URL 설정, 자동으로 정해줍니다. 보통은 본인아이디.itch.io/{프로젝트명} 으로 설정됩니다.<br>3. 커버 이미지 (대표이미지)를 설정할 수 있습니다. 여기서 대표 이미지를 설정하도록 해줍시다.<br>4. 게임 내 스크린 샷 이미지 및 홍보 이미지를 추가하는 버튼입니다. 되도록 추가해줍니다.</p><img src="https://image.until.blog/sin0105/article/1732122998255.png" data-width="100%" data-align="center" alt="2226"><ol start="5"><li><p>Pricing은 그대로 가격입니다. 무료로 배포할 것이라면, 0 or Donate를 선택합니다.</p></li><li><p>Upload 할 파일을 선택하는 것, 보통 zip으로 압축해서 올립니다.</p></li><li><p>게임에 대한 설명을 작성하는 공간, 키 세팅, 설명, 간단한 시놉시스 등을 작성할 수 있습니다.</p><img src="https://image.until.blog/sin0105/article/1732123090989.png" data-width="100%" data-align="center" alt="2228"></li><li><p>게임의 장르를 설정할 수 있습니다. ex) Action, Platformer 등등</p></li><li><p>게임의 태그를 설정할 수 있습니다. ex) Pixel-art, Indie 등등</p></li><li><p>코멘트를 달거나 하는 기능에 대한 설정인 것 같습니다. 따로 건들지 않았습니다.</p></li><li><p>Visibility &amp; Access 는 접근하거나 볼 수 있는 권한에 대한 설정인 것으로 보입니다. <br>Draft(초안) - 프로젝트를 편집할 수 있는 사람만 페이지를 볼 수 있습니다.<br>Restricted(제한) - 소유자 및 승인된 사용자만 페이지를 볼 수 있습니다.<br>Public(공개) - 누구나 페이지를 볼 수 있습니다.<br><br>우리의 목적은 웹포팅을 해서 더 많은 사람에게 접근성을 높이는 것이 목표기 때문에 Public으로 설정해주도록 합니다.</p></li></ol><p></p><p>** 간혹 이미지처럼 Public이 비활성화 된 경우가 있는데, Draft로 초안 발행한 뒤에 다시 Edit을 클릭하여 다시 프로젝트 세팅을 하면 활성화됩니다. <br>Public으로 세팅해주도록 합니다.</p><img src="https://image.until.blog/sin0105/article/1732123760672.png" data-width="100%" data-align="center" alt="2230"><p></p><p>이렇게, 만든 게임을 인디게임 사이트에 올려서 보다 많은 유저들에게 접근성을 높일 수 있는 가이드를 알려드렸습니다. <br><br>부디 도움되는 내용이 되었길 바랍니다. <br>감사합니다!<br><br>제가 추가해놓은 주소도 남기고 가도록 하겠습니다!<br>웹 버전은 PC에서 설치없이 즐기실 수 있습니다!</p><p><strong>- 빌드 다운로드 버전</strong></p><a data-type="bookmark" href="https://jongho105.itch.io/memimic" target="_blank"><div class="content"><div><div class="title">MeMiMiC by jongho105</div><div class="description"></div></div><div class="href">https://jongho105.itch.io/memimic</div></div><img src="https://img.itch.zone/aW1nLzE4NjYwMzg0LnBuZw==/original/hKB15Q.png"></a><p><strong>- 웹 버전 (무설치 버전)</strong></p><a data-type="bookmark" href="https://jongho105.itch.io/memimic-html" target="_blank"><div class="content"><div><div class="title">MeMiMiC_HTML by jongho105</div><div class="description"></div></div><div class="href">https://jongho105.itch.io/memimic-html</div></div><img src="https://img.itch.zone/aW1nLzE4NjYwNTc4LnBuZw==/original/FFEDjT.png"></a><p></p>

내가 만든 게임의 접근성을 올리는 방법

내가 만든 게임을 Itch.io에 업로드 하기

<h1>Swagger UI란 무엇인가?</h1><blockquote><p>Swagger UI는 Swagger의 라이브러리 중 API Documentation, API 명세와 관련된 기능을 제공하는 라이브러리이다.</p></blockquote><p>쉽게 말하자면 API 자동 시각화이다. 아마 Swagger에 대해서 들어보지 못한 사람들도 얼추 이 비슷한 화면을 본 적은 있을 것이다.</p><img src="https://image.until.blog/brightdawn/article/1720425986318" alt="until-770"><p>이게 Swagger-ui를 통해서 만들어진 화면이다. 딱 Swagger-ui 세팅만 해주고 내가 필요한 컨트롤러를 넣어주기만 하면 알아서 만들어준다.</p><p></p><h1>그런데 왜 하필 Spring boot 3.1.3인가?</h1><p>Swagger를 사용하기 위해 찾아보면 대다수의 글들은 이렇게 말할 것이다.</p><p>gradle을 사용하고 있다면 아래 코드를 통해서 의존성 추가를 하세요!</p><p><code spellcheck="false">implementation 'io.springfox:springfox-boot-starter:3.0.0'</code> </p><p>맞는 이야기다. 맞는 이야기인데, Spring boot 3.1.3을 쓰고 있는 사람과 나에게는 맞는 이야기'였'다. 과거형이란 소리다. springfox는 Spring boot 3.xx를 지원하지 않는다. 이대로 코드를 실행시키면, 아니 실행 전에 일단 gradle부터 리로드 하는 순간 오류를 발산해준다.</p><p>일단 빨간색으로 <code spellcheck="false">build failed</code>부터 시작해서 이대로 코드 실행하는 순간 아래와 같은 오류를 뱉어준다. 갑자기 <code spellcheck="false">HttpServletRequest</code>를 찾을 수 없다느니 뭐라느니...</p><pre spellcheck="false"><code>2024-07-08T15:50:10.045+09:00 ERROR 9440 --- [  restartedMain] o.s.boot.SpringApplication               : Application run failed

java.lang.TypeNotPresentException: Type javax.servlet.http.HttpServletRequest not present
	at 

... 중략

java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:525) ~[na:na]
	at java.base/java.lang.Class.forName0(Native Method) ~[na:na]
	at java.base/java.lang.Class.forName(Class.java:467) ~[na:na]
	at java.base/sun.reflect.generics.factory.CoreReflectionFactory.makeNamedType(CoreReflectionFactory.java:114) ~[na:na]
	... 37 common frames omitted


종료 코드 0(으)로 완료된 프로세스</code></pre><p></p><h2>그럼 Spring 3.1.3은 Swagger-ui를 포기해야하는가?</h2><blockquote><p>하늘이 무너져도 솟아날 구멍은 있다. 이런 API 명세 날로 먹기 기능을 사람들이 포기했을 리가 없다.</p></blockquote><p>열심히 찾아본 결과, 우리는 springfox의 버림을 받은 대신, <code spellcheck="false">springdoc-openapi</code>를 사용해주면 된다는 사실을 알 수 있었다. </p><hr><h1>Swagger-ui 적용하기</h1><h2>환경내역</h2><blockquote><p>먼저 내가 사용하고 있는 환경은 다음과 같다. </p><p>Java 버전 17, Spring boot 3.1.3, 개발 툴 IntelliJ, Spring Security 적용 중, gradle 기반.</p></blockquote><h2>의존성 추가</h2><p>우리가 써온 모든 것들이 그래왔듯이 의존성 추가를 해주어야 한다. </p><p>아래 코드를 <code spellcheck="false">build.gradle</code>파일의 dependencies 블록에 넣어주자. 그리고 gradle을 refresh 해주는 것을 잊지 말자.</p><pre spellcheck="false"><code>implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.2.0' </code></pre><p></p><h2>SwaggerConfig 파일 세팅</h2><p><code spellcheck="false">SwaggerConfig</code> 파일을 만들 건데, 나의 경우에는 내가 사용하고 있는 패키지의 기본 패키지에 <code spellcheck="false">config</code>폴더를 만들어서 그 안에 넣어주었다. <code spellcheck="false">SwaggerConfig.java</code>클래스 파일을 만들어주면 된다.</p><pre spellcheck="false"><code>package 패키지명;

import io.swagger.v3.oas.models.OpenAPI;
import io.swagger.v3.oas.models.info.Info;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class SwaggerConfig {

    @Bean
    public OpenAPI customOpenAPI() {
        return new OpenAPI()
            .info(new Info()
                  .title("제목")
                  .version("버전")
                  .description("디스크립션 문서"));
    }
}</code></pre><p>위 내용을 참고하여 필요한 것이 있다면 더 추가해주면 된다. </p><p></p><h2>여기까지 하고서 실행했는데 안 되는데요?</h2><p>당신도 나와 같은 Spring Security를 사용하고 있는 모양이다. 보안상에는 좋다지만 개발하는 입장에서는 불편하기 그지없다. <s>하지만 보안이 우선인데 어쩌겠는가</s></p><p>이미 <code spellcheck="false">SecuiryConfig</code> 파일이 존재할텐데, 그 안에다가 아래와 같이 연결해서 넣어주자.</p><pre spellcheck="false"><code>.requestMatchers(new AntPathRequestMatcher("/swagger-ui/**")).permitAll()
.requestMatchers(new AntPathRequestMatcher("/v3/api-docs/**")).permitAll()</code></pre><p>어디에 넣어야 할지 감이 안 잡히는 사람들을 위해 import를 제외한 전체 내용 역시 공유하겠다.</p><pre spellcheck="false"><code>@Configuration
@EnableWebSecurity
public class SecurityConfig {

	@Bean
	SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
		http.
			authorizeHttpRequests(
					(authorizeHttpRequests) -&gt; authorizeHttpRequests
							.requestMatchers(new AntPathRequestMatcher("/swagger-ui/**")).permitAll()
							.requestMatchers(new AntPathRequestMatcher("/v3/api-docs/**")).permitAll()
					.requestMatchers(new AntPathRequestMatcher("/**")).permitAll())
		.headers(
				(headers) -&gt; headers
				.addHeaderWriter(new XFrameOptionsHeaderWriter(
						XFrameOptionsHeaderWriter.XFrameOptionsMode.SAMEORIGIN))).csrf(csrf -&gt; csrf.disable()
			);	
		return http.build();
	}
}</code></pre><p>나는 <code spellcheck="false">csrf</code> 관련 문제도 생겨서 저렇게 추가 처리 해주었다.</p><p></p><h2>확인하기</h2><p>위와 같은 단계를 거친 후에, 아래와 같이 링크에 접속해보자.</p><p><code spellcheck="false">http://localhost:8080/swagger-ui/index.html#/컨트롤러명</code> </p><img src="https://image.until.blog/brightdawn/article/1720428603376" alt="until-772"><p>그럼 위와 같은 사이트에 접속할 수 있다. 아주 익숙한 사이트다.</p><p></p>

스프링 부터 3.xx부터는 Swagger UI의 사용법이 다르다는 것, 알고 계셨나요? 저는 몰라서 고생 좀 했습니다.

스프링 부트 3.1.3에서 Swagger UI사용하기

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li><p>응시 사이트 :<a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/"> LeetCode</a></p></li><li><p>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/problems/minimum-number-game/">Minimum Number Game</a></p></li><li><p>사용언어 : C#</p></li><li><p>난이도 : 최하</p></li><li><p>풀이시간 : 9m</p></li><li><p>유형 : 배열, 리스트</p></li></ul><p>You are given a <strong>0-indexed</strong> integer array <code spellcheck="false">nums</code> of <strong>even</strong> length and there is also an empty array <code spellcheck="false">arr</code>. Alice and Bob decided to play a game where in every round Alice and Bob will do one move. The rules of the game are as follows:</p><ul><li><p>Every round, first Alice will remove the <strong>minimum</strong> element from <code spellcheck="false">nums</code>, and then Bob does the same.</p></li><li><p>Now, first Bob will append the removed element in the array <code spellcheck="false">arr</code>, and then Alice does the same.</p></li><li><p>The game continues until <code spellcheck="false">nums</code> becomes empty.</p></li></ul><p>Return <em>the resulting array </em><code spellcheck="false">arr</code>.</p><p><strong>Example 1:</strong></p><pre spellcheck="false"><code>Input: nums = [5,4,2,3]
Output: [3,2,5,4]
Explanation: In round one, first Alice removes 2 and then Bob removes 3. Then in arr firstly Bob appends 3 and then Alice appends 2. So arr = [3,2].
At the begining of round two, nums = [5,4]. Now, first Alice removes 4 and then Bob removes 5. Then both append in arr which becomes [3,2,5,4].
</code></pre><p><strong>Example 2:</strong></p><pre spellcheck="false"><code>Input: nums = [2,5]
Output: [5,2]
Explanation: In round one, first Alice removes 2 and then Bob removes 5. Then in arr firstly Bob appends and then Alice appends. So arr = [5,2].
</code></pre><p>&nbsp;</p><p><strong>Constraints:</strong></p><ul><li><p><code spellcheck="false">2 &lt;= nums.length &lt;= 100</code></p></li><li><p><code spellcheck="false">1 &lt;= nums[i] &lt;= 100</code></p></li><li><p><code spellcheck="false">nums.length % 2 == 0</code></p></li></ul><h3>문제 풀이 접근</h3><p>이 문제는, 앨리스와 밥의 카드를 순서대로 뽑고, 추가하는 순서는 밥, 앨리스 순서대로 추가하는 것이다. <br>쉽게 앞의 카드 두장 뽑고 다시 뒤에 추가하는 것으로 이해해서 풀었는데, 이게 정답이었다.</p><p>문제 풀이 플로우,<br>1. nums 를 List에 넣는다. 반환용 List도 하나 선언한다.<br>2. 앨리스가 가장 작은 수 카드를 뽑는다. 뽑힌 카드는 List에서 지운다. <br>3. 밥이 가장 작은 수 카드를 뽑는다. 뽑힌 카드는 List에서 지운다. <br>4. 뽑힌 수를 밥, 앨리스 순서대로 반환용 리스트에 넣는다.<br>5. 반복을 1번에 넣은 리스트가 빌때까지 반복한다.<br>6. 최종적으로 ret List를 Array로 치환하여 Return 한다.</p><h3>정답 작성 코드 (C#)</h3><pre spellcheck="false"><code>public class Solution {
    public int[] NumberGame(int[] nums) {
        List&lt;int&gt; inList = new List&lt;int&gt;();
        List&lt;int&gt; retList = new List&lt;int&gt;();
        
        for(int i=0;i &lt; nums.Length;++i)
        {
            inList.Add(nums[i]);
        }
        
        int aliceTurn = Int32.MaxValue;
        int bobTurn = Int32.MaxValue;
        
        while(inList.Count != 0)
        {
            aliceTurn = Int32.MaxValue;
            bobTurn = Int32.MaxValue;
            
            for(int i = 0; i &lt; inList.Count; ++i)
            {
                if (aliceTurn &gt; inList[i])
                {
                    aliceTurn = inList[i];
                }
            }
            
            inList.Remove(aliceTurn);
                    
            // 앨리스의 카드선택
            
            for(int i = 0; i &lt; inList.Count; ++i)
            {
                if(bobTurn &gt; inList[i])
                {
                    bobTurn = inList[i];
                }
            }
            
            inList.Remove(bobTurn);
            // 밥의 카드선택
            
            if(bobTurn != Int32.MaxValue)
            {
                retList.Add(bobTurn);
            }
            // 밥의 카드 추가
            
            if(aliceTurn != Int32.MaxValue)
            {
                retList.Add(aliceTurn);
            }
            // 앨리스의 카드 추가
        }
        
        var ret = retList.ToArray();
        return ret;
    }
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1722489096310" alt="until-1171"><p></p>

혼자서 다시푸는 코딩테스트 준비 일지 - 8