atomicdev 님의 블로그

다국어 지원 기능 추가3.1 i18next로 다국어 지원 구현i18next 설치 및 설정i18next는 React 애플리케이션에서 다국어 지원을 쉽게 구현할 수 있는 라이브러리입니다. Next.js에서도 next-i18next 패키지를 통해 SSR과 함께 사용할 수 있습니다.설치 명령:npm install i18next react-i18next next-i18next i18next-http-backend 기본 다국어 파일 생성각 언어에 대한 번역 파일을 생성하여 다국어 지원을 구현합니다. locales 폴더에 각 언어별 폴더를 생성하고, 각 폴더 안에 translation.json 파일을 추가합니다.예시 파일 구조:/locales /en translation.json /ko translat..

기본 프로젝트 구조 설계2.1 Next.js의 기본 프로젝트 구조 이해Next.js 프로젝트 구조는 파일 기반 라우팅 시스템을 사용하여 폴더와 파일을 정리하는 방식입니다. 여기서는 주요 폴더들과 그 역할을 설명합니다.pages 폴더역할: 이 폴더는 Next.js의 핵심이며, 파일 기반 라우팅을 제공합니다. 폴더 내 파일 이름이 URL 경로로 매핑됩니다.예시: pages/index.js는 / 경로로, pages/about.js는 /about 경로로 매핑됩니다.components 폴더역할: 프로젝트 내에서 반복적으로 사용되는 UI 컴포넌트를 보관하는 폴더입니다.예시: Header, Footer와 같은 컴포넌트를 만들고 재사용할 수 있습니다.public 폴더역할: 정적 자산(이미지, 폰트, 문서 등)을 보관하..

이 강의는 Next.js(SSR)와 i18next를 사용하여 다국어 웹사이트를 구축하는 과정을 단계별로 따라하며, 성능을 최적화하는 방법까지 다룹니다. 한 개의 어플리케이션을 처음부터 끝까지 업그레이드하는 방식으로 진행되며, 실습을 통해 실무에 적용할 수 있는 스킬을 익힐 수 있습니다.강의 목표Next.js의 SSR(Server-Side Rendering)을 활용한 다국어 웹사이트 구축i18next를 사용한 다국어 지원 구현성능 최적화를 위한 전략과 실습AWS, Vercel과 같은 플랫폼에서 배포목차1. 소개 및 준비 사항1.1 강의 소개강의 목표와 기대 효과다국어 웹사이트의 필요성 및 중요성SSR과 CSR(Client-Side Rendering)의 차이점 및 활용 방안1.2 개발 환경 설정Node.js..