멍멍이코더

Next.js 다국어(i18n) 라이브러리 Next.js에서 다국어 설정을 위한 라이브러리는 여러개 있다. 많이 사용하는 라이브로리로는 react-i18next next-i18next next-translation 이렇게 3가지 정도가 있는 듯하다. react-i18next React 애플리케이션에서 다국어 지원을 위한 널리 사용되는 라이브러리 i18next 라이브러리에 기반하여 구축되었으며, 번역 리소스를 JSON 파일로 관리한다. 컴포넌트 기반의 API를 제공하여 쉽게 다국어 지원 구현할 수 있다. 다양한 기능과 확장성을 제공하며, 플러그인 시스템을 통해 기능 확장이 가능하다. 단일 페이지 애플리케이션(SPA) 및 서버 사이드 렌더링(SSR) 모두 지원한다. 다국어 리소스를 동적으로 불러올 수 있는 ..

✍️ 문제 recoil duplicate atom key "{atom key}". this is a fatal error in production. but it is safe to ignore this warning if it occurred because of hot module replacement. 개발 환경에서 Recoil을 사용하면 파일이 변경되어 다시 빌드되는 과정에서 atom으로 만든 state가 재선언된다. key는 항상 고유값을 가져야하는데 재선언되는 과정에서 이미 key로 선언된 값을 key로 사용해서 문제가 발생한다. Next.js 개발 중 recoil을 사용할 때 발생하는 고질적인 문제인 것 같다. 기능적으로는 문제가 없다고 한다. 공식가이드 💡 해결방법 방법 1) Recoil에서 ..

✍️ 문제 next.js의 .env파일에 있는 환경변수가 undefined로 나옴 💡 해결방법 Next.js Version 9.4 이상 환경변수 이름에 NEXT_PUBLIC_을 프리픽스(prefix) 붙여주면 사용가능해진다. # .env 변경 전 API_BASE_URL=http://localhost # .env 변경 후 NEXT_PUBLIC_API_BASE_URL=http://localhost 이렇게 설정하고 아래와 같이 사용하면 된다! const BASE_API_URL = `${process.env.NEXT_PUBLIC_API_BASE_URL}/api`; Next.js Version 9.4 미만 next.confg.js에 사용할 환경변수를 설정해준다. # .env API_BASE_URL=http://l..

1. 상태 관리의 중요성 우선 상태관리가 왜 필요한지 알아야 했다. 리액트는 단반향으로 바인딩을 하는 라이브러리이기 때문에 부모 -> 자식 방향으로만 state를 props로 전달할수 있고, 자식의 props를 부모에게 전달하는 방법은 존재하지 않는다. 대신 자식 컴포넌트에서 부모 컴포넌트의 state를 바꿀 수 있는 방법들이 존재한다. 1. 자식에게 부모의 state를 modify 할 수 있는 setState 함수를 props로 넘겨준다. 2. React 에서 자체적으로 제공하고 있는 Context API 3. State Management Tool(redux, recoil, ...) Parent.js import React, { useState } from "react"; import Children..

React Router v6 튜토리얼 이 내용은 해당 블로그의 내용을 정리 및 요약하였습니다. 1. 라우팅이란? 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것. 리액트에서 라우트 시스템을 구축하기 위해 사용할 수 있는 방법 2가지 리액트 라우터 (React Router) Next.js - Next.js는 리액트 프로젝트의 프레임워크. 이 프레임워크는 우리가 사용했던 Create React App처럼 리액트 프로젝트 설정을 하는 기능, 라우팅 시스템, 최적화, 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능들을 제공한다. 이 프레임워크 라우팅 시스템은 파일 경로 기반으로 작동한다. 이 프레임워크는 리액트 라우터의 대안으로 많이 사용되고 있다. 리액트 라우터를 사용하면 손쉽게 리액트 라..

Component 리액트는 사용자 정의 태그를 만드는 기술이다. 우리는 이러한 사용자 정의 태그를 'Component' 즉, 컴포넌트라고 부른다. function App() { return ( // 헤더 영역 HEADER // 내비게이션 영역 html css js // 아티클 영역 Welcome Hello, WEB ); } export default App; 이런 기본 HTML 코드가 있다. 하지만 코드가 길어지게 되면 웹 페이지가 어떻게 생겼는지 파악하기가 쉽지 않을 것이다. 이렇게 어지러진 코드는 아래와 같이 Header, Nav, Article 컴포넌트를 이용해서 분리시킬수 있다. 💡 컴포넌트는 반드시 대문자로 시작해야 한다. function Header(props) { console.log(pro..

https://kit.svelte.dev/docs/page-options 😎 이 글은 공식문서를 번역한 것입니다. 기본적으로 SvelteKit은 먼저 서버에서 모든 구성 요소를 렌더링(또는 사전 렌더링)하고 클라이언트에 HTML로 보낸다. 그런 다음 hydration라고 불리는 프로세스에서 상호작용 할 수 있도록 컴포넌트를 브라우저에서 다시 렌더링 할 것이다. 이러한 이유로 우리는 컴포넌트가 두 위치에서 모두 실행될 수 있는지 확인해야 합니다. 그런 다음 SvelteKit은 후속 탐색을 인계하는 라우터를 초기화 할 것이다. 우리는 +page.ts 혹은 +page.server.ts에서 옵션을 export하여 페이지별로 이것들을 제어할 수 있다. (혹은 +layout.ts, +layout.server.ts ..

https://kit.svelte.dev/docs/load 😎 이 글은 공식문서를 번역한 것입니다. +page.svelte 컴포넌트가 랜더링되기 전에 우리는 일부 데이터가 필요하다. 이것이 바로 load 함수에 정의되어있다. 1. Page data +page.svelte 파일은 동일한 디렉토리에 +page.ts(혹은 +page.js)를 가질 수 있다. +page.ts는 load함수를 export하며, data prop을 통해 페이지에서 사용할 수 있는 값을 반환한다. // src/routes/blog/[slug]/+page.ts import { error } from '@sveltejs/kit'; import type { PageLoad } from './$types'; export const load ..