◆ 파일 기반 라우팅각 페이지는 `page.js`라는 파일에 정의되고, 이 파일은 NextJS에게 페이지를 렌더링해야 한다는 것을 알려줍니다.이것은 NextJS의 강력한 기능 중 하나이며, 파일 시스템을 사용하여 애플리케이션의 구조를 자연스럽게 관리할 수 있습니다. ◆ 파일 시스템을 통한 경로 추가새로운 경로를 추가하기 위해 `app` 폴더 내에 새 폴더를 만들고 하위에 `page.js` 파일을 생성하면 됩니다.예를 들어 `/app/about/page.js` 파일을 생성하면 `/about` 페이지가 추가됩니다. ◆ 페이지 간 이동Server-side(Backend) : 서버 컴포넌트 함수를 실행하는 과정에서 최종적으로 렌더링될 HTML 코드를 생성합니다.Client-side(Frontend) : 렌더링될..

◆ NextJS란?: React 프레임워크의 확장판이며, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등을 쉽게 구현할 수 있도록 도와주는 도구입니다. ◆ NextJS의 필요성: NextJS는풀스택 리액트 프레임워크이기 때문에 리액트로 풀스택 애플리케이션을 구축하는 과정을 단순화합니다.풀스택 애플리케이션을 구축하는데 필요한 라우팅, 폼 제출, 데이터 처리, 인증 등의 기능을 제공합니다. ◆ NextJS 주요기능 및 장점풀스택 애플리케이션 구축프론트엔드와 백엔드에서 실행되는 코드를 모두 작성할 수 있어 풀스택 애플리케이션을 쉽게 구축할 수 있습니다.파일 시스템 기반의 경로 설정 (File-based Routing)파일 시스템을 사용하여 페이지의 경로를 설정할 수 있어 코드 기반..

문제 발생처음에는 이미지가 한 번에 로드되도록 구현되었습니다. 이로 인해 사용자가 페이지를 처음 접속했을 때, 모든 이미지가 동시에 로드되면서 페이지 로딩 시간이 길어졌습니다.특히 이미지 미리보기에서 이미지 개수를 기준으로 스크롤 기능을 구현하였는데, 사용자가 스크롤을 할 경우 이미지 로딩 시간이 길어져 모든 이미지가 표시되지 않은 상태에서 스크롤을 움직여 제대로 동작하지 않는 문제가 발생하였습니다. 해결 방법1. Spinner 추가처음에는 이 문제를 해결하기 위해 Spinner를 추가하여 모든 이미지가 로딩되어 출력되는 동안 스크롤을 조작할 수 없게 처리를 하였습니다.하지만 이 방법의 문제점은 출력되는 이미지의 수가 많아질수록 사용자의 입장에서는 해당 Spinner가 무한 로딩으로 느껴지고 오류로 생각..