22.05.18 (수) react-i18next, webRCT

Southbig·2022년 5월 18일
0

react-i18next

https://react.i18next.com/latest/trans-component

샘플 코드

// i18n.js
import i18n from "i18next";
import { initReactI18next } from 'react-i18next';

import KO from './ko/ko.json'
import EN from './en/en.json'
import DE from './de/de.json'

const resources = {
  en: {
    translation: EN
  },
  ko: {
    translation: KO
  },
  de: {
    translation: DE
  }

  // en: {
  //   translation: {
  //     "인사": "hello",
  //     "이름": "TAE SIK NAM"
  //   },
  // },
  // ko: {
  //   translation: {
  //     "인사": "안녕하세요",
  //     "이름": "남태식"
  //   }
  // }
}


i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: "ko",
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;
// mycomponents
import React from "react";

import { useTranslation } from "react-i18next";

const Mycomponents = () => {
  const { t, i18n } = useTranslation();

  const clickHandler = (lan) => {
    i18n.changeLanguage(lan);
  };

  return (
    <div>
      <button onClick={() => clickHandler("ko")}>ko</button>
      <button onClick={() => clickHandler("en")}>en</button>
      <button onClick={() => clickHandler("de")}>de</button>
      <p>{t("인사")}</p>
      <p>{t("이름")}</p>
    </div>
  );
};

export default Mycomponents;

webRTC

webRTC open source

tippy

tippy.js는 popper.js를 기반으로 업그레이드화된 플러그인으로, popper.js의 스크롤 액션이 default로 들어가 있다
여기서 스크롤 액션이란, 예로, tooltip의 위치를 상단으로 설정(placement: 'top')하였을 때, 스크롤에 의해 tooltip이 안 보이게 될 시, 자동으로 tooltip의 위치를 아래로 내려준다, 또 스크롤을 올리면, 다시 상단으로 올려준다

플러그인 연결

<button class="클래스명">make tooltip!</button>
<script src="https://unpkg.com/@popperjs/core@2"></script><!-- tippy 사용 위찬 연결-->
<script src="https://unpkg.com/tippy.js@6"></script><!-- tippy 사용 위찬 연결-->
<script>
  // tippy 설정
  tippy('.클래스명', {
    content: '툴팁 내용'
  });
</script>

setInterval & clearInterval

setInterval은 window 메서드로, 매개변수인 시간만큼 함수를 반복 하는 기능을 한다

[argument1, argument2..] 는 옵션이고 전달되는 함수의 매개변수로 사용된다

setInterval

mdn setInterval

Parameters

- func
A function to be executed every delay milliseconds. The first execution happens after delay milliseconds.

딜레이 시간이 지날때마다 함수실행
첫 실행은 딜레이 지정 시간이 지나고 나서 실행된다

- code
An optional syntax allows you to include a string instead of a function, which is compiled and executed every delay milliseconds. This syntax is not recommended for the same reasons that make using eval() a security risk.

- delayOptional
The time, in milliseconds (thousandths of a second), the timer should delay in between executions of the specified function or code. Defaults to 0 if not specified. See Delay restrictions below for details on the permitted range of delay values.

- arg0, ..., argN Optional
Additional arguments which are passed through to the function specified by func once the timer expires.

setInterval 함수는 기준 간격을 두고 주기적으로 이벤트를 발생 시키고 싶을 때 사용

const timer = setInterval(function(){ 특정함수(); }, 1000);

clearInterval()

mdn clearInterval

clearInterval 함수의 매개변수는 setInterval 함수가 리턴해주는 값을 사용

clearInterval(timer);

setInterval이 진행되는 과정을 보기 위한 코드

let isStarting = false;

let hallo = document.querySelector('h1')

function startRecordingTime() {
  let count = 0
  let rc = setInterval(function printTime() {
    if (isStarting) {
      count++
      hallo.textContent = `interval 진행중 ${count}`
      return;
    } else {
      hallo.textContent = "interval 정지"
      count = 0
      clearInterval(rc);
      console.log('rc in', rc)
    }
  }, 1000);
  console.log('rc out', rc)
}

let button = document.querySelector('button')

button.addEventListener('click', () => {
  if (!isStarting) {
    // button.textContent = 'start'
    button.textContent = 'stop'
    isStarting = true
    startRecordingTime()
  } else {
    isStarting = false
    // button.textContent = 'stop'
    button.textContent = 'start'
    startRecordingTime()
  }

})

사용시 주의 사항
setInterval의 두번째 인자로 시간 설정시,
설정된 시간만 큼 지난 후에 실행
실행 중지시에도 실행된 시간만큼 지난 후 중지 가능

setTimeout

setTimeout은 매개변수로 전달된 시간 이후에 한번만 실행하는 함수

profile
즐겁게 살자

0개의 댓글