Study/실무 (34) 썸네일형 리스트형 [react] 다국어 적용하기 - 3편 (다국어에 변수 넣기) 전 포스트에 이어서 작성하는 내용이므로 설치 및 다국어 적용이 안되신 분은 앞의 포스트를 보고 와 주세요! [react] 다국어 적용하기 - 2편 (언어 변경 버튼 만들기) 전 포스트에 이어서 작성하는 내용이므로 설치 및 다국어 적용이 안되신 분은 앞의 포스트를 보고 와 주세요! react 에서 다국어 적용하기 (feat.react-i18next) 1. i18next 와 react-i18next 를 설치한다. npm in code00.tistory.com 1. {t("testText", {넣을 변수명})} 으로 데이터를 넣는다. src/Test.js import i18n from "languages/i18n"; import { useTranslation } from "react-i18next"; cons.. [react] 다국어 적용하기 - 2편 (언어 변경 버튼 만들기) 전 포스트에 이어서 작성하는 내용이므로 설치 및 다국어 적용이 안되신 분은 앞의 포스트를 보고 와 주세요! react 에서 다국어 적용하기 (feat.react-i18next) 1. i18next 와 react-i18next 를 설치한다. npm install i18next react-i18next 2. src 폴더 아래에 language 폴더를 생성하고 i18n.js 파일을 작성한다. src/language/i18n.js import i18n from "i18next"; impor.. code00.tistory.com 1. 사용할 컴포넌트에서 i18n 불러오기 src/Test.js import i18n from "languages/i18n"; import { useTranslation } from "r.. [react] 다국어 적용하기 - 1편 (feat.react-i18next) 1. i18next 와 react-i18next 를 설치한다. npm install i18next react-i18next 2. src 폴더 아래에 language 폴더를 생성하고 i18n.js 파일을 작성한다. src/language/i18n.js import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import en from "languages/en.json"; import ko from "languages/ko.json"; i18n .use(initReactI18next) .init({ resources: { en: { translation: en, }, ko: { translation: ko, }, }, lng:.. 정규표현식 정리 플래그 정규표현식에는 검색에 영향을 주는 플래그를 선택적으로 붙일 수 있다. i i 플래그가 붙으면 대·소문자 구분 없이 검색합니다. A===a g g 플래그가 붙으면 패턴과 일치하는 모든 것들을 찾습니다. g 플래그가 없으면 패턴과 일치하는 첫 번째 결과만 반환됩니다. m 행이 바뀌어도 계속 검색이 가능합니다. s .이 개행 문자 \n도 포함하도록 ‘dotall’ 모드를 활성화합니다. u 유니코드 전체를 지원합니다. 이 플래그를 사용하면 서로게이트 쌍(surrogate pair)을 올바르게 처리할 수 있습니다. y 문자 내 특정 위치에서 검색을 진행하는 ‘sticky’ 모드를 활성화 시킵니다. 문자열 검색 const searchText = /찾을 문자열/flag // abc 찾기 const search.. new Date() 한국시간구하기 // 1. 현재 시간(Locale) const curr = new Date(); console.log("현재시간(Locale) : " + curr + ' '); // 현재시간(Locale) : Tue May 31 2022 09:00:30 // 2. UTC 시간 계산 const utc = curr.getTime() + (curr.getTimezoneOffset() * 60 * 1000); // 3. UTC to KST (UTC + 9시간) const KR_TIME_DIFF = 9 * 60 * 60 * 1000; //한국 시간(KST)은 UTC시간보다 9시간 더 빠르므로 9시간을 밀리초 단위로 변환. const kr_curr = new Date(utc + (KR_TIME_DIFF)); //UTC 시간을 한국.. 문자열에서 첫번째, 마지막 문자 가져오기 CharAt() 함수 이용하기 charAt() 함수는, 전달된 파라미터의 index에 위치한 글자를 리턴한다. let str = "문자열가져오기" let firstChar = str.charAt(0); let secondChar = str.charAt(1); let lastChar = str.charAt(str.length-1); console.log(firstChar); // 문 console.log(secondChar); // 자 console.log(lastChar); // 기 Substr() 함수 이용하기 string.substr(start, length) substr() 함수는, 파라미터로 입력받은 start index부터 length 길이만큼 string을 잘라내어 반환하는 함수이다. let .. Axios delete시 body에 데이터 넣기 DELETE 요청의 두 번째 인자에 data: {} atrribute를 넣어주기 export const deleteItem = async (id) => { try { const response = await api.delete(`/test`, { data: { id: id, }, }); return response.data; } catch (error) { const err = error as AxiosError; if (err.response) { alert(err.response.data.message); } } } [React] TR Link안에 TD하나만 Link안보내기 다음과 같은 리스트에서 어느 곳을 눌러도 디테일로 보내고는 싶은데, 셀렉트를 눌렀을 때는 셀렉트가 활성화돼서 활성화, 비활성화를 골라야 하는데 셀렉트를 누르면 바로 디테일로 가버린다.. const handleDetail = (id: number) => { navigate(`${id}`); }; handleDetail(id)}> {id} {name} ... 어떻게 해야 되나 고민하다 select TD에서 이벤트를 해제시켜보기로 했다. e.stopPropagation 이벤트가 상위 엘리먼트에 전달되지 않게 막아 준다. const handleDetail = (id: number) => { navigate(`${id}`); }; const handleCancel = ( event: React.MouseEvent.. 이전 1 2 3 4 5 다음
