Next.js (4) 썸네일형 리스트형 Next.js 이미지 불러오기 Next.js 에서 이미지 불러오기 이미지 불러오는 방법에는 여러 가지가 있지만 나는 내가 되는 방법 한가지만 설명하겠다. 많은 벨로그와 티스토리를 보고 시도했지만 왜 맨날 나만 안되는걸까? 결국 정답을 찾게 된건 공식문서였다. Basic Features: Image Optimization | Next.js Next.js supports built-in image optimization, as well as third party loaders for Imgix, Cloudinary, and more! Learn more here. nextjs.org 상단에 import 해주고 참고로 이건 로컬 이미지임 (local image)(프로젝트 안에 이미지파일이 모여있음.) import Image from 'ne.. Next.js [Route] Next.js = React + Express.js + React-Router-Dom + Sever Side Rendering 기능들이 내재화 되어 있다고 생각. Next.js 설치 개발환경 세팅 npx create-next-app@latest test => test 폴더에 개발환경 세팅 개발환경실행 : npm run dev 배포 파일 생성 : npm run build 서비스 시작 : npm run start pages 폴더 안 index.js 가 페이지를 보여주는 곳 우리가 애플리케이션을 만들 때 늘 따져보는 것이 Route 인데 url에 따라서 ui를 어떻게 응답할 것인가를 결정하게 하는 행위가 되게 된다. pages/index.js => http://localhost:3000/ pages/sub/i.. CSR(Client Side Rendering) vs SSR(Server Sider Rendering) Next.js 를 보다 잘 이해하기 위해서는 CSR과 SSR의 차이를 알 수 있어야 한다. CSR이란? 클라이언트에서 모든 것을 처리하는 방식 CSR 장점 - CSR 이 SSR 보다 빠르고 효율적이다. CRS 단점 - 사용자가 첫 화면을 보기까지 로딩이 느리다. y? HTML이 비어 있기 때문에 처음 접속하면 빈 화면이 보이게 되고 다시 링크된 어플리케이션 자바스크립트를 서버로 부터 다운 받기 때문에 여기 자바스크립트에서 어플리케이션에서 필요한 로직 뿐 아니라 프레임워크, 라이브러리 소스 코드들도 다 포함이 되어 있기 때문에 굉장히 사이즈가 커서 다운로드 받는데 시간이 소요된다. + (추가로 필요한 데이터가 있다면 서버에 요청해서 데이터를 받아온 다음에 과정을 거쳐 사용자에게 보여줌) - 캐싱이 안된다... Next.js 시작 https://nextjs.org/learn/foundations/about-nextjs 에서 차근차근 NextJs를 접근할 수 있다. 근데 이런 공식문서를 어느정도 수준에 통달하고 나서야 겨우 읽히는 감이 있는 것 같다..(나는 잘 모르겠군) Next.js 란? - 빠른 웹 애플리케이션 을 만들기 위한 빌딩 블록을 제공 하는 유연한 React 프레임워크 입니다 . - 프레임워크란 Next.js가 React에 필요한 도구 및 구성을 처리하고 애플리케이션에 대한 추가 구조, 기능 및 최적화를 제공한다는 의미입니다. Next.js 시작하기 - 프로젝트에 Next.js를 추가하기 위해서는 Node.js가 설치 되어 있어야 합니다. (Node.js 버전 10.13 이상이 필요) Node.js Node.js® i.. 이전 1 다음
