shdev.blog 개인 기술 블로그

OKLCH - A new choice for better web design thumbnail

OKLCH - A new choice for better web design

Learn what the OKLCH color space is, how it overcomes the limitations of traditional RGB and HSL, and how it can be used in web design.

Read article
CSS

Latest Post

Understanding the order in which .env files are applied (feat. NextJS) thumbnail

Understanding the order in which .env files are applied (feat. NextJS)

Understand the prioritization of environment variable files so you can effectively manage environment variables in your project context. Let's see how this applies to development, test, and production environments.

Next.jsenv-cmd
What is GraphQL? thumbnail

What is GraphQL?

Learn about GraphQL, a data query language created to overcome the limitations of REST APIs, and its pros and cons compared to REST APIs.

GraphQL
Learn the security attributes HttpOnly, Secure, and SameSite for web cookies thumbnail

Learn the security attributes HttpOnly, Secure, and SameSite for web cookies

Let's take a look at the security properties of cookies - HttpOnly, Secure, and SameSite - and see how they protect your web application.

Web
[HTML] Getting to know the tabindex property thumbnail

[HTML] Getting to know the tabindex property

If there's one HTML property that many developers don't know about or tend to overlook, it's tabindex.

HTML
[Three.js] Exploring Various Lights thumbnail

[Three.js] Exploring Various Lights

We've covered the characteristics and uses of the different light types provided by Three.js (AmbientLight, DirectionalLight, PointLight, SpotLight, HemisphereLight, and RectAreaLight) with examples.

Three.js
Generating dynamic Open Graph images with the @vercel/og library thumbnail

Generating dynamic Open Graph images with the @vercel/og library

Learn how to utilize Vercel's @vercel/og library in Next.js to implement dynamic OG images for your multilingual site. Easily create language-specific text and images, customize fonts, and more!

vercel/og
Implementing blog search functionality with pagefind thumbnail

Implementing blog search functionality with pagefind

Add search functionality to your blog quickly and easily with pagefind, a client-side search library for static websites.

Next.jsPagefind
Server Actions are not running intermittently thumbnail

Server Actions are not running intermittently

Analyzing and resolving an issue where Server Action callbacks were intermittently not firing in Vercel's serverless environment.

VercelNext.js
[Three.js] Gemometry, Materials, Mesh thumbnail

[Three.js] Gemometry, Materials, Mesh

Let's take a look at the three core elements that make up a 3D Object in Three.js: Geometry, Materials, and Mesh.

Three.js
Automate your multilingual blog with the DeepL API thumbnail

Automate your multilingual blog with the DeepL API

Here's how we built an automated translation system using the DeepL API to efficiently implement multilingual support for our tech blog.

DeepL API
Server Component Rendering Strategy thumbnail

Server Component Rendering Strategy

Understand the rendering strategies and caveats of the Server Component, and also cover issues that can arise when using it with Parallel Routes and how to resolve them.

Next.js
[Three.js] Scene, Renderer, Camera thumbnail

[Three.js] Scene, Renderer, Camera

Let's take a look at the three most basic things you need to represent something in Three.js: a Scene, a Renderer, and a Camera.

Three.js
TypeScript's typeof operator thumbnail

TypeScript's typeof operator

The typeof operator in JavaScript, its differences in the context of TypeScript, and its many uses

TypeScript
Official Documentation Synchronizing with Effect Read and Organize thumbnail

Official Documentation Synchronizing with Effect Read and Organize

Read the official documentation on effects in React to learn how to use them correctly.

React
Learn what React Suspense is and how to use it thumbnail

Learn what React Suspense is and how to use it

Learn more about how Suspense came to be, how it works in practice, and in what situations it does and does not work.

React
Why you can't use variables in middleware's matcher thumbnail

Why you can't use variables in middleware's matcher

Let's analyze the source code of Next.js to understand the issues that arise when using variables in the Next.js middleware matcher and what causes them.

Next.js
Learn Git cherry-pick thumbnail

Learn Git cherry-pick

git cherry-pick is a command that selectively pulls certain commits to a different branch, which is useful for bug fixes, feature migrations, and release management.

Git
Using Tanstack Virtual thumbnail

Using Tanstack Virtual

Optimize your DOM with list virtualization with Tanstack Virtual!

JavaScriptReact
Understanding Named vs. Default Exports thumbnail

Understanding Named vs. Default Exports

Learn about Named Export and Default Export

JavaScript
Getting the color property in Tailwind CSS thumbnail

Getting the color property in Tailwind CSS

Import the color types you set in your Tailwind CSS!

TailwindCSS
Issues with static rendering thumbnail

Issues with static rendering

I ran into an issue with static rendering in Next.js that was working fine, but wasn't working as expected.

Next.js
Using Server Components inside Client Components thumbnail

Using Server Components inside Client Components

In Next.js, all components work on the server by default. Let's see how we can use this inside client components as well.

Next.jsReact

TAGS

Next.jsenv-cmdGraphQLWebHTMLThree.jsvercel/ogPagefindVercelDeepL APITypeScriptReactGitJavaScriptTailwindCSS