WoohyunKing의 개발 성장일지

Next.js 13과 서버 컴포넌트 next가 13버전으로 올라오면서 굉장히 많은 변화가 있었는데, 그 중 가장 파격적인 변화는 바로 app directory의 등장이라고 할 수 있다. 기존 next 프로젝트는 pages라는 폴더를 이용해 스크린간 라우팅을 셋팅할 수 있었는데, next13부터는 app 폴더가 pages 폴더를 대체하게 되었다. 그리고 app directory와 관련해서 우리가 집중할 부분은 app directory내부에서는 모든 컴포넌트가 기본적으로 서버컴포넌트로 동작한다는 사실이다. "use client"; import {useState} from "react"; const ClientComponent =() => { const [state,setState] = useState() r..

사전 렌더링(Pre-rendering) 복습 미리 각 페이지의 html을 생성하여 SEO 적용할 수 있게 하는 것으로, Next.js 에서는 페이지마다 2가지 렌더링 방법을 선택적으로 사용할 수 있다. 정적 사이트 생성(SSG) : 빌드 시 html 생성해두고 요청이 오면 생성해둔 html 재사용, 빈번한 업데이트 필요 없는 정적 페이지 만들 때 사용 ex) 마케팅, 블로그 게시글, 설명서, 제품 목록 페이지 서버 사이드 렌더링(SSR) : 사용자 각 요청마다 새 html 생성, 요청마다 데이터를 최신상태로 업데이트해야 될 경우 사용 Next.js 13 버전 Data Fetching fetch() 사용 export default funciton Home(){ const a = use(fetchData()..

Next.js 는 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR) pre-rendering 웹사이트 생성을 도와주는 프레임워크이다. Next.js에서는 SSG와 SSR을 위한 데이터 패칭 기능을 제공한다. 즉, 사이트를 렌더링하기 전 어떤 데이터를 이용해서 페이지를 생성할 것인지에 대한 함수를 작성하는 기능을 말하는 것이다. ( getStaticProps와 getStaticPaths, getServerSideProps ) getStaticProps function Blog({ posts }) { return ( {posts.map((post) => ( {post.title} ))} ) } // SSG export async function getStaticProps(context) { // 외부..

Next.js는 React 기반의 자바스크립트 프레임워크입니다. 성능, SEO 및 애플리케이션 개발에 효율적이며, Routing, Server Side Rendering(SSR), Static Site Generator(SSG), Image에 관한 기능이 미리 내장되어 있으므로 React와 같이 이러한 기능을 개별적으로 설치, 설정할 필요없이 설치 직후부터 사용할 수 있습니다. Next.js 작동원리 Next.js는, 기본적으로 서버측에서 React코드를 실행한다. React.js를 서버측에서 pre-rendering하여 html을 생성하고, 브라우저로 보내준다. 그 후, 브라우저에서 React를 사용해 웹페이지를 완성한다. 👉🏻초기 렌더링 속도가 빠르고 SEO에 유리하다 ! 주요 기능 직관적인 페이지 ..

이번 SW 캡스톤디자인 프로젝트에서 대회 페이지를 제작하던 중 대회 id를 query로 받기 위해 useRouter Hook을 사용하다가 router.query 값이 'undefined'로 들어오는 오류가 발생했다. 이전 페이지에서 쿼리 값을 전달해줬을 경우에는 문제가 발생하지 않았는데, 새로운 경로로 접속하거나 뒤로가기를 했을 경우에 이러한 오류가 발생했었다. 이는 Next.js의 정적 파일 최적화(Automatic Static Optimization)로 인해 라우트 매개 변수가 제공되지 않기 때문이라고 한다. 정적 파일 최적화(Automatic Static Optimization)란 ?Next.js는 페이지가 데이터 요구사항이 없으면(즉, 서버에서 데이터를 가져올 필요가 없으면) 정적(사전에 렌더링 ..

1) next/router import { useRouter } from "next/router"; const router = useRouter(); Next.js에서 라우터를 사용하려면 useRouter 훅을 사용해서 router 객체에 접근할 수 있습니다. (참고로, useRouter 는 리액트 훅 이므로 클래스 컴포넌트 내에서 사용 불가합니다.) 라우터에서 자주 사용하는 메서드 router.push router.replace router.prefetch router.beforePopState router.back router.reload router.events 2) router.push() router.push(url, as, options) url: [필수] 라우팅 하려는 url as: [선택]..

Next.js 란 무엇인가 Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 서버 사이드 렌더링server-side rendering(SSR), 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR)과 같은 다양하고 풍부한 기능을 제공합니다. + 확장 가능하고 유지 보수가 쉬운 웹 애플리케이션을 만들기 위한 여러 가지 방법을 제공 최근 몇 년 사이 웹 개발 분야에는 많은 변화가 있었습니다. 최신 자바스크립트 프레임워크들이 개발되기 전에는 동적 웹 애플리케이션을 만들기가 어렵고 복잡했습니다. 수없이 많은 라이브러리를 사용해야 했으며 원하는 대로 작동하도록 설정하는 것도 버..