free islet

Gemini API 테스트에서 테스트한 Gemini API를 Next.js 홈페이지 만들기에서 만든 사이트에 연동하였다. Vercel AI SDK 연동 Vercel AI SDK에서 제공하는 useChat 훅을 이용하면 Gemini API 테스트 시 직접 구현했던 message 히스토리 관리를 편하게 할 수 있다. 다음은 Google 연동 매뉴얼을 따라서 간단하게 gemini 챗봇을 연동해 본 화면과 주요 소스코드이다. 'use client' import { useChat } from 'ai/react' export default function GeminiChatbotPage() { const { messages, input, handleInputChange, handleSubmit } = useChat..

CSS path 애니메이션 CSS에서 offset-path와 offset-distance 속성을 사용하여 path 애니메이션을 만들 수 있다. offset-path 속성은 SVG path 엘리먼트의 d 속성에 사용하는 path 문자열을 path 함수에 넣어 설정한다. offset-distance 속성은 "0%", "100%"와 같이 퍼센트를 입력한다. 다음 코드는 Framer motion 라이브러리를 통해 offset-distance를 점차 증가시켜서 path 애니메이션을 만드는 간략한 예시이다. 이런 방식으로 만든 path 애니메이션 예제를 code sandbox에서 찾을 수 있었다. offset-path 스케일링 이슈 offset-path를 설정할 때 스케일을 지정할 수 없는 문제가 있다. 위 예제에..

Next.js 프로젝트 스택 검토 (2023) 대로 홈페이지를 다시 만들기 위한 세 번째 단계로 Lucia를 사용하여 인증을 구현했다. GitHub OAuth App 생성 GitHub OAuth 연동을 위해 https://github.com/settings/developers에서 OAuth app을 생성한다. (Create a GitHub OAuth app 참고) Application name, Homepage URL을 적절히 채우고, Authorization callback URL에는 "http://localhost:3000/login/github/callback"을 입력한다. app의 Client ID와 Secret을 다음과 같이 .env.local에 추가한다. GITHUB_CLIENT_ID=".....

Next.js 프로젝트 스택 검토 (2023) 대로 홈페이지를 다시 만들기 위한 두 번째 단계로 Kysely를 사용하여 PlanetScale 데이터베이스를 연동했다. PlanetScale 데이터베이스 셋업 https://planetscale.com/docs/tutorials/planetscale-quick-start-guide를 따라하면 정말 쉽게 새 데이터베이스를 만들 수 있다. 데이터베이스 생성이 끝나면 대시보드에서 DB 상태를 비롯해 각종 정보를 볼 수 있다. 우측의 Connect 버튼을 누르면 username 등의 DB 접속 정보를 확인할 수 있는데, Connect with에서 MySQL CLI를 선택하면 나오는 명령을 참고하여 일반적인 DB 클라이언트에서 접속 가능하다. 다음은 MySQLWork..

Next.js 프로젝트 스택 검토 (2023) 대로 홈페이지를 다시 만들기 위한 첫 번째 단계로 shadcn/ui를 추가했다. shadcn/ui 셋업 https://ui.shadcn.com/docs/installation/next의 가이드를 참고하여 shadcn/ui를 셋업한다. 다음 명령으로 shadcn-ui를 초기화한다. 설정을 위한 질문에는 모두 디폴트값을 선택한다. npx shadcn-ui@latest init Would you like to use TypeScript (recommended)? no / yes Which style would you like to use? › Default Which color would you like to use as base color? › Slate Whe..

Next.js 프로젝트를 GitHub pages에 배포하기에서 사용한 Static Site Generation(SSG) 방식으로는 홈페이지를 만드는데 한계가 있어서, 서버 호스팅을 포함해 웹앱 개발 및 배포에 사용할 기술스택을 살펴보았다. 2023년 기준 스택이고, 무료 호스팅만 검토했다. 참고: https://dev.to/livecycle/how-to-host-your-side-projects-for-free-in-2023-from-auth-to-database-42im How to host your side-projects for free in 2023: from Auth to Database TL;DR In this article, we'll look at how you can host your s..

Next.js 프로젝트 생성 글에서 만든 Next.js 보일러플레이트를 개인 홈페이지로 바꾸기 위해 몇 가지 기본적인 내용을 적용했다. Next.js 홈페이지 만들기 - 한글 폰트 (1/3) Next.js 홈페이지 만들기 - 다크 모드 (2/3) Next.js 홈페이지 만들기 - 기본 레이아웃 (3/3) 웹사이트 구조 홈페이지를 포트폴리오 사이트스럽게 만들기 위해 웹사이트 상단에 제목과 네비게이션 바를 포함하는 헤더를 배치하려고 한다. 이를 위해 header.tsx 파일을 추가하였다. 세부 페이지는 dynamic route를 사용하지 않고, app 폴더 밑에 직접 페이지용 폴더와 page.tsx 파일을 생성하였다. About 페이지를 위한 about 폴더 하나만 추가했는데, 추후에 Nextra, gray..

Next.js 프로젝트 생성 글에서 만든 Next.js 보일러플레이트를 개인 홈페이지로 바꾸기 위해 몇 가지 기본적인 내용을 적용했다. Next.js 홈페이지 만들기 - 한글 폰트 (1/3) Next.js 홈페이지 만들기 - 다크 모드 (2/3) Next.js 홈페이지 만들기 - 기본 레이아웃 (3/3) 다크 모드 (with Tailwind) next-themes 패키지를 설치하여 비교적 손쉽게 다크 모드를 추가할 수 있다. Tailwind config 수정 tailwind는 OS 설정에 따라 다크 모드를 지원한다. 다크 모드를 직접 설정하려면, 아래와 같이 tailwind.config.ts 파일에서 darkMode 값을 "class"로 설정해야 한다. /** @type {import('tailwindc..

Next.js 프로젝트 생성 글에서 만든 Next.js 보일러플레이트를 개인 홈페이지로 바꾸기 위해 몇 가지 기본적인 내용을 적용했다. Next.js 홈페이지 만들기 - 한글 폰트 (1/3) Next.js 홈페이지 만들기 - 다크 모드 (2/3) Next.js 홈페이지 만들기 - 기본 레이아웃 (3/3) 한글 폰트 적용 (google font) Next.js 보일러플레이트의 Inter 폰트 대신 한글 폰트를 기본으로 사용하도록 수정했다. 구글 폰트 브라우저에 나오는 한글 폰트 중 Noto Sans Korean을 선택했다. 다음과 같이 layout.tsx에서 Inter를 Noto_Sans_KR로 바꿔주면 간단하게 기본 폰트가 변경된다. import { Noto_Sans_KR } from 'next/font..

Next.js 프로젝트를 GitHub pages에 배포하려면 다음 과정을 거치면 된다. static site 빌드 GitHub에 올리기(push) GitHub pages 노출 설정 Next.js GitHub pages 배포 샘플 프로젝트를 참고하여 그 과정을 정리하면 다음과 같다. 프로젝트 GitHub 등록 우선 새 repository를 만들어서 Next.js 프로젝트를 올린다. next.config.js 수정 next.config.js 파일을 다음과 같이 수정한다. const nextConfig = { output: 'export', basePath: '/(repository 이름)', } static site 생성을 위해 output: 'export' 설정을 추가한다. 이렇게 지정하면 next bui..