<p>안녕하세요! 저는 Javascript를 실무에서 거의 4년 이상 사용하고있는 개발자 노바 입니다!<br>업무를 진행하면서 유용한 팁들을 개인적으로만 정리하고 있었는데, 이런 좋은 사이트를 알게되어 더더욱 성장하길 바라는 마음에 공유해봅니다!</p><p></p><p></p><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><p>얕은복사의 경우 복사본의 Object Value를 변경하면 원본까지 변경되어 버립니다. 깊은복사를 이용하면 복사본의 값만 변경 할 수 있습니다.</p><p></p><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><p>for in으로 object를 순환 할 수 있고, for of로 배열 순환을 축약 할 수 있습니다.</p><p></p><h2>3. 값이 있는지 간단하게 체크하기</h2><pre spellcheck="false"><code>const auth = { user: '' }
console.log(!!auth.user) // false</code></pre><p>!! 연산자로 객체에 값이 존재하는지 유/무를 쉽게 체크 할 수 있습니다.</p><p></p><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><p>비슷한 배열간의 다른값만 추출해야 하는 경우가 종종 생길때 사용 할 수있습니다.</p><p></p><h2>5. 파일 데이터를 쉽게 처리하기</h2><pre spellcheck="false"><code>Promise.all[...event.target.files].map(file =&gt; files.push(file)))</code></pre><p>file 태그에서 파일을 여러개 선택하거나, 단일로만 선택 할 경우, 파일 객체 자체를 form-data로 넘기는 경우가 많습니다. 이럴때 두가지 케이스 모두 대응하기에 좋습니다.</p><p></p><h2>6. 랜덤한 6자리 난수 쉽게 생성하기</h2><pre spellcheck="false"><code>Math.floor(100000 + Math.random() * 900000)</code></pre><p>6자리의 난수를 생성해야 할 때(주로 인증번호) 사용하면 좋습니다.</p><p></p><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><p>예전엔 uuid 생성을 위해 특정 라이브러리 설치가 필요했었지만, 이제는 간단하게 생성이 가능합니다.</p><p></p><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><p>배열안의 중복된 값을 간단하게 제거 할 수 있습니다.</p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>

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

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

<p>- 뚱땅뚱땅 평화로운(?) 푸시알림 기능 개발 시간 -</p><p>예약 발송 기능이 필요해 방법을 알아보고 있었다.</p><p>어찌저찌 구글링을 통해 NestJS Task Scheduling - Dynamic timeouts에 대해 알게 되었다 !</p><p>스케줄러는 이미 사용해본 경험이 있었는데(매일 @@시 ##분 마다 동작 등), 동적으로 필요에 따라 생성했다 없앴다 할 수도 있었다니 ! (문서를 끝까지 읽어본 적이 없는 사람)</p><p>사용 방법은 어렵지 않아서 내가 원하는 타이밍에 푸시알림을 발송할 수 있게 되었다.<br>너무너무 단순하다! <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.nestjs.com/techniques/task-scheduling#dynamic-timeouts">진짜로</a></p><p></p><p>즉시 발송과 예약 발송 모두 잘 작동하는 것을 확인하고 필요한 곳 마다(6~7군데 정도) 알림 발송 코드를 때려 박았는데, 막상 이렇게 해놓고 나니 나중에 수정이 필요하거나 또 푸시알림이 필요한 곳이 생기면 같은 작업을 반복해야한다고 생각하니 좀 간지가 안나는 것 같아서 정리를 좀 하기로 했다.</p><p></p><p>일단 내가 원하는 것이 무엇인가 정리</p><ul class="tight" data-tight="true"><li><p>"특정 상황"에 유저에게 푸시알림을 보내야함 (FCM 사용)</p></li><li><p>즉시발송/예약발송</p></li><li><p>현재는 6~7가지 상황이 있지만 점점 늘어날 수 있음</p></li><li><p>특별한 경우를 제외하고 어드민 페이지에서 푸시알림을 관리하고 싶음</p><ul class="tight" data-tight="true"><li><p>발송상황, 발송타이밍, 메시지 내용 관리 / 발송 내역 관리 등</p></li></ul></li><li><p>위 내용은 단일 대상에게 자동으로 보내는 알림. 다수에게 보내는 수동 알림은 따로 처리</p></li></ul><p></p><p>필요한 api 마다 푸시알림을 쏘는 코드를 심는 것 보다는 한 지점(?)에서 처리하고 싶었는데 그러기 위해선 어떤 요청이 들어왔는지 구분하고 푸시알림이 필요한 요청 및 상황인지 판단, 알맞은 대상 및 내용 구성을 할 수 있어야 했다.</p><p></p><p>어떤 요청인지("특정 상황")는 요청 end point로 구분할 수 있다.</p><p>발송 대상은 요청에 jwt 토큰도 있고 앱에서 오는 요청이 아닌 경우(서비스 특성 상 서버가 임베디드와도 통신 중) 식별 가능한 데이터가 함께 담겨 있어 어렵지 않았다.</p><p>내용 역시 왔다갔다하는 데이터들로 충분히 구성할 수 있다.</p><p>즉시발송/예약발송은 0초 뒤 발송, n초 뒤 발송 으로 설정이 가능하다.</p><p></p><p>이런 점들을 바탕으로 DB를 꾸려보았다. 푸시알림을 보내길 원하는 상황과 내용을 미리 등록해둘 수 있도록.</p><pre spellcheck="false"><code class="language-typescript">{
   알림발송상황: "유저가 ~~한 상황";
   endPoint: "/request/endpoint";
   n밀리초뒤발송: 300000;
   푸시알림제목: "이것은";
   푸시알림내용: "name씨에게 보내는 푸시알림";
   내용에들어가는변수이름: ["name"];
   클릭시이동url: "어디어디";
}</code></pre><p>문제는 한 곳에서 처리하려면 과연 그 한 곳은 어디로 해야 좋을까 였다. 미들웨어, 인터셉터 등 뭔가 이것저것 알긴 아는데 정확한 작동 방식이나 그런 것을 아직 완전히 깨우치지 못한 상태라 GPT씨에게 상담 요청을 했다.</p><p>위 상황들을 죽 설명하고 어쩌면 좋을지 물어보니 그(?)(그녀?) 역시 미들웨어나 인터셉터에 심을 것을 추천해주었는데, 간단한 테스트와 모든 데이터를 처리한 뒤 응답을 보내기 직전에 푸시알림을 쏘고 싶다는 추가 질문으로 인터셉터를 활용하는 것으로 확정을 지었다.</p><p>이렇게 내가 원하던 대로 '한 곳' 까지 정해졌다.</p><p></p><p>- 뚱땅뚱땅 코딩 타임 -</p><p>그렇게 뚱땅뚱땅 코드를 작성해놓고 테스트를 하다보니 문제점들이 발견되었다.</p><ul class="tight" data-tight="true"><li><p>n시간 뒤 어떤 사람에게 발송하도록 예약해둔 메시지를 만약 그 사람이 특정 조건을 만족한 경우 예약을 취소해야 함</p></li><li><p>예약을 해둔 메시지들이 만약 서버가 재시작되면 스케줄러가 초기화되면서 사라짐</p></li></ul><p></p><p>여러 고민과 GPT씨와의 상담 끝에 두 가지 문제점 모두 스케줄러와 DB를 함께 활용해 해결할 수 있다는 결론을 내렸다.</p><p>첫번째 문제는 고유한 예약 번호와 함께 푸시알림 내역을 저장해뒀다가 원하는 상황에 예약을 취소할 수 있도록 했다. 예약을 취소하게 되는 상황은 당장에는 한가지 상황 뿐이라 중앙처리 말고 해당 api에서 하도록 했다.</p><p>나중에 조금 더 발전시킬 필요가 있을 것 같다.</p><p>두번째 문제는 발송 상태[발송완료/발송예약/발송취소]를 함께 저장해뒀다가 <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.nestjs.com/fundamentals/lifecycle-events">OnApplicationBootstrap</a>을 사용해 서버가 재시작될 때 발송예약 상태인 메시지들을 다시 스케줄러에 집어넣어주도록 했다.</p><p>어차피 발송 내역을 저장하기로 해서 DB도 이미 구성해뒀기 때문에 몇 개의 필드만 더 추가하면서 사건을 해결할 수 있었다.</p><p>대략적인 형태</p><pre spellcheck="false"><code class="language-typescript">import { Injectable, OnApplicationBootstrap } from '@nestjs/common';
import { firebaseAdmin } from 'src/config/firebase.config';
import { SchedulerRegistry } from '@nestjs/schedule';
@Injectable()
export class PushMessageService implements OnApplicationBootstrap {
	constructor(private readonly schedulerRegistry: SchedulerRegistry) {}
async onApplicationBootstrap() {
	// 발송예약 상태인 메시지들을 다시 스케줄러에 등록
}

async fcmSendMessage(message, sendAfterMilliSeconds, timeoutName, history) {
	const timeout = setTimeout(async () =&amp;gt; {
		await firebaseAdmin
			.messaging()
			.sendEachForMulticast(message)
			.then((res) =&amp;gt; {
				console.log('success: ', res);
		})
		.catch((err) =&amp;gt; {
			console.log('error: ', err);
		});        
    	// history(발송내역)를 사용해 에약발송인 경우 발송예약 &amp;amp;gt; 발송완료로 업데이트
    	// ~ code ~
	
    	// 발송한 뒤에 스케줄러에서 삭제
		this.schedulerRegistry.deleteTimeout(timeoutName);
		}, sendAfterMilliSeconds);
	this.schedulerRegistry.addTimeout(timeoutName, timeout);
}

async sendAutoPushMessage(endPoint) {
	// 인터셉터에서 호출해 사용
	// 푸시알림 보낼지 말지 판단 후 내용 구성해 발송 예약
}}</code></pre><p>이런식으로 구현을 해놓았지만 솔직히 지금도 마음에 썩 들지는 않아서 계속 고민 중이다. 조금 더 깔끔하게 할 수 있을 것 같은데 막 아이디어가 떠오르지는 않아서 다른거 할 거 하면서 계속 지켜보는 중이다..</p><p></p><p></p><p></p>

푸시알림 날리기

<h2>크롬 익스텐션</h2><ul class="tight" data-tight="true"><li><p><strong>user agent switcher</strong>: user agent 변경 (PC에서 모바일 화면을 볼 수 있음)</p></li><li><p><strong>awesome screenshot</strong>: 스크롤 캡쳐, 부분 캡쳐 및 녹화 등 가능 (가입 필요)</p></li><li><p><strong>svg export</strong>: 해당 사이트의 svg 이미지를 다운로드 할 수 있게 함</p></li><li><p><strong>image downloader</strong>: 해당 사이트의 이미지를 가져와 다운로드 할 수 있게 함</p></li><li><p><strong>openwax</strong>: 접근성 테스트, 문제가 있는 부분을 알려주고 경고함</p></li><li><p><strong>React developer Tool</strong>: React로 개발된 사이트에 접속할 시 아이콘에 색이 생김</p></li><li><p><strong>vue devtools</strong>: vue로 개발된 사이트에 접속할 시 아이콘에 색이 생김</p></li></ul><hr><h2>윈도우 응용 프로그램</h2><ul class="tight" data-tight="true"><li><p><strong>SVG Viewer Extension for Windows</strong>: 윈도우 탐색기에서 svg 이미지를 미리보기 하게 함</p></li></ul><hr><h2>vs code 익스텐션</h2><ul class="tight" data-tight="true"><li><p><strong>Atom One Dark Theme</strong>: 화면의 코드 컬러를 보기 좋게 변경함</p></li><li><p><strong>live server</strong>: 새로고침을 하지 않아도 저장할 시 바로 사이트에 반영됨</p></li><li><p><strong>beautify</strong>: html, css formatter</p></li><li><p><strong>prettier</strong>: 코드 formatter. 자바스크립트 코드 포멧 자동 변경</p></li></ul><h3>beautify 기본 설정</h3><ul class="tight" data-tight="true"><li><p>beautify selection 단축키지정(alt+b)</p></li><li><p>join lines 단축키지정(alt+j)</p></li></ul><h3>prettier 기본 설정</h3><ul class="tight" data-tight="true"><li><p>default formatter → prettier로 변경</p></li><li><p>settings → format on save 체크</p></li><li><p>prettier.singleQuote(default:false)</p><ul class="tight" data-tight="true"><li><p>체크, 문자열은 홑따옴표로 통일 (변수에 html이 있을 경우 쌍따옴표가 포함됨)</p></li></ul></li><li><p>css, html파일에서도 prettier가 적용되어 한줄로 작성이 불가능하다.</p><ul class="tight" data-tight="true"><li><p>이 경우 오히려 가독성이 떨어짐.</p></li><li><p>javascript를 위해서 사용한다고 생각하면 됨.</p></li></ul></li><li><p>위 문제를 해결하기 위해 .prettierignore 파일을 프로젝트 루트 폴더에 만들고 무시 규칙을 작성.</p><ul class="tight" data-tight="true"><li><p>무시 규칙</p></li></ul></li></ul><pre spellcheck="false"><code>#Ignore all HTML files:
\**/**.html#Ignore all css files:\**/**.css</code></pre><hr><h2>vs code 단축키</h2><ul class="tight" data-tight="true"><li><p><strong>f2</strong> : 파일명 변경</p></li><li><p><strong>ctrl+/</strong> : 주석으로 변경</p></li><li><p><strong>alt+shift+A</strong> : 부분주석</p></li><li><p><strong>alt+shift+방향키 상하</strong> : 해당 줄 복사</p></li><li><p><strong>shift+del</strong> : 해당 줄 지우기</p></li><li><p><strong>alt+방향키 상하</strong> : 해당 줄 옮기기</p></li><li><p><strong>alt+shift+방향키 좌우</strong> : 확장 선택</p></li><li><p><strong>tab, shift+tab</strong> : 들여쓰기, 내어쓰기</p></li><li><p><strong>ctrl+alt+방향키 상하</strong> : 멀티 커서</p></li><li><p><strong>ctrl+D</strong> : 다음 같은 단어에 멀티커서</p></li><li><p><strong>alt+클릭</strong> : 멀티 커서</p></li></ul><hr><h2>사이트</h2><h3>유용한 사이트</h3><ul class="tight" data-tight="true"><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.dbcut.com/"><strong>[디비컷]</strong></a>: 웹디자인 참고 사이트</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://caniuse.com/"><strong>[can i use]</strong></a>: 크로스브라우징 도움 사이트</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.dothome.co.kr/"><strong>[닷홈]</strong></a>: 무료 호스팅 사이트 (유료 호스팅 가능)</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="http://www.spritecow.com/"><strong>[Sprite Cow]</strong></a>: 스프라잇 이미지의 범위를 알려줌</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://yesviz.com/"><strong>[yesviz]</strong></a>: 기기들의 viewprot를 모두 확인할 수 있음</p></li></ul><h3>Flex, Grid 설명</h3><ul class="tight" data-tight="true"><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://studiomeal.com/archives/197"><strong>[이번에야 말로 CSS Flex를 익혀보자]</strong></a>: Flex 설명 - 1분 코딩</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://studiomeal.com/archives/533"><strong>[이번에야 말로 CSS Grid를 익혀보자]</strong></a>: Grid 설명 - 1분 코딩</p></li></ul><h3>연습 게임</h3><ul class="tight" data-tight="true"><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://flukeout.github.io/"><strong>[CSS Dinner]</strong></a>: CSS 선택자 연습 사이트</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://flexboxfroggy.com/#ko"><strong>[Flexbox Frog]</strong></a>: flex 연습 게임 사이트</p></li></ul><hr><h2>기타 팁</h2><ul class="tight" data-tight="true"><li><p>닷홈 서버에 올릴 때는 html(루트 폴더)에만 넣어야함.</p></li></ul><p></p>

프론트엔드 개발 시 유용한 크롬 익스텐션, 응용프로그램, vs code 익스텐션, 단축키, 사이트 등 이전 게시글 백업

프론트엔드 개발 시 유용한 크롬 익스텐션, 응용프로그램, vs code 익스텐션, 단축키, 사이트

Python

<blockquote><p>macOS 사용 도중 파이썬 패키지를 설치하기 위해 pip를 사용하자 보안 경고가 발생하며 설치가 거부되었다. 이를 해결하는 방법에 대해 다룬다.</p></blockquote><h3>도대체 무슨 에러인가?</h3><p></p><img src="https://image.until.blog/xeros/article/1727225853116.png" alt="until-1518"><p>Python의 최신 PEP 668 표준에 의해, macOS 환경에서 pip를 통한 패키지 설치가 제약되는 문제라고 한다. 아무래도 최근에 애플에서 맥에 여러가지 보안 강화 조치와 제약이 추가되었는데 여기에 영향을 받은 패치가 아닐까 싶다.</p><p>이 문제를 해결하는 방법은 크게 3가지정도로 구분할 수 있다.</p><h3>1. 가상 환경을 사용하는 방법</h3><p>다음과 같이 Python 가상 환경을 만들어서 사용하면 독립된 공간을 만들어서 사용하기에 pip를 정상적으로 사용할 수 있게 되며 패키지의 버전 문제로 인한 충돌을 피하기도 쉽다. 하지만 매 파이썬 프로젝트마다 가상 환경을 생성해주어야하고 터미널을 열 때마다 <code spellcheck="false">source</code>를 지정해 주어야 한다는 번거로움이 따른다.</p><ol><li><p>가상 환경 생성</p></li></ol><pre spellcheck="false"><code class="language-bash">python3 -m venv path/to/venv</code></pre><ol start="2"><li><p>가상 환경 활성화</p></li></ol><pre spellcheck="false"><code class="language-bash">source path/to/venv/bin/activate</code></pre><ol start="3"><li><p>패키지 설치</p></li></ol><pre spellcheck="false"><code>pip install supabase</code></pre><h3>2. pip에서 사용자 플래그 추가</h3><p>시스템 패키지 환경을 보호하기 위해 설치를 사용자 환경으로 제한하여 설치하도록 한다.</p><p>그냥 귀찮음도 덜하고 보안도 챙기고 무난한 방법인듯하다.</p><pre spellcheck="false"><code class="language-bash">pip install --user supabase</code></pre><h3>3. break-system-package 옵션 또는 pip.conf 수정</h3><p>그냥 보안 권고사항을 무시하고 기존에 pip처럼 다이렉트 설치를 가능하게 하는 옵션을 붙여서 사용하면 된다.</p><pre spellcheck="false"><code class="language-bash">pip install &lt;package name&gt; --break-system-packages</code></pre><p>근데 매번 이 옵션을 붙이는것도 귀찮다면 아예 <code spellcheck="false">pip.conf</code> 파일을 수정해서 영구적으로 해당 명령을 활성화 시키는것 역시 가능하다.</p><ol><li><p><code spellcheck="false">pip.conf</code> 파일 생성</p></li></ol><pre spellcheck="false"><code class="language-bash">mkdir -p ~/.config/pip
vi ~/.config/pip/pip.conf</code></pre><ol start="2"><li><p>아래 내용을 추가한다.</p></li></ol><pre spellcheck="false"><code class="language-bash">pip install supabase --break-system-packages</code></pre><h3>왜 이런 보안조치가 시행되었는가?</h3><p>애플이 원래도 보안쪽으로는 깐깐했지만 갑자기 이런 기존 시스템에 영향을 줄 수도 있는 패치를 한 원인이 궁금해서 찾아보니 간략하게 설명하자면 pip를 사용한 시스템 전역 패키지 설치가 운영 체제의 패키지 관리자와 충돌할 수 있어 이를 방지하려는 목적이라고 한다. 패키지를 가상 환경이나 사용자 환경에만 설치하도록 유도해서 종속성 관리 문제를 해결하고 보안 취약점을 줄이기 위한 조치인듯 하다.</p><p>마찬가지로 <code spellcheck="false">Homebrew</code> 역시 현재 공식 홈페이지에 나와있는 Installation 방법을 따라하고 추가적인 수정을 거치지 않으면 명령어 인식이 안된다.</p>

macOS에서 pip externally-managed-environment 에러를 픽스하는 방법

macOS에서 pip install시 error: externally-managed-environment 에러가 발생하는 문제

<p></p><p></p><p>병렬처리는 다른 방법도 있지만 일단 이 포스트에서는 Promise.all과 Worker_threads의 차이를 한번 알아보자잇</p><p>일단 이 두개를 무슨 목적으로 쓰는걸까?</p><p></p><ol><li><p>성능 : 여러개의 작업을 동시에 처리해서, 실행 시간을 단축시킬래!</p></li><li><p>효율 : 여러개의 코어를 가진 프로세서를 다 활용하고싶어!</p></li><li><p>확장성 : 요청이 많아도 잘 대응해보고싶어!</p></li></ol><p>뭐 다른 이유도 많겠지만 당장 떠오르는건 이정도인 것 같네잉</p><p></p><p></p><p>구현 코드부터 볼까! 다들 nest cli는 글로벌로 설치 되어있잖어~</p><pre spellcheck="false"><code>nest new nestjs-concurrency-test --strict</code></pre><p></p><p>main.ts</p><pre spellcheck="false"><code>import { NestFactory } from '@nestjs/core';

import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

//여긴 뭐 없다잉 </code></pre><p></p><p>app.controller.ts</p><pre spellcheck="false"><code>import { Controller, Get, Query } from '@nestjs/common';

import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get('promise-all')
  async testPromiseAll(@Query('i') iterations: string): Promise&lt;string&gt; {
    const start = Date.now();
    const result = await this.appService.testPromiseAll(parseInt(iterations) || 10000000);
    const end = Date.now();

    return `Promise.all: ${end - start} milliseconds, result: ${result}`;
  }

  @Get('worker-threads')
  async testWorkerThreads(@Query('i') iterations: string): Promise&lt;string&gt; {
    const start = Date.now();
    const result = await this.appService.testWorkerThreads(parseInt(iterations) || 10000000);
    const end = Date.now();

    return `Worker Threads: ${end - start} milliseconds, result: ${result}`;
  }
}</code></pre><p>컨트롤러에 엔드포인트 두개를 맛있게 만들었엉 NestJS는 다들 아는거 맞지? 모르면 물어봐잉</p><p>쿼리 파라미터 i를 받아서 몇번 반복할건지 처리할거임 ㅋㅋ 파라미터 없으면 천만번 ㅅㄱ링</p><p>리턴값은 시간이 얼마나 걸렸는지 보여줄거임. result는 사실 별로 안중요해. 어차피 파라미터가 같다면 둘은 같은 값을 뱉을것</p><p>실제 로직은 당연히 서비스코드에 있으니까 별거없지? (사실 서비스코드도 별거없음)</p><p></p><p></p><p>app.service.ts</p><pre spellcheck="false"><code>import { Injectable } from '@nestjs/common';
import path from 'path';
import { Worker } from 'worker_threads';

@Injectable()
export class AppService {
  computation(iterations: number): number {
    return Array.from({ length: iterations }, (_, i) =&gt; Math.sqrt(i)).reduce(
      (acc: number, cur: number) =&gt; acc + cur,
      0,
    );
  }

  async testPromiseAll(iterations: number): Promise&lt;number&gt; {
    const tasks = Array(4)
      .fill(null)
      .map(() =&gt; this.computation(iterations / 4));

    const results = await Promise.all(tasks);

    return results.reduce((acc: number, cur: number) =&gt; acc + cur, 0);
  }

  async testWorkerThreads(iterations: number): Promise&lt;number&gt; {
    const workerPath = path.resolve(__dirname, 'workers/worker.js');
    const workers = Array(4)
      .fill(null)
      .map(
        () =&gt;
          new Promise&lt;number&gt;((resolve, reject) =&gt; {
            const worker = new Worker(workerPath, { workerData: { iterations: iterations / 4 } });

            worker.on('message', resolve);
            worker.on('error', reject);
          }),
      );

    const results = await Promise.all(workers);

    return results.reduce((acc: number, cur: number) =&gt; acc + cur, 0);
  }
}
</code></pre><p></p><p>일단 Promise.all, worker_threads 에서 처리할 computation 함수를 맛있게 만들었당</p><p>(처음에 for문으로 했다가 멋있어 보이려고 reduce 썼잔어 ㅋ)</p><p>이 함수는 iterations 만큼 배열을 만들고, 제곱근을 계산해서 그 합을 반환할거야</p><p>이 코드도 별거없어. 두 함수 다 태스크를 4개로 나눠서 처리한다</p><p></p><p>다만 두 함수는 각각 다른 방식으로 동시성을 구현하는데, </p><p>testPromiseAll 에서는 비동기 특성을 활용해서 동시성을 구현하지만 결국엔 '단일 스레드'에서 실행된다.</p><p>testWorkerThreads 에서는 실제로 다중 스레드를 사용해서 병렬적으로 처리한다잉</p><p></p><p></p><p></p><p>결과를 한번볼까?</p><p></p><p></p><p>파라미터 i 를 1000000 (백만)으로 주었을때</p><p></p><img src="https://image.until.blog/rolldeep-stepmerrily/article/1724119606249" alt="until-1252"><img src="https://image.until.blog/rolldeep-stepmerrily/article/1724119620802" alt="until-1253"><p>백만번으로는 사실 별 차이 없다 ㅇㅅㅇ 오히려 promise-all로 구현했을때 아주 조금 더 빨리, 혹은 비슷한 결과가 나옴</p><p></p><p>근데 i를 10000000 (천만)으로 주었을땐</p><img src="https://image.until.blog/rolldeep-stepmerrily/article/1724119686200" alt="until-1254"><img src="https://image.until.blog/rolldeep-stepmerrily/article/1724119693533" alt="until-1255"><p>2배 이상 차이가 난단말이지, 여러번 시도해도 worker-threads가 2배 이상 빠르다!</p><p></p><p>그럼 이 두 방식 각각의 장단점이 뭔지 알아볼까잇</p><p></p><ol><li><p>Promise.all 의 장단점</p><ul><li><p>장점</p><ul><li><p>매우 구현이 간편하다!</p></li><li><p>메모리를 덜 씀</p></li><li><p>Node.js 환경 말고도 브라우저에서도 쓸수 있겠지?</p></li></ul></li><li><p>단점</p><ul><li><p>CPU단에서 실제 병렬 처리는 하는것은 아님</p></li><li><p>하나의 스레드에서 실행되기 때문에 여러 작업중에 하나가 블로킹되면 전체 성능이 떡락할지도?</p></li></ul></li></ul></li><li><p>Worker Threads의 장단점</p><ul><li><p>장점</p><ul><li><p>실제로 다중 코어를 활용함</p></li><li><p>각각의 Worker가 독립되어서 안정성이 높음</p></li><li><p>무거운 연산을 할땐 엄청 빠르다!</p></li></ul></li><li><p>단점</p><ul><li><p>구현이 좀 상대적으로 귀찮음(사실 쓰기 좀 꺼려지는 가장 큰 원인)</p></li><li><p>메모리를 많이 씀</p></li><li><p>오버헤드가 발생할지도..?</p></li><li><p>Node에서 지원하기 때문에 Node가 아니면 못써잉</p></li></ul></li></ul></li></ol><p></p><p>그럼 또 이제 어디에 쓰면 좋을지 알아봐야겠지</p><p></p><ol><li><p>Promise.all 활용처</p><ul><li><p>비동기 API를 한번에 호출 할 때</p></li><li><p>간단한 병렬 처리만을 필요로 할 때</p></li><li><p>I/O 작업을 동시에 처리할 때 </p></li></ul></li><li><p>Worker Threads 활용처</p><ul><li><p>엄청 거대한 데이터 처리</p></li><li><p>엄청 복잡한 연산</p></li><li><p>CPU가 두뇌 풀가동 해야할 때(이미지나 동영상 등 ?)</p></li><li><p>백그라운드에서 오래오래 실행되어야할 때</p></li></ul></li></ol><p></p><p></p><h1>결론</h1><p>알잘딱으로 잘 선택해야한다.</p><p>Promise.all 이 편하긴해.. 자매품 Promise.race도 애용하자</p><p></p>

병렬처리는 다른 방법도 있지만 일단 이 포스트에서는 Promise.all과 Worker_threads의 차이를 한번 알아보자잇일단 이 두개를 무슨 목적으로 쓰는걸까?성능 : 여러개의 작업을 동시에 처리해서, 실행 시간을 단축시킬래!효율 : 여러개의 코어를 가진 프로세서를 다 활용하고싶어!확장성 : 요청이 많아도 잘 대응해보고싶어!뭐 다른 이유도 많겠지만 당

[NestJS] Promise.all 과 Worker_threads의 차이

Spring

<p></p><h1>적용한 이유</h1><p><span>'Test는 어느 환경에서나 미리 구축할 필요없이 작동해야한다.'</span><br><span>라는 개념과 어디에서나 자동으로 동일한 테스트 환경을 구축하는 라이브러리가 없을까? 라는 생각으로 출발하여 Test 실행시 서버 테스트에 필요한 환경을 자동으로 구축해주는 라이브러리를 찾아보았습니다.</span></p><p></p><p><span>역시나 TestContainer 라는 착한 친구가 이미 만들어져 있었죠.</span><br></p><img src="https://velog.velcdn.com/images/itbuddy/post/33e9a70f-6458-4a6e-b8f4-00ae7619be43/image.png"><p>이 라이브러리를 사용하면 Docker container 를 통하여 테스트 실행시 자동으로 환경을 구축해 주고 테스트가 끝나면 자동으로 정리까지 해줍니다.<br>이를 통해 h2로 테스트하고 배포는 Mysql로 하면서 몰려오는 찝찝함 또한 해결이 가능합니다.</p><p>Testcontainers의 장점으로는 다음이 있습니다.</p><blockquote><ol><li><p>개발자 친화적: 테스트 코드를 작성하는데 필요한 의존성과 환경 구성을 최소화하여, 개발자가 테스트에만 집중할 수 있게 해줍니다.</p></li><li><p>환경 독립성: 도커사용으로 로컬환경, CI/CD 파이프라인, 프로덕션 환경 등에서 동일한 테스트 환경을 구축할 수 있습니다.</p></li><li><p>높은 확장성: 다양한 서비스와 애플리케이션을 지원하므로, 필요한 경우 새로운 서비스 추가와 기존 서비스를 업데이트하기 쉽습니다.</p></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><p>@ExtendWith(TestContainerConfig.class) 로 해당 Config 파일을 사용하고</p><p>@ContextConfiguration(initializers = TestContainerConfig.IntegrationTestInitializer.class) 를 통하여 yaml 설정을 덮어 씁니다.</p><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><p>로그를 잘 보시면 Docker container를 올리는 과정에 대한 로그를 확일할 수 있습니다.</p><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><p>CI/CD 에서도 문제없이 작동한다는 점 (물론 설정 미스 때문에 한번에 성공하지는 못했습니다.)</p></li><li><p>테스트를 위해 따로 mysql, Kafka, redis를 구축할 필요가 없어졌습니다.</p></li><li><p>h2 로 테스트 중에는 디버깅으로 진행 단계를 멈추고 데이터 베이스를 확인 하고 싶어도 h2 서버에 접근할 수가 없었지만, TestContainer는 외부 포트 설정만 해주면 Datagrip으로 접근하여 데이터를 두눈으로 직접 확인이 가능합니다.</p></li></ol><h3>단점</h3><ol><li><p>테스트가 속도가 눈에 띄게 느려졌습니다. 테스트 환경구성에 필요한 Docker Image를 이미 모두 다운 받았더라도 컨테이너 4개 기준 7초 정도 걸리고, 도커 이미지를 모두 새로 다운 받아야 한다면 1분 이상의 시간이 더 소요 됩니다. (특히 CI/CD 에서는 매번 새로운 이미지를 받아 실행합니다. 이를 해결할 방법도 찾아봐야 겠습니다.)</p></li></ol><h3>느낀점</h3><p>단점도 있지만 개발자가 구축해야 하는 테스트 환경 TestContainer가 직접 해주니 편안합니다. 시간이 7초나 더 소요 되지만 개발자가 직접 구축한다면 개발자 마다 1~2시간은 족히 걸릴 일입니다.</p><p>이제 저와 같이 일하는 동료가 TDD와 TestContainer 까지 2명이 되었네요.</p><p>참고<br><a target="_blank" rel="noopener noreferrer nofollow" href="https://dev.gmarket.com/76">지마켓 Testcontainers로 통합테스트 만들기</a></p><p></p>

TestContainers 적용기

<h1>Swagger UI란 무엇인가?</h1><blockquote><p>Swagger UI는 Swagger의 라이브러리 중 API Documentation, API 명세와 관련된 기능을 제공하는 라이브러리이다.</p></blockquote><p>쉽게 말하자면 API 자동 시각화이다. 아마 Swagger에 대해서 들어보지 못한 사람들도 얼추 이 비슷한 화면을 본 적은 있을 것이다.</p><img src="https://image.until.blog/brightdawn/article/1720425986318" alt="until-770"><p>이게 Swagger-ui를 통해서 만들어진 화면이다. 딱 Swagger-ui 세팅만 해주고 내가 필요한 컨트롤러를 넣어주기만 하면 알아서 만들어준다.</p><p></p><h1>그런데 왜 하필 Spring boot 3.1.3인가?</h1><p>Swagger를 사용하기 위해 찾아보면 대다수의 글들은 이렇게 말할 것이다.</p><p>gradle을 사용하고 있다면 아래 코드를 통해서 의존성 추가를 하세요!</p><p><code spellcheck="false">implementation 'io.springfox:springfox-boot-starter:3.0.0'</code> </p><p>맞는 이야기다. 맞는 이야기인데, Spring boot 3.1.3을 쓰고 있는 사람과 나에게는 맞는 이야기'였'다. 과거형이란 소리다. springfox는 Spring boot 3.xx를 지원하지 않는다. 이대로 코드를 실행시키면, 아니 실행 전에 일단 gradle부터 리로드 하는 순간 오류를 발산해준다.</p><p>일단 빨간색으로 <code spellcheck="false">build failed</code>부터 시작해서 이대로 코드 실행하는 순간 아래와 같은 오류를 뱉어준다. 갑자기 <code spellcheck="false">HttpServletRequest</code>를 찾을 수 없다느니 뭐라느니...</p><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><p></p><h2>그럼 Spring 3.1.3은 Swagger-ui를 포기해야하는가?</h2><blockquote><p>하늘이 무너져도 솟아날 구멍은 있다. 이런 API 명세 날로 먹기 기능을 사람들이 포기했을 리가 없다.</p></blockquote><p>열심히 찾아본 결과, 우리는 springfox의 버림을 받은 대신, <code spellcheck="false">springdoc-openapi</code>를 사용해주면 된다는 사실을 알 수 있었다. </p><hr><h1>Swagger-ui 적용하기</h1><h2>환경내역</h2><blockquote><p>먼저 내가 사용하고 있는 환경은 다음과 같다. </p><p>Java 버전 17, Spring boot 3.1.3, 개발 툴 IntelliJ, Spring Security 적용 중, gradle 기반.</p></blockquote><h2>의존성 추가</h2><p>우리가 써온 모든 것들이 그래왔듯이 의존성 추가를 해주어야 한다. </p><p>아래 코드를 <code spellcheck="false">build.gradle</code>파일의 dependencies 블록에 넣어주자. 그리고 gradle을 refresh 해주는 것을 잊지 말자.</p><pre spellcheck="false"><code>implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.2.0' </code></pre><p></p><h2>SwaggerConfig 파일 세팅</h2><p><code spellcheck="false">SwaggerConfig</code> 파일을 만들 건데, 나의 경우에는 내가 사용하고 있는 패키지의 기본 패키지에 <code spellcheck="false">config</code>폴더를 만들어서 그 안에 넣어주었다. <code spellcheck="false">SwaggerConfig.java</code>클래스 파일을 만들어주면 된다.</p><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><p>위 내용을 참고하여 필요한 것이 있다면 더 추가해주면 된다. </p><p></p><h2>여기까지 하고서 실행했는데 안 되는데요?</h2><p>당신도 나와 같은 Spring Security를 사용하고 있는 모양이다. 보안상에는 좋다지만 개발하는 입장에서는 불편하기 그지없다. <s>하지만 보안이 우선인데 어쩌겠는가</s></p><p>이미 <code spellcheck="false">SecuiryConfig</code> 파일이 존재할텐데, 그 안에다가 아래와 같이 연결해서 넣어주자.</p><pre spellcheck="false"><code>.requestMatchers(new AntPathRequestMatcher("/swagger-ui/**")).permitAll()
.requestMatchers(new AntPathRequestMatcher("/v3/api-docs/**")).permitAll()</code></pre><p>어디에 넣어야 할지 감이 안 잡히는 사람들을 위해 import를 제외한 전체 내용 역시 공유하겠다.</p><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><p>나는 <code spellcheck="false">csrf</code> 관련 문제도 생겨서 저렇게 추가 처리 해주었다.</p><p></p><h2>확인하기</h2><p>위와 같은 단계를 거친 후에, 아래와 같이 링크에 접속해보자.</p><p><code spellcheck="false">http://localhost:8080/swagger-ui/index.html#/컨트롤러명</code> </p><img src="https://image.until.blog/brightdawn/article/1720428603376" alt="until-772"><p>그럼 위와 같은 사이트에 접속할 수 있다. 아주 익숙한 사이트다.</p><p></p>

스프링 부터 3.xx부터는 Swagger UI의 사용법이 다르다는 것, 알고 계셨나요? 저는 몰라서 고생 좀 했습니다.

스프링 부트 3.1.3에서 Swagger UI사용하기

Firebase

🍎 Mac

<blockquote><p>해당 아티클은 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>을 참고해주세요.</p></blockquote><p>node를 사용해 개발하다보면 다양한 node 버전에서 개발이 필요한 경우가 있습니다. 실제로 여러 프로젝트를 살펴보면 <code spellcheck="false">.nvmrc</code> 라는 파일에 node 버전이 표시되어있는 경우도 종종 볼 수 있는데요.</p><p>이럴 때 사용할 수 있는 것이 바로 nvm(node version manager)입니다. nvm은 여러 버전의 node를 설치하고 실행할 수 있도록 도와주고, 또 <code spellcheck="false">.nvmrc</code> 파일을 읽어들여 프로젝트에 맞는 node 버전을 자동으로 설정해줄 수도 있습니다.</p><h1>NVM 설치하기</h1><p>아래 커맨드를 터미널에 입력하여 nvm을 설치해봅시다. curl또는 wget또는 brew 통해 설치하시면 됩니다.</p><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><p>nvm을 설치하셨다면 환경 변수를 설정해야합니다. 본인의 터미널 환경에 맞게 <code spellcheck="false">~/.bash_profile</code>, <code spellcheck="false">~/.zshrc</code>, <code spellcheck="false">~/.profile</code>, <code spellcheck="false">~/.bashrc</code> 중 한곳으로 이동하여 아래 추가하시면 됩니다.</p><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><p>이후 터미널을 재부팅하거나 아래 커맨드를 입력하면 환경변수가 적용됩니다.</p><pre spellcheck="false"><code>source ~/.bash_profile</code></pre><h1>nvm 사용법</h1><p>가장 많이 사용하는 명령어 위주로 알아보겠습니다.</p><ul><li><p><code spellcheck="false">nvm ls</code>: 현재 설치된 node 버전을 확인할 수 있습니다.</p></li><li><p><code spellcheck="false">nvm use &lt;version&gt;</code>:  특정 버전의 node를 사용합니다. 커맨드를 실행하는 디렉터리에 <code spellcheck="false">.nvmrc</code> 를 통해 버전이 명시되어있다면 version을 생략할 수 있어요.</p></li><li><p><code spellcheck="false">nvm install &lt;version&gt;</code> : 특정 버전의 node를 설치합니다.</p></li><li><p><code spellcheck="false">nvm uninstall &lt;version&gt;</code> : 특정 버전의 node를 제거합니다.</p></li></ul><h1><code spellcheck="false">.nvmrc</code> </h1><p>프로젝트 root에 <code spellcheck="false">.nvmrc</code>파일을 생성하고 현재 노드버전을 입력해두면 해당 프로젝트에서 사용하는 node 버전을 명시해 둘 수 있고, <code spellcheck="false">nvm use</code>를 통해 바로 해당 버전의 node를 사용할 수 있습니다.</p><h1>프로젝트별 node 버전 자동으로 적용하기</h1><p>현재 디렉터리에 <code spellcheck="false">.nvmrc</code> 가 존재하는지 확인하고 있다면 nvm use를 자동으로 실행하는 스크립트를 적용시켜봅시다.</p><h2>script 사용하는 방법</h2><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/nvm-sh/nvm?tab=readme-ov-file#deeper-shell-integration">공식문서</a>에 나와있는 스크립트를 사용하여 적용할 수 있습니다. bash와 zsh 터미널에 대한 스크립트를 제공하고 있습니다. 둘 중 본인이 사용하는 터미널에 맞는 스크립트를 적용하시면 됩니다.</p><h2>bash</h2><p>아래 코드를  <code spellcheck="false">$HOME/.bashrc</code>에 입력후 저장해주면 됩니다. </p><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><p>만약 본인이 vsCode를 사용한다면 <a target="_blank" rel="noopener noreferrer nofollow" href="https://marketplace.visualstudio.com/items?itemName=henrynguyen5-vsc.vsc-nvm">vsc-nvm</a> 익스텐션을 사용할 수도 있습니다.</p><p>해당 extension을 설치하고 vscode를 재부팅하면 바로 적용됩니다. </p><p></p>

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

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

<blockquote><ul class="tight" data-tight="true"><li><p>Spring JAVA 버전은 17이 제일 깔끔함</p></li><li><p>project Facets &gt; Java (Version 1.6) &gt; 11로 변경</p><ul class="tight" data-tight="true"><li><p>properties → java compiler에서 11로 바꾸면 됨</p></li></ul></li><li><p>스프링 두 가지 XML 파일</p><ol class="tight" data-tight="true"><li><p>전체 설정 파일</p></li><li><p>서블릿 파일 : &lt;WEB&gt; 설정</p></li></ol></li></ul></blockquote><h3>설치 (아래 링크 참고)</h3><p><a target="_blank" rel="noopener noreferrer nofollow" href="http://thedata.kr/down/spring4/01.spring-setup.html">http://thedata.kr/down/spring4/01.spring-setup.html</a></p><h3>회원가입 &amp; 로그인</h3><ol class="tight" data-tight="true"><li><p><strong>패키지 새로 생성 : hello2 만들기</strong></p><img src="https://image.until.blog/hyerin1225/article/1718775387242" alt="until-573"><img src="https://image.until.blog/hyerin1225/article/1718775635460" alt="until-575"></li></ol><ol class="tight" data-tight="true" start="2"><li><p><strong>Version 설정</strong></p><ul class="tight" data-tight="true"><li><p>Package &gt; Properties</p><ul class="tight" data-tight="true"><li><p>java compiler</p><img src="https://image.until.blog/hyerin1225/article/1718775742761" alt="until-576"></li><li><p>Project Facets : Dynamic Web Module / Java 설정</p><img src="https://image.until.blog/hyerin1225/article/1718775756954" alt="until-577"></li></ul></li></ul><p></p></li><li><p><strong>pom.xml 설정</strong></p><ul class="tight" data-tight="true"><li><p>hello.pom을 복사해서 hello2.pom에 갖다 붙여넣기</p><ul class="tight" data-tight="true"><li><p>mybatis, lombok, jstl, springjdbc, mysql, DB tool 등</p></li></ul></li></ul></li></ol><p></p><ol class="tight" data-tight="true" start="4"><li><p><strong>web.xml 설정</strong></p><ul class="tight" data-tight="true"><li><p>Tomcat이 제일 먼저 읽는 파일로 한글 필터 작업 해줘야 함</p><pre spellcheck="false"><code>&lt;filter&gt;
	&lt;filter-name&gt;encodingFilter&lt;/filter-name&gt;
	&lt;filter-class&gt;org.springframework.web.filter.CharacterEncodingFilter&lt;/filter-class&gt;
	&lt;init-param&gt;
		&lt;param-name&gt;encoding&lt;/param-name&gt;
		&lt;param-value&gt;UTF-8&lt;/param-value&gt;
	&lt;/init-param&gt;
	&lt;init-param&gt;
		&lt;param-name&gt;forceEncoding&lt;/param-name&gt;
		&lt;param-value&gt;true&lt;/param-value&gt;
	&lt;/init-param&gt;		
&lt;/filter&gt;
	
&lt;filter-mapping&gt;
	&lt;filter-name&gt;encodingFilter&lt;/filter-name&gt;
	&lt;url-pattern&gt;/*&lt;/url-pattern&gt;
&lt;/filter-mapping&gt;</code></pre></li></ul></li></ol><p></p><ol class="tight" data-tight="true" start="5"><li><p><strong>root-context.xml 파일에 DB 설정</strong></p><ul class="tight" data-tight="true"><li><p>bean : spring이 new 해서 만든 것 (= class 생성)</p></li></ul><pre spellcheck="false"><code>&lt;bean 
	id="dataSource" 
	class="org.apache.commons.dbcp2.BasicDataSource"
	destroy-method="close"&gt;
	&lt;property name="driverClassName" value="com.mysql.cj.jdbc.Driver" /&gt;
	&lt;property name="url" value="jdbc:mysql://localhost:3306/kdigital?serverTimezone=UTC" /&gt;
	&lt;property name="username" value="root" /&gt;
	&lt;property name="password" value="rpass"&gt;&lt;/property&gt;	
&lt;/bean&gt;

&lt;bean 
	id="sqlSessionFactory" 
	class="org.mybatis.spring.SqlSessionFactoryBean"&gt;
	&lt;property name="dataSource" ref="dataSource"&gt;&lt;/property&gt;
	&lt;property name="configLocation" value="classpath:/sqlmap/mybatis-config.xml"&gt;&lt;/property&gt;
&lt;/bean&gt;
&lt;bean id="sqlSessionTemplate" class="org.mybatis.spring.SqlSessionTemplate"&gt;
	&lt;constructor-arg index="0" ref="sqlSessionFactory"&gt;&lt;/constructor-arg&gt;
&lt;/bean&gt;</code></pre><p></p></li><li><p><strong>폴더 생성</strong></p><ul class="tight" data-tight="true"><li><p>views 하위에 member 폴더 생성</p><img src="https://image.until.blog/hyerin1225/article/1718776241747" alt="until-580"></li><li><p><span>DB에 테이블이 만들어져야 DTO가 만들 수 있음</span></p><pre spellcheck="false"><code>CREATE TABLE `member` (
  `id` varchar(50) NOT NULL,
  `pw` varchar(50) NOT NULL,
  `name` varchar(50) NOT NULL,
  `age` int NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;</code></pre></li></ul></li><li><p><strong><span>DTO 생성 후 @Data 생성 (lombok)</span></strong></p><img src="https://image.until.blog/hyerin1225/article/1718776329849" alt="until-581"></li><li><p><strong><span>Controller에 스프링 설정</span></strong></p><img src="https://image.until.blog/hyerin1225/article/1718776358827" alt="until-582"></li><li><p><strong><span>파일 준비</span></strong></p><ul class="tight" data-tight="true"><li><p><strong>MemberController</strong></p><pre spellcheck="false"><code>package com.spring.hello2.controller;
   
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
   
import com.spring.hello2.service.MemberService;
   
@Controller
public class MemberController {
	
	MemberService service;
	
	@Autowired
	public MemberController() {
		System.out.println("MemberController()");
  		this.service = service;
  	}
}</code></pre></li></ul><ul class="tight" data-tight="true"><li><p><strong><span>MemberDAO</span></strong></p><pre spellcheck="false"><code>package com.spring.hello2.dao;

import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class MemberDAO {
	
	SqlSessionTemplate sqlSession; //root-context.xml에서 bean으로 생성함
	
	@Autowired
	public MemberDAO() {
		System.out.println("MemberDAO()");
		this.sqlSession = sqlSession;
	}
}</code></pre></li><li><p><strong><span>MemberDTO</span></strong></p><pre spellcheck="false"><code>package com.spring.hello2.dto;

import lombok.Data;

@Data
public class MemberDTO {
	String id;
	String pw;
	String name;
	int age;
}</code></pre></li><li><p><strong><span>MemberService</span></strong></p><pre spellcheck="false"><code>package com.spring.hello2.service;

public interface MemberService { }</code></pre></li><li><p><strong><span>MemberService.impl</span></strong></p><pre spellcheck="false"><code>package com.spring.hello2.service.impl;

import org.springframework.stereotype.Service;

import com.spring.hello2.dao.MemberDAO;
import com.spring.hello2.service.MemberService;

@Service
public class MemberServiceImpl implements MemberService {
	
	MemberDAO dao;
	
	public MemberServiceImpl() {
		System.out.println("MemberServiceImpl()");
		this.dao = dao;
	}
}</code></pre><p>=&gt; 이대로 실행하면 mapper 파일이 없어 오류가 나므로 mapper 파일 생성해줘야 함</p><img src="https://image.until.blog/hyerin1225/article/1718777256496" alt="until-591"></li><li><p><strong><span>mybatis-config</span></strong></p><pre spellcheck="false"><code>&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
&lt;!DOCTYPE configuration
  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-config.dtd"&gt;
&lt;configuration&gt;
  
  &lt;mappers&gt;
    &lt;mapper resource="/sqlmap/mapper/member-mapper.xml"/&gt;
  &lt;/mappers&gt;
&lt;/configuration&gt;</code></pre></li><li><p><strong><span>member-mapper.xml</span></strong></p><pre spellcheck="false"><code>&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
&lt;!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd"&gt;
&lt;mapper namespace="member"&gt;
	&lt;insert id="insert" parameterType="MemberDTO"&gt;
	&lt;![CDATA[
		insert into book(id, pw, name, age) values (#{id}, #{pw}, #{name}, #{age})
	]]&gt;
	&lt;/insert&gt;

	&lt;update id="update" parameterType="MemberDTO"&gt;
      &lt;![CDATA[
         update member set pw = #{pw}, name = #{name}, age = #{age}
         where id = #{id}
      ]]&gt;
	&lt;/update&gt;

	&lt;delete id="delete" parameterType="MemberDTO"&gt;
	&lt;![CDATA[
		delete from member where id = #{id}
	]]&gt;
	&lt;/delete&gt;

	&lt;select id="list" resultType="MemberDTO"&gt;
	&lt;![CDATA[
		select id, pw, name, age
		from member
		where 1 = 1
	]]&gt;
	&lt;/select&gt;

	&lt;select id="detail" parameterType="MemberDTO" resultType="MemberDTO"&gt;
	&lt;![CDATA[
		select id, pw, name, age
		from member
		where id = #{id} 
	]]&gt;
	&lt;/select&gt;

&lt;/mapper&gt;</code></pre><p></p></li></ul></li><li><p><strong><span>home.jsp 경로 설정</span></strong></p><pre spellcheck="false"><code>&lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %&gt;
&lt;%@ page session="false" %&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Home&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;
	Member
&lt;/h1&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="member/list"&gt;List&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="member/create"&gt;Create&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="member/login"&gt;Login&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="member/logout"&gt;Logout&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre></li></ol><p></p><p></p><p></p>

Spring JAVA 버전은 17이 제일 깔끔함project Facets &gt; Java (Version 1.6) &gt; 11로 변경properties → java compiler에서 11로 바꾸면 됨스프링 두 가지 XML 파일전체 설정 파일서블릿 파일 : &lt;WEB&gt; 설정설치 (아래 링크 참고)http://thedata.kr/down/spri

포티

<h2>시작하며</h2><p>‘포티(Photi)’는 개발 중간에 투입되어 진행 중인 프로젝트로, Swagger를 활용해 API 명세서를 작성하여 프론트엔드 개발자와 소통하고 있습니다. 이 글에서는 기존 코드에서 발생한 Swagger 적용 문제와 그 해결 방안을 공유하려고 합니다.</p><h2>기존 코드의 문제점</h2><pre spellcheck="false"><code class="language-kotlin">class DefaultSingleResponse(
    code: String,
    message: String,
    val data: Any,
) : DefaultResponse(code, message) {

    companion object {
        fun toResponseEntity(successCode: SuccessCode, data: Any): ResponseEntity&lt;DefaultSingleResponse&gt; {
            return ResponseEntity.status(successCode.httpStatus)
                .body(DefaultSingleResponse(successCode.name, successCode.message, data))
        }

        fun toResponseEntity(headers: HttpHeaders, successCode: SuccessCode, data: Any):
                ResponseEntity&lt;DefaultSingleResponse&gt; {
            return ResponseEntity.status(successCode.httpStatus)
                .headers(headers)
                .body(DefaultSingleResponse(successCode.name, successCode.message, data))
        }
    }
}</code></pre><p>기존 코드에서는 <code spellcheck="false">DefaultSingleResponse</code>라는 공통 클래스를 만들어 놓고, 이를 컨트롤러에서 활용하는 방법을 사용하고 있었습니다.</p><pre spellcheck="false"><code class="language-kotlin">@PostMapping("/api/users/register")
@Operation(summary = "회원가입")
@ApiResponses(
    value = [
        ApiResponse(responseCode = "201", description = "회원가입 성공"),
        ApiResponse(
            responseCode = "400",
            description = """
            1. 이메일 인증을 먼저 해주세요.
            2. 비밀번호와 비밀번호 재입력이 동일하지 않습니다.
            """
        ),
        ApiResponse(
            responseCode = "409",
            description = """
            1. 해당 이메일로 이미 가입된 회원이 있습니다.
            2. 사용 불가능한 아이디입니다.
            3. 이미 사용중인 아이디입니다.
            """
        ),
    ]
)
fun registerUser(@RequestBody @Valid request: UserRegisterRequest): ResponseEntity&lt;DefaultSingleResponse&gt; {
    val response = authService.registerUser(request.toServiceDto())
    val headers = jwtProvider.createToken(response.userId)

    return DefaultSingleResponse.toResponseEntity(headers, USER_REGISTERED, response)
}</code></pre><p>이 코드에서는 <code spellcheck="false">ResponseEntity</code>를 반환할 때 미리 정의해 둔 코드만 사용하면 되므로 구현하기 편리하다는 장점이 있었습니다.</p><p>하지만,,,</p><ol><li><p>프론트엔드 개발자가 Swagger에서 응답 schema를 확인할 수 없는 문제가 있었습니다.</p><ul><li><p>프론트엔드 개발자 &gt; “data 필드 안의 객체가 어떤 이름과 어떤 데이터 타입인지 확인하고 싶은데, 직접 API 요청을 하는 방법 대신, Swagger에서 바로 확인하는 방법은 없나요?”</p><img src="https://image.until.blog/hodumaru/article/1727196636675.png" alt="until-1502"></li></ul></li><li><p>Swagger 응답 예시 문서화를 위해 코드가 너무 길어진다는 문제가 있었습니다.</p><ul><li><p>문서화를 위해 약 20줄의 코드 추가</p><pre spellcheck="false"><code class="language-kotlin">@PostMapping("/api/users/register")
@Operation(summary = "회원가입")
@ApiResponses(
    value = [
        ApiResponse(responseCode = "201", description = "회원가입 성공"),
        ApiResponse(
            responseCode = "400",
            description = """
            1. 이메일 인증을 먼저 해주세요.
            2. 비밀번호와 비밀번호 재입력이 동일하지 않습니다.
            """
        ),
        ApiResponse(
            responseCode = "409",
            description = """
            1. 해당 이메일로 이미 가입된 회원이 있습니다.
            2. 사용 불가능한 아이디입니다.
            3. 이미 사용중인 아이디입니다.
            """
        ),
    ]
)</code></pre></li></ul></li></ol><h2>개선 과정</h2><h3>1. Swagger 구조 분석</h3><p>우선 Swagger 공식문서를 참고하여 response의 구조를 파악하였습니다.</p><ol><li><p>operation - 해당 경로에 액세스하는데 사용하는 HTTP 메소드 정의</p></li><li><p>response - ‘상태 코드 + Response body에서 반환된 데이터’의 구조</p></li><li><p>content - ‘Media type + 응답 페이로드’ 구조</p></li><li><p>schema - 인라인으로 정의하거나, $ref로 참조 가능. Response body를 설명하는데 사용</p></li></ol><pre spellcheck="false"><code class="language-yaml">paths:
  /users/{id}:
    get:
      tags:
        - Users
      summary: Gets a user by ID.
      responses:
        '200': # Response
          description: A user object.
          content: # Response body
            application/json: # Media type
              schema: # Schema
                $ref: '#/components/schemas/User'
                
components:
  schemas:
    User:
      type: object
      properties:
        id:
          type: integer
          description: The user ID.
        username:
          type: string
          description: The user name.</code></pre><p>구조를 확인해봤을 때, schema 부분을 수정하면 성공 응답을 커스텀 할 수 있겠다는 생각이 들었습니다.</p><p>에러 응답의 경우도 똑같이 하면 될까 생각했지만, key와 일치하는 여러 value가 있을 경우 가장 최근에 저장된 value로 덮어쓰는 Map의 특징 때문에, 1개의 상태코드에 여러 개의 상태 설명을 갖고 있는 현재 구조에는 적용할 수 없다는 판단을 했습니다.</p><pre spellcheck="false"><code class="language-yaml">responses:
  '200':
    description: A user object.
    content:
      application/json:
        schema:
          $ref: '#/components/schemas/User'
        examples: # Examples
          Jessica:
            value:
              id: 10
              name: Jessica Smith
          Ron:
            value:
              id: 20
              name: Ron Stewart</code></pre><p>따라서 샘플 값을 생성하는 examples를 이용하여 에러 응답 커스텀을 해결하고자 하였습니다.</p><h3>2. OperationCustomizer</h3><p>이후 커스텀하는 방법을 공식 문서에서 찾으려고 했지만, 제가 못찾은건지 이 부분은 찾을 수 없었습니다. 😭</p><p>그래서 한 <a target="_blank" rel="noopener noreferrer nofollow" href="https://devnm.tistory.com/26#2.%20%EC%8A%A4%EC%9B%A8%EA%B1%B0%EB%A5%BC%20%EC%BB%A4%EC%8A%A4%ED%85%80%20%ED%95%98%EB%A0%A4%EB%A9%B4%3F-1">블로그</a>를 통해 <code spellcheck="false">OperationCustomizer</code> 로 Swagger를 커스텀 할 수 있다는 것을 알게되었습니다.</p><blockquote><p>customize : <code spellcheck="false">Operation</code>과 <code spellcheck="false">HandlerMethod</code>를 파라미터로 받아, <code spellcheck="false">Operation</code> 객체를 직접 수정하고 정의할 수 있는 메소드</p></blockquote><pre spellcheck="false"><code class="language-kotlin">@FunctionalInterface
public interface OperationCustomizer {
    Operation customize(Operation operation, HandlerMethod handlerMethod);
}</code></pre><h3>3. 성공, 에러 응답 커스텀</h3><ol><li><p>성공 응답 커스텀</p><ul><li><p>2XX 상태코드를 갖는 response를 필터링하여 (상태코드, response)를 key, value쌍으로 저장합니다.</p></li><li><p>반복문으로 돌면서 schema를 수정합니다.</p></li><li><p>(프론트엔드 개발자와 상의한 결과 code, message, data 구조로 성공 응답을 반환하도록 하였습니다.)</p></li></ul><pre spellcheck="false"><code class="language-kotlin">private fun addResponseBodySchemaExample(operation: Operation) {
    val filterKeys = operation.responses.filterKeys { it.startsWith("2") }

    filterKeys.forEach { (code, response) -&gt;
        response.content.forEach { (_, mediaType) -&gt;
            val data = mediaType.schema
            val schema = Schema&lt;String&gt;().apply {
                addProperty("code", Schema&lt;String&gt;().example(code))
                addProperty("message", Schema&lt;String&gt;().example("성공"))
                addProperty("data", data)
            }
            mediaType.schema = schema
        }
    }
}</code></pre></li><li><p>에러 응답 커스텀</p><pre spellcheck="false"><code class="language-kotlin">@Target(AnnotationTarget.FUNCTION)
@Retention(AnnotationRetention.RUNTIME)
@ApiResponses(value = [])
annotation class ApiErrorResponses(val exceptionCodes: Array&lt;ExceptionCode&gt;)</code></pre><ul><li><p>컨트롤러에서 코드를 간결화하기 위해 에러 코드 배열을 파라미터로 갖는 ApiErrorResponses 어노테이션을 생성하였습니다.</p></li></ul><pre spellcheck="false"><code class="language-kotlin">private fun addApiErrorResponses(operation: Operation, handlerMethod: HandlerMethod) {
    val apiErrorResponses = handlerMethod.method.getAnnotation(ApiErrorResponses::class.java)

    apiErrorResponses?.exceptionCodes?.forEach { exceptionCode -&gt;
        val example = Example().apply {
            summary = exceptionCode.name
            value = mapOf("code" to exceptionCode.name, "message" to exceptionCode.message)
            description = exceptionCode.description
        }
        val apiResponse = operation.responses[exceptionCode.httpStatus.value().toString()]
        val mediaType = apiResponse?.content?.get("application/json") ?: MediaType()
        val examples = mediaType.examples?.toMutableMap() ?: mutableMapOf()

        examples[exceptionCode.name] = example

        operation.responses.addApiResponse(
            exceptionCode.httpStatus.value().toString(),
            ApiResponse().content(
                Content().addMediaType("application/json", MediaType().examples(examples))
            )
        )
    }
}</code></pre><ul><li><p>ApiErrorResponses 어노테이션을 가진 메소드만 적용됩니다.</p></li><li><p>exceptionCode의 반복문을 돌면서 상태코드와 메시지를 받아와 example에 저장하고, examples에 example을 추가합니다.</p></li><li><p>(프론트엔드 개발자와 상의한 결과 code, message 구조로 에러 응답을 반환하도록 하였습니다.)</p></li></ul></li><li><p>Configuration이 정의된 클래스에 Bean으로 등록</p><ul><li><p>스프링에서 해당 Bean 관리</p></li></ul><pre spellcheck="false"><code class="language-kotlin">@Bean
fun operationCustomizer(): OperationCustomizer {
    return OperationCustomizer { operation, handlerMethod -&gt;
        addResponseBodySchemaExample(operation)
        addApiErrorResponses(operation, handlerMethod)
        operation
    }
}</code></pre></li></ol><h2>결과</h2><ol><li><p>컨트롤러 코드</p><ul><li><p>문서화를 위해 코드 약 20줄 → 코드 4줄로 감소</p></li></ul><pre spellcheck="false"><code class="language-kotlin">@PostMapping("/api/users/register")
@Operation(summary = "회원가입")
@ApiResponse(responseCode = "201")
@ApiErrorResponses([EMAIL_VALIDATION_INVALID, PASSWORD_MATCH_INVALID, EXISTING_USER, UNAVAILABLE_USERNAME, EXISTING_USERNAME])
fun registerUser(@RequestBody @Valid request: UserRegisterRequest): ResponseEntity&lt;UserRegisterResponse&gt; {
    val response = authService.registerUser(request.toServiceDto())
    val headers = jwtProvider.createToken(response.userId)

    return ResponseEntity.status(CREATED).headers(headers).body(response)
}</code></pre></li><li><p>성공 응답</p><ul><li><p>프론트엔드 개발자의 요구사항 해결</p><img src="https://image.until.blog/hodumaru/article/1727196623508.png" alt="until-1501"></li></ul></li><li><p>에러 응답</p><ul><li><p>프론트엔드 개발자의 요구사항 해결</p><img src="https://image.until.blog/hodumaru/article/1727196464445.gif" alt="until-1499"></li></ul></li></ol><h2>마치며</h2><p>Swagger 구조를 분석하여 성공, 실패 응답 커스텀하고, 문서화를 진행하기 위해 길어졌던 컨트롤러 코드도 간결화 할 수 있었습니다.</p><p>구현하고 보니까 코틀린 언어의 장점을 잘 사용하지 못한 코드인 것 같고,, code, message 등 하드 코딩된 부분이 많아서 나중에 시간이 된다면 수정해보면 좋을 것 같습니다.</p><h2>References</h2><ul><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://swagger.io/docs/specification/basic-structure/">https://swagger.io/docs/specification/basic-structure/</a></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://swagger.io/docs/specification/paths-and-operations/">https://swagger.io/docs/specification/paths-and-operations/</a></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://swagger.io/docs/specification/describing-responses/">https://swagger.io/docs/specification/describing-responses/</a></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.0.3.md#response-object">https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.0.3.md#response-object</a></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://swagger.io/docs/specification/adding-examples/">https://swagger.io/docs/specification/adding-examples/</a></p></li></ul>

시작하며‘포티(Photi)’는 개발 중간에 투입되어 진행 중인 프로젝트로, Swagger를 활용해 API 명세서를 작성하여 프론트엔드 개발자와 소통하고 있습니다. 이 글에서는 기존 코드에서 발생한 Swagger 적용 문제와 그 해결 방안을 공유하려고 합니다.기존 코드의 문제점class DefaultSingleResponse(
    code: String,

Swagger 응답 커스텀을 통한 코드 간결화 + 프론트엔드 요구사항 해결

📱 Webview

<h1>Problem</h1><p>웹뷰를 작업하던 도중 video를 배경으로 사용하는 케이스가 존재해 구현하던 도중... mobile safari에서 poster -&gt; video로 전환되면서 아래와 같이 깜빡거리는 현상이 발생했다.</p><img src="https://image.until.blog/morethanmin/article/1723285031061" data-width="50%" data-align="center" alt="until-1220"><p>관련해서 이슈를 찾아보았으나 관련된 내용이 많지 않았고, 임시 대응책을 고민해보았다.</p><h1>background-image 추가하기</h1><p>아래와 같이 video의 background-image로 poster를 추가해 임시로 대응해줄 수 있었다.</p><pre spellcheck="false"><code class="language-xml">      &lt;video
        src={video}
        poster={poster}
        style={{ width: 260, height: 200 }}
        autoPlay
        loop
        playsInline
        muted
        css={css`
          // mobile safari에서 poster -&gt; video로 전환 시 깜빡임이 발생해 추가
          overflow: hidden;
          background-image: url(${poster});
          background-position: center;
          background-size: cover;
        `}
      /&gt;</code></pre><p>placeholder -&gt; video로 전환될 때의 영역을 background image가 채워줌으로서 깜빡임 현상을 임시로 해결해 줄 수 있었다.</p><p>아래는 결과물이다.</p><img src="https://image.until.blog/morethanmin/article/1723285046176" data-width="50%" data-align="center" alt="until-1221"><p></p>

Problem웹뷰를 작업하던 도중 video를 배경으로 사용하는 케이스가 존재해 구현하던 도중... mobile safari에서 poster -&gt; video로 전환되면서 아래와 같이 깜빡거리는 현상이 발생했다.관련해서 이슈를 찾아보았으나 관련된 내용이 많지 않았고, 임시 대응책을 고민해보았다.background-image 추가하기아래와 같이 video

mobile safari에서 video poster가 깜빡이는 이슈

🧑‍💻 Develop

<p>내 로컬에서 프로젝트를 실행시키고, 같은 망을 사용하는 팀원들에게 내가 만든 페이지를 공유해주고 싶었다. 그렇게 하려면 클라우드 등에 배포를 해서 보여줄 수도 있지만, 나는 그냥 바로 보여주고 싶었기에 <code spellcheck="false">localhost</code>대신 내 IP를 붙여 공유 했다.</p><p>Mac 에서 내 IP를 알아내는 명령어는 다음과 같다.</p><pre spellcheck="false"><code class="language-bash"># ethernet 연결일 경우
ipconfig getifaddr en0

# wireless 연결일 경우
ipconfig getifaddr en1</code></pre><p></p><p>매번 확인이 필요할 때마다 터미널을 들어가서 저 명령어를 치고.. 명령어를 까먹어서 다시 검색해서 찾고, 결과를 복사해서 포트를 붙이고.. 다시 복사하고를 반복했다.</p><p>생각보다 내 아이피를 확인할 일이 많았고, 명령어가 길고 복잡했기에 간단한 명령어로 내 IP를 알아낸 후 바로 클립보드로 복사되게끔 만들었다.</p><p></p><h1>Shell Script 작성</h1><pre spellcheck="false"><code class="language-shell">#!/bin/bash

# IP 주소 가져오기
ip=$(ipconfig getifaddr en0)

# 포트 번호가 주어지면 ip:port 형식으로 출력 및 클립보드에 Copy
if [ -n "$1" ]; then
  echo "$ip:$1" | pbcopy
  echo "Public IP with port: $ip:$1"
else
  echo "$ip" | pbcopy
  echo "Public IP: $ip"
fi</code></pre><p>위 Script 내용을 요약하면 다음과 같다.</p><ul><li><p>실행 하면 <code spellcheck="false">ipconfig getifaddr en0</code> 명령어를 이용하여 내 IP를 불러온 뒤, 바로 클립보드에 넣는다.</p></li><li><p>포트 번호를 인수로 받으면 <code spellcheck="false">&lt;IP Adress&gt;:&lt;port&gt;</code> 식으로 클립보드에 들어간다.</p></li></ul><p></p><p>작성 후 이 파일을 실행 시킬 수 있도록 권한을 줘야한다.</p><pre spellcheck="false"><code class="language-shell">chmod +x get_ip.sh</code></pre><h1>Alias 작성</h1><p>이제 작성한 스크립트를 터미널에서 간단한 명령어로 실행시킬 수 있게 alias를 작성해보자. 그러기 위해서는 <code spellcheck="false">.zshrc</code>를 편집해야 한다.</p><pre spellcheck="false"><code class="language-bash"> vim ~/.zshrc</code></pre><p></p><p>맨 마지막 줄에 다음과 같이 추가하고 <code spellcheck="false">:wq</code> 명령어를 통해 빠져나온다. alias 뒤에 들어갈 텍스트는 자유다. 나는 getip로 정했다.</p><pre spellcheck="false"><code class="language-bash">alias getip='get_ip.sh 파일 위치'</code></pre><p></p><p>아래 명령어로 변경 사항을 적용 시킨다.</p><pre spellcheck="false"><code class="language-bash">source ~/.zshrc</code></pre><h1>실행!</h1><p>이제 터미널에서 지정한 alias를 바로 쳐보자. 그럼 터미널에 내 아이피가 출력되고, 클립보드에도 바로 들어간걸 확인할 수 있다.</p><img src="https://image.until.blog/love/article/1723038819891" alt="until-1188">

내 IP주소를 가져오고 바로 복사까지 해보자

터미널에서 내 IP 주소 바로 가져오기

vscode

<h1>스니펫 설정하는 곳 찾아가기</h1><ol><li><p><code spellcheck="false">command + p</code> 로 파일 검색창 열기</p></li><li><p><code spellcheck="false">&gt;snippet</code> 입력하기</p></li></ol><img src="https://image.until.blog/dody/article/1722409042376" alt="until-1160"><ol start="3"><li><p><code spellcheck="false">Snippets: Configure User Snippets</code> 선택하기</p></li></ol><img src="https://image.until.blog/dody/article/1722409154676" alt="until-1161"><ol start="4"><li><p>스니펫을 사용할 환경을 선택해주면 된다. 나는 <code spellcheck="false">typescriptreact.json</code> 을 선택</p><p>확인해보면 <code spellcheck="false">Print to console</code> 이름으로 된 예시가 있다. 그걸 참고해서 이제 나만의 스니펫을 만들어보자.</p></li></ol><p></p><h1>스니펫 생성하기</h1><pre spellcheck="false"><code class="language-json">  {

  "nextjs) functional component": {
  	"prefix": "rfc",
  	"body": [
  		"export default function ${TM_FILENAME_BASE}() {",
      " return &lt;div&gt; ${TM_FILENAME_BASE} component! &lt;/div&gt;",
      "}"
  	],
  	"description": "nextjs) functional component"
  }
}

</code></pre><p>아주 자주 사용하는 rfc 스니펫을 내 입맛에 맞게 살짝 고쳐주었다. </p><p>참고로 TM_FILENAME_BASE 는 확장자를 뺀 파일 명을 뜻한다.</p><h1></h1><h1>스니펫 동기화 해주기</h1><p>vscode는 기본적으로 스니펫은 로컬에 저장한다. 나는 2대의 맥북을 사용하기에 스니펫 설정을 동기화해주어 같은 일을 두번 하지 않으려 한다.</p><p>vscode 계정에 로그인이 되어있어야한다. </p><ol><li><p><code spellcheck="false">command + p</code> 로 파일 검색창을 다시 열어주고</p></li><li><p><code spellcheck="false">&gt;setting sync</code> 를 입력한다</p></li></ol><img src="https://image.until.blog/dody/article/1722409917401" alt="until-1162"><ol start="3"><li><p><code spellcheck="false">Settings Sync: Backup and Sync Settings...</code> 을 선택</p></li></ol><img src="https://image.until.blog/dody/article/1722409929302" alt="until-1163"><ol start="4"><li><p>동기화 하고 싶은 부분들을 선택해서 <code spellcheck="false">sign in</code> 버튼을 눌러준다.</p></li></ol><img src="https://image.until.blog/dody/article/1722409940676" alt="until-1164"><ol start="5"><li><p>vscode 로그인한 계정을 선택해준다.</p></li><li><p>성공한다면 우측하단에 아래와 같은 메시지가 뜬다.</p></li></ol><img src="https://image.until.blog/dody/article/1722409975157" alt="until-1165"><ol start="7"><li><p>메시지가 뜨기 전에 conflict 가 났다고 메시지가 나왔다. 확인해보니 내가 방금 추가한 스니펫 부분이 다르다고 뜬것이었다. 컨플릭 처리 하고나면 6번과 같은 메시지가 뜰 것이다.</p></li></ol><p></p><p></p>

코드 치는 양을 최대한으로 줄이고싶다.. 

[vscode] snippet 만들어서 사용하기

<p><a target="_blank" rel="noopener noreferrer nofollow" href="https://rinthel.github.io/rust-lang-book-ko/ch11-02-running-tests.html">테스트 실행하기 - The Rust Programming Language</a></p><h2>테스트 실행하기</h2><h3>테스트 실행 방식 제어하기</h3><p>cargo run이 여러분의 코드를 컴파일 하고 난 뒤 그 결과인 바이너리를 실행하는 것과 마찬가지로, cargo test는 여러분의 코드를 테스트 모드에서 컴파일하고 결과로 발생한 테스트 바이너리를 실행합니다. 여러분은 커맨드 라인 옵션을 지정하여 cargo test의 기본 동작을 변경할 수 있습니다. 예를 들어, cargo test를 통해 생성된 바이너리의 기본 동작은 모든 테스트를 병렬적으로 수행하고 테스트가 ㅅ리행되는 도안 생성된 결과를 캡처하는 것으로, 테스트 결과와 연관된 출력을 읽기 쉽도록 화명네 표시하는 것을 막아버립니다.</p><p>어떤 커맨드 라인 옵션은 cargo test에 입력되고 어떤 옵션은 결과 테스트 바이너리에 입력됩니다. 이 두가지타입의 인자를 구분하기 위해서, cargo test에 주어질 인자를 먼저 나열하고 그 다음 구분자로 <code spellcheck="false">--</code> 를 넣고, 그 뒤 테스트 바이너리에 입력될 인자를 나열하빈다. cargo test —help를 실행하는 것은 cargo test에서 사용할 수 있는 옵션을 표시하고, cargo test — —help를 실행하는 것은 구분자 — 이후에 나올수 있는 옵션을 표시합니다.</p><ul><li><p>테스트를 병렬 혹은 연속으로 실행하기</p><pre spellcheck="false"><code class="language-rust">cargo test -- --test-threads=1
</code></pre></li><li><p>함수 결과 보여주기</p><pre spellcheck="false"><code class="language-rust">cargo test -- --nocapture
</code></pre></li><li><p>이름으로 테스트의 일부분만 실행하기</p><pre spellcheck="false"><code class="language-rust">cargo test one_hundred
</code></pre></li><li><p>특별한 요청이 없는 한 몇몇 테스트들 무시하기</p><pre spellcheck="false"><code class="language-rust">#[test]
#[ignore]
fn expensive_test() {
	// code that takes an hour to run
}
</code></pre></li></ul><h2>테스트 조직화</h2><p>이 장의 시작 부분에서 언급했듯이, 테스팅은 복잡한 분야이고, 여러 사람들이 서로 다른 용어와 조직화 방식을 이용합니다. 러스트 커뮤티니에서는 테스트에 대해서 두 개 의 주요한 카테고리로 나눠 생각합니다.</p><ul><li><p>단위 테스트: Unit Test</p><p>단위 테스트는 작고 하나에 더 집중하며, 한 번에 하나의 모듈만 분리하여 테스트하고, 비공개 인터페이스(private interface)를 테스트합니다.</p></li><li><p>통합 테스트: Integration Test</p><p>통합 테스트는 완전히 여러분의 라이브러리 외부에 있으며, 공개 인터페이스(private interface)를 이용하고 테스트마다 여러 개의 모듈을 잠재적으로 실험함으로써**, 다른 외부의 코드가 하는 방식과 동일한 형태로 여러분의 코드를 이용**합니다.</p></li></ul><p>두 종류의 테스트 작성 모두가 여러분의 라이브러리 코드 조각들이 따로따로 혹은 함께 사용되었을 때 여러분이 기대하는 바와 같이 동작하는 지를 확신시키는데 중요합니다.</p><h3>단위 테스트</h3><p>단위 테스트의 목적은 각 코드의 단위를 나머지 부분과 분리하여 테스트하는 것인데, 이는 코드가 어디 있고 어느 부분이 기대한 대로 동작하지 않는지를 빠르게 정확히 찾아낼 수 있도록 하기 위함입니다.</p><p>단위 테스트는 src 디렉토리 내에 넣는데, 각 파일마다 테스트하는 코드를 담고 있습니다. 관례는 각 파일마다 테스트함수를 담고 있는 tests라는 이름의 모듈을 만들고, 이 모듈에 cfg(test)라고 어노테이션 하는 것입니다.</p><h3>통합 테스트</h3><p>러스트에서 통합 테스트들은 완전히 여러분의 라이브러리 외부에 있습니다. 이들은 여러분의 라이브러리르 다른 코드들과 동일한 방식으로 이용하는데, 이는 이 외부 테스트들이 오직 여러분의 라이브러리의 공개 API 부분에 속하는 함수들만 호출할 수 있다는 의미입니다. 이들의 목적은 여러분의 라이브러리의 수많은 파트들이 함께 올바르게 동작하는지를 시험하는 것입니다.</p><p>그 자체로서는 올바르게 동작하는 코드의 단위들도 통합되었을 때는 문제를 일으킬 수 있으므로, 통합된 코드의 테스트 커버율 또한 중요합니다. 통합 테스트를 만들기 위해서는 tests 디렉터리를 먼저 만들 필요가 있습니다.</p><ul><li><p>tests 디렉토리</p><p>프로젝트 디렉토리의 최상위, 그러니까 src 옆에 tests 디렉토리를 만듭니다. 카고는 이 디렉토리 내의 통합 테스트 파일들을 찾을 줄 압니다. 그런 후에는 이 디렉토리에 원하는 만큼 많은 테스트 파일을 만들 수 있으며, 카고는 각각의 파일들을 개별적인 크레이트처럼 컴파일할 것입니다.</p><p>한 번 통합 테스트를 만들어봅시다. Lising 11-12의 <code spellcheck="false">src/lib.rs</code> 코드를 그대로 유지한 채로, tests 디렉토리를 만들고, <code spellcheck="false">tests/integration_test.rs</code> 라는 이름의 새 파일을 만든 다음, Listing 11-13의 코드를 집어넣으세요.</p><pre spellcheck="false"><code class="language-rust">extern crate adder;

#[test]
fn it_adds_two() {
	assert_eq!(4, adder::add_two(2));
}
</code></pre></li></ul><p><code spellcheck="false">$ cargo test --test integration_test</code></p>

Rust Test

<img src="https://image.until.blog/morethanmin/article/1718723304750" alt="until-541"><p>개발자에게 생산성은 곧 비용이기에 생산성을 높이는 것은 매우 중요한 일인데요.</p><p>멀티커서 기능을 잘 활용하면 생산성을 높일 수 있습니다. 저 또한 잘 활용하고 있지만 매번 활용하고 있는 기능들만 사용하게 되는 것 같아 이번 기회에 어떤 기능들이 있는지 정리해보려고 합니다.</p><p>기본적으로 마우스를 활용한 방식과 키보드를 활용한 방식이 있어요.</p><h1>마우스를 활용한 멀티 커서 단축키</h1><h2>클릭하여 하나씩 추가</h2><p>우선 가장 기초적인 방법부터 알려드릴게요.</p><p>맥에서는 <code spellcheck="false">Option</code> 키, 윈도우에서는 <code spellcheck="false">Alt</code> 키를 누른 상태로 vscode 화면에서 다른 영역을 마우스 포인터로 클릭하여 여러 커서를 추가할 수 있습니다.</p><p>이 상태에서 키보드로 타이핑을 하시면 모든 커서에서 동일하게 타이핑이 됩니다.</p><p>제거하기 위해서는 커서에 <code spellcheck="false">Option</code> 또는 <code spellcheck="false">Alt</code> 키를 누르신 체로 다시 클릭해주시면 됩니다.</p><p><code spellcheck="false">esc</code> 를 눌러서도 멀티커서를 제거할 수 있어요.</p><h2>그래그하여 추가</h2><p>클릭이 아닌 드래그해서 추가하는 방법도 있어요.</p><p>맥에서는 <code spellcheck="false">Option+Shift</code> 키, 윈도우에서는 <code spellcheck="false">Alt+Shift</code> 키를 누른 상태로 vscode 화면에서 다른 영역을 마우스 포인터를 드래그하여 여러 커서를 추가할 수 있습니다.</p><h1>키보드를 활용한 멀티 커서 단축키</h1><h2>일치하는 텍스트 모두 선택</h2><p>선택하고자 하는 내용을 드래그한다음, 맥에서는 <code spellcheck="false">Command+Shift+L</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+Shift+L</code> 키를 누르면 동일한 텍스트들에 모두 커서가 추가됩니다.</p><h2>순차적으로 일치하는 텍스트 선택</h2><p>위 기능의 경우 모든 텍스트가 선택된다면 해당 단축키를 사용하면 순차적으로 원하는 텍스트에 하나씩 커서가 추가됩니다.</p><p>선택하고자 하는 내용을 드래그한다음, 맥에서는 <code spellcheck="false">Command+D</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+D</code> 키를 누르면 드래그한 텍스트와 일치하는 다음 텍스트에 커서가 생기고 또 누르면 그 다음 텍스트에 커서가 추가되어요.</p><p>만약에 다시 되돌리기 위해서는 맥에서는 <code spellcheck="false">Command+U</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+U</code> 키를 눌러서 마지막으로 선택된 곳을 취소할 수 있어요.</p><h2>현재 커서 위 또는 아래 줄에 추가</h2><p>현재 커서 위치에서 위 또는 아래 방향으로도 멀터 커서를 연속으로 추가할 수 있어요. 맥에서는 <code spellcheck="false">Command+Option+Up/Down</code>, 윈도우즈에서는 <code spellcheck="false">Ctrl+Alt+Up/Down</code>키를 누르시면 됩니다.</p><h2>그래그한 여러 줄의 맨 마지막에 멀터 커서 추가하기</h2><p>여러줄을 드래그한 상태에서 각 줄의 마지막 라인에 커서를 추가할 수 있어요.</p><p>맥에서는 <code spellcheck="false">Option+Shift+I</code>, 윈도우에서는 <code spellcheck="false">Alt+Shift+I</code>를 키를 눌러 적용할 수 있어요.</p><p></p>

개발자에게 생산성은 곧 비용이기에 생산성을 높이는 것은 매우 중요한 일인데요.멀티커서 기능을 잘 활용하면 생산성을 높일 수 있습니다. 저 또한 잘 활용하고 있지만 매번 활용하고 있는 기능들만 사용하게 되는 것 같아 이번 기회에 어떤 기능들이 있는지 정리해보려고 합니다.기본적으로 마우스를 활용한 방식과 키보드를 활용한 방식이 있어요.마우스를 활용한 멀티 커서

VSCode 멀티 커서로 생산성 높이기

CodingTest

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li><p>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/challenges?order=recent">Programmers</a></p></li><li><p>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/42840">모의고사</a></p></li><li><p>사용언어 : C#</p></li><li><p>난이도 : 하</p></li><li><p>풀이시간 : 27m 17s</p></li><li><p>유형 : 배열, 완전탐색</p></li></ul><h6><strong>문제 설명</strong></h6><p>수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다.</p><p>1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ...<br>2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ...<br>3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ...</p><p>1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아 return 하도록 solution 함수를 작성해주세요.</p><h5>제한 조건</h5><ul><li><p>시험은 최대 10,000 문제로 구성되어있습니다.</p></li><li><p>문제의 정답은 1, 2, 3, 4, 5중 하나입니다.</p></li><li><p>가장 높은 점수를 받은 사람이 여럿일 경우, return하는 값을 오름차순 정렬해주세요.</p></li></ul><h5>입출력 예</h5><p>answers return <br>[1,2,3,4,5] [1] <br>[1,3,2,4,2] [1,2,3]</p><h5>입출력 예 설명</h5><p>입출력 예 #1</p><ul><li><p>수포자 1은 모든 문제를 맞혔습니다.</p></li><li><p>수포자 2는 모든 문제를 틀렸습니다.</p></li><li><p>수포자 3은 모든 문제를 틀렸습니다.</p></li></ul><p>따라서 가장 문제를 많이 맞힌 사람은 수포자 1입니다.</p><p>입출력 예 #2</p><ul><li><p>모든 사람이 2문제씩을 맞췄습니다.</p></li></ul><h3>문제 풀이 접근</h3><p>이 문제는, 각 사람마다의 패턴을 배열로 저장해서, 인덱스가 넘어가게되면 각자의 배열 인덱스를 0으로 돌려서 차례로 순회하면서 정답인지 오답인지 판단해서 갯수를 정하는 문제다.</p><p>맞은 갯수가 여럿인 경우, 인덱스 기준으로 정렬해서 반환한다.</p><p>이 문제의 플로우는,<br>1.  각 사람의 패턴을 배열에 저장한다.<br>2. 각 사람의 인덱스를 배열로 따로 저장한다. <br>3. 맞은 갯수를 클래스를 작성해서 Key Value 형식으로 만들어서 저장한다.<br>4. 맞은 갯수를 기준으로 오름차순으로 정렬한다.<br>5. 복수 최고 득점자가 있을때는 인덱스를 기준으로 정렬한다.</p><h3>정답 작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;

    public class point
    {
        public int index;
        public int score;

        public point(int index, int score)
        {
            this.index = index;
            this.score = score;
        }
    }

    public class Solution
    {
        public int[] solution(int[] answers)
        {
            int[] answer = new int[] { };

            int[] fst = new int[5] { 1, 2, 3, 4, 5 };
            int[] snd = new int[8] { 2, 1, 2, 3, 2, 4, 2, 5 };
            int[] thd = new int[10] { 3, 3, 1, 1, 2, 2, 4, 4, 5, 5 };

            point[] passCount = new point[3];
            passCount[0] = new point(1,0);
            passCount[1] = new point(2,0);
            passCount[2] = new point(3,0);

            int[] idx = new int[3] { 0, 0, 0 };

            for (int i = 0; i &lt; answers.Length; ++i)
            {
                if (fst[idx[0]] == answers[i])
                    ++passCount[0].score;

                if (snd[idx[1]] == answers[i])
                    ++passCount[1].score;

                if (thd[idx[2]] == answers[i])
                    ++passCount[2].score;

                for (int j = 0; j &lt; idx.Length; ++j)
                {
                    ++idx[j];

                    if (j == 0 &amp;&amp; fst.Length &lt;= idx[j])
                    {
                        idx[j] = 0;
                    }

                    if (j == 1 &amp;&amp; snd.Length &lt;= idx[j])
                    {
                        idx[j] = 0;
                    }

                    if (j == 2 &amp;&amp; thd.Length &lt;= idx[j])
                    {
                        idx[j] = 0;
                    }
                }
            }

            Array.Sort(passCount, (point a, point b) =&gt; { return a.score.CompareTo(b.score); });

            int retScore = passCount[passCount.Length-1].score;
            point[] retPt = Array.FindAll(passCount, rhs =&gt; rhs.score == retScore);
            
            Array.Sort(retPt, (point a, point b) =&gt; { return a.index.CompareTo(b.index); });

            answer = new int[retPt.Length];
            for (int i = 0; i &lt; retPt.Length; ++i)
            {
                answer[i] = retPt[i].index;
            }

            return answer;
        }
    }</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1724756784653" alt="until-1281">

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

코딩테스트 준비 - 모의고사

<blockquote><p>배포한 결과물은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://keeeep.web.app/">https://keeeep.web.app</a> 에 접속하면 확인해볼 수 있어요.</p></blockquote><p>react를 무료로 배포할 수 있는 다양한 호스팅 서비스들이 존재합니다. (github, netlify 등등)</p><p>언급한 두 서비스 외에 firebase로도 배포할 수 있다는 사실 알고 계셨나요? 심지어 firebase로 배포하면 *.web.app 이라는 유니크한 도메인도 무료로 사용할 수 있어서 간단하게 소개해보겠습니다.</p><p>위에 소개한 앱은 database또한 firebase로 만들어진 todo 앱인데요, database를 연동하는것은 추후에 소개해볼게요.</p><h1>배포하기</h1><h2>프로젝트 생성</h2><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://console.firebase.google.com/">https://console.firebase.google.com/</a> 에 접속해 프로젝트를 생성해주세요. </p><p>애널리틱스 연동은 필요에 따라 선택해주시면 돼요.</p><p>생성해주셨다면 <strong>빌드 &gt; 호스팅</strong> 메뉴를 선택해 시작하기를 눌러주세요.</p><img src="https://image.until.blog/morethanmin/article/1722157087360" alt="until-959"><h2>firebaes cli 설치</h2><p>가이드에 따라 firebase-cli를 설치해주세요.</p><pre spellcheck="false"><code class="language-bash">npm install -g firebase-tools</code></pre><p><code spellcheck="false">웹 앱에 Firebase 자바스크립트 SDK를 추가하는 단계도 표시합니다.</code> 는 호스팅만 하는 경우에는 필요하지 않으니 꼭 체크하지 않으셔도 괜찮아요.</p><h2>firebase init</h2><p>배포하고자 하는 app의 root directory에서 아래 커맨드를 순차적으로 입력해주세요.</p><pre spellcheck="false"><code class="language-bash">firebase login

firebase init</code></pre><p>init 입력시 아래와 같이 나오는데, Hosting이 목적이므로 <code spellcheck="false">Hosting</code> 선택. </p><img src="https://image.until.blog/morethanmin/article/1722157605095" alt="until-960"><p>프로젝트를 만들었으므로 <code spellcheck="false">Use an existing project</code> 선택.</p><img src="https://image.until.blog/morethanmin/article/1722157665078" alt="until-962"><p><code spellcheck="false">npm run build</code> 입력시 생성되는 react app의 빌드 디렉터리를 입력 해주시면 됩니다. 기본적으로 <code spellcheck="false">build</code> 폴더에 빌드되기 때문에 <code spellcheck="false">build</code> 를 입력해주었어요.</p><img src="https://image.until.blog/morethanmin/article/1722157807152" alt="until-963"><p>리액트는 기본적으로 single-page-application이기에 <code spellcheck="false">y</code> 입력.</p><img src="https://image.until.blog/morethanmin/article/1722157882041" alt="until-964"><p>Github과 연동하지는 않을 것이므로 <code spellcheck="false">N</code> 입력.</p><img src="https://image.until.blog/morethanmin/article/1722157930986" alt="until-965"><p>기존 index.html을 덮어씌울것이냐고 물어보는데, <code spellcheck="false">N</code>입력.</p><img src="https://image.until.blog/morethanmin/article/1722158011014" alt="until-966"><p>그러면 아래와 같이 설정파일들이 생성돼요.</p><img src="https://image.until.blog/morethanmin/article/1722158178162" alt="until-967"><h2>빌드 스크립트 추가하기</h2><p>이제 <code spellcheck="false">firebase deploy</code> 만 입력하면 바로 배포가 되는데요, 조금더 편리하게 배포할 수 있도록 <code spellcheck="false">package.json</code>에 스크립트를 추가해보겠습니다.</p><p>우선, <code spellcheck="false">npm install -D firebase-tools</code> 을 입력해 cli를 프로젝트에 설치해줍시다.</p><p>이후 아래와 같이 deploy 스크립트를 추가해주었어요.</p><img src="https://image.until.blog/morethanmin/article/1722158413570" alt="until-968"><p>이제 <code spellcheck="false">npm run deploy</code>만 입력해주면 빌드 후 배포됩니다. 콘솔에 나와있는 url에 접속하면 배포된 것을 확인할 수 있어요. </p><h1>*.web.app 도메인 주소 변경하기</h1><p>만약 본인이 *.web.app 기반의 다른 도메인 주소로 변경하고 싶다면 <code spellcheck="false">호스팅 &gt; 사이트 추가</code> 에서 원하는 도메인을 입력해주시면 무료로 도메인도 변경할 수 있어요.</p><img src="https://image.until.blog/morethanmin/article/1722158725214" alt="until-969">

배포한 결과물은 https://keeeep.web.app 에 접속하면 확인해볼 수 있어요.react를 무료로 배포할 수 있는 다양한 호스팅 서비스들이 존재합니다. (github, netlify 등등)언급한 두 서비스 외에 firebase로도 배포할 수 있다는 사실 알고 계셨나요? 심지어 firebase로 배포하면 *.web.app 이라는 유니크한 도메인도 

firebase로 react 배포하고 *.web.app 도메인 무료로 사용하기

<h2><strong>ExtendScript Debugger 확장 설치</strong></h2><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://marketplace.visualstudio.com/items?itemName=Adobe.extendscript-debug">https://marketplace.visualstudio.com/items?itemName=Adobe.extendscript-debug</a></p><h2>M1을 사용하는 경우</h2><blockquote><p><strong><em>Warning for Apple Silicon Users (e.g. M1)</em></strong>: The extension does not run in native builds of VS Code but it&nbsp;<strong>does</strong>&nbsp;work with Intel/universal builds using Rosetta. Please see the&nbsp;<a target="_blank" rel="noreferrer noopener nofollow" href="https://marketplace.visualstudio.com/items?itemName=Adobe.extendscript-debug#known-issues">Known Issues</a>&nbsp;below for information on how to use the extension.</p></blockquote><p>M1은 지원안함. 그래서 Rosetta 모드를 활성화해야함.</p><p>VSCode 애플리케이션에 <code spellcheck="false">정보 가져오기</code>에서 <code spellcheck="false">Rosett를 사용하여 열기</code> 를 체크 후 다시 실행시켜야 함.</p><img src="https://image.until.blog/keea/article/1728029566920.png" data-width="100%" data-align="center"><h2>launch.json 파일 설정</h2><pre spellcheck="false"><code class="language-json">{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "extendscript-debug",
            "request": "launch",
            "name": "Run ExtendScript",
            "script": "${file}"
        },
    ]
}</code></pre><h2>디버깅</h2><p>AfterEffects 실행 후, 디버깅 원하는 파일에서 <code spellcheck="false">F5</code> 키를 누름.</p><p>그러면 아래와 같이 이미지 뜸. <code spellcheck="false">Adobe After Effects</code> 선택하고 <code spellcheck="false">Enter</code> .</p><img src="https://image.until.blog/keea/article/1728030085114.png" data-width="100%" data-align="center"><h2>Example</h2><h3>코드</h3><pre spellcheck="false"><code class="language-javascript">// alert.jsx

alert("hello");</code></pre><h3>결과</h3><img src="https://image.until.blog/keea/article/1728030293756.png" data-width="100%" data-align="center">

VSCode Setup for ExtendScript ✨

<p>지인들과 같이 사용할 목적으로 만든 블로그가 완성된 기념으로 블로그를 제작하며 겪었던 React와 TypeScript를 이용한 프로젝트를 Firebase에 배포하는 과정을 공유하고자 합니다. 특히 서버 사이드 렌더링(SSR) 적용과 Firebase 배포 경험을 중점적으로 다루겠습니다.</p><blockquote><p>이 글은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://aurchive.com/posts/tj87pFGqiWDiLl18LVXl">이 곳</a> 에서도 읽어 보실 수 있습니다.</p></blockquote><p>Google에서 제공하는 Firebase는 편리한 사용성과 높은 생산성을 갖춘 모바일 및 웹 애플리케이션 개발 플랫폼입니다. 클라이언트 개발에 집중하고 싶었던 저에게 매력적인 선택지였습니다. 그러나 향후 다른 플랫폼으로의 이전 가능성을 고려하여 Firebase Client SDK 대신 Cloud Functions를 활용하여 API 서버를 구축하는 방식을 택했습니다.</p><h2>시작하기</h2><h3>Firebase 프로젝트 생성</h3><p>Google 계정으로 로그인 후 Firebase 콘솔(<a target="_blank" rel="noopener noreferrer nofollow" href="http://firebase.google.com/"><u>firebase.google.com</u></a>)에 접속하여 다음과 같이 프로젝트를 설정합니다.</p><p>1. 프로젝트 생성: '프로젝트 만들기' 버튼을 클릭하여 새 프로젝트를 생성합니다.<br>2. Hosting 활성화: 생성된 프로젝트의 사이드바에서 '빌드' &gt; 'Hosting'을 선택하여 Hosting 기능을 활성화합니다.<br>3. Blaze 요금제 선택: Cloud Functions 배포를 위해 Blaze 요금제를 선택하고 결제 수단을 등록합니다.</p><h3>Vite를 이용한 React 프로젝트 생성</h3><p>Firebase 프로젝트 설정을 완료했으므로, 이제 Vite를 사용하여 TypeScript 기반의 React 프로젝트를 생성해 보겠습니다. 터미널에서 다음 명령어를 실행합니다.</p><pre spellcheck="false"><code>$ yarn create vite your-project --template react-ts</code></pre><p>위 명령어 실행 후 안내에 따라 프로젝트 디렉토리로 이동하고, 기본 패키지를 설치한 후 개발 서버를 실행합니다.</p><pre spellcheck="false"><code>$ cd your-project
$ yarn
$ yarn dev</code></pre><p>이제 브라우저에서 <code spellcheck="false">http://localhost:5173/</code>로 접속하면 Vite에서 기본 제공하는 간단한 React 애플리케이션을 확인할 수 있습니다.</p><h3>Firebase 프로젝트와 연동하기</h3><p>이제 Firebase CLI를 사용하여 Firebase 프로젝트와 연동하는 과정을 안내해 드리겠습니다.</p><h4>1. Firebase CLI 설치</h4><p>터미널에서 다음 명령어를 실행하여 Firebase CLI를 전역적으로 설치합니다.</p><pre spellcheck="false"><code>$ npm install -g firebase-tools</code></pre><h4>2. Firebase에 로그인</h4><p>설치된 Firebase CLI를 사용하여 Firebase 계정에 로그인합니다.</p><pre spellcheck="false"><code>$ firebase login</code></pre><p>로그인 명령을 실행하면 브라우저 창이 열리고, Google 계정으로 로그인하라는 메시지가 표시됩니다. 화면의 지시에 따라 로그인을 진행하고, Firebase CLI에 대한 액세스를 허용해주세요.</p><h4>3. 프로젝트 목록 확인</h4><p>로그인이 완료되면 다음 명령어를 실행하여 현재 연결된 Firebase 프로젝트 목록을 확인할 수 있습니디.</p><pre spellcheck="false"><code>$ firebase projects:list</code></pre><p>만약 프로젝트 목록이 정상적으로 출력된다면 Firebase CLI가 올바르게 설치되었고, 계정과 연결되었다는 의미입니다.</p><p>(선택사항) 연결된 Firebase 프로젝트를 변경하고 싶다면 <code spellcheck="false">firebase use &lt;프로젝트 ID&gt;</code> 명령어를 이용해 변경할 수 있습니다.</p><h4>4. 프로젝트 초기화</h4><p>다음 명령어를 실행하여 프로젝트를 초기화합니다. 초기화 과정에서 사용할 Firebase 기능을 선택하고, 필요한 설정을 진행합니다.</p><pre spellcheck="false"><code>$ firebase init</code></pre><img src="https://image.until.blog/susmisc14/article/1722669914257" alt="until-1177"><h3>Cloud Functions 를 사용해 SSR 구현하기</h3><p>Firebase 설정이 완료되었으므로, 이제 Cloud Functions를 활용하여 서버 사이드 렌더링(SSR)을 구현해 보겠습니다. 이를 통해 SEO(검색 엔진 최적화)를 개선할 수 있습니다.</p><h4>1. 필수 라이브러리 설치</h4><p>루트 경로에 생성된 <code spellcheck="false">functions</code> 디렉토리를 삭제하고 다음 명령어를 통해 SSR에 필요한 라이브러리를 설치합니다.</p><pre spellcheck="false"><code>$ yarn add firebase-functions express cors compression isbot</code></pre><p>- <code spellcheck="false">firebase-functions</code>: Firebase Cloud Functions를 사용하기 위한 라이브러리입니다.<br>- <code spellcheck="false">express</code>: Node.js 웹 애플리케이션 프레임워크입니다.<br>- <code spellcheck="false">cors</code>: 다른 도메인에서 자원을 요청할 수 있도록 CORS(Cross-Origin Resource Sharing)를 설정합니다.<br>- <code spellcheck="false">compression</code>: HTTP 응답 데이터를 압축하여 전송 시간을 단축시켜줍니다.<br>- <code spellcheck="false">isbot</code>: 사용자 에이전트를 분석하여 봇 여부를 판단하는 데 사용됩니다.</p><h4>2. Cloud Functions 함수 작성</h4><p>프로젝트 루트 경로에 <code spellcheck="false">index.server.ts</code> 파일을 생성하고 다음과 같이 코드를 작성합니다.</p><pre spellcheck="false"><code>import compression from "compression";
import cors from "cors";
import express from "express";
import functions from "firebase-functions";
import { renderer } from "./src/entry-server";

const app = express();

const corsOptions = {
  origin: true,
  credentials: true,
};

app.use(cors(corsOptions));
app.use(compression());

app.get("*", renderer);

export const render = functions.https.onRequest(app);</code></pre><p><code spellcheck="false">src</code> 디렉토리에 <code spellcheck="false">entry-client.tsx</code> 파일을 생성하고 다음과 같이 코드를 작성합니다.</p><p><code spellcheck="false">entry-client.tsx</code> 파일은 클라이언트에서 React 애플리케이션을 렌더링하는 엔트리 포인트입니다. 기존의 <code spellcheck="false">root</code> 요소가 비어 있으면 <code spellcheck="false">createRoot</code>를 사용해 렌더링하고, 그렇지 않으면 <code spellcheck="false">hydrateRoot</code>를 사용해 기존 콘텐츠를 재사용합니다.</p><pre spellcheck="false"><code>// src/entry-client.tsx

import { StrictMode } from 'react';
import { createRoot, hydrateRoot } from 'react-dom/client';
import App from '~app';

const root = document.getElementById('root')!;
const children = &lt;App /&gt;;

if (root.childElementCount === 0) {
  createRoot(root).render(&lt;StrictMode&gt;{children}&lt;/StrictMode&gt;);
} else {
  hydrateRoot(root, children);
}</code></pre><p>다음으로 <code spellcheck="false">src/entry-server.tsx</code> 파일을 생성하고 서버 사이드 렌더링을 위한 코드를 작성합니다.</p><p>이 코드는 Express 요청을 처리하여 React 애플리케이션을 서버에서 렌더링하고, 생성된 HTML을 클라이언트로 스트리밍합니다. <code spellcheck="false">isbot</code> 라이브러리를 사용하여 사용자 에이전트가 봇인지 확인하고, 봇일 경우 완성된 HTML을 한 번에 전송합니다.</p><pre spellcheck="false"><code>// src/entry-server.tsx

import { Transform } from "stream";
import { Request, Response } from "express";
import { renderToPipeableStream } from "react-dom/server";
import App from "./App";
import { isbot } from "isbot";

export async function renderer(req: Request, res: Response) {
  let isError = false;

  const stream = renderToPipeableStream(&lt;App /&gt;, {
    bootstrapModules: ["/index.js"],

    onShellReady() {
      if (!isbot(req.get("user-agent"))) { // 브라우저일 경우 스트리밍 방식으로 HTML 전송
        res.statusCode = isError ? 500 : 200;

        res.setHeader("content-type", "text/html");
        stream.pipe(transformContent()).pipe(res);
      }
    },

    onShellError() {
      res.statusCode = 500;

      res.setHeader("content-type", "text/html");
      res.send("&lt;h1&gt;Something went wrong&lt;/h1&gt;");
    },

    onAllReady() {
      if (isbot(req.get("user-agent"))) { // 봇일 경우 완성된 HTML을 한 번에 전송
        res.statusCode = isError ? 500 : 200;

        res.setHeader("content-type", "text/html");
        stream.pipe(transformContent()).pipe(res);
      }
    },

    onError(error) {
      isError = true;

      console.error(error);
    },
  });
}

function transformContent() {
  let content = "";

  const transform = new Transform({
    transform(chunk, _, callback) {
      content += chunk;

      callback();
    },

    flush(callback) {
      const data = `&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8" /&gt;&lt;link rel="icon" type="image/svg+xml" href="/vite.svg" /&gt;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;&lt;title&gt;Vite + React + TS&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="root"&gt;${content}&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;`;

      callback(null, data);
    },
  });

  return transform;
}</code></pre><p>이 과정을 통해 서버 사이드 렌더링(SSR)을 구현할 수 있습니다. 이제 서버에서 렌더링된 HTML을 클라이언트에 전송하고, 클라이언트는 이를 재사용하여 빠르게 초기 로딩을 완료할 수 있습니다.</p><h4>3. index.html 수정</h4><p><code spellcheck="false">src/main.tsx</code> 파일을 삭제하고 <code spellcheck="false">index.html</code> 파일을 수정하여 클라이언트 사이드 엔트리 포인트를 변경합니다.</p><pre spellcheck="false"><code>// index.html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;link rel="icon" type="image/svg+xml" href="/vite.svg" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Vite + React + TS&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
    &lt;script type="module" src="/src/entry-client.tsx"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre><h4>4. 빌드 설정</h4><p>Firebase에 배포를 위한 설정을 진행하겠습니다. 루트 경로의 <code spellcheck="false">vite.config.ts</code> <code spellcheck="false">package.json</code> <code spellcheck="false">firebase.json</code> 파일을 다음과 같이 수정합니다.</p><pre spellcheck="false"><code>// vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: "[name].js",
      },
    },
  },
});</code></pre><pre spellcheck="false"><code>// firebase.json

{
  "functions": [
    {
      "runtime": "nodejs20",
      "source": "./dist/server",
      "codebase": "default"
    }
  ],
  "hosting": {
    "public": "dist/client",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "render"
      }
    ]
  }
}</code></pre><pre spellcheck="false"><code>// package.json

{
// ...생략
  "main": "dist/server/index.server.js",
  "scripts": {
    "dev": "vite",
    "build:client": "tsc &amp;&amp; vite build --outDir dist/client",
    "build:server": "tsc &amp;&amp; vite build --outDir dist/server --ssr index.server.ts &amp;&amp; cp ./package.json ./dist/server",
    "fb:serve": "yarn build:client &amp;&amp; yarn build:server &amp;&amp; rm -rf dist/client/index.html &amp;&amp; firebase serve",
    "fb:deploy": "yarn build:client &amp;&amp; yarn build:server &amp;&amp; rm -rf dist/client/index.html &amp;&amp; firebase deploy"
  }
}</code></pre><p>※ <code spellcheck="false">package.json</code> 파일 중 <code spellcheck="false">scripts</code> 구문에 빌드 후 <code spellcheck="false">index.html</code> 파일을 삭제하는 부분이 있습니다. <code spellcheck="false">index.html</code> 파일을 삭제하는 이유는 Firebase 호스팅의 경우 루트 경로에 HTML 파일이 있으면 <code spellcheck="false">firebase.json</code> 파일에서 설정한 <code spellcheck="false">rewrites</code> 구문이 무시되고 무조건 HTML 파일을 읽게 됩니다. 우리는 SSR이 적용된 프로젝트를 Firebase에 배포하는 것이 목적이므로, 호스팅 루트 경로에 있는 HTML 파일은 삭제해주어야 합니다.</p><h4>5. 배포</h4><p>이제 모든 과정이 끝났습니다. 콘솔에 <code spellcheck="false">yarn fb:serve</code>를 입력하고 개발 서버를 실행하면 SSR이 적용된 페이지를 볼 수 있습니다.</p><img src="https://image.until.blog/susmisc14/article/1722668245260" alt="until-1174"><p>로컬 환경에서 SSR이 적용된 것을 확인했으면 터미널에서 <code spellcheck="false">yarn fb:deploy</code>를 입력합니다. 배포된 사이트에 접속하면 SSR이 적용된 페이지를 확인 할 수 있습니다.</p><p>배포된 결과물은 <a target="_blank" rel="noopener noreferrer nofollow" href="http://react-ts-with-ssr.web.app">react-ts-with-ssr.web.app</a> 에서 확인 할 수 있습니다.</p><img src="https://image.until.blog/susmisc14/article/1722668252177" alt="until-1175"><h2>마무리</h2><p>앞으로 Emotion JS를 사용해 SSR 환경에서 스타일을 주입하거나, react-helmet-async 라이브러리를 사용해 SEO 성능을 높이는 등의 활용이 가능합니다. 다음 글에서는 react-router-dom 라이브러리와 react-helmet-async 라이브러리를 활용해서 SEO 최적화하는 방법을 알아보겠습니다.</p><p>[ 다음글 ] <a target="_blank" rel="noopener noreferrer nofollow" href="https://aurchive.com/posts/DdaMfA8nVvFun3RFsSX4"><u>React + Typescript 프로젝트에 SSR을 적용해 파이어베이스에 배포하기(2)</u></a></p>

지인들과 같이 사용할 목적으로 만든 블로그가 완성된 기념으로 블로그를 제작하며 겪었던 React와 TypeScript를 이용한 프로젝트를 Firebase에 배포하는 과정을 공유하고자 합니다. 특히 서버 사이드 렌더링(SSR) 적용과 Firebase 배포 경험을 중점적으로 다루겠습니다.이 글은 이 곳 에서도 읽어 보실 수 있습니다.Google에서 제공하는 F