CodingTest

<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://leetcode.com/explore/">LeetCode</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/problems/valid-parentheses/">Valid Parentheses</a></li><li>사용언어 : C#</li><li>난이도 : 하</li><li>풀이시간 : 33m</li><li>유형 : 스택, 문자열 </li></ul>Given a string&nbsp;<code spellcheck="false">s</code>&nbsp;containing just the characters&nbsp;<code spellcheck="false">'('</code>,&nbsp;<code spellcheck="false">')'</code>,&nbsp;<code spellcheck="false">'{'</code>,&nbsp;<code spellcheck="false">'}'</code>,&nbsp;<code spellcheck="false">'['</code>&nbsp;and&nbsp;<code spellcheck="false">']'</code>, determine if the input string is valid.An input string is valid if:<ol><li>Open brackets must be closed by the same type of brackets.</li><li>Open brackets must be closed in the correct order.</li><li>Every close bracket has a corresponding open bracket of the same type.</li><li></li></ol>Example 1:<pre spellcheck="false"><code>Input: s = "()"
Output: true
</code></pre>Example 2:<pre spellcheck="false"><code>Input: s = "()[]{}"
Output: true
</code></pre>Example 3:<pre spellcheck="false"><code>Input: s = "(]"
Output: false
</code></pre>&nbsp;Constraints:<ul><li><code spellcheck="false">1 &lt;= s.length &lt;= 104</code></li><li><code spellcheck="false">s</code>&nbsp;consists of parentheses only&nbsp;<code spellcheck="false">'()[]{}'</code>.</li></ul><h3>문제 풀이 접근</h3>이 문제는, 여러 케이스를 생각해서 이렇게 풀었는데, 케이스 바로나왔으면 10분만에 풀었을 것 같다. 헷갈렸던 점은, 1. '(' 가 나오면 무조건 뒤에 ')' 나오도록 하는가? 2. 속괄호가 없을까? [()] 이런거.. 1,2번이 모두 참이고 맞다면 문제는 10분도 필요없다 5분컷인데, s[index] ,s[index+1] 해서 비교하면 되는거라.. 해보니까 속괄호도 있고, 처음에 닫힌 브라킷으로 주는 경우도 있고해서 여러 예외가 필요했다.문제 해결 플로우는, 1. 여는 브라킷 ' ( ' , ' [ ' , ' { ' 등이 나오면 Stack에 Push한다. 2. 이후 닫는 브라킷 ' ) ' , ' ] ' , ' } ' 이 나오면 Peek 으로 체크하고 Pop 한다. 3. 이 모든 과정을 수행해서 짝이 맞는다면 Stack 은 비어있는게 정상. 남아있다면 어딘가 닫히는게 없거나, 열리는게 없는데 닫히는 문자를 가져오거나 둘중하나. 고로 false 다.<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/1722400493650" alt="until-1157"><h3>1,2 번 가설 테스트 코드 (C#) - 실패</h3><pre spellcheck="false"><code>public class Solution {
 public bool IsValid(string s) {

 for(int i = 0; i &lt; s.Length-1; ++i)
 {
 var elem = s[i];
 var elemNext = s[i+1];
 
 if((elem == '(') &amp;&amp; (elemNext == ')') == false)
 return false;
 
 if((elem == '[') &amp;&amp; (elemNext == ']') == false)
 return false;
 
 if((elem == '{') &amp;&amp; (elemNext == '}') == false)
 return false;
 }
 
 return true;
 }
}</code></pre><img src="https://image.until.blog/sin0105/article/1722400531315" alt="until-1158">

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

코딩테스트 준비 - Valid Parentheses

<h1>Sidebar 개발</h1><ol class="tight" data-tight="true"><li>구글에서 <code spellcheck="false">shadcn-ui</code> 로 사이드바 개발하는 방법을 검색</li><li>검색 결과에 있는 유튜브 튜토리얼 영상 시청</li><li>유튜버가 <code spellcheck="false">command</code> 컴포넌트를 사용하는 것을 발견 <ol class="tight" data-tight="true"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.youtube.com/watch?v=mju7e6Cf6Nk">https://www.youtube.com/watch?v=mju7e6Cf6Nk</a></li></ol></li><li><code spellcheck="false">npx shadcn-ui add command</code> 명령어 실행</li><li><code spellcheck="false">pakcage.json</code> 에 <code spellcheck="false">cmdk</code> 라는 라이브러리가 설치되는 것을 확인<pre spellcheck="false"><code>import { Command as CommandPrimitive } from "cmdk"</code></pre></li><li><code spellcheck="false">cmdk</code> 라이브러리에 대해서 조사</li></ol><ol class="tight" data-tight="true"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/pacocoursey/cmdk">https://github.com/pacocoursey/cmdk</a></li><li>맥에서 Command + k 키 누르면 모달로 뜨는 검색창 라이브러리</li><li>사용방법은 위 깃허브 링크에서 확인</li><li>Command + K 키를 눌렀을때 검색창이 뜨게 하는 기능을 구현하려면 <code spellcheck="false">keydown</code> 이벤트 감지가 필요하다는 것을 알게됨</li><li>위 링크에는 자바스크립트 코드라서 타입 정의에 대한 안내가 없음</li><li>처음에는 <code spellcheck="false">e</code> 타입이 <code spellcheck="false">React.KeyboardEvent</code> 인줄 알았음</li><li>하지만 그렇게 하면 타입 에러가 발생</li><li>그냥 <code spellcheck="false">KeyboardEvent</code> 타입을 사용해야함<pre spellcheck="false"><code class="language-typescript"> React.useEffect(() =&gt; {
 const down = (e: KeyboardEvent) =&gt; {
 if (e.key === "k" &amp;&amp; (e.metaKey || e.ctrlKey)) {
 e.preventDefault();
 setOpen((open) =&gt; !open);
 }
 };

 document.addEventListener("keydown", down);
 return () =&gt; document.removeEventListener("keydown", down);
 }, []);
</code></pre></li><li> <code spellcheck="false">React.KeyboardEvent</code> 와 <code spellcheck="false">KeyboardEvent</code> 는 다른 타입<ol class="tight" data-tight="true"><li> <code spellcheck="false">React.KeyboardEvent</code> 가 내부적으로 <code spellcheck="false">NativeKeyboardEvent</code> <code spellcheck="false">KeyboardEvent</code> 타입을 상속하고 있지만 제네릭으로 사용하고 있어서 순수 <code spellcheck="false">KeyboardEvent</code> 타입과 같지는 않음</li></ol></li><li><code spellcheck="false">CommandDialog</code> 컴포넌트가 모달 역할 수행<pre spellcheck="false"><code class="language-typescript">&lt;CommandDialog open={open} onOpenChange={setOpen}&gt;</code></pre><ol class="tight" data-tight="true"><li><code spellcheck="false">Dialog</code> 컴포넌트는 현재 사용중이지 않으므로</li><li><code spellcheck="false">components/ui/dialog.tsx</code> 파일 제거하고 <code spellcheck="false">components/ui/command.tsx</code> 파일에서 <code spellcheck="false">Dialog</code> 관련 코드는 모두 제거</li></ol></li><li>사이드바 UI 구축<img src="https://image.until.blog/artemismars2/article/1718214780466" alt="until-473"></li></ol>

Sidebar 개발구글에서 shadcn-ui 로 사이드바 개발하는 방법을 검색검색 결과에 있는 유튜브 튜토리얼 영상 시청유튜버가 command 컴포넌트를 사용하는 것을 발견 https://www.youtube.com/watch?v=mju7e6Cf6Nknpx shadcn-ui add command 명령어 실행pakcage.json 에 cmdk 라는 라이브러리

Next.js 개발 일지 D1

최근에 브라우저 렌더링에 관심이 생겨 조사를 진행해보았다.조사 결과 흥미로운 점들을 발견할 수 있었다.브라우저 렌더링 엔진들이 독자적으로 개발되어 존재하는게 아니라 서로 관련있다는 부분이었다.<h1>CHROME</h1>크롬은 BLINK 엔진을 사용한다. 이 엔진은 구글에서 WEBKIT 엔진을 포킹하여 일부 개선한다음 내놓은 엔진이라고 한다. WEBKIT 엔진은 애플의 사파리 브라우저에서 사용하는 엔진이다. 이 WEBKIT 엔진은 리눅스 OS 중 하나인 KDE 프로젝트의 브라우저에 사용된 엔진인 KHTML의 포킹 버전이라고 한다.<code spellcheck="false">KHTML</code> -&gt; <code spellcheck="false">WEBKIT</code> -&gt; <code spellcheck="false">BLINK</code> 순으로 포킹되었다는 것을 알 수 있었다.BLINK 렌더링 엔진은 크로미움 프로젝트의 일부로 크로미움을 이용하여 개발된 웹브라우저의 경우 블링크를 사용하고 있다.<h1>EDGE</h1>엣지 브라우저는 기존에는 전용 렌더링 엔진을 사용했지만 지금은 BLINK 엔진을 사용한다.<h1>FIREFOX</h1>파이어폭스는 모질라에서 만든 브라우저로 렌더링 엔진의 원형은 넷스케이프에서 만든 네비게이터 브라우저에서 개발한 렌더링 엔진이라고 한다.이름은 GECKO 엔진이며 대략 1990년대 후반부터 현재까지 사용되고 있는 렌더링 엔진이다.<h1>크로미움 특징</h1><h3>멀티 프로세스 아키텍처</h3>크롬 브라우저는 하나의 메인 프로세스와 렌더러 프로세스 여러개로 구성되어있고 기타 프로세스들도 존재한다고 한다. 메인 프로세스는 브라우저에서 웹페이지 뷰포트 제외한 부분의 기능들이 실행되고 뷰포트는 렌더러 프로세스가 처리한다.BLINK는 크롬의 렌더링 엔진으로 렌더러 프로세스 내에서 실행된다고 한다.보통 크롬 브라우저의 한 탭마다 하나의 렌더러 프로세스가 할당된다. 그래서 하나의 탭에서 문제가 생긴 경우 다른 탭들이 안전하다고 한다.BLINK 엔진 참조: https://www.chromium.org/blink/