모든 글

Tailwind CSS v4.0

제가 최근 가장 많이 사용하는 CSS 도구인 Tailwind CSS이 v4.0 알파버전이 공개되었습니다.

The Two Reacts

RSC - 2개의 React: 서버에서 리액트, 클라이언트에서 리액트 (by Dan Abramov)

모노레포에 관하여

모노레포가 무엇인지? 모노레포를 왜 사용하는지에 대해 알아보았습니다.

React Server Components 이해하기(by Josh.W.Comeau)

Josh W Comeau가 설명해주는 React Server Components

React Server Components 이해하기

React Server Components를 언제 사용할지를, 왜 사용해야되는지를 이해하기 위해 Vercel 블로그 글을 옮기며 정리해보았습니다.

React 18이 애플리케이션 성능을 향상시키는 방법

React 18 어떤 점이 애플리케이션 성능향상에 도움이 될까요? Vercel 블로그 글을 옮기며 정리해보았습니다.

React 연대기

React 역사를 살펴보며 주요 여정들을 낙서처럼 정리해놓은 글입니다.

Next generation(Next.js 13.4)

Next.js 13.4 버전 릴리즈와 함께 드디어 App Router가 Stable로 전환되었습니다. Nex.js 13.4 업데이트 기능을 살펴보았습니다.

ChatGPT Prompt Engineering for Developers

개발자를 위한 ChatGPT 프롬프트 엔지니어링 강의를 듣고 정리해본 글입니다.

RSC Mental Model

React Server Component가 뭔지, 어떻게 이해하면 좋을 지에 대한 Dan Abramov의 멘탈 모델 설명을 옮겨보았습니다.

The End of Front-End Development

GPT-4와 같은 AI로 놀라운 결과물을 만들어내는 것을 보았습니다. 프론트엔드 직업을 가진 사람들은 곧 존재하지 않게 될 거란 의견도 많습니다. 이제는 프론트엔드 개발자가 필요하지 않을까요? Josh.W.Comeau의 글을 옮겨보았습니다.

Next.js 13.3

점점 더 모습을 갖추어 가는 App Router.

You don't need a build step

자바스크립트 진영에서 빌드가 표준이 된 이유와 Deno는 어떻게 이를 해결했는지에 대한 글입니다.

Complex Context APIs

중첩된 다중 Context API를 사용할 경우의 문제와 해결방법을 알아보았습니다.

Next.js 13.2

Next.js App Router(/app) Major 업데이트

PlanetScale + Prisma + Next.js

PlanetScale과 Prisma를 사용해보았습니다.

Next.js 13.1

Next.js의 13.1 업데이트된 내용을 확인해보았습니다.

동적으로 Image 만들기, edge-function을 곁드린

최근 Vercel에서 satori라는 HTML,CSS to SVGs Converter를 공개했습니다. 어떻게 동작하는지, 그리고 이를 이용해 어떻게 Dynamic OG Image Generator를 새롭게 만들었는지 확인해보고 직접 사용해보았습니다.

리액트 앱에 대한 프로파일링

성능 문제로 인해 리액트 앱을 분석하려면 어떻게 해야될까요? 어떤 점을 주의해야 될까요? Kent C.Dodds가 작성한 Profile a React App for Performance를 옮기며 확인해보았습니다.

Next.js 13

Next.js 13버전이 공개되었습니다. 새로운 Routing System을 포함하여 React 18 기능과 함께 동작하는 흥미로운 기능이 많이 추가되었습니다. 어떤 기능들이 추가되었는지 확인해보았습니다.

ESM + TypeScript

JavaScript의 모듈 시스템에 대해 간단히 이해해보고 Node.js와 TypeScript에서 ES Module를 지원하고 사용하는 방법에 대해 알아보겠습니다.

Nextjs Layouts RFC Update

Next.js의 새로운 Route와 Layouts에 대한 RFC 내용이 업데이트 되었습니다. 그 내용을 옮겨보았습니다.

Nextjs 12.3

Next.js 에서 새로운 기능과 함께 12.3 버전이 릴리즈 되었습니다. 어떤 내용이 포함되어 있는지 옮겨보았습니다.

Understanding useMemo and useCallback

useMemo와 useCallback이 대한 이해를 쉽게 풀어낸 Josh.W.Comeau 글을 옮기면서 정리해보았습니다.

Why React Re-Renders

왜 리액트는 리렌더링 될까요? Josh.W.Comeau 블로그에서 좋은 글이 있어 옮겨보면서 이해하고 정리해보았습니다.

Remix@1.6.5

Remix 버전이 꾸준하게 릴리즈되고 있으며 다양한 개발자 경험을 제공하고 성능 향상을 위해 업데이트 되고 있습니다. 1.6.5 버전은 loader, action 타입에 대한 편의기능이 업데이트되었습니다.

ECMAScript 2022

얼마 전 2022년 6월 22일에 ECMA International TC39는 ECMAScript 2022(EMCA-262 13판)를 승인했습니다. ES2022에 대한 내용을 살펴보았습니다.

Remix 맛보기 (2)

Remix에 대해 한 번 살펴보기 위해서 공식 예제를 따라가며 Remix에 대해서 살펴보았습니다. 2개 포스트로 나눠서 작성해보았고 이 글은 두 번째 글입니다.

Remix 맛보기 (1)

Remix에 대해 한 번 살펴보기 위해서 공식 예제를 따라가며 Remix에 대해서 살펴보았습니다. 2개 포스트로 나눠서 작성해보았고 이 글은 첫 번째 글입니다.

Great Developer Experience (Vercel)

Vercel의 DevRel를 리딩하는 Lee Robinson이 개발자 경험에 관한 짧은 블로그 글을 썼습니다. 그 글을 옮겨보았습니다.

Should I use pixels? or ems/rems?

"Pixel을 써야하는지? rem을 써야하는지?" 라는 질문에 대해 JoshWComeau 블로그에 이와 관련한 좋은 글이 있어서 정리하는 시간을 가져보았습니다.

Nextjs Layout RFC: New Routing System

Next.js에서 새로운 라우팅 시스템에 대한 RFC를 공개했습니다. 새로운 라우팅 시스템과 React 18에 맞춰서 어떻게 동작하는지에 대해 설명합니다.

React RFC: useEvent()

React 팀에서 새로운 Hook인 useEvent()에 대한 RFC를 공개했습니다. 어떤 문제점에서 출발했는지 살펴보았습니다.

Fixing race condition in React

React data fetch를 다룰 때 자주 마주치는 race condition 문제에 대해 어떤 해결방법이 있는지 확인해보았습니다.

React Hydration 문제에 대해서

React SSR에서 Hydration에 대한 여러가지 측면을 살펴보았습니다.

Traditional Approaches vs Suspense in React

React에서 Data Fetch를 다루는 전통적 방법과 Suspense를 사용하는 방법을 비교해봅니다.

Debug React "Hello world"

React 또는 Web에서 디버깅은 어떻게 해야될까요? 그에 관해 간단하게 알아보았습니다.

New features in React 18

React 18이 정식으로 릴리즈 되었습니다. 많은 기능들이 소개되었고 그 기능들을 조금 더 살펴보았습니다.

Use A Reverse Proxy(Nginx)

리버스 프록시를 사용하는 이유와 Nginx를 이용한 리버스 프록시 설정 방법에 대해 알아보았습니다.

Delightful React File/Directory Structure

리액트 프로젝트 파일, 디렉토리 구조를 어떻게 구성해야 될까요? 여기서 그 중 하나의 방법을 소개합니다.

웹 렌더링

웹 개발을 하다보면 사용자 경험을 위해 더 효율적인 렌더링을 고민해보셨을 겁니다. 그 고민을 조금이라도 해결해보고자 웹 렌더링에 대해 살펴보았습니다.

Github Copilot

Github Copilot을 써보고 난 후 느낀점에 대해서 간략하게 작성해보았습니다.

Nextjs + React Server Component

Next.js와 React Server Component가 무엇인지 경험해보기 위해 예제를 따라가면서 정리해보았습니다.

Github Code Search

Github의 검색기능은 개발자들에게 매우 유용한 기능입니다. 이번에 공개된 Github의 검색 사이트인 Github Code Search에 대해서 알아보았습니다.

Figma cube, skew plugin

피그마에서 큐브와 스큐를 쉽게 만들 수 있는 플러그인을 사용해보았습니다.

디자인 시스템

디자인 시스템에 관심을 갖게 되어 유수의 기업에서 어떻게 디자인 시스템을 구축하고 사용하는지 짧게 살펴보았습니다.

JavaScript Eventing Deep dive

JavaScript에서 이벤트 진행방식을 확인해보면서 조금 더 이해해보았습니다.

웹 사이트 성능(4) - Core web vitals, CLS

웹 사이트 성능 지표인 Core web vitals의 CLS(Cumulative Layout Shift)에 대해 알아보았습니다.

웹 사이트 성능(3) - Core web vitals, FID

웹 사이트 성능 지표인 Core web vitals의 FID(First Input Delay)에 대해 알아보았습니다.

웹 사이트 성능(2) - Core web vitals, LCP

웹 사이트 성능 지표인 Core web vitals의 LCP(Largest Contentful Paint)에 대해 알아보았습니다.

웹 사이트 성능(1) - 지표

웹 사이트 성능을 측정하기 위한 지표들이 어떤 것들이 있으며, 어떤 것들을 중점적으로 측정해야 하는지 알아보았습니다.

JavaScript 동작 원리

JavaScript 엔진, 런타임, Call Stack, Heap 등 동작원리를 알고 있다면 조금 더 효율적인 개발을 할 수 있지 않을까 하는 생각에 JavaScript가 브라우저에서 어떻게 해석되고 동작되는지 알아보았습니다.

JavaScript Object(2) - Class

JavaScript에서 Class Syntax와 사용법, 특징에 대해서 살펴보았습니다.

JavaScript Object(1) - Prototype

JavaScript 지식을 더 이해하고자 객체 기반의 본질을 이해하기 위해 프로로타입에 대해 알아보았습니다.

알아놓으면 좋은 10가지 모던 웹 아키텍쳐 컨셉

웹 개발자라면 알아두면 좋은 모던 웹 아키텍쳐 컨셉 10가지를 알아보았습니다.

SEONEST

seonest 사이트에 대한 기능과 내용을 조금 설명해보았습니다.

날렸습니다...

MySQL 백업 방법과 ORM 사용시 주의사항에 대해서 알아보았습니다.

Bundle - Module Bundler

최신 JavaScript 개발에서 모듈은 빠져서는 안될 기능 중 하나입니다. 이번 포스팅에서는 모듈 번들러에 대해 알아보겠습니다.

HTTP... 그것에 대하여

HTTP 역사와 HTTP의 특징, HTTP의 구조, HTTP의 동작 방식에 대해 HTTP 초기버전부터 최근 HTTP 3.0 버전까지 알아보았습니다.

블로그 생성

많은 곳에 좋은 개발 블로그 사이트가 있습니다. 그러나, 이렇게 개인 블로그 사이트를 만든 이유와 제가 생각하는 장점, 기술 스택을 소개합니다.