웹 사이트에서 글로벌 서비스를 위해 여러 국가의 언어를 지원할 수 있도록 되도록 i18n 라이브러리를 사용해보자! 자동 번역이 되는 것은 아니고, 번역된 데이터가 담긴 JSON 파일을 프로젝트에 삽입 후, 국가 코드를 변경할 때마다 각 국가에 해당하는 JSON 파일을 읽어와 화면에 출력 해준다. 설치 npm install react-i18next i18next --save yarn add react-i18next i18next 언어 파일 프로젝트 내에 다음과 같은 JSON 파일을 생성한다. JSX내에서 Key를 text로서 사용하면 국가 코드에 따라 Value를 출력한다. i18n 설정 import i18n from "i18next"; import { initReactI18next } from "reac..

MiddleWare MiddleWare는 Redux의 핵심적인 기능으로 액션과 Reducer 프로세스 사이에 위치하며, 액션이 dispatch 된 후 MiddleWare를 통해 비동기 작업을 처리하고 이 후 Reducer로 작업 결과를 보내준다. 쉽게, 본래 dispatch는 액션만을 받을 수 있지만, MiddleWare를 사용하면 함수를 입력받을 수 있다. 기본 형태 import { createStore, applyMiddleware } from 'redux'; const middleWare = (store) => (next) => (action) => { //다음 MiddleWare로 액션을 전달해준다. //만약 다음 MiddleWare가 없다면 Reducer로 액션을 전달한다. //next()를 사..

Redux는 Context API를 기반으로 만들어진 상태 관리 라이브러리로 reducer와 action이라는 개념 또한 존재해 상당히 유사하다. 프로젝트의 규모에 따라 Context API만으로도 충분하다. Context API와의 차이점 Context API와의 주된 차이점은 미들웨어이다. 미들웨어는 Action 객체가 Reducer에서 처리되기 전에 원하는 작업을 수행할 수 있다. 액션이 무시되게 하거나 액션 발생시 다른 액션을 발생, 서버에 로깅 등을 하는 등 비동기 처리를 할 수 있게 한다. 그리고 useSelector, useDispatch, useStore와 같은 Hooks를 사용할 수 있다. 마지막으로 Context API와는 다르게 모든 글로벌 상태를 하나의 객체에서 관리할 수 있다. 구..

웹 개발 에서는 특히 성능이 중요하다. 어떤 부분이 개발한 웹에서 부족한지, 보완할 점은 무엇인지를 알기 위해 성능 측정을 해보자. LightHouse 구글에서 개발한 웹 성능 측정기이다. 크롬의 개발자도구에 기본으로 내장되어 있어 F12 - LightHouse로 작동시킬 수 있다. 성능 측정 한창 프로젝트로 진행 중인 웹사이트를 측정해보았다. 성능과 접근성이 상당히 낮게 나온다. 아래쪽에서 원인과 해결 방법을 상세하게 알려준다. 따라서 한번 수정해보자. 성능 향상 Reduce unused JavaScript React는 기본적으로 SPA(Single Page Application)이다. 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 변경하며 표현하는 것이다. 이러한 동작을 위해 하나의..

Code Splitting React는 기본적으로 SPA(Single Page Application)이다. SPA (Single Page Application) 웹 사이트의 전체 페이지를 하나의 JS 파일에 담아 액션에 따라 동적으로 화면을 변경하며 표현하는 방식이다. 과거에는 한 페이지마다 크기가 작았기에 페이지 변경 시 서버에서 하나의 페이지가 담긴 html 파일을 통째로 전달해주곤 했다. 하지만, 서버의 부하, 화면 blinking 등의 이슈로 Client Side Rendering인 SPA가 등장하게 되었다. SEO (검색 엔진 최적화)의 효율이 좋지 않아 최근에는 Server Side Rendering을 고려하는 경우가 많다. SPA의 가장 큰 문제점은 모든 페이지가 하나의 JS 파일에 담겨져 ..