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/

브라우저 렌더링 엔진

<h1>ARIA</h1><ul class="tight" data-tight="true"><li>Accessbile Rich Internet Applications 의 약자</li><li>몸이 불편한 분들이 웹 서비스 이용이 수월하도록 여러 방식을 정의해놓은 role과 attribute의 집합</li><li>자바스크립트로 만든 웹 서비스에 최적</li><li>MDN 문서에 따르면 1백만개 웹사이트를 조사한 결과 34.2%가 ARIA를 잘못 사용하여 에러가 발생. ARIA는 웹 접근성을 향상시키기 위해 존재하지만 이렇게 에러를 내뿜는 경우에는 오히려 안쓰는 것보다 더 구림<ul class="tight" data-tight="true"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://webaim.org/projects/million/#aria">https://webaim.org/projects/million/#aria</a></li></ul></li></ul><h2>role</h2><pre spellcheck="false"><code>&lt;div
 id="percent-loaded"
 role="progressbar"
 aria-valuenow="75"
 aria-valuemin="0"
 aria-valuemax="100"&gt;&lt;/div&gt;</code></pre><ul class="tight" data-tight="true"><li>위 코드에서 <code spellcheck="false">div</code> 태그는 아무런 의미를 가지지 않음</li><li><code spellcheck="false">role</code> 을 이용하여 해당 태그가 웹페이지에서 어떤 기능을 하는지 알려줌</li><li><code spellcheck="false">role</code> 을 배웠으니 주석쓰는 대신 이 <code spellcheck="false">role</code> 로 웹페이지 코드 가독성을 향상시킬 수 있지 않겠나 싶음</li></ul><h2>aria-*</h2><pre spellcheck="false"><code>&lt;div
 id="percent-loaded"
 role="progressbar"
 aria-valuenow="75"
 aria-valuemin="0"
 aria-valuemax="100"&gt;&lt;/div&gt;</code></pre><ul class="tight" data-tight="true"><li><code spellcheck="false">aria</code> 어트리뷰트는 동적으로 설정 가능</li></ul><pre spellcheck="false"><code>const progressBar = document.getElementById("percent-loaded");
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);function updateProgress(percentComplete) {
progressBar.setAttribute("aria-valuenow", percentComplete);
}</code></pre><ul class="tight" data-tight="true"><li>위 코드는 동적으로 설정하는 것을 순수 자바스크립트 코드로 구현해놓은 것인데 리액트나 넥스트로 구현하면 <code spellcheck="false">useRef</code> 훅을 사용하면 되지 않을까 싶음</li><li>MDN에서는 웹접근성 구현에 대해 assistive technology의 지원을 받아야하는 사람이든 아닌 사람이든 모두 동등하게 웹 페이지를 이용할 수 있어야 한다고 적혀있음</li></ul><pre spellcheck="false"><code class="language-markdown">&lt;progress id="percent-loaded" value="75" max="100"&gt;
75%
&lt;/progress&gt;</code></pre><ul class="tight" data-tight="true"><li><code spellcheck="false">progress</code> 라는 요소가 이미 존재하고 있으므로 <code spellcheck="false">div</code> 를 사용하여 <code spellcheck="false">role</code> 을 설정하기 보다 그냥 <code spellcheck="false">progress</code> 를 사용하는게 훨씬 간단</li><li><code spellcheck="false">min</code> 이 없는 이유는 항상 0이기 때문</li></ul><h2>시맨틱 요소</h2><ul class="tight" data-tight="true"><li>몸이 불편한 분들은 자신이 이용하는 assistive technology나 관련된 것들을 업데이트 하기를 두려워하는 경향이 있다고 함</li><li>이유는 업데이트 했을 경우에 지원되던 게 안될 수도 있기 때문</li><li>그래서 강조되는 게 가능하면 시맨틱 요소를 이용하여 웹페이지를 구성하라고 함</li><li>웹접근성은 실제 assistive technology를 통해 테스트할 것을 강조</li><li>브라우저를 통한 테스트는 불완전하기 때문</li></ul><h2>ESLint</h2><ul class="tight" data-tight="true"><li>eslint-plugin-jsx-a11y: <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.npmjs.com/package/eslint-plugin-jsx-a11y">https://www.npmjs.com/package/eslint-plugin-jsx-a11y</a></li><li>리액트 앱의 JSX의 웹 접근성을 정적 평가하는 플러그인</li><li><code spellcheck="false">aria-*</code> , <code spellcheck="false">role</code> 혹은 <code spellcheck="false">img</code> 태그의 <code spellcheck="false">alt</code> 값을 검사</li><li>실제 assistive technology를 통한 테스트를 한게 아니기 때문에 이 플러그인을 사용해도 실제 assistive technology 를 통해 테스트하라고 함</li></ul><h2>웹 접근성 관련 자료</h2><ul class="tight" data-tight="true"><li>WCAG: <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.w3.org/TR/WCAG22/">https://www.w3.org/TR/WCAG22/</a></li><li>WebAIM: <a target="_blank" rel="noopener noreferrer nofollow" href="https://webaim.org/standards/wcag/checklist">https://webaim.org/standards/wcag/checklist</a></li><li>a11y: <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.a11yproject.com/">https://www.a11yproject.com/</a></li></ul>

ARIAAccessbile Rich Internet Applications 의 약자몸이 불편한 분들이 웹 서비스 이용이 수월하도록 여러 방식을 정의해놓은 role과 attribute의 집합자바스크립트로 만든 웹 서비스에 최적MDN 문서에 따르면 1백만개 웹사이트를 조사한 결과 34.2%가 ARIA를 잘못 사용하여 에러가 발생. ARIA는 웹 접근성을 향상시

NEXT 공식문서 읽기 D2

<blockquote>목차<ol class="tight" data-tight="true"><li>Route Announcements</li><li>Static rendering</li><li>Dynamic rendering</li></ol></blockquote><h1>1. Route Announcements</h1>키워드<blockquote><code spellcheck="false">next/link</code> <code spellcheck="false">screen reader</code> <code spellcheck="false">assistive technology</code> <code spellcheck="false">document.title</code> <code spellcheck="false">SSR</code> <code spellcheck="false">CSR</code></blockquote><h2>1-1. Screen reader</h2><ul class="tight" data-tight="true"><li>웹접근성과 관련된 기술</li><li>웹페이지 텍스트를 소리내어 읽어줌</li><li>assisitive technology 라고도 함</li><li>페이지 전환시 새로운 html 문서를 서버로부터 받은 경우에 변경된 title을 읽어 페이지가 바뀌었음을 알려주는 기능도 포함됨</li><li>한계: CSR 에서 페이지 전환시에는 위 기능이 작동하지 않음</li></ul><h2>1-2. Route announcer</h2><ul class="tight" data-tight="true"><li>넥스트에서 기본적으로 지원해주는 기능</li><li>스크린 리더가 페이지 전환시 title을 읽어 페이지가 변경되었음을 알려주는 기능을 보강</li><li>페이지 전환이 CSR 방식으로 발생된 경우 페이지 전환을 assistive technology에 알려줌</li><li>title 을 읽어서 알려줌 (브라우저 탭에 있는 웹페이지 타이틀)</li><li>title 값이 없으면 해당 페이지의 h1 태그 값을 알려줌</li><li>h1도 없으면 해당 페이지의 url 경로 값을 알려줌</li><li>next/link 의 <code spellcheck="false">Link</code> 컴포넌트를 클릭한 경우 CSR 페이지 전환이 발생함</li><li>이때 <code spellcheck="false">Route announcer</code> 가 assistive technology 에 정보를 알려줌</li></ul><h2>1-3. next/link</h2><pre spellcheck="false"><code>import Link from 'next/link';
export default function Home() {
return (
&lt;Link href="/about"&gt;
페이지 이동
&lt;/Link&gt;
)
}</code></pre><ul class="tight" data-tight="true"><li>a 태그를 상속한 컴포넌트라고 공식문서에서 소개</li><li>누르면 해당 경로로 페이지 이동</li><li>이때 페이지 전환은 Link 컴포넌트 설정에 따라서 SSR 이거나 CSR 일 수 있음</li><li>prefetch 라는 속성이 존재하고 이 속성이 렌더링 방식을 결정</li><li>prefetch 값이 true 라면, Link 컴포넌트가 화면에 보일때 미리 해당 페이지 관련 데이터를 내려받아서 Link 컴포넌트를 눌렀을때 서버랑 통신시키는게 아니라 미리 받아놓은 데이터를 이용해 CSR을 함</li><li>이 CSR 페이지 전환에서 route announcer가 스크린 리더에 페이지 전환에 관련된 정보 전달 (<code spellcheck="false">title</code> or <code spellcheck="false">h1</code> or <code spellcheck="false">url</code>)</li></ul><h1>2. Static rendering</h1>키워드<blockquote><code spellcheck="false">cache</code> <code spellcheck="false">CDN</code></blockquote><ol class="tight" data-tight="true"><li>프로젝트 빌드</li><li>HTML 파일 생성</li><li>CDN에 분산 저장 (캐싱)</li><li>유저가 웹페이지 접속</li><li>CDN에 캐싱되어있는 HTML 완성본을 유저에 전송</li></ol><h3>장점</h3><ul class="tight" data-tight="true"><li>매 요청마다 서버에서 HTML 파일 생성을 하지 않으므로 서버 운영 효율적</li><li>HTML 파일 생성 과정이 생략되므로 유저는 빠르게 페이지를 받아볼 수 있음</li></ul><h3>단점</h3><ul class="tight" data-tight="true"><li>캐싱된 HTML 완성본을 받아보므로 접속할때 최신 데이터를 볼 수 없음</li></ul><h2>3. Dynamic rendering</h2>키워드<blockquote><code spellcheck="false">SSR</code></blockquote><ol class="tight" data-tight="true"><li>유저가 웹페이지 접속</li><li>서버에서 해당 페이지의 HTML 파일 생성</li><li>HTML 문서 전송</li></ol><h3>장점</h3><ul class="tight" data-tight="true"><li>유저가 웹페이지 접속할 때마다 최신 데이터를 볼 수 있음</li></ul><h3>단점</h3><ul class="tight" data-tight="true"><li>매 요청마다 서버에서 HTML 파일을 생성해야함</li></ul>

NEXT 공식문서를 통한 개념 학습