<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