jineecode

Array.prototype.concat() concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. 이를 이용하여 setState에 새로운 배열을 넣어 불변성을 유지합니다. import React, { useState, useRef, useCallback } from "react"; import "./App.css"; import TodoTemplate from "./components/TodoTemplate"; import TodoInsert from "./components/TodoInsert"; import TodoList from "./components/TodoList"; function App() { const [todos, setTodos] = us..

1. 라이브러리 설치 npm install i18next --save //i18next npm install react-i18next i18next --save //react용 i18next npm install i18next-browser-languagedetector //브라우저에서 사용자 언어를 감지 2. 각각의 언어 text를 담아줄 json 파일 만들어주기 src/asset/lang.en.json src/asset/lang.ko.json 3. src/asset/i18n.js i18n 초기 설정 import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import langEn from "./lang.en.json";..

https://www.analyticsmania.com/post/single-page-web-app-with-google-tag-manager/ Track Single Page Web App with Google Analytics 4 and Google Tag Manager Learn how to track Single Page Web App with Google Tag Manager (or Single Page Website), and send that pageview data to Google Analytics. www.analyticsmania.com https://marketology.co.kr/all-category/tag-manager/%EA%B5%AC%EA%B8%80-%ED%83%9C%EA%..

React Native에서는 앱을 빌드할 때 앱의 전체 로직을 갖고 있는 JS Bundle을 갖게 되고 이것을 각 플랫폼(ios/android)에 심는다. JS Bundle은 JS Thread에 의해 실행되는데 각 플랫폼에서 앱을 실행하기 위한 Native Threads는 JS Thread와 직접 커뮤니케이션 할 수 없고 RN 에서 제공하는 Bridge로 인해 상호작용을 하게 된다.

import React, {Component} from 'react'; 그냥 React로 쓰는 것과, 중괄호 안에 Component로 쓰는 것의 차이가 무엇일까? export const hello = 'hello'; // import {hello} , 여러 번 쓸 수 있다. export default Hello; // import Hello, default로 export 할 경우에는 한 번만 가능하다. //module.exports 와 호환이 된다. 같다는 의미는 아님 노드에서는 require, module.exports만 지원한다. import, export를 썼는데도 가능한 이유는 바벨이 있기 때문임. 즉, 웹팩에서는 require로 불러와야 한다. (노드 기반이므로) const React = req..

TypeError: Cannot read property 'name' of undefined 상황: axios로 API를 불러오고자 할 때, API를 불러오기도 전에 렌더링 되어 undefined를 보게 되는 상태 import React, { useState, useEffect } from "react"; import axios from "axios"; const Emote = ({ match, history }) => { let [emote, setEmote] = useState([]); useEffect(() => { axios .get(`https://ffxivcollect.com/api/emotes/${match.params.id}`) .then((res) => { console.log(res.d..

react 작업 시, Warning으로 따라다니는 경고 메시지. a태그에 target=_blank 속성만 넣으면 나타나는 메시지로 보안 이슈로 알려져 있다. 원인: Tabnabbing 피싱 공격에 노출될 수 있기 때문. Tabnabbing 피싱 공격이란 target_blank인 태그를 클릭하였을 때 새롭게 열린 탭에서 기존 페이지를 피싱페이지로 바꿔 정보를 탈취하는 피싱공격입니다. 해결방법: rel=”noopener noreferrer” 속성을 추가하여 문제를 해결. rel=”noopener noreferrer”는 rel=noopener 속성이 부여된 링크를 통해 열린 페이지는 opener의 location변경과 같은 자바스크립트 요청을 거부함. 디버깅 완료

useEffect는 componentDidMount() , componentWillUnmount() 같은 컴포넌트 생명주기 훅이다. 사용법은 useEFfect 훅을 import를 해온 후, function 내부의 return 바로 전에 적어준다. 가급적이면 변수 이후에 적어주는 것이 좋다. (스코프로 인해 읽어오지 못할 수가 있음) import React, {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ }, []); return ( ) } useEffect 콜백함수 안에는 Detail 컴포넌트가 첫 등장하고나서 실행하고싶은 코드가 있으면 적어주면 된다. 콜백함수 이후에 등장하는 대괄호 안에는 조건문이 들어간다. 대괄호에는 s..