개요Next.js는 리디렉션을 처리하는 여러 방법이 있다. Next.js에서 지원하는 리디렉션 api는 다음과 같다.APIPurposeWhereStatus Coderedirect사용자 동작 또는 이벤트 후 리디렉션Server Components, Server Actions, Route Handlers307 (Temporary) or 303 (Server Action)permanentRedirect사용자 동작 또는 이벤트 후 영구 리디렉션Server Components, Server Actions, Route Handlers308 (Permanent)useRouter클라이언트 측 내비게이션 수행클라이언트 컴포넌트의 이벤트 핸들러N/Aredirects in next.config.js경로 기반으로 들어오는 요..

개요본 글은 Next.js에서의 에러 핸들링, 로딩 UI, 그리고 스트리밍을 활용한 성능 최적화와 사용자 경험 향상 방법을 다룬다. 애플리케이션을 개발하다 보면 사용자의 입력 실수나 네트워크 문제 등으로 예상 가능한 에러가 발생하거나, 코드 상의 문제로 인한 예상치 못한 에러가 발생할 수 있다. Next.js는 이러한 에러들을 효과적으로 처리하기 위해 명시적 상태 관리 기법과 에러 경계를 제공하며, 이를 통해 사용자에게 원활한 서비스를 제공할 수 있게 한다. 또한, 데이터를 가져오는 과정에서 사용자에게 빈 화면을 보여주는 대신 의미 있는 로딩 UI를 제공하고, 페이지 로딩 속도를 개선하는 스트리밍 기법을 사용할 수 있다. Next.js는 React의 Suspense를 기반으로 페이지를 점진적으로 렌더링하..

개요App Router는 라우팅 및 내비게이션에 하이브리드 접근 방식을 지원한다. 즉 Next.js는 라우팅 시 서버와 클라이언트를 적절히 섞어서 사용한다. 서버에서 애플리케이션 코드는 경로 세그먼트에 의해 자동으로 분할된다. 예를 들어 app 폴더에 있는 코드끼리 분할되고 dashboard 폴더에 있는 코드끼리 분할된다. 클라이언트에서 Next.js는 경로 세그먼트를 사전 로드하고 캐시한다. 즉 Next.js는 사용자가 다음에 갈 수도 있는 경로를 미리 받아서 캐시한다. 즉 사용자가 새 경로로 네비게이션할 때 모든 페이지를 다시 렌더링하는것이 아닌 바뀐 부분만 바꿔치기한다. 이를 통해 사용자 경험을 향상시킨다. 본 글에서는 Next.js의 코드 분할, 사전 로드, 캐싱, 부분 렌더링, 소프트 네비게이션..

개요이전에 유레카 미니프로젝트에서 진행한 Spring Boot 프로젝트를 배포하였는데 설계 미스로 인한 보안 문제가 발생했다.미니프로젝트의 주제는 유레카 부트캠프 사람들간의 경매 서비스이며, 서버에서는 회원가입&로그인, 입찰 등록&조회, 판매글 등록&조회&수정&삭제, 회원 정보 수정, 공지사항 등록&삭제 기능을 한다. 보안이 우려되는 부분은 다음과 같다.사용자가 특정 권한을 가지고 있지 않아도 endpoint와 요청 데이터만 일치한다면 원하는 결과를 얻을 수 있는 문제.이는 결국 로그인을 하지 않아도 로그인 한 사용자만 이용할 수 있는 서비스에 요청을 할 수 있다는 것을 의미하였고, 더 나아가 관리자 권한이 필요한 요청이라도 요청 데이터만 일치하다면 원하는 결과를 얻을 수 있다는 것을 의미한다.서버에서 ..

개요Next.js를 활용하면 손쉽게 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 구현할 수 있다. 그렇다면 실제로 사용자가 접속할 때 Next.js는 어떻게 작동할까? 요청부터 화면 렌더링까지의 전 과정을 정리해 보았다.Next.js 처리 흐름1. 요청(Request)사용자가 브라우저에서 특정 URL로 접근하면 HTTP 요청이 Next.js 서버로 전달된다.2. 라우팅 처리 (File-based Routing)🔀 Next.js에는 2가지 라우팅 시스템이 있다.폴더 위치pages/app/도입 시기Next.js 초기부터Next.js 13 이상사용 방식getStaticProps, getServerSideProps 등서버 컴포넌트, params, searchParams 등파일명 규칙index.ts..

개요클로저는 공식 문서에서 다음과 같이 설명된다.클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생성 시 함수가 생성될 때마다 생성됩니다. 직관적으로는 다음과 같은 의미를 가진다. 클로저는 함수가 “자기 주변의 변수”를 기억해서, 나중에도 계속 사용할 수 있게 해주는 기능이다. 즉 클로저를 쓰면 다음과 같은 이점을 가질 수 있다.변수를 보호하고 감출 수 있다. (은닉)값을 유지할 수 있다. (상태 유지)콜백, 비동기 함수 등에서 엄청 유용하게 쓰인다.해당 내용들을 이해하기 위해선 먼저 자바스크립트의 스코프에 대한 이해가 필요하다.2024.01.03 - [C..

문제https://www.acmicpc.net/problem/32197 다익스트라를 살짝 변형하여 풀었다. 문제 설명은 다음과 같다. 지하철의 전기를 공급받는 방식(급전 방식)은 직류와 교류로 구분된다. 열차 운행 중 급전 방식이 바뀌게 되면 잠시 전력 공급이 중단된다. 이러한 현상을 절연이라 부른다. 열차 탑승객의 만족도는 절연이 적게 발생할수록 높아진다.서울특별시에는 N개의 지하철역이 있고, 두 역을 직접 잇는 선로 M개가 설치되어 있다. 각 역에는 1부터 N번까지의 번호가, 선로에는 1부터 M번까지의 번호가 붙어있다. 설치되어 있는 선로만으로 임의의 두 역 사이를 이동할 수 있다. 각 선로는 직류 또는 교류 중 하나의 방식으로 전기를 공급하며 양방향으로 통행할 수 있다.열차는 어떤 역과 이어진 선로..

개요이벤트는 프론트엔드 프로그래밍의 핵심이다.때문에 프론트엔드에서 이벤트가 어떻게 처리되는지 흐름을 정리해 보았다.내용을 이해하기 위해 사전에 이벤트와 이벤트 핸들러가 무엇인지 알아야 한다.✅ 이벤트(Event)사용자가 어떤 행동을 했을 때 발생하는 사건.예) 클릭(click), 키 누름(keydown), 마우스 움직임(mousemove), 입력(input) 등✅ 이벤트 핸들러(Event Handler)이벤트가 발생했을 때 실행되는 함수.예) 버튼을 클릭하면 어떤 코드를 실행하고 싶을 때, 그게 핸들러이다.Event interface우리가 웹에서 실행하는 이벤트는 자바스크립트의 Event interface에 맞춰서 생성된 객체이다. 자바스크립트에서 이벤트는 다음 코드로 정의된다.interface Even..