2024년 7월 15일 오후 1:57Workthrough for prev. projectCode SplittingSuspenseReact.lazySuspense 와 함께 사용되는 hooksAsync React RouterReact Conf. 2024 와 근황 이것저것Final Project마치면서…BaaS : BackEnd as a Service Provi

#6-2. Suspense and Next

Apache Kafka

Cloud Issue

React 에서 전역 상태관리…React 생태계에서 전역 상태관리는 3rd 파티 라이브러리를 통해 구현하는 게 일반적입니다.React 에서 상태관리 라이브러리로는 Redux, Recoil, Zustand 등이 널리 사용되고 있는데, 이 중 Zustand 의 보급과 사용이 확산되고 있는 추세인 것 같습니다. (npm 다운로드 Zustand 3.4m/w 으로,

React Project : zustand-and-useContext

CI/CD

<blockquote>Cloudflare를 이용해 Vercel 커스텀 도메인을 설정하는 과정에서 "리디렉션한 횟수가 너무 많습니다" 라는 에러가 발생했고 이 문제를 해결하는 방법에 대해 다룬다.</blockquote><img src="https://image.until.blog/xeros/article/1727225490739.png" alt="until-1516"><h3>문제 원인</h3>Cloudflare와 Vercel간의 SSL 설정 충돌에 의해 발생하는 문제이다.Cloudflare는 SSL/TLS 암호화를 제공하며, Vercel도 자체적으로 SSL을 제공한다. 따라서 두 서비스간의 서로 양립된 SSL 설정으로 인한 설정 불일치가 리디렉션 문제를 야기하는것으로 보인다.<h3>해결 방법</h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://vercel.com/docs/integrations/external-platforms/cloudflare">Cloudflare와 연동하는 방법이 기술되어있는 Vercel 공식 문서</a>이 문제를 해결하기 위해서는 Cloudflare의 SSL/TLS 설정을 수정해야 한다. 기본적으로 Cloudflare는 SSL 설정을 자동으로 관리하지만, Vercel과 연동해서 사용하기 위해서는 수동으로 전체 암호화 모드로 변경해 주어야 한다.<img src="https://image.until.blog/xeros/article/1727225713844.png" alt="until-1517"><ol><li>Cloudflare 대시보드에 로그인</li><li>SSL/TLS 메뉴로 이동</li><li>"암호화 모드" 옵션을 찾는다.</li><li>"전체 (Full)" 모드로 변경</li></ol>

Vercel 커스텀 도메인을 Cloudflare에서 설정하는 도중 발생한 리디렉션 오류를 수정하는 방법에 대해 소개한다.

Cloudflare와 Vercel 연동시 리디렉션 오류를 해결하는 방법

vscode

본인 환경에 따라 단축키가 다를 수 있다. <code spellcheck="false">command + p</code> 를 치고 <code spellcheck="false">&gt; open keyboard shortcuts</code> 으로 keyboard shortcut에 설정되어 있는 내용을 참고하자.<hr>코드 접기 (fold)<code spellcheck="false">option + command + [</code>코드 펼치기 (unfold)<code spellcheck="false">option + command + ]</code>

[vscode] VSCode 능률 높여주는 단축키 (모으는 중...)

<h2>DOM과 브라우저 렌더링 과정</h2>DOM은 웹 페이지에 대한 인터페이스로 브라우저가 웹 페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.<ol><li>HTML 파일 다운로드</li><li>브라우저 렌더링 엔진은 HTML을 파싱해 DOM노드로 구성된 트리를 만든다.</li><li>2번 과정에서 CSS 파일을 만나면 해당 CSS 파일도 다운로드한다.</li><li>브라우저 렌더링 엔진은 이 CSS도 파싱해 CSS 노드로 구성된 트리를 만든다.</li><li>2번에서 만든 DOM 노드를 순회하는데, 여기서 모든 노드를 방문하는 것이 아닌 사용자 눈에 보이는 노드만 방문한다. 즉, <code spellcheck="false">display:none;</code>과 같이 사용자 화면에 보이지 않는 요소는 방문하지 않는다.→ 트리를 분석하는 과정을 조금이라도 빠르게 하기 위해서</li><li>5번에서 제외된, 눈에 보이는 노드들 대상으로 CSS 스타일 정보를 노드에 적용한다.<ul class="tight" data-tight="true"><li>레이아웃: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정<ul class="tight" data-tight="true"><li>레이아웃 과정을 거치면 반드시 페인팅 과정도 거치게 됨</li></ul></li><li>페인팅: 레이아웃 단계를 거친 노드에 색과 같은 실제 유효한 모습을 그리는 과정</li></ul></li></ol><h3>reflow(layout)</h3><blockquote>뷰포트 내에서 렌더 트리상 노드의 정확한 위치와 크기를 계산하는 과정이다.</blockquote><ul class="tight" data-tight="true"><li>윈도우 리사이징</li><li>폰트 변화</li><li>스타일 추가 또는 제거</li><li>:hover와 같은 CSS Pseudo Class(의사 클래스)</li><li>JS를 통한 DOM 동작 변화</li><li>등등..</li></ul><h3>reflow 최적화</h3><ol><li>인라인 스타일 자제인라인 스타일은 HTML이 파싱될 때, 레이아웃에 영향을 미쳐 추가 리플로우를 발생시킨다.</li><li>js를 통해 스타일 변화를 주어야할 경우 가급적 한번에 처리해라.특정 요소에 여러 스타일 변화를 지정해야 할 경우 한번에 처리하면 중복된 reflow를 최소화할 수 있다.<pre spellcheck="false"><code class="language-jsx">var toChange = document.getElementById('elem');
toChange.style.background = '#333';
toChange.style.color = '#fff';
toChange.style.border = '1px solid #ccc';
</code></pre><pre spellcheck="false"><code class="language-jsx">/* CSS */
#elem { border:1px solid #000; color:#000; background:#ddd; }
.highlight { border-color:#00f; color:#fff; background:#333; }
/* js */
document.getElementById('elem').className = 'highlight';
</code></pre></li><li>하위 선택자를 최소화 한다.CSS 하위 선택자를 최소화 하는 것이 렌더링 성능에 더 좋다.CSS 하위 선택자가 많아지면 CSSOM 트리의 깊이(Depth)가 깊어지게 되고 결국 렌더 트리를 만드는 시간이 더 오래 걸리게 된다.<pre spellcheck="false"><code class="language-jsx">/* 잘못된 예 */
.reflow_box .reflow_list li .btn{
 display:block;
}
/* 올바른 예 */
.reflow_list .btn {
 display:block;
}
</code></pre></li><li>숨겨진 노드의 스타일을 변경한다.<code spellcheck="false">display: none</code> 으로 숨겨진 노드를 변경할 때는 reflow가 발생하지 않는다. 숨겨진 노드를 표시하기 전에 노드의 컨텐츠를 먼저 변경한 후 화면에 나타내면 reflow를 줄일 수 있다.</li></ol><h3>repaint</h3><blockquote>레이아웃에 영향을 미치지 않고 요소의 외관을 변경하는 과정이다</blockquote><ul class="tight" data-tight="true"><li>요소 색상 지정 (background-color, color)</li><li>visibility</li></ul><a target="_blank" rel="noopener noreferrer nofollow" href="https://devowen.com/463">Reflow와 Repaint에 대하여</a><a target="_blank" rel="noopener noreferrer nofollow" href="https://csstriggers.com/">CSS Triggers List - What Kind of Changes You Can Make</a><h3>CLS (Cumulative Layout Shift) → 누적 레이아웃 시프트</h3><blockquote>Layout Shift란 페이지 콘텐츠가 예기치 않게 이동하는 현상이다.</blockquote>보통 리소스가 비동기 식으로 로드되거나 DOM 요소가 동적으로 추가되어 발생한다.<blockquote>CLS는 페이지 수명 동안 발생하는 모든&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://web.dev/articles/cls?hl=ko#expected-unexpected-layout-shifts">예상치 못한</a>&nbsp;레이아웃 변경에 관한&nbsp;레이아웃 변경 점수의 가장 큰 버스트를 측정한 것입니다. → layout shift 현상을 측정한 것</blockquote>계산방법<blockquote>브라우저는 표시 영역 크기 및 렌더링된 두 프레임 간 표시 영역 내 불안정한 요소의 이동을 고려합니다.</blockquote>레이아웃 변경 점수는 이동의 두 가지 측정값, 즉&nbsp;영향 비율과&nbsp;거리 비율의 곱입니다. = 영향 비율 * 거리 비율<pre spellcheck="false"><code class="language-jsx">layout shift score = impact fraction * distance fraction
</code></pre>기존 영역 = 50%이동된 거리 비율 = 25%영향 비율 = 75%0.75 * 0.25 = 0.1875의 레이아웃 변경 점수 측정💡 좋은 CLS 점수는 0.1 이하여야 한다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://web.dev/articles/cls?hl=ko">Cumulative Layout Shift (CLS) &nbsp;|&nbsp; Articles &nbsp;|&nbsp; </a><a target="_blank" rel="noopener noreferrer nofollow" href="http://web.dev">web.dev</a><h2>Virtual DOM (가상 돔)</h2><h3>가상돔의 배경</h3>앞서 본것처럼 브라우저가 웹 페이지를 렌더링 하는 과정은 매우 복잡하고 많은 비용이 든다.MPA의 경우는 다른 페이지로 가서 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작한다. 하지만 SPA의 경우 계속해서 요소의 위치를 재계산하기 때문에 렌더링 이후 추가 렌더링 작업이 많아진다.SPA는 하나의 페이지로 페이지 이동 깜빡임 없이 자연스러운 탐색이 가능하지만, 그만큼 DOM을 관리하는 과정에서 부담해야 할 비용이 커진다.개발자 입장에서 생각해보면 개발자는 인터렉션에 모든 DOM의 변경보다는 결과적으로 만들어지는 DOM 결과물 하나만 알고 싶을 것이다. 이러한 문제점을 해결하기 위해 탄생한 것이 바로 가상 DOM이다.<h3>가상돔</h3><blockquote>가상 DOM은 실제 브라우저의 DOM이 아닌 리액트에서 관리하는 가상의 <s>DOM</s> 객체을 의미한다.</blockquote>가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 메모리에 저장하고, 리액트가 실제 변경에 대한 준비가 완료됐을 때 실제 브라우저의 DOM에 반영한다.💡 리액트의 이러한 방식이 일반적인 DOM을 관리하는 브라우저보다 빠르다는 오해가 있다.가상 DOM 방식은 브라우저 DOM보다 무조건 빠른 것이 아니라 웬만한 애플리케이션을 만들 수 있을 정도로 충분히 빠르다는 것이다.<h2>리액트 파이버</h2>그렇다면 이러한 가상 DOM을 만드는 과정을 리액트에서 어떻게 처리하고 있을까?이러한 가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 바로 리액트 파이버다.<h3>리액트 파이버란?</h3><blockquote>리액트에서 관리하는 평범한 자바스크립트 객체다.<ul class="tight" data-tight="true"><li>파이버 재조정자에 의해 관리된다.</li><li>재조정이라는 용어는 가상 DOM과 실제 DOM을 비교하는 작업(알고리즘)이라고 이해하면 된다.</li></ul></blockquote><ul class="tight" data-tight="true"><li>가상 DOM과 실제 DOM을 비교하며 변경사항을 수집한다<ul class="tight" data-tight="true"><li>이 둘 사이에 차이가 있으면 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청한다.</li></ul></li></ul><h3>파이버의 배경</h3>파이버는 다음과 같은 일을 할 수 있다.<ol class="tight" data-tight="true"><li>작업을 작은 단위로 분할하고 쪼갠 다음, 우선순위를 매긴다.</li><li>이러한 작업을 일시중지하고 나중에 다시 시작할 수 있다.</li><li>이전에 했던 작업을 다시 재사용하거나 필요하지 않은 경우에는 폐기할 수 있다.</li></ol>💡 여기서 중요한 것은 이러한 모든 과정이 비동기로 일어난다는 것이다.과거의 알고리즘이전에는 조정 알고리즘이 스택 알고리즘으로 이루어있었다.렌더링에 필요한 작업이 쌓이면 해당 스택이 빌 때 까지 동기적으로 작업이 이루어지게 된다.한계자바스크립트의 특징인 싱글 스레드라는 점으로 인해 동기 작업이 중단될 수 없고, 다른 우선순위가 높은 작업이 수행되고 싶어도 중단할 수 없어 리액트의 비효율성으로 이어졌다.이러한 기존 렌더링 스택의 비효율성을 해결하기 위해 파이버라는 개념이 탄생된 것이다.<h3>파이버의 동작 과정(리액트의 생명주기)</h3><ol class="tight" data-tight="true"><li>파이버는 일단 하나의 작업 단위로 구성되어 있다.</li><li>이러한 작업 단위를 하나씩 처리하고 <code spellcheck="false">finishedWork()</code> 라는 작업으로 마무리 한다.</li><li>이 작업을 커밋해 실제 브라우저 DOM에 가시적인 변경사항 만들어 낸다.</li></ol>이러한 단계는 다음 두 단계로 나눌 수 있다.<ul><li>렌더 단계랜더 단계에서 사용자에게 노출되지 않는 모든 비동기 작업을 수행한다. 앞서 말한 파이버의 작업, 우선순위 지정/중지/삭제 등의 작업이 일어난다.</li><li>커밋 단계DOM에 실제 변경 사항을 반영하기 위한 작업니다.<code spellcheck="false">commitWork()</code>가 동기적으로 실행되어 해당 과정은 중단될 수 없다.</li></ul>💡 파이버의 실제 구조를 보면 리액트의 요소와 유사하다고 느낄 수 있지만, 중요한 차이점은 리액트 요소는 렌더링이 발생할 때 마다 새롭게 생성되지만, 파이버는 가급적이면 재사용된다는 사실이다.파이버는 컴포넌트가 최초로 마운트되는 시점에 생성되어 이후에는 가급적이면 재사용된다.<ol class="tight" data-tight="true"><li>state가 변경</li><li>생명주기 메서드가 실행</li><li>DOM의 변경이 필요한 시점</li></ol>등에 실행된다.최적화<ul class="tight" data-tight="true"><li>작은 단위로 나눠서 처리</li><li>우선순위가 높은 작업은 가능한 한 바르게 처리</li><li>낮은 작업을 연기</li></ul>시키는 등 좀 더 유연하게 처리된다.<h3>리액트 파이버 트리</h3>파이버 트리는 리액트 내부에서 두 개가 존재한다.<ol class="tight" data-tight="true"><li>현재 모습을 담은 파이버 트리</li><li>작업 중인 상태를 나타내는 <code spellcheck="false">workInProgress</code> 트리</li></ol>리액트 파이버 작업이 끝나면 리액트는 단순히 <code spellcheck="false">workInProgress</code> 트리를 현재 트리로 변경한다.이러한 기술을 더블 버퍼링이라고 한다.그래픽 처리의 문제점그래픽을 통해 화면에 표시되는 것을 그리기 위해서 내부적으로 처리하던 중, 사용자에게 미처 다 그리지 못한 모습을 보는 경우가 발생하게 된다.(한번에 모든 작업을 마무리할 수 없기 때문)더블 버퍼링?그래서 이러한 상황을 방지하기 위해 보이지 않는 곳에서 그림을 미리 그린 다음, 해당 그림이 완성되면 현재 상태를 새로운 그림으로 바꾸는 기법을 의미한다.리액트에서도 마찬가지로 불완전한 트리를 노출시키지 않도록 더블 버퍼링 기법을 사용한다. 이러한 더블 버퍼링을 위해 두개의 트리가 존재하며, 더블 버퍼링은 커밋 단계에서 수행된다.즉, 먼저 현재 렌더링을 위해 존재하는 트리인 current를 기준으로 모든 작업이 시작된다.<ol class="tight" data-tight="true"><li>업데이트가 발생하면, 파이버는 리액트에서 새로 받은 데이터로 새로운 <code spellcheck="false">workInProgress</code> 트리 빌드</li><li><code spellcheck="false">workInProgress</code> 빌드가 완료되면, 다음 렌더링에 해당 트리를 사용한다.</li><li><code spellcheck="false">workInProgress</code> 트리가 UI에 최종적으로 렌더링이 반영되면</li><li>current가 <code spellcheck="false">workInProgress</code>로 변경된다.</li></ol><h3>파이버의 작업 순서</h3><ol class="tight" data-tight="true"><li>리액트는 <code spellcheck="false">beginWork()</code> 함수를 실행해 파이버 작업을 수행하는데, 더 이상 자식이 없는 파이버를 만날 때 까지 트리 형식으로 시작된다.</li><li>1번에서 작업이 긑난다면 그 다음 <code spellcheck="false">completeWork()</code> 함수를 실행해 파이버 작업을 완료한다.</li><li>형제가 있다면 형제로 넘어간다.</li><li>2, 3번이 끝났다면 return으로 돌아가 자신의 작업이 완료됐음을 알린다. → <code spellcheck="false">commitWork()</code>가 수행되어 변경사항이 DOM에 반영</li></ol>이제 여기서 setState 등으로 업데이트가 발생하면 어떻게 될까?<ol class="tight" data-tight="true"><li>앞서 만든 current 트리가 존재함</li><li>setState로 인한 업데이트 요청을 받아 <code spellcheck="false">workInprogress</code> 트리를 다시 빌드하기 시작한다.</li><li>최초 렌더링 시에는 모든 파이버를 새롭게 만들어야 했지만, 최초 렌더링 이후에는 파이버가 이미 존재하므로 되도록 새로 생성하지 않고 기존 파이버에서 업데이트된 props를 받아 파이버 내부에서 처리한다.</li></ol>💡 가급적 새로운 파이버를 생성하지 않는다.새롭게 파이버 자바스크립트 객체를 만드는 것은 리소스 낭비라고 볼 수 있다.<h2>마무리</h2>컴포넌트에 대한 정보를 1:1로 가지고 있는 것이 파이버이며, 이 파이버는 내부에서 비동기로 이루어진다.실제 브라우저 구조인 DOM에 반영하는 것은 동기적으로 일어난다.또 처리하는 작업이 많을 때 DOM 트리가 불완전할 수 있으므로, 메모리상에서 먼저 수행 후 최종적인 결과물만 실제 브라우저 DOM에 적용한다.💡 화면에 표시되는 자바스크립트의 문자열, 배열 등과 마찬가지로 값으로 관리하고 이러한 흐름을 효율적으로 관리하기 위한 메커니즘이 바로 리액트의 핵심이다. (값으로 UI를 표현하는 것)<h3>새로 알게 된 점</h3><ul class="tight" data-tight="true"><li>CLS의 계산 방법</li><li>reflow 최적화 방법</li><li>파이버의 두가지 동작 과정 (렌더/커밋 단계)</li><li>더블 버퍼링</li></ul>

2-2. 가상 DOM과 리액트 파이버

CodingTest

<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/2583">2583.영역 구하기</a></li><li>사용언어 : C#</li><li>난이도 : 중</li><li>풀이시간 : 미측정</li><li>유형 : DFS, BFS, 그래프 이론</li></ul><h2>문제</h2>눈금의 간격이 1인 M×N(M,N≤100)크기의 모눈종이가 있다. 이 모눈종이 위에 눈금에 맞추어 K개의 직사각형을 그릴 때, 이들 K개의 직사각형의 내부를 제외한 나머지 부분이 몇 개의 분리된 영역으로 나누어진다.예를 들어 M=5, N=7 인 모눈종이 위에 &lt;그림 1&gt;과 같이 직사각형 3개를 그렸다면, 그 나머지 영역은 &lt;그림 2&gt;와 같이 3개의 분리된 영역으로 나누어지게 된다.<img src="https://image.until.blog/sin0105/article/1727513637527.png" alt="until-1595">&lt;그림 2&gt;와 같이 분리된 세 영역의 넓이는 각각 1, 7, 13이 된다.M, N과 K 그리고 K개의 직사각형의 좌표가 주어질 때, K개의 직사각형 내부를 제외한 나머지 부분이 몇 개의 분리된 영역으로 나누어지는지, 그리고 분리된 각 영역의 넓이가 얼마인지를 구하여 이를 출력하는 프로그램을 작성하시오.<h2>입력</h2>첫째 줄에 M과 N, 그리고 K가 빈칸을 사이에 두고 차례로 주어진다. M, N, K는 모두 100 이하의 자연수이다. 둘째 줄부터 K개의 줄에는 한 줄에 하나씩 직사각형의 왼쪽 아래 꼭짓점의 x, y좌표값과 오른쪽 위 꼭짓점의 x, y좌표값이 빈칸을 사이에 두고 차례로 주어진다. 모눈종이의 왼쪽 아래 꼭짓점의 좌표는 (0,0)이고, 오른쪽 위 꼭짓점의 좌표는(N,M)이다. 입력되는 K개의 직사각형들이 모눈종이 전체를 채우는 경우는 없다.<h2>출력</h2>첫째 줄에 분리되어 나누어지는 영역의 개수를 출력한다. 둘째 줄에는 각 영역의 넓이를 오름차순으로 정렬하여 빈칸을 사이에 두고 출력한다.<h2>예제 입력 1 복사</h2><pre spellcheck="false"><code>5 7 3
0 2 4 4
1 1 2 5
4 0 6 2</code></pre><h2>예제 출력 1 복사</h2><pre spellcheck="false"><code>3
1 7 13</code></pre><h3>문제 풀이 접근</h3>일단 이 문제의 출처를 보고 놀랐다. 고등부 정보 레벨에서 푸는 것이라.. 전체 레벨을 모르다보니 쉬운지 어려운지도 감이 안잡혔지만, 이제서야 푸는 내입장에서는 이 문제를 푼 고등부 친구들이 대단해보였다. 문제로 다시 돌아가서, 이 문제는 이전의 BFS, DFS 문제들과의 차이점이 조금 있었다. 차이점이라고 한다면, 이전 문제들은 각 좌표의 값은 0,1 등 정수로 다 채워서 주긴했었는데, 이 문제는 내가 그 좌표의 값을 채워야했다. n,m 같은 사이즈만 주고 좌표를 줘서 알아서 색칠하는것이 추가된 문제다. 그리고 나서는, 한번 BFS를 돌았을때 갈 수 있는 영역을 카운팅해서 출력하면된다. 이 BFS 돈 뒤에 영역 카운팅 하는건 내가 풀었던 문제중 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/problem/2667">2667.단지번호붙이기</a> 라는 좋은 문제가 있다. 이 문제를 아직 안풀었다면, 먼저 풀고오면 도움이 될 것이다.플로우를 짠다면 이렇게 된다. 1. n,m 을 입력 받은 후 visited 를 구성한다. 여기선 맵은 필요없다 그냥 visited 배열로 하면된다. 2. 직사각형 좌표를 줄 것이고, 이 직사각형 각각의 좌표는 좌하 0,0 우상 max,max다 3. 좌표를 넘겨받아 좌하부터 우상까지 순회하며 그 공간을 visited[현재x값,현재y값]을 칠해준다. 4. 시작점을 찾기위해 n,m 값을 순회하면서 visited값이 false 일 경우 BFS 시작점으로 잡고 순회한다. 5. 시작점마다 순회할 수 있는 칸을 list에 넣고, 영역의 총 갯수와, 영역 사이즈를 오름차순으로 출력한다.문제에서는 전체 좌하를 (0,0)으로 풀었으나, 나는 좌상을 (0,0)으로 아래로 갈 수록 y+ 이 되는 것으로 가정하고 풀었다.그렇다보니, 2번의 영역이 위아래가 반전된 형식이다. 가정하기에 따라 상하또는 상관 없으므로 이렇게 진행해도 된다. 내 풀이식에서 혹시나 나중에 내가 읽었을때 의문점이 발생할 수 있기 때문에 미리 설명을 남겨 놓는다.<img src="https://image.until.blog/sin0105/article/1727514379597.png" alt="until-1597"><img src="https://image.until.blog/sin0105/article/1727514359490.jpeg" alt="until-1596"><h3>정답 작성 코드 (C#)</h3><pre spellcheck="false"><code class="language-csharp">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;
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;

/*
 * Difficulty : Middle
 * URL : https://www.acmicpc.net/problem/2583
 */

namespace CodingTestProj
{
 internal class Program
 {


 static void Main(string[] args)
 {
 //Case 0 _ Short
 Solution solution = new Solution();
 solution.solve();
 }
 }

 public class ColoringPos
 {
 public ColoringPos(int startX, int startY, int endX, int endY)
 {
 this.coloringStartPosX = startX;
 this.coloringStartPosY = startY;
 this.coloringEndPosX = endX;
 this.coloringEndPosY = endY;
 }

 public int coloringStartPosX;
 public int coloringStartPosY;

 public int coloringEndPosX;
 public int coloringEndPosY;
 }

 public class Solution
 {
 int n;
 int m;
 int k;

 bool[,] visited;

 int[] dx = new int[4] { 0, 0, -1, 1 };
 int[] dy = new int[4] { 1, -1, 0, 0 };

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

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

 public void solve()
 { 
 string[] inputs = Console.ReadLine().Split(' ');
 n = Int32.Parse(inputs[0]);
 m = Int32.Parse(inputs[1]);
 k = Int32.Parse(inputs[2]);

 visited = new bool[m, n];

 for(int i = 0; i &lt; k; ++i)
 {
 inputs = Console.ReadLine().Split();
 list.Add(new ColoringPos(Int32.Parse(inputs[0]), Int32.Parse(inputs[1]), Int32.Parse(inputs[2]), Int32.Parse(inputs[3])));
 }

 for(int i = 0; i &lt; list.Count; ++i)
 {
 var cor = list[i];

 for(int j = cor.coloringStartPosX; j &lt; cor.coloringEndPosX; ++j)
 {
 for(int k = cor.coloringStartPosY; k &lt; cor.coloringEndPosY; ++k)
 {
 visited[j,k] = true;
 }
 }
 }// 모눈종이 색칠하기

 for(int i = 0; i &lt; visited.GetLength(0); ++i)
 {
 for(int j = 0; j &lt; visited.GetLength(1); ++j)
 {
 if(visited[i, j] == false)
 {
 int posX = i;
 int posY = j;
 BFS(i,j);
 }
 }
 }

 Console.WriteLine(sectorList.Count);
 sectorList.Sort();

 for (int i = 0; i&lt; sectorList.Count; ++i)
 {
 Console.Write(sectorList[i] + " ");
 }
 }
 
 public void BFS(int curPosX, int curPosY)
 {
 Queue&lt;Tuple&lt;int,int&gt;&gt; q = new Queue&lt;Tuple&lt;int, int&gt;&gt;();

 int sector = 0;
 q.Enqueue(new Tuple&lt;int, int&gt;(curPosX, curPosY));
 ++sector;

 while (q.Count &gt; 0)
 {
 var deq = q.Dequeue();

 int posX = deq.Item1;
 int posY = deq.Item2;

 if (visited[posX, posY] == true)
 continue;

 visited[posX, posY] = true;

 for(int i = 0; i &lt; 4; ++i)
 {
 int newPosX = posX + dx[i];
 int newPosY = posY + dy[i];

 if (isCheckSafeArea(newPosX, newPosY) == false)
 continue;

 if (visited[newPosX, newPosY] == true)
 continue;

 if (q.Contains(new Tuple&lt;int, int&gt;(newPosX, newPosY)) == true)
 continue;

 q.Enqueue(new Tuple&lt;int,int&gt;(newPosX, newPosY));
 ++sector;
 }
 }
 sectorList.Add(sector);
 }

 public bool isCheckSafeArea(int posX, int posY)
 {
 if (posX &lt; 0 || posX &gt; (m - 1) || posY &lt; 0 || posY &gt; (n - 1))
 return false;

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

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

코딩테스트 준비 - 영역 구하기

기타

storybook

Workthrough for prev. projectRouting in ReactReact-Router-Dom BasicNested RouteLoaderDynamic RouteError Handling and FallbackAction handlingRRD 와 NextJS 의 App Routingfifth project : RRD ProjectWorkthr

#5. React-Router-Dom

<h1>#1. 리액트를 배우기 위한 사전 준비</h1><h3>#챕터 목차</h3><ol class="tight" data-tight="true"><li>JSX 구문</li><li>Imperative &amp; Declarative</li><li>v = f ( s )</li><li>ES5/ ES6 functions and literals</li></ol><h2>JSX 구문</h2>JSX 는 Javascript 와 XML 을 합성한 표현방식입니다.React 에서는 JSX 구문을 주로 사용하게 됩니다.<pre spellcheck="false"><code class="language-jsx">// JSX 의 예제 코드
const name = 'John Doe';
const element = &lt;h1&gt;Hello, {name}&lt;/h1&gt;;

// JS 의 예제 코드
const element = React.createElement(
 'h1',
 null,
 `Hello, ${name}`
);
</code></pre><pre spellcheck="false"><code class="language-jsx">// 함수형 컴포넌트 내에서의 사용예
 return(	
 {state === "loading" ? (
 "Loading"
 ) : (
 &lt;ul&gt;
 {todos.map((todo) =&gt; (
 &lt;TodoItem77 key={todo.id} {...todo} /&gt;
 ))}
 &lt;/ul&gt;
 )}
 )
</code></pre>JSX 심화 학습 Ref :<a target="_blank" rel="noopener noreferrer nofollow" href="https://reactjs-kr.firebaseapp.com/docs/introducing-jsx.html">https://reactjs-kr.firebaseapp.com/docs/introducing-jsx.html</a><a target="_blank" rel="noopener noreferrer nofollow" href="https://ko.legacy.reactjs.org/docs/jsx-in-depth.html">https://ko.legacy.reactjs.org/docs/jsx-in-depth.html</a><h2>Imperative vs. Declarative</h2>프로그래밍에서 해결해야 할 과제 “AAA” 가 있다고 가정하겠습니다.절차형/명령형 imperative 프로그래밍에서는 “AAA” 의 모든 속성과 과제 들을 데스크탑 위에 모두 풀어헤쳐 놓고 하나하나의 세부항목 태스크를 구성한 후, 각각의 태스크에 대한 코드들을 구성해준 뒤 전체 플로우를 연결해줍니다.<pre spellcheck="false"><code class="language-jsx">// Imperative
// 배열에서 짝수를 찾고 그 합을 계산한다.
const numbers = [1, 2, 3, 4, 5, 6];
let sum = 0;

for (let i = 0; i &lt; numbers.length; i++) {
 if (numbers[i] % 2 === 0) {
 sum += numbers[i];
 }
}

console.log(sum); // 12
// 모든 절차가 마치 익숙한 의식의 흐름처럼 진행되었습니다.
</code></pre>반면에 선언형 declarative 프로그래밍에서는, 추상화 된 처리 엔진(또는 규칙) 을 전제로 합니다.그리고 그 엔진이 watch/listen 하고있는 ‘개별 상태’ 를 변경 또는 관리의 목표로 설정해 줌으로서 태스크가 해결됩니다.<pre spellcheck="false"><code class="language-jsx">// Declarative
// 새로운 greet 객체를 출력에 반영시킨다.
const [activeGreet, setActiveGreet] = setState(null)
const newGreet = ['greetings', '안녕']
setActiveGreet(newGreet)
return (
	{
		activeGreet &amp;&amp; (
			activeGreet.map( (eachGreet, i) =&gt; {
	 &lt;Greet key={i} greet={eachGreet } /&gt;
			}	 
 )
	}
)
// 모든 코드의 중심과 목표는 'activeGreet' 라는 상태-state 에 집중되어 있습니다.
</code></pre><h2>v = f ( s )</h2>view = function ( state )선언형 프로그래밍에서는 처리해야 할 ‘상태’ 즉, state 에 집중하고, state 를 변화 시키면 화면의 출력 양태가 바뀌도록 프로그래밍 합니다.이 점이 가장 큰 변화이고 익숙해지기 어려운 문제인데요.. 기존의 절차형 프로그래밍으로부터의 패러다임 전환이기 때문에, 적응하기가 쉽지는 않습니다. 습관처럼 for 문을 적게 되기도 하죠. 언제나 그랬던 것 처럼, 직접 수 만 라인의 코드를 짜보는 것 외에는 왕도가 없는 것 같습니다.아무튼, 기억해두시기 바랍니다. 모든 것은 state 이고, 개발자는 state 에 집중해야 한다… 라는 것이 리액트의 가장 큰 지혜이자 중심 컨셉입니다.<h2>ES5/ES6 functions &amp; literals</h2>리액트 에서는 ECMA5/6 에서 도입된 펑션과 리터럴이 자주 사용됩니다. 거의 모든 리액트 컴포넌트에서 사용된다고도 말할 수 있겠습니다.ES5/6 펑션과 표현에 익숙해지셔야 합니다.<pre spellcheck="false"><code class="language-jsx">// ES5/ES6 펑션의 예 
 setAllTodos(allTodos.filter((eachTodo) =&gt; eachTodo.id !== targetTodoId));
 return(
 &lt;ul&gt;
 {todos.map((todo) =&gt; (
 &lt;TodoItem key={todo.id} {...todo} /&gt;
 ))}
 &lt;/ul&gt;
 )
</code></pre>가장 자주, 유용하게 사용되는 ES5/ES6 펑션들은 다음과 같습니다.<h3><a target="_blank" rel="noopener noreferrer nofollow" href="http://Array.map">Array.map</a></h3><pre spellcheck="false"><code class="language-jsx">var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
 return value * 2;
}
// arrow function ver.
const numbers2 = numbers1.map( (val) =&gt; val*2 );
</code></pre><h3>Array.filter</h3><pre spellcheck="false"><code class="language-jsx">var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
 return value &gt; 18;
}
// arrow function ver.
const numbers2 = numbers1.filter( (val) =&gt; val &gt; 18 );
</code></pre><h3>Array.reduce</h3><pre spellcheck="false"><code class="language-jsx">var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
 return total + value;
}
// arrow function ver.
const numbers2 = numbers1.reduce((total, value) =&gt; total + value, 0);
</code></pre><h3>Arrow function</h3><pre spellcheck="false"><code class="language-jsx">// ES5
var x = function(x, y) {
 return x * y;
}

// ES6
const x = (x, y) =&gt; x * y;
</code></pre><h3>Optional chaining</h3><pre spellcheck="false"><code class="language-jsx">const user = {
 name: 'John',
 greet: function() {
 return 'Hello!';
 }
};

// Optional chaining을 사용하지 않은 경우
const greet1 = user &amp;&amp; user.greet &amp;&amp; user.greet();
console.log(greet1); // 'Hello!'

// Optional chaining을 사용한 경우
const greet2 = user?.greet?.();
console.log(greet2); // 'Hello!'
</code></pre>ES5/ES6 Functions 심화학습 Ref :<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.w3schools.com/js/js_es5.asp">https://www.w3schools.com/js/js_es5.asp</a><h3>Destructuring assignment : 구조 분해 할당</h3><pre spellcheck="false"><code class="language-jsx">// 기본 분해 할당
let a, b, rest;
[a, b] = [10, 20];

console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest); // Array [30, 40, 50]

// 객체 구조 분해 할당
const person = {
 name: 'John Doe',
 age: 30,
 address: {
 city: 'New York',
 zip: '10001'
 }
};

// 객체에서 값을 분해하여 변수에 할당
const { name, age } = person;

console.log(name); // John Doe
console.log(age); // 30

// 중첩된 객체의 속성을 분해하여 할당
const { address: { city, zip } } = person;

console.log(city); // New York
console.log(zip); // 10001

</code></pre>Destructuring assignment 심화학습 Ref :<a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment</a><h3>Nullish Coalescing Operator 와 Logical OR Operator</h3><pre spellcheck="false"><code class="language-jsx">
let name = "";
let text = "default";
let result;

// Nullish coalising
result = name ?? text;
console.log(result); // ""

// Logical OR operator
result = name || text;
console.log(result); // "default"

// Falsy 값 처리: 
// ?? 연산자는 null이나 undefined만을 검사하고, 
// || 연산자는 모든 falsy 값을 검사합니다.

</code></pre>여기까지가 React 에서 주로 사용되는 구문과 펑션.. 등에 대한 사전 지식 점검 이었습니다.충분히 이해하셨다면, 다음 장에서 본격적으로 React App 을 생성하고, 코딩을 시작해 봅시다.

#1. 리액트를 배우기 위한 사전 준비

<h2>JSX란?</h2><pre spellcheck="false"><code class="language-jsx">const element = &lt;h1&gt;Hello, world!&lt;/h1&gt;;
</code></pre><blockquote>JSX(JavaScript XML), JavaScript에 XML을 추가하여 확장한 문법</blockquote><h3>브라우저는 JSX를 알고있을까?</h3>JSX가 포함된 코드를 아무런 처리 없이 그대로 실행하면 에러가 발생한다.JSXS는 자바스크립트 표준 코드가 아닌 페이즈북이 임의로 만든 새로운 문법이기 때문에 반드시 트랜스파일러를 거쳐야 비로소 자바스크립트 런타임이 이해할 수 있는 의미있는 코드로 변환된다.JSX는 어떻게 자바스크립트로 변환될까?우선 JS가 JSX로 변환되는 방식을 알려면 리액트에서 JSX를 변환하는 <code spellcheck="false">@babel/plugin-transform-react-jsx</code>플러그인을 알아야 한다.이 플러그인은 JSX 구문을 자바스크립트가 이해할 수 있는 형태로 변환한다.<pre spellcheck="false"><code class="language-jsx">// JSX
const element = (
 &lt;h1 className="greeting"&gt;
 Hello, world!
 &lt;/h1&gt;
);

// JS로 변환된 JSX
const element = React.createElement(
 'h1',
 {className: 'greeting'},
 'Hello, world!'
);
</code></pre><h3>JSX의 설계 목적</h3>다양한 트랜스파일러에서 다양한 속성을 가진 트리 구조를 토큰화해 ECMAScript로 변환하는데 초점을 두고 있다.<ul class="tight" data-tight="true"><li>트리 구조로 표현하고 싶은 다양한 것들을 작성</li><li>HTML, XML이외에도 다른 구문으로도 확장될 수 있도록, 개발자들에게 친숙함을 느낄 수 있기 위해</li></ul><h2>JSX 정의</h2><h3>1. JSXElement</h3><blockquote>JSX를 구성하는 가장 기본적인 요소로, HTML element와 비슷한 역할을 한다.</blockquote><ul class="tight" data-tight="true"><li>JSXOpeningElement: &lt;div&gt;</li><li>JSXClosingElement: &lt;/div&gt;</li><li>JSXSelfClosingElement: &lt;div /&gt;</li><li>JSXFragment: &lt;&gt;&lt;/&gt;</li></ul>❓ 컴포넌트 명이 대문자로 시작해야 하는 이유는 무엇인가요?리액트에서 HTML 구문 이외 사용자 정의 컴포넌트는 반드시 대문자로 시작해야 사용가능하다. 이는 HTML 태그명과 사용자가 만든 컴포넌트 태그명을 구분 짓기 위해서다.<pre spellcheck="false"><code class="language-jsx">// HTML 태그명
&lt;span&gt;&lt;/span&gt;
// 컴포넌트명
&lt;Span&gt;&lt;/Span&gt;
</code></pre>JSXElementName<blockquote>JSXElement의 요소 이름으로 쓸 수 있는 것을 의미한다.</blockquote><ul class="tight" data-tight="true"><li>JSXIdentifier: <code spellcheck="false">$</code>와<code spellcheck="false">_</code> 외에 다른 특수문자나 숫자로 시작할 수 없다.</li><li>JSXNamespacedName: JSXIdentifier:JSXIdentifier의 조합, 두 개 이상은 불가</li><li>JSXMemberExperssion: JSXIdentifier.JSXIdentifier의 조합, 두 개 이상 가능</li></ul><h3>2. JSXAttributes</h3><blockquote>JSXElement에 부여할 수 있는 속성을 의미한다. 필수값이 아니고, 존재하지 않아도 에러가 발생하지 않는다.</blockquote><ul><li>JSXSpreadAttributes<ul class="tight" data-tight="true"><li>{…AssignmentExpression}</li><li>단순히 객체뿐만 아니라 자바스크립트에서 AssignmentExpression로 취급되는 모든 표현식 존재 가능<ul class="tight" data-tight="true"><li>조건문 표현식</li><li>화살표 함수</li><li>할당식</li></ul></li></ul></li><li>JSXAttribute<ul><li>JSXAttributeName - JSXAttributeValue로 짝을 이루어 표현</li><li>JSXAttributeName: 속성의 키 값</li><li>JSXAttributeValue<ul><li>큰 따옴표로 구성된 문자열</li><li>작은 따옴표로 구성된 문자열</li><li>{ AssignmentExpression }</li><li>JSXElement: 값으로 다른 JSX요소가 들어갈 수 있다.&lt;aside&gt; 💡 값을 전달할 때 { }로 감싸는게 리액트의 문법으로 오해하는 개발자들이 있다.이는 리액트의 문법이 아닌 prettier의 규칙이다. prettier 규칙은 태그가 포함된 JSX 구문을 좀 더 읽기 쉽게 만들기 위해 제공된다.<pre spellcheck="false"><code class="language-jsx">&lt;div attribute=&lt;div&gt;hello&lt;/div&gt; /&gt;
&lt;div attribute={&lt;div&gt;hello&lt;/div&gt;} /&gt;
</code></pre>&lt;/aside&gt;</li><li>JSXFragment</li></ul></li></ul></li></ul><h3>3. JSXChildren</h3><blockquote>JSXElement의 자식 값을 나타낸다.</blockquote><ul><li>JSXChild: JSXChildren을 이루는 기본 단위다. JSXChildren은 JSChild가 없어도 상관없다.<ul><li>JSXText: 문자열</li><li>JSXElement: 다른 JSX요소</li><li>JSXFragment: 빈 요소</li><li>{JSXChildExpression (optional)}<pre spellcheck="false"><code class="language-jsx">// 해당 컴포넌트를 렌더링하면 "foo"라는 문자열이 출력된다.
return &lt;&gt;{(()=&gt; 'foo')()}&lt;/&gt;
</code></pre></li></ul></li></ul><h3>4. JSXStrings</h3><blockquote>HTML에서 사용 가능한 문자열은 모두 JSXStrings에서도 가능하다.</blockquote><ul class="tight" data-tight="true"><li>큰따옴표로 구성된 문자열</li><li>작은 따옴표로 구성된 문자열</li><li>JSXText</li></ul>💡 자바스크립트와는 한 가지 중요한 차이점이 발생하는데 바로 <code spellcheck="false">\\</code> 로 시작하는 이스케이프 문자 형태소다.<code spellcheck="false">\\</code> 는 자바스크립트에서 특수문자를 처리할 때 사용되므로 몇 가지 제약사항이 있지만, HTML에서 아무런 제약없이 사용할 수 있다.따라서 JSX에서는 HTML처럼 <code spellcheck="false">\\</code>을 이스케이프 문자열로 처리하고 있지 않다.<h2>마무리</h2>이처럼 JSX는 자바스크립트 코드 내부에 HTML과 같은 트리 구조를 가진 컴포넌트를 표현할 수 있다는 점에 각광받고 있다.물론 JSX가 HTML문법과 자바스크립트 문법이 뒤섞여서 코드의 가독성을 해친다는 의견도 있다. JSX 내부에 자바스크립트 문법이 많아질수록 복잡성이 증대하면서 코드의 가독성도 해칠 것이므로 주의해서 사용해야 한다.

2장 리액트 핵심 요소 깊게 살펴보기