- Projects
Frontend Kit: Adding an AI Chat Feature with Gemma 3 27B
Frontend Kit is a PWA web app for studying frontend interview questions as flashcards. Here is how I added an in-app AI chat with Gemma 3 27B.
- Projects
Open source contributions: Next.js Korean docs, es-toolkit, Frontend Fundamentals
While migrating a React portfolio I built a year ago to Next.js, I read the official docs to fill in what I didn't know about Next.js and find what I needed.
- Projects
Hosting a static site with S3 and CloudFront: deploying a React app
I had deployed React projects several times before, but only the easy 'one-click' way, mostly on platforms like Vercel, GitHub, and Spotify.
- Projects
Deploying a React Native App with Expo Hosting
I tried several commands from other blog posts and the official docs, but they didn't work. ChatGPT showed me a simple way to deploy with EAS.
- Projects
[Git] Managing My Personal Projects with a Commit Convention
I use a commit convention when writing commit titles in my personal projects. Here is my reference list of the types, from Feat and Fix to Rename and Remove.
- Projects
How I Fixed a 500 Error Caused by Next.js SSR
The cause of the 500 error was simple: with Next.js SSR, the API was called with the initial null latitude and longitude. Call it only when both values exist.
- Projects
Optimistic UI Update With useSWR
Today I learned about Optimistic UI Update in a Nomad Coders course, and I implemented it with the mutate function from useSWR.
- Projects
Fixing Twilio ERROR 21610 When Sending a Test Message
I got ERROR: 21610 when sending a Twilio test message. On a trial account, registering the allowed number under Verified Caller IDs lets the message go through.
- Projects
Next.js: accessing body data when sending a request with fetch
I sent the data validated through onValid in React Hook Form to pages / users / enter.tsx with fetch, and req.body came back undefined until I set Content-Type.
- Projects
Testing React Hook Form with Next.js
At work and in personal projects, I kept form inputs in state and wrote really long code for exceptions and errors. I think React Hook Form can simplify this.
- Projects
A Collection of Prisma CLI Commands
The Prisma and PlanetScale CLI commands I use, from logging in and the PlanetScale bridge connection to db push, Prisma Studio, and client generation.
- Projects
Image preview, delete, and drag-to-reorder in React
The key was handling onDragStart and onDragEnter events on each image, then reordering the images with splice() when onDragEnd fires.
- Projects
Connecting a PlanetScale DB with Prisma
Set up the schema.prisma file as below, then, assuming you're logged in and connected, push the schema to PlanetScale with npx prisma db push.
- Projects
PlanetScale CLI (fixing the zsh: command not found: brew error)
If you get the zsh: command not found: brew error when setting up the PlanetScale CLI, try following the steps below in order.
- Projects
Node version error when starting a Next.js project
As of November 2023, if you get an error related to node -v, installing node -v 18 or later makes it work properly.
- Projects
How to cancel a git merge
I ran git merge, got flustered when there were conflicts, and was able to cancel the last merge with the command below.
- Projects
Image Errors in My Next.js Portfolio Project
I checked my deployed Next.js portfolio project and found an image error. The Notion images were hosted on AWS, and their domain seemed to have changed.
- Projects
Replacing the Old Loading Bar with a Skeleton UI
I built a skeleton UI myself and replaced what used to be shown with a loading bar, to give users a more natural UI.
- Projects
Refactoring the Poketmon Master project
Poketmon Master is a project I worked on earlier. A team project came up in a hurry and I couldn't fully finish it, so I'm going to refactor what I left undone.
- Projects
Designing a Logo for My Job Application Portfolio Website
I'm building my own portfolio website to submit with job applications by following a Dream Coding course. Today I designed the site's logo first.
