프론트엔드 개발자가 될거야./라이브러리
-
[React-i18next] 웹페이지에 '더 효율적으로' 다국어 적용하기 (with: typescript)프론트엔드 개발자가 될거야./라이브러리 2023. 3. 9. 17:29
불러와야하는 json파일이 길 때, json파일을 항상 호출하는 것은 매우 비효율적이다. 이에 i18next에는 네트워크를 통해 번역 파일을 서버에서 가져오게 하는 기능이 있다. 1. 초기세팅 import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import HttpBackend from "i18next-http-backend"; i18n .use(initReactI18next) .use(HttpBackend) .init({ fallbackLng: false, // 지원하지 않는 언어 또는 키가 사용되었을 때 fallback 언어로 사용할 언어 설정 fallbackNS: false, // fallback 언어로 사용할 ..
-
[React-i18next] 웹페이지에 다국어 적용하기 (with: typescript)프론트엔드 개발자가 될거야./라이브러리 2023. 3. 2. 21:17
현재 개발중인 웹페이지는 한국은 물론이고 영어권, 중국, 일본까지 사용자를 가지고 있다. 한국어, 영어, 중국어, 일본어를 모두 웹페이지에 그려내야한다. 어떻게 할 수 있을까? React-i18next 다국어 처리를 해주는 라이브러리이다. react-i18next는 React 애플리케이션에서 다국어 지원을 제공하는 i18next 라이브러리의 React 바인딩이다. https://react.i18next.com/ Introduction - react-i18next documentation Hello {{name}} , you have {{count}} unread message(s). Go to messages. react.i18next.com React-i18next 사용법 1. initReactI18n..
-
[Framer Motion] animation의 최강자 Framer Motion 알아보기, Animation/Variants/Gestures/Drag프론트엔드 개발자가 될거야./라이브러리 2023. 1. 8. 20:11
Framer Motion는 Framer가 제공하는 리액트용 애니메이션 라이브러리이다. Framer Motion을 잘 이용한다면 Drag이벤트, Scroll이벤트 등 다양한 애니메이션들을 쉽게 표현해 낼 수 있다. 노마드코더 리액트 마스터를 통해 접할 수 있었는데 CSS로 했었으면 코드를 몇시간동안 고민고민해서 써야지 구현되는 효과들이 단 한줄로 구현되는 것을 보고 정말 놀라웠다... 아래는 Framer Motion 사이트이다. 여러 docs들도 있으니 보고 참고해도 좋을 것 같다. https://www.framer.com/motion/ Production-Ready Animation Library for React | Framer Motion Framer Motion is a production-read..
-
[react-beautiful-dnd] 칸반보드 만들기, react-beautiful-dnd 상세설명프론트엔드 개발자가 될거야./라이브러리 2023. 1. 7. 16:11
노마드 코더 강의를 들으며 react-beautiful-dnd 라이브러리를 이용하여 칸반보드를 만들었다! 간단한 메모기능이 있고 메모를 다른 칸반보드로 옮길 수 있다. 추후 로컬스토리지에 저장 및 로드 기능, 삭제기능, 칸반보드 생성 기능도 추가할 것이다!! 이 게시물에는 칸반보드를 만들면서 알게 된 react-beautiful-dnd에 대해 정리해보려고 한다. react-beautiful-dnd npm i react-beautiful-dnd npm i --save-dev @types/react-beautiful-dnd // 타입스크립트라면 install 필요! DragDropContext 드래그 앤 드롭을 가능하게 하고 싶은 앱의 한 부분이다. - onDragEnd 함수 : 유저가 드래그를 끝낸 시점에..
-
리액트 캘린더 라이브러리 Datepicker 사용법, 커스텀하기프론트엔드 개발자가 될거야./라이브러리 2022. 8. 7. 22:17
제주패스를 클론코딩하면서 내가 맡았던 부분에서 가장 도전적인 부분은 캘린더 라이브러리를 사용하는 것 이었다. 라이브러리라는 것을 처음 시도해보았기 때문이다. 일단 결과물부터 보여주자면 출발일, 도착일을 선택하면 탑승일에 해당 날짜가 표시되고 검색 버튼도 편도면 편도, 왕복이면 왕복으로 잘 구현된다. 또한 캘린더도 커스텀하여 화이트 앤 블루로 스타일링했다. 다운로드 하는 법 https://www.npmjs.com/package/react-datepicker react-datepicker A simple and reusable datepicker component for React. Latest version: 4.8.0, last published: 3 months ago. Start using react..