728x90
반응형
- [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(섹션 2: 라우팅과 네비게이션)2024-02-07 09:38:21섹션 2: 라우팅과 내비게이션 📌 다이내믹 라우트(Dynamic Routes) 공식 문서 : https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#convention "src/app/users/[id]/photo/[photoId]" 경로를 작성 대괄호 [] 안에 매개 변수를 지정할 수 있고, 이 매개 변수에 할당되는 인수가 경로가 된다. // src/app/users/[id]/photo/[photoId]/page.tsx import React from "react"; interface Props { params: { id: number; photoId: number }; } // props에 params 속성이 존재하..
- [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(섹션 0: 기초)2024-02-04 22:25:00섹션 0: 기초 📌 VSCode에서 컴포넌트 코드 스니펫 사용 익스텐션 설치 : ES7+ React/Redux/React-Native/JS snippets rafce + tab : 화살표 함수 형태 리액트 컴포넌트 코드 생성 📌 내비게이션 a태그 : 서버 측 내비게이션을 수행, 링크 클릭 시 전체 페이지 로딩 Link 컴포넌트 : 클라이언트 측 라우팅을 활용한 페이지 간 전환. 페이지가 새로 렌더링 되지 않고 필요한 부분만 업데이트 📌 CSR/SSR CSR SSR 큰 사이즈 번들 크기 작은 번들 사이즈 리소스 집약적 리소스 최소화 검색 엔진 최적화 어려움(SEO) 검색엔진 최적화(SEO) 낮은 보안성 높은 보안성 📌 Hybrid Rendering 서버 측에서 페이지를 미리 생성하는 정적 생성(SSG: S..
- [Next.js] "ReferenceError: window is not defined" 이슈, dynamic import로 해결2023-10-23 17:42:051. 왜 터미널에서만 ReferenceError 에러를 뿜는 거지? Next.js 프로젝트에 mind-ar 라이브러리를 설치한 후 import 하였다. 컴포넌트에서 mindar-image-three라는 모듈을 import 해야 하는데 인식하지 못했다. 그래서 아래와 같이 해당 모듈의 경로까지 작성하였다. import { MindARThree } from "mind-ar/dist/mindar-image-three.prod"; 여기까지는 그럭저럭 잘 넘겼다. 그런데-서버 사이드-터미널에서 "ReferenceError: window is not defined" 에러가 발생했다. 브라우저에서는 아무런 문제없이 화면이 렌더링 되었고 콘솔도 고요했다. 오직 터미널에서만 난리가 났다! 2. 동적 로딩(dynamic ..
728x90
반응형