<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과 리액트 파이버

<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

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1716912103640" alt="until-344"><blockquote>next.js 의 pages router 기준으로 작성되었어요.</blockquote>next.js서버사이드에서 데이터를 prefetch하기 위해서 리액트쿼리에서 제안하는 방식은 크게 두가지가 존재한다.<ol><li>데이터 패칭을 한 뒤에 <code spellcheck="false">serverSideProps</code>의 props로 넘겨주는 방식</li><li>서버사이드에서 <code spellcheck="false">queryClient</code>에 데이터를 저장하고, <code spellcheck="false">queryClient</code>자체를 <code spellcheck="false">dehydrate</code>하여 넘겨주는 <code spellcheck="false">Hydration</code> 방식</li></ol>첫번째 방식은 비교적 간단하지만 props drilling이나 여러곳에서 사용할 경우 initialData를 넣어주는 것이 까다롭다는 단점이 있다.때문에 프리패칭하는 데이터가 여러곳에 존재하고, 복잡할 경우 두번째 방식을 사용하는 것이 좋을것이다.<code spellcheck="false">Hydration</code>방식을 사용하기 위해서는 <code spellcheck="false">fetchQuery</code>와 <code spellcheck="false">prefetchQuery</code>의 차이점을 알아보자.<h1>prefetchQuery</h1>prefetchQuery는 결과값을 리턴하지 않으며, 데이터 패칭에 실패할 경우 에러를 던지지 않는다는 특징을 가지고 있다.따라서 데이터를 불러오지 못하더라도, UI를 그려줄 수 있는 경우에는 prefetchQuery를 사용하면 된다.<pre spellcheck="false"><code class="language-typescript">// ...
await queryClient.prefetchQuery({
 queryKey: queryKeys.articles()
 queryFn: getArticles()
});
// ...</code></pre><h1>fetchQuery</h1>fetchQuery와 같은 경우에는 결과값을 리턴하고, 데이터 패칭에 실패하는 경우에는 에러를 던진다.따라서 error handling이 가능하다는 얘기이다.언틸에서의 블로그 프로필 페이지를 예로 들어보자.<pre spellcheck="false"><code class="language-typescript">export const getServerSideProps: GetServerSideProps = async (context) =&gt; {
 try {
 setCookie(context)
 const username = getUsername(context)await queryClient.fetchQuery({
 queryKey: queryKeys.blog.username.body(username),
 queryFn: createGetBlog(username),
 })
 return {
 props: {
 dehydratedState: dehydrate(queryClient),
 },
 }} catch (error) {
 return {
 notFound: true,
 }
 }
}</code></pre>블로그를 조회하는 api는 잘못된 username으로 요청하는 경우 404 페이지를 보여줘야 하기에 <code spellcheck="false">fetchQuery</code>를 통해 구현해주었다.또한 return value를 사용하는 경우에도 fetchQuery를 사용해 구현해줄 수 있다.

next.js 의 pages router 기준으로 작성되었어요.next.js서버사이드에서 데이터를 prefetch하기 위해서 리액트쿼리에서 제안하는 방식은 크게 두가지가 존재한다.데이터 패칭을 한 뒤에 serverSideProps의 props로 넘겨주는 방식서버사이드에서 queryClient에 데이터를 저장하고, queryClient자체를 dehydrate

react-query의 fetchQuery과 prefetchQuery

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

#6-1. Suspense and Next

서비스를 운영하다보면 이메일을 발송해야 하는 다양한 경우들이 종종 존재합니다. 개인 대 개인으로 이메일을 주고 받는 경우에는 단순히 이메일 서비스에서 제공하는 에디터를 통해 이메일을 작성하면 되지만, 서비스에서는 이미 만들어진 템플릿이 존재해야하죠.언틸에서 사용하고 있는 몇가지 사례를 소개해보자면.. 아래 사진처럼 이메일 로그인을 시도하거나,<img src="https://image.until.blog/morethanmin/article/1731746431184.png" data-width="75%" data-align="center" alt="2165">이메일 회원가입을 시도하는 경우에 이메일을 발송하게 됩니다.<img src="https://image.until.blog/morethanmin/article/1731746474123.png" data-width="75%" data-align="center" alt="2166">이런 이메일 템플릿은 어떻게 만들어질까요?<h2>이메일 템플릿을 만드는 방법</h2>우선 이메일에서는 일반적으로 JavaScript를 포함하거나 실행할 수 없습니다. 이는 보안 및 사용자 경험 문제를 방지하기 위해 대부분의 이메일 클라이언트(Gmail, Outlook 등)에서 JavaScript 실행을 차단하기 때문입니다.아래는 until에서 사용하는 회원가입 이메일 html 양식입니다.<pre spellcheck="false"><code class="language-xml">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html dir="ltr" lang="en"&gt;

 &lt;head&gt;
 &lt;meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /&gt;
 &lt;/head&gt;
 &lt;div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"&gt;until 회원가입 인증 요청&lt;div&gt;&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&lt;/div&gt;
 &lt;/div&gt;

 &lt;body style="background-color:#ffffff;color:#24292e;font-family:-apple-system,BlinkMacSystemFont,&amp;quot;Segoe UI&amp;quot;,Helvetica,Arial,sans-serif,&amp;quot;Apple Color Emoji&amp;quot;,&amp;quot;Segoe UI Emoji&amp;quot;"&gt;
 &lt;table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:480px;margin:0 auto;padding:20px 0 48px"&gt;
 &lt;tbody&gt;
 &lt;tr style="width:100%"&gt;
 &lt;td&gt;&lt;img alt="Until" height="48" src="https://static.until.blog/logo.png" style="display:block;outline:none;border:none;text-decoration:none;border-radius:50%;margin:0 auto" width="48" /&gt;
 &lt;p style="font-size:24px;line-height:1.25;margin:16px 0;text-align:center;font-weight:bold"&gt;회원가입 인증 요청&lt;/p&gt;
 &lt;table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding:24px;border:solid 1px #dedede;border-radius:5px;text-align:center"&gt;
 &lt;tbody&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;p style="font-size:14px;line-height:24px;margin:0 0 10px 0;text-align:left"&gt;환영합니다!&lt;/p&gt;
 &lt;p style="font-size:14px;line-height:24px;margin:0 0 10px 0;text-align:left"&gt;회원가입을 계속하려면 아래 버튼을 클릭해주세요. 만약 이 요청을 하지 않으셨다면 무시하셔도 됩니다. 만약 계정에 문제가 있다면 문의해주세요.&lt;/p&gt;&lt;a href="https://until.blog/login" style="line-height:1.75;text-decoration:none;display:inline-block;max-width:100%;margin:20px 0;font-size:14px;background-color:color(display-p3 0.276 0.384 0.837);color:#fff;border-radius:0.5em;padding:6px 16px 6px 16px" target="_blank"&gt;&lt;span&gt;&lt;!--[if mso]&gt;&lt;i style="letter-spacing: 16px;mso-font-width:-100%;mso-text-raise:9" hidden&gt;&amp;nbsp;&lt;/i&gt;&lt;![endif]--&gt;&lt;/span&gt;&lt;span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:4.5px"&gt;회원가입 인증&lt;/span&gt;&lt;span&gt;&lt;!--[if mso]&gt;&lt;i style="letter-spacing: 16px;mso-font-width:-100%" hidden&gt;&amp;nbsp;&lt;/i&gt;&lt;![endif]--&gt;&lt;/span&gt;&lt;/a&gt;
 &lt;p style="font-size:14px;line-height:24px;margin:0 0 10px 0;text-align:left"&gt;또는 아래 링크를 브라우저에 입력해주세요. &lt;br /&gt;&lt;a href="https://until.blog/login" style="color:#0366d6;text-decoration:none;font-size:12px" target="_blank"&gt;https://until.blog/login&lt;/a&gt;&lt;/p&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
 &lt;/body&gt;

&lt;/html&gt;</code></pre>이런 html 템플릿을 직접 만든다면 재사용성도 떨어지고, 크로스 브라우징 이슈가 발생할 수도 있는 등 다양한 문제를 야기하게 됩니다.만약 이런 템플릿의 개수가 늘어날수록 관리하기는 점점더 힘들어지겠죠.그 외에도 모던 웹 개발환경을 사용하지 못함으로써 생기는 모든 단점들이 발생할것입니다.<h2>React 환경에서 이메일 템플릿을 만들 수 있도록 해주는, React-Email</h2>이런 문제를 해결하기 위해 만들어진 서비스가 <a target="_blank" rel="noopener noreferrer nofollow" href="https://react.email/">React-Email</a>입니다. React-email에서 제공하는 컴포넌트를 통해 이메일 템플릿을 만들면, 알아서 email에서 사용할 수 있는 html로 변환해주고 손쉽게 관리할 수 있도록 도와줍니다.언틸에서도 아래와 같이 React-Email을 사용해 템플릿을 관리하고 있습니다.<img src="https://image.until.blog/morethanmin/article/1731747646091.png" data-width="100%" data-align="center" alt="2167">이 아티클에서는 React-Email을 사용하는 방법을 간략히 설명하겠습니다. 구체적인 가이드는 공식 문서를 참고해보시면 좋겠습니다. <h3>사용법</h3>아래 커맨드를 터미널에 입력하여 React-Email 프로젝트를 init할 수 있습니다.<pre spellcheck="false"><code class="language-bash">npx create-email@latest</code></pre>프로젝트를 열고 <code spellcheck="false">emails</code> 폴더 안에 컴포넌트 정의하듯이 만들고자 하는 이메일 템플릿을 만들면 됩니다. 아래는 react-email을 통해 만든 until 회원가입 템플릿입니다.<pre spellcheck="false"><code class="language-typescript">import {
 Body,
 Button,
 Container,
 Head,
 Html,
 Img,
 Link,
 Preview,
 Section,
 Text,
} from '@react-email/components'
import * as React from 'react'

type SignUpProps = {
 url?: string
}

const logoUrl = 'https://static.until.blog/logo.png'

export const SignUp = ({ url }: SignUpProps) =&gt; (
 &lt;Html&gt;
 &lt;Head /&gt;
 &lt;Preview&gt;until 회원가입 인증 요청&lt;/Preview&gt;
 &lt;Body style={main}&gt;
 &lt;Container style={container}&gt;
 &lt;Img
 src={logoUrl}
 width="48"
 height="48"
 style={{ borderRadius: '50%', margin: '0 auto' }}
 alt="Until"
 /&gt;

 &lt;Text
 style={{
 fontSize: '24px',
 lineHeight: 1.25,
 textAlign: 'center',
 fontWeight: 'bold',
 }}
 &gt;
 회원가입 인증 요청
 &lt;/Text&gt;
 &lt;Section style={section}&gt;
 &lt;Text style={text}&gt;환영합니다!&lt;/Text&gt;
 &lt;Text style={text}&gt;
 회원가입을 계속하려면 아래 버튼을 클릭해주세요. 만약 이 요청을 하지
 않으셨다면 무시하셔도 됩니다. 만약 계정에 문제가 있다면
 문의해주세요.
 &lt;/Text&gt;
 &lt;Button style={button} href={url}&gt;
 회원가입 인증
 &lt;/Button&gt;
 &lt;Text style={text}&gt;
 또는 아래 링크를 브라우저에 입력해주세요. &lt;br /&gt;
 &lt;Link style={link} href={url}&gt;
 {url}
 &lt;/Link&gt;
 &lt;/Text&gt;
 &lt;/Section&gt;
 &lt;/Container&gt;
 &lt;/Body&gt;
 &lt;/Html&gt;
)

SignUp.PreviewProps = {
 url: 'https://until.blog/login',
} as SignUpProps

export default SignUp

const main = {
 backgroundColor: '#ffffff',
 color: '#24292e',
 fontFamily:
 '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
}

const container = {
 maxWidth: '480px',
 margin: '0 auto',
 padding: '20px 0 48px',
}

const section = {
 padding: '24px',
 border: 'solid 1px #dedede',
 borderRadius: '5px',
 textAlign: 'center' as const,
}

const text = {
 margin: '0 0 10px 0',
 textAlign: 'left' as const,
}

const button = {
 margin: '20px 0',
 fontSize: '14px',
 backgroundColor: 'color(display-p3 0.276 0.384 0.837)',
 color: '#fff',
 lineHeight: 1.75,
 borderRadius: '0.5em',
 padding: '6px 16px',
}

const link = {
 color: '#0366d6',
 fontSize: '12px',
}</code></pre>이렇게 만들어진 이메일 템플릿을 개발서버에서 바로 전송해 테스트해볼 수도 있고, html 로 변환된 코드도 확인할 수 있습니다. <img src="https://image.until.blog/morethanmin/article/1731748353148.png" data-width="100%" data-align="center" alt="2168"><h2>결론</h2><ul><li>이메일 템플릿을 모던 웹 환경에서 체계적으로 관리해야한다면, React-email을 고려해보자</li></ul>

react-email을 사용하여 리액트 환경에서 이메일 템플릿을 편하게 관리하는 방법을 소개합니다.

React로 이메일 템플릿 쉽게 만들고 관리하기 (react-email)

Lyrics

<a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/-_uy5vWbeQg">https://youtu.be/-_uy5vWbeQg</a> I saw I missed your call 당신의 부재중 전화를 봤어요 Sorry for not picking up 받지 못해 미안해요 I got the job at the flower shop 난 요즘 꽃집에서 일해요 I sweep the floors but I'm talking to you 바닥을 쓸면서도 당신과 대화하고 있어요 I see your eyes in the delphinium too 델피니움에서도 당신의 눈을 봐요 I've become a servant to their blue 그들의 푸른색(델피니엄 블루)에 빠져버렸죠 (그들의 푸른색의 종이 되어버렸어요) Chin up 고개를 들고 Stay on task 일에 집중해요 Wash the windows 창문을 닦고 Count the cash 돈을 세어요 I picked up another couple of shifts 몇 번의 추가 근무를 맡았어요I hear your voice when I'm closing 가게 문을 닫을 때 당신의 목소리가 들려요 The nights fall like thorns off the roses 밤이 장미의 가시처럼 떨어져요 All around me the narcissus bloom 주변에 수선화가 피어나요 I picture the sun hitting you 태양이 당신을 비추는 모습을 상상해요 The air is filled with their perfume 공기는 그들의 향기로 가득하죠 Chin up 고개를 들고 Stay on task 일에 집중해요 Wash the windows 창문을 닦고 Count the cash 돈을 세어요 Cut the stems 줄기를 잘라 To make them last 오래 가게 해요&nbsp; Keep it cool 시원하게 유지시켜요 Bеhind the glass 유리 뒤에서 With their perfumе 그들의 향기와 함께 * Toolog 번역 시리즈는 Deepl, 파파고, Gemini, Mistral, Claude, Chatgpt, Perplexity, Pi, Hugging Chat, Hinative, Khoj 등의 번역기 및 플랫폼의 도움을 받습니다.(번역 자체가 부정확할 수 있습니다.)

https://youtu.be/-_uy5vWbeQgI saw I missed your call당신의 부재중 전화를 봤어요Sorry for not picking up받지 못해 미안해요I got the job at the flower shop난 요즘 꽃집에서 일해요I sweep the floors but I'm talking to you바닥을 쓸면서도 당신과 

Cassandra jenkins - Delphnium Blue(가사 번역)

<a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/tCp0vukTNMo">https://youtu.be/tCp0vukTNMo</a> Sweet baby 사랑스러운 아가야 Like you, I emerged 나도 너처럼 어떤 불확실한 From a certain uncertain chaos 혼돈으로부터 태어났지 They say those who are quickest, survive 사람들은 말해, 가장 빠른 자가 살아남고 And those who are strongest, thrive 가장 강한 자가 번성한다고 But I never want to get all the things that I want 하지만 난 원하는 모든 걸 얻고 싶진 않아 How awful would that be for me? 그건 내게 얼마나 끔찍할까? I’m happier here, slow 나는 여기서 행복해, 느리게 And indulgent in the sun 태양아래 느긋하게 I’m happier here, weak 나는 여기서 행복해, 약하게 Let the night come when it comes 밤이 오면 그냥 오게 둬 Sweet baby 사랑스러운 아가야 Never thought I’d be the one 내 스스로 내 패배를 To accept my own defеat 받아들일 줄 몰랐어 I know if I’d been quicker, I’d have survived 알아, 내가 더 빨랐다면 살아남았고 And if I’d been strongеr, I’d have thrived 더 강했다면 번성했겠지 But I never want to get all the things that I want 하지만 난 원하는 모든 걸 얻고 싶진 않아 How awful would that be for me? 그건 내게 얼마나 끔찍할까? I’m happier here, slow 나는 여기서 행복해, 느리게 And indulgent in the sun 태양아래 느긋하게 I’m happier here, weak 나는 여기서 행복해, 약하게 Let the night come when it comes 밤이 오면 그냥 오게 둬<hr> * Toolog 번역 시리즈는 Deepl, 파파고, Gemini, Mistral, Claude, Chatgpt, Perplexity, Pi, Hugging Chat, Hinative, Khoj 등의 번역기 및 플랫폼의 도움을 받습니다.(번역 자체가 부정확할 수 있습니다.)

https://youtu.be/tCp0vukTNMoSweet baby사랑스러운 아가야Like you, I emerged나도 너처럼 어떤 불확실한From a certain uncertain chaos혼돈으로부터 태어났지They say those who are quickest, survive사람들은 말해, 가장 빠른 자가 살아남고And those who are

Lightning Bug - On Paradise(가사 번역)

🍎 Mac

<blockquote>해당 아티클은 mac 기준으로 작성되었습니다. window의 경우에는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://until.blog/@morethanmin/%EC%9C%88%EB%8F%84%EC%9A%B0%EC%97%90%EC%84%9C-winget%EC%9C%BC%EB%A1%9C-fnm-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0--fast-node-manager-">이 아티클</a>을 참고해주세요.</blockquote>node를 사용해 개발하다보면 다양한 node 버전에서 개발이 필요한 경우가 있습니다. 실제로 여러 프로젝트를 살펴보면 <code spellcheck="false">.nvmrc</code> 라는 파일에 node 버전이 표시되어있는 경우도 종종 볼 수 있는데요.이럴 때 사용할 수 있는 것이 바로 nvm(node version manager)입니다. nvm은 여러 버전의 node를 설치하고 실행할 수 있도록 도와주고, 또 <code spellcheck="false">.nvmrc</code> 파일을 읽어들여 프로젝트에 맞는 node 버전을 자동으로 설정해줄 수도 있습니다.<h1>NVM 설치하기</h1>아래 커맨드를 터미널에 입력하여 nvm을 설치해봅시다. curl또는 wget또는 brew 통해 설치하시면 됩니다.<h2>curl</h2><pre spellcheck="false"><code class="language-bash">curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash</code></pre><h2>wget</h2><pre spellcheck="false"><code class="language-bash">wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash</code></pre><h2>brew</h2><pre spellcheck="false"><code class="language-bash">brew install nvm</code></pre><h1>환경변수 설정</h1>nvm을 설치하셨다면 환경 변수를 설정해야합니다. 본인의 터미널 환경에 맞게 <code spellcheck="false">~/.bash_profile</code>, <code spellcheck="false">~/.zshrc</code>, <code spellcheck="false">~/.profile</code>, <code spellcheck="false">~/.bashrc</code> 중 한곳으로 이동하여 아래 추가하시면 됩니다.<pre spellcheck="false"><code class="language-bash">export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] &amp;&amp; printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] &amp;&amp; \. "$NVM_DIR/nvm.sh" # This loads nvm</code></pre>이후 터미널을 재부팅하거나 아래 커맨드를 입력하면 환경변수가 적용됩니다.<pre spellcheck="false"><code>source ~/.bash_profile</code></pre><h1>nvm 사용법</h1>가장 많이 사용하는 명령어 위주로 알아보겠습니다.<ul><li><code spellcheck="false">nvm ls</code>: 현재 설치된 node 버전을 확인할 수 있습니다.</li><li><code spellcheck="false">nvm use &lt;version&gt;</code>: 특정 버전의 node를 사용합니다. 커맨드를 실행하는 디렉터리에 <code spellcheck="false">.nvmrc</code> 를 통해 버전이 명시되어있다면 version을 생략할 수 있어요.</li><li><code spellcheck="false">nvm install &lt;version&gt;</code> : 특정 버전의 node를 설치합니다.</li><li><code spellcheck="false">nvm uninstall &lt;version&gt;</code> : 특정 버전의 node를 제거합니다.</li></ul><h1><code spellcheck="false">.nvmrc</code> </h1>프로젝트 root에 <code spellcheck="false">.nvmrc</code>파일을 생성하고 현재 노드버전을 입력해두면 해당 프로젝트에서 사용하는 node 버전을 명시해 둘 수 있고, <code spellcheck="false">nvm use</code>를 통해 바로 해당 버전의 node를 사용할 수 있습니다.<h1>프로젝트별 node 버전 자동으로 적용하기</h1>현재 디렉터리에 <code spellcheck="false">.nvmrc</code> 가 존재하는지 확인하고 있다면 nvm use를 자동으로 실행하는 스크립트를 적용시켜봅시다.<h2>script 사용하는 방법</h2><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/nvm-sh/nvm?tab=readme-ov-file#deeper-shell-integration">공식문서</a>에 나와있는 스크립트를 사용하여 적용할 수 있습니다. bash와 zsh 터미널에 대한 스크립트를 제공하고 있습니다. 둘 중 본인이 사용하는 터미널에 맞는 스크립트를 적용하시면 됩니다.<h2>bash</h2>아래 코드를 <code spellcheck="false">$HOME/.bashrc</code>에 입력후 저장해주면 됩니다. <pre spellcheck="false"><code>cdnvm() {
 command cd "$@" || return $?
 nvm_path="$(nvm_find_up .nvmrc | command tr -d '\n')"

 # If there are no .nvmrc file, use the default nvm version
 if [[ ! $nvm_path = *[^[:space:]]* ]]; then

 declare default_version
 default_version="$(nvm version default)"

 # If there is no default version, set it to `node`
 # This will use the latest version on your machine
 if [ $default_version = 'N/A' ]; then
 nvm alias default node
 default_version=$(nvm version default)
 fi

 # If the current version is not the default version, set it to use the default version
 if [ "$(nvm current)" != "${default_version}" ]; then
 nvm use default
 fi
 elif [[ -s "${nvm_path}/.nvmrc" &amp;&amp; -r "${nvm_path}/.nvmrc" ]]; then
 declare nvm_version
 nvm_version=$(&lt;"${nvm_path}"/.nvmrc)

 declare locally_resolved_nvm_version
 # `nvm ls` will check all locally-available versions
 # If there are multiple matching versions, take the latest one
 # Remove the `-&gt;` and `*` characters and spaces
 # `locally_resolved_nvm_version` will be `N/A` if no local versions are found
 locally_resolved_nvm_version=$(nvm ls --no-colors "${nvm_version}" | command tail -1 | command tr -d '\-&gt;*' | command tr -d '[:space:]')

 # If it is not already installed, install it
 # `nvm install` will implicitly use the newly-installed version
 if [ "${locally_resolved_nvm_version}" = 'N/A' ]; then
 nvm install "${nvm_version}";
 elif [ "$(nvm current)" != "${locally_resolved_nvm_version}" ]; then
 nvm use "${nvm_version}";
 fi
 fi
}

alias cd='cdnvm'
cdnvm "$PWD" || exit</code></pre><h2>zsh</h2><pre spellcheck="false"><code># place this after nvm initialization!
autoload -U add-zsh-hook

load-nvmrc() {
 local nvmrc_path
 nvmrc_path="$(nvm_find_nvmrc)"

 if [ -n "$nvmrc_path" ]; then
 local nvmrc_node_version
 nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

 if [ "$nvmrc_node_version" = "N/A" ]; then
 nvm install
 elif [ "$nvmrc_node_version" != "$(nvm version)" ]; then
 nvm use
 fi
 elif [ -n "$(PWD=$OLDPWD nvm_find_nvmrc)" ] &amp;&amp; [ "$(nvm version)" != "$(nvm version default)" ]; then
 echo "Reverting to nvm default version"
 nvm use default
 fi
}

add-zsh-hook chpwd load-nvmrc
load-nvmrc</code></pre><h2>vsCode extension 사용하기</h2>만약 본인이 vsCode를 사용한다면 <a target="_blank" rel="noopener noreferrer nofollow" href="https://marketplace.visualstudio.com/items?itemName=henrynguyen5-vsc.vsc-nvm">vsc-nvm</a> 익스텐션을 사용할 수도 있습니다.해당 extension을 설치하고 vscode를 재부팅하면 바로 적용됩니다.

해당 아티클은 mac 기준으로 작성되었습니다. window의 경우에는 이 아티클을 참고해주세요.node를 사용해 개발하다보면 다양한 node 버전에서 개발이 필요한 경우가 있습니다. 실제로 여러 프로젝트를 살펴보면 .nvmrc 라는 파일에 node 버전이 표시되어있는 경우도 종종 볼 수 있는데요.이럴 때 사용할 수 있는 것이 바로 nvm(node versi

nvm 으로 node 버전 관리하기 (+ 자동화)

안녕하세요! 저는 Javascript를 실무에서 거의 4년 이상 사용하고있는 개발자 노바 입니다! 업무를 진행하면서 유용한 팁들을 개인적으로만 정리하고 있었는데, 이런 좋은 사이트를 알게되어 더더욱 성장하길 바라는 마음에 공유해봅니다!<h2>1. 얕은 복사와 깊은 복사를 구분하기</h2><pre spellcheck="false"><code>const person = [{ name: 'Yoon' }, { age: 31 }]
const shallowCopy = [...person]
const deepCopy = structuredClone(person)
shallowCopy[0].name = 'Kim'
console.log(person[0].name) // 'Kim'
deepCopy[0].name = 'Kwon'
console.log(person[0].name) // 'Kim'</code></pre>얕은복사의 경우 복사본의 Object Value를 변경하면 원본까지 변경되어 버립니다. 깊은복사를 이용하면 복사본의 값만 변경 할 수 있습니다.<h2>2. 배열과 객체의 순환 방법</h2><pre spellcheck="false"><code>/* Array */
const arr = [1, 2, 3, 4, 5]

for (const element of arr) {
 console.log(element) // 1, 2, 3, 4, 5
}
/* Object */
const obj = { a: 1, b: 2, c: 3 }

for (const key in obj) {
 console.log(obj[key]) // 1, 2, 3
}</code></pre>for in으로 object를 순환 할 수 있고, for of로 배열 순환을 축약 할 수 있습니다.<h2>3. 값이 있는지 간단하게 체크하기</h2><pre spellcheck="false"><code>const auth = { user: '' }
console.log(!!auth.user) // false</code></pre>!! 연산자로 객체에 값이 존재하는지 유/무를 쉽게 체크 할 수 있습니다.<h2>4. 비슷한 값을 가진 배열을 비교하여 값 추출하기</h2><pre spellcheck="false"><code>// 단순배열 (긴 배열을 filter 앞에, 짧은 배열을 find 앞에)
const a = [1, 2]
const b = [3, 4, 1]const diff = b.filter(v =&gt; !a.find(v2 =&gt; v === v2)) // [3, 4]
const not = a.filter(v =&gt; !b.find(v2 =&gt; v === v2)) // [2]
// 객체배열 (긴 배열을 filter 앞에, 짧은 배열을 find 앞에)
const a = [{name: 'Y', age: 20}, {name: 'D', age: 19}]
const b = [{name: 'Y', age: 20}, {name: 'M', age: 20}, {name: 'D', age: 19}]
const diff = b.filter(v =&gt; !a.find(v2 =&gt; JSON.stringify(v) === JSON.stringify(v2))) // { name: 'M', age: 20 }</code></pre>비슷한 배열간의 다른값만 추출해야 하는 경우가 종종 생길때 사용 할 수있습니다.<h2>5. 파일 데이터를 쉽게 처리하기</h2><pre spellcheck="false"><code>Promise.all[...event.target.files].map(file =&gt; files.push(file)))</code></pre>file 태그에서 파일을 여러개 선택하거나, 단일로만 선택 할 경우, 파일 객체 자체를 form-data로 넘기는 경우가 많습니다. 이럴때 두가지 케이스 모두 대응하기에 좋습니다.<h2>6. 랜덤한 6자리 난수 쉽게 생성하기</h2><pre spellcheck="false"><code>Math.floor(100000 + Math.random() * 900000)</code></pre>6자리의 난수를 생성해야 할 때(주로 인증번호) 사용하면 좋습니다.<h2>7. UUID 쉽게 생성하기</h2><pre spellcheck="false"><code>// Browser
self.crypto.randomUUID()
// Node.js &gt;= 19.0
import Crypto from "crypto"
Crypto.randomUUID()</code></pre>예전엔 uuid 생성을 위해 특정 라이브러리 설치가 필요했었지만, 이제는 간단하게 생성이 가능합니다.<h2>8. 배열 중복제거하기</h2><pre spellcheck="false"><code>// 단순배열 중복제거
const arr = [2, 2]
const arr2 = [...new Set(arr)]

// 객체배열 중복제거
const example = [{ id: 123 }, { id: 456 }, { id: 123 }]
example.filter(
(arr, index, callback) =&gt; index === callback.findIndex(t =&gt; t.id === arr.id)
)</code></pre>배열안의 중복된 값을 간단하게 제거 할 수 있습니다.

안녕하세요! 저는 Javascript를 실무에서 거의 4년 이상 사용하고있는 개발자 노바 입니다!업무를 진행하면서 유용한 팁들을 개인적으로만 정리하고 있었는데, 이런 좋은 사이트를 알게되어 더더욱 성장하길 바라는 마음에 공유해봅니다!1. 얕은 복사와 깊은 복사를 구분하기const person = [{ name: 'Yoon' }, { age: 31 }]
co

알아두면 유용한 8가지 자바스크립트 팁

Git 기본 이해 - 기본 명령어의 이해, 충돌 해결, github

Spring

<h1>적용한 이유</h1>'Test는 어느 환경에서나 미리 구축할 필요없이 작동해야한다.' 라는 개념과 어디에서나 자동으로 동일한 테스트 환경을 구축하는 라이브러리가 없을까? 라는 생각으로 출발하여 Test 실행시 서버 테스트에 필요한 환경을 자동으로 구축해주는 라이브러리를 찾아보았습니다.역시나 TestContainer 라는 착한 친구가 이미 만들어져 있었죠. <img src="https://velog.velcdn.com/images/itbuddy/post/33e9a70f-6458-4a6e-b8f4-00ae7619be43/image.png">이 라이브러리를 사용하면 Docker container 를 통하여 테스트 실행시 자동으로 환경을 구축해 주고 테스트가 끝나면 자동으로 정리까지 해줍니다. 이를 통해 h2로 테스트하고 배포는 Mysql로 하면서 몰려오는 찝찝함 또한 해결이 가능합니다.Testcontainers의 장점으로는 다음이 있습니다.<blockquote><ol><li>개발자 친화적: 테스트 코드를 작성하는데 필요한 의존성과 환경 구성을 최소화하여, 개발자가 테스트에만 집중할 수 있게 해줍니다.</li><li>환경 독립성: 도커사용으로 로컬환경, CI/CD 파이프라인, 프로덕션 환경 등에서 동일한 테스트 환경을 구축할 수 있습니다.</li><li>높은 확장성: 다양한 서비스와 애플리케이션을 지원하므로, 필요한 경우 새로운 서비스 추가와 기존 서비스를 업데이트하기 쉽습니다.</li></ol></blockquote><h2>적용</h2><h4>build.gradle</h4><pre spellcheck="false"><code class="language-java">dependencies {
	...
	// TestContainer 기본 의존성
 testImplementation "org.testcontainers:testcontainers:1.20.1"
	// MySQL 의존성
 testImplementation 'org.testcontainers:mysql:1.20.1'
	// Redis 의존성
 testImplementation "com.redis.testcontainers:testcontainers-redis-junit:1.6.4"
	// Kafka 의존성
 testImplementation "org.testcontainers:kafka:1.20.1"
 ...
 }</code></pre><h4><a target="_blank" rel="noopener noreferrer nofollow" href="http://TestContainerConfig.java">TestContainerConfig.java</a></h4><pre spellcheck="false"><code class="language-java">package org.kakaopay.coffee.config;

import jakarta.validation.constraints.NotNull;
import java.io.File;
import java.util.HashMap;
import java.util.Map;
import org.junit.jupiter.api.extension.BeforeAllCallback;
import org.junit.jupiter.api.extension.ExtensionContext;
import org.springframework.boot.test.util.TestPropertyValues;
import org.springframework.context.ApplicationContextInitializer;
import org.springframework.context.ConfigurableApplicationContext;
import org.springframework.test.context.ActiveProfiles;
import org.testcontainers.containers.DockerComposeContainer;
import org.testcontainers.containers.KafkaContainer;
import org.testcontainers.containers.wait.strategy.Wait;
import org.testcontainers.utility.DockerImageName;

@ActiveProfiles("test")
public class TestContainerConfig implements BeforeAllCallback {

 private static final DockerComposeContainer&lt;?&gt; DOCKER_COMPOSE = new DockerComposeContainer&lt;&gt;(
 new File("src/test/resources/docker-compose.yml"))
 .withExposedService("mysql", 3306, Wait.forLogMessage(".*ready for connections.*", 1))
 .withExposedService("redis", 6379,
 Wait.forLogMessage(".*Ready to accept connections.*", 1));

 private static final KafkaContainer KAFKA_CONTAINER = new KafkaContainer(
 DockerImageName.parse("confluentinc/cp-kafka:7.5.0"));

 @Override
 public void beforeAll(ExtensionContext extensionContext) throws Exception {
 // MySQL 컨테이너 시작
 // Redis 컨테이너 시작
 DOCKER_COMPOSE.start();

 // Kafka 컨테이너 시작
 KAFKA_CONTAINER.start();
 }

 public static class IntegrationTestInitializer implements
 ApplicationContextInitializer&lt;ConfigurableApplicationContext&gt; {

 @Override
 public void initialize(@NotNull ConfigurableApplicationContext applicationContext) {
 Map&lt;String, String&gt; properties = new HashMap&lt;&gt;();

 // 각 서비스의 연결 정보 설정
 setKafkaProperties(properties);
 setDatabaseProperties(properties);
 setRedisProperties(properties);

 // 애플리케이션 컨텍스트에 속성값 적용
 TestPropertyValues.of(properties).applyTo(applicationContext);
 }

 // Kafka 연결 정보 설정
 private void setKafkaProperties(Map&lt;String, String&gt; properties) {
 properties.put("spring.kafka.bootstrap-servers", KAFKA_CONTAINER.getBootstrapServers());
 }

 // 데이터베이스 연결 정보 설정
 private void setDatabaseProperties(Map&lt;String, String&gt; properties) {

 String rdbmsHost = DOCKER_COMPOSE.getServiceHost("mysql", 3306);
 int rdbmsPort = DOCKER_COMPOSE.getServicePort("mysql", 3306);
 properties.put("spring.datasource.url",
 "jdbc:mysql://" + rdbmsHost + ":" + rdbmsPort + "/coffee-test");
 properties.put("spring.datasource.username", "root");
 properties.put("spring.datasource.password", "1234");
 }

 // Redis 연결 정보 설정
 private void setRedisProperties(Map&lt;String, String&gt; properties) {

 String redisHost = DOCKER_COMPOSE.getServiceHost("redis", 6379);
 Integer redisPort = DOCKER_COMPOSE.getServicePort("redis", 6379);
 properties.put("spring.data.redis.host", redisHost);
 properties.put("spring.data.redis.port", redisPort.toString());
 }
 }
}
</code></pre><h4>docker-compose.yml</h4><pre spellcheck="false"><code class="language-yaml"># Use root/example as user/password credentials
version: '3.1'

services:

 mysql:
 image: mysql:latest
 restart: always
 environment:
 MYSQL_DATABASE: coffee-test
 MYSQL_ROOT_PASSWORD: 1234
 ports:
 - 33066:3306 # 테스트 환경에서 호스트 매칭(예: 3306:3306) 을 생략하면 포트 충돌을 피할 수 있습니다. - 외부와 포트와 연결한다면 외부 클라이언트에서 접속이 가능합니다

 redis:
 image: redis:6
 restart: always
 ports:
 - 63799:6379 # 테스트 환경에서 호스트 매칭(예: 6379:6379) 을 생략하면 포트 충돌을 피할 수 있습니다. - 외부와 포트와 연결한다면 외부 클라이언트에서 접속이 가능합니다
</code></pre><h4>사용법</h4>@ExtendWith(TestContainerConfig.class) 로 해당 Config 파일을 사용하고@ContextConfiguration(initializers = TestContainerConfig.IntegrationTestInitializer.class) 를 통하여 yaml 설정을 덮어 씁니다.<pre spellcheck="false"><code class="language-java">package org.kakaopay.coffee.api.order;

import static org.assertj.core.api.Assertions.assertThat;
import static org.assertj.core.api.Assertions.tuple;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.CountDownLatch;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.DisplayName;
import org.junit.jupiter.api.Nested;
import org.junit.jupiter.api.Test;
import org.junit.jupiter.api.extension.ExtendWith;
import org.kakaopay.coffee.api.order.request.OrderServiceRequest;
import org.kakaopay.coffee.api.order.response.OrderResponse;
import org.kakaopay.coffee.config.TestContainerConfig;
import org.kakaopay.coffee.db.menu.MenuEntity;
import org.kakaopay.coffee.db.menu.MenuJpaManager;
import org.kakaopay.coffee.db.menu.MenuJpaReader;
import org.kakaopay.coffee.db.order.OrderJpaManager;
import org.kakaopay.coffee.db.order.OrderJpaReader;
import org.kakaopay.coffee.db.ordermenu.OrderMenuEntity;
import org.kakaopay.coffee.db.ordermenu.OrderMenuJpaManager;
import org.kakaopay.coffee.db.ordermenu.OrderMenuJpaReader;
import org.kakaopay.coffee.db.user.UserEntity;
import org.kakaopay.coffee.db.user.UserJpaManager;
import org.kakaopay.coffee.db.user.UserJpaReader;
import org.kakaopay.coffee.db.userpointhistory.UserPointHistoryEntity;
import org.kakaopay.coffee.db.userpointhistory.UserPointHistoryJpaManager;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.ActiveProfiles;
import org.springframework.test.context.ContextConfiguration;

@ActiveProfiles("test")
@SpringBootTest
@ExtendWith(TestContainerConfig.class)
@ContextConfiguration(initializers = TestContainerConfig.IntegrationTestInitializer.class)
class OrderServiceTest {

 private Long MENU_ID = null;
 private final Integer CONCURRENT_COUNT = 10;
 private final int INIT_USER_POINT = 10000;



</code></pre><h4>spring boot test log</h4>로그를 잘 보시면 Docker container를 올리는 과정에 대한 로그를 확일할 수 있습니다.<pre spellcheck="false"><code class="language-null">
...

18:39:13.253 [main] INFO org.testcontainers.DockerClientFactory -- Testcontainers version: 1.20.1
18:39:13.328 [main] INFO org.testcontainers.dockerclient.DockerClientProviderStrategy -- Loaded org.testcontainers.dockerclient.UnixSocketClientProviderStrategy from ~/.testcontainers.properties, will try it first
18:39:13.444 [main] INFO org.testcontainers.dockerclient.DockerClientProviderStrategy -- Found Docker environment with local Unix socket (unix:///var/run/docker.sock)
18:39:13.445 [main] INFO org.testcontainers.DockerClientFactory -- Docker host IP address is localhost
18:39:13.453 [main] INFO org.testcontainers.DockerClientFactory -- Connected to docker: 
 Server Version: 26.1.4
 API Version: 1.45
 Operating System: OrbStack
 Total Memory: 15966 MB
18:39:13.453 [main] INFO org.testcontainers.utility.RyukResourceReaper -- Ryuk started - will monitor and terminate Testcontainers containers on JVM exit
18:39:13.453 [main] INFO org.testcontainers.DockerClientFactory -- Checking the system...
18:39:13.453 [main] INFO org.testcontainers.DockerClientFactory -- ✔︎ Docker server version should be at least 1.6.0
18:39:13.469 [main] INFO tc.testcontainers/ryuk:0.8.1 -- Creating container for image: testcontainers/ryuk:0.8.1
18:39:13.556 [main] INFO org.testcontainers.utility.RegistryAuthLocator -- Credential helper/store (docker-credential-osxkeychain) does not have credentials for https://index.docker.io/v1/
18:39:13.692 [main] INFO tc.testcontainers/ryuk:0.8.1 -- Container testcontainers/ryuk:0.8.1 is starting: a4d620da1113b2d46f28a94f9b4ff4c4ed423c114af995f9600197de7c3d560d
18:39:13.894 [main] INFO tc.testcontainers/ryuk:0.8.1 -- Container testcontainers/ryuk:0.8.1 started in PT0.424823S
18:39:13.896 [main] INFO org.testcontainers.containers.ComposeDelegate -- Preemptively checking local images for 'mysql:latest', referenced via a compose file or transitive Dockerfile. If not available, it will be pulled.
18:39:13.897 [main] INFO org.testcontainers.containers.ComposeDelegate -- Preemptively checking local images for 'redis:6', referenced via a compose file or transitive Dockerfile. If not available, it will be pulled.
18:39:13.899 [main] INFO tc.docker/compose:1.29.2 -- Copying all files in /Users/itbuddy/github/kakaopay-coffe/src/test/resources into the container
18:39:13.900 [main] INFO tc.docker/compose:1.29.2 -- Creating container for image: docker/compose:1.29.2
18:39:14.216 [main] INFO tc.docker/compose:1.29.2 -- Container docker/compose:1.29.2 is starting: 14b6d71b42e36249d0a2d8aea847fd9149200db7052223b719b4e1b631015ce3
18:39:14.308 [main] WARN tc.docker/compose:1.29.2 -- The architecture 'amd64' for image 'docker/compose:1.29.2' (ID sha256:32d8a4638cd83922fdd94cadf4f1850b595d29757488c73adf05f4b99ebd1318) does not match the Docker server architecture 'arm64'. This will cause the container to execute much more slowly due to emulation and may lead to timeout failures.
18:39:15.400 [main] INFO tc.docker/compose:1.29.2 -- Container docker/compose:1.29.2 started in PT1.499759S
18:39:15.401 [main] INFO tc.docker/compose:1.29.2 -- Docker Compose container is running for command: up -d
18:39:15.404 [docker-java-stream-2029356766] INFO tc.docker/compose:1.29.2 -- STDERR: Creating network "a8zq7zhzpnah_default" with the default driver
18:39:15.404 [docker-java-stream-2029356766] INFO tc.docker/compose:1.29.2 -- STDERR: Creating a8zq7zhzpnah_redis_1 ... 
18:39:15.405 [docker-java-stream-2029356766] INFO tc.docker/compose:1.29.2 -- STDERR: Creating a8zq7zhzpnah_mysql_1 ... 
18:39:15.405 [docker-java-stream-2029356766] INFO tc.docker/compose:1.29.2 -- STDERR: Creating a8zq7zhzpnah_mysql_1 ... done
18:39:15.405 [docker-java-stream-2029356766] INFO tc.docker/compose:1.29.2 -- STDERR: Creating a8zq7zhzpnah_redis_1 ... done
18:39:15.408 [main] INFO tc.docker/compose:1.29.2 -- Docker Compose has finished running
18:39:15.408 [main] INFO tc.alpine/socat:1.7.4.3-r0 -- Creating container for image: alpine/socat:1.7.4.3-r0
18:39:15.442 [main] INFO tc.alpine/socat:1.7.4.3-r0 -- Container alpine/socat:1.7.4.3-r0 is starting: ea9eb968711ccf44106d2ec3a184809d58935c41d60e33ea90ecbcc2a382768e
18:39:15.618 [main] INFO tc.alpine/socat:1.7.4.3-r0 -- Container alpine/socat:1.7.4.3-r0 started in PT0.209128S
18:39:19.349 [main] INFO tc.confluentinc/cp-kafka:7.5.0 -- Creating container for image: confluentinc/cp-kafka:7.5.0
18:39:19.409 [main] INFO tc.confluentinc/cp-kafka:7.5.0 -- Container confluentinc/cp-kafka:7.5.0 is starting: 96158a8797752a2fdc11717b7874d74255ffd5dd871fbfa9aa89cc0fe941a9c7
18:39:21.672 [main] INFO tc.confluentinc/cp-kafka:7.5.0 -- Container confluentinc/cp-kafka:7.5.0 started in PT2.323717S
18:39:21.680 [main] INFO org.springframework.test.context.support.AnnotationConfigContextLoaderUtils -- Could not detect default configuration classes for test class [org.kakaopay.coffee.api.user.UserServiceTest]: UserServiceTest does not declare any static, non-private, non-final, nested classes annotated with @Configuration.
18:39:21.683 [main] INFO org.springframework.boot.test.context.SpringBootTestContextBootstrapper -- Found @SpringBootConfiguration org.kakaopay.coffee.CoffeeApplication for test class org.kakaopay.coffee.api.user.UserServiceTest$Login
18:39:21.686 [main] INFO org.testcontainers.containers.ComposeDelegate -- Preemptively checking local images for 'mysql:latest', referenced via a compose file or transitive Dockerfile. If not available, it will be pulled.
18:39:21.686 [main] INFO org.testcontainers.containers.ComposeDelegate -- Preemptively checking local images for 'redis:6', referenced via a compose file or transitive Dockerfile. If not available, it will be pulled.
18:39:21.686 [main] INFO tc.docker/compose:1.29.2 -- Copying all files in /Users/itbuddy/github/kakaopay-coffe/src/test/resources into the container
18:39:21.686 [main] INFO tc.docker/compose:1.29.2 -- Creating container for image: docker/compose:1.29.2
18:39:21.778 [main] INFO tc.docker/compose:1.29.2 -- Container docker/compose:1.29.2 is starting: 7ca84f83d1799d311632c78faeee10aed080ad8cb57127f9aec64934019529ac
18:39:21.865 [main] WARN tc.docker/compose:1.29.2 -- The architecture 'amd64' for image 'docker/compose:1.29.2' (ID sha256:32d8a4638cd83922fdd94cadf4f1850b595d29757488c73adf05f4b99ebd1318) does not match the Docker server architecture 'arm64'. This will cause the container to execute much more slowly due to emulation and may lead to timeout failures.
18:39:22.660 [main] INFO tc.docker/compose:1.29.2 -- Container docker/compose:1.29.2 started in PT0.973538S
18:39:22.661 [main] INFO tc.docker/compose:1.29.2 -- Docker Compose container is running for command: up -d
18:39:22.662 [docker-java-stream--1092898408] INFO tc.docker/compose:1.29.2 -- STDERR: a8zq7zhzpnah_redis_1 is up-to-date
18:39:22.662 [docker-java-stream--1092898408] INFO tc.docker/compose:1.29.2 -- STDERR: a8zq7zhzpnah_mysql_1 is up-to-date
18:39:22.664 [main] INFO tc.docker/compose:1.29.2 -- Docker Compose has finished running

.....</code></pre><h2>적용후 장단점</h2><h3>장점</h3><ol><li>CI/CD 에서도 문제없이 작동한다는 점 (물론 설정 미스 때문에 한번에 성공하지는 못했습니다.)</li><li>테스트를 위해 따로 mysql, Kafka, redis를 구축할 필요가 없어졌습니다.</li><li>h2 로 테스트 중에는 디버깅으로 진행 단계를 멈추고 데이터 베이스를 확인 하고 싶어도 h2 서버에 접근할 수가 없었지만, TestContainer는 외부 포트 설정만 해주면 Datagrip으로 접근하여 데이터를 두눈으로 직접 확인이 가능합니다.</li></ol><h3>단점</h3><ol><li>테스트가 속도가 눈에 띄게 느려졌습니다. 테스트 환경구성에 필요한 Docker Image를 이미 모두 다운 받았더라도 컨테이너 4개 기준 7초 정도 걸리고, 도커 이미지를 모두 새로 다운 받아야 한다면 1분 이상의 시간이 더 소요 됩니다. (특히 CI/CD 에서는 매번 새로운 이미지를 받아 실행합니다. 이를 해결할 방법도 찾아봐야 겠습니다.)</li></ol><h3>느낀점</h3>단점도 있지만 개발자가 구축해야 하는 테스트 환경 TestContainer가 직접 해주니 편안합니다. 시간이 7초나 더 소요 되지만 개발자가 직접 구축한다면 개발자 마다 1~2시간은 족히 걸릴 일입니다.이제 저와 같이 일하는 동료가 TDD와 TestContainer 까지 2명이 되었네요.참고 <a target="_blank" rel="noopener noreferrer nofollow" href="https://dev.gmarket.com/76">지마켓 Testcontainers로 통합테스트 만들기</a>

TestContainers 적용기

<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의 사용법이 다르다는 것, 알고 계셨나요? 저는 몰라서 고생 좀 했습니다.