웹 접근성을 개선하여 모든 사용자가 쉽게 사용할 수 있는 애플리케이션을 만드는 방법을 알아보겠습니다.웹 접근성이란?(2. ESLint 접근성 플러그인 설정(3. Form 접근성 향상(4. Form 유효성 검사(5. 실습: Aria 라벨 추가하기(💡 접근성(Access

이전 Chapter에서는 Server Action을 사용하여 데이터를 변경하는 방법에 대해 알아보았습니다. 이번에는 JavaScript의 try/catch 문과 Next.js API를 사용하여 오류를 효과적으로 처리하는 방법을 살펴보겠습니다.error.tsx 파일을 활

이번 포스트에서는 Next.js Server Actions를 활용하여 Invoice(송장) 데이터를 업데이트하고 삭제하는 방법을 다룹니다. 동적 라우팅, 폼 데이터 처리, 그리고 데이터베이스 CRUD 작업의 전체 과정을 단계별로 살펴보겠습니다.Invoice를 업데이트하

이전 장에서는 URL 검색 매개변수와 Next.js API를 사용하여 검색 및 페이지네이션 기능을 구현했었습니다. 이번에는 송장 페이지(Invoices page)에 송장 생성, 수정 및 삭제 기능을 추가하는 작업을 진행하려 합니다.이번에 소개드릴 내용은 분량이 길기 때

이전 Chapter에서는 Partial Prerendering을 통해 Next.js에서 경로의 정적 부분을 미리 렌더링하고, 동적 부분은 사용자가 요청할 때까지 지연시키는 방법에 대해 알아보았습니다.이번 Chapter에서는 URL 검색 매개변수를 사용하여 검색 및 페이

지금까지 빌드 및 revalidation 시간에 데이터 fetch 및 렌더링을 진행하는 정적 렌더링과 사용자 요청 등이 발생할 때 렌더링을 진행하는 동적 렌더링에 대해 알아보았습니다.이번 포스팅에서는 PPR(Partial Prerendering)을 사용하여 정적 렌더링

자료구조로서의 배열은 데이터를 일정한 순서와 구조를 갖춘 집합으로 저장하는 방법을 의미한다.배열은 프로그래밍에서 기본적인 자료구조 중 하나로, 메모리 내에서 연속적인 공간에 요소를 저장한다.배열의 핵심적인 특성과 개념은 다음과 같다.정적 배열대부분의 배열은 메모리에서

코드 스플리팅(Code Splitting)은 웹 애플리케이션에서 코드를 작은 청크(chunk)로 분리하여 애플리케이션의 초기 로딩 속도를 개선하는 기술이다. 이 기술은 번들 파일을 여러 개로 나누고, 사용자가 필요로 하는 부분만 로드함으로써 네트워크 비용과 사용자 대기

자바스크립트의 실행 컨텍스트는 코드가 실행되는 환경을 정의하는 기본 개념이다.일단 추상적으로만 말해보면, 자바스크립트가 코드를 실행할 때 필요한 모든 정보를 담고 있는 박스라고 생각하면 된다.자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다.실행

제너레이터(Generator) 는 함수 실행을 일시 중지하고 다시 시작할 수 있는 특별한 함수이다.일반 함수와 달리, 제너레이터는 function\* 키워드로 정의되며, 호출 시 즉시 실행되지 않고 이터레이터(Iterator) 객체를 반환한다.이를 통해 값을 순차적으로

OverviewNode.js 프로젝트에서는 패키지를 설치할 때, 해당 패키지가 프로젝트에서 어떻게 사용되는지에 따라 dependencies 또는 devDependencies 로 구분하여 관리한다.이 두 가지는 package.json 파일의 중요한 필드이며, 설치한 패키

이전 Chapter에서는 대시보드 페이지를 동적으로 만드는 데 성공했지만, 데이터 Fetch 속도가 느린 경우, 애플리케이션의 성능에 어떤 영향을 미칠 수 있는가에 대해 논의했다.이번 코스에서는, 느린 데이터 요청이 있을 때 사용자 경험을 어떻게 개선할 수 있는지에 대

인라인 함수인라인 함수는 일반적으로 해당 함수를 호출하는 곳에 직접 선언된다.주로 콜백 함수나 짧은 동작을 수행하는 함수 등 간단한 작업에 사용된다.아래 코드의 function(number) { return number \* 2; }는 map 메서드 안에서 인라인으로

반응형 웹(Responsive Web)과 적응형 웹(Adaptive Web)은 화면 크기나 기기에 따라 웹 페이지가 사용자에게 최적화된 화면을 제공하는 방법이다. 하지만 이 두 접근 방식은 화면을 최적화하는 방식에서 차이가 있다. 반응형 웹은 CSS의 미디어 쿼리(me

자바스크립트에서는 함수 정의 방법은 일반 함수와 화살표 함수의 두 가지 주요 스타일이 있다. \- 일반 함수와 화살표 함수는 무엇이고, 이 둘의 차이는 무엇인지 알아보도록 하자. 일반 함수는 function 키워드를 사용하여, 함수를 정의하는 방법이다. 특징은 아래와

정의:이벤트 버블링은 특정 요소에서 발생한 이벤트가 그 요소의 부모 요소로 전달되고, 그 부모 요소의 부모로 계속 전달되는 과정을 말한다.마치 물방울이 아래에서 위로 올라가는 것처럼, 이벤트가 가장 깊은 요소에서 시작해 위로 전파된다.예시:만약 버튼을 클릭했다면, 그

Next.js 15가 공식적으로 안정화되었고 프로덕션 환경에서 사용할 준비가 되었다고 한다.이번 릴리스는 RC1과 RC2에서의 업데이트를 기반으로 하며, 안정성에 중점을 두면서도 흥미로운 업데이트를 추가했다고 하니 그 내용을 살펴보자.자동 업그레이드 CLI수동 업그레이

string, number, boolean, undefined, symbol원시 자료형은 할당할 때, 식별자(변수)에 값 자체가 담긴다.좀 더 정확히 말하면 할당한 값은 메모리 주소에 할당되고, 식별자(변수)는 이 값을 가리킨다.값의 변경이 일어나면, 기존 메모리 주소

자바스크립트에서 네이티브 객체와 호스트 객체는 자바스크립트 환경에서 객체가 어디에서 기원했는지에 따라 구분되는 두 가지 객체 유형이다. 네이티브 객체는 자바스크립트 언어 자체에서 제공하는 객체들이다.ECMAScript 사양에 정의되어 있으며, 특정 환경이나 플랫폼과 상

두 메소드 모두, JavaScript에서 배열을 순회(iterate)하는 데 사용되는 메서드이다. \- 그러나, 용도와 동작에서 중요한 차이점이 존재한다.목적배열의 각 요소에 대해 주어진 함수를 실행한다.forEach는 요소를 변형하거나 side effect(사이드