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;
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은 window 메서드로, 매개변수인 시간만큼 함수를 반복 하는 기능을 한다
[argument1, argument2..] 는 옵션이고 전달되는 함수의 매개변수로 사용된다
- 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 함수의 매개변수는 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은 매개변수로 전달된 시간 이후에 한번만 실행하는 함수