잡다하다

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

소개Next.js는 웹 성능 향상을 위해 이미지 최적화 기능을 제공합니다. 이 기능을 통해 이미지를 자동으로 최적화하고, 적절한 크기로 리사이즈하여 사용자에게 최상의 경험을 제공합니다. 다음은 Next.js의 이미지 최적화 기능에 대한 자세한 설명입니다.  이미지 컴포넌트 사용Next.js의 Image 컴포넌트는 최적화된 이미지를 렌더링합니다. 기본적으로 이미지의 너비와 높이를 지정해야 하며, 이를 통해 이미지의 비율이 유지됩니다.import Image from 'next/image';const MyImage = () => ( );export default MyImage;  레이즈와 레이아웃 설정이미지의 레이아웃을 설정하여 반응형 디자인을 구현할 수 있습니다. intrinsic, responsive, ..

소개Next.js는 React 애플리케이션을 위한 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 성능과 SEO 최적화를 돕는다.  주요 기능서버사이드 렌더링 (SSR): 페이지 로딩 속도와 SEO를 개선합니다.정적 사이트 생성 (SSG): 빌드 시 HTML 파일을 생성해 빠른 로딩 속도를 제공합니다.API 라우팅: API 엔드포인트를 쉽게 생성할 수 있습니다.자동 코드 분할: 필요할 때만 자바스크립트를 로드하여 성능을 향상시킵니다. 설치 및 기본 사용법npx create-next-app@latest my-next-app cd my-next-app npm run dev페이지 생성: pages 폴더에 파일을 추가하면 자동으로 라우팅됩니다. // pages/index.js e..

패키지 매니저(Package Manager)개발에 필요한 다양한 패키지를 설치하고 수정하는 작업을 도와주는 도구이다.패키지 간의 의존관계를 고려하여 설치 및 수정을 도와주기 때문에 필수로 사용해야할 도구이다.  NPMNODE JS 에 내장되어 있는 패키지 매니저로 NODE만 설치되어 있다면 별도의 설치없이 사용이 가능하다.NPM에서 직접 개발한 모듈뿐만 아니라 일반 사용자들이 개발한 모듈도 있고, 가장 역사가 길기 때문에 다양한 모듈을 사용할 수 있다.단점으로는 의존관계에 대해서 모듈 하나가 문제가 발생할 경우 의존된 다른 모듈에도 문제가 발생할 수 있다. 첫째줄 명령어를 통해 package.json을 생성하고, 둘째줄 명령어를 통해 필요한 모듈들을 설치할 수 있다.npm initnpm install  ..

개요URL을 잘못 입력하여 발생하는 404(NOT FOUND ERROR)를 전역으로 처리하는 방법에 대해 작성해보았다.NEXT JS 13의 app router 기준으로 작성된 글이다.만약 페이지에서 다른 페이지로 이동이 필요하지 않은 경우에는 /src/app/not-found.tsx 만 작성해주면 된다. /src/app/not-found.tsximport style from './error/404/_module/css/not.found.module.css'export default function NotFound() { return ( 페이지 없음 페이지를 찾을..

개요회사 서비스 개발을 위해 react-query를 사용하게 되었고, 이를 정리하기 위해 글을 작성해보았다. 동작 구조home 페이지가 호출될 때, backend에서 데이터를 가져오고 이를 보여주는 구조이다. 구조실제 상용 데이터들이라 이름은 임의로 변경했다. 간단하게 FLOW만 보면 좋을 것 같다./src/app/home/page.body.tsx'use client'export default function HomeBody() { const { data, isSuccess } = useHomeContentsQuery() const { setError } = useErrorStore() useEffect(() => { if (isSuccess) { if (data.status !== ..

개요 로컬과 개발서버에서 통신하는 백엔드 서버의 URL이 다름에 따라 환경설정 파일을 분리하는 작업을 env-cmd 라이브러리를 사용하여 해보았다. 설치 아래 명령어로 env-cmd를 설치한다. npm install env-cmd 사용 사용법은 간단하다. package.json에서 scripts를 설정에 따라 분리한다. "scripts": { "dev": "env-cmd -f .env.local next dev", "build": "next build", "build:dev": "env-cmd -f .env.dev next build", "start": "next start", "start:dev": "env-cmd -f .env.dev next start", "lint": "next lint" },..

개요 개발이 완료된 프로젝트를 AWS에서 배포를 하기 위해 찾아보던 중 pm2 라이브러리를 활용해서 서비스를 배포하는 방법에 대해 알게 되었고 이를 기록해보았다. 설치 아래 명령어로 pm2를 설치한다. npm install pm2 실행 프로젝트를 build하고, 압축하여 서버에 올린 후 배포하는 시나리오이다. 방장의 프로젝트는 local서버에서 통신하는 백엔드 서버 URL과, AWS 개발서버에서 통신하는 백엔드 서버 URL이 다르기 때문에 .env.local / .env.dev로 구분되어 있고, build 명령어도 package.json으로 분리해두었다. 자세한 설명은 env-cmd 라이브러리 활용에 대한 글을 참고하자. [NEXT.JS] env-cmd로 설정파일 분리하기 개요 로컬과 개발서버에서 ..

개요 프론트엔드 개발자라면 서버와의 API 요청을 개발할 때, 백엔드 개발자가 API개발이 완료되지 않은 시점에 테스트가 필요할 수 있다. 이에 따라 실제 API 통신 대신 정해진 규격에 맞는 가짜 데이터를 통해 API 개발을 쉽게 할 수 있는 MSW라는 라이브러리를 사용해봤다. 설치 터미널에서 아래 명령어를 통해 쉽게 설치할 수 있다. npm install msw 사용법 NEXT.JS 프로젝트 src 폴더 하위에 mocks 폴더를 생성한다. 폴더에는 3개의 파일을 생성한다. browser.ts 브라우저 환경 설정 파일 import { setupWorker } from 'msw/browser'; import { handler } from './handler'; export const worker = se..

Layout VS Templage layout은 디렉토리 하위 컴포넌트에 모두 공통적으로 적용되는 페이지를 의미한다. 전체적으로 사용되는 컴포넌트들을 layout에 모아놓으면 페이지를 이동해도 해당 컴포넌트들은 계속 노출된다. template 또한 하위 컴포넌트에 모두 공통적으로 적용되는 페이지지만 다른 점은 Layout에서는 상태를 보존하고, rerendering되지 않지만, Template에서는 상태는 유지되지 않고, 모든 effect는 다시 연결된다. NextJS는 아래와 같은 상황이 아니라면 Layout의 사용을 권장하고 있다. CSS, 애니메이션 라이브러리를 사용해서 애니메이션을 시작하거나 종료할 때 useEffect, useState에 의존하는 기능인 경우 기본 프레임워크 동작을 변경하는 경우..