프론트엔드로 가는 길/NextJs4 4. NextJs - 기본 내보내기(default export) export default function Detail() { return ( 상세페이지임 글제목 글내용 ); } 오류가 떴다. 이유는 명명된 내보내기(named export)로, 페이지로 사용될 수 없다. const Detail = () => { return Detail Page Content; }; export default Detail; 페이지 컴포넌트는 반드시 기본 내보내기(default export)로 내보내야 한다. 명명된 내보내기(named export)를 사용하여 컴포넌트를 다른 곳에서 재사용할 수 있다. 페이지가 아니라 단순한 React 컴포넌트로 사용할 때에는 두 번째 형식을 사용할 수 있다. 2023. 10. 24. 3. Next.js server component vs client component 1) [server component ] page.js, layout.js에 대충 만드는 컴포넌트들은 전부 server component 장점 : 페이지 로드시 자바스크립트가 별로 필요가 없어서 빠름 단점 : html 안에 자바스크립트를 못 넣는다. useState, useEffect, onClick 이런거 사용불가능 2) [client component] 장점 : html 안에 자바스크립트 맘대로 넣어서 기능개발 가능 단점 : 쓸데없는 자바스크립트로 인해 페이지 용량도 커지고 페이지 로딩속도도 약간 느려짐 3) 그러면 Next.js에서 client component는 어떻게 만드냐 *use client* 컴포넌트 만들 때 페이지 맨 위에 'use client' 라는 코드를 넣으면 그 밑에 있는 모든 컴.. 2023. 10. 19. 2. Next.js 이미지 최적화 1. 최적화 방법 lazy loading 사이즈 최적화 layout shift방지 *layout shift: 이미지 로딩이 늦게 돼서 레이아웃이 조금 밀려나는 현상 1) image import (1) 로컬에서의 이미지 import Image from 'next/image' (2) 외부에서의 이미지 ‹Image src="https://s3.amazonaws.com/ my-bucket/profile.png" width={} height={}/> - 외부 경로에서 가지고 올 땐 무조건 width와 height를 가지고 와야한다 - 그리고 https://beta.nextjs.org/docs/optimizing/images#remote-images 이 링크처럼 설정이 필요 2023. 10. 19. 1. Next.js 설치와 개발환경 셋팅 1. Next.js 설치와 개발환경 셋팅 1) 프로젝트 생성 (1) 프로젝트 생성 코드 npx create-next-app@latest * Page가 메인 여기에다 코드 작성 (2) 프로젝트를 실행 npm run dev page.js : 메인페이지 layout.js : 메인페이지 감싸는 용도의 페이지 2) 페이지 라우팅 (1) 방법 nextJs는 폴더 경로만 작성해줘도 링크 이동이 가능하다. home list페이지 (2) 라우팅을 하는 과정에서 의문점 import Link from "next/link"; 이렇게 안뜨고 하단의 코드 처럼 import가 된다. import Link from "@/node_modules/next/link"; 이유 : 프로젝트 또는 빌드 도구에 의해 커스텀 경로 별칭을 설정한 .. 2023. 10. 19. 이전 1 다음
