분류 전체보기93 ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳㉑㉒㉓㉔㉕㉖㉗㉘㉙㉚㉛㉜㉝㉞㉟㊱㊲㊳㊴㊵㊶㊷㊸㊹㊺㊻㊼㊽㊾㊿⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾ ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳㉑㉒㉓㉔㉕㉖㉗㉘㉙㉚㉛㉜㉝㉞㉟㊱㊲㊳㊴㊵㊶㊷㊸㊹㊺㊻㊼㊽㊾㊿⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾ 2024. 6. 24. [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. [인텔리제이 intellij] 프로젝트 초기 설정 인텔리제이 설정 쓸 데 없는 맞춤법 검사기 OFF- Editor > inspections > Typo (off) 사용하는/하지 않는 import 문 자동 정리- Editor > General > Auto Import - XML > (V) Show auto-import tooltip - Java > (V) Optimize imports on the fly 파일 저장시 코드 자동 정렬- Tools > Actions on Save - Reformat code (All file types) - Run eslint —fix ESLint 설정- Languages & Frameworks > Javascript > Code Quality Tools > ESLint - (V) Autom.. 2024. 6. 17. [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. [IntelliJ - MacOS] 인텔리제이 IDEA Live Edit Plugin 사용하는 방법 접근 (요약)Visualization을 위한 task 를 위해서 D3.js를 연구-학습하기 위해, html 파일을 다뤄보던 중이었습니다.Next.js에서 지원이 되었던 Live Reload가 되지 않음에 불편함을 느끼고 이를 해결하기 위한 방법으로인텔리제이 Live Edit Plugin을 사용하는 방법을 다뤄봅니다. 1. Plugin설치: Live Edit 2. 크롬 확장 프로그램 설치: JetBrains IDE Support 3. Live Edit Plugin 설정방법 1. Plugin설치: Live Edit 2. 크롬 확장 프로그램 설치: JetBrains IDE Support 3. Live Edit Plugin 설정 2024. 5. 22. 이전 1 2 3 4 ··· 11 다음
