일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 리터럴
- 코딩테스트
- 내일배움캠프
- array정적메서드
- domain
- 셋팅
- React
- 소셜 로그인
- nextjs
- 초기셋팅
- 프로젝트 셋팅
- CORS
- js
- vscode
- deep dive
- 프로그래머스
- 티스토리챌린지
- 코테
- 모던 자바스크립트
- git
- 스파르타코딩클럽
- 모던자바스크립트
- error
- useRouter
- 코드카타
- vercel
- 자주 까먹는
- 오블완
- Next
- 구글 로그인
- Today
- Total
목록nextjs (5)
파피루스
1. https://cactus.tistory.com/306 에서 폰트 다운로드2. 가변 프리텐다드 woff2 를 소스코드 root 폴더 안에 위치3. root layout 의 폰트 변경이상하게 매번 localFont를 못 찾아서 복붙해서 넣어준다. import type { Metadata } from "next";import localFont from "next/font/local";import "./globals.css";const pretendard = localFont({ src: "./fonts/PretendardVariable.woff2",});export const metadata: Metadata = { title: "Create Next App", description: "Gener..
Next Js의 6가지 원칙 (특징, 장점)1. out-of-the-box functionality requiring no setup : 어려운 셋팅 이제 그만2. js everywhere + all functions are wrriten in JavaScript : 자바스크립트 어디서든3. automatic code-splitting and server-rendering4. configurable data-fetching : 데이터 패칭 설정을 제공하겠다5. anticipating requests : 사용자 요청을 예측가능하게 한다6. simplifying deployment : 배포 쉽게 Next Js 기능들HMR : 애플리케이션 실행 중일 때 특정 모듈의 변경사항을 실시간으로 교체지원하는 렌더링 방..
사용 예시import Image from 'next/image' export default function Page() { return ( ) } props이름isRequiredtypeexamplesrcOstringsrc="/profile.png"widthOinteger (px) heightOinteger (px) altOstring loader functionloader={imageLoader}fill booleanfill={true}sizes stringsizes="(max-width: 700px" 100vw, 33vw"quality integerquality={80}priority booleanpriority={true}placeholder stringplaceholder="blur"styl..
nextJs > Image tagnext의 IMAGE 태그는 상위 요소 중 position이 static 하지 않은 요소 기준으로 그린다. css >> aspect-ratio : OOOcss >> object-fit : OOO object-cover : 비율 유지한채로 넣기object-conatin : 비율 유지unoptimized : 리사이징을 안하고 싶을 때 useRouter : router.push로 페이지 이동시 단점seo 불가 (다른 페이지 탐색을 하지 않는다.)seo 점수 높히는 방법내부 링크 (내 사이트에서 내 사이트로 이동하는 것)외부 링크 (타 사이트에서 내 사이트로 이동하는 것) : 이게 더 점수가 높을 것으로 예상typescript genericexport type SDeal = ..
폴더이름 : 정적 url[이름] : 동적 url파일pages.tsx해당 url로 접근했을 때 뜨는 페이지layouts.tsx자기 자신 + 자기 자신 보다 하위에 있는 모든 페이지에 layout으로 작동한다.ui 공통으로 쓸 수 있다.공통 비즈니스 로직을 정리할 수 있다.Next.js에서 딱 하나 기억 해야한다면?app 디렉터리 아래에서의 폴더 구조가 그대로 url경로가 된다.폴더명[폴더명] : 동적 라우팅예외 사항 = app 디렉터리 아래에 폴더로 존재함에도 불구하고 url 경로가 되지 않는 경우(폴더명) : url 경로에서 해당 폴더가 제외되지만, 라우팅 시스템 내부에 여전히 포함된다._폴더명 : url 경로에서 해당 폴더가 제외되며, 라우팅 시스템 내부에서 완전히 제외된다.라우팅 시스템?(폴더명) v..