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

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

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

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

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

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

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

푸시알림 날리기

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

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

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

Python

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

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

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

병렬처리는 다른 방법도 있지만 일단 이 포스트에서는 Promise.all과 Worker_threads의 차이를 한번 알아보자잇일단 이 두개를 무슨 목적으로 쓰는걸까?<ol><li>성능 : 여러개의 작업을 동시에 처리해서, 실행 시간을 단축시킬래!</li><li>효율 : 여러개의 코어를 가진 프로세서를 다 활용하고싶어!</li><li>확장성 : 요청이 많아도 잘 대응해보고싶어!</li></ol>뭐 다른 이유도 많겠지만 당장 떠오르는건 이정도인 것 같네잉구현 코드부터 볼까! 다들 nest cli는 글로벌로 설치 되어있잖어~<pre spellcheck="false"><code>nest new nestjs-concurrency-test --strict</code></pre>main.ts<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>app.controller.ts<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>컨트롤러에 엔드포인트 두개를 맛있게 만들었엉 NestJS는 다들 아는거 맞지? 모르면 물어봐잉쿼리 파라미터 i를 받아서 몇번 반복할건지 처리할거임 ㅋㅋ 파라미터 없으면 천만번 ㅅㄱ링리턴값은 시간이 얼마나 걸렸는지 보여줄거임. result는 사실 별로 안중요해. 어차피 파라미터가 같다면 둘은 같은 값을 뱉을것실제 로직은 당연히 서비스코드에 있으니까 별거없지? (사실 서비스코드도 별거없음)app.service.ts<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>일단 Promise.all, worker_threads 에서 처리할 computation 함수를 맛있게 만들었당(처음에 for문으로 했다가 멋있어 보이려고 reduce 썼잔어 ㅋ)이 함수는 iterations 만큼 배열을 만들고, 제곱근을 계산해서 그 합을 반환할거야이 코드도 별거없어. 두 함수 다 태스크를 4개로 나눠서 처리한다다만 두 함수는 각각 다른 방식으로 동시성을 구현하는데, testPromiseAll 에서는 비동기 특성을 활용해서 동시성을 구현하지만 결국엔 '단일 스레드'에서 실행된다.testWorkerThreads 에서는 실제로 다중 스레드를 사용해서 병렬적으로 처리한다잉결과를 한번볼까?파라미터 i 를 1000000 (백만)으로 주었을때<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">백만번으로는 사실 별 차이 없다 ㅇㅅㅇ 오히려 promise-all로 구현했을때 아주 조금 더 빨리, 혹은 비슷한 결과가 나옴근데 i를 10000000 (천만)으로 주었을땐<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">2배 이상 차이가 난단말이지, 여러번 시도해도 worker-threads가 2배 이상 빠르다!그럼 이 두 방식 각각의 장단점이 뭔지 알아볼까잇<ol><li>Promise.all 의 장단점<ul><li>장점<ul><li>매우 구현이 간편하다!</li><li>메모리를 덜 씀</li><li>Node.js 환경 말고도 브라우저에서도 쓸수 있겠지?</li></ul></li><li>단점<ul><li>CPU단에서 실제 병렬 처리는 하는것은 아님</li><li>하나의 스레드에서 실행되기 때문에 여러 작업중에 하나가 블로킹되면 전체 성능이 떡락할지도?</li></ul></li></ul></li><li>Worker Threads의 장단점<ul><li>장점<ul><li>실제로 다중 코어를 활용함</li><li>각각의 Worker가 독립되어서 안정성이 높음</li><li>무거운 연산을 할땐 엄청 빠르다!</li></ul></li><li>단점<ul><li>구현이 좀 상대적으로 귀찮음(사실 쓰기 좀 꺼려지는 가장 큰 원인)</li><li>메모리를 많이 씀</li><li>오버헤드가 발생할지도..?</li><li>Node에서 지원하기 때문에 Node가 아니면 못써잉</li></ul></li></ul></li></ol>그럼 또 이제 어디에 쓰면 좋을지 알아봐야겠지<ol><li>Promise.all 활용처<ul><li>비동기 API를 한번에 호출 할 때</li><li>간단한 병렬 처리만을 필요로 할 때</li><li>I/O 작업을 동시에 처리할 때 </li></ul></li><li>Worker Threads 활용처<ul><li>엄청 거대한 데이터 처리</li><li>엄청 복잡한 연산</li><li>CPU가 두뇌 풀가동 해야할 때(이미지나 동영상 등 ?)</li><li>백그라운드에서 오래오래 실행되어야할 때</li></ul></li></ol><h1>결론</h1>알잘딱으로 잘 선택해야한다.Promise.all 이 편하긴해.. 자매품 Promise.race도 애용하자

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

[NestJS] Promise.all 과 Worker_threads의 차이

Spring

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

services:

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

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

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

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

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

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



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

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

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

TestContainers 적용기

<h1>Swagger UI란 무엇인가?</h1><blockquote>Swagger UI는 Swagger의 라이브러리 중 API Documentation, API 명세와 관련된 기능을 제공하는 라이브러리이다.</blockquote>쉽게 말하자면 API 자동 시각화이다. 아마 Swagger에 대해서 들어보지 못한 사람들도 얼추 이 비슷한 화면을 본 적은 있을 것이다.<img src="https://image.until.blog/brightdawn/article/1720425986318" alt="until-770">이게 Swagger-ui를 통해서 만들어진 화면이다. 딱 Swagger-ui 세팅만 해주고 내가 필요한 컨트롤러를 넣어주기만 하면 알아서 만들어준다.<h1>그런데 왜 하필 Spring boot 3.1.3인가?</h1>Swagger를 사용하기 위해 찾아보면 대다수의 글들은 이렇게 말할 것이다.gradle을 사용하고 있다면 아래 코드를 통해서 의존성 추가를 하세요!<code spellcheck="false">implementation 'io.springfox:springfox-boot-starter:3.0.0'</code> 맞는 이야기다. 맞는 이야기인데, Spring boot 3.1.3을 쓰고 있는 사람과 나에게는 맞는 이야기'였'다. 과거형이란 소리다. springfox는 Spring boot 3.xx를 지원하지 않는다. 이대로 코드를 실행시키면, 아니 실행 전에 일단 gradle부터 리로드 하는 순간 오류를 발산해준다.일단 빨간색으로 <code spellcheck="false">build failed</code>부터 시작해서 이대로 코드 실행하는 순간 아래와 같은 오류를 뱉어준다. 갑자기 <code spellcheck="false">HttpServletRequest</code>를 찾을 수 없다느니 뭐라느니...<pre spellcheck="false"><code>2024-07-08T15:50:10.045+09:00 ERROR 9440 --- [ restartedMain] o.s.boot.SpringApplication : Application run failed

java.lang.TypeNotPresentException: Type javax.servlet.http.HttpServletRequest not present
	at 

... 중략

java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:525) ~[na:na]
	at java.base/java.lang.Class.forName0(Native Method) ~[na:na]
	at java.base/java.lang.Class.forName(Class.java:467) ~[na:na]
	at java.base/sun.reflect.generics.factory.CoreReflectionFactory.makeNamedType(CoreReflectionFactory.java:114) ~[na:na]
	... 37 common frames omitted


종료 코드 0(으)로 완료된 프로세스</code></pre><h2>그럼 Spring 3.1.3은 Swagger-ui를 포기해야하는가?</h2><blockquote>하늘이 무너져도 솟아날 구멍은 있다. 이런 API 명세 날로 먹기 기능을 사람들이 포기했을 리가 없다.</blockquote>열심히 찾아본 결과, 우리는 springfox의 버림을 받은 대신, <code spellcheck="false">springdoc-openapi</code>를 사용해주면 된다는 사실을 알 수 있었다. <hr><h1>Swagger-ui 적용하기</h1><h2>환경내역</h2><blockquote>먼저 내가 사용하고 있는 환경은 다음과 같다. Java 버전 17, Spring boot 3.1.3, 개발 툴 IntelliJ, Spring Security 적용 중, gradle 기반.</blockquote><h2>의존성 추가</h2>우리가 써온 모든 것들이 그래왔듯이 의존성 추가를 해주어야 한다. 아래 코드를 <code spellcheck="false">build.gradle</code>파일의 dependencies 블록에 넣어주자. 그리고 gradle을 refresh 해주는 것을 잊지 말자.<pre spellcheck="false"><code>implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.2.0' </code></pre><h2>SwaggerConfig 파일 세팅</h2><code spellcheck="false">SwaggerConfig</code> 파일을 만들 건데, 나의 경우에는 내가 사용하고 있는 패키지의 기본 패키지에 <code spellcheck="false">config</code>폴더를 만들어서 그 안에 넣어주었다. <code spellcheck="false">SwaggerConfig.java</code>클래스 파일을 만들어주면 된다.<pre spellcheck="false"><code>package 패키지명;

import io.swagger.v3.oas.models.OpenAPI;
import io.swagger.v3.oas.models.info.Info;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class SwaggerConfig {

 @Bean
 public OpenAPI customOpenAPI() {
 return new OpenAPI()
 .info(new Info()
 .title("제목")
 .version("버전")
 .description("디스크립션 문서"));
 }
}</code></pre>위 내용을 참고하여 필요한 것이 있다면 더 추가해주면 된다. <h2>여기까지 하고서 실행했는데 안 되는데요?</h2>당신도 나와 같은 Spring Security를 사용하고 있는 모양이다. 보안상에는 좋다지만 개발하는 입장에서는 불편하기 그지없다. <s>하지만 보안이 우선인데 어쩌겠는가</s>이미 <code spellcheck="false">SecuiryConfig</code> 파일이 존재할텐데, 그 안에다가 아래와 같이 연결해서 넣어주자.<pre spellcheck="false"><code>.requestMatchers(new AntPathRequestMatcher("/swagger-ui/**")).permitAll()
.requestMatchers(new AntPathRequestMatcher("/v3/api-docs/**")).permitAll()</code></pre>어디에 넣어야 할지 감이 안 잡히는 사람들을 위해 import를 제외한 전체 내용 역시 공유하겠다.<pre spellcheck="false"><code>@Configuration
@EnableWebSecurity
public class SecurityConfig {

	@Bean
	SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
		http.
			authorizeHttpRequests(
					(authorizeHttpRequests) -&gt; authorizeHttpRequests
							.requestMatchers(new AntPathRequestMatcher("/swagger-ui/**")).permitAll()
							.requestMatchers(new AntPathRequestMatcher("/v3/api-docs/**")).permitAll()
					.requestMatchers(new AntPathRequestMatcher("/**")).permitAll())
		.headers(
				(headers) -&gt; headers
				.addHeaderWriter(new XFrameOptionsHeaderWriter(
						XFrameOptionsHeaderWriter.XFrameOptionsMode.SAMEORIGIN))).csrf(csrf -&gt; csrf.disable()
			);	
		return http.build();
	}
}</code></pre>나는 <code spellcheck="false">csrf</code> 관련 문제도 생겨서 저렇게 추가 처리 해주었다.<h2>확인하기</h2>위와 같은 단계를 거친 후에, 아래와 같이 링크에 접속해보자.<code spellcheck="false">http://localhost:8080/swagger-ui/index.html#/컨트롤러명</code> <img src="https://image.until.blog/brightdawn/article/1720428603376" alt="until-772">그럼 위와 같은 사이트에 접속할 수 있다. 아주 익숙한 사이트다.

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

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

Firebase

🍎 Mac

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<blockquote><ul class="tight" data-tight="true"><li>Spring JAVA 버전은 17이 제일 깔끔함</li><li>project Facets &gt; Java (Version 1.6) &gt; 11로 변경<ul class="tight" data-tight="true"><li>properties → java compiler에서 11로 바꾸면 됨</li></ul></li><li>스프링 두 가지 XML 파일<ol class="tight" data-tight="true"><li>전체 설정 파일</li><li>서블릿 파일 : &lt;WEB&gt; 설정</li></ol></li></ul></blockquote><h3>설치 (아래 링크 참고)</h3><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><h3>회원가입 &amp; 로그인</h3><ol class="tight" data-tight="true"><li>패키지 새로 생성 : hello2 만들기<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>Version 설정<ul class="tight" data-tight="true"><li>Package &gt; Properties<ul class="tight" data-tight="true"><li>java compiler<img src="https://image.until.blog/hyerin1225/article/1718775742761" alt="until-576"></li><li>Project Facets : Dynamic Web Module / Java 설정<img src="https://image.until.blog/hyerin1225/article/1718775756954" alt="until-577"></li></ul></li></ul></li><li>pom.xml 설정<ul class="tight" data-tight="true"><li>hello.pom을 복사해서 hello2.pom에 갖다 붙여넣기<ul class="tight" data-tight="true"><li>mybatis, lombok, jstl, springjdbc, mysql, DB tool 등</li></ul></li></ul></li></ol><ol class="tight" data-tight="true" start="4"><li>web.xml 설정<ul class="tight" data-tight="true"><li>Tomcat이 제일 먼저 읽는 파일로 한글 필터 작업 해줘야 함<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><ol class="tight" data-tight="true" start="5"><li>root-context.xml 파일에 DB 설정<ul class="tight" data-tight="true"><li>bean : spring이 new 해서 만든 것 (= class 생성)</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></li><li>폴더 생성<ul class="tight" data-tight="true"><li>views 하위에 member 폴더 생성<img src="https://image.until.blog/hyerin1225/article/1718776241747" alt="until-580"></li><li>DB에 테이블이 만들어져야 DTO가 만들 수 있음<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>DTO 생성 후 @Data 생성 (lombok)<img src="https://image.until.blog/hyerin1225/article/1718776329849" alt="until-581"></li><li>Controller에 스프링 설정<img src="https://image.until.blog/hyerin1225/article/1718776358827" alt="until-582"></li><li>파일 준비<ul class="tight" data-tight="true"><li>MemberController<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>MemberDAO<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>MemberDTO<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>MemberService<pre spellcheck="false"><code>package com.spring.hello2.service;

public interface MemberService { }</code></pre></li><li>MemberService.impl<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>=&gt; 이대로 실행하면 mapper 파일이 없어 오류가 나므로 mapper 파일 생성해줘야 함<img src="https://image.until.blog/hyerin1225/article/1718777256496" alt="until-591"></li><li>mybatis-config<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>member-mapper.xml<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></li></ul></li><li>home.jsp 경로 설정<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>

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>‘포티(Photi)’는 개발 중간에 투입되어 진행 중인 프로젝트로, Swagger를 활용해 API 명세서를 작성하여 프론트엔드 개발자와 소통하고 있습니다. 이 글에서는 기존 코드에서 발생한 Swagger 적용 문제와 그 해결 방안을 공유하려고 합니다.<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>기존 코드에서는 <code spellcheck="false">DefaultSingleResponse</code>라는 공통 클래스를 만들어 놓고, 이를 컨트롤러에서 활용하는 방법을 사용하고 있었습니다.<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>이 코드에서는 <code spellcheck="false">ResponseEntity</code>를 반환할 때 미리 정의해 둔 코드만 사용하면 되므로 구현하기 편리하다는 장점이 있었습니다.하지만,,,<ol><li>프론트엔드 개발자가 Swagger에서 응답 schema를 확인할 수 없는 문제가 있었습니다.<ul><li>프론트엔드 개발자 &gt; “data 필드 안의 객체가 어떤 이름과 어떤 데이터 타입인지 확인하고 싶은데, 직접 API 요청을 하는 방법 대신, Swagger에서 바로 확인하는 방법은 없나요?”<img src="https://image.until.blog/hodumaru/article/1727196636675.png" alt="until-1502"></li></ul></li><li>Swagger 응답 예시 문서화를 위해 코드가 너무 길어진다는 문제가 있었습니다.<ul><li>문서화를 위해 약 20줄의 코드 추가<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>우선 Swagger 공식문서를 참고하여 response의 구조를 파악하였습니다.<ol><li>operation - 해당 경로에 액세스하는데 사용하는 HTTP 메소드 정의</li><li>response - ‘상태 코드 + Response body에서 반환된 데이터’의 구조</li><li>content - ‘Media type + 응답 페이로드’ 구조</li><li>schema - 인라인으로 정의하거나, $ref로 참조 가능. Response body를 설명하는데 사용</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>구조를 확인해봤을 때, schema 부분을 수정하면 성공 응답을 커스텀 할 수 있겠다는 생각이 들었습니다.에러 응답의 경우도 똑같이 하면 될까 생각했지만, key와 일치하는 여러 value가 있을 경우 가장 최근에 저장된 value로 덮어쓰는 Map의 특징 때문에, 1개의 상태코드에 여러 개의 상태 설명을 갖고 있는 현재 구조에는 적용할 수 없다는 판단을 했습니다.<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>따라서 샘플 값을 생성하는 examples를 이용하여 에러 응답 커스텀을 해결하고자 하였습니다.<h3>2. OperationCustomizer</h3>이후 커스텀하는 방법을 공식 문서에서 찾으려고 했지만, 제가 못찾은건지 이 부분은 찾을 수 없었습니다. 😭그래서 한 <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를 커스텀 할 수 있다는 것을 알게되었습니다.<blockquote>customize : <code spellcheck="false">Operation</code>과 <code spellcheck="false">HandlerMethod</code>를 파라미터로 받아, <code spellcheck="false">Operation</code> 객체를 직접 수정하고 정의할 수 있는 메소드</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>성공 응답 커스텀<ul><li>2XX 상태코드를 갖는 response를 필터링하여 (상태코드, response)를 key, value쌍으로 저장합니다.</li><li>반복문으로 돌면서 schema를 수정합니다.</li><li>(프론트엔드 개발자와 상의한 결과 code, message, data 구조로 성공 응답을 반환하도록 하였습니다.)</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>에러 응답 커스텀<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>컨트롤러에서 코드를 간결화하기 위해 에러 코드 배열을 파라미터로 갖는 ApiErrorResponses 어노테이션을 생성하였습니다.</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>ApiErrorResponses 어노테이션을 가진 메소드만 적용됩니다.</li><li>exceptionCode의 반복문을 돌면서 상태코드와 메시지를 받아와 example에 저장하고, examples에 example을 추가합니다.</li><li>(프론트엔드 개발자와 상의한 결과 code, message 구조로 에러 응답을 반환하도록 하였습니다.)</li></ul></li><li>Configuration이 정의된 클래스에 Bean으로 등록<ul><li>스프링에서 해당 Bean 관리</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>컨트롤러 코드<ul><li>문서화를 위해 코드 약 20줄 → 코드 4줄로 감소</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>성공 응답<ul><li>프론트엔드 개발자의 요구사항 해결<img src="https://image.until.blog/hodumaru/article/1727196623508.png" alt="until-1501"></li></ul></li><li>에러 응답<ul><li>프론트엔드 개발자의 요구사항 해결<img src="https://image.until.blog/hodumaru/article/1727196464445.gif" alt="until-1499"></li></ul></li></ol><h2>마치며</h2>Swagger 구조를 분석하여 성공, 실패 응답 커스텀하고, 문서화를 진행하기 위해 길어졌던 컨트롤러 코드도 간결화 할 수 있었습니다.구현하고 보니까 코틀린 언어의 장점을 잘 사용하지 못한 코드인 것 같고,, code, message 등 하드 코딩된 부분이 많아서 나중에 시간이 된다면 수정해보면 좋을 것 같습니다.<h2>References</h2><ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://swagger.io/docs/specification/basic-structure/">https://swagger.io/docs/specification/basic-structure/</a></li><li><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></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://swagger.io/docs/specification/describing-responses/">https://swagger.io/docs/specification/describing-responses/</a></li><li><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></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://swagger.io/docs/specification/adding-examples/">https://swagger.io/docs/specification/adding-examples/</a></li></ul>

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

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

📱 Webview

<h1>Problem</h1>웹뷰를 작업하던 도중 video를 배경으로 사용하는 케이스가 존재해 구현하던 도중... mobile safari에서 poster -&gt; video로 전환되면서 아래와 같이 깜빡거리는 현상이 발생했다.<img src="https://image.until.blog/morethanmin/article/1723285031061" data-width="50%" data-align="center" alt="until-1220">관련해서 이슈를 찾아보았으나 관련된 내용이 많지 않았고, 임시 대응책을 고민해보았다.<h1>background-image 추가하기</h1>아래와 같이 video의 background-image로 poster를 추가해 임시로 대응해줄 수 있었다.<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>placeholder -&gt; video로 전환될 때의 영역을 background image가 채워줌으로서 깜빡임 현상을 임시로 해결해 줄 수 있었다.아래는 결과물이다.<img src="https://image.until.blog/morethanmin/article/1723285046176" data-width="50%" data-align="center" alt="until-1221">

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

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

🧑‍💻 Develop

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

# wireless 연결일 경우
ipconfig getifaddr en1</code></pre>매번 확인이 필요할 때마다 터미널을 들어가서 저 명령어를 치고.. 명령어를 까먹어서 다시 검색해서 찾고, 결과를 복사해서 포트를 붙이고.. 다시 복사하고를 반복했다.생각보다 내 아이피를 확인할 일이 많았고, 명령어가 길고 복잡했기에 간단한 명령어로 내 IP를 알아낸 후 바로 클립보드로 복사되게끔 만들었다.<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>위 Script 내용을 요약하면 다음과 같다.<ul><li>실행 하면 <code spellcheck="false">ipconfig getifaddr en0</code> 명령어를 이용하여 내 IP를 불러온 뒤, 바로 클립보드에 넣는다.</li><li>포트 번호를 인수로 받으면 <code spellcheck="false">&lt;IP Adress&gt;:&lt;port&gt;</code> 식으로 클립보드에 들어간다.</li></ul>작성 후 이 파일을 실행 시킬 수 있도록 권한을 줘야한다.<pre spellcheck="false"><code class="language-shell">chmod +x get_ip.sh</code></pre><h1>Alias 작성</h1>이제 작성한 스크립트를 터미널에서 간단한 명령어로 실행시킬 수 있게 alias를 작성해보자. 그러기 위해서는 <code spellcheck="false">.zshrc</code>를 편집해야 한다.<pre spellcheck="false"><code class="language-bash"> vim ~/.zshrc</code></pre>맨 마지막 줄에 다음과 같이 추가하고 <code spellcheck="false">:wq</code> 명령어를 통해 빠져나온다. alias 뒤에 들어갈 텍스트는 자유다. 나는 getip로 정했다.<pre spellcheck="false"><code class="language-bash">alias getip='get_ip.sh 파일 위치'</code></pre>아래 명령어로 변경 사항을 적용 시킨다.<pre spellcheck="false"><code class="language-bash">source ~/.zshrc</code></pre><h1>실행!</h1>이제 터미널에서 지정한 alias를 바로 쳐보자. 그럼 터미널에 내 아이피가 출력되고, 클립보드에도 바로 들어간걸 확인할 수 있다.<img src="https://image.until.blog/love/article/1723038819891" alt="until-1188">

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

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

vscode

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

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

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

스니펫 설정하는 곳 찾아가기

스니펫 생성하기

스니펫 동기화 해주기