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..

2023년 12월 구글 Gemini의 확장된 버전이 공개되었다. Gemini 소개글: https://korea.googleblog.com/2023/12/blog-post_652.html 가장 유능하고 범용적인 AI 모델 제미나이(Gemini)를 소개합니다 모든 사람들에게 더욱 유용한 AI를 만듭니다 이 블로그는 구글 The Keyword 블로그( 영문 )에서도 확인하실 수 있습니다. 순다 피차이(Sundar Pichai) 구글 및 알파벳 CEO 기술의 변화는 과학의 발전, 인류 korea.googleblog.com Gemini로 간단하게 프롬프트를 테스트해본 내용과 API 테스트 결과를 정리해둔다. Gemini 테스트 Google AI Studio에서 gemini를 체험할 수 있으며, UI는 ChatGP..

Jupyter처럼 쓸 수 있는 javascript 용 노트북을 찾다가 Node.js Notebooks (REPL)이라는 vscode 플러그인을 찾아서 설치해 보았다. 플러그인 설치 vscode 플러그인(Cmd + Shift + X) 화면에서 "node.js notebook"을 검색하면, 첫 번째로 Node.js Notebooks (REPL) 플러그인이 뜬다. 이 플러그인을 설치한다. 노트북 테스트 새 코드 셀에서 console.log 함수를 실행했을 때, 다음과 같이 정상적으로 결과가 출력된다. plotly 샘플 코드도 다음과 같이 정상 동작한다. (plotly 패키지는 Node.js Notebook (REPL)에서 자체 지원) JavaScript/TypeScript 뿐 아니라 Shell 명령도 실행 가..

깨비가 한창 빠져 있는 로블록스 맵을 어설프게나마 한 번 만들어 보았다. 우선 로블록스 스튜디오를 설치해서 튜토리얼을 따라해보고, 가이드 문서를 훑어본 후에, 기본 템플릿으로 새 맵을 생성했다. 마켓 플레이스에 공짜 리소스가 많이 있어서 가져다가 맵 꾸미기가 수월했는데, christmas로 검색 후에 크리스마스 트리를 몇 개 배치했다. 배경음악과 눈 파티클, 불꽃놀이 효과도 추가했다. 그렇게 몇 십 분 만에 만든 첫 번째 맵을 로블록스에 배포했다. 로블록스 스튜디오의 툴 자체 기능도 (유니티나 언리얼 만큼은 아니어도) 꽤 괜찮았지만, 무엇보다도 로블록스 배포를 너무나 손쉽게 할 수 있어서 감동... 이렇게 올린 맵을 깨비에게 보여주니, "와, 크리스마스 트리네! ... 근데 게임은 어딨어?" ㅋㅋ쿠ㅜㅜ ..

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..