Skip to content

Tags

Tags

71 posts

Browse posts by topic

Development

TypeScript 7.0

TypeScript 7.0 Release: A Native Compiler Rewritten in Go TypeScript 7.0 has been officially released. The heart of this major version is a complete native…

typescript7min read
Development

Vite 8.0

Vite 8.0 Release: The Unified Toolchain and Migration Guide On March 12, 2026, Vite 8.0 was officially released. The heart of this major version is the Unified…

bundler4min read
Development

Frontend Harness Engineering

1. What Is Harness Engineering? It is the discipline of designing the entire execution environment surrounding an AI model (tools, feedback loops, safeguards,…

AIHarnessClaude6min read
Development

Vite 7.0

Vite 7.0 Release: Key Changes and Migration Guide On June 24, 2025, Vite 7.0 was officially released. This major version includes significant changes such as…

bundler3min read
Development

Vite 6.0

Installing Changes - Introduction of the Environment API - A new API designed to provide a development experience closer to production - Enhanced flexibility…

bundler3min read
Development

figma mcp link

Development Environment - VSCode version: 1.99 or higher - Copilot account required How to Integrate with Copilot Issuing a Figma API access token Step 1:…

mcp4min read
Development

react v19

Overview React 19 introduces a number of new features and improvements that enhance the developer experience, simplify common patterns, and boost performance.…

react11min read
Development

nextjs 15

Overview This release incorporates features that were built on top of RC1 and RC2. It focuses on stability while also introducing a number of other features.…

nextjs7min read
Development

CRA To Vite Migration

Why You Should Use Vite Problems with Traditional Module Bundlers - Before browsers natively supported ES Modules (Native ESM), JavaScript modularization could…

bundler13min read
Development

Nextjs(v14)

Installation Summary - Internet Explorer has been dropped from the list of supported browsers, and support has shifted to modern browsers. - Chrome 64+ - Edge…

nextjs2min read
Development

esbuild

Characteristics of esbuild - Written in Go and compiled using static (native) code There are three ways to describe how code written in a programming language…

bundler6min read
Development

PNPM

Background Problems with the NPM and Yarn Classic (1.0) Package Managers Phantom Dependencies - Both yarn classic (1.0) and npm (v3+) use hoisting and merging…

package manager5min read
Development

Removing Unused Dependencies

npm-check Installization Batch Update yarn autoclean What is yarn autoclean - Cleans up and removes unnecessary files from package dependencies (files…

performance1min read
Development

React v18 migration

React v16 to v18 Migration Guide (with Best Practice Code) Updates to Client Rendering APIs Migration The new root API also enables the new concurrent…

react5min read
Development

next14 migration

Update React Installation When you get the "'Component' cannot be used as a JSX component." error This issue occurs because installing the latest version of…

nextjs6min read
Development

CORS (Cross-Origin Resource Sharing)

Overview CORS (Cross-Origin Resource Sharing) is a mechanism that tells the browser whether it is allowed to access resources from a different origin (origin:…

server7min read
Development

react-hook-form inside code

Creating the Form object There are cases where, after setting data in useForm for the first time and setting defaultValues, changing it again afterward does…

form3min read
Development

Gatsby(v5)

Key Features Slice API Common components can now be built just once, which improves build performance. In other words, when a component split out as a Slice…

Gatsby4min read
Development

A Summary of React State Management

The Background Behind the Emergence of Global State Management Libraries When React was first released, it was announced as a library responsible only for the…

State Management12min read
Development

Nextjs(v13)

Installation Summary - Internet Explorer has been dropped from the list of supported browsers, and the set of modern browsers is now supported instead. -…

nextjs4min read
Development

react-hook-form v7

Installation react-hook-form v5 → v7 changes useForm Removed the validation prefix from config option names The errors object was moved to become a property of…

form2min read
Development

nodejs

Concepts - Introduction to node.js and its internal architecture http://bcho.tistory.com/881 - Installation and setting up a development environment…

nodejs8min read
Development

Tree Shaking

Overview An optimization technique that removes unnecessary code , much like shaking a tree to knock off its dead branches. - When using Webpack version 4 or…

performance3min read
Development

ECMAScript

ES2024(ES15) Features added in ES2024 ECMAScript® 2024 Language Specification ECMAScript 2024, the 15th edition, added facilities for resizing and transferring…

javascript12min read
Development

react-query(v5)

What's new in v5 Install react-query renamed to @tanstack/react-query Requirements New Features - Simplified optimistic updates - Using the variables needed…

state management6min read
Development

zustand

Reference code: GitHub - seungahhong/states-todos Installation zustand Concepts - State management overview These days, approaches to state management can…

state management4min read
Development

react-query(v4)

Install Migrating from react-query → @tanstack/react-query Supported Range - typescript - TypeScript v4.1 or greater - Supported Browsers - Starting from v4,…

State Management4min read
Development

Playwright

Before We Begin.. (vs. Cypress) Why Did We Move from Cypress to Playwright?? Pain Points When Developing with Cypress - We felt that loading the test…

test20min read
Development

FE Development Process

Preliminary Work 1. Review Planning and Design - Review wireframes and design drafts - Design and share a plan for shared componentization based on the design…

process5min read
Development

react-query

Overview - A Data Synchronization Library for React - It makes fetching, caching, synchronizing, and updating server state in a React application easy. Server…

state management6min read
Development

cypress

What is E2E Testing? - E2E testing is a way to test the final product from the user's perspective. It refers to End-to-End Testing that verifies, from the…

test8min read
Development

msw

Why You Should Adopt a Mocking Library Current Frontend Issues - When developing a new feature - When frontend development proceeds in parallel with backend…

msw9min read
Development

jest

Basic Usage react testing library - Installation - Things to watch out for when using it Reference URLs…

test17min read
Development

emotion

Without a React Framework - Installation - Description - It doesn't require any additional setup, a babel plugin, or other configuration. - It supports auto…

css2min read
Development

jotai

Installation Reference Code Reference code: GitHub - seungahhong/states-todos Explaining Jotai's Concepts and Strengths - State management overview Recent…

state management4min read
Development

React 18

Installation Upgrading React DOM 17 → 18 Client Starting from React 18, react-dom's render function is deprecated. Automatic Batching (fewer renders) Batching…

react6min read
Development

css-in-js

Why was CSS-in-JS created? CSS-in-JS, as the name suggests, refers to the approach of writing CSS within JavaScript code. It was first introduced in 2014 by…

css4min read
Development

form

Javascript Form Design hook-form vanilla javascript design Javascript Form vs React Form easier data control easier inputs, inputs event better validation…

form3min read
Development

SWR

What is SWR? - A React Hooks library for remote data fetching, created by zeit, the group behind Next.js - SWR is a strategy that first returns the data from…

state management2min read
Development

canvas

Canvas API - The Canvas API provides a means for drawing graphics via JavaScript and the HTML CANVAS element. Among other things, it is used for animation,…

canvas8min read
Development

javascript

- JavaScript 6 10 reference sites Nomad Courses

javascript1min read
Development

redux-toolkit

What is Redux Toolkit? - The Redux Toolkit library was created to address three concerns the Redux team had. 1. Configuring a Redux store is too complicated.…

state management3min read
Development

recoil

What is Recoil? Reference code (redux-toolkit vs recoil): https://github.com/seungahhong/states-todos Limitations of React's state management logic -…

state management5min read
Development

storybook

Purpose of Adoption - As planning and design proceed in parallel and the spec keeps changing, the goal is to reflect those changes and share them with planners…

storybook3min read
Development

react-router-v6

v6 React Router v6 Official Release The v6.0.0 beta was promoted to a full release on November 4, 2021. Upgrading to React v16.8 or Higher That said, since…

react-router6min read
Development

redux-saga

What is redux-saga? A middleware library whose purpose is to make handling side effects in React/Redux applications easier and cleaner. Installation Installing…

state management4min read
Development

React 17

v17 Installation No more 'import React ...' To use JSX, you always had to import React (even if you didn't reference it explicitly). This was because JSX code…

react5min read
Development

typescript

Why should we use TypeScript? TypeScript makes code easier to read. - By explicitly annotating types for variables, return values, interfaces, and so on, the…

typescript5min read
Development

RxJS

RxJS Concepts RxJS is the Reactive Extensions For JavaScript library. ReactiveX combines the Observer pattern, the Iterator pattern, and functional programming…

RxJS7min read
Development

graphql

What Is a REST API - A format agreed upon between the parties that exchange data - GET: retrieve information - POST: submit information - PUT/PATCH: update…

graphql3min read
Development

webassembly

Why WebAssembly Emerged Various attempts to bring native machine code to the web and to execute it quickly—such as Google's NaCI(Native Client) and Mozilla's…

webassembly5min read
Development

mobx

What is mobx? Reference code: GitHub - seungahhong/states-todos Installation 1. Concepts and key strengths of Mobx - Core concepts of Mobx - observable state -…

state management3min read
Development

redux

Redux Concepts Action When some change needs to happen to the state, we dispatch what is called an action. An action is represented as a single object, and an…

state management2min read
Development

svelte

SVELTE Svelte is a frontend framework created by Rich Harris that takes a fresh approach. Svelte introduces itself as a "framework without a framework" or a…

svelte3min read
Development

deno

deno Ryan Dahl, the creator of node.js, introduced his new project, "Deno," at the JS Fest 2019 Spring conference. In this talk titled "A New Way to…

server6min read
Development

Front-End Performance

JavaScript Memory Leaks Accidental Global Variables - Global variables cannot have their memory released (when they are not set to null or reassigned).…

performance19min read
Development

Concept

Client-Side Storage Cookies - Once a cookie is set, every subsequent web request is sent to the server including the cookie information - Stores strings only,…

Archive12min read
Tools

web tools

Blog Theme - Creating a personal blog using a Jekyll theme - Blog Theme 1 - Blog Theme 2 Open Icon - A page where you can download the icons you need for web…

tools3min read
Development

C/C++

C Global Variables 1. Characteristics - Declared outside of functions - Occupies a specific region of memory (heap) and is accessible from all functions -…

windows2min read
Development

Windows API

windows programming - Advantages of Windows 1. A graphics-based operating system - The screen is handled in pixels, the smallest unit of digital…

windows82min read
Development

MSSQL

Terminology - Transaction: Treating multiple data changes as a single logical unit of work so that everything is either completed or rolled back, maintaining…

database36min read
Docs

pdf

PDF File Format The PDF file format is broadly divided into four areas: the Header, the Body, the Cross-reference Table, and the File Trailer. The role of each…

pdf12min read