nextjs10 [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. [NextJS] Zustand 시작하기(1) 필요성 Web application을 제작하면서, Store(상태)를 관리하는 것은 매우 중요해졌습니다. 상태관리 라이브러리로 Recoil 역시 훌륭하지만, 이번 차례에서는 Zustand를 학습해보고자 합니다. 그 학습을 시작합니다. 접근 1. Installation (설치) - npm install zustand 2. Store 생성하기 3. 컴포넌트 바인딩 방법 1. Installation (설치) (NextJS 또는 React 프로젝트를 생성 후 진행합니다.) 사용을 위해 npm 패키지로 설치부터 진행합니다. # npm npm install zustand - 이후 정상적으로 설치가 되었다면, 프로젝트 내 package.json 파일 > "dependencies"에 나열됨을 확인할 수 있습니다. 2... 2023. 8. 21. [NextJS] EsLint Delete `␍` eslint (prettier/prettier) 에러 해결하기 필요성 Next JS, Nest JS를 다루기 위해 개발단계 초기, EsLint를 설정해줬습니다.(설정방법은 글 하단 링크 첨부) 협업시, 코드의 통일성과 유지보수 등의 문제를 위해 EsLint를 설정한 것에 그치지 않고 발생한 에러에 대해서 해결해보는 시간을 갖고자 합니다. Delete `␍` eslint (prettier/prettier) 에러에 대해 살펴보겠습니다. 접근 1. 발생한 에러 모습 2. 에러 해결방안 제시 방법 1. 발생한 에러 모습 코딩을 하던 중, 각 코드라인 끝에 빨간밑줄이 발생하면서 (구동은 되지만) 굉장히 눈에 거슬리는 상황에 노출됐습니다. Delete `␍` eslint (prettier/prettier) 정확한 에러명칭은 위와 같이 식별이 됐습니다. 2. 에러 해결방안 제시.. 2023. 3. 9. 이전 1 2 다음
