분류 전체보기31 [React] 다국어 처리 react-i18next 사용해보기 개요 리액트에서 react-i18next를 사용하여, 다국어 처리하는 방법에 대해 알아보겠다. 웹 서비스를 할때, 다국어를 지원 해야 하는 경우가 있다. 이는 접속하는 국가 또는 지역에 따라 다른 언어가 자동으로 지원되거나, 웹사이트 내에서 언어를 변경하는 기능을 제공 하기도 한다. i18n 이란? 국제화(internationalization : i18n) 이란 줄여서 i18n이라고 표기 한다. 이 의미는, 이 용어의 영어 표기에서 첫 글자인 i자와 마지막 글자인 n의 사이에 18글자가 들어가 있다는 의미다. 국제화는 제품이나 서비스를 특정 지역의 언어나 문화에 맞추는, 즉 현지화 라고 불리는 과정을 쉽게 할 수 있도록 계획하거나 이행하는 과정을 말한다. i18next는 위에 설명한 i18n을 자바스크립.. 2022. 1. 27. 리액트 Typescript로 적용 및 작성하기 리액트 Typescript로 적용 및 작성하기 개요 지난 포스트 까지는 Javascript로 리액트를 작성하였다. 이번에는 Javascript 말고, Typescript(타입스크립트) 언어로 리액트를 작성하는 방법에 대해 알아 보겠다. Typescript 란? Typescript는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이며. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. 타입스크립트의 주요 기능 및 장점은 정적 타입 언어 (Static type language) 이기 때문에, 컴파일시 시간이 조금 더 걸리더라도 안정성을 보장 한다는 점이다. 자바스크립트는 동적 타입 언어(dynamic type language) 이기 때문에, 자유 분방한 타입을 가진다. 그렇기에 리액트 뿐만 .. 2022. 1. 26. Mobx를 store로 분리하여 사용 하기(3) 개요 Mobx로 상태를 관리할때, Store로 분리하여 사용하는 방법에 대하여 알아 보자. 기존에, 한 파일 안에 그에 해당하는 Mobx를 작성하는 것이아니라, Store로 분리하면, 더욱더 효율적으로 상태를 관리할 수 있다. 또한, Mobx는 Redux와 달리 스토어를 여러개 만들 수 있으며, 기능별, 로직별로 원하는 대로 store를 분리하여 깔끔하게 비지니스 로직을 작성할 수 있다. Store 분리하기 먼저 src 폴더안에 stores라는 폴더를 만든 후, counterStore.js를 만들고 다음과 같이 코드를 작성해보자. 코드는 지난 포스트에서의 Counter 기능에 대한 내용을 이어서 작성하겠다. src/stores/counterStore.js import { makeObservable, ob.. 2022. 1. 25. Mobx를 적용하여 상태 관리하기 (2) 개요 지난 포스트를 이어, 리액트에서 Mobx를 어떻게 설정하고 적용하는지에 대해 알아보자. Mobx 설치 먼저, 리액트에서 상태 관리 라이브러리인 Mobx를 적용하기 위해서 설치를 해주셔야 한다. 다음과 같이 설치를 진행해보자. npm install mobx mobx-react 설치가 완료 되었다면, Counter 파일을 만들어 보자. Mobx를 활용한 예제코드는 다음과 같다. src/components/Counter import React from "react"; import { makeObservable, observable, action } from "mobx"; // 추가 import { observer } from "mobx-react"; //추가 class Counter extends Rea.. 2022. 1. 24. 이전 1 2 3 4 5 6 7 8 다음
