My Boundary As Much As I Experienced

Next.js에서 파일이나 폴더 이름 앞에 언더스코어(_)가 붙는 것은 특별한 의미를 지니며, 주로 Next.js 프레임워크의 내부적인 또는 시스템에 의해 특별하게 처리되는 요소들을 나타낸다. '_'가 앞에 붙는 특수 파일1. _app.js 또는 _app.tsx이 파일은 Next.js 애플리케이션의 루트 컴포넌트를 정의하며, 모든 페이지에 공통적으로 적용되는 레이아웃이나 상태를 설정하는 데 사용된다. _app.js는 페이지 전환 시 상태를 유지하고, 전역 CSS를 추가하는 등의 기능을 수행할 수 있다.2. _document.js 또는 _document.tsx_document.js는 서버에서만 렌더링되며, 초기 서버 사이드 렌더링 시 HTML 문서의 구조를 구성한다. 이 파일을 통해 , 태그와 같은 HT..

_app.js란? Next.js에서 보면 _app.tsx파일을 활용한 경우가 종종 존재한다. 이것은 어디다 쓰는 파일일까? 리액트를 사용해봤으면 app.tsx파일에서 각종 전역상태관리 provider, 레이아웃용 컴포넌트 등을 관리해본 경험이 있을것이다. _app.tsx는 바로 그 용도로 사용된다. (사실 _app.js는 Page Router에서 주로 쓰이는 파일이다. App Router 구조에서도 쓰일수는 있지만 _App.js의 역할을 쪼개어 분리한 다른 파일 컨벤션을 사용한다.본문 아래에 정리되어있다.) _app.js의 역할 말했다시피 리액트 앱의 app.tsx 혹은 main.tsx의 역할과 거의 동일하다고 보면 된다. 전역 상태 관리 설정 (예: Redux, Context API) 페이지 전환시 레..

예전에 사용해봤던 React Snap, React Helmet의 사용법과 유사하다. 그러나 ReactSnap이나 ReactHelmet처럼 번거로운 설정들이 필요없다는 것이 장점이다. Next.js에서 Head 설정하기 우선 아래와 같이 import 시켜준다. import Head from "next/head"; 전체적으로 이름을 정해주려면 우선 _app.js파일(page router) 혹은 Document파일 등에 가서 아래와 같이 지정해준다. 메타태그 또한 같이 지정가능하다. 메타태그는 검색엔진을 검색할 때 중요한 태그가 되니 되도록이면 넣어주도록 하자. 그러나 페이지마다 다른 Head title 설정도 가능하다. Head 태그 안에다가 title / image / description, og tag ..

들어가기 앞서 Next.js는 framework로써 여러 성능 최적화 유틸 태그를 제공한다. 대표적으로 Link태그나 Image태그를 제공한다. (React에도 Link태그가 있다고? 아니다. 리액트 환경에서 사용하는 Link태그는 React-Router-Dom 라이브러리가 제공하는 태그이다.) 특히 Next.js의 Link 태그는 리액트 라우터 돔의 Link태그보다 더욱 성능 최적화가 되어있고, Image태그도 기존 img태그에 비해 많은 최적화가 되어있는 유틸 태그이다. 이번 시간은 이에 대해서 알아보도록 하자. Link 태그와 a태그와의 성능 비교 위 이미지는 예제 블로그 사이트이다. 저기서 첫 번째 글은 하이퍼링크로 되어있고 클릭하면 첫 번째 글로 이동한다. 이를 a태그와 Link태그로 각각 구현..