🖥 백엔드

<h1>들어가기 앞서</h1>이런 상황이 있다고 합시다. 저는 API를 만들고 있고, request param으로 date값을 받고 싶습니다.<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>이렇게 짜봤습니다.그런데 여기에 date 값이 오지 않았을 때 기본값으로 오늘 날짜를 넣고 싶을 경우, 어떻게 해야 할까요?<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>이렇게 짤 수 있다면 좋겠지만, 어노테이션의 속성 값으로는 상수밖에 들어갈 수 없어 오류가 나게 됩니다. 이럴 때엔 어떻게 하면 좋을까요?<h1>SpEL</h1>먼저 Spring Expression Language (SpEL)에 대해 알아봅시다. 공식문서가 잘 되어 있는 스프링답게, 여기에서 자세한 내용을 살펴볼 수 있는데요.<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>다 읽어보기엔 시간이 없으니 간략하게 알아봅시다.Spring 표현식 언어 (SpEL)은 런타임에 객체 그래프를 쿼리하고 조작할 수 있도록 지원하는 표현식 언어라고 합니다. 이 언어는 다음과 같은 기능을 제공한다고 해요.<ul><li>리터럴 표현식</li><li>Boolean, 관계 연산자</li><li>정규 표현식</li><li>클래스 표현식</li><li>속성, 배열, 리스트, 맵에 액세스하기</li><li>메소드 호출</li><li>관계형 연산자</li><li>할당</li><li>생성자 호출</li><li>빈 참조</li><li>배열 생성</li><li>인라인 리스트</li><li>삼항 연산자</li><li>변수</li><li>유저가 정의한 함수</li><li>컬렉션 프로젝션</li><li>컬렉션 선택</li><li>템플릿 표현식</li></ul>많죠? 하지만 이 글에서는 이 중 몇 가지만 알아보려고 합니다.<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>SpEL을 시험해보고 싶은 경우, 다음과 같이 사용 가능합니다. 다음 코드를 실행해보면 message 변수에는 <code spellcheck="false">Hello World</code>가 담기게 됩니다.만약 실행하려는 SpEL의 문법이 맞지 않을 경우 <code spellcheck="false">parseExpression</code> 함수에서는 <code spellcheck="false">ParseException</code>, <code spellcheck="false">getValue</code> 함수에서는<code spellcheck="false">EvaluationException</code> 이 발생할 수 있다고 하네요.<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>앞에서 언급했듯, SpEL은 함수 호출도 가능합니다. 다음을 실행하면 <code spellcheck="false">Hello World</code> 리터럴 문자열의 concat 함수를 실행하게 되어 <code spellcheck="false">Hello World!</code> 와 같은 결과를 얻어낼 수 있습니다. 그렇다면 다음과 같이 사용할 수 있다는 예제와 함께 쭉쭉 넘어가볼까요.<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>위에서 언급했듯이, 생성자를 호출하는 것도 가능합니다.<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>다음과 같이 특정 객체 인스턴스의 속성을 검색하는 것도 가능합니다.<h3>특정 타입 정의하기</h3>특별한 연산자인 'T' 를 사용하면 특정 클래스의 타입을 지정해줄 수 있어요.<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>이렇게 static 함수를 호출해주는 것도 가능하답니다.<h2>어노테이션과 함께 사용하기</h2>'들어가기 앞서'의 의문증을 해소하는 데에 한 걸음 가까워졌어요.SpEL을 BeanDefinitions을 정의하는 데에 사용할 수도 있습니다. XML로 하는 방식, 어노테이션으로 하는 방식이 있는데, 저희는 스프링 부트의 시대를 살고 있으므로 어노테이션을 통해 사용하는 법을 알아봅시다.<h3>@Value</h3><code spellcheck="false">@Value</code> 어노테이션을 필드, 메서드 및 메서드/생성자 매개변수에 배치해서 기본값을 지정할 수 있다. 이 때 사용하는 표현식에 <code spellcheck="false">#{}</code>을 붙여주어야 한다!<pre spellcheck="false"><code class="language-java">@Value("#{15 + 57}") // 72
private int sktt1;

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

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

Spring Expression Language (SpEL)을 알아보자

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

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1716115237924" alt="until-88">react-query에서 useQuery를 사용하면 staleTime과 gcTime 을 이용해 데이터를 효율적으로 다룰 수 있다. 둘의 차이점을 알아보자.<h2>staleTime</h2><blockquote><ul><li>The time in milliseconds after data is considered stale. This value only applies to the hook it is defined on.</li><li>If set to <code spellcheck="false">Infinity</code>, the data will never be considered stale</li></ul></blockquote><code spellcheck="false">staleTime</code>은 불러온 데이터가 fresh한 시간을 나타낸다. defaultValue는 0으로, 리액트 쿼리에서는 기본적으로 불러온 데이터는 fresh하지 않다고 간주한다.기본 값을 사용하게 된다면 해당 hook을 사용하는 컴포넌트가 mount 될 때마다 data fetching을 시도할 것이다.데이터의 stale여부에 따라서 적절하게 조절해줌으로써 최적화 해줄 수 있다.아래 예시는 until.lbog 에서 사용하는 특정 블로그 정보를 가져오는 훅이다.<pre spellcheck="false"><code class="language-typescript">import { useSuspenseQuery } from '@tanstack/react-query'
import { GetBlogResponse, createGetBlog } from 'src/apis/blog/[username]'
import { queryKeys } from 'src/constants/queryKeys'

const useBlogQuery = () =&gt; {
 const username = useUsername();
 const { data } = useSuspenseQuery&lt;GetBlogResponse&gt;({
 queryKey: queryKeys.blog.username.body(username),
 queryFn: createGetBlog(username),
 staleTime: Infinity,
 })
 return data
}

export default useBlogQuery</code></pre>staleTime을 <code spellcheck="false">Infinity</code>로 설정한 이유는 무엇일까?기본적으로 블로그 정보는 서버사이드에서 불러온 이후 변경되는 경우가 거의 없다. 해당 훅은 블로그에서 전반적으로 사용하고 있기 때문에 staleTime이 0일 경우에는 화면을 전환될 때마다 비효율적인 데이터 패칭이 계속해서 일어날 것이라고 판단하였다.프로필 수정, 팔로우, 팔로잉와 같이 데이터가 더이상 fresh하지 않은 경우에는 <code spellcheck="false">queryClient.invalidateQuery</code>를 통해 명시적으로 갱신해줌으로써 해결할 수 있다.물론 위 방식의 경우 외부적인 요인에 의해 특정 블로그 정보가 변경되는 경우에는 해당 블로그에 재 접속하지 않는 이상 갱신되지 않을 수 있다는 점은 감안해야한다.아래 예시는 게시글 리스트를 가져오는 훅이다.<pre spellcheck="false"><code>import { useSuspenseInfiniteQuery } from '@tanstack/react-query'
import { queryKeys } from 'src/constants/queryKeys'
import {
 GetArticlesParams,
 createGetUserArticles,
} from 'src/apis/blog/[username]/articles'
import useBlogData from 'src/blog/hooks/useBlogData'
import useArticleParams from './useArticleParams'

const useArticlesInfiniteQuery = () =&gt; {
 const blogData = useBlogData()
 const { order, query, tag } = useArticleParams()

 const params: GetArticlesParams = {
 order: order || undefined,
 query: query || undefined,
 tagSlug: tag || undefined,
 }

 const { data, ...infiniteQuery } = useSuspenseInfiniteQuery({
 queryKey: queryKeys.blog.username.articles.list(blogData.username, params),
 queryFn: async ({ pageParam }) =&gt; {
 const getUserArticles = createGetUserArticles(blogData.username)

 return await getUserArticles({ page: pageParam, ...params })
 },
 initialPageParam: 0,
 getNextPageParam: (data) =&gt; (data.hasMore ? data.page + 1 : undefined),
 })

 if (!data) throw new Error('Suspense Error')

 return { data, ...infiniteQuery }
}

export default useArticlesInfiniteQuery
</code></pre>위 훅에서는 반대로 <code spellcheck="false">staleTime</code>을 설정하지 않고 기본값(0)을 사용했다.그 이유는 훅의 영향 범위가 <code spellcheck="false">useBlogQuery</code> 와 같이 전반적인 블로그 페이지에서 사용되는 것이 아닌 하나의 특정된 페이지에서만 사용하기에 때문이다<h2>gcTime (cacheTime)</h2><blockquote><ul><li>The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used.</li></ul></blockquote><code spellcheck="false">gcTime</code> 은 데이터가 사용되지 않는 상황에서 memory에 유지될 수 있는 시간을 의미하고, defaultValue는 클라이언트 사이드에서는 5분, 서버사이드에서는 Infinity로 지정된다.일반적으로 클라이언트 사이드에서 해당 값을 변경하는 경우는 크게 없었던 것 같다.데이터 패칭에 직접적인 영향을 주지 않기 때문이다.다만 서버사이드에서는 Infinity로 설정되기 때문에 얘기가 달라진다. 메모리에 계속해서 데이터가 누적되는 경우에는 해당 값을 적절히 지정해 주는 것이 필요할 것 같다.<h2>결론</h2>어떻게 잡아주더라도 http 통신을 하는 웹페이지 안에서 데이터는 불일치하는 경우는 발생할 수 밖에 없다.데이터의 특성에 따라 적절한 캐싱 시간을 조절함으로써 불일치하는 경우를 최소화 할 수 있도록 하는것이 최선인 것 같다.

react-query에서 useQuery를 사용하면 staleTime과 gcTime 을 이용해 데이터를 효율적으로 다룰 수 있다. 둘의 차이점을 알아보자.staleTimeThe time in milliseconds after data is considered stale. This value only applies to the hook it is define