typeScript 썸네일형 리스트형 The JS/TS language service immediately crashed 5 times 에러 해결하기 문제 발생Vite를 사용해서 프로젝트 환경을 구성하고 싶었다.yarn create vite vite-app 명령어를 입력하고 Framework: React, Variant: Typescript + SWC를 선택해서 프로젝트를 생성했다.eslint-config-airbnb를 사용해보고 싶어서 관련 설정도 하고 prettier 설정까지 해줬다.설정을 완료한 후 컴포넌트를 생성하는데, 이상하게 intellisense가 제대로 동작하지 않는 것 같았다. 태그에 style 속성을 주고 싶었는데 div와 관련없는 데이터만 나왔다.이상하다 싶어서 vscode를 껐다 켰는데... The JS/TS language service immediately crashed 5 times.The service will not be.. 더보기 [React] 다국어 지원 자동화하기 - i18next, Google Spreadsheet 현재 진행 중인 프로젝트에서는 클라이언트를 영어를 기준으로 개발하고 있었다.한국어 지원이 당연히 필요하다고 생각했고, 다국어를 지원할 수 있는 방법을 찾아봤다.i18next 라이브러리를 활용해 다국어 기능을 구현했지만, key 값이 많아지면 이를 관리하는데 어려움이 생길 것 같았다.또한, 클라이언트에서 제공하는 서비스에 따라 텍스트가 추가되거나 수정되는 일이 발생할 텐데, 이때 번역 텍스트를 개발자가 일일이 수정해야 하는 문제도 고민이 됐다.이런 고민을 해결하기 위해 다국어 지원을 자동화할 수 있는 방법을 찾아봤고, 그 도입 과정과 경험했던 시행착오에 대해 작성하고자 한다. i18next 라이브러리 사용법 궁금하거나, 자동화 없이 간단히 사용해보고 싶다면 이전에 작성했던 글을 참고하면 된다. [React.. 더보기 [React] i18next를 이용한 다국어 지원 구현하기 웹 애플리케이션을 개발할 때 다양한 국가의 사용자를 대상으로 한다면, 다국어 지원은 거의 필수적이다.이 글에서는 React에서 i18next, react-i18next 라이브러리를 사용하여 다국어 지원을 간단하게 구현하는 방법에 대해 알아보고자 한다.참고로 내가 사용하는 패키지 매니저는 yarn이며, TypeScript를 사용하고 있다. 필요한 패키지 설치하기yarn add i18next react-i18next i18next 설정src 폴더 안에 i18n.ts 파일을 생성하고 아래의 코드를 추가한다.// src/i18n.tsimport i18n from 'i18next';import ko_KR from "../assets/locales/ko-KR/translation.json";import en_US .. 더보기 [React] 회원가입 유효성 검사(react-material-ui-form-validator 라이브러리 사용) 회원가입 기능에 유효성 검사가 필요해 react-material-ui-form-validator 라이브러리를 사용했다. 이 라이브러리가 제공하는 validator는 required, isEmail 등이 있는데 제공되는 것 외에도 필요한 validator를 쉽게 추가해서 사용할 수 있다. Email 중복검사를 위한 validator가 필요했는데 기본으로 제공하지 않아 custom rule를 추가해서 사용했다. 아래와 같이 ValidatorForm.addValidationRule()을 사용하면 된다. useEffect(() => { ValidatorForm.addValidationRule("isRegisteredEmail", (value: string) => { if (emailList?.some((emai.. 더보기 이전 1 다음
