Jake의 블로그

# ChatGPT를 사용해서 업무효율을 높힐 수 있는 경우를 정리하는 시리즈입니다 - ChatGPT는 이제 모르는 분이 없으실 것입니다. 하지만 주변에 물어보면 막상 실제 업무에 적극적으로 활용해서 사용하는 경우는 많지 않았습니다. 아무래도 챗봇의 형태다 보니 실제로 무엇을 할 수 있는지, 어떻게 원하는 내용을 얻을 수 있는지를 사용자가 알아야 하기 때문이라고 생각이 됩니다. 본 부려먹기 시리즈에서는 실제 제가 ChatGPT를 활용하는 사례와 원하는 결과를 얻는 과정을 정리하려고 합니다. 참고하셔서 업무 효율에 도움이 되셨으면 좋겠습니다 # ChatGPT를 사용한 NextJS SEO 작성하기 - ChatGPT가 4.0으로 넘어오면서, 웹 페이지를 탐색할 수 있는 기능이 추가되었습니다. 이 기능을 사용하기..

# Tailwindcss를 효율적으로 쓸 수 있게 도와주는 daisyUI 소개 - 지금은 적극적으로 Tailwindcss를 사용하지만, 처음 Tailwindcss를 알게되고, 몇 번 사용을 시도하다가 그만두었던 이유 중 하나가 className에 너무 많은 코드를 넣어야 한다는 점이었다. 익숙해지고 나서는 이 부분이 기존의 다른 스타일 정의 방법에 비해서 체감 상 불편하다고 느끼지는 않게 되었지만, 여전히 효율적인 부분에 대한 아쉬움이 있었다. 그리고 구체적인 스펙이 정의되어 있지 않은 토이 프로젝트나, 디자이너 없이 개발을 하는 경우, 어느정도 기본적인 스타일링을 제공해 주는 UI 프레임워크들이 그리워지고는 하였다. 마침 이번에도 그러한 아쉬움이 들어 검색을 하던 중에 오늘 소개할 daisyUI를 발견..

# react-notion-x를 사용해서 React에서 Notion 페이지 보여주기 - Notion은 쉽게 웹 상에 공개된 페이지를 만들 수 있고, 기본 제공되는 디자인이 훌륭하기 때문에, 약관 동의나 사용법과 같은 서비스의 직접 적인 이미지나 기능에는 영향을 주지 않지만, 제공 되어야 하는 페이지를 작성하는데 자주 사용합니다. 그런데 Notion 페이지를 직접 링크를 걸어 보여주는 방법도 있지만, 이럴 경우 사용자가 Notion으로 이동해야 한다는 점이 불편합니다. 오늘 포스팅에서는 이런 경우 도움이 될 수 있는 라이브러리를 소개하려고 합니다. # Github Page https://github.com/NotionX/react-notion-x GitHub - NotionX/react-notion-x: ..

# @next/font를 활용한 Google Font 최적화 적용 방법 소개 - NextJS를 사용해서 웹 개발을 하다보면 기존의 웹 개발에서 사용하던 방법과 다르게 리소스를 더 최적화해서 적용하는 방법을 제공하는 경우가 많습니다. 본 포스팅에서는 NextJS 13부터 사용할 수 있는 폰트 최적화 방법을 소개하려고 합니다. 이에 대한 공식 문서를 참조하셔도 좋을 것 같습니다 # 적용 방법 - @next/font 라이브러리를 설치해 줍니다. 기본 nextjs에는 포함되어 있지 않기 때문에, 설치를 해주셔야 합니다 yarn add @next/font - 사용방법은 아래와 같이 정말 간단합니다. Google Fonts에서 제공하는 폰트를 웹 폰트를 추가하는 등의 작업 없이 쉽게 적용시킬 수 있다는 점이 매력적..

# NextAuth.js를 활용한 초간단 소셜 로그인 구현 방법 소개 - Next Auth는 NextJS를 위한 오픈소스 authentication 솔루션이라고 문서에서는 소개하고 있습니다. NextJS를 사용해서 개발할 계획을 가지고 있으신 분들은 한 번 쯤 고려해보길 추천드립니다. 고도화된 서비스에서의 Authentication을 제공하기 위해서는 추가적인 학습 및 개발이 필요할 수 있겠지만, MVP나 사이드 프로젝트 등과 같이 최소한의 로그인과 이를 데이터 베이스에 연동하는 정도의 기능으로 충분하다면, 정말 빠른 시간안에 개발이 가능합니다. 본 포스팅에서는 설치 및 간단한 소셜 로그인 구현 과정을 포스팅하려고 합니다 ※ NextJS를 전제로 구현된 솔루션이기 때문에 NextJS에 대한 사전 지식이 ..