다다의 개발일지 6v6

우리가 하고 싶은 건 페이지 전체 리로딩 없이 필요한 콘텐츠만 로딩하는 것인데이를 위해 Next.js에서 대신 를 사용하면 SPA(Single Page Application)처럼 동작할 수 있다 우선 태그를 사용하면 발생하는 문제점!페이지 전체가 새로고침됨기본적으로 태그를 사용하면 브라우저가 새로운 요청을 보내서 페이지 전체를 다시 로드한다.About 페이지 이동href="/about"을 클릭하면 서버에 요청을 보내고 페이지가 새로고침됨방문했던 페이지라도 다시 다운로드하여 렌더링하기 때문에 비효율적결과적으로기존 상태(state)가 초기화됨 (예: 입력 폼 내용, 로그인 상태 등)페이지 전환 속도가 느려짐   태그를 사용하면? (Next.js 방식)1️⃣ 클라이언트 사이드 내비게이션 (CSR) 적용i..

앱 라우팅(App Router) Next.js 13부터 디렉토리 기반의 라우팅 App Router가 도입됐다고 한다.기존의 pages/ 방식과 다르게, 파일과 폴더 구조만으로 자동으로 라우팅이 설정된다  기본 구조Next.js에서 app/ 폴더 안에 파일을 추가하는 것만으로 페이지를 생성할 수 있음📂 디렉토리 구조 예시/app ├─ layout.tsx # 모든 페이지에 공통 적용 (레이아웃) ├─ page.tsx # `/` (홈 페이지) ├─ about/ │ ├─ page.tsx # `/about` 페이지 ├─ blog/ │ ├─ page.tsx # `/blog` 페이지 │ ├─ post/ │ │ ├─ page.tsx # `/blo..

https://opentutorials.org/course/5098 Next.js 13 - 생활코딩수업 개요 Next.js는 웹 애플리케이션을 빌드하고 배포하는 데 강력한 도구입니다. 이 도구를 활용하면 모던한 웹 앱을 빠르고 효율적으로 구축할 수 있습니다. 그럼 함께 미래의 웹 개발 패러다opentutorials.orgNext.js란?Next.js는 React 기반의 풀스택 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하며, 최신 웹 애플리케이션을 개발하는 데 최적화된 도구이다. 프론트부분은 react와 같고 백엔드부분은 expressjs랑 비슷한 기능들이 탑재되어 있다고 한다.Next.js의 주요 특징서버 사이드 렌더링(SSR, Server-Side Rendering)..