개발 일지 개발 일지

헤더나 푸터같은 공통된 layout들은 보통 페이지 마다 작성하는게 아니라 하나의 컴포넌트를 최상단 컴포던트에 감싼다 그러나 특정페이지 예를들어 로그인 페이지같은 페이지들은 layout을 제외 시킬때가 종종 있다. React에서는 outlet 을 사용하면 되고 page Router에서는 _app.tsx에서 router라는 props를 가지고 제외하면 되지만 appRouter는 Router Grop을 이용하여 제외한다. 보통 app router에서는 layout.tsx파일을 통해 layout을 만든다. app폴더에 있는 layout.tsx.파일은 전체 라우팅에 관여하는 layout이다 만약 layout을 특정페이지에서 변경할 필요가 없다면 이곳에 {children}을 감싸서 layout을 적용시킬 수 있다..

`이번 프로젝트는 next.js 에 yarn berry를 사용하여 프로젝트를 진행하게 되어서 next.js에 yarn berry를 초기세팅하는법을 포스팅 하겠다. yarn berry 사용 이유 npm은 node_nodules폴더안에 모든 라이브러리들이 담겨있고 node_nodules폴더에 의존한다. 중복되는 파일, 유령의존성등 수많은 단점들이 있기에 새로운 대안으로 yarn berry가 나왔다. 그리고 일반적인 npm이나 yarn v1로 생성된 프로젝트 보다 거의 8배정도 용량이 줄어는다. next.js프로젝트에 yarn berry적용하기 먼저 next.js프로젝트를 만들어 준다. yarn create next-app --typescript 프로젝트를 만들려는 디렉토리경로에 위명령어를 입력하여 next프..

react에서 header와 footer같은 공통 layout을 적용하려면 Router.js파일에서 바깥에 와 컴포넌트를 작성하면 되는데 next.js는 파일기반 페이지라우팅이기 때문에 Route를 따로 작성하지 않는다. next.js에서 공통되는 layout을 작성하는 방법을 알아보겠다. Layout.jsx Layout.jsx파일을 생성하여 header와 footer컴포넌트를 포함하는 컴포넌트를 생성한다. import React, { Fragment } from "react"; import MainHeader from "./MainHeader"; import MainFooter from "./MainFooter"; function Layout({ children }) { return ( {childre..

next.js 란? next.js는 react기반 라이브러리이다. 기존 react의 단점을 보완하여 만들어진 라이브러리 이다, react는 Single Page Application (SPA)으로 하나의 html안에 자바스크립트로 페이지를 그려주는 라이브러리 이다. 하나의 html 만 존재하기 때문에 페이지를 이동할 때 깜빡거림 없이 자연스럽게 이동하여 최적화된 UX를 제공해 준다. 그러나 하나의 HTML만 존재하기에 SEO에 취약하고 CSR을 지원하기 때문에 초기 렌더링 속도가 느리다. 이러한 단점을 개선하여 나온 라이브러리가 바로 NEXT.JS이다. NEXT.JS는 SSR을 지원하여 react의 단점을 극복하였기 때문에 많은 곳에 사용되고 있다. 오늘은 next.js의 기능 중 파일기반 라우팅(pag..