📍token이 cookie에 없을 때 로그인한 유저를 위해 token을 보내줘야 할 때, 토큰이 cookie에 없고 store에 있다면? 서버에서 실행되는 메서드이기 때문에 client의 자원에 접근 불가하다 따라서 CSR 방식을 사용하는 수 밖에 없다..

📍Styled-components는.. ✅장점 - React 친화적 (React를 위해 만들어짐) - style이 자동으로 주입된 컴포넌트를 만들 수 있음 - props를 통한 다이나믹 스타일링 가능 :disabled or :hover 상태에 따라 스타일링 변화 ✅단점 (Next.js 측면에서) - SSR 지원을 위한 추가 설정 필요 - 컴파일 이후 스타일에 랜덤한 클래스명이 생성되어 디버깅이 어려움 📍_document.tsx를 수정하여 SSR 지원 ✅기본적으로 CSR 방식으로 동작하는 styled-components를 SSR 방식으로 동작하게 수정 import Document, { Head, Html, Main, NextScript } from 'next/document' import { ServerS..

Next.js 공식문서 읽기 📍프리렌더링이란? ⭐모든 HTML 페이지를 미리 생성 (client-side에서 JavaScript로 만들지 않음) - 페이지가 브라우저에 의해 로드되면, 각각의 HTML 페이지는 최소한의 JavaScript 코드를 보유 - 이후 이 코드가 수행되며 페이지를 완전하게 만듬 (이것이 Hydration 과정) ⭐프리 렌더링은 성능과 SEO 측면에서 유리 📍프리렌더링 이루어지는 것 확인하기 React (CRA 환경) 페이지 vs Next.js 환경의 페이지 비교 1️⃣두 페이지에 접속하여 JavaScript 비활성화 - 크롬 개발자도구 열기 - crtl + shift + p - javascript 검색하여 Disable JavaScript 클릭 2️⃣결과 확인 - CRA 페이지는 ..

📍에러 에디터에서는 에러가 없었는데, 배포하려고 하니 vercel 에서 에러를 띄웠다 에러 메시지 found page without a react component as default export in pages/index.styled.ts styled-copmonents 를 쓰고 있는데, pages 폴더에 있는 index.tsx를 스타일링 하기 위해 index.styled.ts를 만든 것이 화근이었다 📍pages 폴더 주의사항 ⭐Next.js 프로젝트에서 pages 폴더는 routing 공간이므로, 각각의 파일이 page가 된다 따라서 index.styled.ts 파일이 존재하면 안된다! 디폴트 페이지 확장자 : .tsx, .ts, .jsx, .js 이며 next.config.js 에서 추가 가능 mo..

Next.js 공식문서 읽기 📍Layout 컴포넌트 살펴보기 - components/layout.js import Head from "next/head"; import Image from "next/image"; import styles from "./layout.module.css"; import utilStyles from "../styles/utils.module.css"; import Link from "next/link"; const name = "Your Name"; export const siteTitle = "Next.js Sample Website"; export default function Layout({ children, home }) { return ( {home ? ( {name..

📍/public - root의 /public는 /pages 처럼 앱 내에서 참조 가능 - /public 폴더에는 이미지같은 static assets을 보관 📍기존 이미지 로드 방식의 한계 엘리먼트는 아래 사항을 직접 조절해야 함 - 사이즈 크기에 따라 이미지 크기를 직접 조절 (반응형 대응) - 이미지 최적화를 위해 타사 라이브러리를 사용 - viewport에 들어올 때만 이미지 로딩 가능 📍Image 컴포넌트 - 예시 import Image from 'next/image'; const YourComponent = () => ( ); 디폴트 옵션 - 리사이징, 최적화 및 다양한 포맷 지원 - 빌드 타임에 최적화하지 않고 요청받을 때 최적화 실행 (따라서 일반적 ssg에 비해 빌드 타임이 증가하지 않음 -..

📍create-next-app - 터미널에서 Next.js 앱을 빠르게 만드는 툴 체인 - cli 에서 프로젝트 완성에 필요한 정보를 전달 npx create-next-app@latest docs에서 제공하는 스타터 템플릿 npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/navigate-between-pages-starter" 📍라우팅 📂/pages - 파일명으로 route가 정해진다 - /pages/index.js 가 root page. 즉, / 에 해당 - /pages/posts/first-post.js 파일은 /posts/first-post ..

📍Fast Refresh 란? - Next.js 개발서버에서 파일을 변경하면 브라우저에 바로 업데이트 - 새로고침이 필요 없이 변경하는 즉시 적용된다 📍Code Splitting - Next.js는 자동으로 코드 스플리팅을 수행 - 따라서 각 페이지는 해당 페이지에 필요한 것만 로드 - 수많은 페이지를 가진 앱이라도 첫 페이지를 빠르게 로드하는 장점이 있음