Next.js2 [Next.js] Next.js 자주 사용하는 기초 문법 15가지 명령어 (yarn) 설치 자바스크립트로 설치 yarn create next-app 타입스크립트로 설치 yarn create next-app --typescript 개발환경 실행 yarn run dev 배포 파일 생성 → build된 파일은 .next 폴더 안에 위치 yarn run build Production Mode로 실행 build한 프로젝트 실행 yarn start 문법 1. 기본 폴더 구성 .next: 빌드된 파일이 .next 폴더 안으로 들어간다 node_modules pages: pages 폴더 안에 있는 파일은 자동으로 라우팅이 되서 url로 접근이 가능하다 _app.js index.js public styles: css module 방식을 기본적으로 사용 global.css Home.mo.. 2022. 9. 14. [Next.js] Next.js란? (리액트 단점, CSR, SSR 설명) Next.js 탄생배경 CSR을 사용하는 리액트의 단점때문에 이를 개선하고자 리액트 프레임워크 Next.js가 생겨났다 CSR이란? Client Side Rendering으로 클라이언트 즉, 웹브라우저가 화면을 렌더링해준다 웹브라우저에 내장된 JS 엔진이 동적으로 HTML 엘리먼트를 생성한 뒤 root element에 추가하여 웹 콘텐츠를 만드는 방식을 말한다 리액트의 단점 (CSR의 단점) 리액트에서는 브라우저가 페이지를 화면에 그려주고 서버에서는 해당하는 데이터만 받아오는 CSR(Client Side Rendering) 방식을 사용한다 즉 유저가 웹사이트로 이동한 그 후에 JS를 다운받고 리액트가 UI를 빌드한다 만약 사용자의 JS가 활성화 되어 있지 않거나 인터넷이 느려 JS 파일을 다운받거나 프로.. 2022. 9. 14. 이전 1 다음
