개발 성장 일ブl

✔️SSR서버 사이드 렌더링가장 기본적인 사전 렌더링 방식브라우저 요청이 들어올 때마다 사전 렌더링을 진행함장점🌟 : 페이지 내부의 데이터를 항상 최신으로 유지할 수 있음단점💩 : 데이터 요청이 늦어질 경우 모든게 늦어짐export const getServerSideProps = async () => { const [allBooks, recoBooks] = await Promise.all([ fetchBooks(), fetchRandomBooks(), ]); return { props: { allBooks, recoBooks }, };};export default function Home({ allBooks, recoBooks,}: InferGetServerSideProps..

✔️개발모드npm run dev실시간 코드 반영서버 렌더링(모든 페이지를 서버에서 요청 시점에 렌더링, 정적 페이지도 요청시 즉성 생성)설정이 완벽하지 않아도(예: getStaticPaths를 작성하지 않아도) 동작하도록 Next.js가 도와줌페이지를 즉시 렌더링하지만, 빌드 최적화는 적용x개발중에 사용✔️빌드모드npm run build // 빌드 파일 생성npm run start // 실행getStaticProps와 getStaticPaths를 통해 빌드 타임에 필요한 정적 페이지를 미리 생성페이지와 코드가 압축되고, 성능 최적화가 적용개발모드에서는 문제없이 작동하던 코드도 빌드 타임에 에러가 발생할 수 있음생성된 정적 파일을 사용하므로 요청에 대한 응답이 매우 빠름실제 서버에 배포하기 전에 사용

마치 리액트의 App.jsx 컴포넌트, page 컴포넌트들의 루트마치 리액트의 index.html

next 강의 듣던중, async쓰니까 vscode에서 에러가 뜸... + yarn build시에도 작동안함이유 : next 14에서 서버 컴포넌트를 async 함수로 사용하면 JSX가 아닌 Promise를 반환,typescript 5.1이하에서 발생 방법1 : typescript + react 버전을 올리기 (근데 react 19버전으로 올라가서 비추...)방법2 : 에러나는 곳마다 밑에 주석 추가하기(귀찮...)}> {/* @ts-expect-error Async Server Component */}

Next  기본 동작 방식서버에서 데이터를 받아와서 클라이언트로 전달 => 클라이언트가 이를 화면에 렌더링 클라이언트 컴포넌트브라우저에서 실행되며, 사용자와의 상호작용을 처리상태(state) 관리와 효과(effect) 훅을 사용할 수 있음이벤트 핸들링이 가능필요에 따라 서버에서도 초기 렌더링이 이루어짐단, 클라이언트에서만 실행해야 하는 코드(ex:window 객체나 DOM조작)가 있다면 에러 발생가능비동기로 데이터를 가져오거나 렌더링해야할 때 로딩 상태를 처리할수 있도록 Suspense로 감싸줘야함// 클라이언트 컴포넌트"use client";import { useState } from 'react';function ClientComponent() { const [count, setCount] = ..

a태그페이지를 이동할 때 전체 페이지가 새로고침(완전한 리로드)됨Link태그페이지 이동 시 전체 페이지 새로고침 없이, 필요한 데이터만 가져와 빠르게 이동 Router(useRouter)클라이언트 측 라우팅을 위한 훅(hook)=> 현재의 라우터 상태에 접근하고, 페이지 이동 및 쿼리 파라미터를 쉽게 관리 가능=> 브라우저의 히스토리 스택과 밀접하게 관련되어 있음*히스토리 스택: 브라우저는 사용자가 방문한 페이지의 순서를 기록, 이 기록을 통해 뒤로 가기, 앞으로 가기 같은 기능이 가능"use client"; // client 로직을 사용하기 위함import { useRouter } from "next/navigation";const router = useRouter(); a태그보단 Link나 Route..

크롬의 확장자들과의 충돌...(예를들어  color zilla등...)💩그냥 무시하면 됨!신경쓰이면 시크릿모드로 고고👀👀👀