다다의 개발일지 6v6

Next.js 는 리액트 기반 서버 사이드 렌더링 프레임 워크다. -> 최초 페이지 렌더링이 서버에서 수행된다. create-react-app 처럼 create-next-app이 지원된다.타입스크립트 기반으로 작성할 것이기 때문에 아래 명령어로 프로젝트를 시작한다.npx create-next-app@latest --ts  npm 프로젝트를 살펴볼 때는 package.json을 먼저 봐야한다.프로젝트 구동에 필요한 모든 명령어 및 의존성이 포함되어 있으므로 프로젝트의 대략적인 모습을 확인하는 데 매우 유용하다! 그리고 eslint-config-next 파일은 Next.js 기반 프로젝트에서 사용하도록 만들어진 ESLint 설정이다. 꼭 사용하는 것을 추천한다고 한다. 핵심 웹 지표에 도움이 되는 규칙들이 ..

클라이언트에서 fetch 요청 vs 서버에서 fetch 요청Next.js에서는 fetch()를 클라이언트와 서버에서 모두 사용할 수 있음. 하지만 실행되는 환경이 다르기 때문에 성능과 보안 측면에서 차이가 있음. 📌 핵심 차이점 요약 클라이언트에서 fetch() 요청서버에서 fetch() 요청실행 위치브라우저 (클라이언트)Next.js 서버 (Node.js)요청 횟수사용자가 페이지 방문할 때마다 요청서버에서 한 번 요청 후 결과 반환보안API 키가 브라우저에서 노출될 수 있음API 키를 숨길 수 있음성능네트워크 요청이 많아질 수 있음서버에서 미리 데이터 가져와서 빠름SEOCSR 방식이므로 SEO 불리함SSR로 SEO 최적화 가능 1. 클라이언트에서 fetch 요청하는 방식 📌 클라이언트에서 실행되는 ..

Nextjs API 서버 구축 ( json-server )  db.json 파일을 만들고 아래 코드를 터미널에 치면 된다~--watch는 변경될때마다 새로고침 해준다.npx json-server --port 9999 --watch db.json  Next.js의 컴포넌트 : 서버, 클라이언트 (이건 react 최신 버전에도 있다고 함)특별한 처리를 해주지 않으면 서버 컴포넌트(기본)로 간주한다.클라이언트 컴포넌트 처리: 컴포넌트 파일 맨 위에 "use client"; 서버, 클라이언트 컴포넌트에 대해서 더 상세히 알아보자.이 두 컴포넌트를 도입하여 성능과 개발 경험을 최적화할 수 있다. 서버 컴포넌트: 백엔드에서 렌더링되고 클라이언트로 HTML만 전달됨 → SEO 최적화, 빠른 로딩, 서버 자원 활용클라..

우리가 하고 싶은 건 페이지 전체 리로딩 없이 필요한 콘텐츠만 로딩하는 것인데이를 위해 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)..