Next.js에서 에러 페이지란?Next.js에서 에러 페이지는 웹 어플리케이션에서 발생하는 오류 상황을 사용자에게 효과적으로 전달하기 위해 설계된 페이지이다. 예를 들어, 없는 페이지의 경로로 접속하거나(404), 서버에서 예상치 못한 오류가 발생할 때(500) 이 페이지가 사용된다. 또한, API 요청이 실패하거나 데이터 처리 중 오류가 발생하는 등 런타임 과정에서 에러가 발생했을 때 사용자들에게 오류를 알리는 페이지이다. 이것은 개발자가 오류 상황을 효과적으로 관리하고, 사용자에게 오류가 발생했으니 어떤 행동을 취하라는 식의 적절한 피드백을 줄 수 있도록 돕는 역할을 수행한다. 에러 페이지 만들기 : Page Router// 404.tsxexport default function Custom404(..

데이터 캐시export default async function Page() { const response = await fetch("~/api", { cache: "force-cache" });}우리가 백엔드 서버로 fetch()를 통해 API를 요청하는 경우가 있다고 하자. 위 코드처럼 우리는 fetch()를 이용해 백엔드 서버와 통신할 수 있다. 그런데 만약 이 데이터가 한 번 쓰고 끝나는 데이터가 아니라 여러 곳에서 재사용되는 데이터라면, 매번 사용할 때마다 백엔드 서버로 계속 요청을 보내야 할까? 데이터 캐시는 이러한 불필요한 요청을 줄이기 위한 기능으로, fetch()로 불러온 데이터를 Next.js 서버에 보관하는 역할을 한다. 이렇게 하면, 다음번에 동일한 데이터가 필요할 때 백엔드 ..

이걸 왜 비교하나요?배열은 우리가 자바스크립트를 사용하면서 굉장히 많이 쓰이는 구조 중 하나이다. 하지만, 배열에도 우리가 알고 있는 일반적인 배열이 있고 배열인 척하는 객체도 있고, 배열의 기능을 가진 객체도 있다. 우리가 배열을 자주 사용하는 이유에는 바로 반복문으로 요소를 순회 가능하기 때문이라는 점도 있을 텐데, 반복문을 사용할 때 어떤 건 for문이 되는 것도 있고 안 되는 것도 있고, 배열 메서드를 사용 못 하는 경우도 있기도 하고, 또 for~of문은 왜 되는 건지에 대해 모르고 넘어가는 경우 등 헷갈리는 경우가 많았을 것이다. 이번 기회에 배열 비스무리한 것들을 모두 정리하고, 또 그것들 사이에서 반복문은 어떤 게 사용 가능한 지 그리고 왜 그렇게 되는지에 대한 이유도 정리해보고자 한다. ..

이터러블 속성을 알아야 하는 이유자바스크립트 ES6가 나오면서 이터러블이라는 개념이 등장하였다. for~of문, Set, Map, 스프레드 연산자, 구조 분해 할당 등 ES6의 등장과 함께 나온 개념들 대다수가 이터러블 속성과 연관된 개념들이기 때문에 해당 기능들의 동작 원리를 이해하기 위해서는 이터러블 속성을 한번 짚고 넘어갈 필요는 있다. (예를 들어, Set과 Map 같은 경우는 배열도 아닌데 *어떻게 배열과 비슷하게 동작할 수 있는거지? 라고 질문하면, Set과 Map은 이터러블 객체이기 때문이라고 답변할 수 있다.) * Set과 Map이 배열과 비슷하게 동작하는 지에 대한 상세 설명1) Set과 Map은 배열과 달리 인덱스를 사용하지 않는데 for~of문으로 순회할 수 있음 ☞ 이터러블 객체이기..

객체 지향 프로그래밍과 클래스 문법class Person { constructor(name, age) { this.name = name; this.age = age; } sayHi() { console.log(`Hello! My Name is ${this.name}`); }}const kim = new Person('kim', 30); // {name: 'kim', age: 30}kim.sayHi(); // Hello! My Name is kim자바스크립트의 클래스 문법은 ES6에서 도입되어 객체 지향 프로그래밍을 더 쉽게 구현하도록 도와주는 역할을 한다. 여기서 객체 지향 프로그래밍이란 객체라는 독립적인 단위로 나누고, 이 객체들을 재활용하여 ..