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

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

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

CodingTest

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

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

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

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

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

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

Experience

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

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

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

<h1>Swagger UI란 무엇인가?</h1><blockquote>Swagger UI는 Swagger의 라이브러리 중 API Documentation, API 명세와 관련된 기능을 제공하는 라이브러리이다.</blockquote>쉽게 말하자면 API 자동 시각화이다. 아마 Swagger에 대해서 들어보지 못한 사람들도 얼추 이 비슷한 화면을 본 적은 있을 것이다.<img src="https://image.until.blog/brightdawn/article/1720425986318" alt="until-770">이게 Swagger-ui를 통해서 만들어진 화면이다. 딱 Swagger-ui 세팅만 해주고 내가 필요한 컨트롤러를 넣어주기만 하면 알아서 만들어준다.<h1>그런데 왜 하필 Spring boot 3.1.3인가?</h1>Swagger를 사용하기 위해 찾아보면 대다수의 글들은 이렇게 말할 것이다.gradle을 사용하고 있다면 아래 코드를 통해서 의존성 추가를 하세요!<code spellcheck="false">implementation 'io.springfox:springfox-boot-starter:3.0.0'</code> 맞는 이야기다. 맞는 이야기인데, Spring boot 3.1.3을 쓰고 있는 사람과 나에게는 맞는 이야기'였'다. 과거형이란 소리다. springfox는 Spring boot 3.xx를 지원하지 않는다. 이대로 코드를 실행시키면, 아니 실행 전에 일단 gradle부터 리로드 하는 순간 오류를 발산해준다.일단 빨간색으로 <code spellcheck="false">build failed</code>부터 시작해서 이대로 코드 실행하는 순간 아래와 같은 오류를 뱉어준다. 갑자기 <code spellcheck="false">HttpServletRequest</code>를 찾을 수 없다느니 뭐라느니...<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><h2>그럼 Spring 3.1.3은 Swagger-ui를 포기해야하는가?</h2><blockquote>하늘이 무너져도 솟아날 구멍은 있다. 이런 API 명세 날로 먹기 기능을 사람들이 포기했을 리가 없다.</blockquote>열심히 찾아본 결과, 우리는 springfox의 버림을 받은 대신, <code spellcheck="false">springdoc-openapi</code>를 사용해주면 된다는 사실을 알 수 있었다. <hr><h1>Swagger-ui 적용하기</h1><h2>환경내역</h2><blockquote>먼저 내가 사용하고 있는 환경은 다음과 같다. Java 버전 17, Spring boot 3.1.3, 개발 툴 IntelliJ, Spring Security 적용 중, gradle 기반.</blockquote><h2>의존성 추가</h2>우리가 써온 모든 것들이 그래왔듯이 의존성 추가를 해주어야 한다. 아래 코드를 <code spellcheck="false">build.gradle</code>파일의 dependencies 블록에 넣어주자. 그리고 gradle을 refresh 해주는 것을 잊지 말자.<pre spellcheck="false"><code>implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.2.0' </code></pre><h2>SwaggerConfig 파일 세팅</h2><code spellcheck="false">SwaggerConfig</code> 파일을 만들 건데, 나의 경우에는 내가 사용하고 있는 패키지의 기본 패키지에 <code spellcheck="false">config</code>폴더를 만들어서 그 안에 넣어주었다. <code spellcheck="false">SwaggerConfig.java</code>클래스 파일을 만들어주면 된다.<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>위 내용을 참고하여 필요한 것이 있다면 더 추가해주면 된다. <h2>여기까지 하고서 실행했는데 안 되는데요?</h2>당신도 나와 같은 Spring Security를 사용하고 있는 모양이다. 보안상에는 좋다지만 개발하는 입장에서는 불편하기 그지없다. <s>하지만 보안이 우선인데 어쩌겠는가</s>이미 <code spellcheck="false">SecuiryConfig</code> 파일이 존재할텐데, 그 안에다가 아래와 같이 연결해서 넣어주자.<pre spellcheck="false"><code>.requestMatchers(new AntPathRequestMatcher("/swagger-ui/**")).permitAll()
.requestMatchers(new AntPathRequestMatcher("/v3/api-docs/**")).permitAll()</code></pre>어디에 넣어야 할지 감이 안 잡히는 사람들을 위해 import를 제외한 전체 내용 역시 공유하겠다.<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>나는 <code spellcheck="false">csrf</code> 관련 문제도 생겨서 저렇게 추가 처리 해주었다.<h2>확인하기</h2>위와 같은 단계를 거친 후에, 아래와 같이 링크에 접속해보자.<code spellcheck="false">http://localhost:8080/swagger-ui/index.html#/컨트롤러명</code> <img src="https://image.until.blog/brightdawn/article/1720428603376" alt="until-772">그럼 위와 같은 사이트에 접속할 수 있다. 아주 익숙한 사이트다.

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

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

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li>응시 사이트 :<a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/"> LeetCode</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/problems/minimum-number-game/">Minimum Number Game</a></li><li>사용언어 : C#</li><li>난이도 : 최하</li><li>풀이시간 : 9m</li><li>유형 : 배열, 리스트</li></ul>You are given a 0-indexed integer array <code spellcheck="false">nums</code> of even 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:<ul><li>Every round, first Alice will remove the minimum element from <code spellcheck="false">nums</code>, and then Bob does the same.</li><li>Now, first Bob will append the removed element in the array <code spellcheck="false">arr</code>, and then Alice does the same.</li><li>The game continues until <code spellcheck="false">nums</code> becomes empty.</li></ul>Return the resulting array <code spellcheck="false">arr</code>.Example 1:<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>Example 2:<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>&nbsp;Constraints:<ul><li><code spellcheck="false">2 &lt;= nums.length &lt;= 100</code></li><li><code spellcheck="false">1 &lt;= nums[i] &lt;= 100</code></li><li><code spellcheck="false">nums.length % 2 == 0</code></li></ul><h3>문제 풀이 접근</h3>이 문제는, 앨리스와 밥의 카드를 순서대로 뽑고, 추가하는 순서는 밥, 앨리스 순서대로 추가하는 것이다. 쉽게 앞의 카드 두장 뽑고 다시 뒤에 추가하는 것으로 이해해서 풀었는데, 이게 정답이었다.문제 풀이 플로우, 1. nums 를 List에 넣는다. 반환용 List도 하나 선언한다. 2. 앨리스가 가장 작은 수 카드를 뽑는다. 뽑힌 카드는 List에서 지운다. 3. 밥이 가장 작은 수 카드를 뽑는다. 뽑힌 카드는 List에서 지운다. 4. 뽑힌 수를 밥, 앨리스 순서대로 반환용 리스트에 넣는다. 5. 반복을 1번에 넣은 리스트가 빌때까지 반복한다. 6. 최종적으로 ret List를 Array로 치환하여 Return 한다.<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">

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

코딩테스트 준비 - Minimum Number Game

MakeGame

2323

<h1>Eclipse</h1><blockquote>자바를 비롯한 다양한 언어를 지원하는 프로그래밍 통합 개발 환경이자 프로그래밍 도구</blockquote><hr><h1>JDBC</h1><blockquote>자바에서 데이터베이스에 접속할 수 있도록 하는 자바 API</blockquote><hr><h1>Apache Tomcat</h1><blockquote>아파치 소프트웨어 재단에서 개발한 서블릿 컨테이너(혹은 웹 컨테이너)만 있는 웹 애플리케이션 서버</blockquote><hr><h1>문제점</h1><ol class="tight" data-tight="true"><li>JDBC 드라이버 연결 문제 발생</li><li>찾을 수 없는 경로 에러로 발전</li><li>tomcat server가 multiple로 시작하는 에러를 발생 시킴</li><li><code spellcheck="false">The import java.util.List cannot be resolved</code></li></ol><h2>문제 발생 시 사용 환경</h2>eclipse, Maven Project, JDBC, Tomcat server, chrome 등.<hr><h1>해결 방법</h1><h2>1. 문제가 발생했고, 우리는 고쳐쓰기보다 새로쓰기를 합시다.</h2><code spellcheck="false">.metadata</code> 파일을 삭제한다.<code spellcheck="false">.metadata</code> 파일은 이클립스의 설정이 들어있는 폴더인데 여기서 꼬여서 발생하는 문제로 JDBC 드라이버를 연결하지 못한다는 경우가 많다.<h3>새로 설정하기 귀찮은데 다른 사람의 .metadata 파일을 받아오면 안 되나요?</h3>사용자 명부터 시작해서 전부 동일하다면 상관 없다. 아니라면 오히려 시간이 더 걸리니 차라리 새로 설정하는 게 빠르다.<h2>2. 새로쓰기를 했더니 새로운 문제가?</h2>가장 먼저 내가 쓰던 설정을 그대로 해주었는지 다시 잘 생각해보자.<code spellcheck="false">톰캣</code>이 연결이 덜 되었거나, <code spellcheck="false">build path</code>나 <code spellcheck="false">java의 버전</code>등에 문제가 있을 것이다. 주로 이는 <code spellcheck="false">project</code>의 <code spellcheck="false">propertis</code>에서 일어나고, 해결할 수 있는 문제이니 <code spellcheck="false">propertis</code>를 열심히 뒤적여보자.<h2>3. multiple?</h2>전부 읽지 않아도 multiple 하는 톰캣 서버 에러가 생기는 순간 무언가 두 개가 인식된 것이다.기본 프로젝트 파일 아래에 <code spellcheck="false">servers</code>라는 파일이 있다. 그 안에는 <code spellcheck="false">Tomcat 버전 Server...</code> 파일이 있고, 그 안에 <code spellcheck="false">server.xml</code>을 확인하자. 내용이 길지만 전부 확인할 필요는 없고 마지막 줄 근처에 무언가 길고 <code spellcheck="false">거의 똑같은</code> 내용의 <code spellcheck="false">context</code> 태그 안에 담긴 내용이 2개임을 알 수 있다. <code spellcheck="false">둘 중 하나를 삭제</code>하자.<h2>4. <code spellcheck="false">The import java.util.List cannot be resolved...</code></h2>위 에러만 뜬 경우에는 <code spellcheck="false">JRE</code>의 연결이 끊어진 것이니 다른 것을 건드리지 않고 <code spellcheck="false">JRE</code>만 연결해주면 된다.프로젝트의 <code spellcheck="false">propertis</code>의 <code spellcheck="false">Java Build Path</code>로 들어가자. 거기서 라이브러리에 내가 사용하는 자바의 버전이 제대로 들어가 있는지 확인하자.<h2>5. 이것도 저것도 안 되는데 어떻게 해야 할까?</h2>처음부터 다시 시작하는 방법이 제일이다. 뭔가 내부적으로 꼬였는데 코드 문제가 아니라면... 더 많은 작업을 하기 전에 다시 하는 게 낫다. 그냥 코드만 백업해두고 아예 처음부터 세팅하자.

이클립스가 나에게 준 시련들...

[Eclipse] JDBC, Tomcat server 연관 오류

Java 기술면접

자바 개발자라면 면접 때 단골 질문인데, 항상 머리로는 이해하고 있어도 막상 대답하려고 하면 망설이게 되는 경우가 많죠..ㅎㅎ 덕분에 다시 한번 복습할 수 있어서 감사합니다! :)

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li>응시 사이트 :<a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/"> LeetCode</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/problems/smallest-number-in-infinite-set/">Smallest Number in Infinite Set</a></li><li>사용언어 : C#</li><li>난이도 : 중</li><li>풀이시간 : 35m</li><li>유형 : 정렬리스트, 클래스 구현, 우선순위 큐, 힙 </li></ul>You have a set which contains all positive integers&nbsp;<code spellcheck="false">[1, 2, 3, 4, 5, ...]</code>.Implement the&nbsp;<code spellcheck="false">SmallestInfiniteSet</code>&nbsp;class:<ul><li><code spellcheck="false">SmallestInfiniteSet()</code>&nbsp;Initializes the&nbsp;SmallestInfiniteSet&nbsp;object to contain&nbsp;all&nbsp;positive integers.</li><li><code spellcheck="false">int popSmallest()</code>&nbsp;Removes&nbsp;and returns the smallest integer contained in the infinite set.</li><li><code spellcheck="false">void addBack(int num)</code>&nbsp;Adds&nbsp;a positive integer&nbsp;<code spellcheck="false">num</code>&nbsp;back into the infinite set, if it is&nbsp;not&nbsp;already in the infinite set.</li></ul>&nbsp;Example 1:<pre spellcheck="false"><code>Input
["SmallestInfiniteSet", "addBack", "popSmallest", "popSmallest", "popSmallest", "addBack", "popSmallest", "popSmallest", "popSmallest"]
[[], [2], [], [], [], [1], [], [], []]
Output
[null, null, 1, 2, 3, null, 1, 4, 5]

Explanation
SmallestInfiniteSet smallestInfiniteSet = new SmallestInfiniteSet();
smallestInfiniteSet.addBack(2); // 2 is already in the set, so no change is made.
smallestInfiniteSet.popSmallest(); // return 1, since 1 is the smallest number, and remove it from the set.
smallestInfiniteSet.popSmallest(); // return 2, and remove it from the set.
smallestInfiniteSet.popSmallest(); // return 3, and remove it from the set.
smallestInfiniteSet.addBack(1); // 1 is added back to the set.
smallestInfiniteSet.popSmallest(); // return 1, since 1 was added back to the set and
 // is the smallest number, and remove it from the set.
smallestInfiniteSet.popSmallest(); // return 4, and remove it from the set.
smallestInfiniteSet.popSmallest(); // return 5, and remove it from the set.
</code></pre>&nbsp;Constraints:<ul><li><code spellcheck="false">1 &lt;= num &lt;= 1000</code></li><li>At most&nbsp;<code spellcheck="false">1000</code>&nbsp;calls will be made&nbsp;in total&nbsp;to&nbsp;<code spellcheck="false">popSmallest</code>&nbsp;and&nbsp;<code spellcheck="false">addBack</code>.</li></ul><h3>문제 풀이 접근</h3>이 문제는, LeetCode에서만 볼 수 있는 느낌의 유형이다. 아직까지 문제를 많이 풀어보진 않았지만, 이런 클래스 구현에 대한 문제는 LeetCode에서밖에 보지 못했다.문제를 보고 가장 첫 접근은, 리스트 만들고 서치하려고 했으나, 역시 이 문제에 대한 습득이 아직 덜 됐다고 느꼈다. 분명 최소요소를 찾고 pop하고 하는건 우선순위 큐, 힙, 정렬리스트 쪽으로 생각을 먼저했어야 됐는데, 리스트만 생각나는건 아직 경험이 부족한 것 같다. 어쨌건, 문제를 정렬리스트로 활용하여 풀었고, 크게 어려운 문제는 아니었다.이 문제의 해결 플로우, 1. 문제의 제약 조건, 1000까지 숫자를 넣기때문에, Addback 에서 미리 있다면 추가하지 않는것이 필요하다. 즉, 정렬리스트에 1000까지 모든 수를 끼워넣은 리스트를 세팅한다. 2. PopSmallList는 단순히 최소 요소를 리턴한다. 3. AddBack 은 있다면 딱히 할 것이 없다. ( 이것 때문에 1번에서 1000까지 세팅하는 것이다. )<h3>정답 작성 코드 (C#)</h3><pre spellcheck="false"><code>public class SmallestInfiniteSet {
 
 public SortedSet&lt;int&gt; sortSet;

 public SmallestInfiniteSet() {
 sortSet = new SortedSet&lt;int&gt;();
 
 for(int i = 1; i &lt;= 1000; ++i)
 sortSet.Add(i);
 
 }
 
 public int PopSmallest() {
 
 var ret = -1;
 
 if(sortSet.Count &gt; 0)
 {
 ret = sortSet.Min;
 sortSet.Remove(sortSet.Min);
 }
 
 return ret;
 }
 
 public void AddBack(int num) {
 if(sortSet.Contains(num) == true)
 return;
 
 sortSet.Add(num);
 }
}

/**
 * Your SmallestInfiniteSet object will be instantiated and called as such:
 * SmallestInfiniteSet obj = new SmallestInfiniteSet();
 * int param_1 = obj.PopSmallest();
 * obj.AddBack(num);
 */</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1722871595406" alt="until-1181">

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

코딩테스트 준비 - Smallest Number in Infinite Set

<h3>🥅 목표</h3>📝 Java 개념 Review &amp; 관련 기술 면접 질문에 대비해 보자<blockquote>(1) JVM이 뭘까요? (2) JDK, JVM, JRE 의 차이점을 말해주세요</blockquote><h3>Java의 동작구조</h3><img src="https://image.until.blog/woonideveloper423/article/1718544207971" alt="until-526">JDK, JVM, JRE 에 대해 자세히 살펴보기 전에 Java의 동작 구조를 한 번 살펴 보자<ol><li>개발자는 사람이 이해할 수 있는 언어로 소스 코드를 작성한다.(.java)</li><li>자바 컴파일러(javac.exe)가 자바 소스코드를 읽어서 가상 머신이 이해할 수 있는 바이트 코드로 변환한다.(.class)</li><li>Class Loader 를 통해 .class 파일이 JVM 메모리에 적재된다.</li><li>JVM 이 JAVA Interpreter(java.exe) 및 JIT 컴파일러 를 이용하여 바이트 코드를 실행한다.</li><li>JVM 이 메모리 관리,스레드 관리 등 런타임 환경을 제공한다.</li></ol><h3>JVM(Java Virtual Machine)이란?</h3>위 자바 코드의 동작 순서에서 JVM이 대략적으로 어떤 역할을 하는지 알 수 있었다. JVM 이란 자바 가상 머신으로 자바 프로그램을 실행하기 위한 가상 컴퓨터 역할을 한다. 여기서 가장 중요한 점은 JVM은 자바와 운영 체제 사이에서 중계 역할을 하여, 자바가 플랫폼 독립적 으로 실행 가능하게 해준다는 것이다. 정리하면 다음과 같다.<ul><li>JVM 은 자바 가상 머신을 자바 바이트코드를 실행하는 플랫폼 독립적인 실행 환경을 제공한다.</li><li>JVM은 컴파일된 바이트 코드를 해당 운영 체제가 이해할 수 있는 기계어로 변환하고 실행한다.</li><li>JVM의 존재로 같은 자바 프로그램을 한 번 작성하면 어느 운영체제에서나 실행된다.(Write Once, Run Any where)</li></ul><h3>JDK&amp;JRE 와의 차이점</h3>JDK와 JRE 또한 JVM 과 마찬가지로 자바 개발 및 실행에 있어 필수적인 구성요소이다. 구조는 대략적으로 다음과 같다.<img src="https://image.until.blog/woonideveloper423/article/1718544367014" alt="until-527">JRE(Java Runtime Environment)는 자바 실행 환경으로 자바 프로그램을 실행하기 위해 필요한 JVM 과 자바 클래스 라이브러리, 그리고 다른 지원 파일들을 포함한다. JRE만으로는 Java 프로그램 실행은 가능하지만 컴파일러가 없기 떄문에 자바 프로그램 개발은 불가능하다. 정리하면 JRE는 JVM을 동작하기 위한 자바 실행 환경이라 보면 되겠다. JDK(Java Development Kit) 은 자바 개발 키트로 자바로 프로그램까지 개발하고 싶다면 JDK를 설치해야만 한다. 보통 자바를 설치한다고 할 떄 이는 JDK 를 설치한다는 뜻과 거의 동일하다. JDK는 JRE(JVM)의 기능을 포함하고 있으며 .java 파일들을 .class 파일들로 변환하는 JavaCompiler(javac) 기능이 있다. JDK는 jdb 개발 도구를 통해 디버깅 기능도 제공한다.<h3>🔚 결론</h3>자 이제 관련 면접 예상 질문을 바탕으로 정리해보자<ol><li>JVM이란? ⏩ JVM은 컴파일된 바이트 코드를 운영체제가 이해할 수 있는 기계어로 번역해 실행하는 가상 머신이다.</li><li>JDK 와 JRE의 차이점은? ⏩ JRE는 JVM을 포함하여 자바 프로그램을 실행하기 위해 필요한 자바 클래스 라이브러리, 그 밖에 다른 지원파일을 포함하는 자바 실행 환경이다. (컴파일러가 없기 때문에 오직 실행만 가능하다.) JDK는 자바 컴파일러를 포함해 자바로 프로그램을 개발하기 위해 필요한 모든 도구를 포함한 키트이다. 자바로 프로그램을 개발하려면 JDK를 설치하여야 한다.</li></ol><h3>📚 참고자료</h3><ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://wonyong-jang.github.io/java/2020/11/08/Java-JVM.html">https://wonyong-jang.github.io/java/2020/11/08/Java-JVM.html</a> </li></ul>

[Java&기술면접] JVM의 개념 및 JDK JRE 와의 차이점

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li>응시 사이트 :<a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/"> </a><a target="_blank" rel="noopener noreferrer nofollow" href="https://programmers.co.kr/">Programmers</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/1845">폰켓몬</a></li><li>사용언어 : C++</li><li>난이도 : 극하 ( Lv 0.5 )</li><li>풀이시간 : 10m 미만</li><li>유형 : 해시?</li></ul><h6>문제 설명</h6>당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다.<ol><li>첫 번째(3번), 두 번째(1번) 폰켓몬을 선택</li><li>첫 번째(3번), 세 번째(2번) 폰켓몬을 선택</li><li>첫 번째(3번), 네 번째(3번) 폰켓몬을 선택</li><li>두 번째(1번), 세 번째(2번) 폰켓몬을 선택</li><li>두 번째(1번), 네 번째(3번) 폰켓몬을 선택</li><li>세 번째(2번), 네 번째(3번) 폰켓몬을 선택</li></ol>이때, 첫 번째(3번) 폰켓몬과 네 번째(3번) 폰켓몬을 선택하는 방법은 한 종류(3번 폰켓몬 두 마리)의 폰켓몬만 가질 수 있지만, 다른 방법들은 모두 두 종류의 폰켓몬을 가질 수 있습니다. 따라서 위 예시에서 가질 수 있는 폰켓몬 종류 수의 최댓값은 2가 됩니다. 당신은 최대한 다양한 종류의 폰켓몬을 가지길 원하기 때문에, 최대한 많은 종류의 폰켓몬을 포함해서 N/2마리를 선택하려 합니다. N마리 폰켓몬의 종류 번호가 담긴 배열 nums가 매개변수로 주어질 때, N/2마리의 폰켓몬을 선택하는 방법 중, 가장 많은 종류의 폰켓몬을 선택하는 방법을 찾아, 그때의 폰켓몬 종류 번호의 개수를 return 하도록 solution 함수를 완성해주세요.<h5>제한사항</h5><ul><li>nums는 폰켓몬의 종류 번호가 담긴 1차원 배열입니다.</li><li>nums의 길이(N)는 1 이상 10,000 이하의 자연수이며, 항상 짝수로 주어집니다.</li><li>폰켓몬의 종류 번호는 1 이상 200,000 이하의 자연수로 나타냅니다.</li><li>가장 많은 종류의 폰켓몬을 선택하는 방법이 여러 가지인 경우에도, 선택할 수 있는 폰켓몬 종류 개수의 최댓값 하나만 return 하면 됩니다.</li></ul><hr><h5>입출력 예</h5>numsresult[3,1,2,3]2[3,3,3,2,2,4]3[3,3,3,2,2,2]2<h5>입출력 예 설명</h5>입출력 예 #1 문제의 예시와 같습니다.입출력 예 #2 6마리의 폰켓몬이 있으므로, 3마리의 폰켓몬을 골라야 합니다. 가장 많은 종류의 폰켓몬을 고르기 위해서는 3번 폰켓몬 한 마리, 2번 폰켓몬 한 마리, 4번 폰켓몬 한 마리를 고르면 되며, 따라서 3을 return 합니다.입출력 예 #3 6마리의 폰켓몬이 있으므로, 3마리의 폰켓몬을 골라야 합니다. 가장 많은 종류의 폰켓몬을 고르기 위해서는 3번 폰켓몬 한 마리와 2번 폰켓몬 두 마리를 고르거나, 혹은 3번 폰켓몬 두 마리와 2번 폰켓몬 한 마리를 고르면 됩니다. 따라서 최대 고를 수 있는 폰켓몬 종류의 수는 2입니다.<h3>문제 풀이 접근</h3>이 문제는, 별다른 풀이가 필요없는 문제고, 하나의 개념만 알면 된다고 생각한다. N 개의 갯수를 가진 nums 데이터가 들어오는데, 여기서 최대 몇가지를 뽑을 수 있는지라는 것인데, 예를 들면, nums.size = 4인 데이터가 1,2,3,4 로 구성되어 있으면 최대로 많이 뽑을 수 있는 구성은 (1,2),(2,3),(3,4),(4,1) 와 같은 같은 종류를 뽑는 구성밖에 없다. 이럴 경우 최대 종류수는 2개이다. 하지만, 1,2,3,4 와 같이 데이터가 다양하지 않은 경우도 있을 것이다. 1,1,1,1 와 같은 경우다. 이런 경우는, 아무리 뽑아도 자리의 순서만 다를뿐 결국 뽑는 종류는 (1,1) 1종류 밖에 못뽑는다.그럼 개념은 잡힌것 같고, 이 두가지 케이스를 가지고 연산하면 된다. 최대로 내가 뽑을 수 있는 가짓수가 몇개 인지 리스트에 담는다. 있다면 담을 필요 없고, 없으면 담는다. 이 리스트의 size()는 결국 최대 뽑을 수 있는 가짓 수가 된다. 그리고, 내가 뽑을 수 있는 drawCount = N*0.5f 는 종류보다 많다면, 최대로 뽑을 수 있는 종류를 Answer에 넣어서 ret 한다.왜? 앞에 말했듯이, 내가 1,1,1,1 에서 (1, ?) 뽑았다고 할때, drawCount가 하나 있다고 해도, 결국 내가 뽑을 수 있는 선택지는(1,1)이다. 결국 내가 뽑은것에서 가질 수 있는 최대 종류의 수는 1이다. 그렇기 때문에 종류가 drawCount 보다 작다면 drawCount 는 결국 몇백번을 뽑던 종류의 보다 많이 뽑을 수 없다. 이 상황에서 결국 최대값은 종류의 수와 다르지 않다.<h3>정답 작성 코드 (C++) - 문제가 C# 지원 안한다.</h3><pre spellcheck="false"><code>#include &lt;algorithm&gt;
#include &lt;list&gt;
#include &lt;iostream&gt;

using namespace std;

int solution(vector&lt;int&gt; nums)
{
 int answer = 0;
 list&lt;int&gt; lt;
 std::list&lt;int&gt;::iterator it;
 
 for(int i = 0; i &lt; nums.size(); ++i)
 {
 int element = nums[i];
 it = std::find(lt.begin(),lt.end(),element);
 if(it == lt.end())
 {
 lt.push_back(element);
 }
 }
 
 int drawCount = nums.size() * 0.5f;
 
 if(drawCount &gt; lt.size())
 answer = lt.size();
 else
 answer = drawCount;
 
 return answer;
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1721354761693" alt="until-881">

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

코딩테스트 준비 - 폰켓몬

<h3>🥅 들어가며</h3>코딩 테스트 준비를 하다보면 배열과 관련해서 구간 합(Range Sum)에 대한 문제를 마주하게 된다.구간합이란 간단하게 말하면 배열의 특정 구간 내의 원소들의 합을 구하는 문제이다. 굳이 코딩 테스트가 아니어도 특정 기간의 통계량을 계산하는 여러 현실 문제에 대해 구간 합은 자주 쓰이는 개념이다. 이러한 구간합을 어떻게 효율적으로 구할 수 있는지 알아보자.<h3>➕ 합 배열의 개념 및 구간 합의 계산</h3>구간합을 시간 복잡도를 고려하여 가장 효율적으로 계산하는 방법은 합배열(Prefix Sum) 이다. 합배열이란 배열의 누적 합을 저장하는 배열이다. 배열 A가 {1, 2, 3, 4, 5} 라면 합배열 S는 {1, 3, 6, 10, 15} 인 식이다. 수식으로는 다음과 같다.<img src="https://image.until.blog/woonideveloper423/article/1718540749059" alt="until-512">이렇게 구한 합배열 S를 이용하여 배열 A의 구간합을 쉽게 구할 수 있다. 예를 들어 배열 A의 인덱스 (i,j)의 구간 합을 구한다 하면 0~j까지의 누적 합에서 0~(i-1)의 누적 합을 빼면 된다. 이를 합배열을 사용한 수식으로 표현하면 다음과 같다.<img src="https://image.until.blog/woonideveloper423/article/1718540793537" alt="until-513"><h3>❓합 배열을 사용해서 구간 합을 구하는 것이 왜 효율적일까?</h3>합 배열을 사용하지 않고 구간합을 계산하는 방법은 구간의 모든 원소를 직접 더하는 방법이다. 다만 이는 시간 복잡도가 O(n) 이며 구간의 크기나 구간의 합을 구하는 개수 등이 클수록 연산 시간은 이에 비례하여 늘어난다. 따라서 시간 제한을 고려한다면 적절한 방법이 아니다.<pre spellcheck="false"><code class="language-java">int rangeSum(int[] numbers, int start, int end) { // 구간 합 수동 구
 int sum = 0;
 for (int i = start; i &lt;= end; i++) { // 시간 복잡도(O(n))
 sum += numbers[i];
 }
 return sum;
}
int result = rangeSum(numbers, 2, 4); // 구간 합을 여러개 구해야 한다면 메서드를 여러 번 실행해야 함
</code></pre>따라서 다음과 같이 합배열을 생성한 후 이미 생성된 합배열의 인덱스를 사용해서 구간 합을 구하는 것이 시간 복잡도 O(1) 로 훨씬 효율적이다.<pre spellcheck="false"><code class="language-java">// 합배열 생성
int[] prefixSum = new int[numbers.length];
prefixSum[0] = numbers[0];
for (int i = 1; i &lt; numbers.length; i++) {
prefixSum[i] = prefixSum[i-1] + numbers[i];
}// 구간 합
int rangeSum(int[] prefixSum, int i, int j) {
if (i == 0) {
return prefixSum[j];
} else {
return prefixSum[j] - prefixSum[i-1]; // 합배열 사용해서 계산 -&gt; 이미 생성된 배열의 요소로 계산 하므로 시간 복잡도O(1)
}
}</code></pre><h3>📚 참고자료</h3><ul class="tight" data-tight="true"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.inflearn.com/course/%EB%91%90%EC%9E%87-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%EC%BD%94%EB%94%A9%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%9E%90%EB%B0%94/dashboard">https://www.inflearn.com/course/%EB%91%90%EC%9E%87-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%EC%BD%94%EB%94%A9%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%9E%90%EB%B0%94/dashboard</a></li></ul>

합 배열 및 구간 합 알고리즘에 대해 알아보자

[Algorithm] 합배열(Prefix Sum)과 구간 합(Range Sum)

<blockquote>본 포스팅은 <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://www.acmicpc.net/">백준 온라인 저지</a> 에서 제공하는 문제의 풀이를 비상업적 목적으로 게시하였습니다.</blockquote><h3>ℹ️ 문제 정보</h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/problem/28432">https://www.acmicpc.net/problem/28432</a><img src="https://image.until.blog/woonideveloper423/article/1718543306513" alt="until-521"><img src="https://image.until.blog/woonideveloper423/article/1718543323501" alt="until-522"><h3>🔍 문제 분석</h3><ul class="tight" data-tight="true"><li>입력받는 숫자의 개수 N이 1≤N≤100 이므로 최대 100자리의 N은 int,long 자료형으로 저장할 수 없다. 문자열 형태로 저장해야 한다.</li><li>문자열로 저장 후 각각의 문자로 분리한다. → 문자열을 문자의 배열로 분리한다.</li><li>각각의 문자를 숫자로 변환한다.</li><li>변환된 숫자들을 더한다.</li></ul><h3>🖊️ 구체화 하기</h3><ol class="tight" data-tight="true"><li>입력받은 숫자의 개수만큼 String으로 저장한다.</li><li>String으로 입력받은 값을 char[]형으로 변환한다.</li><li>인덱스 0부터 배열을 탐색하며 각 값을 정수형으로 변환하고 결과값에 더하여 누적한다.</li></ol><h3>🗒️ 의사 코드 작성</h3><ol class="tight" data-tight="true"><li>N 값 입력받기</li><li>길이 N의 숫자를 입력받아 String 변수sNum에 저장하기</li><li>sNum을 다시 char[]g형 변수 cNum에 변환하여 저장하기</li><li>int 형 변수 sum선언하기</li><li>for(cNum 길이만큼 반복하기) { 배열의 각 자릿값을 정수형으로 변환하며 sum에 더하여 누적하기 }</li><li>sum 출력</li></ol><h3>✅ 나의 정답 코드</h3><img src="https://image.until.blog/woonideveloper423/article/1718543526334" alt="until-523"><pre spellcheck="false"><code class="language-java">import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;

/* 1. N 값 입력받기
 2. 길이 N의 숫자를 입력받아 String 변수 sNum에 저장하기
 3. sNum을 다시 char[]형 변수 cNum에 변환하여 저장하기
 4. int 형 변수 sum선언하기
 5. for(cNum 길이만큼 반복하기)
 {
 배열의 각 자릿값을 정수형으로 변환하며 sum에 더하여 누적하기
 }
 6. sum 출력
 */
public class 숫자의합구하기11720 {

 public static void main(String[] args) throws IOException {

 BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
 int N = Integer.parseInt(br.readLine());
 String sNum = br.readLine();

 char[] cNum = sNum.toCharArray();
 int sum = 0;

 for (char num : cNum) {
 sum += num - '0'; // *아스키 코드 값을 이용한 문자의 숫자 변환
 }
 System.out.println(sum);
 }
}</code></pre><h3>🤔 회고</h3><ul class="tight" data-tight="true"><li>문제 분석 → 구체화 → 의사 코드 작성의 사고 순서를 앞으로도 적용해 봐야겠다.</li><li>아스키코드를 사용한 문자의 숫자 변환은 매우 빈번하게 쓰이므로 숙지해 둘 것.</li></ul><h3>📚 참고자료</h3><ul class="tight" data-tight="true"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.inflearn.com/course/%EB%91%90%EC%9E%87-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%EC%BD%94%EB%94%A9%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%9E%90%EB%B0%94/dashboard">https://www.inflearn.com/course/%EB%91%90%EC%9E%87-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%EC%BD%94%EB%94%A9%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%9E%90%EB%B0%94/dashboard</a></li></ul>

배열 관련 숫자의 합 문제를 풀어보자

[Baekjoon]숫자의 합(11720번)

- 뚱땅뚱땅 평화로운(?) 푸시알림 기능 개발 시간 -예약 발송 기능이 필요해 방법을 알아보고 있었다.어찌저찌 구글링을 통해 NestJS Task Scheduling - Dynamic timeouts에 대해 알게 되었다 !스케줄러는 이미 사용해본 경험이 있었는데(매일 @@시 ##분 마다 동작 등), 동적으로 필요에 따라 생성했다 없앴다 할 수도 있었다니 ! (문서를 끝까지 읽어본 적이 없는 사람)사용 방법은 어렵지 않아서 내가 원하는 타이밍에 푸시알림을 발송할 수 있게 되었다. 너무너무 단순하다! <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.nestjs.com/techniques/task-scheduling#dynamic-timeouts">진짜로</a>즉시 발송과 예약 발송 모두 잘 작동하는 것을 확인하고 필요한 곳 마다(6~7군데 정도) 알림 발송 코드를 때려 박았는데, 막상 이렇게 해놓고 나니 나중에 수정이 필요하거나 또 푸시알림이 필요한 곳이 생기면 같은 작업을 반복해야한다고 생각하니 좀 간지가 안나는 것 같아서 정리를 좀 하기로 했다.일단 내가 원하는 것이 무엇인가 정리<ul class="tight" data-tight="true"><li>"특정 상황"에 유저에게 푸시알림을 보내야함 (FCM 사용)</li><li>즉시발송/예약발송</li><li>현재는 6~7가지 상황이 있지만 점점 늘어날 수 있음</li><li>특별한 경우를 제외하고 어드민 페이지에서 푸시알림을 관리하고 싶음<ul class="tight" data-tight="true"><li>발송상황, 발송타이밍, 메시지 내용 관리 / 발송 내역 관리 등</li></ul></li><li>위 내용은 단일 대상에게 자동으로 보내는 알림. 다수에게 보내는 수동 알림은 따로 처리</li></ul>필요한 api 마다 푸시알림을 쏘는 코드를 심는 것 보다는 한 지점(?)에서 처리하고 싶었는데 그러기 위해선 어떤 요청이 들어왔는지 구분하고 푸시알림이 필요한 요청 및 상황인지 판단, 알맞은 대상 및 내용 구성을 할 수 있어야 했다.어떤 요청인지("특정 상황")는 요청 end point로 구분할 수 있다.발송 대상은 요청에 jwt 토큰도 있고 앱에서 오는 요청이 아닌 경우(서비스 특성 상 서버가 임베디드와도 통신 중) 식별 가능한 데이터가 함께 담겨 있어 어렵지 않았다.내용 역시 왔다갔다하는 데이터들로 충분히 구성할 수 있다.즉시발송/예약발송은 0초 뒤 발송, n초 뒤 발송 으로 설정이 가능하다.이런 점들을 바탕으로 DB를 꾸려보았다. 푸시알림을 보내길 원하는 상황과 내용을 미리 등록해둘 수 있도록.<pre spellcheck="false"><code class="language-typescript">{
 알림발송상황: "유저가 ~~한 상황";
 endPoint: "/request/endpoint";
 n밀리초뒤발송: 300000;
 푸시알림제목: "이것은";
 푸시알림내용: "name씨에게 보내는 푸시알림";
 내용에들어가는변수이름: ["name"];
 클릭시이동url: "어디어디";
}</code></pre>문제는 한 곳에서 처리하려면 과연 그 한 곳은 어디로 해야 좋을까 였다. 미들웨어, 인터셉터 등 뭔가 이것저것 알긴 아는데 정확한 작동 방식이나 그런 것을 아직 완전히 깨우치지 못한 상태라 GPT씨에게 상담 요청을 했다.위 상황들을 죽 설명하고 어쩌면 좋을지 물어보니 그(?)(그녀?) 역시 미들웨어나 인터셉터에 심을 것을 추천해주었는데, 간단한 테스트와 모든 데이터를 처리한 뒤 응답을 보내기 직전에 푸시알림을 쏘고 싶다는 추가 질문으로 인터셉터를 활용하는 것으로 확정을 지었다.이렇게 내가 원하던 대로 '한 곳' 까지 정해졌다.- 뚱땅뚱땅 코딩 타임 -그렇게 뚱땅뚱땅 코드를 작성해놓고 테스트를 하다보니 문제점들이 발견되었다.<ul class="tight" data-tight="true"><li>n시간 뒤 어떤 사람에게 발송하도록 예약해둔 메시지를 만약 그 사람이 특정 조건을 만족한 경우 예약을 취소해야 함</li><li>예약을 해둔 메시지들이 만약 서버가 재시작되면 스케줄러가 초기화되면서 사라짐</li></ul>여러 고민과 GPT씨와의 상담 끝에 두 가지 문제점 모두 스케줄러와 DB를 함께 활용해 해결할 수 있다는 결론을 내렸다.첫번째 문제는 고유한 예약 번호와 함께 푸시알림 내역을 저장해뒀다가 원하는 상황에 예약을 취소할 수 있도록 했다. 예약을 취소하게 되는 상황은 당장에는 한가지 상황 뿐이라 중앙처리 말고 해당 api에서 하도록 했다.나중에 조금 더 발전시킬 필요가 있을 것 같다.두번째 문제는 발송 상태[발송완료/발송예약/발송취소]를 함께 저장해뒀다가 <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.nestjs.com/fundamentals/lifecycle-events">OnApplicationBootstrap</a>을 사용해 서버가 재시작될 때 발송예약 상태인 메시지들을 다시 스케줄러에 집어넣어주도록 했다.어차피 발송 내역을 저장하기로 해서 DB도 이미 구성해뒀기 때문에 몇 개의 필드만 더 추가하면서 사건을 해결할 수 있었다.대략적인 형태<pre spellcheck="false"><code class="language-typescript">import { Injectable, OnApplicationBootstrap } from '@nestjs/common';
import { firebaseAdmin } from 'src/config/firebase.config';
import { SchedulerRegistry } from '@nestjs/schedule';
@Injectable()
export class PushMessageService implements OnApplicationBootstrap {
	constructor(private readonly schedulerRegistry: SchedulerRegistry) {}
async onApplicationBootstrap() {
	// 발송예약 상태인 메시지들을 다시 스케줄러에 등록
}

async fcmSendMessage(message, sendAfterMilliSeconds, timeoutName, history) {
	const timeout = setTimeout(async () =&amp;gt; {
		await firebaseAdmin
			.messaging()
			.sendEachForMulticast(message)
			.then((res) =&amp;gt; {
				console.log('success: ', res);
		})
		.catch((err) =&amp;gt; {
			console.log('error: ', err);
		}); 
 	// history(발송내역)를 사용해 에약발송인 경우 발송예약 &amp;amp;gt; 발송완료로 업데이트
 	// ~ code ~
	
 	// 발송한 뒤에 스케줄러에서 삭제
		this.schedulerRegistry.deleteTimeout(timeoutName);
		}, sendAfterMilliSeconds);
	this.schedulerRegistry.addTimeout(timeoutName, timeout);
}

async sendAutoPushMessage(endPoint) {
	// 인터셉터에서 호출해 사용
	// 푸시알림 보낼지 말지 판단 후 내용 구성해 발송 예약
}}</code></pre>이런식으로 구현을 해놓았지만 솔직히 지금도 마음에 썩 들지는 않아서 계속 고민 중이다. 조금 더 깔끔하게 할 수 있을 것 같은데 막 아이디어가 떠오르지는 않아서 다른거 할 거 하면서 계속 지켜보는 중이다..

푸시알림 날리기

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li>응시 사이트 :<a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/"> </a><a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/challenges?order=recent">Programmers</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/12909?language=csharp">올바른 괄호</a></li><li>사용언어 : C#</li><li>난이도 : 최하</li><li>풀이시간 : 이전 문제랑 똑같은 유형, <a target="_blank" rel="noopener noreferrer nofollow" href="https://until.blog/@sin0105/%EC%BD%94%EB%94%A9%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%A4%80%EB%B9%84---%EA%B8%B0%EB%8A%A5-%EA%B0%9C%EB%B0%9C-i67t26g3">링크</a></li><li>유형 : 스택, 문자열</li></ul><h6>문제 설명</h6>괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어<ul><li>"()()" 또는 "(())()" 는 올바른 괄호입니다.</li><li>")()(" 또는 "(()(" 는 올바르지 않은 괄호입니다.</li></ul>'(' 또는 ')' 로만 이루어진 문자열 s가 주어졌을 때, 문자열 s가 올바른 괄호이면 true를 return 하고, 올바르지 않은 괄호이면 false를 return 하는 solution 함수를 완성해 주세요.<h5>제한사항</h5><ul><li>문자열 s의 길이 : 100,000 이하의 자연수</li><li>문자열 s는 '(' 또는 ')' 로만 이루어져 있습니다.</li></ul><hr><h5>입출력 예</h5>sanswer"()()"true"(())()"true")()("false"(()("false<h5>입출력 예 설명</h5>입출력 예 #1,2,3,4 문제의 예시와 같습니다.<h3>문제 풀이 접근</h3>이 문제는, 보자마자 이전에 풀었던 문제랑 동일한 문제로 판단하여 이전에 풀었던 코드를 그대로 넣어서 패스했다. 코드 동일하게 넣어서 패스했고, 관련 코드와 완료 사진만 첨부. <a target="_blank" rel="noopener noreferrer nofollow" href="https://until.blog/@sin0105/%EC%BD%94%EB%94%A9%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%A4%80%EB%B9%84---%EA%B8%B0%EB%8A%A5-%EA%B0%9C%EB%B0%9C-i67t26g3">링크</a><h3>정답 작성 코드 (C#)</h3><pre spellcheck="false"><code>using System.Collections.Generic;

public class Solution {
 public bool IsValid(string s)
 {
 bool answer = false;
 Stack&lt;Char&gt; st = new Stack&lt;Char&gt;();

 if ((s.Length == 0) || (s[0] == ')') || (s[0] == '}') || (s[0] == ']'))
 return false;


 for (int i = 0; i &lt; s.Length; ++i)
 {
 var elem = s[i];

 if (elem == '(' || elem == '{' || elem == '[')
 {
 st.Push(elem);
 continue;
 }

 if (elem == ')' || elem == '}' || elem == ']')
 {
 char sElem;

 if(st.Count == 0)
 st.Push(elem);

 sElem = st.Peek();

 if (sElem == '(' &amp;&amp; elem == ')')
 {
 st.Pop();
 continue;
 }

 if (sElem == '[' &amp;&amp; elem == ']')
 {
 st.Pop();
 continue;
 }

 if (sElem == '{' &amp;&amp; elem == '}')
 {
 st.Pop();
 continue;
 }

 break;
 }
 }

 answer = st.Count == 0 ? true : false;

 return answer;
 }
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1722482945818" alt="until-1170">

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

코딩테스트 준비 - 올바른 괄호

요즘 같이 신입들이 설 자리가 굉장히 없는 각박한 시기에, 얼마 전 운이 좋게 신입으로 게임 회사에 면접을 보게 되었습니다 🤣🤣🤣그런데 면접 중 다음과 같은 질문을 받을 수 있었는데, ‘포트폴리오를 확인해 보면 스프링 부트를 주로 사용해 왔는데, 스프링 부트는 보통 내장되어 있는 웹 서버로 Tomcat을 사용하는데도 불구하고 Nginx를 사용한 이유가 있을까요?’이러한 질문을 주셨는데 당시 많이 긴장되어 있는 상황이기도 하였고, 당장 생각나는 것은"저희가 프로젝트 환경상, EC2 한 대에서 프론트엔드와 백엔드를 함께 배포해야 하는 상황이었습니다. 따라서 하나의 도메인으로 모든 요청과 응답이 이루어지는데, 요청이 들어올 때 리버스 프록시 기능을 사용하기 위해 Nginx가 필요하기도 하였고, 보안적인 측면에서도 HTTPS를 사용해야 하기 때문에 Nginx를 사용했습니다."지금은 글로 작성하니까 나름 그럴싸하게 작성했지만, 실제로 대답할 때는 조금 어색하게 표현한 것 같아 후회가 듭니다.😅면접을 볼 때에는 당장 생각나는 것이 이것밖에 없었지만, 뒤늦게 면접관님의 의도를 떠올릴 수 있었습니다. 아마도 Nginx를 사용한 이유, 즉 웹 서버(WS)와 웹 애플리케이션 서버(WAS)의 차이점을 분명하게 이해하고 사용한 것인지를 물어보려고 하셨던 게 아닐까 하는 생각이 들었습니다.그래서 이제는 비슷한 질문을 받더라도 더 이상 실수하지 않게 다시 한 번 학습하고 리마인드를 해보려고 합니다.<hr>웹 서버(Web Server)는 웹 클라이언트(예: 웹 브라우저)로부터 HTTP 요청을 받아 정적 콘텐츠(HTML, CSS, JavaScript, 이미지 등)를 제공하는 소프트웨어입니다.<h2>웹 서버의 주요 역할</h2><h3>주요 기능</h3><ol><li>정적 콘텐츠 제공:<ul><li>HTML, CSS, JavaScript 파일 및 이미지 등과 같은 정적 파일을 클라이언트에 제공합니다. Q. 프론트엔드, 백엔드가 구분되어 사용되는 것이 보통입니다. HTML, CSS, JS 파일은 웹 서버에서 언제 어떤 상황에서 클라이언트에게 제공되는가 ? <ul><li>상황: 사용자가 웹 브라우저를 통해 특정 웹 페이지를 요청하는 경우<ul><li>사용자가 브라우저에서 <code spellcheck="false">http://example.com</code>을 입력하면, 브라우저는 해당 URL에 대한 HTTP 요청을 웹 서버로 보냅니다.</li><li>웹 서버(ex. Nginx)는 요청된 URL을 기반으로 적절한 파일을 찾아 클라이언트에 반환합니다. 여기서 정적 파일 제공이 이루어집니다.</li><li>예를 들어, Nginx와 같은 웹 서버가 <code spellcheck="false">/usr/share/nginx/html</code> 디렉토리에 웹페이지 파일을 저장하고 있다면, 다음과 같은 과정이 진행됩니다:<ul><li>사용자가 <code spellcheck="false">http://example.com/index.html</code>을 요청합니다.</li><li>웹 서버는 요청된 파일 경로를 확인하고, <code spellcheck="false">/var/www/html/index.html</code> 파일을 찾아 응답으로 반환합니다.</li></ul></li><li>HTML 파일 반환: 웹 서버는 <code spellcheck="false">index.html</code> 파일을 클라이언트(브라우저)에 반환합니다. 브라우저는 HTML 파일을 파싱하여 페이지의 기본 구조를 렌더링합니다.</li><li>CSS와 JavaScript 파일 요청: HTML 파일이 로드되면서, 페이지 내에 포함된 CSS 및 JavaScript 파일에 대한 추가 요청이 발생합니다. 예를 들어, HTML 파일에 다음과 같은 링크가 포함되어 있을 수 있습니다:<pre spellcheck="false"><code class="language-html">&lt;link rel="stylesheet" href="styles.css"&gt;
&lt;script src="app.js"&gt;&lt;/script&gt;</code></pre><ul><li>브라우저는 <code spellcheck="false">styles.css</code>와 <code spellcheck="false">app.js</code> 파일을 추가로 요청합니다.</li><li>웹 서버는 동일한 방식으로 이 파일들을 찾아 클라이언트에 반환합니다. </li></ul></li></ul></li><li>구체적인 예시사용자가 <code spellcheck="false">http://example.com</code>에 접속하면 다음과 같은 요청과 응답 흐름이 발생합니다:<ol><li>브라우저 요청: <code spellcheck="false">GET /index.html</code></li><li>웹 서버 응답: <code spellcheck="false">/var/www/html/index.html</code> 파일 반환</li><li>브라우저 요청: <code spellcheck="false">GET /styles.css</code></li><li>웹 서버 응답: <code spellcheck="false">/var/www/html/styles.css</code> 파일 반환</li><li>브라우저 요청: <code spellcheck="false">GET /app.js</code></li><li>웹 서버 응답: <code spellcheck="false">/var/www/html/app.js</code> 파일 반환 </li></ol></li></ul>이 과정을 통해 사용자는 웹 페이지를 볼 수 있게 되며, CSS로 스타일링된 페이지와 JavaScript로 동작하는 기능을 사용할 수 있게 됩니다. </li></ul></li><li>HTTP 요청 처리 및 응답:<ul><li>클라이언트의 HTTP 요청을 처리하고, 적절한 응답을 생성하여 반환합니다. </li></ul></li><li>URL 매핑 및 라우팅:<ul><li>요청 URL을 기반으로 적절한 파일이나 서비스로 요청을 라우팅합니다. 이는 리버스 프록시의 역할로, 클라이언트의 요청을 받아 적합한 백엔드 서버로 전달하고 결과를 다시 클라이언트에게 반환합니다. </li></ul></li><li>로드 밸런싱:<ul><li>여러 서버 간에 트래픽을 분산시켜 고가용성을 유지하고 성능을 향상시킵니다. </li></ul></li><li>보안 기능:<ul><li>SSL/TLS를 통한 데이터 암호화, IP 필터링, 사용자 인증 등 다양한 보안 기능을 제공합니다.</li></ul></li></ol><h3>웹 서버의 예시</h3><ul><li>Apache HTTP Server:<ul><li>오픈 소스 웹 서버로, 다양한 플랫폼에서 사용되며, 매우 널리 사용됩니다.</li></ul></li><li>Nginx:<ul><li>고성능 웹 서버로, 특히 높은 동시 연결 수를 처리할 수 있어 정적 파일 제공 및 리버스 프록시로 자주 사용됩니다.</li></ul></li></ul><hr>웹 애플리케이션 서버(Web Application Server, WAS)는 웹 서버와는 달리, 동적 콘텐츠를 생성하고 웹 애플리케이션의 비즈니스 로직을 처리하는 소프트웨어입니다. WAS는 클라이언트의 요청을 받아들여 데이터베이스와 상호 작용하고, 그 결과를 동적 웹 페이지 형태로 클라이언트에 반환합니다.<h2>웹 애플리케이션 서버의 주요 역할</h2><ol><li>비즈니스 로직 처리:<ul><li>클라이언트 요청을 처리하는 비즈니스 로직을 실행합니다. 예를 들어, 사용자의 로그인, 상품 검색, 주문 처리 등의 작업을 수행합니다. → 서블릿 기반 </li></ul></li><li>동적 콘텐츠 생성:<ul><li>JSP, 서블릿, EJB 등과 같은 기술을 사용하여 동적인 웹 페이지를 생성합니다. 클라이언트의 요청에 따라 실시간으로 콘텐츠를 생성하여 응답합니다. </li></ul></li><li>데이터베이스 연동:<ul><li>데이터베이스와 상호 작용하여 데이터를 조회, 삽입, 업데이트, 삭제하는 작업을 수행합니다. 이를 통해 클라이언트가 요청한 데이터를 처리하고 반환합니다. </li></ul></li><li>세션 관리:<ul><li>사용자 세션을 관리하여 사용자 상태를 유지하고, 인증 및 권한 부여를 처리합니다. 이를 통해 사용자의 로그인 상태를 유지하거나, 사용자별로 다른 콘텐츠를 제공할 수 있습니다. </li></ul></li><li>트랜잭션 관리:<ul><li>데이터베이스 트랜잭션을 관리하여 데이터의 일관성과 무결성을 보장합니다. 여러 작업이 하나의 트랜잭션으로 묶여 일관성 있게 처리되도록 합니다. </li></ul></li></ol><h3>웹 애플리케이션 서버의 예시</h3><ul><li>Apache Tomcat:<ul><li>오픈 소스 서블릿 컨테이너로, 서블릿과 JSP 기반의 웹 애플리케이션을 실행합니다.</li></ul></li></ul><hr><h2>정리</h2><img src="https://image.until.blog/thingk0/article/1716860951310" alt="until-318"><h3>이유 1: 정적 콘텐츠 제공</h3><ul><li>Nginx는 정적 콘텐츠(예: 이미지, CSS, JavaScript 파일 등)를 매우 효율적으로 제공할 수 있습니다. 이를 통해 스프링 부트 애플리케이션이 정적 리소스를 제공하는 부담을 줄이고, 동적 콘텐츠 제공에 집중할 수 있게 합니다.<blockquote>하지만, 보통 프론트엔드와 API 서버 조합으로 많이 사용하기 때문에, 사실상 정적 콘텐츠 제공에는 큰 메리트를 느끼기 어려웠습니다. 그러나 프론트엔드가 SPA일 경우에는 매우 유용하다고 생각합니다.</blockquote></li></ul><h3>이유 2: 리버스 프록시</h3><ul><li>리버스 프록시로서 Nginx는 클라이언트 요청을 스프링 부트 애플리케이션으로 전달합니다. 이를 통해 애플리케이션 서버를 보호하고, 로드 밸런싱 및 SSL 종료(SSL termination) 등의 기능을 제공합니다.<blockquote>실제로 제가 Nginx를 사용하는 가장 주된 이유는, 보통 프로젝트를 진행할 때 서버 인스턴스를 하나만 사용할 수 있는 상황이 많아서, 어쩔 수 없이 서버 안에서 프론트엔드, 인프라, 백엔드를 모두 배포해야 했기 때문입니다.이러한 이유로 Nginx의 리버스 프록시 기능은 매우 유용하고 필요했습니다. 그래서 다행히도 면접에서 가장 먼저 떠올린 리버스 프록시를 답변할 수 있었습니다 !!</blockquote></li></ul><h3>이유 3: 로드 밸런싱</h3><ul><li>로드 밸런싱을 통해 여러 대의 스프링부트 인스턴스에 트래픽을 분산시킬 수 있습니다. 이를 통해 고가용성과 성능을 향상시킬 수 있습니다.<blockquote>면접 중 로드 밸런싱 관련 질문을 받았고, 당연히 Nginx를 통해 로드 밸런싱이 가능하다는 것은 알고 있었습니다.하지만 더 좋은 답변을 위해서는 추후에 블루-그린 배포를 적용하거나 스케일 아웃을 염두에 두었을 때, 로드 밸런싱 기능이 필요하기 때문에 Nginx가 필요하다는 답변을 떠올리지 못했다는 것이 뒤늦은 후회로 남네요..🥲</blockquote></li></ul><h3>이유 4: SSL/TLS 처리</h3><ul><li>SSL/TLS 처리를 Nginx가 담당함으로써 스프링부트 애플리케이션은 암호화된 트래픽을 직접 처리하지 않아도 되므로, 성능과 보안 측면에서 유리합니다.</li></ul><h3>이유 5: 보안</h3><ul><li>보안 설정 및 접근 제어를 Nginx 레벨에서 관리함으로써 애플리케이션의 보안성을 향상시킬 수 있습니다. IP 제한, DDoS 방어, WAF(Web Application Firewall) 등을 설정할 수 있습니다.</li></ul><h3>이유 6: 고성능</h3><ul><li>고성능의 Nginx는 적은 리소스로 많은 요청을 처리할 수 있어, 특히 많은 동시 접속이 발생하는 상황에서 유리합니다.<blockquote>“ Nginx는 비동기 이벤트 기반으로 설계되어, 적은 리소스로도 많은 수의 동시 연결을 효율적으로 처리할 수 있고 다중 워커 프로세스를 통해 병렬로 작업을 수행하여 성능을 극대화하며 메모리를 효율적으로 사용하여 더 많은 요청을 처리할 수 있습니다. "라고도 대답할 수 있다면 아마 만점짜리 답변이겠죠..?</blockquote></li></ul><hr>즉, 저는 리버스 프록시와 보안 부분에서는 어느 정도 정답에 가까운 대답을 했다고 생각해요 ! 하지만 기억을 되돌려보면, 로드 밸런싱 부분에 대해서도 잠깐 질문을 받았는데, 급히 다른 질문으로 넘어갔던 것이 아쉽고... Nginx를 통해 로드 밸런싱, 성능, 그리고 정적 콘텐츠 제공에 대해서도 답변을 할 수 있었다면 더 좋았을 것 같아요.다음에 비슷한 질문을 받는다면, 기존 답변에 보완해서 더욱 멋진 답변을 해보도록 하겠습니다. 😃

최근 게임 회사 면접에서 스프링 부트와 Nginx 사용 이유에 대한 질문을 받았습니다. 이번 포스팅에서는 웹 서버와 웹 애플리케이션 서버의 차이를 명확히 이해하고, Nginx 사용 이유를 깊이 있게 다뤄봅니다.

WAS가 있음에도 불구하고, 웹서버인 Nginx 를 사용하는 이유 - 개발자 면접 리마인드

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/">BOJ</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/problem/1312">1312.소수</a></li><li>사용언어 : C#</li><li>난이도 : 하</li><li>풀이시간 : 약 25m</li><li>유형 : 수학</li></ul><h2>문제</h2>피제수(분자) A와 제수(분모) B가 있다. 두 수를 나누었을 때, 소숫점 아래 N번째 자리수를 구하려고 한다. 예를 들어, A=3, B=4, N=1이라면, A÷B=0.75 이므로 출력 값은 7이 된다.<h2>입력</h2>첫 번째 줄에 A와 B(1 ≤ A, B ≤ 100,000), N(1 ≤ N ≤ 1,000,000)이 공백을 경계로 주어진다.<h2>출력</h2>A÷B를 했을 때, 소숫점 아래 N번째 수를 출력한다.<h2>예제 입력 1</h2><pre spellcheck="false"><code>25 7 5
</code></pre><h2>예제 출력 1</h2><pre spellcheck="false"><code>2</code></pre><h3>문제 풀이 접근</h3>이 문제는, 단순하게 a / b 한 후, mathf.pow(10,n) 해서 끌어올려서 % 10 으로 찾으면 쉽게 찾을 것처럼 생긴 문제여서, 나 또한 이렇게 접근했다. 다만, n이 상당히 높은수인 1,000,000 까지 할 수 있기 때문에, 끌어올려서 하는 방식은 애매했다.원리를 정확하게 알 수 없어 잡고 있는 것 보다 빠르게 풀고 이해하는 것이 전략적이라고 판단하여 힌트를 보고 풀었다. 힌트 : 초등과정 수학 나눗셈먼저 그림을 보면 간단한 수학 나눗셈이다. <img src="https://image.until.blog/sin0105/article/1726084591823.png" alt="until-1336">이걸 보고 만들어 낸 이 문제의 플로우는 아래와 같다. 1. 나머지 값을 10을 곱해 a 에 갱신해준다. (a = a % b * 10) 2. a / b 의 몫 값은 그 회차의 해당 자리 수 이다 . ex) n == 1 , a = 40 , mok = 5 -- 1번째 소수 자릿 수 ex) n == 2 , a = 50 , mok = 7 -- 2번째 소수 자릿 수 ex) n == 3 , a = 10 , mok = 1 -- 3번째 소수 자릿 수 등등 3. n 번째 까지 for 문을 통해 loop 하면서 가장 최근까지 입력된 mok 의 값을 그대로 출력<h3>정답 작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.Design;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices;
using System.Security.AccessControl;
using System.Security.Authentication;
using System.Security.Cryptography.X509Certificates;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Web;
using System.Xml.Linq;
using static CodingTestProj.Program;

/*
 * URL : https://www.acmicpc.net/problem/1312
 */

namespace CodingTestProj
{
 internal class Program
 {
 static void Main(string[] args)
 {
 string[] inputs = Console.ReadLine().Split(' ');

 int a = Int32.Parse(inputs[0]);
 int b = Int32.Parse(inputs[1]);
 int n = Int32.Parse(inputs[2]);

 int ret = Solution.Prog(a,b,n);
 Console.WriteLine(ret);
 }
 }

 public static class Solution
 {
 public static int Prog(int a, int b, int n)
 {
 int ret = 0;
 int mok = 0;

 for (int i = 0; i &lt; n; ++i)
 {
 a = (a % b) * 10;
 mok = (a / b);
 }

 ret = mok;
 return ret;
 }
 }
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1726084964706.png" alt="until-1337">

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