잡다하다

개요처음 개발을 할 때 변하지 않고 반복사용되는 모든 값에 대해 Constants를 사용했습니다.예를 들어 HTTP METHOD나 URL, 약관 설명 등에 대한 긴 Contents 등에 대해서입니다. Constants// HTTP METHODConst HttpMethod = { PUT: 'PUT', GET: 'GET', DEL: 'DELETE', POST: 'POST'} 그러다 다른 프로젝트들을 접하면서 HTTP METHOD나 URI 등을 Enums로 사용하는 것을 보면서 이에 대한 확실한 개념정리가 필요하다고 느끼게 되었습니다. Enumsenum HttpMethod { GET = 'GET', POST = 'POST', PUT = 'PUT', DEL = 'DEL',}  Enu..

개요Next.JS에서 없는 페이지로 이동할 때, 모든 경로에 대해 동시 처리하는 방법에 대한 내용입니다. [...not_found]동적 경로(Dynamic Route)로 설정된 페이지 파일로, URL의 일치하지 않는 모든 경로를 처리하는 데 사용됩니다.[...not_found]는 "Catch-All Route"라고 불리는 동적 경로 패턴을 의미합니다.  폴더 구조, 코드src app [...not_found] page.js not-found.tsx not-found.tsxexport default function NotFound() { return ( 페이지 없음 ..

개요이전 개발자가 개발한 프로젝트를 보고 무지성으로 프로젝트 구조를 잡아서 개발을 수행했었는데, 프로젝트를 완성해서 정상적으로 서비스를 하고 있지만 정확히 어떤 이유로 사용하는 지 모를 코드들이 있기 때문에 NEXT.JS를 더욱 이해하기 위해 하나씩 파헤쳐보려고 합니다.  구조 설명현재 모든 app router 내부 디렉토리는 아래와 같은 구조입니다._module 디렉토리에는 각 컨테이너에서 사용하는 component들과 css를 모아놓았습니다.app - home - _module - page.tsx - page.body.tsx - contents - _module - page.tsx - page.body.tsx - notice ..

개요Zustand는 간단하면서도 강력한 상태 관리 라이브러리입니다. React 애플리케이션에서 전역 상태를 쉽게 관리할 수 있게 해주며, Redux와 비교했을 때 훨씬 더 간단하고 직관적인 API를 제공합니다.Zustand는 독일어로 "상태"를 의미하며, React의 Hooks를 기반으로 합니다.  특징간단한 APIZustand는 매우 간단한 API를 제공하여, 몇 줄의 코드만으로 상태를 정의하고 사용할 수 있습니다.이는 Redux와 같은 복잡한 설정 없이도 쉽게 상태 관리를 할 수 있게 해줍니다.import create from 'zustand';const useStore = create(set => ({ count: 0, increment: () => set(state => ({ count: st..

개요SWR(Stale-While-Revalidate)은 React Hooks를 사용하여 데이터 가져오기와 캐싱을 간단하게 만들어주는 라이브러리입니다. Next.js와 함께 사용하면 매우 효율적인 데이터 페칭을 구현할 수 있습니다. SWR은 Vercel에서 개발한 라이브러리로, 최신 데이터 페칭 전략을 제공합니다.  특징자동 캐싱 및 재검증 (Stale-While-Revalidate)SWR의 이름에서 알 수 있듯이, 데이터가 오래되었는지 여부에 따라 자동으로 데이터를 캐싱하고, 백그라운드에서 재검증합니다.이는 데이터의 신선도를 유지하면서 빠른 응답을 제공합니다.import useSWR from 'swr';import axios from 'axios';const fetcher = url => axios.ge..

개요Axios는 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경에서 모두 사용할 수 있는 도구입니다. 주로 비동기 HTTP 요청을 쉽게 관리하고 처리하는 데 사용됩니다.  특징Promise 기반Axios는 Promise API를 사용하여 비동기 요청을 처리합니다.이를 통해 콜백 헬(callback hell)을 피하고, 비동기 코드를 더 읽기 쉽게 작성할 수 있습니다.axios.get('/api/data') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); 인터셉터 (Interceptors)요청(request) 또는 응답(response)이 처리되기 전에..

소개Next.js는 환경 변수를 사용하여 애플리케이션의 설정값을 관리할 수 있습니다. 이 가이드는 Next.js에서 환경 변수를 설정하고 사용하는 방법을 설명합니다.  파일 생성프로젝트 루트 디렉토리에 .env.local 파일을 생성하고 환경 변수를 추가합니다.NEXT_PUBLIC_API_URL=https://api.example.comNEXT_PUBLIC_API_KEY=your_api_key NEXT_PUBLIC_로 시작하는 환경 변수는 클라이언트 사이드에서 사용할 수 있습니다.  환경변수 사용pages/index.js 파일을 수정하여 환경 변수를 사용합니다.import { useEffect, useState } from 'react';export default function Home() { con..

소개Next.js와 TypeScript를 함께 사용하면 코드의 안정성과 유지보수성을 크게 향상시킬 수 있습니다.Next.js 프로젝트에 TypeScript를 설정하고 사용하는 방법을 설명합니다.  프로젝트 설정Typescript 관련 패키지를 설치합니다.npm install --save-dev typescript @types/react @types/node TypeScript 설정 파일을 생성합니다.touch tsconfig.json 프로젝트 내의 파일 확장자를 .js에서 .tsx로 변경합니다. 예를 들어, pages/index.js 파일을 pages/index.tsx로 변경합니다.   타입 정의컴포넌트의 타입을 정의하여 코드의 안정성을 높일 수 있습니다. 예를 들어, props의 타입을 정의할 수 있습..

소개Next.js의 정적 사이트 생성(SSG)은 빌드 타임에 HTML 페이지를 미리 생성하여 빠른 로딩 속도와 SEO 최적화를 제공합니다. 이 가이드는 SSG 기능을 자세히 설명합니다.  SSG의 장점 빠른 로딩 속도: 미리 생성된 HTML 페이지는 서버 요청 없이 즉시 로드됩니다.SEO 최적화: 정적 페이지는 검색 엔진이 쉽게 인덱싱할 수 있습니다.안정성: 서버 부하를 줄이고, CDN을 통해 전 세계에 빠르게 배포할 수 있습니다.   GetStaticProps pages/index.jsexport async function getStaticProps() { const res = await fetch('https://api.example.com/data'); const data = await res...

소개서버사이드 렌더링(Server-Side Rendering, SSR)은 서버에서 HTML을 생성하여 클라이언트에 전달하는 방식입니다. Next.js는 이 기능을 통해 초기 로딩 속도와 SEO를 향상시킬 수 있습니다.  SSR의 장점 초기 로딩 속도 향상: 서버에서 미리 렌더링된 HTML을 제공하여 초기 로딩 시간을 단축합니다.SEO 최적화: 검색 엔진이 미리 렌더링된 HTML을 인덱싱할 수 있어 SEO 성능이 개선됩니다.유저 경험 개선: 초기 콘텐츠가 빠르게 표시되어 사용자 경험이 향상됩니다.   getServerSideProps 사용법Next.js에서 SSR을 구현하기 위해 getServerSideProps 함수를 사용합니다. 이 함수는 각 요청 시 서버에서 실행되며, 페이지 컴포넌트에 데이터를 전달..