본문 바로가기

분류 전체보기164

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.
3회차 프리온보딩 Session & Cookies 보호되어 있는 글 입니다. 2023. 10. 12.

티스토리툴바