Books

React

<img src="https://image.until.blog/morethanmin/article/1718207600669" alt="until-463"><blockquote>이전에 개인 블로그를 운영하면서 동적으로 오픈그래프를 적용했던 경험을 공유합니다.최근에는 아래 방법보다 간편하게 <code spellcheck="false">@vercel/og</code> 라이브러리로 좀 더 og이미지 생성 api를 만들 수 있습니다.관심 있으신 분들은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://vercel.com/docs/functions/og-image-generation">공식 문서</a>를 참고해보시면 좋을 것 같습니다.</blockquote><h1>오픈 그래프?</h1>오픈그래프는 페이스북에서 처음 만들어진 개념으로 HTML 문서의 메타정보를 쉽게 표시하기 위해 해당 문서의 제목, 설명, 타입 이미지 등등을 정의해두는 것을 말한다. 쉽게 말해서 내가 카카오톡에 특정 링크를 공유했을 때, 해당 html의 문서의 open graph 메타 태그를 통해 해당 문서에 대한 간략한 요약을 만들어 표시해준다.일반적으로는 아래와 같은 정보를 포함시키고, 사이트마다 요구하는 별도의 태그가 존재하기도 한다. 해당 사이트에서 url에 대한 미리보기를 지원하고 싶으면 해당 og를 포함시켜야한다.<blockquote><ul><li><code spellcheck="false">og:title</code> - The title of your object as it should appear within the graph, e.g., "The Rock".</li><li><code spellcheck="false">og:type</code> - The <a target="_blank" rel="noopener noreferrer nofollow" href="https://ogp.me/#types">type</a> of your object, e.g., "<a target="_blank" rel="noopener noreferrer nofollow" href="http://video.movie">video.movie</a>". Depending on the type you specify, other properties may also be required.</li><li><code spellcheck="false">og:image</code> - An image URL which should represent your object within the graph.</li><li><code spellcheck="false">og:url</code> - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.imdb.com/title/tt0117500/">https://www.imdb.com/title/tt0117500/</a>".</li></ul></blockquote>출처 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://ogp.me/#metadata">https://ogp.me/#metadata</a><h1>Next.js에 적용하기</h1>이러한 오픈그래프를 <code spellcheck="false">Next.js</code> 에서 적용시키려면 어떻게 하면 좋을까…? 바로 Next.js에서 제공하는 <code spellcheck="false">Head</code> 컴포넌트안에 메타태그를 정의해주면 된다.오픈그래프를 적용시킬때, 해당 페이지가 단순한 웹사이트에 대한 소개인 경우가 있고, 게시글과 같은 동적으로 바뀌는 페이지가 있을것이다. 두가지 케이스를 나누어서 살펴보자.<h2>정적인 페이지인 경우</h2>정적인 경우에는 static하게 적어주기만하면 된다.<pre spellcheck="false"><code class="language-typescript">// /pages/index.tsxfunction Feed() {
return (
&lt;div&gt;
&lt;Head&gt;
&lt;meta property="og:type" content="website" /&gt;
&lt;meta property="og:title" content="멋쟁이 상민처럼" /&gt;
&lt;meta property="og:description" content="개발자로 일하면서 배운 내용들을 기록합니다." /&gt;
&lt;meta property="og:url" content="&lt;https://morethanmin.com&gt;" /&gt;
&lt;meta
property="og:image"
content="정적인 이미지 경로"
/&gt;
&lt;/Head&gt;
&lt;FeedContainer/&gt;
&lt;/div&gt;
)
}</code></pre>요런식으로 정의해주면 오픈 그래프를 적용시킬 수 있겠다.<h2>동적인 페이지인 경우</h2>그럼 게시글과 같이 동적인 페이지인 경우에는? 동적으로 가져온 정보를 넣어주면 된다.<pre spellcheck="false"><code class="language-tsx">// /pages/[slug].tsxexport async function getStaticProps({ params: { slug } }) {
const post = await getPost({ slug })
return {
props: { post },
}
}function ArticlePage({post}) {
return (
&lt;div&gt;
&lt;Head&gt;
&lt;meta property="og:type" content="website" /&gt;
&lt;meta property="og:title" content={post.title} /&gt;
&lt;meta property="og:description" content={post.summary} /&gt;
&lt;meta property="og:url" content={post.url} /&gt;
&lt;meta
property="og:image"
content={post.thumbnail}
/&gt;
&lt;/Head&gt;
&lt;PostContainer data={post} /&gt;
&lt;/div&gt;
)
}</code></pre><h1>동적으로 OG 이미지 생성하기</h1>여러 많은 블로그를 보다보면 배경은 똑같고 텍스트만 바꾸어서 게시글마다 썸네일을 적용 해주곤한다. 티스토리건 벨로그건 네이버블로그건 다 썸네일을 사용자가 직접 업로드해야만 가능하다.<img src="https://image.until.blog/morethanmin/article/1718207770965" alt="until-464">썸네일을 살펴보면 텍스트 바꿔치기를 통해 반복적으로 썸네일을 만드는 경우들이 상당히 많았다. 동적으로 가져온 게시글 정보에 썸네일 정보가 있는 경우에는 해당 썸네일 이미지를 보여주고, 그렇지 않은 경우에는 동적으로 썸네일을 생성할 수 있지 않을까?그런 오픈소스가 있는지 찾아보았다.다양한 서비스들이 있었지만 결국 이미지를 생성해서 해당이미지를 업로드 해주어야 가능한 경우가 많았다. 간단하게는 개인 프로젝트들도 많았고, 심지어는 유료인 서비스들도 있었다.외부 블로그 서비스를 이용하는 경우에는 그런 서비스를 사용해도 좋겠지만, 나는 블로그를 직접 만들고 있으니, url에 원하는 썸네일 정보를 보내면 동적으로 이미지를 생성해줄 수 있는 api가 필요했다. 아래 처럼 말이다...<pre spellcheck="false"><code class="language-tsx">// /pages/[slug].tsxexport async function getStaticProps({ params: { slug } }) {
const post = await getPost({ slug })
return {
props: { post },
}
}function ArticlePage({post}) {
return (
&lt;div&gt;
&lt;Head&gt;
{post.thumbnail ?
&lt;meta
property="og:image"
content={post.thumbnail}
/&gt; :
&lt;meta
property="og:image"
content={https://썸네일-만들어주는-서비스/?title=${post.title}}
/&gt;
}
&lt;/Head&gt;
&lt;PostContainer data={post} /&gt;
&lt;/div&gt;
)
}</code></pre><h1>vercel/og-image</h1>여기저기 찾아보다 vercel/og-image를 발견했다. 해당 페이지에서 실제로 만들 수도 있고, url상으로 동적으로 생성해주는 기능도 지원하는 오픈소스이다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://og-image.vercel.app/morethan-log.png?theme=light&amp;md=1&amp;fontSize=100px&amp;images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-black.svg">예시</a><img src="https://image.until.blog/morethanmin/article/1718207953408" alt="until-465"><h1>한글 인코딩 이슈</h1>내용 그대로다. 한글을 지원하지 않는 폰트를 사용하고 있어서…. 영어만 입력이 가능했다.<img src="https://image.until.blog/morethanmin/article/1718207990429" alt="until-466">그래서 해당 프로젝트의 이슈를 좀 찾아보니… 실제로 나와 같은 문제를 겪고 있는 사람들이 있었다.<h1>og-image-korean</h1>한글 지원하는 폰트와 기본 이미지를 바꿔서 배포했다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/morethanmin/og-image-korean">여기</a>에 들어가보면 확인할 수 있다.<img src="https://image.until.blog/morethanmin/article/1718208022544" alt="until-467"><ul><li>site: <a target="_blank" rel="noopener noreferrer nofollow" href="https://og-image-korean.vercel.app/">https://og-image-korean.vercel.app</a></li><li>github: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/morethanmin/og-image-korean">https://github.com/morethanmin/og-image-korean</a></li></ul><img src="https://image.until.blog/morethanmin/article/1718208085603" alt="until-468">물론 리서치하고 만드는데 걸린 시간을 생각해본다면… 진작 게시글 썸네일을 200장 이상 만들었을 것 같다.언틸에도 추후 적용해보면 좋을 것 같다.

이전에 개인 블로그를 운영하면서 동적으로 오픈그래프를 적용했던 경험을 공유합니다.최근에는 아래 방법보다 간편하게 @vercel/og 라이브러리로 좀 더 og이미지 생성 api를 만들 수 있습니다.관심 있으신 분들은 공식 문서를 참고해보시면 좋을 것 같습니다.오픈 그래프?오픈그래프는 페이스북에서 처음 만들어진 개념으로 HTML 문서의 메타정보를 쉽게 표시하기

next 서비스에서 동적으로 게시글 썸네일 생성하기 (Open Graph)

<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