띠띠의 개발오답노트

React.js

• [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] 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-to-print] 특정 컴포넌트 프린트하기

  React.js/라이브러리 2024. 2. 26. 11:45

  버튼 클릭 시, 원하는 컴포넌트를 프린트하는 기능을 넣고 싶었다. 역시나 라이브러리가 존재하는군! 1. 라이브러리를 설치한다. https://www.npmjs.com/package/react-to-print react-to-print Print React components in the browser. Latest version: 2.15.1, last published: 12 days ago. Start using react-to-print in your project by running `npm i react-to-print`. There are 282 other projects in the npm registry using react-to-print. www.npmjs.com npm i react-..

  Read More
• [dayjs] x시간 전

  React.js/라이브러리 2024. 2. 7. 10:23

  알림 데이터에 'x시간 전' 기능을 넣고싶었다. dayjs를 활용하면 간단하게 구현이 가능했다. 1. dayjs 라이브러리를 설치한다. 2. dayjs와 필요한 plugin 및 locale을 불러온다. import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; import 'dayjs/locale/ko'; dayjs: 날짜와 시간을 처리하는 라이브러리 relativeTime: 상대적인 시간을 표시하는 기능을 추가하는 plugin dayjs/locale/ko: 한국어 locale 3. dayjs에 relativeTime 플러그인을 추가하고 한국어로 설정 후 현재 시간을 가져온다. dayjs.extend(relativeTi..

  Read More