공부 기록일지📚

Redirects 리다이렉트 기능, 컴포넌트 내에서 사용하던 redirect 함수와는 다르다. 물론 기능 자체의 개념은 같다. 웹 페이지를 캐시 해둔 모든 곳(클라이언트 및 검색 엔진)에서 혼란스러운 상황을 방지할 수 있도록 활용한다. 라우트별 리다이렉트 기능은 next.config.js 에서 설정해줄 수 있다. /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { dirs: ["src"], }, images: { remotePatterns: [ { protocol: "https", hostname: "images.unsplash.com", }, ], }, async redirects() { return [ { source: "/..

API Routes(12ver) == Route Handlers (13ver) ? Route Handlers allow you to create custom request handlers for a given route using the Web Request and Response APIs. (라우트 핸들러스는 Request 와 Response 웹 API를 활용하여 주어진 경로에 커스텀 요청 핸들러를 만들게 해준다.) => 즉, next 를 활용해서 풀스택 프로젝트를 구현할 수 있다는 부분은 이 기능이 제공되기 때문인 거 같다. next 12버전의 API 라우트와 13버전의 라우트 핸들러스가 같은 키워드 같아서 적어놨다. 아래의 next 공홈에서 가져온 good to know 에서 유추한 내용이다. Go..

넥스트 13버전의 docs인 Using App Router 에는 ISR 이라는 키워드를 직접적으로 찾을 수 없었다. 정의를 알고싶다면 Pages Router ( Next 12) 에서 검색해보면 된다. App기반 docs에서 ISR을 검색하면 Data fetching 과 관련된 내용이 나오는데 revalidate 라는 키워드와 직접 연관이 있기 때문인 거 같다. Next 에서는 Time-based Revalidation 라고 명시되어 있는데 이 키워드가 ISR과 동일한 개념인 거 같다. ISR(Incremental Static Regeneration) Next.js를 사용하면 사이트를 구축한 후 정적 페이지를 만들거나 업데이트할 수 있다. 증분 정적 재생성(ISR)을 사용하면 전체 사이트를 다시 빌드할 필..

우선 간단히 넥스트 12버전과 13버전을 비교하면 아래와 같다. Next 12ver 페이지 단위 렌더링 방식 규정 => 13버전보다 구성이 심플할 수 있으나 효율성이 떨어질 수 있음 Next 13ver 컴포넌트 단위 렌더링 방식 규정 => 12버전보다 구성하는 것이 복잡할 수 있으나 어플리케이션 효율성이 높음 리액트 18버전부터 Server Component가 도입되면서 페이지 내에 2가지 컴포넌트가 믹스되어 구성될 수 있음(클라이언트 & 서버 컴포넌트) 서버 컴포넌트(Server Component) app 폴더 내부에 있는 컴포넌트들은 기본적으로 서버 컴포넌트(서버에서 실행되는 컴포넌트)이다. 서버 컴포넌트는 말 그대로 서버에서 실행되는 컴포넌트 이기 때문에 이 컴포넌트는 브라우저에서 그려지는 것이 아..

[ 상황 설명 ] next 13으로 404 페이지를 설정하고 있던 중 개발자도구의 콘솔에 404 error 가 지속적으로 찍히는 것을 확인했다. 개발 환경의 hot reload 기능 때문인 거 같았는데 설마 서버의 요청도 계속해서 가고있는지 확인해보니 404페이지가 UI에 표시된 상태라면 api 요청이 계속적으로 되고 있었다. [ 원인 분석 ] 즉, 없는 경로를 서버에 요청보내면 not found 에러가 발생하는데 개발환경에서 해당 요청을 클라이언트에서 hot reload 를 통해 계속해서 보내고 있는 것이다. 핫리로드 문제는 개발환경에서만 발생하기 때문에 큰 이슈는 아니라고 생각했지만 혹시라도 문제가 될까봐 관련 이슈에 대해서 찾아봤다. [ 결론 ] next 공식 repo를 확인하니 나와 같은 next..

넥스트 13은 Node 16.14 이상의 버전을 요구한다. 지원 운영체제로는 맥, 윈도우즈, 리눅스가 있다. 프로젝트 자동 설치(수동 설치도 있음) npx create-next-app@latest 위의 명령어를 통해서 자동 셋업해주는 prompts 내역을 확인할 수 있다. 현재경로에 하위 폴더로 새로운 이름이 아닌 그냥 현재경로 폴더를 root로 사용하고싶다면 질문 prompt에서 프로젝트 명을 . 로 root를 의미하는 dot을 찍어주면 된다. 필요 종속성들을 설치할 수 있는데, 2023-08-22 기준 Typescript, ESLint , Tailwind CSS 가 기본값으로 내장되어 있다. src 폴더에 내 코드들을 root의 config 폴더들과 구분하여 사용할 수 있다. ⇒ 리액트랑 같은 듯 🤠..

개인 프로젝트가 아닌 협업 프로젝트를 진행할 때, 코딩 스타일을 일치시키지 않는다면 코드를 합치거나 비교할 때 매우 불편할 것이다. 코딩 스타일은 팀의 자율에 따라 결정되지만 강제성이 없기 때문에 취약하다. 코드 리뷰나 작성을 할 때에도 의식하지 않으면 많은 에너지가 소모되므로 자동화될 수 없는 컨벤션은 최소화하고 필요한 경우에는 반드시 문서화시켜야 한다. 자동화 툴들이 아무것도 없이 시작하는 것보다 시간을 들여서라도 초기세팅에 공을 들여놓으면 지속적인 개발 생산성 향상에 도움을 주기 때문에 꼭 알아둬야 한다. ESLint & Prettier ESLint는 일관되고 버그를 피할 수 있는 코드를 짜기 위해서 만들어진 코드 분석 툴이다. 작성된 코드의 구문을 분석하여 버그가 발생할 여지가 있거나, 불필요한 ..

CRA로 프로젝트를 만들면 .svg 파일을 마치 리액트 컴포넌트처럼 import 하여 사용할 수 있다. import {ReactComponent as MySvg } from "../assets/mysvg.svg; const MyComponent = () => { return } 하지만, Vite로 리액트 프로젝트를 구성하고 있다면 추가 세팅이 필요하다. 세팅 방법은 간단한데, svg관련 라이브러리를 추가로 설치해준다. 1. vite-plugin-svgr yarn add vite-plugin-svgr #npm 대신 yarn을 애용하고 있다. 2. vite.config.ts 에 플러그인을 추가해주기 vite.config.ts import { defineConfig } from 'vite'; import re..