🧑‍💻 Develop

<img src="https://image.until.blog/morethanmin/article/1718723304750" alt="until-541"><p>개발자에게 생산성은 곧 비용이기에 생산성을 높이는 것은 매우 중요한 일인데요.</p><p>멀티커서 기능을 잘 활용하면 생산성을 높일 수 있습니다. 저 또한 잘 활용하고 있지만 매번 활용하고 있는 기능들만 사용하게 되는 것 같아 이번 기회에 어떤 기능들이 있는지 정리해보려고 합니다.</p><p>기본적으로 마우스를 활용한 방식과 키보드를 활용한 방식이 있어요.</p><h1>마우스를 활용한 멀티 커서 단축키</h1><h2>클릭하여 하나씩 추가</h2><p>우선 가장 기초적인 방법부터 알려드릴게요.</p><p>맥에서는 <code spellcheck="false">Option</code> 키, 윈도우에서는 <code spellcheck="false">Alt</code> 키를 누른 상태로 vscode 화면에서 다른 영역을 마우스 포인터로 클릭하여 여러 커서를 추가할 수 있습니다.</p><p>이 상태에서 키보드로 타이핑을 하시면 모든 커서에서 동일하게 타이핑이 됩니다.</p><p>제거하기 위해서는 커서에 <code spellcheck="false">Option</code> 또는 <code spellcheck="false">Alt</code> 키를 누르신 체로 다시 클릭해주시면 됩니다.</p><p><code spellcheck="false">esc</code> 를 눌러서도 멀티커서를 제거할 수 있어요.</p><h2>그래그하여 추가</h2><p>클릭이 아닌 드래그해서 추가하는 방법도 있어요.</p><p>맥에서는 <code spellcheck="false">Option+Shift</code> 키, 윈도우에서는 <code spellcheck="false">Alt+Shift</code> 키를 누른 상태로 vscode 화면에서 다른 영역을 마우스 포인터를 드래그하여 여러 커서를 추가할 수 있습니다.</p><h1>키보드를 활용한 멀티 커서 단축키</h1><h2>일치하는 텍스트 모두 선택</h2><p>선택하고자 하는 내용을 드래그한다음, 맥에서는 <code spellcheck="false">Command+Shift+L</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+Shift+L</code> 키를 누르면 동일한 텍스트들에 모두 커서가 추가됩니다.</p><h2>순차적으로 일치하는 텍스트 선택</h2><p>위 기능의 경우 모든 텍스트가 선택된다면 해당 단축키를 사용하면 순차적으로 원하는 텍스트에 하나씩 커서가 추가됩니다.</p><p>선택하고자 하는 내용을 드래그한다음, 맥에서는 <code spellcheck="false">Command+D</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+D</code> 키를 누르면 드래그한 텍스트와 일치하는 다음 텍스트에 커서가 생기고 또 누르면 그 다음 텍스트에 커서가 추가되어요.</p><p>만약에 다시 되돌리기 위해서는 맥에서는 <code spellcheck="false">Command+U</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+U</code> 키를 눌러서 마지막으로 선택된 곳을 취소할 수 있어요.</p><h2>현재 커서 위 또는 아래 줄에 추가</h2><p>현재 커서 위치에서 위 또는 아래 방향으로도 멀터 커서를 연속으로 추가할 수 있어요. 맥에서는 <code spellcheck="false">Command+Option+Up/Down</code>, 윈도우즈에서는 <code spellcheck="false">Ctrl+Alt+Up/Down</code>키를 누르시면 됩니다.</p><h2>그래그한 여러 줄의 맨 마지막에 멀터 커서 추가하기</h2><p>여러줄을 드래그한 상태에서 각 줄의 마지막 라인에 커서를 추가할 수 있어요.</p><p>맥에서는 <code spellcheck="false">Option+Shift+I</code>, 윈도우에서는 <code spellcheck="false">Alt+Shift+I</code>를 키를 눌러 적용할 수 있어요.</p><p></p>

개발자에게 생산성은 곧 비용이기에 생산성을 높이는 것은 매우 중요한 일인데요.멀티커서 기능을 잘 활용하면 생산성을 높일 수 있습니다. 저 또한 잘 활용하고 있지만 매번 활용하고 있는 기능들만 사용하게 되는 것 같아 이번 기회에 어떤 기능들이 있는지 정리해보려고 합니다.기본적으로 마우스를 활용한 방식과 키보드를 활용한 방식이 있어요.마우스를 활용한 멀티 커서

VSCode 멀티 커서로 생산성 높이기

<img src="https://image.until.blog/until/article/1725700507876.png" alt="until-1322"><p>안녕하세요. 몰댄민입니다. 언틸 업데이트 사항을 알려드릴게요.</p><h1>아티클 모달 UI가 개선되었어요</h1><p>피드에서 아티클을 볼 때 아티클 상세로 바로 이동할 수 있었으면 좋겠다는 요청이 많았어요.</p><p>사실.. 이전에도 아티클 제목을 누르면 아티클 상세 페이지로 이동이 가능했었는데요. 이 기능이 유저에게 직관적이지 않다고 판단했어요.</p><img src="https://image.until.blog/until/article/1725701544361.gif" alt="until-1324"><p>때문에 아티클 모달에 간단한 헤더를 추가해 직관적으로 상세페이지로 이동할 수 있도록 개선했어요.</p><p>앞으로도 많은 피드백 부탁드려요.</p><h1>누가 리액션을 남겼는지 볼 수 있어요</h1><p>이전에는 리액션을 남겨도 누가 남긴 것인지 알림이 아니면 알 수가 없었는데요...🥲</p><p>이제 리액션 영역에 마우스를 올려놓으면 누가 리액션을 남겼는지 확인할 수 있도록 툴팁을 추가했어요.</p><img src="https://image.until.blog/until/article/1725700873621.gif" alt="until-1323"><h1>아티클에 컬렉션 정보가 추가되었어요</h1><p>그동안 컬렉션으로 아티클을 분류해도 해당 아티클이 어떤 컬렉션인지 인지하기가 어려웠어요.</p><p>이를 개선하기 위해 아티클 리스트와 아티클 상세페이지에 컬렉션 정보를 추가했어요.</p><img src="https://image.until.blog/until/article/1725701773006.gif" alt="until-1325"><h1>Latex 문법을 지원해요</h1><p>이제 Latex을 사용할 수 있어요! 사용하는 방법은 Markdown에서 Latex를 사용하는 것과 동일해요.</p><img src="https://image.until.blog/until/article/1725702175192.gif" alt="until-1326"><h1>그 외 수정사항</h1><ul><li><p>팔로워 랭킹이 추가되었어요.</p></li><li><p>코드블록 스타일이 개선되었어요.</p></li><li><p>그 외 여러 버그를 고쳤어요.</p></li></ul><h1>기타</h1><ul><li><p>서비스에 대한 건의사항은 커뮤니티 또는 댓글 등 편한 곳으로 알려주세요. 감사합니다!</p></li></ul><p></p>

그동안 어떤 기능이 추가되었는지 알려드릴게요

24.09.07 업데이트 내역

<p>내 로컬에서 프로젝트를 실행시키고, 같은 망을 사용하는 팀원들에게 내가 만든 페이지를 공유해주고 싶었다. 그렇게 하려면 클라우드 등에 배포를 해서 보여줄 수도 있지만, 나는 그냥 바로 보여주고 싶었기에 <code spellcheck="false">localhost</code>대신 내 IP를 붙여 공유 했다.</p><p>Mac 에서 내 IP를 알아내는 명령어는 다음과 같다.</p><pre spellcheck="false"><code class="language-bash"># ethernet 연결일 경우
ipconfig getifaddr en0

# wireless 연결일 경우
ipconfig getifaddr en1</code></pre><p></p><p>매번 확인이 필요할 때마다 터미널을 들어가서 저 명령어를 치고.. 명령어를 까먹어서 다시 검색해서 찾고, 결과를 복사해서 포트를 붙이고.. 다시 복사하고를 반복했다.</p><p>생각보다 내 아이피를 확인할 일이 많았고, 명령어가 길고 복잡했기에 간단한 명령어로 내 IP를 알아낸 후 바로 클립보드로 복사되게끔 만들었다.</p><p></p><h1>Shell Script 작성</h1><pre spellcheck="false"><code class="language-shell">#!/bin/bash

# IP 주소 가져오기
ip=$(ipconfig getifaddr en0)

# 포트 번호가 주어지면 ip:port 형식으로 출력 및 클립보드에 Copy
if [ -n "$1" ]; then
  echo "$ip:$1" | pbcopy
  echo "Public IP with port: $ip:$1"
else
  echo "$ip" | pbcopy
  echo "Public IP: $ip"
fi</code></pre><p>위 Script 내용을 요약하면 다음과 같다.</p><ul><li><p>실행 하면 <code spellcheck="false">ipconfig getifaddr en0</code> 명령어를 이용하여 내 IP를 불러온 뒤, 바로 클립보드에 넣는다.</p></li><li><p>포트 번호를 인수로 받으면 <code spellcheck="false">&lt;IP Adress&gt;:&lt;port&gt;</code> 식으로 클립보드에 들어간다.</p></li></ul><p></p><p>작성 후 이 파일을 실행 시킬 수 있도록 권한을 줘야한다.</p><pre spellcheck="false"><code class="language-shell">chmod +x get_ip.sh</code></pre><h1>Alias 작성</h1><p>이제 작성한 스크립트를 터미널에서 간단한 명령어로 실행시킬 수 있게 alias를 작성해보자. 그러기 위해서는 <code spellcheck="false">.zshrc</code>를 편집해야 한다.</p><pre spellcheck="false"><code class="language-bash"> vim ~/.zshrc</code></pre><p></p><p>맨 마지막 줄에 다음과 같이 추가하고 <code spellcheck="false">:wq</code> 명령어를 통해 빠져나온다. alias 뒤에 들어갈 텍스트는 자유다. 나는 getip로 정했다.</p><pre spellcheck="false"><code class="language-bash">alias getip='get_ip.sh 파일 위치'</code></pre><p></p><p>아래 명령어로 변경 사항을 적용 시킨다.</p><pre spellcheck="false"><code class="language-bash">source ~/.zshrc</code></pre><h1>실행!</h1><p>이제 터미널에서 지정한 alias를 바로 쳐보자. 그럼 터미널에 내 아이피가 출력되고, 클립보드에도 바로 들어간걸 확인할 수 있다.</p><img src="https://image.until.blog/love/article/1723038819891" alt="until-1188">

내 IP주소를 가져오고 바로 복사까지 해보자

터미널에서 내 IP 주소 바로 가져오기

<h2><strong><span>문제</span></strong></h2><p><span>서버사이드에서 동작하는 아래와 같은 코드의 결과가 </span><strong><span>가끔씩</span></strong><span> 들어왔다.</span></p><pre spellcheck="false"><code class="language-typescript">mixpanel.track(event, { distinct_id: userId, properties }, err =&gt; { &nbsp;
 &nbsp;if (err) { &nbsp;
 &nbsp; &nbsp;reject(err); &nbsp;
  } else { &nbsp;
 &nbsp; &nbsp;resolve("success"); &nbsp;
  } &nbsp;
});</code></pre><p><span>로컬에서 테스트했을 때는 하나의 이벤트도 빠지지 않고 전부 들어왔지만, 배포 후에는 모든 이벤트가 들어오지 않는 현상을 확인했다.</span></p><h2><strong><span>원인</span></strong></h2><p><span>원인을 살펴보기전 Vercel Function에 대해 알아보자. Vercel에서는 Vercel에 배포된 환경에 대해 </span><a target="_blank" rel="noopener noreferrer nofollow" href="https://vercel.com/docs/functions"><span>Vercel Function</span></a><span>이라는 기능을 제공한다.</span></p><p><span>Vercel Function에 대해 간략하게 설명하면, Vercel에 배포된 모든 서버 사이드에서의 코드 실행은 버셀의 인프라 환경 아래에서 실행된다는 것이며. 즉, FaaS가 적용 된다는 뜻이다.</span></p><p><span>Vercel의 이러한 기능 덕에, 우리가 서버설정을 딱히 하지 않아도 API Routes나, SSR등을 이용할 수 있는 것이다.</span></p><blockquote><p><span>✏️ </span><strong><span>Good to Know</span></strong><span> </span></p><p><span>Vercel의 Serverless architecture는 AWS의 Lambda를 통해 구동된다.</span></p></blockquote><p><em><span>가끔씩</span></em><span> 동작했던 코드는 서버 액션으로 설정되어 서버 측에서 작동했고, Vercel은 기본적으로 서버리스로 호스팅되기 때문에 코드도 서버리스 함수로 등록된다. </span></p><p><span>이는 함수가 람다를 통해 실행되는 것을 의미하고, 그렇게 될 경우 Promise로 감싸지 않으면 코드가 실행이 완료되기 전에 종료될 수 있어 callback 함수가 실행되지 않아 동작이 종종 중단되었던 것이다.</span></p><h2><strong><span>해결</span></strong></h2><p><span>따라서 코드를 아래와 같이 </span><code spellcheck="false">Promise</code><span>로 감싸주었고, 모든 이벤트가 정상적으로 들어왔다.</span></p><pre spellcheck="false"><code class="language-typescript">return new Promise((resolve, reject) =&gt; {
 &nbsp; &nbsp;mixpanel.track(event, { distinct_id: userId, properties }, (err) =&gt; {
 &nbsp; &nbsp; &nbsp;if (err) {
 &nbsp; &nbsp; &nbsp; &nbsp;reject(err)
 &nbsp; &nbsp;  } else {
 &nbsp; &nbsp; &nbsp; &nbsp;resolve('success')
 &nbsp; &nbsp;  }
 &nbsp;  })
  })</code></pre><blockquote><p><span>참조</span></p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://vercel.com/blog/behind-the-scenes-of-vercels-infrastructure"><span>Behind the scenes of Vercel's infrastructure: Achieving optimal scalability and performance – Vercel</span></a></p><ul><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/mixpanel/mixpanel-node/issues/175"><span>https://github.com/mixpanel/mixpanel-node/issues/175</span></a><span> </span><a target="_blank" rel="noopener noreferrer nofollow" href="https://vercel.com/docs/functions"><span>Vercel Functions</span></a></p></li></ul></blockquote>

Next.js server action의 함수가 실행되지 않는 문제

⚛️ 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)

<img src="https://image.until.blog/morethanmin/article/1718207600669" alt="until-463"><blockquote><p>이전에 개인 블로그를 운영하면서 동적으로 오픈그래프를 적용했던 경험을 공유합니다.</p><p>최근에는 아래 방법보다 간편하게 <code spellcheck="false">@vercel/og</code> 라이브러리로 좀 더 og이미지 생성 api를 만들 수 있습니다.</p><p>관심 있으신 분들은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://vercel.com/docs/functions/og-image-generation">공식 문서</a>를 참고해보시면 좋을 것 같습니다.</p></blockquote><h1>오픈 그래프?</h1><p>오픈그래프는 페이스북에서 처음 만들어진 개념으로 HTML 문서의 메타정보를 쉽게 표시하기 위해 해당 문서의 제목, 설명, 타입 이미지 등등을 정의해두는 것을 말한다. 쉽게 말해서 내가 카카오톡에 특정 링크를 공유했을 때, 해당 html의 문서의 open graph 메타 태그를 통해 해당 문서에 대한 간략한 요약을 만들어 표시해준다.</p><p>일반적으로는 아래와 같은 정보를 포함시키고, 사이트마다 요구하는 별도의 태그가 존재하기도 한다. 해당 사이트에서 url에 대한 미리보기를 지원하고 싶으면 해당 og를 포함시켜야한다.</p><blockquote><ul><li><p><code spellcheck="false">og:title</code> - The title of your object as it should appear within the graph, e.g., "The Rock".</p></li><li><p><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.</p></li><li><p><code spellcheck="false">og:image</code> - An image URL which should represent your object within the graph.</p></li><li><p><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>".</p></li></ul></blockquote><p>출처 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://ogp.me/#metadata">https://ogp.me/#metadata</a></p><h1>Next.js에 적용하기</h1><p>이러한 오픈그래프를 <code spellcheck="false">Next.js</code> 에서 적용시키려면 어떻게 하면 좋을까…? 바로 Next.js에서 제공하는 <code spellcheck="false">Head</code> 컴포넌트안에 메타태그를 정의해주면 된다.</p><p>오픈그래프를 적용시킬때, 해당 페이지가 단순한 웹사이트에 대한 소개인 경우가 있고, 게시글과 같은 동적으로 바뀌는 페이지가 있을것이다. 두가지 케이스를 나누어서 살펴보자.</p><h2>정적인 페이지인 경우</h2><p>정적인 경우에는 static하게 적어주기만하면 된다.</p><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><p>요런식으로 정의해주면 오픈 그래프를 적용시킬 수 있겠다.</p><h2>동적인 페이지인 경우</h2><p>그럼 게시글과 같이 동적인 페이지인 경우에는? 동적으로 가져온 정보를 넣어주면 된다.</p><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><p>여러 많은 블로그를 보다보면 배경은 똑같고 텍스트만 바꾸어서 게시글마다 썸네일을 적용 해주곤한다. 티스토리건 벨로그건 네이버블로그건 다 썸네일을 사용자가 직접 업로드해야만 가능하다.</p><img src="https://image.until.blog/morethanmin/article/1718207770965" alt="until-464"><p>썸네일을 살펴보면 텍스트 바꿔치기를 통해 반복적으로 썸네일을 만드는 경우들이 상당히 많았다. 동적으로 가져온 게시글 정보에 썸네일 정보가 있는 경우에는 해당 썸네일 이미지를 보여주고, 그렇지 않은 경우에는 동적으로 썸네일을 생성할 수 있지 않을까?</p><p>그런 오픈소스가 있는지 찾아보았다.</p><p>다양한 서비스들이 있었지만 결국 이미지를 생성해서 해당이미지를 업로드 해주어야 가능한 경우가 많았다. 간단하게는 개인 프로젝트들도 많았고, 심지어는 유료인 서비스들도 있었다.</p><p>외부 블로그 서비스를 이용하는 경우에는 그런 서비스를 사용해도 좋겠지만, 나는 블로그를 직접 만들고 있으니, <strong>url에 원하는 썸네일 정보를 보내면 동적으로 이미지를 생성해줄 수 있는 api</strong>가 필요했다. 아래 처럼 말이다...</p><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><p>여기저기 찾아보다 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></p><img src="https://image.until.blog/morethanmin/article/1718207953408" alt="until-465"><h1>한글 인코딩 이슈</h1><p>내용 그대로다. 한글을 지원하지 않는 폰트를 사용하고 있어서…. 영어만 입력이 가능했다.</p><img src="https://image.until.blog/morethanmin/article/1718207990429" alt="until-466"><p>그래서 해당 프로젝트의 이슈를 좀 찾아보니… 실제로 나와 같은 문제를 겪고 있는 사람들이 있었다.</p><h1>og-image-korean</h1><p>한글 지원하는 폰트와 기본 이미지를 바꿔서 배포했다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/morethanmin/og-image-korean">여기</a>에 들어가보면 확인할 수 있다.</p><img src="https://image.until.blog/morethanmin/article/1718208022544" alt="until-467"><ul><li><p>site: <a target="_blank" rel="noopener noreferrer nofollow" href="https://og-image-korean.vercel.app/">https://og-image-korean.vercel.app</a></p></li><li><p>github: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/morethanmin/og-image-korean">https://github.com/morethanmin/og-image-korean</a></p></li></ul><img src="https://image.until.blog/morethanmin/article/1718208085603" alt="until-468"><p>물론 리서치하고 만드는데 걸린 시간을 생각해본다면…<strong> </strong>진작 게시글 썸네일을 200장 이상 만들었을 것 같다.</p><p>언틸에도 추후 적용해보면 좋을 것 같다.</p><p></p><p></p><p></p><p></p>

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