Next.js2 [Next.js] 페이지 라우팅 웹 사이트를 구성할 때 홈 화면 뿐만 아니라 주제에 따라 여러 페이지를 이동하게끔 만드는 것이 일반적인 특징이다. 이번 포스팅에서는 Next.js에서 페이지를 이동하는 라우팅 방법에 대해 설명 해보려고 한다. *페이지, URL 만들기 우선 기본 웹사이트 주소는 http://localhost:3000 이다. 쇼핑몰 웹사이트를 만든다는 가정 하에 상품 목록 페이지를 따로 만들려고 한다. localhost:3000/list 라는 주소를 입력받거나 바로 이동할 시에 페이지를 띄우게끔 설정해보자. 1. pages 폴더 밑에 내가 만들 URL 이름의 폴더를 만든다. (localhost:3000/list를 입력했을 때 생성되는 페이지라면 list라는 폴더를 만든다.) 폴더를 만듦과 동시에 해당 이름의 URL이 생성되.. 2024. 2. 26. [Next.js] Next.js 설치와 세팅 Next.js는 프론트엔드 + 백엔드 까지 풀 스택 개발이 가능한 프레임워크로 잘 알려져있다. 나는 React로 프론트엔드 기능과 UI 코드를 짜고 Spring Boot로 만든 백엔드 서버와 연동하는 방식의 프로젝트를 경험하였는데, Next.js를 새롭게 배워보면서 서버 사이드 렌더링과 풀 스택 개발 경험을 쌓기로 하였다. 우선, 서버 사이드 렌더링이 왜 필요한가? 묻는다면 React나 Vue 라이브러리를 활용한 클라이언트 사이드 렌더링 사용시 요즘 많은 앱과 웹사이트들 처럼 UI 디자인이 예쁘고 부드러운 사이트는 만들 수 있지만 첫 페이지 로딩 속도 저하, 검색 노출 어려움 같은 단점이 존재한다. 이는 상업적인 이익을 내야하는 웹사이트에는 치명적이라고 볼 수 있다. 서버 사이드 렌더링을 사용하면 서버에.. 2024. 2. 26. 이전 1 다음
