DEV/NextJS11 [NEXT.js] 5. Link 컴포넌트 사용 이슈 ( new- link ) 1. 정의 & 특성 2. Nextjs 13 버전 업데이트 후 사용법상세 1. 정의 & 특성기존의 태그는 하위에 태그를 포함해서 작성해야 했습니다.그러나, Nextjs 13 버전으로의 업데이트 이후 태그를 사용하지 않아도 되는 것으로 변경 됐습니다. next/link : 태그 없이 사용 가능 # 기존방식 Home # --------------------------# 변화된 방식 Home. 2. Nextjs 13 버전 업데이트 후 사용법 npx @next/codemod new-link . - codemod 를 실행해 new-link를 설치하고, 업데이트 된. 버전의 nextjs13 Link 태그를 사용하게 된다. next/link 2024. 6. 19. [NEXT.js 14] 5. Layout(feat. { children }: { children: ReactNode }) props Layout 1. 정의 & 특성 2. 코드 예시 3. 관련 에러상세 1. 정의 & 특성Next.js 에는 Layout 컴포넌트가 존재하고 이는 여러 경로간에 공유되는 UI입니다. Layout 컴포넌트는- 파일에서 React 구성요소를 내보내도록 정의할 수 있고,- 렌더링 중에 하위에 레이아웃(page UI)가 존재할 경우, 하위 요소를 받아오기 위한 children props를 작성해야 합니다. ㄴ 이를 하기 위해서는, { children }: { children: ReactNode } 구문을 사용해서 이뤄질 수 있습니다. { children }: { children: ReactNode } 이 구문은 TypeScript의 객체 구조 분해와 타입 정의를 결합한 것입니다.(따라서, 객체의 특정 .. 2024. 6. 18. [NEXT.js 14] 4. Font 바꾸기 NEXT.js 에서는 'next/font/google'와 같이 google font 라이브러리를 내장하고 있어 접근성이 좋습니다.뿐만 아니라 'next/font'는 모든 글꼴 파일에 자동적으로 자체 호스팅이 내장돼 있고,이를 적용하고서 레이아웃(뷰)의 쉬프트(깜빡임, 글꼴의 순간적 변화 등) 없이 폰트를 사용할 수 있습니다. Font 바꾸기 1. import {...} from 'next/font/google'; 2. layout.tsx 또는 Font.ts 컴포넌트에 사용할 Font 작성 3. tailwind.config.ts 작성 4. tailwind css 표기로 사용하기상세 1. import {...} from 'next/font/google'; # app/font.tsimpor.. 2024. 6. 17. [NEXT.js 14] 3. CSS 사용 2가지 방법 (css module 생생 / global.css : tailwind css) CSS 사용 방법 1. 첫번째 방법 : css module 사용 2. 두번째 방법 : global.css 사용 3. 파일의 위치 4. suspense & streamed Response를 이용한 세분화 로딩상태 관리상세 1. 첫번째 방법 : css module 사용: 일반적인 표준 css 이지만, css 파일에 특정한 이름을 지정함으로 특정 컴포넌트로 스코핑.=> module.css를 import 하면 그 파일들로부터 객체를 불러올 수 있다 import classes from './main-header.module.css';main-header.js (컴포넌트)에 적용할 css 파일을 경로 depth가 동일할 수 있게 생성해주고, import 해준다. 'classes' 라고 명명한 객체를.. 2024. 6. 14. [NEXT.js 14] 2. loading.js & Suspense & streamed Response (세분화 로딩상태 관리) loding.js (지연) 1. 정의 2. 참고예시 3. 파일의 위치 4. suspense & streamed Response를 이용한 세분화 로딩상태 관리상세 1. 정의: loading.js 파일은 Suspense 기반의 즉각적인 로딩 상태를 생성할 수 있음.- 기본적으로 Server side 이지만 'use client'; 를 주며 client side 로 사용될 수 있다. => Data를 호출하는 페이지에서 페이지의 새로고침을 할 때 지연(loading.js)시간을 두게 되면, 페이지가 깜빡이며 나타나게 된다.=> 그러나, 서로 다른 페이지간의 이동에서는 깜빡임없이 페이지간 전환이 이뤄진다.>> ★ 그 이유는, NEXT는 아주 강력한 캐싱을 하는데, 페이지에 첫 접속 때에 화면구성.. 2024. 6. 14. [NEXT.js 14] 1. Image 태그 관련 <Image> 태그 1. 정의 2. 참고예시 3. 속성값 (lazy & srcset ..) 4. priority 설정 (명시적)상세 1. 정의: 는 최적화된 방법으로 이미지를 출력하게 도와줌: 페이지에서 실제로 보이는 경우에만 이미지가 표시되도록 이미지를 지연 로딩하여 구현해줌 (추가적인 구성설정 없이도!): 이미지를 설정하는 프로세스 등을 단순화시킴 2. 참고예시 => 태그에서의 {logoImg.src} 속성값이 아닌 전체 객체 logoImg를 사용=> nextJS에 의해 생성된 객체는 유용한 정보를 포함하게 되어 최적화된 방법으로 image 컴포넌트를 띄울 수 있도록 함 (= import logoImg ~~ 객체가 자동으로 이미지 사이즈를 감지해주는데, 가장 간단한 형식으로도 이를 구현하기에 충.. 2024. 6. 11. [Next.js 13] 컴포넌트 생성 후, page에서 컴포넌트에 <HTML> 태그, 속성값 사용법 접근 (요약) 현재 개발중인 프로젝트에서 Next.js 13버전과 TypeScript 를 기술스택으로 갖고, 구성요소마다 최대한 잘게 컴포넌트화를 목표로 하고 있습니다. (1) 컴포넌트(components)를 빼주고, 실제 화면을 보여주는 (2) page.tsx 파일에서 (1) 컴포넌트를 사용하면서도 (3) 해당 컴포넌트 내에 태그나 속성값을 주는 방법을 학습해보겠습니다. 1. (상황) 컴포넌트화 & page.tsx 생성 (1.1). 컴포넌트화 + 컴포넌트 사용을 위한 등록 (1.2). Page.tsx 생성 + 컴포넌트 가져오기 2. 컴포넌트에 속성 값 전달하기 (2.1). 컴포넌트 파일 준비하기 (interface, props) (2.2). page.tsx( 컴포넌트를 사용할) 파일 준비하기 3. 컴포.. 2023. 9. 27. [Next.js 13] tailwind css Plugin 작성 & 적용 접근 (요약) 현재 개발중인 프로젝트에서 Next.js 13버전과 TypeScript 를 기술스택으로 갖고, 이에 더불어 Tailwind CSS를 사용하고 있습니다. 필요한 컴포넌트를 Tailwind CSS에서 가져다가 사용하려는 찰나, 프로젝트 내부 tailwind.config.ts 파일에 Plugin 부분을 추가하란 안내를 따라가봅니다. 1. (상황) Tailwind css 컴포넌트 사용 필요 (1.1) 컴포넌트 코드 내부 2. Tailwind CSS Plugin 추가 & 설치 (2.1). npm install @플러그인명 (2.2). tailwind.config.ts 파일에 플러그인 추가 방법 1. (상황) Tailwind css 컴포넌트 사용 필요 (1.1) 컴포넌트 코드 내부 /* This ex.. 2023. 9. 27. [Nextjs] 초기 설치 & 세팅 (Installation) 접근 (요약) 1. Automatic Installation_NextJS app 만들기 (1.1) create-next-app 명령어 사용 2. Manual Installation_필수 패키지 설치 (2.1). npm install (next@latest / react@latest / react-dom@latest) (2.2). package.json 파일 열고 scripts 추가하기 (2.3). scripts 상세내용 정리 3. 프로젝트 내, app 폴더 생성하기 (3.1). app/layout.tsx 내에 코드 추가 (3.2). app/page.tsx 내에 코드 추가 4. (optional) 프로젝트 내, public 폴더 생성하기 (4.1). app/layout.tsx 내에 코드 추가 (4.2). .. 2023. 6. 1. 이전 1 2 다음
