일반 이미지 넣는 법 1. public폴더에 이미지 추가 2. 태그 사용 최적화 이미지 넣는 법 1. public폴더에 이미지 추가 2. import 추가 import Image from 'next/image' 3. 컴포넌트 사용 (장점) 1. lazy loading => 로딩속도 최적화 2. 사이즈 최적화 3. layout shift 방지 => 레이아웃 어긋남 방지 (단점) 1. width, height 옵션이 필수임 => fill="true" 넣고, 부모 가 width, height를 대신 넣어도 됨. => 절대경로가 아닌 import 방식으로 이미지를 가져오면 안 써도 됨. import test from "./test.png" => 하지만, 이미지가 많은 경우 하나하나 import 하기 번거롭다. ..
폴더 방식의 라우팅 지원 1. 우선 app폴더의 하위폴더를 생성 ex) app/list => 작명한 폴더이름 = url 이름이 됨. 2. 만든 폴더 안에 page.js 파일을 생성 ex) app/list/page.js => html 작성 공간 Link 태그 => 페이지 이동 태그 1. 사용할 태그를 우선 import import Link from "next/link"; 2. html 안에 작성 home list home 기준으로 url은 "/"이며, 폴더명 = url명에 따라 작성 => 페이지 이동 태그 완성 중복 레이아웃 구성법 다른 페이지에 같은 html을 구성하고 싶은 경우 ex) header(상단바) 또는 footer(하단바) layout.js는 page.js를 덮는구조를 가진다. => 위에서 작..
1. node.js 설치 => 18v 이상 권유 2. node 버전 확인 명령어 node -v 3. node.js 및 npm 삭제 1) 제어판 > 프로그램 추가/제거 > node.js 삭제 2) 아래 경로에 해당하는 디렉터리 삭제 C:\Program Files\Nodejs C:\Program Files (x86)\Nodejs C:\Users\User\AppData\Roaming\npm C:\Users\User\AppData\Roaming\npm-cache => 파일이 없다면 건너뛰기 4. node 버전 및 npm 버전 확인 C:\Users\User>node -v > 'node.js'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. C:\Users\User>npm -v..
CSR(client-side rendering) => 브라우저에서 html을 실시간으로 만드는 방법 React, Vue.js는 이에 해당함. 장점: 1. 페이지 전환이 부드러움 2. 이쁜 사이트를 만들 수 있음. 단점: 1. 구글 검색 노출이 낮음 2. 페이지 로딩속도가 낮음 => 투자대비 수입지표가 낮아짐 SSR(server-side rendering) => 서버에서 html을 미리 만들어서 보내주는 방법 Next.js, nuxt, sveltekit, remix 등이 해당함. 장점: 1. 조금 가벼운 편 2. 구글 검색 노출이 잘 됨. 3. 일부 선택적인 CSR이 가능 4. 최적화된 HTML 랜더링 단점: 1. 폴더 기반 라우팅으로 인해 예약파일이 많아져 복잡함. 2. 리액트의 미완성 기능을 도입해서 ..
