띠띠의 개발오답노트

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

띠띠뿡 — Tue, 14 Jan 2025 16:30:01 +0900

현재 작업중인 프로젝트에서는 전체 영어로 개발되었는데,

국내 결제를 추가로 연동하려면 한국어도 제공되어야 PG사 이용이 가능했다.

처음에는 translate.google.com 스크립트를 추가해서 구글 전체 번역으로 간단하게 구현을 했다.

예상했듯 엉망으로 번역되는 녀석,,,,,,,,

이왕 다국어를 지원하려면 번역자가 실시간으로 직접 번역 데이터를 삽입하면 개발자는 데이터를 가져오기만 하도록 자동화 하기로 했다. 기획자가 번역 관련 텍스트를 수정 요청 시에도 추가적인 코드 작업이 없도록 하고싶었다.

분명 까먹을게 뻔하기 때문에 구현 완료 후 미래의 나를 위한 기록을 남긴다.

시작해보자.

1. 필요한 라이브러리를 설치한다.

npm install i18next react-i18next
npm install i18next-parser
npm install google-auth-library
npm install google-spreadsheet

2. root에 i18next-parser config 파일을 생성한다.

(skipOnVariables: false로 설정해도 변수로 삽입된 키값은 스캔하지 못하더라,,,,,)

// i18next-parser.config.cjs

module.exports = {
  input: ['src/**/*.{js,jsx,ts,tsx}'],
  output: 'src/locales/$LOCALE/$NAMESPACE.json',
  locales: ['en', 'ko'],
  defaultNamespace: 'common',
  defaultValue: (locale, namespace, key) => key,
  keySeparator: false,
  namespaceSeparator: false,
  useKeysAsDefaultValue: true,
  failOnWarnings: false,
  createOldCatalogs: false,
  skipOnVariables: false,
  lexers: {
    js: ['JavascriptLexer'],
    jsx: ['JsxLexer'],
    ts: ['TypescriptLexer'],
    tsx: ['JsxLexer'],
  },
  func: {
    list: ['t'],
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  resource: {
    loadPath: 'src/locales/{{lng}}/{{ns}}.json',
    savePath: 'src/locales/{{lng}}/{{ns}}.json',
  },
};

3. /src 내 아래 이미지 구조와 같이 폴더 및 파일을 생성하고, 각 로직을 작성한다.

*** 구글 관련 환경 변수 및 스프레드 시트 세팅은 아래와 같다.

1) 구글 클라우드 콘솔에서 프로젝트를 생성 후,

구글 콘솔 -> API 및 서비스 -> 라이브러리 -> google sheets API 검색해서 사용 버튼을 눌러준다.

2) 구글 콘솔 -> API 및 서비스 -> 사용자 인증 정보 -> 사용자 인증 정보 만들기 -> API 키

API 키를 생성한 후 환경 변수(VITE_GOOGLE_API_KEY)에 넣어준다.

3) 구글 콘솔 -> IAM 및 관리 -> 서비스 계정 -> 서비스 계정 만들기

생성한 서비스 계정 클릭 -> 키 -> 키 추가 -> 새 키 만들기 (키 유형 : JSON)

해당 JSON 파일을 다운로드하면 나머지 환경 변수들(VITE_GOOGLE_PRIVATE_KEY, VITE_GOOGLE_CLIENT_EMAIL, VITE_GOOGLE_PROJECT_ID, VITE_GOOGLE_TOKEN_URL)을 얻을 수 있다. 다 쮸셔넣자.

VITE_SHEET_ID는 시트 URL에서 얻을 수 있다.

4) 구글 스프레드 시트 -> 공유

사용자에 아까 생성한 서비스 계정을 편집자로 추가한다.

5) 시트명을 common으로 바꾸고 최상단에 en, ko를 세팅한다.

시트명

열 세팅

// i18next.js

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import ko_translation from '../locales/ko/common.json';
import en_translation from '../locales/en/common.json';

i18next.use(initReactI18next).init({
  resources: {
    en: {
      translation: en_translation,
    },
    ko: {
      translation: ko_translation,
    },
  },
  lng: 'en', // 기본 언어
  fallbackLng: 'en', // 대체 언어
  debug: true,
  interpolation: {
    escapeValue: false,
  },
});

export default i18next;

// sheetDownload.js

import fs from 'fs';
import { GoogleSpreadsheet } from 'google-spreadsheet';
import dotenv from 'dotenv';

dotenv.config();

(async function makeJson() {
  const doc = new GoogleSpreadsheet(process.env.VITE_SHEET_ID, {
    apiKey: process.env.VITE_GOOGLE_API_KEY,
  });

  await doc.loadInfo();
  const sheets = doc.sheetCount;

  for (let i = 0; i < sheets; i++) {
    const sheet = doc.sheetsByIndex[i];
    await sheet.loadCells();
    const rows = await sheet.getRows();
    const langs = await sheet._headerValues;

    const jsonData = {};

    langs.forEach((language, index) => {
      for (let j = 1; j < rows.length + 1; j++) {
        jsonData[sheet.getCell(j, 0).value] = sheet.getCell(j, index).value;
      }

      const jsonString = JSON.stringify(jsonData, null, 2);
      fs.writeFileSync(`./src/locales/${language}/${sheet.title}.json`, jsonString);
    });
  }
})();

// sheetUpload.js

import { GoogleSpreadsheet } from 'google-spreadsheet';
import { JWT } from 'google-auth-library';
import dotenv from 'dotenv';
import fs from 'fs';
import path from 'path';
import { dirname } from 'path';
import { fileURLToPath } from 'url';

dotenv.config();

async function uploadJsonToGoogleSheet() {
  try {
    const serviceAccountEmail = process.env.VITE_GOOGLE_CLIENT_EMAIL;
    const privateKey = process.env.VITE_GOOGLE_PRIVATE_KEY?.replace(/\\n/g, '\n');
    const sheetId = process.env.VITE_SHEET_ID;

    const __filename = fileURLToPath(import.meta.url);
    const __dirname = dirname(__filename);

    if (!serviceAccountEmail || !privateKey || !sheetId) {
      throw new Error('환경 변수에서 필요한 서비스 계정 정보가 누락되었습니다.');
    }

    const serviceAccountAuth = new JWT({
      email: serviceAccountEmail,
      key: privateKey,
      scopes: ['https://www.googleapis.com/auth/spreadsheets'],
    });

    const doc = new GoogleSpreadsheet(sheetId || '', serviceAccountAuth);
    await doc.loadInfo();
    const sheet = doc.sheetsByIndex[0];
    if (!sheet) {
      throw new Error('첫 번째 시트를 찾을 수 없습니다.');
    }

    const enJson = JSON.parse(fs.readFileSync(path.join(__dirname, 'en', 'common.json'), 'utf-8'));
    await addJsonToSheet(enJson, sheet);
  } catch (error) {
    console.error('Google Sheet 업데이트 중 오류 발생:', error.message);
    console.error(error.stack);
  }
}

async function addJsonToSheet(jsonData, sheet) {
  try {
    await sheet.loadHeaderRow();
    const existingRows = await sheet.getRows();

    const existingKeys = existingRows
      .filter((row) => row._rawData && row._rawData[0])
      .map((row) => row._rawData[0].trim().toLowerCase());

    for (const [key] of Object.entries(jsonData)) {
      const trimmedKey = key.trim().toLowerCase();

      if (existingKeys.includes(trimmedKey)) {
        console.log(`이미 존재하는 키: ${key}, 추가하지 않음.`);
        continue;
      }
      await sheet.addRow({
        en: key,
      });
    }
  } catch (err) {
    console.error('Google Sheet 업데이트 중 오류 발생:', err.message);
  }
}

uploadJsonToGoogleSheet();

4. package.json에 번역 및 스캔 scripts를 추가한다.

    "translate_en": "node ./src/locales/sheetDownload.js && powershell -Command \"Get-Content ./src/locales/en/*.json\"",
    "translate_ko": "node ./src/locales/sheetDownload.js && powershell -Command \"Get-Content ./src/locales/ko/*.json\"",
    "translate": "npm run translate_en",
    "scan:i18n": "npx i18next-parser --config i18next-parser.config.cjs && node src/locales/sheetUpload.js"

5. Language 상태를 바꿔주는 UI 컴포넌트를 생성한다.

import { language } from '../../store/language';
import { useTranslation } from 'react-i18next';

export const LANGUAGES = [
  { code: 'ko', name: '한국어', flag: 'kr' },
  { code: 'en', name: 'English', flag: 'us' },
];

export const Language = () => {
  const { i18n } = useTranslation();
  const [chooseCountry, setChooseCountry] = useState({
    code: 'en',
    name: 'English',
    flag: 'us',
  });
  const [isHovered, setIsHovered] = useState(false);
  const setLng = useSetRecoilState(language);

  const handleLanguageChange = async (lang) => {
    setChooseCountry(lang);
    setLng(lang.code);
    i18n.changeLanguage(lang.code);
  };

  return (
    <>
      <ButtonCotainer onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
        <Flag code={chooseCountry.flag} />
        {chooseCountry.name}

        {isHovered && (
          <LanguageList onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
            {LANGUAGES.map((lang) => (
              <LanguageItem key={lang.code} onClick={() => handleLanguageChange(lang)}>
                <Flag code={lang.flag} />
                {lang.name}
              </LanguageItem>
            ))}
          </LanguageList>
        )}
      </ButtonCotainer>
    </>
  );
};

6. 아무 컴포넌트 내 번역을 원하는 부분을 t 함수로 감싸준다.

(동적인 텍스트 즉, 변수는 지원되지 않는다. 젠장)

const { t } = useTranslation();

// 개행을 원할 시 \n 추가 후 white-space: pre-line; 스타일을 먹여준다.
<h3>{t('Master\n the Art of 3D')}</h3>
<p>{t('test')}</p>

이제 해당 script를 실행해보자!

npm run scan:i18n 실행 시,

parser.config에서 지정한 파일을 스캔 후 t 함수가 사용된 부분을 찾아 키값을 각 common.json 파일에 추가 후 시트에 업로드한다. 구글 스프레드 시트를 직접 확인해보면 키값이 삽입되어 있는 것을 확인할 수 있다.

이제 번역자가 업로드된 시트의 키값을 확인 후 ko열에 번역한 텍스트를 삽입한다. 작업을 마치고 이번엔 npm run translate를 실행하면, 번역된 파일이 각 common.json에 추가 된 것을 확인할 수 있다.

끗! 뿌듯

[react] Drag And Drop 구현 코드

띠띠뿡 — Wed, 4 Dec 2024 13:36:37 +0900

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 = () => {
  const [draggedItemIndex, setDraggedItemIndex] = useState(null);
  const [carouselData, setCarouselData] = useState([{ id: 1, title: '', description: '', image: testImg }]);

  const addCarouselData = () => {
    setCarouselData((prevData) => [
      ...prevData,
      {
        id: prevData.length + 1,
        title: '',
        description: '',
        image: testImg,
      },
    ]);
  };

  const handleDragStart = (index) => {
    setDraggedItemIndex(index);
  };

  const handleDragOver = (event) => {
    event.preventDefault();
  };

  const handleDrop = (index) => {
    if (draggedItemIndex === null) return;

    const updatedData = [...carouselData];
    const [draggedItem] = updatedData.splice(draggedItemIndex, 1);
    updatedData.splice(index, 0, draggedItem);

    setCarouselData(updatedData);
    setDraggedItemIndex(null);
  };

  const handleDropToDelete = () => {
    if (draggedItemIndex === null) return;

    const updatedData = [...carouselData];
    updatedData.splice(draggedItemIndex, 1);

    setCarouselData(updatedData);
    setDraggedItemIndex(null);
  };

  const handleReset = () => {
    setCarouselData([{ id: 1, title: '', description: '', image: testImg }]);
  };

  return (
    <PropShopMediaContainer $isDragging={draggedItemIndex !== null}>
      <div className='header'>
        <div className='left'>
          <IoLogoOctocat />
          INTRO CAROUSEL IMAGES
        </div>
        <div className='right'>
          <BasicButton onClick={handleReset}>초기화</BasicButton>
          <BasicButton
            bgColor={theme.colors.blue}
            fontColor={theme.colors.white}
            borderColor={theme.colors.blue}
            hoverBgColor={theme.colors.darkBlue}
          >
            저장
          </BasicButton>
        </div>
      </div>

      <div className='carousel-data-list'>
        {carouselData.map((data, index) => (
          <div
            className='carousel-data'
            key={data.id}
            draggable
            onDragStart={() => handleDragStart(index)}
            onDragOver={handleDragOver}
            onDrop={() => handleDrop(index)}
          >
            <div className='carousel-image'>
              <img src={data.image} alt={`carousel-${index + 1}`} />
            </div>
            <div className='index'>{data.id}</div>
            <div className='title'>
              <input
                type='text'
                name={`title-${data.id}`}
                placeholder='타이틀을 입력하세요.'
                value={data.title}
                onChange={(e) =>
                  setCarouselData((prevData) =>
                    prevData.map((item) => (item.id === data.id ? { ...item, title: e.target.value } : item))
                  )
                }
              />
            </div>
            <div className='description'>
              <input
                type='text'
                name={`description-${data.id}`}
                placeholder='내용을 입력하세요.'
                value={data.description}
                onChange={(e) =>
                  setCarouselData((prevData) =>
                    prevData.map((item) => (item.id === data.id ? { ...item, description: e.target.value } : item))
                  )
                }
              />
            </div>
          </div>
        ))}
        <div
          className='add-carousel-data'
          onClick={addCarouselData}
          onDragOver={handleDragOver}
          onDrop={handleDropToDelete}
        >
          {draggedItemIndex !== null ? <MdDeleteSweep className='delete-icon' /> : <FaPlus />}
        </div>
      </div>
    </PropShopMediaContainer>
  );
};

const PropShopMediaContainer = styled.div`
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 12px 0;
      font-size: 24px;
      font-family: Pretendard-SemiBold;

      svg {
        font-size: 28px;
      }
    }
    .right {
      display: flex;
      gap: 12px;
    }
  }

  .carousel-data-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;

    .carousel-data {
      position: relative;
      background-color: ${(props) => props.theme.colors.darkGray};
      padding: 12px;
      border-radius: 4px;

      input {
        width: 100%;
        background-color: ${(props) => props.theme.colors.lightGray};
        padding: 4px 8px;
        border: none;
        border-radius: 4px;
        margin-top: 8px;
        outline: none;
        color: ${(props) => props.theme.colors.darkGray};
      }

      .index {
        position: absolute;
        top: 2px;
        left: 3px;
        font-size: 12px;
        color: ${(props) => props.theme.colors.lightGray}80;
      }

      .carousel-image {
        width: 100%;
        height: calc(450px / 2);
        border: 1px solid ${(props) => props.theme.colors.darkGray};
        border-radius: 4px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 4px;
        }
      }
    }
  }

  .add-carousel-data {
    background-color: ${(props) => props.theme.colors.darkGray}50;
    min-height: 312px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 3px solid ${(props) => (props.$isDragging ? `${props.theme.colors.red}90` : `inherite`)};

    .delete-icon {
      color: ${(props) => props.theme.colors.red};
    }

    svg {
      font-size: 48px;
    }

    &:hover {
      background-color: ${(props) => props.theme.colors.darkGray}90;
    }
  }
`;

[react-slick] currentSlide, slideCount error

띠띠뿡 — Tue, 16 Jul 2024 11:13:52 +0900

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 custom attribute, spell it as lowercase `slidecount` instead. if you accidentally passed it from a parent component, remove it from the dom element.

react-slick 라이브러리를 사용하는데, 위의 warning을 만났다.

아래는 수정 전 코드이다.

import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';

export const BasicCarousel = ({
  imageList,
  alt = 'prop',
  dots = true,
  slidesToShow,
  slidesToScroll,
  height,
  infinite = true,
  prevArrow = <IoIosArrowBack />,
  nextArrow = <IoIosArrowForward />,
  onItemClick,
}) => {
  const settings = {
    dots,
    infinite,
    speed: 500,
    slidesToShow,
    slidesToScroll,
    prevArrow,
    nextArrow,
  };

  return (
    <StyledSlider {...settings} $height={height}>
      ...
    </StyledSlider>
  );
};

서칭해보니, Arrow를 커스텀 후 사용하면 해결된다고 한다.

https://github.com/akiran/react-slick/issues/623#issuecomment-629764816

아래는 수정된 코드이다.

import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';

export const BasicCarousel = ({
  imageList,
  alt = 'prop',
  dots = true,
  slidesToShow,
  slidesToScroll,
  height,
  infinite = true,
  onItemClick,
}) => {
	
    // arrow 커스텀
  const PrevgArrow = ({ currentSlide, slideCount, ...props }) => <IoIosArrowBack {...props} />;
  const NextArrow = ({ currentSlide, slideCount, ...props }) => <IoIosArrowForward {...props} />;

  const settings = {
    dots,
    infinite,
    speed: 500,
    slidesToShow,
    slidesToScroll,
    prevArrow: <PrevgArrow />,
    nextArrow: <NextArrow />,
  };

  return (
    <StyledSlider {...settings} $height={height}>
      ...
    </StyledSlider>
  );
};

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

띠띠뿡 — Mon, 8 Jul 2024 15:34:44 +0900

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 (
    <>
      <Scene>
        <Carousel style={{ transform: `translateZ(-288px) rotateY(${rotation}deg)` }}>
          {cells.map((cell, index) => (
            <Cell key={index} style={{ '--i': index }}>
              {cell}
            </Cell>
          ))}
        </Carousel>
      </Scene>
      <CarouselOptions>
        <button onClick={() => rotateCarousel('prev')}>←</button>
        <button onClick={() => rotateCarousel('next')}>→</button>
      </CarouselOptions>
    </>
  );
};

const Scene = styled.div`
  border: 1px solid #ccc;
  margin: 40px 0;
  position: relative;
  width: 210px;
  height: 140px;
  margin: 80px auto;
  perspective: 1000px;
`;

const Carousel = styled.div`
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
`;

const Cell = styled.div`
  position: absolute;
  width: 190px;
  height: 120px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
  line-height: 116px;
  font-size: 80px;
  font-weight: bold;
  color: white;
  text-align: center;
  transition: transform 1s, opacity 1s;
  background: ${({ style }) => `hsla(${style['--i'] * 40}, 100%, 50%, 0.8)`};
  transform: ${({ style }) => `rotateY(${style['--i'] * 40}deg) translateZ(288px)`};
`;

const CarouselOptions = styled.div`
  text-align: center;
  position: relative;
  z-index: 2;
  background: hsla(0, 0%, 100%, 0.8);

  button {
    margin: 10px;
    padding: 5px 10px;
    font-size: 16px;
  }
`;

결과 화면

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

띠띠뿡 — Tue, 23 Apr 2024 10:36:16 +0900

숫자의 범위를 지정하는 라이브러리가 필요했다.

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.com

사용법이 어렵지 않았고, 커스텀 하기도 편해서 자주 애용할 듯 하다.

  const customMarker = (index) => {
    return (
      <View style={styles.marker}>
        <Text>{ageRange[index]}</Text>
      </View>
    );
  };
  
  ...

<MultiSlider
  isMarkersSeparated={true}
  values={ageRange}
  sliderLength={380}
  onValuesChange={(values) => setAgeRange(values)}
  min={0}
  max={100}
  step={1}
  customMarkerLeft={() => customMarker(0)}
  customMarkerRight={() => customMarker(1)}
  selectedStyle={{ backgroundColor: colors.navy }}
  unselectedStyle={{ backgroundColor: colors.lightGray }}
/>

[react-native] Nesting navigators

띠띠뿡 — Mon, 15 Apr 2024 15:36:42 +0900

npm install @react-navigation/stack @react-navigation/bottom-tabs

Tab navigator로 구성한 상태에서 Tab에 존재하지 않는 스크린을 추가하고 싶었다.

검색해보니 새 화면이 스택 위에 배치되는 Stack navigator를 사용하면 될 거라 생각했다.

ERROR Error: Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting.

<NavigationContainer /> 내에 stack과 tab을 같이 사용해서 오류가 나는 것을 확인했고, 공식 사이트에서 Nesting navigators를 찾아서 예제 코드를 확인 후 해결할 수 있었다.

https://reactnavigation.org/docs/nesting-navigators/

Nesting navigators | React Navigation

Nesting navigators means rendering a navigator inside a screen of another navigator, for example:

reactnavigation.org

걍 stack navigator 안에 tab navigator를 포함시키면 됨.

export default function App() {
  return <Navigator />;
}

const Stack = createStackNavigator();

export const Navigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Tab" component={TabNavigation} options={{ headerShown: false }} />
        <Stack.Screen name="PersonProfile" component={PersonProfile} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const Tab = createBottomTabNavigator();

export const TabNavigation = () => {
  return (
    <Tab.Navigator>
      {TAB_MENU.map((menu) => {
        return (
          <Tab.Screen
            name={menu.name}
            component={menu.component}
            options={{
              tabBarIcon: ({ size, color }) => <MaterialIcons name={menu.icon} size={size} color={color} />,
              headerShown: false,
              tabBarActiveTintColor: 'green',
              tabBarInactiveTintColor: 'gray',
            }}
          />
        );
      })}
    </Tab.Navigator>
  );
};

[react-to-print] 특정 컴포넌트 프린트하기

띠띠뿡 — Mon, 26 Feb 2024 11:45:08 +0900

버튼 클릭 시, 원하는 컴포넌트를 프린트하는 기능을 넣고 싶었다.

역시나 라이브러리가 존재하는군!

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-to-print

2. useReactToPrint 훅을 가져온다.

import { useReactToPrint } from 'react-to-print';

3. 프린트하길 원하는 컴포넌트에 ref를 달아준다.

const componentRef = useRef(null);

<PatientListContainer ref={componentRef}>
   ...
</PatientListContainer>

4. 버튼에 이벤트를 등록하면 끗!

const handlePrint = useReactToPrint({
    content: () => componentRef.current,
});

...

<span role="button" onClick={handlePrint}>

결과 화면

[vercel 빌드 오류] Cannot find module '파일 경로' or its corresponding type declarations.

띠띠뿡 — Wed, 21 Feb 2024 11:17:57 +0900

로컬에서는 빌드 오류가 없었는데, Vercel로 배포 시 해당 오류가 발생했다.

로컬 저장소와 원격 저장소(git)의 파일명의 대소문자 차이가 원인이었다.

git에서 파일명의 대소문자를 구분하도록 설정하여 해결하였다.

git config core.ignorecase false

설정 후 파일명 변경 사항을 푸시해준다.

- 참고

https://velog.io/@shyuuuuni/Vercel-Cannot-find-module-%ED%8C%8C%EC%9D%BC%EB%AA%85-or-its-corresponding-type-declarations-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0?utm_source=oneoneone

[dayjs] x시간 전

띠띠뿡 — Wed, 7 Feb 2024 10:23:22 +0900

알림 데이터에 '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(relativeTime);
dayjs.locale('ko');
const now = dayjs();

4. 날짜를 dayjs 객체로 변환 후 from(now) 메서드로 현재 시간과의 차이를 계산한다.

<span>{dayjs(item.date).from(now)}</span>

날짜를 현재 시간(now)으로부터 얼마나 지났는지를 상대적인 시간으로 변환하여 표시하는 기능을 수행하며, "몇 분 전", "몇 시간 전", "어제" 등의 형식으로 시간 차이를 표현한다.

[React] SSE(Server-Sent Event)를 활용한 알림 기능 구현

띠띠뿡 — Mon, 5 Feb 2024 12:42:53 +0900

SSE (Server-Sent Event)란?

서버에서 클라이언트로 데이터를 보내는 단방향 통신

실시간 알림 기능과 같이 단방향으로 데이터를 보낼 때 사용된다.

서버와 클라이언트의 연결 상태를 유지하고, 서버는 클라이언트로 지속적으로 데이터를 전송할 수 있다.

EventSource

JS의 EventSource로 연결 가능하다.

EventSource.onopen : 서버와 연결 시 호출됨
EventSource.onmessage : 서버로부터 메시지 수신 시 호출됨
EventSource.onerror : 에러 감지 시 호출됨

실시간 알림 구현 (프론트단 코드)

header에 토큰을 담아 보내야 했는데, event-source-polyfill 라이브러리를 사용해서 해결

  const EventSource = EventSourcePolyfill || NativeEventSource;

  useEffect(() => {
    if (setIsSignIned) {
      console.log('SSE작동 시작!');
      let eventSource: EventSourcePolyfill;
      const fetchSSE = async () => {
        try {
          eventSource = new EventSource(`/api/notify`, {
            headers: {
              Authorization: `Bearer ${API_TOKEN}`,
            },
            withCredentials: true,
          });

          /* EVENTSOURCE ONMESSAGE ---------------------------------------------------- */
          eventSource.onmessage = async (event) => {
            const res = await event.data;
            console.log('res', res);
            // 쿼리키를 활용한 refetching
          };

          /* EVENTSOURCE ONERROR ------------------------------------------------------ */
          eventSource.onerror = async () => {};
        } catch (error) {
          console.log(error);
        }
      };
      fetchSSE();
      return () => eventSource.close();
    }
  }, [setIsSignIned]);