⚛️ React

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

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

react-query의 fetchQuery과 prefetchQuery

🪟 Window

<img src="https://image.until.blog/morethanmin/article/1716045513650" alt="until-71"><p>항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.</p><h2>fnm이란?</h2><p>노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.</p><h2>winget으로 fnm 설치하기</h2><p>파워쉘에서 아래와 같이 입력하여 설치할 수 있다.</p><pre spellcheck="false"><code>winget install Schniz.fnm</code></pre><h3>0x8a15000f 오류가 발생하는 경우</h3><p>마이크로소프트 스토어에서 앱 설치 관리자를 업데이트 해주면 된다.</p><img src="https://image.until.blog/morethanmin/article/1716045690970" alt="until-72"><h2>fnm으로 node 설치하기</h2><h3>프로필 설정</h3><p>우선 <code spellcheck="false">PowerShell</code>프로필에 환경변수를 등록해야한다.</p><p><code spellcheck="false">~\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1</code> 경로에 아래와같이 입력 해주면 된다.</p><pre spellcheck="false"><code>fnm env --use-on-cd | Out-String | Invoke-Expression</code></pre><h3>PowerShell 실행시 PSSecurityException 오류가 발생하는 경우</h3><p>기본적으로 스크립트 삽입하는 것이 막혀있기 때문에 설정을 바꿔줘야한다.</p><p>관리자 권한으로 <code spellcheck="false">PowerShell</code> 을 실행해서 아래와 같이 입력한다.</p><pre spellcheck="false"><code>Set-ExecutionPolicy RemoteSigned</code></pre><h3>node 설치</h3><p>이제 <code spellcheck="false">PowerShell</code> 을 재부팅하고 아래와 같이 입력해 노드를 설치하면된다.</p><pre spellcheck="false"><code>fnm use --install-if-missing 20</code></pre><hr><p>그럼 이제 node를 사용할 수 있다! 근데 PowerShell도 그렇고 여러 이슈들도 그렇고 좀 귀찮은 것 같다. 좀 더 사용해보다가 정 안되면 wsl을 사용해야겠다.</p><p></p><p></p><p></p><p></p>

항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.fnm이란?노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.winget으로 fnm 설치하기파워쉘에서 아래와 같이 입력하여 설치할 수 있다.winget install Schniz.fn

윈도우에서 winget으로 fnm 설치하기 (Fast Node Manager)

🖥 백엔드

<p>스프링을 싫어하는 사람들이 많이 하는 말이 있다. 스프링은 어노테이션이 덕지덕지 붙어서 극혐이라고..</p><p>하지만 어노테이션도 잘 쓰면 로직을 간단히 추상화해줄 수 있어서 좋은 점이 많다.</p><p></p><p>어노테이션을 이용해서 로그인한 유저만 api를 호출할 수 있도록 하고, 미로그인 유저는 400 에러를 발생하도록 필터링하는 기능을 구현해보려고 한다.</p><p></p><pre spellcheck="false"><code>@NeedLogin
@Operation(summary = "아티클 작성하기")
@PostMapping("/{username}/articles")
fun writeArticle(
    @PathVariable("username") username: String,
    @RequestBody request: BlogArticleWriteRequestDTO,
) {
    TODO("로직은 알아서 잘 딱 깔끔하게")
}</code></pre><p>설명하기 앞서, 원하는 결과물은 이렇다.</p><p>api의 위에 <code spellcheck="false">@NeedLogin</code> 어노테이션을 붙이는 것 만으로 API가 로그인을 필요로 한다는 것을 명시적으로 나타내줄 수 있다.</p><p></p><p>언어는 코틀린으로 짜여있지만, Java로도 코드가 크게 다르진 않을 것이니 따라가봅시다</p><p>레츠고~</p><hr><pre spellcheck="false"><code class="language-kotlin">@Retention(AnnotationRetention.RUNTIME)
@Target(AnnotationTarget.FUNCTION)
annotation class NeedLogin</code></pre><p>간단하게 어노테이션을 만들어주자. API가 실행될 때 로그인 상태를 검증하는 것이니 RUNTIME이고, 함수에 붙여줄 생각이니 타겟은 FUNCTION으로 한다.</p><p></p><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><p>api가 호출될 때 마다 검증해야 하기 때문에 Interceptor를 사용해준다. <code spellcheck="false">HandlerInterceptor</code>를 상속받아서 <code spellcheck="false">NeedLoginInterceptor</code>라는 클래스를 만들었다.</p><p>'api가 실행되기 전에' 로그인 상태를 검증해야 하므로 <code spellcheck="false">preHandle</code>에 로직을 적어넣었다.</p><p></p><p>NeedLogin 어노테이션이 붙어있는지 체크해서 없을 경우 패스하기 위해 리턴 시켜준다.</p><p>그 후 각자의 방법으로 로그인 여부를 체크해준 후 미로그인 상태일 경우 Exception을 터트려주면 된다. 나는 AccessToken을 이용하는 방법을 사용했기 때문에 해당 방법으로 구현해주었다.</p><p></p><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><p>마지막으로는 인터셉터를 적용해주기 위해 WebMvcConfigurer에다가 내가 만든 인터셉터를 적용해주었다.</p><p>그러면 끝!</p><p></p><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><p>나머지는 이렇게 api 위에다가 NeedLogin 어노테이션만 붙여주면 된다.</p><p></p><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><p>마지막으로 예외가 발생했을 때 400 에러와 exception 메시지를 출력해주기 위해 ExceptionHandler로 받아다가 원하는 에러 코드와 메시지를 전달해주면 된다.</p><p></p><pre spellcheck="false"><code>{
  "error": "로그인이 필요합니다."
}</code></pre><p>그러면 이렇게 API를 실행했을 때 401 에러와 함께 메시지가 떨어져나오는 모습을 볼 수 있다~</p><p></p><p>앞으로도 인터셉터와 어노테이션 기능을 잘 활용하여 로직을 잘 추상화하고 반복을 제거해보자</p>

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

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

<h1><strong>들어가기 전에</strong></h1><p>Nest.js는 Node.js 진영에서 널리 쓰이고 있는 서버 프레임워크이다.</p><p>그리고 이런 서버를 클라우드 환경에 배포하기 위해서는 AWS EC2, Oracle Cloud 등의 컴퓨팅 인스턴스 위에 올리는 방법이 정석이겠다.</p><p>&nbsp;</p><p>하지만 Nest.js는 서버리스를 지원하고, Vercel은 서버리스를 지원한다.<br>이를 이용해서 무료로 간단히 Vercel에 서버를 배포할 수 있다.</p><p></p><h1>방법</h1><p>방법 자체는 간단하다. 프로젝트 최상단에&nbsp;<code spellcheck="false">vercel.json</code>을 만들고 다음과 같이 작성한다.</p><pre spellcheck="false"><code class="language-json">{
  "version": 2,
  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/main.ts",
      "methods": [
        "GET",
        "POST",
        "PUT",
        "DELETE"
      ]
    }
  ]
}</code></pre><p><span>그 후 </span><code spellcheck="false">npm install -g vercel</code><span> 을 실행한 후, 프로젝트 최상단 경로에서 </span><code spellcheck="false">vercel .</code><span>를 실행하면 완성된다.</span></p><p></p><h1>트러블 슈팅</h1><h2>Cannot find module</h2><img src="https://image.until.blog/octoping/article/1730787106060.png" data-width="75%" data-align="center" alt="1972"><p><span>배포를 했지만 다음과 같은 오류가 떠서 처음에 큰 고생을 했다.</span></p><p><span>Vercel에서 로그를 확인해보니 아래와 같은 에러 로그가 있었다.</span></p><pre spellcheck="false"><code class="language-log">2023-08-18T17:52:14.322Z	undefined	ERROR	Cannot find module 'src/infra/prisma/PrismaService'
Require stack:
- /var/task/src/feed/feed.module.js
- /var/task/src/app.module.js
- /var/task/src/main.js
2023-08-18T17:52:14.323Z	undefined	ERROR	Did you forget to add it to "dependencies" in `package.json`?
RequestId: 059dec36-4319-4851-9c23-3ecf01978f18 Error: Runtime exited with error: exit status 1
Runtime.ExitError</code></pre><img src="https://image.until.blog/octoping/article/1730787132600.png" data-width="100%" data-align="center" alt="1974"><p>분명 잘 존재하는 모듈을 발견하지 못하고 있다고 에러가 떴다.</p><p>왜;;인지 도저히 알기가 어려워 많이 헤맸는데, 문제는 내 import 문에 있었다.</p><pre spellcheck="false"><code class="language-typescript">import { PrismaService } from '@/infra/prisma/PrismaService';</code></pre><p>다음과 같이 path alias를 사용해서 절대 경로로 import 하는 경우 Vercel이 경로를 인식을 못하는 이슈였다.</p><p></p><p><code spellcheck="false">src/infra/prisma/PrismaService</code>&nbsp;처럼 @를 안 쓰고 절대경로로 쓰더라도 마찬가지였다. 상대경로로 작성해야 한다!</p><p></p><h2>Swagger 페이지 404 에러 (검증 못 해봄)</h2><p><span>다른 페이지는 잘 나오지만 Swagger 페이지만 아무것도 안 나오는 이슈 (404 에러)가 발생한다.</span></p><pre spellcheck="false"><code>Uncaught ReferenceError: SwaggerUIBundle is not defined
    at window.onload</code></pre><p>개발자 도구를 켜보면 이런 로그가 나온다.</p><p>C# 쪽 스웨거에서도 한번 제보된 문제이긴 하다. swagger ui 파일이 서버리스에 올라가기에는 너무 크다는 이슈다.</p><a data-type="bookmark" href="https://stackoverflow.com/questions/63363123/swagger-ui-bundle-js-too-large-for-aws-lambda-and-alb" target="_blank"><div class="content"><div><div class="title">swagger-ui-bundle.js too large for AWS Lambda and ALB</div><div class="description">Updated to .NET Core 3.1 and the latest version of Swashbuckle but found the swagger UI wasn't working correctly.  The swagger-ui-bundle.js was failing to load with a 502.  Tracked this down to a A...</div></div><div class="href">https://stackoverflow.com/questions/63363123/swagger-ui-bundle-js-too-large-for-aws-lambda-and-alb</div></div><img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=73d79a89bded"></a><p>따로 CDN에 swagger js나 css를 올려놓고, 서버리스에 올리는 대신 받아오는 방식으로 사용해볼 수 있겠다는 생각인데.</p><p></p><pre spellcheck="false"><code class="language-typescript">const CSS_URL = "cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.0/swagger-ui.min.css";
swaggerUI.setup(specs, { customCssUrl: CSS_URL })</code></pre><p>이런 방식으로 사용해볼 수 있다는 듯 하다.</p><a data-type="bookmark" href="https://github.com/swagger-api/swagger-ui/issues/8461#issuecomment-1497927943" target="_blank"><div class="content"><div><div class="title">When deploying swagger on vercel on nodejs it does not show UI · Issue #8461 · swagger-api/swagger-ui</div><div class="description">This is How it does look like this and I do not know how to fix this issue. Q&amp;A (please complete the following information) OS: M1 Pro Browser" Chrome, Safari Version: 22 Method of installation: np...</div></div><div class="href">https://github.com/swagger-api/swagger-ui/issues/8461#issuecomment-1497927943</div></div><img src="https://opengraph.githubassets.com/3d796af99bd52776acde541aa8b0f43379af9c671dc58fe420ea1314dd1a51a4/swagger-api/swagger-ui/issues/8461"></a><p></p><h1>TMI</h1><p>실제로 until을 처음 개발할 당시에 서버비를 줄이기 위해 다음 방법으로 한동안 개발했었다..</p><p>지금은 AWS + Kotlin Spring으로 넘어갔지만, 그래도 당시에 고려했던 점들을 몇 가지 적어본다.</p><p></p><ol><li><p>NestJS의 경우 서버 실행 초기에 bootstrap하는 과정을 거치는데, 이걸 api가 들어올 때마다 해야한다면 꽤 무거운 작업일 수밖에?</p><p></p></li><li><p>서버리스로 구성할 경우 api가 들어올 때마다 함수가 실행되는 꼴이므로, 트래픽이 몰리는 경우 DB의 커넥션 풀을 굉장히 잡아먹을 가능성이 높다. 이는 서버리스의 고질적 문제이긴 하다.</p><ul><li><p>프로젝트의 persistence 라이브러리로 채택한 Prisma의 경우 이런 문제를 해결해준다고 공식 사이트에 적혀는 있다. 하지만 좀 걱정된다</p><img src="https://image.until.blog/octoping/article/1730788287259.png" data-width="100%" data-align="center" alt="1976"></li></ul></li></ol><p><br></p><p></p>

NestJS를 서버리스로 배포해서 무료로 사용해봅시다

NestJS 서버를 서버리스로 Vercel에 배포하기

<h1>쿼리에서 로직 빼기</h1><p></p><div data-youtube-video=""><iframe width="640" height="480" allowfullscreen="true" autoplay="false" disablekbcontrols="false" enableiframeapi="false" endtime="0" ivloadpolicy="0" loop="false" modestbranding="false" origin="" playlist="" src="https://www.youtube.com/embed/fnH_SR3n9Ew" start="0"></iframe></div><p>내가 좋아하는 최범균님의 영상 중에서, 처음 보고 제일 충격을 받았던 영상이다.</p><p>영상을 다 보면 물론 좋겠지만, 시간 단축을 위해 핵심만 짚어본다.</p><p>ㅤ</p><h2>쿼리에 로직이 들어간 코드</h2><pre spellcheck="false"><code class="language-java">// update member m set m.status = 20 where m.id = ? and status = 10
int cnt = dao.회원탈퇴(id);

if (cnt == 0) {
    // 해당 id에 해당하는 회원이 없음.
    // 변경 건이 없으므로 변경 실패 처리
} else {
    // 변경 성공했으므로 로직
}</code></pre><p>다음은 mybatis로 짜여진 전형적인 코드다.</p><p>Mybatis로 UPDATE나 DELETE 쿼리를 실행하면, 그 결과로 변경된 행의 개수를 int로 반환해준다.</p><p>그걸 이용해서, cnt가 0이면 해당 멤버가 없었다는 것 (혹은 이미 탈퇴 상태라 탈퇴시킬 회원이 없었던 것)이므로 로직 실패 코드를 짜둔 것이다.</p><p>ㅤ</p><p>이렇게 코드를 짜면 SELECT로 멤버를 얻어오고 UPDATE로 값을 변경시키는 2번의 쿼리를 한번으로 줄일 수 있으므로 얼핏 보면 그냥 좋은 코드인 것처럼 보인다.</p><p>하지만 이렇게 로직이 쿼리에 들어가면 (현재 코드는 회원탈퇴를 이미한 유저는 탈퇴할 수 없다는 로직이 쿼리에 있다) 다음과 같은 문제가 생긴다.</p><ul><li><p>주요 로직이 흩어짐</p><ul><li><p>어플리케이션 코드, 쿼리로 분산 -&gt; 코드 분석 어려워짐</p></li></ul></li><li><p>유사한 쿼리를 중복해서 만들게 됨</p><ul><li><p>미세하게 다른 조건으로 다른 변경 처리</p></li></ul></li><li><p>주요 로직을 단위 테스트하기 어려움</p><ul><li><p>쿼리를 실행해야 로직 검증 가능</p></li></ul></li></ul><p>ㅤ</p><h2>이렇게 고치자</h2><pre spellcheck="false"><code class="language-java">Member member = dao.findById(id);

if (member == null) // 실패처리
if (!member.isActive()) // 실패처리

member.탈퇴();
dao.update(member);

/////
class Member {
    public boolean isActive() {
        return this.status == 10;
    }

    public void 탈퇴() {
        this.status = 20;
    }
}</code></pre><p>이렇게 하면 회원 탈퇴에 대한 로직이 어플리케이션 단으로 옮겨지므로 아까의 단점이 해소된다.</p><p><strong>코드의 가독성도 올라가고, 상태 변경 기능과 관련된 쿼리가 단순해진다.</strong></p><p>그러니 쿼리에서 로직을 빼라는 것이다.</p><p>ㅤ</p><h1>그래서, 이걸로 모든 것이 해결됐나요?</h1><img src="https://image.until.blog/octoping/article/1731326346775.png" data-width="50%" data-align="center" alt="2075"><p>명령(Command)에 대한 로직은 쿼리에서 빼내서 어플리케이션 단으로 옮기라는 것. 완벽히 이해했어!</p><p>그렇다면 조회(Query)는 어떨까?</p><p>ㅤ</p><h2>조회에는 로직이 없는가?</h2><p>조회에도 당연히 로직이 있다. 언틸의 예제를 가져와보자.</p><p>언틸에는 그룹 블로그가 있다. 토스, 배민 같은 팀 블로그를 모든 유저가 손쉽고 자유롭게 만들 수 있고, 같이 블로그를 꾸미고 싶은 유저를 초대할 수도 있다. (많이 써주세요)</p><p>아무튼.. 그리고 언틸에는 비공개 글을 작성할 수 있는 로직이 있는데.</p><p>ㅤ</p><h3>언틸 글 공개 로직을 공개합니다</h3><p>그룹 블로그에서 글을 조회하는 로직이 어떻게 될까?</p><ol><li><p>삭제된 그룹의 글은 조회할 수 없다</p></li><li><p>삭제된 글은 아무도 볼 수 없다.</p></li><li><p>그룹의 공개 글은 누구나 볼 수 있다.</p></li><li><p>그룹의 멤버는 비공개 글을 볼 수 있다.</p></li><li><p>그룹에 속해있지 않은 유저는 비공개 글을 볼 수 없다.</p></li><li><p>미로그인 유저도 비공개 글을 볼 수 없다.</p></li><li><p>해당 비공개 글을 작성한 작성자는 탈퇴했더라도 글을 볼 수 있다.</p></li></ol><p>ㅤ</p><p>이러한 로직이 있는데.</p><p>그렇다면 그룹 블로그에 접속했을 경우 글 목록이 보여야하는데, 이것은 코드로 어떻게 짤 수 있을까?</p><p>ㅤ</p><h1>조회 쿼리에서 로직 빼기..?</h1><h2>findAll() 후 필터링하기</h2><p>물론 조회 쿼리에서 로직을 빼는 가장 간단한 방법이 있다.</p><p><code spellcheck="false">findAll()</code>로 모든 데이터를 불러온 후, 어플리케이션 단에서 필터링하는 것이다.</p><pre spellcheck="false"><code class="language-java">public List&lt;Article&gt; getGroupBlogArticles(Long requestUserId, Long groupId) {
    List&lt;Article&gt; articles = articleRepository.findAll();
    Group group = groupRepository.findById(groupId);

    return articles.stream()
        .filter(it -&gt; group.isActive())
        .filter(it -&gt; it.isWrittenIn(group)) 
        .filter(it -&gt; it.isNotDeleted())
        .filter(it -&gt; {
            if (it.isAuthor(requestUserId)) return true;
            if (isMember(group, requestUserId)) return true;

            return false;
        })
        .toList()
        .pagination(start, size); // 이런 메소드는 없지만 있다고 하자
}</code></pre><p>하지만.. 이런 짓을 하기에는 우리의 서버의 컴퓨팅 용량은 충분치 않다.</p><p>전체 게시글이 몇 개인데 이런 짓을 했다간 말아먹기 딱이다.</p><p>ㅤ</p><h2>페이지네이션도 해야해</h2><pre spellcheck="false"><code class="language-java">public List&lt;Article&gt; getGroupBlogArticles(Long requestUserId, Long groupId) {
    List&lt;Article&gt; articles = articleRepository.findAllWithPage(start, size);
    Group group = groupRepository.findById(groupId);

    return articles.stream()
        .filter(it -&gt; group.isActive())
        .filter(it -&gt; it.isWrittenIn(group))
        .filter(it -&gt; it.isNotDeleted())
        .filter(it -&gt; {
            if (it.isAuthor(requestUserId)) return true;
            if (isMember(group, requestUserId)) return true;

            return false;
        })
        .toList();
}</code></pre><p>전체 데이터를 다 불러와서 어플리케이션 코드로 데이터를 조작하는 건 글렀다.</p><p>어차피 페이지네이션해야하는데, 해당 페이지의 데이터만 먼저 불러오고 어플리케이션에서 필터링할 수는 없을까?</p><p>ㅤ</p><p>당연히 안되죠? 1페이지의 글 30개를 불러왔는데 그 후 로직으로 필터링을 해서 전부 필터링 되어버린다면..</p><p>페이지를 조회했는데 아무 것도 안 나오는 기현상을 마주할 수 있을 것이다.</p><p>ㅤ</p><h1>절충할 수 밖에 없다</h1><p>결국 조회 메소드에선 애초에 DB에서 얻어오는 결과가, 로직이 전부 처리된 데이터여야 한다.</p><p>그렇다고 모든 것을 놓고 쌩 쿼리로 돌아가자는 말은 아니다. 절충할 줄 알아야 한다. 그렇다고 로직을 처리해서 DB에서 값을 얻어올 수 있는, 프로시저를 쓰자는 것도 아니다.</p><p>어떻게 어플리케이션 코드로 최대한 로직을 나타낼 수 있을까?</p><p>ㅤ</p><h2>쿼리에서 로직 조금 빼기</h2><p>일단 아까의 로직을 그냥 쌩 SQL로 나타내보자.</p><pre spellcheck="false"><code class="language-sql">SELECT a.*
 FROM article a
 JOIN profile group ON a.blog_id = group.id
WHERE a.blog_id = :groupId
  AND a.status = 'PUBLISHED'
  AND group.is_deleted = false
  AND (
    # 그룹의 공개 글은 누구나 볼 수 있다.
    a.is_public or

    # 미로그인 유저는 비공개 글을 볼 수 없다
    :userId IS NOT NULL or

    # 해당 글을 작성한 작성자는 탈퇴했더라도 글을 볼 수 있다.
    a.author_id = :userId or 

    # 그룹의 멤버는 비공개 글을 볼 수 있다.
    :userId IN (
      SELECT member_id
        FROM group_member
       WHERE group_id = :groupId
    )
  )</code></pre><p>뭐 서브쿼리도 들어가고 복잡하다.. ㅋㅋ</p><p>회사의 비즈니스 로직급의 요구사항이 될 경우 더더욱 쿼리는 번잡해질 것이다.</p><p>조회에 필요한 몇 몇 부분은 쿼리를 구성하는 데에 필수적이겠지만, 그 중 필수적이지 않은 것들은 최대한 어플리케이션으로 일임하고 쿼리를 단순화하자.</p><p>ㅤ</p><h3>삭제된 그룹의 글은 조회할 수 없다</h3><p>삭제된 그룹의 글을 조회할 수는 없다는 것은 이 쿼리를 구성하는 데에 필수적이지 않은 것 같다.</p><p>미리 그룹을 조회하고, 삭제된 그룹이라면 에러를 미리 던지자.</p><p>그러면 WHERE문도 하나 빠지고, 그룹의 정보를 얻기 위해 JOIN할 필요도 없을 것 같다.</p><pre spellcheck="false"><code class="language-java">public List&lt;Article&gt; getGroupBlogArticles(Long requestUserId, Long groupId) {
    Group group = groupRepository.findById(groupId);

    if (!group.isActive()) {
        throw new IllegalStateException("존재하지 않는 그룹입니다.");
    }

    return articleRepository.findFromGroupBlog(group, requestUserId);
}</code></pre><pre spellcheck="false"><code class="language-sql">SELECT a.*
 FROM article a
WHERE a.blog_id = :groupId
  AND a.status = 'PUBLISHED'
  AND (
    # 그룹의 공개 글은 누구나 볼 수 있다.
    a.is_public or

    # 미로그인 유저는 비공개 글을 볼 수 없다
    :userId IS NOT NULL or

    # 해당 글을 작성한 작성자는 탈퇴했더라도 글을 볼 수 있다.
    a.author_id = :userId or 

    # 그룹의 멤버는 비공개 글을 볼 수 있다.
    :userId IN (
      SELECT member_id
        FROM group_member
       WHERE group_id = :groupId
    )
  )</code></pre><p>ㅤ</p><h3>그룹의 멤버는 비공개 글을 볼 수 있다.</h3><p>그룹의 멤버는 비공개 글을 볼 수 있다는 것은 쿼리에서 빠지기 힘들어보인다.</p><p>그래도 해당 유저가 미로그인인지, 그룹의 멤버인지 체크하는 것은 어플리케이션에서 할 수 있을 것 같다.</p><pre spellcheck="false"><code class="language-java">public List&lt;Article&gt; getGroupBlogArticles(Long requestUserId, Long groupId) {
    Group group = groupRepository.findById(groupId);

    if (!group.isActive()) {
        throw new IllegalStateException("존재하지 않는 그룹입니다.");
    }

    boolean isMember = isMember(group, requestUserId);

    return articleRepository.findFromGroupBlog(group, isMember);
}

private boolean isMember(Group group, Long userId) {
    if (userId == null) {
        return false;
    }

    return groupMemberRepository.existsByGroupAndUserId(group, userId);
}</code></pre><pre spellcheck="false"><code class="language-sql">SELECT a.*
 FROM article a
WHERE a.blog_id = :groupId
  AND a.status = 'PUBLISHED'
  AND (
    # 그룹의 공개 글은 누구나 볼 수 있다.
    a.is_public or

    # 해당 글을 작성한 작성자는 탈퇴했더라도 글을 볼 수 있다.
    a.author_id = :userId or

    # 그룹의 멤버는 비공개 글을 볼 수 있다.
    :isMember
  )</code></pre><p>ㅤ</p><h3>최종 결과</h3><pre spellcheck="false"><code class="language-sql"># Before
SELECT a.*
 FROM article a
 JOIN profile group ON a.blog_id = group.id
WHERE a.blog_id = :groupId
  AND a.status = 'PUBLISHED'
  AND group.is_deleted = false
  AND (
    a.is_public or

    :userId IS NOT NULL or

    a.author_id = :userId or

    :userId IN (
      SELECT member_id
        FROM group_member
       WHERE group_id = :groupId
    )
  )



# After
SELECT a.*
 FROM article a
WHERE a.blog_id = :groupId
  AND a.status = 'PUBLISHED'
  AND (
    a.is_public or
    a.author_id = :userId or
    :isMember
  )</code></pre><p>ㅤ</p><h2>정리</h2><p>물론 쿼리에 로직을 전부 빼진 못했다.</p><p>하지만 좀 더 코드에 가독성이 생겼고, 비즈니스 로직을 수정할 때에도 훨씬 쉬워졌다.</p><p>ㅤ</p><p>조회에 로직을 모두 어플리케이션으로 뺄 수 없다는 단점을 보완하기 위해 QueryDSL과 같은 쿼리 빌더가 존재한다.</p><p>하지만 이것 또한 결국 도메인 레이어가 아니라 영속성 레이어에 비즈니스 로직이 들어간 것이라고 생각한다.</p><p>ㅤ</p><p>따라서 최대한 쿼리 쪽으로 들어가는 로직을 줄이고 이를 파라미터화 해서 외부에서 주입해줄 수 있는 쪽을 선택해보자.</p>

풍부한 비즈니스 레이어를 향하여

'조회' 쿼리에서 로직 빼기

포티

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

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

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

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

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

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

        examples[exceptionCode.name] = example

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

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

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

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

<h1>들어가기 앞서</h1><p>이런 상황이 있다고 합시다. 저는 API를 만들고 있고, request param으로 date값을 받고 싶습니다.</p><pre spellcheck="false"><code class="language-java">class Controller {
    @GetMapping("/hello")
    public void hello(
            @RequestParam(name = "date") LocalDate date
    ) {
        System.out.println("Hello, " + date);
    }
}</code></pre><p>이렇게 짜봤습니다.</p><p>그런데 여기에 date 값이 오지 않았을 때 기본값으로 오늘 날짜를 넣고 싶을 경우, 어떻게 해야 할까요?</p><p></p><pre spellcheck="false"><code class="language-java">class Controller {
    @GetMapping("/hello")
    public void hello(
            @RequestParam(name = "date", defaultValue = LocalDate.now()) LocalDate date
    ) {
        System.out.println("Hello, " + date);
    }
}</code></pre><p>이렇게 짤 수 있다면 좋겠지만, 어노테이션의 속성 값으로는 상수밖에 들어갈 수 없어 오류가 나게 됩니다. 이럴 때엔 어떻게 하면 좋을까요?</p><p></p><h1>SpEL</h1><p>먼저 Spring Expression Language (SpEL)에 대해 알아봅시다. 공식문서가 잘 되어 있는 스프링답게, 여기에서 자세한 내용을 살펴볼 수 있는데요.</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.spring.io/spring-framework/docs/3.0.x/reference/expressions.html">https://docs.spring.io/spring-framework/docs/3.0.x/reference/expressions.html</a></p><p></p><p>다 읽어보기엔 시간이 없으니 간략하게 알아봅시다.</p><p>Spring 표현식 언어 (SpEL)은 런타임에 객체 그래프를 쿼리하고 조작할 수 있도록 지원하는 표현식 언어라고 합니다. 이 언어는 다음과 같은 기능을 제공한다고 해요.</p><ul><li><p>리터럴 표현식</p></li><li><p>Boolean, 관계 연산자</p></li><li><p>정규 표현식</p></li><li><p>클래스 표현식</p></li><li><p>속성, 배열, 리스트, 맵에 액세스하기</p></li><li><p>메소드 호출</p></li><li><p>관계형 연산자</p></li><li><p>할당</p></li><li><p>생성자 호출</p></li><li><p>빈 참조</p></li><li><p>배열 생성</p></li><li><p>인라인 리스트</p></li><li><p>삼항 연산자</p></li><li><p>변수</p></li><li><p>유저가 정의한 함수</p></li><li><p>컬렉션 프로젝션</p></li><li><p>컬렉션 선택</p></li><li><p>템플릿 표현식</p></li></ul><p>많죠? 하지만 이 글에서는 이 중 몇 가지만 알아보려고 합니다.</p><p></p><h2>예제와 함께 간단한 SpEL 문법 살펴보기</h2><pre spellcheck="false"><code class="language-java">ExpressionParser parser = new SpelExpressionParser();
Expression exp = parser.parseExpression("'Hello World'");
String message = (String) exp.getValue();</code></pre><p>SpEL을 시험해보고 싶은 경우, 다음과 같이 사용 가능합니다. 다음 코드를 실행해보면 message 변수에는 <code spellcheck="false">Hello World</code>가 담기게 됩니다.</p><p>만약 실행하려는 SpEL의 문법이 맞지 않을 경우 <code spellcheck="false">parseExpression</code> 함수에서는 <code spellcheck="false">ParseException</code>, <code spellcheck="false">getValue</code> 함수에서는<code spellcheck="false">EvaluationException</code> 이 발생할 수 있다고 하네요.</p><p></p><h3>함수 호출하기</h3><pre spellcheck="false"><code class="language-java">ExpressionParser parser = new SpelExpressionParser();
Expression exp = parser.parseExpression("'Hello World'.concat('!')");
String message = (String) exp.getValue();</code></pre><p>앞에서 언급했듯, SpEL은 함수 호출도 가능합니다. 다음을 실행하면 <code spellcheck="false">Hello World</code> 리터럴 문자열의 concat 함수를 실행하게 되어 <code spellcheck="false">Hello World!</code> 와 같은 결과를 얻어낼 수 있습니다. 그렇다면 다음과 같이 사용할 수 있다는 예제와 함께 쭉쭉 넘어가볼까요.</p><p></p><h3>생성자 호출하기</h3><pre spellcheck="false"><code class="language-java">ExpressionParser parser = new SpelExpressionParser();
Expression exp = parser.parseExpression("new String('hello world').toUpperCase()");
String message = exp.getValue(String.class); // HELLO WORLD</code></pre><p>위에서 언급했듯이, 생성자를 호출하는 것도 가능합니다.</p><p></p><h3>객체의 속성 검색하기</h3><pre spellcheck="false"><code class="language-java">class Human {
    private String name;
    private int age;
}

Human human = new Human("Alice", 20);

ExpressionParser parser = new SpelExpressionParser();
Expression exp = parser.parseExpression("name");
String name = (String) exp.getValue(human); // "Alice"</code></pre><p>다음과 같이 특정 객체 인스턴스의 속성을 검색하는 것도 가능합니다.</p><p></p><h3>특정 타입 정의하기</h3><p>특별한 연산자인 'T' 를 사용하면 특정 클래스의 타입을 지정해줄 수 있어요.</p><pre spellcheck="false"><code class="language-java">ExpressionParser parser = new SpelExpressionParser();
Class listClass = parser.parseExpression("T(java.util.List)").getValue(Class.class);
System.out.println(listClass); // class java.util.List</code></pre><pre spellcheck="false"><code class="language-java">ExpressionParser parser = new SpelExpressionParser();
List list = parser.parseExpression("T(java.util.List).of(1, 2)").getValue(List.class);
System.out.println(list); // [1, 2]</code></pre><p>이렇게 static 함수를 호출해주는 것도 가능하답니다.</p><p></p><h2>어노테이션과 함께 사용하기</h2><p>'들어가기 앞서'의 의문증을 해소하는 데에 한 걸음 가까워졌어요.</p><p>SpEL을 BeanDefinitions을 정의하는 데에 사용할 수도 있습니다. XML로 하는 방식, 어노테이션으로 하는 방식이 있는데, 저희는 스프링 부트의 시대를 살고 있으므로 어노테이션을 통해 사용하는 법을 알아봅시다.</p><p></p><h3>@Value</h3><p><code spellcheck="false">@Value</code> 어노테이션을 필드, 메서드 및 메서드/생성자 매개변수에 배치해서 기본값을 지정할 수 있다. 이 때 사용하는 표현식에 <code spellcheck="false">#{}</code>을 붙여주어야 한다!</p><pre spellcheck="false"><code class="language-java">@Value("#{15 + 57}") // 72
private int sktt1;

@Value("#{2 ^ 10}") // 1024
private int power;</code></pre><p></p><h3>@PreAuthorize, @PostAuthorize</h3><p>스프링 시큐리티에서 자주 사용하는 이 어노테이션들도 사실은 SpEL로 되어 있어요.</p><pre spellcheck="false"><code class="language-java">@PreAuthorize("hasRole('ADMIN')") // 이렇게도 사용 가능하지만..

@PreAuthorize("1 == 2") // 이렇게도 사용 가능하다</code></pre><p>보통은 <code spellcheck="false">hasRole</code> 함수 등으로만 사용해서 잘 몰랐을 수 있지만, 근본은 SpEL이므로 <code spellcheck="false">1 == 2</code> 같은 아무 boolean 조건식이나 넣어줄 수 있습니다. 이 경우 true가 나와야지만 인증되므로 <code spellcheck="false">1 == 2</code>는 아무도 실행할 수 없는 api가 되겠네요.</p><p></p><h3>@RequestParam</h3><p>오늘의 '들어가기 앞서'의 의문증이 나왔어요. <code spellcheck="false">RequestParam</code>의 defaultValue 부분도 SpEL을 사용할 수 있습니다. 따라서 앞의 의문인, 기본값으로 오늘 날짜를 넣고 싶을 경우는 이렇게 코드를 짜주면 되겠습니다.</p><pre spellcheck="false"><code class="language-java">class Controller {
    @GetMapping("/hello")
    public void hello(
        @RequestParam(defaultValue = "#{T(java.time.LocalDate).now()}") date: LocalDate
    ) {
        System.out.println("Hello, " + date);
    }
}</code></pre><p>고민 해결!</p><p></p><h1>마무리 하며</h1><p>SpEL은 나름 다양한 쓰임새가 있습니다. 다른 빈의 변수 값을 가져오는 데에 쓸 수도 있고, 문자열로 다이나믹하게 변수를 파싱해야할 때에 쓰일 수도 있습니다.</p><p>알아두면 언젠간 도움이 될 거라 생각이 드네요.</p>

Spring Expression Language (SpEL)을 알아보자

스프링 표현식 언어 (SpEL) 알아보기

<h1>서론</h1><p>프론트엔드 진영은 <code spellcheck="false">Vercel</code>, <code spellcheck="false">Netlify</code>, <code spellcheck="false">Github Page</code> 등과 같은 서비스들의 등장으로 날이 갈 수록 프로젝트를 배포해보기가 쉬워지고 있습니다.</p><p>하지만 백엔드 진영은 아직 영 신통치 않은게 사실이라, 많이들 눈물을 삼키며 AWS Free Tier를 사용하고 있는 형국인데요. 그래도 Oracle에서 평생 무료 클라우드 인스턴스 2개를 지원하는 등, 공짜 배포 방법을 찾으려면 찾을 수 있습니다. 그래도 역시 Github 연동 배포 자동화도 쉽게 쉽게 해주는 <code spellcheck="false">Vercel</code> 이 부럽기만 한 상황입니다.</p><p></p><p>하지만 아직 세상은 살만한가 봅니다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://render.com/">Render</a>라고 하는 곳에서, 웹 서버 배포를 쉽게 도와주는 서비스를 제공하고 있습니다.</p><p>한번 Spring 서비스를 Render라는 곳에 배포하는 방법을 알아보겠습니다.</p><p></p><h1>배포해보기</h1><h2>1. Dockerfile 만들기</h2><p>먼저, Github에 코드를 올려둔 Spring Boot 프로젝트가 있어야 합니다. 꼭 깃허브를 통해 배포할 필요는 없지만 그 방법까지 다루진 않겠습니다.</p><p></p><p>Render는 기본적으로 Spring 서비스를 그대로 올릴 수는 없어서, Docker로 배포해야 합니다. 프로젝트 소스 최상단에 Dockerfile을 만들어봅시다.</p><p></p><pre spellcheck="false"><code class="language-ini">FROM gradle:jdk17-jammy AS build
COPY --chown=gradle:gradle . /home/gradle/src
WORKDIR /home/gradle/src
RUN gradle build --no-daemon
LABEL org.name="hezf"</code></pre><p>Render는 Vercel처럼 Github에 push가 진행되었을 때 dockerfile로 빌드를 시도합니다. 따라서 Dockerfile으로 <code spellcheck="false">docker build</code>를 실행했을 때 <code spellcheck="false">gradle build</code>를 한 후, 그 jdk 파일을 가지고 도커라이징을 하는 과정을 거쳐야 합니다.</p><p>저는 JDK 17 기반의 프로젝트이므로 <code spellcheck="false">gradle:jdk17-jammy</code> 를 사용했습니다. 다른 JDK 버전을 사용하셨다면 알맞게 수정하시길 바래요.</p><p></p><pre spellcheck="false"><code class="language-ini">FROM eclipse-temurin:17-jdk-jammy
COPY --from=build /home/gradle/src/build/libs/kw-duo-0.0.1.jar app.jar
ENTRYPOINT ["java", "-jar", "/app.jar"]</code></pre><p>그 밑에 이어서 작성합니다.</p><p>빌드를 성공했다면 그 jar 파일을 실행도 해줘야겠죠. 빌드된 jar 파일을 app.jar 라는 이름으로 도커에 복사해줍니다. 그리고 마지막으로 <code spellcheck="false">java -jar /app.jar</code> 명령어로 실행해주는 과정입니다.</p><p>여기서도 JDK 버전을 알맞게 맞춰주시고, 빌드 경로도 맞게 고쳐주시면 되겠습니다.</p><p></p><p>로컬에서 docker build를 시도해보시고 성공하셨다면 다음 과정으로 넘어갑시다.</p><p></p><h2>2. Render 가입하기</h2><p>저는 Github에 연동하여 서비스를 배포할 생각이니 Github로 가입하려고 합니다. 다들 잘 하실테니 길게 적진 않겠습니다.</p><p></p><h2>3. Render에 배포하기</h2><p>상단의 New 버튼을 누른 후, Web Service를 선택합니다.</p><p></p><img src="https://image.until.blog/octoping/article/1718776600465" alt="until-584"><p>Git 레포지토리에서 가져오기 위해 <strong>Build and deploy from a Git Repository</strong>를 선택합시다. 그 후엔 배포할 레포지토리를 선택해주면 됩니다. 만약 본인의 레포지토리가 아니라 Organization의 레포지토리 등의 경우 레포지토리 주소를 입력해도 가능합니다.</p><p></p><img src="https://image.until.blog/octoping/article/1718776667030" alt="until-586"><p>마지막으로는 세부 설정들을 기입할 차례입니다. 이름, 리전, 배포 대상인 브랜치 등을 기입해줍니다. 중요한 것은, 스프링 서버이니만큼 Runtime을 Docker로 설정해야 한다는 건 빼먹으면 안됩니다!</p><p></p><p>잘 따라오셨다면 다음과 같은 화면이 뜨면서 배포가 완료됩니다!</p><p></p><img src="https://image.until.blog/octoping/article/1718776806315" alt="until-588"><p></p><h1>마무리하며</h1><p>Render 같은 서비스 덕분에, 정말 간단한 프로젝트 등을 진행하며 배포가 필요한 경우에도 아깝게 돈을 써야하는 등의 일이 많이 줄어들었습니다.</p><p>Render에서는 웹 서버 말고도 PostgreSQL, Redis 등의 다양한 서비스들도 무료로 지원하니, 다들 써보시길 바라겠습니다.</p><p></p>

공짜로 스프링 서버를 배포하고 배포 자동화도 경험해보자

Spring 서버 Render로 공짜로 배포해보기 (feat. Docker)

<p>언틸 서비스에는 블로그에 업로드되는 이미지들을 저장하기 위해 AWS의 S3 서비스를 이용하고 있다. 파일을 업로드하면 해당 파일의 이름에 따라 해당 파일에 액세스할 수 있도록 URL을 제공하고 있는데, 언틸에서는 따로 파일의 확장자를 지정하지 않고 저장하고 있었다.</p><p>덕분에 url이 이렇게 나오고 있었다.<br><code spellcheck="false">https://{언틸_S3_URL}/octoping/profile/1722161760968</code></p><p>물론 지금 생각해보면 왜 그랬을까 싶긴 한데... 열심히 개발하면서 아무 생각 없이 저질렀던 것 같다.</p><p></p><h1>코드</h1><pre spellcheck="false"><code class="language-kotlin">@Profile("real")
@Service
class S3ImageUploadService(
    private val s3Config: S3Config,
    private val imageDataSaver: ImageDataSaver,
    private val profileReader: ProfileReader,
) : ImageUploadService {
    override fun uploadImage(request: ImageUploadRequest): ImageUploadResult {
        val blog = profileReader.findById(request.blogId)
        val filePath = createFilePath(blog.username, request.fileType)
        val imgUrl = uploadImageAndGetUrl(filePath, request)
        
        // ...
    }

    private fun createFilePath(username: String, fileType: FileType): String {
        val fileName = System.currentTimeMillis().toString()
        return username + "/" + fileType.storePath + "/" + fileName
    }
}
</code></pre><p>다음이 해당 부분의 코드다.</p><p>블로그의 username과 파일의 타입 (프로필 사진인지, 아티클 사진인지 등)을 받아 저장될 path를 생성하는 함수가 보인다. 여기에서 <code spellcheck="false">fileName</code>은 현재 시각을 통해서 만들고 있는데. 보시다시피 확장자를 따로 삽입해주고 있지 않았다..</p><p>결국 이것들이 S3에 올라간 시점에서는 타입을 구분하기가 어려워진다. </p><p></p><h1>문제</h1><p>저장된 파일의 확장자가 없으니 S3의 url만 가지고는 어떤 파일인지를 알 수 없게 된다. 이것이 이미지인지, 동영상인지, 그냥 파일인지 알 수 없다. 물론 언틸의 경우 지금이야 이미지만 저장하고 있으니 괜찮지 않을까?</p><p></p><h2>WebP 변환 이슈</h2><p>이미지에도 종류가 여러 가지가 있다. jpg, png, webp, gif...</p><p>그 중 WebP는 구글이 웹페이지 로딩 속도를 높이기 위해 개발한 이미지 포맷인데, 기존 포맷들에 비해 용량을 크게 줄일 수 있어 많은 사이트들에서 웹 사이트의 로딩 속도를 향상시키기 위해 사용하고 있다.</p><p></p><p>그리고 보통 이미지의 WebP로의 변환은 <code spellcheck="false">CloudFront</code>의 <code spellcheck="false">Origin Response</code>에서 <code spellcheck="false">Lambda@Edge</code>를 통해 on-the-fly 방식으로 이루어지게 된다.</p><p></p><img src="https://image.until.blog/octoping/article/1729522382526.png" data-width="75%" data-align="center" alt="until-1840"><p>이 WebP로 변환하는 람다 함수에서는 <code spellcheck="false">Sharp</code>라는 라이브러리를 사용한다. 이 라이브러리는 다양한 확장자의 이미지를 지원하지만 그럼에도 지원하지 않는 이미지 포맷이 존재한다. (ex. BMP 파일)</p><p>따라서 WebP 변환을 진행하는 함수에서 확장자 검사를 진행해야 하는데, 앞서 소개한 상황에서는 확장자를 지니고 있지 않으니 다음을 진행할 수가 없다.</p><p></p><h1>해결</h1><pre spellcheck="false"><code class="language-kotlin">// Before
private fun createFilePath(username: String, fileType: FileType): String {
    val fileName = System.currentTimeMillis().toString()
    return username + "/" + fileType.storePath + "/" + fileName
}

// After
private fun createFilePath(username: String, fileType: FileType, contentType: String): String {
   val fileName = System.currentTimeMillis().toString()
   return username + "/" + fileType.storePath + "/" + fileName + "." + contentType.split("/")[1]
}</code></pre><p>다음과 같이 파일 이름에 확장자를 추가해주었다.</p><p><code spellcheck="false">MultipartFile</code>에서 넘어오는 <code spellcheck="false">contentType</code>은 <code spellcheck="false">image/png</code>와 같은 형식으로 주어지므로, <code spellcheck="false">contentType.split("/")[1]</code>와 같은 형식으로 파싱해주면 된다.</p><p></p><img src="https://image.until.blog/octoping/article/1729523218239.png" data-width="100%" data-align="center" alt="until-1841"><p>이제는 확장자가 잘 붙은 것을 볼 수 있다.. 😢<br>다시는 하지 말자 이런 실수</p>

S3에 파일을 업로드할 때는 꼭 확장자도 같이 붙여줍시다

S3에 파일을 업로드할 때 파일 이름에 확장자를 붙이지 않아 생긴 이슈 (feat. 이미지 최적화)

<h2>우리들의 패키지 구성 방법</h2><p>여러분의 패키지 구성법은 무엇인가요?</p><pre spellcheck="false"><code>// 도메인형
└─src
    ├─member
    │  ├─controller
    │  ├─repository
    │  └─service
    └─post
        ├─controller
        ├─repository
        └─service
// 레이어형
└─src
   ├─controller
   │  ├─member
   │  └─post
   ├─repostiory
   │  ├─member
   │  └─post
   └─service
      ├─member
      └─post</code></pre><p>패키지 구성법은 크게 2가지가 있는데, 이 중 도메인형에 대해 얘기해보려고 한다.</p><p></p><p></p><h2>API는 애석히도 여러 도메인에 걸친다</h2><pre spellcheck="false"><code>// 도메인형
└─src
   ├─member
   │  ├─controller
   │  ├─repository
   │  └─service
   └─post
      ├─controller
      ├─repository
      └─service</code></pre><p>다음과 같이 레이어를 구성할 경우, member와 관련된 api들은 <code spellcheck="false">/member/controller</code>에 들어가게 된다. 그런데, api는 애석히도 여러 도메인에 걸치는 경우가 많다.</p><p></p><p></p><p>예를 들어보자. 다음의 api들은 각각 어떤 컨트롤러에 들어가야 할까?</p><ul class="tight" data-tight="true"><li><p>특정 회원의 팔로워들의 글을 최신 순으로 모아서 보여주는 api</p></li><li><p>특정 글에 '좋아요'를 누른 회원의 목록을 모아서 보여주는 api</p></li></ul><p></p><p></p><p>특정 '회원'의 '팔로워'의 '글'을 최신 순으로 모아서 보여주는 api의 얘기를 해보자. 이 api는 회원(member), 팔로우(follow), 글(post)라는 세 가지 도메인에 걸쳐있다.</p><p></p><p></p><p>이렇게 된다면, <code spellcheck="false">MemberService</code> 혹은 <code spellcheck="false">PostService</code>는 3개의 다른 도메인의 의존성을 가지게 된다.</p><p>이런 기능들이 쌓이다보면, <code spellcheck="false">MemberService</code>는 정작 회원과 관련된 일을 하지 못하고 점점 비대해지게 된다. <br></p><p></p><h2>API는 도메인과 겸상하지 않는다</h2><p>API는 클라이언트의 요구사항이자 사용자의 유스케이스를 보여주는 계층이다. 글 작성 api, 글 수정 api 등등… 모두 유스케이스 아닐까?</p><p></p><p></p><p>도메인 로직은 영원하지만, 유스케이스는 바뀔 수 있다. ‘특정 회원의 팔로워들의 글을 최신 순으로 모아 보여주기’라는 유스케이스에 이건 <code spellcheck="false">Post</code>와 관련된 기능이라고 적어붙이는 것보다 더 나은 라벨링이 있지 않을까?</p><p></p><p></p><p>왜 우리는 이런 유스케이스에 도메인의 이름을 붙여야 하는걸까?</p><p>API를 도메인으로부터 분리해보면 어떨까.</p><p></p><p></p><h2>API와 Domain 분리하기</h2><pre spellcheck="false"><code>└─src
   ├─api
   │  ├─blog
   │  │      BlogMemberController.java
   │  │      BlogPostController.java
   │  │
   │  └─feed
   │          FeedMainPageController.java
   │          FeedRankingController.java
   │
   └─domain
      ├─member
      │  ├─repository
      │  └─service
      └─post
         ├─repository
         └─service</code></pre><p>‘특정 회원의 팔로워들의 글을 최신 순으로 모아 보여주기’는 피드 페이지의 기능이었다. 따라서 해당 api는 feed 폴더에 넣어주었다.</p><p></p><p></p><p>'이 API는 Post의 기능'이라고 적어넣기 보다, 조금 더 실제 유저의 요구사항에 맞게 패키지를 구성하여 더 명시적인 프로젝트 구조를 만들 수 있었다.</p><p></p><p></p><h2>컨트롤러에 로직이 쌓여요</h2><pre spellcheck="false"><code class="language-java">public class FeedMainPageController {
    private final MemberService memberService;
    private final PostService postService;

    @GetMapping("/follower-posts")
    public FollowerPostDTO getFollowerPosts(
        @RequestParam("memberId") Long memberId,
    ) {
        if(!memberService.isMemberExist(memberId)) {
            throw new MemberNotFoundException(memberId);
        }
        
        List&lt;Long&gt; = memberService.getFollowerIds(memberId);
        List&lt;Post&gt; posts = postService.getPostsByMemberIds(followerIds);

        return new FollowerPostDTO(posts);
    }
}</code></pre><p>이렇게 특정 서비스에서 다른 도메인의 로직을 처리하는 일을 막을 수 있게 되었다. 하지만 이렇게 되니 컨트롤러에서 여러 다른 도메인의 서비스를 호출하는 역할이 생겨버렸다.</p><p></p><p></p><p>명령 api와 같은 경우는 트랜잭션 등의 처리도 필요할텐데, 컨트롤러에서 이를 수행하는 건 좋지 않겠다.</p><p>이를 처리해주는 새로운 레이어를 만들어보는 것은 어떨까?</p><p></p><p></p><h2>Usecase 레이어로 비즈니스 로직 더 잘 드러내기</h2><pre spellcheck="false"><code>└─src
   ├─api
   │  └─feed
   │      ├─controller
   │      │      FeedMainPageController.java
   │      │      FeedRankingController.java
   │      │
   │      └─usecase
   │              FeedUseCase.java
   │
   └─domain
      ├─member
      │  ├─repository
      │  └─service
      └─post
         ├─repository
         └─service</code></pre><p>API가 구현하고자 하는 실제 유스케이스의 로직을 나타내는 것이니 usecase라는 이름으로 레이어를 개설했다.</p><p>컨트롤러 → 유스케이스 → 서비스 → 레포지토리와 같은, 4단계의 계층이 만들어진 셈이다.</p><p>이러면 코드가 어떻게 될까?</p><p></p><p></p><pre spellcheck="false"><code class="language-java">public class FeedMainPageController {
    private final FeedMainPageUseCase feedMainPageUseCase;

    @GetMapping("/follower-posts")
    public FollowerPostDTO getFollowerPosts(
        @RequestParam("memberId") Long memberId,
    ) {
        var posts = feedMainPageUseCase.getFollowerPosts(memberId)
        return new FollowerPostDTO(posts);
    }
}

public class FeedMainPageUseCase {
    private final MemberService memberService;
    private final PostService postService;

    public List&lt;Post&gt; getFollowerPosts(Long memberId) {
        if(!memberService.isMemberExist(memberId)) {
            throw new MemberNotFoundException(memberId);
        }

        List&lt;Long&gt; = memberService.getFollowerIds(memberId);
        List&lt;Post&gt; posts = postService.getPostsByMemberIds(followerIds);

        return new posts;
    }
}</code></pre><p></p><p></p><h2>멀티 모듈의 초석이 될 수도 있다</h2><p>지금까지 api와 domain의 패키지 구조를 분리해봤다.</p><p>이렇게 서로 성격이 다른 두 패키지를 분리했으니, 추후에 필요할 때에 이를 모듈로 나눠서 멀티 모듈 패키지를 구성해볼 수 있을 것 같다.</p><p></p><p></p><h2>멀티모듈이란?</h2><img src="https://image.until.blog/octoping/article/1717907997881" alt="until-428"><p>api, domain과 같은 파트를 각각 한 단위인 모듈로 나눈다면, 우리는 원하는 부분만 따로 jar파일로 빌드하여 한 모듈이 다른 모듈을 라이브러리처럼 사용할 수가 있다.</p><p></p><p></p><p>만약 그냥 api 서버만 있는게 아니라, 어드민 서버가 추가되야 한다면?</p><ul class="tight" data-tight="true"><li><p>어드민 서버 프로젝트 새로 파서 member, post 도메인의 코드를 복붙해오는 것은 조금 무식한 방법 아닐까.</p></li></ul><ul class="tight" data-tight="true"><li><p>어드민 모듈을 따로 만들어서 <strong>도메인 모듈을 라이브러리처럼 참고</strong>하면 되지 않을까?</p></li></ul><p></p><p></p><h2>마무리하며</h2><p>패키지와 레이어의 구성은 항상 정답이 있는게 아니다. 프로젝트가 간단하다면 컨트롤러 하나만으로 구성해볼 수도 있는 것이고, 프로젝트가 훨씬 복잡하다면 더 많은 레이어를 구성해볼 수도 있다.</p><p></p><p>이 아티클에서 다룬 내용도 꼭 정답임은 아니기 때문에, 이 아티클은 참고 하되 항상 프로젝트의 특성과 일하고 있는 조직의 상황에 맞게 알맞게 구성하는 것이 정답이라고 할 수 있겠다.</p><p></p><p></p><p></p><p></p>

레이어를 잘 설계해서 프로젝트를 깔끔하게 유지해보자

관습적 레이어 설정 탈피를 통해 프로젝트 개선하기

<pre spellcheck="false"><code class="language-java">public class ArticleService {
    private final ArticleRepository articleRepository;
    private final UserRepository userRepository;

    public Article writeArticle(ArticleWriteRequest request) {
        // ...
    }
}</code></pre><p>Layered Architecture와 함께 Spring으로 서비스를 구현하다보면 필연적으로 Repository 의존성이 생기게 된다. 그리하면 당연히 서비스의 테스트를 짜기 위해서는 Repository의 의존성을 주입해주어야 한다.</p><p></p><pre spellcheck="false"><code class="language-java">class ArticleServiceTest {
    @Test
    void writeArticleTest() {
        // given
        ArticleRepository repository = mock(ArticleRepository::class);
        when(repository.save(any())).thenReturn(
            Article.builder()
                .id(1)
                .title("title")
                .content("content")
                .build()
        );

        ArticleService articleService = new ArticleService(
            repository,
            mock(UserRepository::class)
        );
        
        // when
        articleService.writeArticle(
            new ArticleWriteRequest("title", "content")
        );

        // then
        assertThat(repository.findAll()).hasSize(1);
        assertThat(repository.findById(1).getTitle()).isEqualTo("title");
    }
}</code></pre><p>하지만 서비스의 테스트를 하기 위해 매번 <code spellcheck="false">@SpringBootTest</code>를 할 수 없는 노릇이고, 매번 이렇게 모킹을 할 경우 매번 <code spellcheck="false">when</code>을 통해 Repository의 동작을 작성해주어야 하므로 실제로 Service가 제대로 동작하는지를 확인하기 조금 까다롭다.</p><p></p><pre spellcheck="false"><code class="language-java">public class ArticleMockRepository implements ArticleRepository {
    private final Map&lt;Long, Article&gt; articleMap = new HashMap&lt;&gt;();

    public Article save(Article a) {
        articleMap.put(a);
        return a;
    }
    
    public Optional&lt;Article&gt; findById(long id) {
        return Optional.ofNullable(articleMap .get(id));
    }

    public List&lt;Article&gt; findAll() {
        return List.copyOf(articleMap.values());
    }

    public void clear() {
        map.clear();
    }
}</code></pre><p>그렇기 때문에 나는 Stub을 통해 진짜 객체를 넣어주는 것을 선호한다. 레포지토리는 HashMap을 통해 구현할 수 있으니!</p><p>하지만 Repository는 비즈니스 객체의 갯수만큼 존재할 것이고, 이걸 매번 다 짜려면 굉장히 귀찮은데.</p><p>그러니 제네릭을 활용하여 공통화를 해보자.</p><p></p><h1>제네릭을 사용해 공통화하기</h1><pre spellcheck="false"><code class="language-java">public class HashMapRepository&lt;T&gt; {
    private final Map&lt;Long, T&gt; map = new HashMap&lt;&gt;();

    protected void save(long id, T entity) {
        map.put(id, entity);
    }

    public Optional&lt;T&gt; findById(long id) {
        return Optional.ofNullable(map.get(id));
    }

    public List&lt;T&gt; findAll() {
        return List.copyOf(map.values());
    }

    // 원하는 조회 조건 생성용
    protected Optional&lt;T&gt; findBy(Predicate&lt;T&gt; predicate) {
        return map.values().stream()
                .filter(predicate)
                .findFirst();
    }

    protected List&lt;T&gt; findAllBy(Predicate&lt;T&gt; predicate) {
        return map.values().stream()
                .filter(predicate)
                .toList();
    }

    public void clear() {
        map.clear();
    }
}</code></pre><p>다음과 같이 <code spellcheck="false">HashMapRepository</code>를 구현할 수 있다. 이렇게 구현한다면 이제 각 도메인 별로 레포지토리를 만들기는 간단하다.</p><p></p><pre spellcheck="false"><code class="language-java">class ArticleMockRepository extends HashMapRepository&lt;Article&gt; implements ArticleRepository {
    @Override
    public Article save(Article article) {
        super.save(article.getId(), article);
        return article;
    }

    @Override
    public Optional&lt;Article&gt; findByAuthorId(long authorId) {
        return findBy(it -&gt; it.getAuthorId() == authorId);
    }
}</code></pre><p>다음과 같이 <code spellcheck="false">save</code>만 재정의해주면 된다.</p><p>만약 원하는 조회 조건이 필요하다면, <code spellcheck="false">findBy</code>, <code spellcheck="false">findAllBy</code>를 이용해서 원하는 조건을 <code spellcheck="false">Predicate </code>로 넣어주는 방식을 이용해서 추가해주면 된다.</p><p></p><h1>적용과 함께 마무리</h1><pre spellcheck="false"><code class="language-java">class ArticleServiceTest {
    @Test
    void writeArticleTest() {
        // given
        ArticleRepository repository = new ArticleMockRepository();

        ArticleService articleService = new ArticleService(
            repository,
            new UserMockRepository()
        );
        
        // when
        articleService.writeArticle(
            new ArticleWriteRequest("title", "content")
        );

        // then
        assertThat(repository.findAll()).hasSize(1);
        assertThat(repository.findById(1).getTitle()).isEqualTo("title");
    }
}</code></pre><p>꽤나 깔끔한 모양새로 테스트를 작성할 수 있게 됐다.</p><p></p><h1>구현해야 할 메소드가 너무 많아요</h1><img src="https://image.until.blog/octoping/article/1730861041484.png" data-width="75%" data-align="center" alt="1985"><p>이런 식으로 Stub 객체를 만드려고 했더니 <code spellcheck="false">ArticleRepository</code> 안의 인터페이스가 너무 많아서 모두 구현하기 힘들 수도 있다. ( <code spellcheck="false">JpaRepository</code> 를 그대로 상속받아서 사용 중인 경우 특히 그렇다)</p><p>하지만 그렇다고 Stub을 포기하고 Mock을 시도하는 것은, 테스트 코드가 알려주는 코드 악취를 모킹이라는 강력한 도구로 감추고 숨는 것에 지나지 못한다.</p><p>그럴 때에는 설계를 조금 고쳐보는 것은 어떨까? 이전 블로그의 글을 링크 걸어본다.</p><a data-type="bookmark" href="https://octoping.tistory.com/27" target="_blank"><div class="content"><div><div class="title">Service 계층에 적당한 무게의 Repository 의존성 지우기</div><div class="description">시작하기 전에 계층형 아키텍처에서 개발을 진행할 때 우리는 보통 Controller, Service, Repository 이렇게 3개의 계층의 구조로 짜게 된다. 이 3개의 계층은 Controller에서 Service로, Service에서 Repository로 의존성이 흐르는데, 이 중에서도 Repository 부분을 보통 JpaRepository나 Mybatis mapper 같은 클래스로 직접 의존성으로 사용하는 경우가 많다. 하지만 Service 계층에서 바로 이런 클래스들에 의존하게 될 경우 몇 가지 문제가 생기게 된다. 이 글에서는 쉬운 예제 작성을 위해 JpaRepository를 사용하겠다. Service에서 바로 JpaRepository를 의존할 때 생기는 문제 Service 계층이 세부 사항..</div></div><div class="href">https://octoping.tistory.com/27</div></div><img src="https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdoLA4o%2Fbtr91zZpY94%2FcfEYJzMiizQCm0JDnuHq31%2Fimg.png"></a>

반복되는 Repository Stub 코드 줄이기

HashMap으로 Repository 모킹 간편하게 하기

<p>서버 프로젝트를 진행하다보면 숨겨야 할 키들이 다양하게 생기게 된다.</p><ul><li><p>DB URL, username, password</p></li><li><p>외부 API 키</p></li><li><p>jwt 키</p></li><li><p>oAuth 클라이언트 시크릿</p></li><li><p>등등..</p></li></ul><p>그리고 이런 요소들은 보통 다음과 같이 <code spellcheck="false">application.yml</code> 파일에 작성된다.</p><pre spellcheck="false"><code class="language-yaml">  datasource:
    url: {url}
    username: {username}
    password: {password}
    driver-class-name: {driver}</code></pre><p>프로젝트의 코드에 이런 비밀번호가 적혀있다면 타인에게 소스코드를 공개할 수 없을 뿐 아니라, 보안 상 문제가 생길 수도 있다.</p><p>물론 어플리케이션에서 환경변수로 입력받을 수도 있다. 하지만 이런 키들이 많아질 수록 설정해야하는 환경 변수의 양도 너무 많아지고 번잡해지게 된다.</p><p></p><h1>Jasypt로 프로퍼티 암호화하기</h1><p><a target="_blank" rel="noopener noreferrer nofollow" href="http://www.jasypt.org/">http://www.jasypt.org/</a></p><p>Jasypt는 개발자가 암호화 작동 방식에 대한 깊은 지식이 없어도 최소한의 노력으로 프로젝트에 기본적인 암호화 기능을 추가할 수 있는 자바 라이브러리다.</p><p>홈페이지에서 직접 스프링, 스프링 시큐리티와 통합하기 편리하다고 적혀있는데, 스프링 부트가 아니라 스프링에 대해 설명이 적혀있는 관계로 조금 설정이 복잡하다.<br><a target="_blank" rel="noopener noreferrer nofollow" href="http://www.jasypt.org/spring31.html">http://www.jasypt.org/spring31.html</a></p><p>따라서 스프링 부트 버전으로 확인해보려고 한다.</p><p></p><h2>Spring Boot와 통합하기</h2><a data-type="bookmark" href="https://github.com/ulisesbocchio/jasypt-spring-boot" target="_blank"><div class="content"><div><div class="title">GitHub - ulisesbocchio/jasypt-spring-boot: Jasypt integration for Spring boot</div><div class="description">Jasypt integration for Spring boot. Contribute to ulisesbocchio/jasypt-spring-boot development by creating an account on GitHub.</div></div><div class="href">https://github.com/ulisesbocchio/jasypt-spring-boot</div></div><img src="https://opengraph.githubassets.com/5a1525ebf0a112f523ebf883aa65198ec94f17dea82658022b70ef7af28783b8/ulisesbocchio/jasypt-spring-boot"></a><p>다음의 멋진 깃허브 레포지토리를 참고한 내용이다.</p><p></p><h3>라이브러리 추가하기</h3><pre spellcheck="false"><code class="language-kotlin">implementation 'com.github.ulisesbocchio:jasypt-spring-boot-starter:3.0.5'</code></pre><p>먼저 이 플러그인을 <code spellcheck="false">build.gradle</code>에 추가해준다.</p><p></p><h3>Jasypt 설정 추가하기</h3><pre spellcheck="false"><code class="language-java">@Configuration
@EnableEncryptableProperties
public class JasyptConfig {
    @Value("${jasypt.encryptor.password}")
    private String password;

    @Bean("jasyptStringEncryptor")
    public StringEncryptor stringEncryptor() {
        PooledPBEStringEncryptor encryptor = new PooledPBEStringEncryptor();
        SimpleStringPBEConfig config = new SimpleStringPBEConfig();
        config.setPassword("password");
        config.setAlgorithm("PBEWITHHMACSHA512ANDAES_256");
        config.setKeyObtentionIterations("1000");
        config.setPoolSize("1");
        config.setProviderName("SunJCE");
        config.setSaltGenerator(new RandomSaltGenerator());
        config.setIvGenerator(new RandomIvGenerator());
        encryptor.setConfig(config);

        return encryptor;
    }
}</code></pre><p>다음과 같이 Config 파일을 추가해준다.<br>(깃허브 레포지토리의 공식 설명에 적혀있는 코드에서, 몇 중복 설정이나 불필요한 리플렉션을 대체했다)</p><p></p><h3>프로퍼티 암호화하기</h3><p>이제 프로퍼티를 암호화할 시간이다. 암호화는 다음 주소에서 사용할 수 있다.</p><a data-type="bookmark" href="https://www.devglan.com/online-tools/jasypt-online-encryption-decryption" target="_blank"><div class="content"><div><div class="title">Jasypt Encryption and Decryption Online</div><div class="description">Jasypt online free tool for encryption and decryption.This tool supports one way and two way password encryptor using Jasypt as well as matching encrypted password using Jasypt. </div></div><div class="href">https://www.devglan.com/online-tools/jasypt-online-encryption-decryption</div></div><img src="https://destatic.blob.core.windows.net/images/logo.webp"></a><pre spellcheck="false"><code class="language-yml">cloud:
  aws:
    region: ap-northeast-2
    credentials:
      access-key: ABCDEFGHIJKLMNOP</code></pre><p>다음과 같은 설정이 있었다고 가정해보자.</p><img src="https://image.until.blog/octoping/article/1729676336649.png" data-width="100%" data-align="center" alt="1867"><p>다음과 같이 <code spellcheck="false">Enter Plain Text To Encrypt</code> 부분에 암호화 하고 싶은 텍스트를 넣는다. 그 후 Type은 <code spellcheck="false">Two Way Encryption</code>을 지정해주고 (스프링에서 다시 복호화해서 쓸 수 있어야 하니..) <code spellcheck="false">Enter Secret Key</code>에 내가 원하는 암호화 키를 적어주자.</p><p>마무리로 암호화 버튼을 눌러주면 내가 지정해준 암호화 키로 풀 수 있는 암호화된 문자열이 생성된다.</p><pre spellcheck="false"><code class="language-yaml">cloud:
  aws:
    region: ap-northeast-2
    credentials:
      access-key: ENC(Q8X55qnH5/9b1H+9yWOdFXqqkbFvgsjjn8FVrv9xazg=)</code></pre><p>이 문자열을 다음과 같이 대체해주자. <code spellcheck="false">ENC(암호화 결과)</code> 와 같이 ENC()로 감싸서 넣어주면 된다.</p><p></p><h3>환경변수로 암호화 키 지정하기</h3><p>마지막으로, 암호화에 사용했던 시크릿 키를 환경변수로 넣어주자.</p><p>앞에서 <code spellcheck="false">@Value("${jasypt.encryptor.password}")</code>라고 코드를 작성했는데, 이와 같이 <code spellcheck="false">jasypt.encryptor.password</code>를 환경변수로 지정해주면 자동으로 해당 값이 @Value에 들어가게 된다.</p><p></p><img src="https://image.until.blog/octoping/article/1729913693066.png" data-width="100%" data-align="center" alt="1885"><p>인텔리제이 기준으로 다음과 같이 구성 편집에 들어가자.</p><img src="https://image.until.blog/octoping/article/1729913867231.png" data-width="100%" data-align="center" alt="1886"><p>그 다음 이렇게 자기가 사용했던 시크릿 키를 환경변수로 지정해주면 된다.</p><p>그러면 끝!</p><p></p><h3>마무리</h3><p>설정들을 전부 암호화 완료했다면, 서버를 구동해서 제대로 동작하는지 확인하여 마무리해보자</p>

백엔드도 public 레포지토리가 가능하다!!

Jasypt를 이용해서 프로퍼티의 시크릿 유출을 보호하기

CI/CD

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

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

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

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

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

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

들어가며

Java가 왜 느릴까?

Cold Start 문제

언어 특성

환경 설정

속도 비교해보기

마무리하며