<h1>이 글은…</h1><blockquote><p>이 글은 IntelliJ를 처음 사용하는 사람, 그리고 IntelliJ를 통해 Spring Boot 프로젝트를 처음 만드는 사람들을 위해서 작성되었다. (=나다.)</p><p>작성자가 다시 보기 위한 글이니 두서가 없어도 양해 바란다.</p><p>또, 기본적으로 Ultimate를 기준으로 한다.</p></blockquote><h1>IntelliJ 설치</h1><p>인텔리제이는<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.jetbrains.com/idea/?_gl=1*1x5ogyx*_gcl_au*MTQ3NjU3MTk4LjE3MTkzODgyMTE.*_ga*MjA2OTU2NDYyNS4xNzE5Mzg4MjA3*_ga_9J976DJZ68*MTcxOTg3OTY3NS4yLjEuMTcxOTg4MTkzOC41MC4wLjA."> 다음 링크</a>에서 설치해주자. </p><p>해당 링크로 들어가면 아래와 같은 화면이 뜰텐데, 여기서 다운로드를 눌러주면 알아서 사이트가 운영체제를 인식하고 알맞는 다운로드 파일이 있는 링크로 보내준다. 그대로 다운로드 해주자.</p><img src="https://image.until.blog/brightdawn/article/1719882108188" alt="until-693"><p>다운로드는 금방 진행된다. 약 2분 가량 소요되며, 다운로드가 완료되면 실행하자.</p><p></p><h2>설치 파일 실행</h2><p>실행하면 다음과 같은 창이 뜰 것이다.</p><p>쭉쭉 진행해주자.</p><img src="https://image.until.blog/brightdawn/article/1719882311865" alt="until-694"><img src="https://image.until.blog/brightdawn/article/1719882339057" alt="until-695"><p>나는 아래와 같이 전부 추가해주었다. 그 뒤로는 달리 선택할 것 없이 설치를 진행하면 된다.</p><img src="https://image.until.blog/brightdawn/article/1719882376757" alt="until-696"><p>이 뒤에 <code spellcheck="false">Import</code> 할지 말지를 물어보는데 나는 <code spellcheck="false">skip</code> 해주었다. </p><p>그럼 아래와 같은 화면을 볼 수 있는데, 그냥 새 프로젝트를 만들어주자.</p><img src="https://image.until.blog/brightdawn/article/1719883095803" alt="until-697"><p>그리고 다음과 같이 설정해주자.</p><p>사실상 건드릴 것은 거의 없다. <code spellcheck="false">이름</code>, <code spellcheck="false">위치</code>, <code spellcheck="false">Git 저장소 생성</code>, <code spellcheck="false">그룹</code>, <code spellcheck="false">JDK</code> 정도?</p><img src="https://image.until.blog/brightdawn/article/1719883133462" alt="until-698"><p>다음으로 넘어가고, 나는 이 정도 선택하였다.</p><img src="https://image.until.blog/brightdawn/article/1719883307168" alt="until-699"><h3>Spring Boot DevTools</h3><blockquote><p>Spring Boot Application을 개발하고 디버깅하는데 도움이 되는 도구 모음.</p></blockquote><ul><li><p>개발 단계에서 세이브 시 변경사항이 있다면 자동으로 다시 로드되는 기능을 제공한다.</p><ul><li><p>유사 기능: 라이브 서버 등</p></li></ul></li><li><p>자세한 것은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.spring.io/spring-boot/docs/1.5.16.RELEASE/reference/html/using-boot-devtools.html">해당 링크</a>를 참고</p></li></ul><h3>Lombok</h3><blockquote><p>어노테이션을 기반으로 코드를 자동완성 해주는 라이브러리.</p></blockquote><ul><li><p><code spellcheck="false">@Getter</code>, <code spellcheck="false">@Setter</code>, <code spellcheck="false">@Data</code>  등을 사용할 수 있다.</p></li><li><p>훨씬 간단하게 세팅할 수 있고, 코드의 길이가 확실히 줄어든다.</p></li></ul><h3>Spring Web</h3><blockquote><p>주로 RESTful 웹 애플리케이션 및 일반적인 웹 애플리케이션 개발에 사용. HTTP 요청과 응답을 처리하는 데 중점을 둠</p></blockquote><ul><li><p>REST API를 쉽게 개발할 수 있는 기능을 제공</p></li><li><p><code spellcheck="false">@RestController</code>, <code spellcheck="false">@RequestMapping</code> 등의 애너테이션을 사용하여 RESTful 엔드포인트를 정의</p></li></ul><h3>Spring Web Service</h3><blockquote><p>SOAP 기반의 웹 서비스 개발에 사용. XML 메시지 처리와 WSDL 기반의 서비스 계약을 중점.</p></blockquote><ul><li><p>WSDL (Web Services Description Language) 파일을 사용하여 웹 서비스 계약을 정의</p></li><li><p>스키마 기반의 XML 메시지를 처리</p></li><li><p>XML 메시지의 유효성 검사, 변환, 처리 등을 지원</p></li></ul><h2>프로젝트 생성</h2><p>프로젝트 생성을 누르면 아래와 같이 뜬다. 바로 뜨지 않을 경우 조금 기다려주면 된다.</p><img src="https://image.until.blog/brightdawn/article/1719890999592" alt="until-700"><p>이후부터는 이클립스와 유사하게 개발하면 되는 듯 하다.</p><p></p><hr><h2>만일 Ultimate 버전이 아니라면</h2><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://spring.io/quickstart">해당 사이트</a>를 이용하여 스프링 부트 프로젝트를 만들자.</p>

이클립스로 개발하다가 IntelliJ로 Spring Boot를 개발하려는 사람들에게

IntelliJ로 Spring Boot를 처음 사용할 때

DevTools

<h3>코딩 테스트 준비 일지 2 일차</h3><ul class="tight" data-tight="true"><li><p>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://programmers.co.kr/">프로그래머스</a></p></li><li><p>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/42747">H-Index</a></p></li><li><p>난이도 : 중</p></li></ul><h3>문제</h3><p>H-Index는 과학자의 생산성과 영향력을 나타내는 지표입니다. 어느 과학자의 H-Index를 나타내는 값인 h를 구하려고 합니다. 위키백과<a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/42747#fn1">1</a>에 따르면, H-Index는 다음과 같이 구합니다.</p><p>어떤 과학자가 발표한 논문 <code spellcheck="false">n</code>편 중, <code spellcheck="false">h</code>번 이상 인용된 논문이 <code spellcheck="false">h</code>편 이상이고 나머지 논문이 h번 이하 인용되었다면 <code spellcheck="false">h</code>의 최댓값이 이 과학자의 H-Index입니다.</p><p>어떤 과학자가 발표한 논문의 인용 횟수를 담은 배열 citations가 매개변수로 주어질 때, 이 과학자의 H-Index를 return 하도록 solution 함수를 작성해주세요.</p><h5>제한사항</h5><ul class="tight" data-tight="true"><li><p>과학자가 발표한 논문의 수는 1편 이상 1,000편 이하입니다.</p></li><li><p>논문별 인용 횟수는 0회 이상 10,000회 이하입니다.</p></li></ul><h5>입출력 예</h5><p>citations return [3, 0, 6, 1, 5] 3</p><h5>입출력 예 설명</h5><p>이 과학자가 발표한 논문의 수는 5편이고, 그중 3편의 논문은 3회 이상 인용되었습니다. 그리고 나머지 2편의 논문은 3회 이하 인용되었기 때문에 이 과학자의 H-Index는 3입니다. </p><h3>문제 풀이 접근</h3><p>이 문제를 처음 접했을 때, 정확히 어떻게 접해야하는지, H Index가 무엇을 의미하는지 이해하지 못했다.<br>그저 아! 원소를 하나 찝어서 이 수 기준으로 이상 이하로 갯수 분리해서 비교하면 쉽게 풀리겠지! 가 맨 처음 접근이었다. <br>이 문제를 풀기 위해 해야할 접근 방법이 하나 있는데, 원소의 수는 인용된 수임을 잊어선 안된다.<br>문제를 풀다보니 맨 앞에 있는 3이 답이고, 이게 논문의 편수로 착각하고 문제를 풀었는데, 논문의 수와 인용된 수를 분리해서 생각해야한다.<br><br>문제를 풀기위한 플로우는 아래와 같다.<br>1. 오름차순으로 정렬한다. <br>2. 논문 수의 제한은 0 &lt; n &lt; 1000 이다.<br>3. 1000 까지 순회돌려서 H Index 뽑아내자.</p><p>1번의 오름차순으로 정렬한다 =&gt; H Index의 최댓값을 뽑기 위함이다.<br>2,3번의 논문수 제한 1000이라서 for문으로 1000까지 돌려서 H Index를 뽑았다.</p><h3>작성 코드 ( C# )</h3><pre spellcheck="false"><code>using System;

public class Solution
{
    public int solution(int[] citations)
    {
        int answer = 0;
        Array.Sort(citations, (a, b) =&gt;
        {
            return a.CompareTo(b);
        });

        for (int i = 0; i &lt; 1000; i++)
        {
            int[] getReference = Array.FindAll(citations, rhs =&gt; rhs &gt;= i); 
            int getRefCnt = getReference.Length;

            int[] getBalance = Array.FindAll(citations, rhs =&gt; rhs &lt; i);
            int getBalanceCnt = getBalance.Length;

            if (i &lt;= getRefCnt &amp;&amp; i &gt;= getBalanceCnt)
            {
                answer = i;
            }
        }

        return answer;
    }
}</code></pre><h3>다른 방식의 문제 풀이 원리 </h3><p>다른 방식의 문제 풀이는 이렇게 되는 방법도 있는 것 같다 .<br>origin 입력을 sort 처럼 오름차순으로 정렬한다.<br>index i 를 하나씩 픽해서 그 앞의 인덱스 갯수와 비교를 하면 i 원소의 기준 이상 이하가 분리가 된다.<br>이것으로 수 비교를 하여 H Index를 뽑아내는 방식도 있다.</p><img src="https://image.until.blog/sin0105/article/1716826551909" alt="until-312"><h3>코드 작성 ( C# )</h3><pre spellcheck="false"><code>public static int solution(int[] citations) 
{
        int hindex = 0;
        Arrays.sort(citations);

        for (int i = 0; i &lt; citations.length; i++) {
            if(citations[i] &gt;= citations.length-i){
                idx = citations.length-i;
                break;
            }
        }

        return hindex;
}</code></pre><h3>참조 블로그 </h3><ul class="tight" data-tight="true"><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@ka0ka0ka/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-H-Index-%EC%A0%95%EB%A0%AC">HMS.log</a></p><ul class="tight" data-tight="true"><li><p>다른 방식의 문제풀이 및 코드 참조</p></li></ul></li></ul><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>

코딩테스트 항해99 클럽 - 2일차 

[코딩테스트 일지 - 99클럽] 2일차 - H Index

C++ Code

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1716115237924" alt="until-88"><p>react-query에서 useQuery를 사용하면 staleTime과 gcTime 을 이용해 데이터를 효율적으로 다룰 수 있다. 둘의 차이점을 알아보자.</p><h2>staleTime</h2><blockquote><ul><li><p>The time in milliseconds after data is considered stale. This value only applies to the hook it is defined on.</p></li><li><p>If set to <code spellcheck="false">Infinity</code>, the data will never be considered stale</p></li></ul></blockquote><p><code spellcheck="false">staleTime</code>은 불러온 데이터가 fresh한 시간을 나타낸다. defaultValue는 0으로, 리액트 쿼리에서는 기본적으로 불러온 데이터는 fresh하지 않다고 간주한다.</p><p>기본 값을 사용하게 된다면 해당 hook을 사용하는 컴포넌트가 mount 될 때마다 data fetching을 시도할 것이다.</p><p>데이터의 stale여부에 따라서 적절하게 조절해줌으로써 최적화 해줄 수 있다.</p><p>아래 예시는 until.lbog 에서 사용하는 특정 블로그 정보를 가져오는 훅이다.</p><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><p>staleTime을 <code spellcheck="false">Infinity</code>로 설정한 이유는 무엇일까?</p><p>기본적으로 블로그 정보는 서버사이드에서 불러온 이후 변경되는 경우가 거의 없다. 해당 훅은 블로그에서 전반적으로 사용하고 있기 때문에 staleTime이 0일 경우에는 화면을 전환될 때마다 비효율적인 데이터 패칭이 계속해서 일어날 것이라고 판단하였다.</p><p>프로필 수정, 팔로우, 팔로잉와 같이 데이터가 더이상 fresh하지 않은 경우에는 <code spellcheck="false">queryClient.invalidateQuery</code>를 통해 명시적으로 갱신해줌으로써 해결할 수 있다.</p><p>물론 위 방식의 경우 외부적인 요인에 의해 특정 블로그 정보가 변경되는 경우에는 해당 블로그에 재 접속하지 않는 이상 갱신되지 않을 수 있다는 점은 감안해야한다.</p><p>아래 예시는 게시글 리스트를 가져오는 훅이다.</p><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><p>위 훅에서는 반대로 <code spellcheck="false">staleTime</code>을 설정하지 않고 기본값(0)을 사용했다.</p><p>그 이유는 훅의 영향 범위가 <code spellcheck="false">useBlogQuery</code> 와 같이 전반적인 블로그 페이지에서 사용되는 것이 아닌 하나의 특정된 페이지에서만 사용하기에 때문이다</p><h2>gcTime (cacheTime)</h2><blockquote><ul><li><p>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.</p></li></ul></blockquote><p><code spellcheck="false">gcTime</code> 은 데이터가 사용되지 않는 상황에서 memory에 유지될 수 있는 시간을 의미하고, defaultValue는 클라이언트 사이드에서는 5분, <strong>서버사이드에서는 Infinity</strong>로 지정된다.</p><p>일반적으로 클라이언트 사이드에서 해당 값을 변경하는 경우는 크게 없었던 것 같다.</p><p>데이터 패칭에 직접적인 영향을 주지 않기 때문이다.</p><p>다만 서버사이드에서는 Infinity로 설정되기 때문에 얘기가 달라진다. 메모리에 계속해서 데이터가 누적되는 경우에는 해당 값을 적절히 지정해 주는 것이 필요할 것 같다.</p><h2>결론</h2><p>어떻게 잡아주더라도 http 통신을 하는 웹페이지 안에서 데이터는 불일치하는 경우는 발생할 수 밖에 없다.</p><p>데이터의 특성에 따라 적절한 캐싱 시간을 조절함으로써 불일치하는 경우를 최소화 할 수 있도록 하는것이 최선인 것 같다.</p><p></p><p></p><p></p><p></p>

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

react-query의 staleTime과 gcTime

<img src="https://image.until.blog/morethanmin/article/1715876172847" alt="until-47"><blockquote><p>이 글은 기본적인 react-hook-form의 사용방법을 설명하고 있지 않습니다.</p></blockquote><p>리액트에서 폼을 다룰 때 빼놓을 수 없는 react-hook-form. (최근에 확인해보니 토스가 스폰서더라..)</p><p>react-hook-form을 사용하면서 watch를 통해 values를 가져와 계산하는 컴포넌트를 만들었는데, useForm을 사용하는 컴포넌트 전체가 리렌더링 되면서 퍼포먼스가 구려지는 이슈가 있어서 원인을 찾아보았다.</p><h2>watch API</h2><p>watch란 무엇일까? 공식문서를 확인해보자.</p><blockquote><p>This method will watch specified inputs and return their values. It is useful to render input value and for determining what to render by condition.</p></blockquote><p>아래와 같이 사용할 수 있다.</p><pre spellcheck="false"><code class="language-typescript">// ...
const Summary: FC = () =&gt; {
  const { watch } = useFormContext&lt;Values&gt;();

  const value = watch();

  if (values.type === 'a') return &lt;Result {...getAResultProps(values)} /&gt;;
  if (values.type === 'b') return &lt;Result {...getBResultProps(values)} /&gt;;
  return &lt;Result 판매금액={0} 최종손익={0} /&gt;;
};

export default Summary;
</code></pre><p>동작은 하지만 <code spellcheck="false">Summary</code>컴포넌트 상위의 Root 컴포넌트까지 전부 리렌더가 발생한다. 음... 내가 생각한 의도에 맞는 것 같은데... 좀만 더 읽어보자.</p><blockquote><ul><li><p>This API will trigger re-render at the root of your app or form, consider using a callback or the <a target="_blank" rel="noopener noreferrer nofollow" href="https://react-hook-form.com/docs/usewatch">useWatch</a> api if you are experiencing performance issues.</p></li><li><p><code spellcheck="false">watch</code> result is optimised for render phase instead of <code spellcheck="false">useEffect</code>'s deps, to detect value update you may want to use an external custom hook for value comparison.</p></li></ul></blockquote><p>헉... watch를 쓰면 root부터 리렌더가 발생한다고한다. 실제 사용하는 경우에는 컴포넌트의 리렌더가 발생할 수 있으니 useEffect의 deps로써 활용할 수 있도록 최적화 되어있고, 실제 예시와 같은 사용방식에서는 적합하지 않은 것 같다.</p><p>그럼 문서에 나와있는 useWatch를 알아보자.</p><h2>useWatch API</h2><p>문서를 읽어보면 다음과 같이 설명하고 있다.</p><blockquote><p>Behaves similarly to the <code spellcheck="false">watch</code> API, however, this will isolate re-rendering at the custom hook level and potentially result in better performance for your application.</p></blockquote><p>음... 그럼 전체 리렌더링이 발생하는 <code spellcheck="false">watch</code>를 사용했을 때 얻는 이점은 뭐지..? 일단 적용해보았다.</p><pre spellcheck="false"><code class="language-typescript">// ...

const Summary: FC = () =&gt; {
  const values = useWatch&lt;Values&gt;();

  if (values.type === 'a') return &lt;Result {...getAResultProps(values)} /&gt;;
  if (values.type === 'b') return &lt;Result {...getBResultProps(values)} /&gt;;
  return &lt;Result 판매금액={0} 최종손익={0} /&gt;;
};
export default Summary; 

// ...</code></pre><p>Root에 존재하는 form은 리렌더하지 않고 <code spellcheck="false">Summary</code> rootLevel부터 리렌더되는 이슈는 해결되는 것을 확인할 수 있었다. 👍</p><h2>useWatch의 deep partial type 이슈</h2><p>한가지 문제가 더 있었다. <code spellcheck="false">useWatch</code>를 사용한 경우 (정확히는 parmeterless한 <code spellcheck="false">useWatch</code>를 사용한 경우) <code spellcheck="false">watch</code>와 다르게 deepPartial이 적용된 타입이 적용된다는 것이다.</p><p>이 문제는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/orgs/react-hook-form/discussions/10610">해당 논의</a>와 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/react-hook-form/react-hook-form/issues/9954">이슈</a>에서도 확인해보면 알 수 있다.</p><p>결론적으로 <code spellcheck="false">watch</code>와 다르게 <code spellcheck="false">useWatch</code> 의 타입이 정의되어있는 것은 v8 버전에서 resolve가 된다고 한다.</p><h3>그럼 지금은 어떻게 대응해야할까?</h3><p>아래와 같이 하거나... 필요한 필드만 뽑아서 사용해야할 것 같다.</p><pre spellcheck="false"><code class="language-typescript">const values = useWatch() as Values</code></pre><h2>결론</h2><p><code spellcheck="false">watch</code>와 <code spellcheck="false">useWatch</code>의 네이밍만보고 동작하는 방식이 같을 것이라고 생각하고 로직안에 오류가 있다고 생각해서 해결하기까지 생각보다 시간을 썼던 것 같다. 문서를 자주 봐야겠다.</p><p></p><p></p><p></p>

이 글은 기본적인 react-hook-form의 사용방법을 설명하고 있지 않습니다.리액트에서 폼을 다룰 때 빼놓을 수 없는 react-hook-form. (최근에 확인해보니 토스가 스폰서더라..)react-hook-form을 사용하면서 watch를 통해 values를 가져와 계산하는 컴포넌트를 만들었는데, useForm을 사용하는 컴포넌트 전체가 리렌더링 

react-hook-form의 useWatch와 watch의 차이점

<img src="https://image.until.blog/morethanmin/article/1726239900445.gif" data-width="100%" data-align="center" alt="until-1342"><p>언틸의 피드에서는 유저들이 작성한 아티클을 모달의 형태로 볼 수 있는데요.</p><p>이런 모달 형태는 유저들의 글을 빠르게 전환하며 볼 수 있다는 장점을 가지고 있어요.</p><p>하지만 React State로 관리되기 때문에 몇가지 단점이 존재했어요. 예를 들어 새로고침시에 보고 있던 게시글이 사라지거나, 브라우저의 history stack을 쌓지 않기 때문에 뒤로가기(history.back)로 닫을 수 없었어요.</p><p>이런 경험은 데스크탑에서는 그렇다 쳐도 모달이 풀페이지로 나타나는 모바일에서는 뒤로가기를 했을 때 아예 페이지가 닫혀버리는 등 유저 경험이 좋지 않았어요.</p><p>때문에 Route로 동작하는 Modal로 변경하기로 했어요. 어떤 방식으로 구현했는지 간단하게 공유해볼게요.</p><h2>ArticleCard</h2><p>우선 ArticleCard는 기존에는 onClick handler를 통해 isOpen state를 변경해주고 있었는데요. 이것을 next/Link 컴포넌트로 변경해주었어요.</p><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><p><code spellcheck="false">Article.Thumbnail</code> 과 <code spellcheck="false">Article.ArticleInfo</code>가 Link의 props을 대신 받아오고 있습니다.</p><p>이제 아티클 카드를 클릭하면 next/router는 href에 의해서 <code spellcheck="false">until.blog?article-id=219</code> 로 이동하게 되요.</p><p>또한 as prop을 통해 article-hash-id를 브라우저 검색창에 노출하지 않고 실제 게시글 상세 route인 것처럼 변경해주었어요.</p><h2>ArticleDetailDialog</h2><p>이제 서치파라미터에 등록된 article-id를 읽어와서 모달을 띄워주면 돼요.</p><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><p>이를 통해 유저는 새로고침을 하더라도 게시글 상세페이지를 유지할 수 있고, 뒤로가기를 통해서도 모달을 닫을 수 있게 되었습니다. 👍</p><p></p><p></p><p></p><p></p>

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

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

<p><code spellcheck="false">.env</code> 파일을 이용하여 환경 변수를 설정하고, 다양한 환경에서 다른 값을 가지고 프로그램을 실행할 수 있다.</p><p>일반적으로 아래와 같은 <code spellcheck="false">.env</code> 파일들을 생성해 사용한다.</p><ul><li><p><code spellcheck="false">.env</code>: 기본 환경 변수 파일</p></li><li><p><code spellcheck="false">.env.local</code>: local 환경에서만 실행</p></li><li><p><code spellcheck="false">.env.development</code>: 개발 환경에서만 실행</p></li><li><p><code spellcheck="false">.env.development.local</code>: 개발 환경에서만 로드되는 local 에서만 실행</p></li><li><p><code spellcheck="false">.env.production</code>: 프로덕션 환경에서만 로드되는 환경 변수 파일</p></li><li><p><code spellcheck="false">.env.production.local</code>: 프로덕션 환경에서만 로드되는 로컬 환경 변수 파일</p></li></ul><p></p><blockquote><p>💡 <code spellcheck="false">.local</code>이 붙으면 일반적으로 버전 관리에서 자동 제외되며, 로컬에서만 필요한 설정을 저장 한다.</p></blockquote><p></p><p>Next.js에서는 환경 변수를 로드할 때 특정 우선순위를 따른다. 우선순위는 다음과 같다.</p><ol><li><p><code spellcheck="false">.env.local</code></p></li><li><p><code spellcheck="false">.env.[MODE].local</code></p></li><li><p><code spellcheck="false">.env.[MODE]</code></p></li><li><p><code spellcheck="false">.env</code></p></li></ol><p><code spellcheck="false">[MODE]</code> 에 들어올 수 있는 값은 다음과 같다.</p><ul><li><p>production (start, build시 자동 지정)</p></li><li><p>development (dev시 자동 지정)</p></li><li><p>test (test시 자동 지정)</p></li></ul><p></p><h2>특정 env 파일 지정</h2><p>보통 위와 같이 mode가 자동 지정되는데, build를 하는데 <code spellcheck="false">production.env</code> 파일이 아닌 <code spellcheck="false">development.env</code> 파일에 있는 값을 사용하고 싶을 때가 있다.</p><p>다양한 방법이 있지만 <code spellcheck="false">env-cmd</code> 라는 라이브러리를 이용해 다음과 같이 사용할 수 있다.</p><p></p><pre spellcheck="false"><code class="language-json">"scripts": {
  "build:dev": "env-cmd -f .env.development.local next build",
},
</code></pre><pre spellcheck="false"><code class="language-bash">yarn build:dev
</code></pre>

env 파일의 적용 우선 순위 알아보기

env 파일 우선순위

백준

<p>💡 본 포스팅은 <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://www.acmicpc.net/">백준 온라인 저지</a> 에서 제공하는 문제의 풀이를 <strong>비상업적 목적</strong>으로 게시하였습니다.</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/problem/28432">문제링크 : https://www.acmicpc.net/problem/28432</a></p><h3>🤔 풀이 사고</h3><p>문제의 입력&amp;출력 조건</p><img src="https://image.until.blog/woonideveloper423/article/1717333052432" alt="until-397"><p>조건에 따른 풀이의 흐름은 다음과 같다.</p><ol><li><p>끝말 잇기 기록을 입력받는다.(N개)</p></li><li><p>단어 기록들을 저장할 <code spellcheck="false">String 배열</code> 및 <code spellcheck="false">?의 인덱스 변수</code>를 초기화한다.</p></li><li><p>단어 중복 체크를 위해 중복을 허락하지 않는 <code spellcheck="false">Hashset</code> 에 단어 기록들을 저장한다.</p></li><li><p>배열에 끝말잇기 기록을 저장한다.</p></li><li><p>후보 단어들을 입력받는다.(M개)</p></li><li><p><code spellcheck="false">?</code> 이 제일 앞,뒤 인 경우, N=1일 경우, 단어가 중복될 경우의 수들을 포함해서 끝말잇기 조건식을 작성한다.</p></li><li><p>출력</p></li></ol><h3><strong>🟢 </strong>정답 코드</h3><pre spellcheck="false"><code class="language-java">import java.io.*;
import java.util.HashSet;
import java.util.Set;
/*(1) 끝말잇기 기록을 입력받는다.
(2) 중복 체크를 위해 HashSet에 단어들을 저장한다.
(3) 배열에 끝말잇기 기록을 저장한다.
(4) ? 의 인덱스를 저장한다.
(5) 후보단어들을 입력받는다.
(6) 단일 단어를 입력받았을 경우,중복되는 경우의 조건식을 적용한다.
(7) 일반적인 경우 끝말잇기의 규칙 조건식을 적용한다.
(8) 출력 수행시간 : 108ms
 메모리 : 14212kb
 */public class 끝말잇기28432 {public static void main(String[] args) throws IOException {
    BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
    Set&amp;lt;String&amp;gt; previous = new HashSet&amp;lt;&amp;gt;();
    int N = Integer.parseInt(br.readLine());
    int idx = -1;
    String[] arr = new String[N];
    for (int i = 0; i &amp;lt; N; i++) {
        String word = br.readLine();
        if (!"?".equals(word)) previous.add(word);
        else idx = i;
        arr[i] = word;
    }
    int M = Integer.parseInt(br.readLine());
    for (int i = 0; i &amp;lt; M; i++) {
        String candidate = br.readLine();
        if (N == 1) {
            System.out.println(candidate);
            break;
        }
        ;
        if (previous.contains(candidate)) continue;
        if (idx == 0) {
            if (arr[idx + 1].charAt(0) == candidate.charAt(candidate.length(- -1)) {
                System.out.println(candidate);
                break;
            }
        } else if (idx == N - 1) {
            if (arr[idx - 1].charAt(arr[idx - 1].length() - 1) == candidate.charAt(0)) {
                System.out.println(candidate);
                break;
            }
        } else {
            if (arr[idx + 1].charAt(0) == candidate.charAt(candidate.length() - 1)
                    &amp;amp;&amp;amp; arr[idx - 1].charAt(arr[idx - 1].length() - 1) == candidate.charAt(0)) {
                System.out.println(candidate);
                break;
            }
        }
    }
}}</code></pre><h3>❗어려웠던 점</h3><ul><li><p>정답 코드와 사고 흐름은 유사했으나 정답 코드를 온전히 나 스스로 작성하지는 못하였음</p></li><li><p>자바 컬렉션에 대해 잘 숙지하고 있었다면 능숙하게 컬렉션에 담긴 자료들에 대해 비교 검토할 수 있었을 거라 생각함</p></li><li><p>무작정 코드를 치는 게 아니라 우선은 입력 값이 2개로 나눠져있으면 나눠서 어떻게 입력 값을 저장하고 다뤄야겠다는 고민이 우선시되어야 했음</p></li></ul><h3><strong>📚 </strong>참고 자료</h3><ul><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://cjh970422.tistory.com/entry/BOJ%EB%B0%B1%EC%A4%80-28432-%EB%81%9D%EB%A7%90%EC%9E%87%EA%B8%B0">https://cjh970422.tistory.com/entry/BOJ%EB%B0%B1%EC%A4%80-28432-%EB%81%9D%EB%A7%90%EC%9E%87%EA%B8%B0</a></p><p></p></li></ul><p></p><p></p><p></p><p></p>

Baekjoon 끝말잇기(28432번)의 풀이 포스팅입니다.

[Baekjoon] 끝말잇기(28432번)

<h1>게으른 초기화 (lazy initialization) 이란?</h1><p>React에서 게으른 초기화는 상태(state) 초기화 시점에서 초기화 작업이 비용이 많이 들거나 시간이 오래 걸릴 때 유용하게 사용할 수 있는 기술이다.</p><p>예를 들어 다음과 같은 코드를 보자.</p><pre spellcheck="false"><code class="language-typescript">const veryHeavyWork = () =&gt; {
  let expensiveValue = 1;

  console.log('very heavy work called');

  // 연산 비용이 아주 비싼 함수
  // ......
  return expensiveValue;
};

export const LazyInitComponent = () =&gt; {
  const [expensiveState, setexpensiveState] = useState(veryHeavyWork());
  const [count, setCount] = useState(0);

  useEffect(() =&gt; {
    console.log('rerender');
  }, [count]);

  return (
    &lt;div&gt;
      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;click me&lt;/button&gt;
    &lt;/div&gt;
  );
};
</code></pre><p>위의 코드에서 컴포넌트 안의 state(<code spellcheck="false">count</code>)를 변화 시킬 때 마다 리렌더링이 일어난다. 리렌더링이 일어날 때, <code spellcheck="false">expensiveState</code>에 초깃값으로 들어가기 위해 사용된 <code spellcheck="false">veryHeavyWork</code> 함수가 계속해서 호출된다.</p><p></p><img src="https://image.until.blog/love/article/1721747266590" alt="until-917"><p>이런 경우 게으른 초기화를 사용하면, 리렌더링이 되더라도 초깃값으로 설정 되었다면, 값이 비싼 함수를 다시 실행시키지 않을 수 있다.</p><pre spellcheck="false"><code class="language-typescript">const [expensiveState, setexpensiveState] = useState(() =&gt; veryHeavyWork());
</code></pre><p>방법은 위와 같이 간단하다. 함수를 실행한 결과값을 전달하는 것이 아닌, 함수를 반환하는 함수를 전달하면 된다.</p><img src="https://image.until.blog/love/article/1721747296968" alt="until-918"><p></p><h2>무슨 차이점이지?</h2><p>자바스크립트의 실행 순서와 리액트가 초깃값이 있는지를 판단하는 순서에 따라 다르다.</p><pre spellcheck="false"><code class="language-typescript">const [expensiveState, setexpensiveState] = useState(veryHeavyWork());
</code></pre><p>위와 같은 경우는 <code spellcheck="false">useState</code>에 초깃값이 있는지 없는지를 판단하기 전에 <code spellcheck="false">veryHeavyWork</code>라는 함수를 실행시킨다. 함수를 실행 후, 반환 값을 <code spellcheck="false">useState</code>에 넣으려 했지만, 이미 초깃값이 있기 때문에 무시된다.</p><pre spellcheck="false"><code class="language-typescript">const [expensiveState, setexpensiveState] = useState(() =&gt; veryHeavyWork());
</code></pre><p>그러나 위와 같이 작성한다면, <code spellcheck="false">veryHeavyWork</code>함수를 실행하기 전에 <code spellcheck="false">useState</code>에 함수를 반환하는 함수 그 자체가 전달된다. 따라서 함수라는 초깃값이 이미 할당되어있기에 안의 내용은 무시되고 <code spellcheck="false">veryHeavyWork</code> 함수는 실행되지 않는다.</p><p></p><h2>언제 쓰면 좋을까?</h2><p>위에서 계속 설명한 것과 같이 초깃값을 생성하는데 연산이 오래 걸릴 경우에 쓰면 좋다. 예를 들어, <code spellcheck="false">localStorage</code>나 <code spellcheck="false">sessionStorage</code>에 접근할 때, 배열에 관한 메서드를 사용할 때 등이다.</p><p></p><h1>useEffect를 이용한 초기화와의 차이</h1><p><code spellcheck="false">useState</code>의 게으른 초기화와 <code spellcheck="false">useEffect</code>를 통해 컴포넌트가 렌더링 될 때 state를 초기화 하는 것 사이에는 몇 가지 차이가 있다.</p><h3>초기화 시점</h3><ul><li><p><strong>게으른 초기화:</strong> state 변수 선언 시점에 직접 값을 설정한다. 컴포넌트가 처음 렌더링되기 전에 값이 설정되므로, 컴포넌트가 마운트되고 첫 렌더링이 일어나기 전에 값을 사용할 수 있다.</p></li><li><p><strong>useEffect:</strong> 컴포넌트가 렌더링 된 이후 초기화</p></li></ul><h3>용도</h3><ul><li><p><strong>게으른 초기화:</strong> 컴포넌트가 마운트되기 전에 값을 사용해야 하는 경우</p></li><li><p><strong>useEffect</strong>: 비동기 작업이나 side effect가 발생할 경우</p></li></ul><p></p>

게으른 초기화에 대해 알아보자

React의 게으른 초기화 (lazy initialization)

<p>Next.js에 mixpanel을 적용하기 위해 사용한 방법들을 소개하고자 한다.</p><p></p><h3>SDK 설치</h3><p>우선 mixpanel 공식에서 제공해주는 브라우저용 SDK를 설치하자.</p><pre spellcheck="false"><code class="language-shell">yarn add mixpanel-browser
# or
npm install --save mixpanel-browser</code></pre><p></p><h3>하고자 하는 목표</h3><p>Docs에서 제공하는 아래와 같은 코드로 초기화를 진행하면 별다른 설정 없이 페이지 단위로 Tracking이 진행된다.</p><pre spellcheck="false"><code class="language-javascript">mixpanel.init('YOUR_TOKEN', {debug: true, track_pageview: true, persistence: 'localStorage'});</code></pre><p>그러나 나는 로그인한 유저에 대해 정보를 부여하고, 그에 따른 데이터를 더 보고 싶었다. 따라서 <code spellcheck="false">mixpanel.identify</code> 메서드와 <code spellcheck="false">mixpanel.people.set</code> 메서드가 필요했다.</p><p></p><p>또한 나중에라도 언제 어느 곳에서 다른 액션에 대한 추가 정보를 tracking 해야 할 것 같아서 액션들을 묶는 클래스로 만들어 재사용이 용이하게 하고 싶었다.</p><p></p><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><p></p><p>Class로 만들 경우 문제점이 어디선가는 <code spellcheck="false">mixpanel.init</code>를 호출해야 하는데, Class내의 메서드들을 따로 호출하지 않는다면 초기화가 되지 않는다. 따라서 지금과 같은 경우에는 로그인을 하지 않으면 추적 코드가 심어지지 않는다.</p><p>따라서 단순히 <code spellcheck="false">mixpanel.init</code>을 호출하기 만을 위한 메서드를 추가 작성하여야 한다.</p><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><p></p><p>나의 경우에는 우선 로그인 하는 쪽에만 코드를 심어주면 되었다.</p><pre spellcheck="false"><code class="language-typescript">if (loginUser) {
  MixpanelService.setIdentity(loginUser.id);
  MixpanelService.setUser(loginUser);
} else {
  MixpanelService.getInstance();
}</code></pre><p></p><p></p><p><strong>혹시 더 나은 방법이 있다면 알려주세요!!</strong></p>

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

Next.js에 mixpanel 연동하기

<h1>#1. 리액트를 배우기 위한 사전 준비</h1><h3>#챕터 목차</h3><ol class="tight" data-tight="true"><li><p>JSX 구문</p></li><li><p>Imperative &amp; Declarative</p></li><li><p>v = f ( s )</p></li><li><p>ES5/ ES6 functions and literals</p></li></ol><h2>JSX 구문</h2><p>JSX 는 Javascript 와 XML 을 합성한 표현방식입니다.</p><p>React 에서는 JSX 구문을 주로 사용하게 됩니다.</p><pre spellcheck="false"><code class="language-jsx">// JSX 의 예제 코드
const name = 'John Doe';
const element = &lt;h1&gt;Hello, {name}&lt;/h1&gt;;

// JS 의 예제 코드
const element = React.createElement(
  'h1',
  null,
  `Hello, ${name}`
);
</code></pre><pre spellcheck="false"><code class="language-jsx">// 함수형 컴포넌트 내에서의 사용예
  return(	
      {state === "loading" ? (
        "Loading"
      ) : (
        &lt;ul&gt;
          {todos.map((todo) =&gt; (
            &lt;TodoItem77 key={todo.id} {...todo} /&gt;
          ))}
        &lt;/ul&gt;
      )}
  )
</code></pre><p>JSX 심화 학습 Ref :</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://reactjs-kr.firebaseapp.com/docs/introducing-jsx.html">https://reactjs-kr.firebaseapp.com/docs/introducing-jsx.html</a></p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://ko.legacy.reactjs.org/docs/jsx-in-depth.html">https://ko.legacy.reactjs.org/docs/jsx-in-depth.html</a></p><h2>Imperative vs. Declarative</h2><p>프로그래밍에서 해결해야 할 과제 “AAA” 가 있다고 가정하겠습니다.</p><p>절차형/명령형 imperative 프로그래밍에서는 “AAA” 의 모든 속성과 과제 들을 데스크탑 위에 모두 풀어헤쳐 놓고 하나하나의 세부항목 태스크를 구성한 후, 각각의 태스크에 대한 코드들을 구성해준 뒤 전체 플로우를 연결해줍니다.</p><pre spellcheck="false"><code class="language-jsx">// Imperative
// 배열에서 짝수를 찾고 그 합을 계산한다.
const numbers = [1, 2, 3, 4, 5, 6];
let sum = 0;

for (let i = 0; i &lt; numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    sum += numbers[i];
  }
}

console.log(sum); // 12
// 모든 절차가 마치 익숙한 의식의 흐름처럼 진행되었습니다.
</code></pre><p>반면에 선언형 declarative 프로그래밍에서는, 추상화 된 처리 엔진(또는 규칙) 을 전제로 합니다.</p><p>그리고 그 엔진이 watch/listen 하고있는 ‘개별 상태’ 를 변경 또는 관리의 목표로 설정해 줌으로서 태스크가 해결됩니다.</p><pre spellcheck="false"><code class="language-jsx">// Declarative
// 새로운 greet 객체를 출력에 반영시킨다.
const [activeGreet, setActiveGreet] = setState(null)
const newGreet = ['greetings', '안녕']
setActiveGreet(newGreet)
return (
	{
		activeGreet &amp;&amp; (
			activeGreet.map( (eachGreet, i) =&gt; {
	      &lt;Greet key={i} greet={eachGreet } /&gt;
			}	     
    )
	}
)
// 모든 코드의 중심과 목표는 'activeGreet' 라는 상태-state 에 집중되어 있습니다.
</code></pre><h2>v = f ( s )</h2><p>view = function ( state )</p><p>선언형 프로그래밍에서는 처리해야 할 ‘상태’ 즉, state 에 집중하고, state 를 변화 시키면 화면의 출력 양태가 바뀌도록 프로그래밍 합니다.</p><p>이 점이 가장 큰 변화이고 익숙해지기 어려운 문제인데요.. 기존의 절차형 프로그래밍으로부터의 패러다임 전환이기 때문에, 적응하기가 쉽지는 않습니다. 습관처럼 for 문을 적게 되기도 하죠. 언제나 그랬던 것 처럼, 직접 수 만 라인의 코드를 짜보는 것 외에는 왕도가 없는 것 같습니다.</p><p>아무튼, 기억해두시기 바랍니다. 모든 것은 state 이고, 개발자는 state 에 집중해야 한다… 라는 것이 리액트의 가장 큰 지혜이자 중심 컨셉입니다.</p><h2>ES5/ES6 functions &amp; literals</h2><p>리액트 에서는 ECMA5/6 에서 도입된 펑션과 리터럴이 자주 사용됩니다. 거의 모든 리액트 컴포넌트에서 사용된다고도 말할 수 있겠습니다.</p><p>ES5/6 펑션과 표현에 익숙해지셔야 합니다.</p><pre spellcheck="false"><code class="language-jsx">// ES5/ES6 펑션의 예 
  setAllTodos(allTodos.filter((eachTodo) =&gt; eachTodo.id !== targetTodoId));
  return(
      &lt;ul&gt;
        {todos.map((todo) =&gt; (
          &lt;TodoItem key={todo.id} {...todo} /&gt;
        ))}
      &lt;/ul&gt;
  )
</code></pre><p>가장 자주, 유용하게 사용되는 ES5/ES6 펑션들은 다음과 같습니다.</p><h3><a target="_blank" rel="noopener noreferrer nofollow" href="http://Array.map">Array.map</a></h3><pre spellcheck="false"><code class="language-jsx">var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}
// arrow function ver.
const numbers2 = numbers1.map( (val) =&gt; val*2 );
</code></pre><h3>Array.filter</h3><pre spellcheck="false"><code class="language-jsx">var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value &gt; 18;
}
// arrow function ver.
const numbers2 = numbers1.filter( (val) =&gt; val &gt; 18 );
</code></pre><h3>Array.reduce</h3><pre spellcheck="false"><code class="language-jsx">var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}
// arrow function ver.
const numbers2 = numbers1.reduce((total, value) =&gt; total + value, 0);
</code></pre><h3>Arrow function</h3><pre spellcheck="false"><code class="language-jsx">// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) =&gt; x * y;
</code></pre><h3>Optional chaining</h3><pre spellcheck="false"><code class="language-jsx">const user = {
  name: 'John',
  greet: function() {
    return 'Hello!';
  }
};

// Optional chaining을 사용하지 않은 경우
const greet1 = user &amp;&amp; user.greet &amp;&amp; user.greet();
console.log(greet1); // 'Hello!'

// Optional chaining을 사용한 경우
const greet2 = user?.greet?.();
console.log(greet2); // 'Hello!'
</code></pre><p>ES5/ES6 Functions 심화학습 Ref :</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.w3schools.com/js/js_es5.asp">https://www.w3schools.com/js/js_es5.asp</a></p><h3>Destructuring assignment : 구조 분해 할당</h3><pre spellcheck="false"><code class="language-jsx">// 기본 분해 할당
let a, b, rest;
[a, b] = [10, 20];

console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest); // Array [30, 40, 50]

// 객체 구조 분해 할당
const person = {
  name: 'John Doe',
  age: 30,
  address: {
    city: 'New York',
    zip: '10001'
  }
};

// 객체에서 값을 분해하여 변수에 할당
const { name, age } = person;

console.log(name); // John Doe
console.log(age); // 30

// 중첩된 객체의 속성을 분해하여 할당
const { address: { city, zip } } = person;

console.log(city); // New York
console.log(zip); // 10001

</code></pre><p>Destructuring assignment 심화학습 Ref :</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment</a></p><h3><strong>Nullish Coalescing Operator 와 Logical OR Operator</strong></h3><pre spellcheck="false"><code class="language-jsx">
let name = "";
let text = "default";
let result;

// Nullish coalising
result = name ?? text;
console.log(result); // ""

// Logical OR operator
result = name || text;
console.log(result); // "default"

// Falsy 값 처리: 
// ?? 연산자는 null이나 undefined만을 검사하고, 
// || 연산자는 모든 falsy 값을 검사합니다.

</code></pre><p>여기까지가 React 에서 주로 사용되는 구문과 펑션.. 등에 대한 사전 지식 점검 이었습니다.</p><p>충분히 이해하셨다면, 다음 장에서 본격적으로 React App 을 생성하고, 코딩을 시작해 봅시다.</p>

#1. 리액트를 배우기 위한 사전 준비

<p>서버 컴포넌트와 TanStack Query를 같이 적용하게된 스토리를 적어보고자 한다.</p><p></p><h1>목표</h1><p>우선 내가 구현하고자 하는 내용의 조건은 다음과 같다.</p><ol start="NaN"><li><p>서버 컴포넌트에서 n개의 데이터를 불러와 SEO를 위해 페이지를 미리 채워 놓을것.</p></li><li><p>무한 스크롤을 이용해 데이터를 더 로드할 수 있을 것</p></li><li><p>새로고침 전까지 클라이언트에서 계속 캐싱하고 있을 것</p></li><li><p>다른 카테고리 선택시 클라이언트에서 refetching 하여 데이터를 보여줄 것</p></li></ol><p>그리고 걸린 제약 조건은 다음과 같다.</p><ol start="NaN"><li><p>데이터 fetching은 third-party 라이브러리를 사용하며, 이는 서버 사이드에서만 동작하며 클라이언트에서 호출할 수 없다.</p></li></ol><p></p><h1>구현 과정</h1><h2>1. <strong>서버 컴포넌트에서 데이터 Prefetching</strong></h2><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#nesting-server-components">TanStack Query 공식 문서</a>에서 가이드해주는 방법을 참고하여, 부모가 되는 서버 컴포넌트를 작성했다.</p><p><code spellcheck="false">page.tsx</code></p><pre spellcheck="false"><code>export default async function PostPage() {
 &nbsp;const queryClient = new QueryClient()
​
  // prefetch할 query를 지정한다.
 &nbsp;await queryClient.prefetchQuery({
 &nbsp; &nbsp;queryKey: ['posts'],
 &nbsp; &nbsp;queryFn: () =&gt; PostService.getPostsByTag("initial"),
  })
​
 &nbsp;return (
 &nbsp; &nbsp;&lt;HydrationBoundary state={dehydrate(queryClient)}&gt;
 &nbsp; &nbsp; &nbsp;&lt;Posts /&gt;
 &nbsp; &nbsp;&lt;/HydrationBoundary&gt;
  )
}</code></pre><p>위 코드에서 <code spellcheck="false">&lt;HydrationBoundary state={dehydrate(queryClient)}&gt;</code> 이 부분은 서버에서 가져온 데이터를 클라이언트 컴포넌트에서 사용하기 위해 직렬화를 해주는 과정이다. 직렬화가 왜 필요한지는 여기서 설명하지 않겠다.</p><h2><strong>2. 무한 스크롤을 위한 클라이언트 컴포넌트 작성</strong></h2><p>이제 무한 스크롤을 위해 <code spellcheck="false">useInfiniteQuery</code>를 사용할 클라이언트 컴포넌트 부분을 살펴보자. prefetch한 데이터를 가져오기 위해서는 <code spellcheck="false">usePrefetchInfiniteQuery</code> 훅을 사용해야 한다.</p><p><code spellcheck="false">Post.tsx</code></p><pre spellcheck="false"><code>export default function Posts() {
 &nbsp;const { data, fetchNextPage, isFetchingNextPage } = await queryClient.prefetchInfiniteQuery({
 &nbsp; &nbsp;queryKey: ["posts"],
 &nbsp; &nbsp;queryFn: () =&gt; PostService.getPostsByTag("initial"),
 &nbsp; &nbsp;initialPageParam: undefined,
  });
 &nbsp;
 &nbsp;// ...생략
​
 &nbsp;return (
 &nbsp; &nbsp;&lt;div&gt;
   &nbsp;  {data....}
 &nbsp; &nbsp;&lt;/div&gt;
  )
}</code></pre><h3><strong>첫 번째 문제: 서버 사이드 전용 함수 호출</strong></h3><p>여기서 첫 번째 문제가 발생했다. <code spellcheck="false">queryFn</code>에 들어가는 비동기 함수는 서버에서 실행되는 함수인데, 클라이언트 사이드에서 호출하니 에러가 발생했다.</p><p>이를 해결하기 위해 Next.js의 server action을 사용했다.</p><pre spellcheck="false"><code class="language-typescript">const getPostsAction = async (tag: string, startCursor?: string) =&gt; {
 &nbsp;"use server";
 &nbsp;return await BlogService.getPostsByTag(tag, startCursor);
};</code></pre><p>위와 같이 감싸 준다음, <code spellcheck="false">getPostsAction</code>를 클라이언트 컴포넌트에 <code spellcheck="false">props</code>로 내려주거나, 파일을 따로 분리해서 export한 후, 클라이언트에서 import해서 사용해도 된다. 나는 후자의 방법을 선택했다.</p><pre spellcheck="false"><code class="language-typescript">const { data, fetchNextPage, isFetchingNextPage } = useInfiniteQuery({
 &nbsp;queryKey: ["posts"],
 &nbsp;queryFn: ({ pageParam }: { pageParam: string | undefined }) =&gt;
 &nbsp; &nbsp;getPostsAction({ startCursor: pageParam, tag }),
 &nbsp;initialPageParam: undefined,
 &nbsp;getNextPageParam: (lastPage, pages) =&gt; lastPage.next_cursor || undefined,
 &nbsp;staleTime: Infinity,
 &nbsp;gcTime: Infinity,
});</code></pre><p>지금까지의 과정을 통해 초기 데이터도 서버에서 만들어져 초기 HTML에 포함되어 나왔고, 무한 스크롤을 통한 클라이언트에서의 데이터 페칭도 정상적으로 진행 되었다.</p><h3>두 번째 문제: 캐싱 문제</h3><p>근데 캐싱이 안된다..!! 다른 페이지로 이동했다 다시 돌아오면 클라이언트 사이드에서 스크롤을 통해 가져온 데이터는 사라져 있었다. 아무리 <code spellcheck="false">staleTime</code>과 <code spellcheck="false">gcTime</code>의 옵션을 변경해도 마찬가지였다.</p><p>원인은 다음과 같았다. 서버 컴포넌트(<code spellcheck="false">page.tsx</code>)가 실행 될 때마다 <code spellcheck="false">queryClient</code>를 새로 생성하기 때문에 캐시가 남아 있지 않게되고, <code spellcheck="false">staleTime</code>등의 옵션은 별 의미가 없어진다.</p><p>그럼 서버에서 생성한 <code spellcheck="false">queryClient</code>를 밖으로 빼면 되지 않나? 라고 생각할 수 있지만, 서버에서 만들어지다 보니 다른 사용자들끼리 공유가될 수 있는 문제가 있다.</p><blockquote><p>참조: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/TanStack/query/discussions/5268">https://github.com/TanStack/query/discussions/5268</a></p></blockquote><h3><strong>해결</strong></h3><p>따라서 나는 서버에서 <code spellcheck="false">queryClient.prefetchQuery</code> 쓰는 것을 포기하고 다음과 같은 방법을 적용 했다.</p><ol><li><p>우선 초기 데이터를 fetching한 뒤, 데이터를 컴포넌트에 <code spellcheck="false">props</code>로 내려줬다.</p></li></ol><pre spellcheck="false"><code class="language-typescript">async function PostPage() {
 &nbsp;const initialPosts = await getPostsAction({ tag: "all" });
​
 &nbsp;return (
 &nbsp; &nbsp;&lt;section&gt;
 &nbsp; &nbsp; &nbsp;&lt;BlogPostList
 &nbsp; &nbsp; &nbsp; &nbsp;initialPosts={initialPosts}
 &nbsp; &nbsp; &nbsp;/&gt;
 &nbsp; &nbsp;&lt;/section&gt;
  );
}</code></pre><ol start="2"><li><p>전달 받은 데이터를 <code spellcheck="false">placeholderData</code>에 넣어 사용했다.</p></li></ol><pre spellcheck="false"><code>const getPlaceholderData = (): InfiniteData&lt;
 &nbsp;BlogPostsResultType,
 &nbsp;string | undefined
&gt; =&gt; {
 &nbsp;const cache = queryClient.getQueryData&lt;
 &nbsp; &nbsp;InfiniteData&lt;BlogPostsResultType, string | undefined&gt;
 &nbsp;&gt;(["posts", "all"]);
 &nbsp;return (
 &nbsp; &nbsp;cache || {
 &nbsp; &nbsp; &nbsp;pages: [initialPosts],
 &nbsp; &nbsp; &nbsp;pageParams: [],
 &nbsp;  }
  );
};
​
const { data, fetchNextPage, isFetching, isFetchingNextPage } =
  useInfiniteQuery({
   &nbsp;queryKey: ["posts", selectedTag],
   &nbsp;queryFn: ({ pageParam }: { pageParam: string | undefined }) =&gt;
   &nbsp; &nbsp;getPostsAction({ startCursor: pageParam, tag: selectedTag }),
   &nbsp;initialPageParam: undefined,
   &nbsp;getNextPageParam: lastPage =&gt; lastPage?.next_cursor,
   &nbsp;placeholderData: getPlaceholderData(),
   &nbsp;refetchOnMount: false,
   &nbsp;staleTime: Infinity,
   &nbsp;gcTime: Infinity,
  });</code></pre><p><code spellcheck="false">placeholderData</code>가 아닌 <code spellcheck="false">initialData</code>에 넣을 수도 있지만, 내 조건에서는 태그를 선택시 태그에 맞는 데이터를 보여줘야했고, 데이터 페칭시 이전 데이터를 활용하여 화면에 데이터가 사라지는 것을 막기 위해 <code spellcheck="false">placeholderData</code>를 사용했다.</p><blockquote><p>참조: <a target="_blank" rel="noopener noreferrer nofollow" href="https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query">https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query</a></p></blockquote><h1>결론</h1><p>SSR, RSC 등과 클라이언트 데이터 페칭 라이브러리인 TanStack Query를 적절하게 섞어서 사용할 수 있지만, 아직 완벽하게 사용할 수는 없는 느낌을 받았다. 서버측에서의 렌더링이 유행처럼 되가고 있으니 조만간 TanStack Query에서도 지원이 제대로 되었으면 좋겠다.</p>

서버 컴포넌트와 TanStack Query를 활용해 특정 기능을 구현한 과정을 공유하고자 합니다.