CodingTest

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/challenges?order=recent">Programmers</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/86491">최소직사각형</a></li><li>사용언어 : C#</li><li>난이도 : 하 ~ 중</li><li>풀이시간 : 45m 48s</li><li>유형 : 문제이해, 2차원 배열</li></ul><h6>문제 설명</h6>명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니다.아래 표는 4가지 명함의 가로 길이와 세로 길이를 나타냅니다.명함 번호 가로 길이 세로 길이 1 60 50 2 30 70 3 60 30 4 80 40가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기의 지갑을 만들면 모든 명함들을 수납할 수 있습니다. 하지만 2번 명함을 가로로 눕혀 수납한다면 80(가로) x 50(세로) 크기의 지갑으로 모든 명함들을 수납할 수 있습니다. 이때의 지갑 크기는 4000(=80 x 50)입니다.모든 명함의 가로 길이와 세로 길이를 나타내는 2차원 배열 sizes가 매개변수로 주어집니다. 모든 명함을 수납할 수 있는 가장 작은 지갑을 만들 때, 지갑의 크기를 return 하도록 solution 함수를 완성해주세요.<hr><h5>제한사항</h5><ul><li>sizes의 길이는 1 이상 10,000 이하입니다.<ul><li>sizes의 원소는 [w, h] 형식입니다.</li><li>w는 명함의 가로 길이를 나타냅니다.</li><li>h는 명함의 세로 길이를 나타냅니다.</li><li>w와 h는 1 이상 1,000 이하인 자연수입니다.</li></ul></li></ul><hr><h5>입출력 예</h5>sizes result [[60, 50], [30, 70], [60, 30], [80, 40]] 4000 [[10, 7], [12, 3], [8, 15], [14, 7], [5, 15]] 120 [[14, 4], [19, 6], [6, 16], [18, 7], [7, 11]] 133<hr><h5>입출력 예 설명</h5>입출력 예 #1 문제 예시와 같습니다.입출력 예 #2 명함들을 적절히 회전시켜 겹쳤을 때, 3번째 명함(가로: 8, 세로: 15)이 다른 모든 명함보다 크기가 큽니다. 따라서 지갑의 크기는 3번째 명함의 크기와 같으며, 120(=8 x 15)을 return 합니다.입출력 예 #3 명함들을 적절히 회전시켜 겹쳤을 때, 모든 명함을 포함하는 가장 작은 지갑의 크기는 133(=19 x 7)입니다.<h3>문제 풀이 접근</h3>이 문제는, 가로x세로에서 모든 사각형을 포함하는 것 중 가장 작은 사각형을 만들면 되는 문제다. 문제에서 명함을 회전해서 포함한다. 라는 힌트를 줬기 때문에, 가로 &lt; 세로 의 케이스는 무조건 가로와 세로를 바꾸어주면 된다.문제를 잘못 읽어서 가로, 세로를 쌍으로보고 인덱스를 찾은 뒤 해당 인덱스 가로*세로 하면서 시간을 썻는데, 이 방법은 틀리다. 가로 세로는 따로 봐야한다.이 문제의 플로우는, 1. 받은 2차원 배열을 체크하여 가로 &lt; 세로의 케이스를 찾는다. 2. 그 다음 변경해서 list에 넣어준다. 3. 포함하는 것 중 가장 작은 최소 직사각형을 뽑는것이 주 목적이니, maxWidth, maxHeight 값은 Int32 표현범위중 제일 큰 값을 설정해놓는다. 4. list를 Loop 하면서 순회하는 원소 기준으로 list를 FindAll 함수를 이용해 찾는다. 이렇게 찾은 갯수가 현재 리스트 카운트와 동일하면 현재 원소는 가로 원소일땐 가로를 포함, 세로 원소일땐 세로를 포함한다. 리스트 내 고로 제일 큰 값이다. 5. 이 값 중 최소 직사각형을 뽑는 것이 목적이기 때문에 maxWidth &gt;= Width 를 비교하여 현재 저장된 원소보다 작다면 값을 넣어준다. 6. 이렇게 구해낸 maxWidth, maxHeight를 사각형의 크기를 구하는 공식에 따라 곱해서 반환한다.<h3>정답 작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;
using System.Collections.Generic;

public class Solution {
 public int solution(int[,] sizes) {
 int answer = 0;
 List&lt;Tuple&lt;int, int&gt;&gt; list = new List&lt;Tuple&lt;int, int&gt;&gt;();

 for(int i = 0; i &lt; sizes.GetLength(0); ++i)
 {
 int width = sizes[i, 0];
 int height = sizes[i, 1];

 if(width &lt; height)
 {
 int temp = height;
 height = width;
 width = temp;
 }

 list.Add(new Tuple&lt;int, int&gt;(width, height));
 }

 int maxWidth = Int32.MaxValue;
 int maxHeight = Int32.MaxValue;

 for(int i = 0; i &lt; list.Count; ++i)
 {
 var element = list[i];
 var width = element.Item1;
 var height = element.Item2;

 var countfst = list.FindAll(rhs =&gt; rhs.Item1 &lt;= width).Count;
 var countsnd = list.FindAll(rhs =&gt; rhs.Item2 &lt;= height).Count;

 if(list.Count == countfst)
 {
 if(maxWidth &gt;= width)
 maxWidth = width;
 }

 if(list.Count == countsnd)
 {
 if (maxHeight &gt;= height)
 maxHeight = height;
 }
 }

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

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

코딩테스트 준비 - 최소직사각형

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/">BOJ</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/problem/10828">10828.스택</a></li><li>사용언어 : C#</li><li>난이도 : 중하</li><li>풀이시간 : 43m </li><li>유형 : 구현, 자료구조, 스택</li></ul><h2>문제</h2>정수를 저장하는&nbsp;스택을 구현한 다음, 입력으로 주어지는 명령을 처리하는 프로그램을 작성하시오.명령은 총 다섯 가지이다.<ul><li>push X: 정수 X를 스택에 넣는 연산이다.</li><li>pop: 스택에서 가장 위에 있는&nbsp;정수를 빼고, 그 수를 출력한다. 만약 스택에 들어있는 정수가 없는 경우에는 -1을 출력한다.</li><li>size: 스택에 들어있는 정수의 개수를 출력한다.</li><li>empty: 스택이 비어있으면 1, 아니면 0을 출력한다.</li><li>top: 스택의 가장 위에 있는 정수를 출력한다.&nbsp;만약 스택에 들어있는 정수가 없는 경우에는 -1을 출력한다.</li></ul><h2>입력</h2>첫째 줄에 주어지는 명령의 수 N (1 ≤ N ≤ 10,000)이 주어진다.&nbsp;둘째 줄부터 N개의 줄에는 명령이 하나씩 주어진다. 주어지는 정수는 1보다 크거나 같고, 100,000보다 작거나 같다. 문제에 나와있지 않은 명령이 주어지는 경우는 없다.<h2>출력</h2>출력해야하는 명령이 주어질 때마다, 한 줄에 하나씩 출력한다.<h2>예제 입력 1 복사</h2><pre spellcheck="false"><code>14
push 1
push 2
top
size
empty
pop
pop
pop
size
empty
pop
push 3
empty
top
</code></pre><h2>예제 출력 1 복사</h2><pre spellcheck="false"><code>2
2
0
2
1
-1
0
1
-1
0
3
</code></pre><h2>예제 입력 2 복사</h2><pre spellcheck="false"><code>7
pop
top
push 123
top
pop
top
pop
</code></pre><h2>예제 출력 2 복사</h2><pre spellcheck="false"><code>-1
-1
123
123
-1
-1
</code></pre><h3>문제 풀이 접근</h3>문제의 요구사항은 많아보이지만, 스택에 있는 5개의 함수를 만들어서 확인해야하니, 요구사항에 맞춰서 출력해봐라. 라는 문제다. 크게 어려운 것은 없고, 까다로운 부분은 Push, Pop을 할때 밀어주고 당겨주는 부분이 조금은 까다로울 수 있지만 몇번 디버깅하면 해결할 수 있다. 문제의 플로우는 딱히 없다. 스택을 구현하는 문제니까, 개인적으로 제한사항을 두자면 스택 자료구조는 사용하지 말자.<h3>정답 작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.Design;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices;
using System.Security.AccessControl;
using System.Security.Authentication;
using System.Security.Cryptography.X509Certificates;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Web;
using System.Xml.Linq;
using static CodingTestProj.Program;

/*
 * URL : https://www.acmicpc.net/submit/10828
 */

namespace CodingTestProj
{
 internal class Program
 {
 static void Main(string[] args)
 {
 int loop = Int32.Parse(Console.ReadLine());
 var solutions = new Solution();
 solutions.Prog(loop);

 print.printRet();
 }
 }

 public static class print
 {
 public static List&lt;int&gt; _list = new List&lt;int&gt;();

 public static void printRet()
 {
 for (int i = 0; i &lt; _list.Count; ++i)
 Console.Write(_list[i] + $"\n");
 }
 }

 public class Solution
 {
 const int _arrCount = 10000;
 public int[] _arr = new int[_arrCount];
 public int _count = 0;

 public void Prog(int loop)
 {
 for(int i = 0; i &lt; loop; ++i)
 {
 string[] commandArr = Console.ReadLine().Split(' ');
 string command = commandArr[0];
 

 if (command.Equals("push"))
 {
 int IntValue = Int32.Parse(commandArr[1]);
 push(IntValue);
 }
 else if (command.Equals("top"))
 {
 top();
 }
 else if (command.Equals("size"))
 {
 size();
 }
 else if (command.Equals("empty"))
 {
 empty();
 }
 else if (command.Equals("pop"))
 {
 pop();
 }
 else { }
 }
 }

 private void push(int x)
 {
 for(int i = 1; i &lt;= _count; ++i)
 {
 _arr[i] = _arr[i - 1];
 }// 밀기

 _arr[0] = x;
 _count++;
 }

 public void top()
 {
 if (_count == 0)
 {
 //print._list.Add(-1);
 Console.Write(-1 + $"\n");
 }
 else
 {
 //print._list.Add(_arr[0]);
 Console.Write(_arr[0] + $"\n");
 }
 }

 public void size()
 {
 //print._list.Add(_count);
 Console.Write(_count + $"\n");
 }

 public void empty()
 {
 if(_count == 0)
 {
 //print._list.Add(1);
 Console.Write(1 + $"\n");
 }
 else
 {
 //print._list.Add(0);
 Console.Write(0 + $"\n");
 }
 }

 public void pop()
 {
 if(_count == 0)
 {
 //print._list.Add(-1);
 Console.Write(-1 + $"\n");
 }
 else
 {
 var _popValue = _arr[0];
 _arr[0] = 0;

 for(int i = _count -1; i &gt; 0; --i)
 {
 _arr[i - 1] = _arr[i];
 _arr[i] = 0;
 }// 당기기

 _count--;
 //print._list.Add(_popValue);
 Console.Write(_popValue + $"\n");
 }
 }
 }
}
</code></pre><h3>코드 결과 - 아직 풀지 못함.</h3>** 이 문제도 아직 풀이를 하여 결과를 보진 못했다. BOJ 사이트에 내가 뭔가 놓치고 있는 부분이 있는것 같다. 푼 문제마다 1%에서 실패는 문제가 있다는 것 아닐까..

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

코딩테스트 준비 - 스택 _ Solve X

🖥 백엔드

스프링을 싫어하는 사람들이 많이 하는 말이 있다. 스프링은 어노테이션이 덕지덕지 붙어서 극혐이라고..하지만 어노테이션도 잘 쓰면 로직을 간단히 추상화해줄 수 있어서 좋은 점이 많다.어노테이션을 이용해서 로그인한 유저만 api를 호출할 수 있도록 하고, 미로그인 유저는 400 에러를 발생하도록 필터링하는 기능을 구현해보려고 한다.<pre spellcheck="false"><code>@NeedLogin
@Operation(summary = "아티클 작성하기")
@PostMapping("/{username}/articles")
fun writeArticle(
 @PathVariable("username") username: String,
 @RequestBody request: BlogArticleWriteRequestDTO,
) {
 TODO("로직은 알아서 잘 딱 깔끔하게")
}</code></pre>설명하기 앞서, 원하는 결과물은 이렇다.api의 위에 <code spellcheck="false">@NeedLogin</code> 어노테이션을 붙이는 것 만으로 API가 로그인을 필요로 한다는 것을 명시적으로 나타내줄 수 있다.언어는 코틀린으로 짜여있지만, Java로도 코드가 크게 다르진 않을 것이니 따라가봅시다레츠고~<hr><pre spellcheck="false"><code class="language-kotlin">@Retention(AnnotationRetention.RUNTIME)
@Target(AnnotationTarget.FUNCTION)
annotation class NeedLogin</code></pre>간단하게 어노테이션을 만들어주자. API가 실행될 때 로그인 상태를 검증하는 것이니 RUNTIME이고, 함수에 붙여줄 생각이니 타겟은 FUNCTION으로 한다.<pre spellcheck="false"><code class="language-kotlin">@Component
class NeedLoginInterceptor(
 private val tokenProvider: TokenProvider,
) : HandlerInterceptor {
 override fun preHandle(
 request: HttpServletRequest,
 response: HttpServletResponse,
 handler: Any,
 ): Boolean {
 // NeedLogin 어노테이션이 붙어있지 않은 함수면 패스
 if (!hasNeedLoginAnnotation(handler)) {
 return true
 }

 // 로그인된 상태인지 체크
 if (!hasValidAccessToken(request)) {
 throw UserNotAuthorizedException()
 }

 return true
 }

 private fun hasValidAccessToken(request: HttpServletRequest): Boolean {
 return getAccessCookie(request)
 ?.let { tokenProvider.validateToken(it) }
 ?: false
 }

 private fun hasNeedLoginAnnotation(handler: Any): Boolean {
 return handler is HandlerMethod &amp;&amp;
 handler.method.isAnnotationPresent(NeedLogin::class.java)
 }
}</code></pre>api가 호출될 때 마다 검증해야 하기 때문에 Interceptor를 사용해준다. <code spellcheck="false">HandlerInterceptor</code>를 상속받아서 <code spellcheck="false">NeedLoginInterceptor</code>라는 클래스를 만들었다.'api가 실행되기 전에' 로그인 상태를 검증해야 하므로 <code spellcheck="false">preHandle</code>에 로직을 적어넣었다.NeedLogin 어노테이션이 붙어있는지 체크해서 없을 경우 패스하기 위해 리턴 시켜준다.그 후 각자의 방법으로 로그인 여부를 체크해준 후 미로그인 상태일 경우 Exception을 터트려주면 된다. 나는 AccessToken을 이용하는 방법을 사용했기 때문에 해당 방법으로 구현해주었다.<pre spellcheck="false"><code class="language-kotlin">@Configuration
class WebConfig(
 private val needLoginInterceptor: NeedLoginInterceptor
) : WebMvcConfigurer {
 override fun addInterceptors(registry: InterceptorRegistry) {
 registry.addInterceptor(needLoginInterceptor)
 .addPathPatterns("/**")
 }
}</code></pre>마지막으로는 인터셉터를 적용해주기 위해 WebMvcConfigurer에다가 내가 만든 인터셉터를 적용해주었다.그러면 끝!<pre spellcheck="false"><code class="language-kotlin">@NeedLogin
@Operation(summary = "아티클 작성하기")
@PostMapping("/{username}/articles")
fun writeArticle(
 @PathVariable("username") username: String,
 @RequestBody request: BlogArticleWriteRequestDTO,
) {
 TODO("로직은 알아서 잘 딱 깔끔하게")
}</code></pre>나머지는 이렇게 api 위에다가 NeedLogin 어노테이션만 붙여주면 된다.<pre spellcheck="false"><code class="language-kotlin">@RestControllerAdvice
class GlobalExceptionHandler {
 @ExceptionHandler(UserNotAuthorizedException::class)
 fun handleUserNotAuthorizedException(exception: UserNotAuthorizedException): ResponseEntity&lt;ErrorResponse&gt; {
 return ResponseEntity.status(HttpStatus.UNAUTHORIZED)
 .body(ErrorResponse(exception.message))
 }
}</code></pre>마지막으로 예외가 발생했을 때 400 에러와 exception 메시지를 출력해주기 위해 ExceptionHandler로 받아다가 원하는 에러 코드와 메시지를 전달해주면 된다.<pre spellcheck="false"><code>{
 "error": "로그인이 필요합니다."
}</code></pre>그러면 이렇게 API를 실행했을 때 401 에러와 함께 메시지가 떨어져나오는 모습을 볼 수 있다~앞으로도 인터셉터와 어노테이션 기능을 잘 활용하여 로직을 잘 추상화하고 반복을 제거해보자

어노테이션으로 로그인 체크 쉽게 하기!

어노테이션으로 로그인한 유저만 api를 호출할 수 있도록 간단히 필터링하기

Next.js에 mixpanel을 적용하기 위해 사용한 방법들을 소개하고자 한다.<h3>SDK 설치</h3>우선 mixpanel 공식에서 제공해주는 브라우저용 SDK를 설치하자.<pre spellcheck="false"><code class="language-shell">yarn add mixpanel-browser
# or
npm install --save mixpanel-browser</code></pre><h3>하고자 하는 목표</h3>Docs에서 제공하는 아래와 같은 코드로 초기화를 진행하면 별다른 설정 없이 페이지 단위로 Tracking이 진행된다.<pre spellcheck="false"><code class="language-javascript">mixpanel.init('YOUR_TOKEN', {debug: true, track_pageview: true, persistence: 'localStorage'});</code></pre>그러나 나는 로그인한 유저에 대해 정보를 부여하고, 그에 따른 데이터를 더 보고 싶었다. 따라서 <code spellcheck="false">mixpanel.identify</code> 메서드와 <code spellcheck="false">mixpanel.people.set</code> 메서드가 필요했다.또한 나중에라도 언제 어느 곳에서 다른 액션에 대한 추가 정보를 tracking 해야 할 것 같아서 액션들을 묶는 클래스로 만들어 재사용이 용이하게 하고 싶었다.<h3>이를 위한 코드</h3><pre spellcheck="false"><code class="language-typescript">import mixpanel from "mixpanel-browser";

class MixpanelService {
 private static instance: MixpanelService;
 private isProduction = process.env.NODE_ENV === "production";

 constructor() {
 if (this.isProduction) {
 mixpanel.init(`${process.env.NEXT_PUBLIC_MIXPANEL_TOKEN}`, {
 debug: true,
 track_pageview: true,
 persistence: "localStorage",
 });
 }
 }

 // 생략 ....
 public setIdentity(id: string) {
 if (this.isProduction) mixpanel.identify(id);
 }

 public setUser(userInfo: UserInfo) {
 if (this.isProduction) {
 mixpanel.people.set({
 $name: userInfo.name,
 });
 }
 }

 public reset() {
 if (this.isProduction) {
 mixpanel.reset();
 }
 }
}</code></pre>Class로 만들 경우 문제점이 어디선가는 <code spellcheck="false">mixpanel.init</code>를 호출해야 하는데, Class내의 메서드들을 따로 호출하지 않는다면 초기화가 되지 않는다. 따라서 지금과 같은 경우에는 로그인을 하지 않으면 추적 코드가 심어지지 않는다.따라서 단순히 <code spellcheck="false">mixpanel.init</code>을 호출하기 만을 위한 메서드를 추가 작성하여야 한다.<pre spellcheck="false"><code class="language-typescript">class MixpanelService {
 // ...
 public static getInstance(): MixpanelService {
 if (!MixpanelService.instance) {
 MixpanelService.instance = new MixpanelService();
 }
 return MixpanelService.instance;
 }
}</code></pre>나의 경우에는 우선 로그인 하는 쪽에만 코드를 심어주면 되었다.<pre spellcheck="false"><code class="language-typescript">if (loginUser) {
 MixpanelService.setIdentity(loginUser.id);
 MixpanelService.setUser(loginUser);
} else {
 MixpanelService.getInstance();
}</code></pre>혹시 더 나은 방법이 있다면 알려주세요!!

Next.js에 mixpanel을 적용하기 위해 사용한 방법들을 소개하고자 한다.

Next.js에 mixpanel 연동하기

<h1>들어가며</h1>JDK와 서버리스는 궁합이 좋지 못하다고들 한다.서버리스는 해당 서버를 쓰지 않을 때에는 종료된다는 특성을 생각해본다면, 유독 시작 시간이 긴 Spring은 이런 서버리스와 궁합이 맞지 않는 것이 당연하다고 생각이 든다.실제로 내가 Render의 서버리스를 이용해서 Docker로 만 Spring Boot 서버를 배포했을 때에는 콜드 스타트 시간이 2분 가까이 걸리기도 했다. 물론 Render 프리티어의 저열한 컴퓨팅 성능과 Spring의 어마무시한 시작 시간이 합쳐진 탓이었겠지만..하지만 순수 Java 애플리케이션은 Spring과 같이 시작 시간이 크게 존재하지는 않는 것으로 보이는데, Java 개발자들은 서버리스 함수를 개발할 때 주력 언어를 버리고 어쩔 수 없이 Node.js나 Pytyhon을 사용해야 하는 것일까?<h1>Java가 왜 느릴까?</h1>Java가 왜 서버리스에서 성능이 좋지 않은지에 대해 먼저 알아보면 좋을 것 같다.<h2>Cold Start 문제</h2><ul><li>JVM 초기화 시간: Java는 JVM (Java Virtual Machine)을 사용하여 실행되기 때문에, 첫 실행 시 JVM을 초기화하는 데 시간이 걸리게 된다.</li><li>Class Loading: Java에서 사용하는 여러 클래스와 라이브러리를 로드해야 하므로 (Warm up), Cold Start 시 이 과정도 시간이 소요된다.</li></ul><h2>언어 특성</h2>Java는 소스 코드를 바이트코드로 컴파일한 후 JVM에서 실행되기 때문에, Python와 Javascript와 같은 인터프리터 언어에 비해 초기 실행이 느릴 수 밖에 없다.<h2>환경 설정</h2>서버리스 환경에 맞게 JVM을 최적화하지 않은 경우에도 성능이 저하될 수 있다.AWS Lambda에서는 메모리 설정에 따라 CPU 성능이 달라지는데, 128MB에서 256MB로 메모리를 늘리는 것만으로도 속도가 확실히 향상되는 것을 볼 수 있다.<h1>속도 비교해보기</h1>물론 가장 확실한 방법은 직접 속도를 체크해보는 것이지만, 다른 멋진 분들이 이미 측정해주신 좋은 자료가 있다.다음은 AWS Lambda에서 언어 별로 콜드 스타트 시간을 정리해놓은 글이다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://mikhail.io/serverless/coldstarts/aws/languages/">https://mikhail.io/serverless/coldstarts/aws/languages/</a><img src="https://image.until.blog/octoping/article/1720963479562" alt="until-838">확실히 Java도 그리 느리지는 않은 속도를 보여주는 것 같다.하지만 Python의 최소 시간은 0.14초인데 Java의 최소 시간은 0.28초인걸 보면, 절대적 시간 차이는 미미하지만 상대적 시간 차이는 2배 가까이 나는 것을 볼 수 있다. 역시 파이썬인가..!<h1>마무리하며</h1>JVM은 Warm Up이라는 개념이 존재하는 특이한 런타임인만큼, 매번 껐다 켜지는 서버리스 환경과 자바는 역시 쉽게 녹아들 수 없는 언어인가보다.하지만 서버리스를 통해 실행하는 로직이 콜드 스타트 시간이 마치 0으로 느껴질 만큼 큰 시간이 걸리는 경우 (ex. AWS Lambda로 유튜브 영상 다운 받기) 굳이 언어에 제약을 둘 필요는 없을 것으로 보인다.

서버리스와 Java는 공존할 수 없는 운명인걸까?

Spring 없는 Java조차 서버리스에서 못 써먹는걸까?

백엔드와 관련된 자료들을 올립니다.

오.. SpEL에 대해서 알고는 있었지만 잘 몰라서 활용을 잘 못했었거든요 ㅠ 디폴트 값도 조금 야매로 처리를 했었는데 SpEL이 생각보다 좋은 녀석이었군요.. 바로 활용해봐야겠네요!! 잘 읽었습니다 :)

자바에서도 실행 시간 개선을 위해 CRaC(Coordinated Restore at Checkpoint) 또는 CDS(Class Data Sharing)  GraalVm Native Image 등 다양한 기술들이 나오고 있습니다 . 서버리스 시대에 맞는 옷을 갈아 입어야 하니. 

Spring Security를 이용해서 `@PreAuthorize`를 사용해도 되겠지만, 요건 스프링 시큐리티를 사용하지 않을 경우에 사용해봄직한 방법입니다!

백준

Spring Batch

Java 기술면접

Docker

🎨 프론트엔드

<blockquote>클래스 컴포넌트에 대한 글이 아님을 먼저 남깁니다</blockquote>자바스크립트는 ES6 환경에서 클래스 문법을 지원하기 시작했다. 물론 그 전에도 클래스처럼 객체를 사용하는 것이 가능했지만..아무튼 그럼에도 NestJS 같은 백엔드 환경에선 클래스를 적극적으로 쓰는 것과 별개로, 프론트 환경에서는 클래스를 딱히 쓰지 않고 있는 것 같다.왜일까? React에서는 불변성을 중요하게 생각하고 있고, 그렇기 때문에 <code spellcheck="false">useState</code> 같은 상태값에 클래스를 이용하기 어려운 실정이다.<h1>useState에 클래스 객체?</h1><pre spellcheck="false"><code class="language-javascript">function Component() {
 const [cart, setCart] = useState(new ShoppingCart())

 const onClick = (e) =&gt; {
 cart.addItem(e.target.name)
 }

 return (
 &lt;button onClick={onClick}&gt;
 카트에 담기
 &lt;/button&gt;
 )
}

class ShoppingCart {
 constructor(items) {
 this.items = items
 }

 addItem(item) {
 this.items.push(item)
 }
}</code></pre>리액트 사용자라면 이 코드가 제대로 동작하지 않을 것임을 알 것이다. <code spellcheck="false">useState</code>로 선언한 상태값은 반드시 <code spellcheck="false">setState</code>로 상태값을 바꿔야하니까.<pre spellcheck="false"><code class="language-javascript">function Component() {
 const [cart, setCart] = useState(new ShoppingCart())

 const onClick = (e) =&gt; {
 cart.addItem(e.target.name)
 setCart(cart)
 }

 return (
 &lt;button onClick={onClick}&gt;
 카트에 담기
 &lt;/button&gt;
 )
}

class ShoppingCart {
 constructor(items) {
 this.items = items
 }

 addItem(item) {
 this.items.push(item)
 }
}</code></pre>이러면 어떨까? 물론 제대로 작동하지 않을 것이다. cart의 <code spellcheck="false">addItem</code> 메소드로 cart의 값을 바꿨지만, 이전의 cart와 동등한 값 ( <code spellcheck="false">Object.is</code> 로 비교했을 때)이기 때문이다.따라서 정말 이렇게 써먹고 싶다면 <code spellcheck="false">ShoppingCart</code> 클래스는 새로운 객체를 반환하도록 변경되어야 할 것이다.<pre spellcheck="false"><code class="language-javascript">class ShoppingCart {
 items
 
 constructor(items) {
 this.items = items
 }

 addItem(item) {
 return new ShoppingCart([...this.items, item])
 }
}</code></pre>하지만 매번 코드를 이렇게 쓰는건 좀 어렵다.<h2>반려생활에서는...</h2>반려생활에서는 이런 문제를 해결하기 위해 <code spellcheck="false">valtio</code>라는 라이브러리를 사용한다고 한다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/pmndrs/valtio">https://github.com/pmndrs/valtio</a>프록시를 이용해서 객체에 값이 바뀔 때에 setState로 전파를 해주는 기능으로 보이는데.역시나 외부 라이브러리를 사용하는 방법인지라 접근성이 그렇게 좋지는 않고, 원래 쓰던 방식이 있는데 클래스를 사용하기 위해 굳이 이렇게까지 해야할까 라는 생각이 들기도 한다.그렇다면 클래스는 리액트에서 쓸 일이 없는 도구인걸까?<h1>문제 제기</h1>예시를 위해 언틸의 프론트엔드 코드를 조금 가져와보자.다음은 언틸의 댓글을 쓸 때 내용을 적는 input form 컴포넌트의 코드다.<pre spellcheck="false"><code class="language-typescript">type Props = {
 commentId?: number;
 replyToCommentId?: number;
 initialContent: string;
 onCancel?: () =&gt; void;
}

const WriteForm = ({
 commentId,
 replyToCommentId,
 initialContent = "",
 onCancel = () =&gt; {},
}: Props) =&gt; {
 const { isLoggedIn } = useAuthInfo()
 const [content, setContent] = useState(initialContent)

 const handleSubmit: FormEventHandler = async (e) =&gt; {
 e.preventDefault()

 if (!isLoggedIn || !content) return

 if (!commentId) {
 await postComment({ content, replyToCommentId })
 setContent("")
 }

 if (commentId) {
 await putComment({ content })
 }

 onCancel()
 }

 const submitBtnText = (() =&gt; {
 if (commentId) {
 return "수정하기"
 }

 if (replyToCommentId) {
 return "답글 등록"
 }

 return "댓글 등록"
 })()

 return (
 &lt;form onSubmit={handleSubmit}&gt;
 &lt;textarea
 autoFocus={!!(commentId || replyToCommentId)}
 disabled={!isLoggedIn}
 value={content}
 onChange={(e) =&gt; setContent(e.target.value)}
 /&gt;
 &lt;div&gt;
 {(commentId || replyToCommentId) &amp;&amp; (
 &lt;button onClick={onCancel}&gt;취소&lt;/button&gt;
 )}
 &lt;button type="submit"&gt;{submitBtnText}&lt;/button&gt;
 &lt;/div&gt;
 &lt;/form&gt;
 )
}
</code></pre>이 컴포넌트에서는 다양한 데이터들이 사용되고 있고, 이것들을 이용해서 컴포넌트의 다양한 행동들과 속성을 정의하고 있다. <code spellcheck="false">isLoggedIn</code>과 <code spellcheck="false">content</code>가 비어있다면 댓글을 작성할 수 없고, <code spellcheck="false">commentId</code>가 있다면 버튼의 텍스트는 '수정하기'이고..그런데, 왜 <code spellcheck="false">isLoggedIn</code>과 <code spellcheck="false">content</code>가 비어있다면 댓글을 작성할 수 없는걸까? 왜 <code spellcheck="false">commentId</code>가 있다면 버튼의 텍스트는 '수정하기'일까?코드를 읽다보면 동작 방식은 알 수 있어도 자세한 이유와 의미를 생각해보는 데에는 시간이 좀 들게 된다. 결국 이런 코드들이 많아질 수록 코드는 점점 읽기 힘들어지고 의미를 이해하기 힘들어진다.<h2>메소드 분리?</h2>클린코드에서는 어떤 함수가 한 가지 일만 하는 것이 아니게 되었다면 함수를 분리해보라고 권장한다.하지만 리액트의 컴포넌트에서는 자바의 클래스와 다르게, private 메소드 같은 것이 없다.<code spellcheck="false">WriteForm</code> 컴포넌트의 <code spellcheck="false">handleSubmit</code>의 로직이 복잡하다고 해서 함수를 분리해봐야 결국 그 함수도 <code spellcheck="false">WriteForm</code>에 생겨날 뿐이다. 결국 컴포넌트만 뚱뚱해지는 셈이다.<h1>클래스는 상태와, 상태와 연관된 동작을 정의한다</h1><blockquote><code spellcheck="false">commentId</code>, <code spellcheck="false">replyToCommentId</code>, <code spellcheck="false">isLoggedIn</code> 등등.. 이것들을 이용해서 컴포넌트의 다양한 행동들과 속성을 정의하고 있다.<code spellcheck="false">isLoggedIn</code>과 <code spellcheck="false">content</code>가 비어있다면 댓글을 작성할 수 없고, <code spellcheck="false">commentId</code>가 있다면 버튼의 텍스트는 '수정하기'이고..</blockquote>우리는 이럴 때에 클래스를 사용해볼 수 있다. 클래스는 상태들과, 그 상태들과 연관된 동작을 정의할 때 쓰는 틀이다.위에 적은 내용을 클래스를 이용해서 맥락이 드러나도록 코드를 만들어볼 수 있지 않을까?<pre spellcheck="false"><code class="language-typescript">class CommentWriteStatus {
 constructor(
 private readonly isLoggedIn: boolean,
 private readonly commentId: number | undefined,
 private readonly replyToCommentId: number | undefined,
 private readonly content: string
 ) {}

 isNewComment() {
 return !this.commentId
 }

 isReply() {
 return this.replyToCommentId !== undefined
 }

 canPublish() {
 return this.isLoggedIn &amp;&amp; this.content
 }

 getSubmitBtnText() {
 if (!this.isNewComment()) {
 return "수정하기"
 }

 if (this.isReply()) {
 return "답글 등록"
 }

 return "댓글 등록"
 }
}</code></pre>각 상태값들을 받아서, 댓글 입력창에서 취할 수 있는 행동들을 정의했다.<h2>리액트에 클래스 적용하기</h2><pre spellcheck="false"><code class="language-typescript">const WriteForm = ({
 commentId,
 replyToCommentId,
 initialContent = "",
 onCancel = () =&gt; {},
}: Props) =&gt; {
 const { isLoggedIn } = useAuthInfo()
 const [content, setContent] = useState(initialContent)

 const status = new CommentWriteStatus(
 isLoggedIn,
 commentId,
 replyToCommentId,
 content
 )

 // ...
}</code></pre>아까 언급한 대로, state에 클래스를 쓰거나 하는 용도는 어렵다. 하지만 state는 원래의 방식대로 <code spellcheck="false">useState</code>를 이용해서 정의하고, 비즈니스 로직을 위한 함수 발사대의 용도로 불변 클래스를 활용해주자.원래도 객체지향에서 중요한 것은 변수값이 아닌, 메소드들이었으니까.<pre spellcheck="false"><code class="language-typescript">const handleSubmit: FormEventHandler = async (e) =&gt; {
 e.preventDefault()

 if (!status.canPublish()) return

 if (status.isNewComment()) {
 await postComment({ content, replyToCommentId })
 setContent("")
 }

 if (!status.isNewComment()) {
 await putComment({ content })
 }

 onCancel()
};</code></pre>클래스의 메소드를 이용해서 코드를 교체해줬다.우리는 어떤 변수가 true고, 어떤 변수가 빈 문자열이 아닐 때 return을 한다~ 따위의 것이 궁금했던게 아니다. 그 대신에 비즈니스의 의미가 잘 드러날 수 있도록 코드를 변경해주니 누구라도 이해할 수 있게 되었다.<pre spellcheck="false"><code class="language-typescript"> return (
 &lt;form onSubmit={handleSubmit}&gt;
 &lt;textarea
 autoFocus={!status.isNewComment() || status.isReply()}
 disabled={!isLoggedIn}
 value={content}
 onChange={(e) =&gt; setContent(e.target.value)}
 /&gt;
 &lt;div&gt;
 {(!status.isNewComment() || status.isReply()) &amp;&amp; (
 &lt;button onClick={onCancel}&gt;취소&lt;/button&gt;
 )}
 &lt;button type="submit"&gt;{status.getSubmitBtnText()}&lt;/button&gt;
 &lt;/div&gt;
 &lt;/form&gt;
);</code></pre>return 문 쪽도 더 의미가 잘 드러나게 변경된 것 같다.<h2>예시 2</h2>언틸에서는 블로그에 유저 블로그와 그룹 블로그라는 두 가지 종류가 있다. 그와 함께 방문하는 유저도 타입이 여러 개 존재하게 되는데.<pre spellcheck="false"><code class="language-typescript"> userType:
 | 'guest' // 비로그인
 | 'owner' // 본인
 | 'user' // 다른 유저
 | 'member' // 그룹 멤버
 | 'admin' // 그룹 관리자</code></pre>이렇게 blogType과 userType이 여러 개 존재함에 따라 각 타입 별로 권한도 다양하게 존재한다.<pre spellcheck="false"><code class="language-typescript">const FollowButton = () =&gt; {
 const { username, isFollowing, blogType, userType } = useBlogQuery()

 if (blogType === "user" &amp;&amp; userType === "owner") {
 return (
 &lt;Link href={`/@${username}/setting`}&gt;
 &lt;button&gt;프로필 수정&lt;/button&gt;
 &lt;/Link&gt;
 )
 }

 return (
 &lt;LoginDialogWrapper
 onClick={() =&gt; {
 isFollowing ? postUnfollow() : postFollow()
 }}
 &gt;
 &lt;button&gt;{isFollowing ? "팔로잉" : "팔로우"}&lt;/button&gt;
 &lt;/LoginDialogWrapper&gt;
 )
}</code></pre>유저 블로그면서 자신이 그 블로그의 주인일 경우, 팔로우를 할 이유가 없기 때문에 팔로우 버튼 대신에 '프로필 수정' 버튼을 보여주게 된다.애플리케이션 전체에서 이와 비슷하게 유저/블로그 타입을 통한 로직이 많은데, 이 경우 권한에 대한 내용이 한 곳에 뭉쳐있지 않고 이곳 저곳에 혼재되어 있게 된다.따라서 실수로 변경 누락을 하거나 잘못 설정하는 일이 발생할 수도 있다.<pre spellcheck="false"><code class="language-typescript">class BlogUserType {
 constructor(
 private readonly userType:
 | "guest" // 비로그인
 | "owner" // 본인
 | "user" // 다른 유저
 | "member" // 그룹 멤버
 | "admin", // 그룹 관리자
 private readonly blogType: "user" | "group"
 ) {}

 canFollow() {
 return !this.isMyUserBlog()
 }

 canEditAbout() {
 return this.isMyUserBlog() || this.isAdmin()
 }

 private isMyUserBlog() {
 return this.isUserBlog() &amp;&amp; this.userType === "owner"
 }

 private isUserBlog() {
 return this.blogType === "user"
 }

 private isAdmin() {
 return this.userType === "admin" || this.userType === "owner"
 }
}</code></pre>이런 느낌으로 권한을 좀 정리해볼 수 있지 않을까.<h1>커스텀 훅</h1>물론 예제로 들었던 이것들, 커스텀 훅으로 만들 수 있다. 상태값을 받아서 함수 or 값을 뱉는 것이라면 클래스나 훅이나 똑같다.<pre spellcheck="false"><code class="language-typescript">function useCommentWriteStatus(
 isLoggedIn: boolean,
 commentId: number | undefined,
 replyToCommentId: number | undefined,
 content: string
) {
 const isNewComment = !commentId
 const isReply = replyToCommentId !== undefined
 const canPublish = isLoggedIn &amp;&amp; content

 function getSubmitBtnText() {
 if (!isNewComment) {
 return "수정하기"
 }

 if (isReply) {
 return "답글 등록"
 }

 return "댓글 등록"
 }

 return {
 isNewComment,
 isReply,
 canPublish,
 getSubmitBtnText,
 }
}

// 사용 예시
const { canPublish } = useCommentWriteStatus(true, 1, 2, "content")</code></pre>사실 리액트를 처음 공부하면서 훅에 대해서 배울 때, "아, 이게 리액트에서 제공하는 클래스구나"라는 생각이 들었다.변수값들을 생성자처럼 받아서 훅 내부에서 함수들을 생성한 후 public으로 공개하고 싶은 녀석들만 return하면 그게 클래스지.하... 하지만 클래스 쓰는게 멋있잖아?? 리액트에서 클래스 쓰는 힙한 사람처럼 보일 수 있다는 점에서 장점이 있는 것 같다.농담이고, 이런 커스텀 훅을 만들어서 비즈니스 로직을 묶는 것도 좋은 방법이지만 클래스 쪽이 private 메소드 등을 이용해서 좀 더 가독성 있는 코드를 쓸 수 있는 것 같다는 개인적인 생각이 들어서 적절한 때에 잘 이용하고 있다. 살짝 테스트하기도 더 쉬운 것 같기도 하고..

클래스로 뚱뚱한 컴포넌트를 정리해보기

React에서 Class 사용해보기

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1726239900445.gif" alt="until-1342">언틸의 피드에서는 유저들이 작성한 아티클을 모달의 형태로 볼 수 있는데요.이런 모달 형태는 유저들의 글을 빠르게 전환하며 볼 수 있다는 장점을 가지고 있어요.하지만 React State로 관리되기 때문에 몇가지 단점이 존재했어요. 예를 들어 새로고침시에 보고 있던 게시글이 사라지거나, 브라우저의 history stack을 쌓지 않기 때문에 뒤로가기(history.back)로 닫을 수 없었어요.이런 경험은 데스크탑에서는 그렇다 쳐도 모달이 풀페이지로 나타나는 모바일에서는 뒤로가기를 했을 때 아예 페이지가 닫혀버리는 등 유저 경험이 좋지 않았어요.때문에 Route로 동작하는 Modal로 변경하기로 했어요. 어떤 방식으로 구현했는지 간단하게 공유해볼게요.<h1>ArticleCard</h1>우선 ArticleCard는 기존에는 onClick handler를 통해 isOpen state를 변경해주고 있었는데요. 이것을 next/Link 컴포넌트로 변경해주었어요.<pre spellcheck="false"><code class="language-typescript">import { LinkProps } from 'next/link'
import { useRouter } from 'next/router'
import * as _ArticleCard from 'src/components/ArticleCard'
import { ArticleItem } from 'src/types/article'

type Props = {
 data: ArticleItem
}

export const ArticleCard = ({ data }: Props) =&gt; {
 const router = useRouter()

 const href: LinkProps['href'] = {
 query: {
 ...router.query,
 'article-id': data.articleId,
 },
 }

 const as = `@${data.blog.username}/${data.urlSlug}`

 return (
 &lt;_ArticleCard.Root data={data}&gt;
 &lt;_ArticleCard.Thumbnail shallow href={href} as={as} /&gt;
 &lt;_ArticleCard.AuthorInfo showGroup /&gt;
 &lt;_ArticleCard.ArticleInfo shallow href={href} as={as} /&gt;
 &lt;/_ArticleCard.Root&gt;
 )
}</code></pre><code spellcheck="false">Article.Thumbnail</code> 과 <code spellcheck="false">Article.ArticleInfo</code>가 Link의 props을 대신 받아오고 있습니다.이제 아티클 카드를 클릭하면 next/router는 href에 의해서 <code spellcheck="false">until.blog?article-id=219</code> 로 이동하게 되요.또한 as prop을 통해 article-hash-id를 브라우저 검색창에 노출하지 않고 실제 게시글 상세 route인 것처럼 변경해주었어요.<h1>ArticleDetailDialog</h1>이제 서치파라미터에 등록된 article-id를 읽어와서 모달을 띄워주면 돼요.<pre spellcheck="false"><code class="language-typescript">import { useRouter } from 'next/router'
import { Dialog, useCurrentSize } from 'ui'
import Content from './Content'
import { boxStyle } from './styles'

const ArticleDetailDialog = () =&gt; {
 const router = useRouter()
 const currentSize = useCurrentSize()

 const articleId =
 typeof router.query['article-id'] === 'string' &amp;&amp;
 router.query['article-id'] !== ''
 ? Number(router.query['article-id'])
 : null

 const handleClose = () =&gt; {
 const query = { ...router.query }
 delete query['article-id']

 router.push(
 {
 query,
 },
 undefined,
 { shallow: true, scroll: false },
 )
 }

 return (
 &lt;Dialog
 open={!!articleId}
 onClose={handleClose}
 align="top"
 alignOffset={currentSize === 'desktop' ? 60 : 40}
 css={{
 maxWidth: '920px',
 width: '100%',
 }}
 &gt;
 &lt;div css={boxStyle}&gt;
 &lt;Content articleId={articleId} onClose={handleClose} /&gt;
 &lt;/div&gt;
 &lt;/Dialog&gt;
 )
}

export default ArticleDetailDialog</code></pre>이를 통해 유저는 새로고침을 하더라도 게시글 상세페이지를 유지할 수 있고, 뒤로가기를 통해서도 모달을 닫을 수 있게 되었습니다. 👍

언틸의 피드에서는 유저들이 작성한 아티클을 모달의 형태로 볼 수 있는데요.이런 모달 형태는 유저들의 글을 빠르게 전환하며 볼 수 있다는 장점을 가지고 있어요.하지만 React State로 관리되기 때문에 몇가지 단점이 존재했어요. 예를 들어 새로고침시에 보고 있던 게시글이 사라지거나, 브라우저의 history stack을 쌓지 않기 때문에 뒤로가기(hist

next.js 에서 라우트로 관리되는 모달 구현하기 (route as modal)

팬텀 타입(Phantom Type)은 Haskell, Rust와 같은 언어에서 사용하는 기술이다. 팬텀 타입은 타입 매개변수(Generics)의 역할을 하는데, 실제 런타임에는 사용되지 않는 타입을 의미한다. 코드에서 타입 안전성을 강화하기 위해 사용된다......위와 같은 내용의 글들을 많이 읽었다. Typescript 사용자로써, 팬텀 타입에 대해 공부하려고 할 때마다 이게 무슨 뜻인지 이해가 잘 안 갔었는데, 공부하고 정리해본 내용을 이해하기 쉽게 예시와 함께 소개해보려고 한다.<h1>TypeScript는 구조적 타이핑을 하는 언어다</h1>구조적 타이핑이 무엇인지 알지 못하는 타 언어 사용자를 위해 짧은 설명을 하고 넘어가자. 구조적 타이핑은 클래스의 이름 따위가 아니라, '객체의 형태와 구조'를 타입의 중요한 요소로 여기는 방식을 의미한다.<pre spellcheck="false"><code class="language-typescript">class Human {
 name: string;
 age: number;
}

class Animal {
 name: string;
 age: number;
}

const member = {
 name: "Octoping",
 age: 25,
};

// 이 세 가지 객체 or 클래스의 타입은 사실상 전부 같다

function sayName(x: Human) {
 console.log(x.name);
}

// 전부 타입 문제 없이 작동한다
sayName(new Human("Octoping", 25));
sayName(new Animal("Pig", 3));
sayName(member);</code></pre>다음은 자바 같은 언어라면 생각도 못할 일이다. Human 클래스도, Animal 클래스도, member라는 변수도 <code spellcheck="false">string</code> 타입의 name과 <code spellcheck="false">number</code> 타입의 age를 가지므로 전부 같은 타입으로 인지하는 것이다.물론 객체를 클래스를 사용하지 않고도 바로 만들 수 있다는 자바스크립트의 특징 때문에 어쩌면 당연할 수 밖에 없다. 그리고 이 특성으로 인해 Typescript는 큰 생산성을 얻게 되면서 동시에 한 가지 단점을 얻게 되는데.<h2>문제 제기</h2>구조적 타이핑으로 인해 조금 불편을 겪을 수 있는 에피소드를 소개해보고자 한다.<pre spellcheck="false"><code class="language-typescript">type Dollar = number;
type Won = number;

// 십만원을 가진 나
const octopingMoney: Won = 100000;
const friendMoney: Won = 50000;

// 달러를 더하는 함수
function addDollar(a: Dollar, b: Dollar): Dollar {
 return a + b;
}

// 🥵
const result = addDollar(octopingMoney, friendMoney);</code></pre><code spellcheck="false">Dollar</code> 와 <code spellcheck="false">Won</code>은 둘 다 숫자지만, 단위가 다르므로 서로 더하면 안된다. 하지만 구조적 타이핑 덕분에 이런 놀라운 일이 가능해진다.이런 불편함을 어떻게 하면 좋을까?도메인 주도 개발에서 이야기하는 값 객체라는 걸 이용해보면 좋을 것 같다.<h2>값 객체를 다루기 어렵다</h2><pre spellcheck="false"><code class="language-java">class Member {
 private Email email;
 private Password password;
 // ...
}

class Email {
 private String value;

 public Email(String value) {
 if (!value.contains("@")) {
 throw new IllegalArgumentException("이메일 주소가 올바르지 않아요");
 }
 
 this.value = value;
 }
}

class Password {
 private String value;

 public Password(String value) {
 if (value.length() &lt; 8) {
 throw new IllegalArgumentException("비밀번호가 너무 짧아요");
 }

 this.value = value;
 }
}</code></pre>다음은 Java를 이용해서 값 객체 (VO)를 사용한 예제다. <code spellcheck="false">Member</code>에 이메일과 비밀번호를 그냥 String으로 저장하는 대신, 각각을 클래스로 묶어서 자기 자신이 값을 지님과 동시에 유효성 검사를 할 수 있도록 했다. 자신이 자기 자신을 그 자체로 소개할 수 있도록 하는 것. 그것이 도메인 주도 개발에서 이야기하는 값 객체이다.<pre spellcheck="false"><code class="language-typescript">class Member {
 constructor(
 private readonly email: Email,
 private readonly password: Password
 ) {}
}

class Email {
 value: string;

 constructor(value: string) {
 if (!value.includes("@")) {
 throw new Error("이메일 주소가 올바르지 않아요");
 }

 this.value = value;
 }
}

class Password {
 value: string;

 constructor(value: string) {
 if (value.length &lt; 8) {
 throw new Error("비밀번호가 너무 짧아요");
 }

 this.value = value;
 }
}

// 순서가 틀렸지만 당연히 에러가 나지 않는다!
const member = new Member(new Password("email"), new Email("password"));</code></pre>그런데 아뿔싸! 다음과 같은 코드를 Typescript에서 작성한다면 조금의 문제가 생겨버린다. 바로 <code spellcheck="false">Email</code>과 <code spellcheck="false">Password</code>의 시그니처가 똑같다는 것. 멤버 변수 타입 똑같고.. 메소드가 없는 것도 똑같은 것 같다. 당연히 에러가 나지 않겠지?<blockquote>이 문제에 대해서 진지하게 이야기해보면. 일단 첫 번째: 두 객체의 멤버 변수 값을 다르게 하면 된다. 그것이 구조적 타이핑이니까.. 하지만 서로 다른 두 클래스가 각자의 멤버 변수 이름에 강결합되는 프로그래밍을 유도하게 되는 것 같다. 두 번째: value를 private으로 만들면 된다.</blockquote><h2>문제 갈무리</h2>정리해보자. <code spellcheck="false">Dollar</code>와 <code spellcheck="false">Won</code>을 그냥 number로써 동일하게 표현하면 타입스크립트는 이 둘을 완전히 같은 타입으로 인지하여 똑같이 다뤄버리게 된다.이를 위해 값 객체를 사용해보려 하니 이 또한 멤버 변수의 이름을 신경써야 하니 나름의 어려움이 있다.마지막으로, 그냥 타입을 number로 쓸 때에 비해 객체를 생성해야 하니 메모리도 더 잡아먹게 된다. 객체지향이 원래 그런 것이다만은..<img src="https://image.until.blog/octoping/article/1723552083845" alt="until-1228">이런 상황을 어떻게 하면 좋을까?<h1>Phantom Type</h1>서론이 길었다. 팬텀 타입을 이용해보면 이런 문제를 해결해볼만한 실마리를 잡을 수 있을지도 모른다. 팬텀 타입을 내 나름대로 간단히 설명해보면 이렇다.<blockquote>형태는 같지만 실제로는 서로 다른 타입을 구분하기 위해, 실제로는 존재하지 않는 타입을 이용하는 것</blockquote><h2>코드로 살펴보기</h2><pre spellcheck="false"><code class="language-typescript">type Dollar = number &amp; { __unit: "Dollar" };
type Won = number &amp; { __unit: "Won" };

const myDollar = 2 as Dollar;
const myWon = 1000 as Won;</code></pre>달러와 원을 그냥 number가 아니라, <code spellcheck="false">number</code>이면서 <code spellcheck="false">{ __unit: string }</code> 인 녀석으로 정의하는 것이다.물론 이 뒷 부분은 실제 런타임에는 전혀 존재하지 않는 녀석이다. (타입스크립트에서 타입은 컴파일 단계에서 사라지므로 런타임에는 더더욱 존재하지 않게 된다)하지만 타입스크립트에게 억지로 이것이 존재한다고 함으로써 이 둘을 마냥 서로 같은 <code spellcheck="false">number</code>가 아니도록 만드는 것이다.<pre spellcheck="false"><code class="language-typescript">type Dollar = number &amp; { __unit: "Dollar" };
type Won = number &amp; { __unit: "Won" };


function addDollar(a: Dollar, b: Dollar): Dollar {
 return (a + b) as Dollar;
}

function dollarToWon(dollar: Dollar): Won {
 return (dollar * 1300) as Won;
}


const myDollar = 2 as Dollar;
const myWon = 1000 as Won;


const addedDollar = addDollar(myDollar, myDollar);
const convertedWon = dollarToWon(myDollar);

// 에러!
addedDollar(myWon, myWon);

// 에러!
convertedWon(myDollar);</code></pre>그렇다면 이렇게, 사실은 서로 같은 number를 서로 다른 타입처럼 사용할 수 있다.<h2>실생활 예제</h2>그럼 이걸 실생활에 어디다 어떻게 쓰라고? 팬텀 타입에 대해 다부지게 설명해주신 이 글에서 소개해준 예제를 조금 가공해서 빌려와볼까 싶다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://dev.to/busypeoples/notes-on-typescript-phantom-types-kg9">https://dev.to/busypeoples/notes-on-typescript-phantom-types-kg9</a><pre spellcheck="false"><code class="language-typescript">type MemberJoinPayload = {
 name: string;
 age: number;
};

export const onSubmit = (e: FormEvent&lt;HTMLFormElement&gt;) =&gt; {
 const payload: MemberJoinPayload = {
 name: e.currentTarget.name,
 age: e.currentTarget.age,
 };
 
 // validate를 해야 하지만 깜빡했다~~!!!!

 callApi(payload);
};

function validateData(data: MemberJoinPayload) {
 if (data.age &lt; 0) {
 throw new Error("나이가 음수에요");
 }
}

async function callApi(data: MemberJoinPayload) {
 // 대충 api 호출하는 코드
}
</code></pre>회원가입 폼에서 입력 받은 내용을 validate를 거친 후, 성공했다면 회원가입 api 호출 함수를 쏘는 로직을 떠올려보자.여기서 validate를 까먹어서 검증을 안 거치고 api를 호출하도록 코드를 작성하더라도 타입 상으로는 아무~ 문제가 없이 작동하기 때문에 내가 뭘 잘못했는지 생각 못하고 넘어갈 수 있다.여기서 팬텀 타입을 적용해보자.<pre spellcheck="false"><code class="language-typescript">type MemberJoinPayload = {
 name: string;
 age: number;
};

type UnvalidatedData = MemberJoinPayload &amp; { _type: "Unvalidated" };
type ValidatedData = MemberJoinPayload &amp; { _type: "Validated" };


export const onSubmit = (e: FormEvent&lt;HTMLFormElement&gt;) =&gt; {
 const payload = {
 name: e.currentTarget.name,
 age: e.currentTarget.age,
 } as UnvalidatedData;

 const validatedData: ValidatedData = validateData(payload);
 
 callApi(validatedData);
};

function validateData(data: UnvalidatedData): ValidatedData {
 if (data.age &lt; 0) {
 throw new Error("나이가 음수에요");
 }

 return { name: data.name, age: data.age } as ValidatedData;
 // return data as unknown as ValidatedData; 사실 이게 더 깔끔할지도
}

async function callApi(data: ValidatedData) {
 // 대충 api 호출하는 코드
}</code></pre>폼을 입력 받아 실행되는 <code spellcheck="false">onSubmit</code>에서 <code spellcheck="false">UnvalidatedData</code> 타입의 payload를 생성한다. 물론 이 변수로는 <code spellcheck="false">callApi</code> 함수를 실행할 수 없다.따라서 그 후 validate를 실행하면 <code spellcheck="false">ValidatedData</code> 타입의 결과를 받게 되니 이제서야 api를 호출할 수 있게 되는 것이다.실제 객체의 값은 전혀 변하지 않았고, <code spellcheck="false">__type</code>이니 뭐니 하는 것은 그 어디에도 존재하지 않았지만, 있는 타입이라고 타입스크립트에게 공갈을 하여 똑같은 타입의 서브 타입을 두 개를 만들어낸 것이다.<h2>팬텀 타입 추상화하기</h2>이 쯤 봤으면 팬텀 타입을 공용적으로 쓸 수 있게 추상화해볼 수 있겠다는 생각이 들 것이다. <code spellcheck="false">type Data = OriginalType &amp; { __value: string }</code> 대충 이런 형태이니..<pre spellcheck="false"><code class="language-typescript">type PhantomType&lt;Data, Type = never&gt; = Data &amp; { _type: Type };</code></pre>짜잔!그럼 이걸 이용해서 다양한 팬텀 타입을 원하는 대로 만들어보자.<pre spellcheck="false"><code class="language-typescript">type MemberJoinPayload = {
 name: string;
 age: number;
};

type UnvalidatedData = PhantomType&lt;MemberJoinPayload, "Unvalidated"&gt;;
type ValidatedData = PhantomType&lt;MemberJoinPayload, "Validated"&gt;;</code></pre><pre spellcheck="false"><code class="language-typescript">type Dollar = PhantomType&lt;number, "Dollar"&gt;;
type Euro = PhantomType&lt;number, "Euro"&gt;;
type Won = PhantomType&lt;number, "Won"&gt;;</code></pre><h2>ChatGPT가 추천하는 팬텀 타입 유망 직종</h2>다음은 ChatGPT에게 직접 팬텀 타입을 어디에 써보면 좋겠을지 물어보아 나온 결과인데 공유해본다.<ul><li>데이터베이스 ID 타입 구분<ul><li>서로 다른 테이블에서 사용되는 ID 값을 혼동하지 않도록 팬텀 타입을 사용할 수 있습니다</li></ul></li></ul><pre spellcheck="false"><code class="language-typescript">type UserId = PhantomType&lt;number, "User"&gt;;
type OrderId = PhantomType&lt;number, "Order"&gt;;

function getUserById(userId: UserId) {
 // 사용자 조회 로직
}

function getOrderById(orderId: OrderId) {
 // 주문 조회 로직
}

const userId: UserId = 1 as UserId;
const orderId: OrderId = 1 as OrderId;

// 올바른 사용
getUserById(userId);
getOrderById(orderId);

// 잘못된 사용 방지
// getUserById(orderId);</code></pre><ul><li>도메인 모델의 상태 구분<ul><li>상태 변화에 따른 도메인 모델의 상태를 팬텀 타입으로 구분하여, 잘못된 상태에서 발생할 수 있는 동작을 방지할 수 있습니다.</li></ul></li></ul><pre spellcheck="false"><code class="language-typescript">type Draft = { __status: 'Draft' };
type Published = { __status: 'Published' };

type Document&lt;Status&gt; = {
 content: string;
 status: Status;
};

function publish(doc: Document&lt;Draft&gt;): Document&lt;Published&gt; {
 return { ...doc, status: { __status: 'Published' } };
}

const draftDoc: Document&lt;Draft&gt; = {
 content: 'Draft content',
 status: { __status: 'Draft' }
};

// 올바른 상태 전환
const publishedDoc = publish(draftDoc);

// 잘못된 상태 전환 방지
// publish(publishedDoc); // 이미 게시된 문서는 다시 게시할 수 없음</code></pre>개인적으로 이건 비즈니스 로직에 관련된 건데 그냥 진짜 타입으로 관리해야 좋을 것 같다는 생각이다.<ul><li>서로 다른 API 엔드포인트에 안전하게 호출<ul><li>API 요청 시, 서로 다른 API 엔드포인트에 같은 데이터 타입을 사용하더라도, 요청 경로를 팬텀 타입으로 구분하여 잘못된 경로로 요청을 보내는 실수를 방지할 수 있습니다.</li></ul></li></ul><pre spellcheck="false"><code class="language-typescript">type PhantomType&lt;Data, Type = never&gt; = Data &amp; { _type: Type };

type ApiUri = string;
type OrderServerUri = PhantomType&lt;ApiUri, "주문"&gt;;
type UserServerUri = PhantomType&lt;ApiUri, "유저"&gt;;

async function fetchOrderList(uri: OrderServerUri, payload: any) {
 return fetch(uri, payload);
}

fetchOrderList("/api/order" as OrderServerUri, { userId: 1 });
fetchOrderList("/api/order" as UserServerUri, { userId: 1 }); // Error</code></pre>