띠띠의 개발오답노트

Develop

• [React] 다국어 지원 자동화 - i18next, Google Spreadsheet, i18next-parser

  React.js 2025. 1. 14. 16:30

  현재 작업중인 프로젝트에서는 전체 영어로 개발되었는데,국내 결제를 추가로 연동하려면 한국어도 제공되어야 PG사 이용이 가능했다. 처음에는 translate.google.com 스크립트를 추가해서 구글 전체 번역으로 간단하게 구현을 했다.예상했듯 엉망으로 번역되는 녀석,,,,,,,,    이왕 다국어를 지원하려면 번역자가 실시간으로 직접 번역 데이터를 삽입하면 개발자는 데이터를 가져오기만 하도록 자동화 하기로 했다. 기획자가 번역 관련 텍스트를 수정 요청 시에도 추가적인 코드 작업이 없도록 하고싶었다. 분명 까먹을게 뻔하기 때문에 구현 완료 후 미래의 나를 위한 기록을 남긴다.  시작해보자.   1. 필요한 라이브러리를 설치한다.npm install i18next react-i18nextnpm instal..

  Read More
• [react] Drag And Drop 구현 코드

  React.js/react 2024. 12. 4. 13:36

  import { IoLogoOctocat } from 'react-icons/io';import styled from 'styled-components';import testImg from '../../../assets/collection/carousel_01.jpg';import { FaPlus } from 'react-icons/fa';import { MdDeleteSweep } from 'react-icons/md';import { useState } from 'react';import { BasicButton } from '../../common/BasicButton';import { theme } from '../../../styles/theme';export const PropShopMedia..

  Read More
• [react-slick] currentSlide, slideCount error

  error 2024. 7. 16. 11:13

  react does not recognize the `currentSlide` prop on a dom element. if you intentionally want it to appear in the dom as a custom attribute, spell it as lowercase `currentslide` instead. if you accidentally passed it from a parent component, remove it from the dom element.  react does not recognize the `slideCount` prop on a dom element. if you intentionally want it to appear in the dom as a cust..

  Read More
• [react] 3D carousel 구현해보기!

  React.js/react 2024. 7. 8. 15:34

  import { useState } from 'react';import styled from 'styled-components';export const Carousel3D = () => { const [rotation, setRotation] = useState(0); const cells = Array.from({ length: 9 }, (_, i) => i + 1); const rotateCarousel = (direction) => { setRotation(rotation + (direction === 'next' ? -40 : 40)); }; return ( {cells.map((cell, index) => ( ..

  Read More
• [react-native] range slider (feat . @ptomasroos/react-native-multi-slider)

  카테고리 없음 2024. 4. 23. 10:36

  숫자의 범위를 지정하는 라이브러리가 필요했다. https://www.npmjs.com/package/@ptomasroos/react-native-multi-slider @ptomasroos/react-native-multi-slider Android and iOS supported pure JS slider component with multiple markers for React Native. Latest version: 2.2.2, last published: 4 years ago. Start using @ptomasroos/react-native-multi-slider in your project by running `npm i @ptomasroos/react-native-mult www.npmjs..

  Read More