Front-end/React53 React에서 사용자 브라우저를 쉽게 감지하는 방법 react-device-detect 리액트에서 지원하지않는 IE브라우저 IE 는 고작 10% 의 사람들이 사용한다고 한지만, 10%는 엄청난 수치입니다. 한 브라우저에서 잘 작동하는 몇 가지 기능이 있지만 다른 브라우저로 전환하면 예상대로 작동하지 않습니다. 최근에 React 프로젝트 중 하나에 추가 한 기능이 IE11과 호환되지 않는 것을 발견했습니다. IE11과 호환되는 기능을 추가하려면 많은 추가 작업이 필요했습니다. 대신 사용자가 IE11을 사용하는 경우 기능을 비활성화하기로 결정했습니다. 내 사용자가 사용중인 브라우저를 확인하는 간단한 방법을 찾고 싶었습니다. 이 기능을 비롯한 많은 기능을 수행 할 수있는 react-device-detect라는 패키지를 살펴 보겠습니다. 😎 시작하기 react-device-detect 라이브러리로.. 2022. 1. 4. [React] import 중괄호 {}를 쓰는 이유 import a, { b } from '/config' react에서 변수를 사용하려고 할 때 중괄호 {} 안에 표기하는 변수, 그리고 그냥 표기하는 변수가 있다 이렇게 import할 때 중괄호 { } 사용 여부는 변수를 보내주는 방식에 따라 달라진다 /config.js const a = 0; const b = 1 export { a }; export const c = 2; export default b; config.js에서 변수를 불러오려고 한다 import f, {a, c as two} from '/config'; console.log(f, a, two)// 1, 0, 2 export default로 선언된 변수는 중괄호 {} 없이 받아올 수 있으며 변수명이 달라도 된다 export default .. 2021. 12. 29. [ React ] 리액트 리덕스(Redux) 사용& 적용 리덕스를 직접 사용해보자. 먼저 아래와 같이 CMD 에 입력해 프로젝트를 만든다. C:\> create-react-app react-redux C:\> cd react-redux 리덕스 모듈 redux 와 리덕스의 다양한 도구들이 들어있는 react-redux를 설치한다. C:\react-redux> yarn add redux react-redux react-redux 프로젝트를 열어보자. 디렉터리의 구조는 다음과 같이 만들었다. 소스를 흐름대로 살펴보도록 하겠다. 😎 src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import * as serviceWorker from.. 2021. 12. 28. [ React ] 리액트 리덕스(Redux) 정의 Redux 에 대해 알아보기 전에 이해에 도움이 되기 위해 예시를 들어 설명해보자면, 만약 A 컴포넌트가 B 컴포넌트에, B 컴포넌트는 C 컴포넌트에.. 이렇게 D, E, F, G 컴포넌트 까지 이어진 루트가 있다고 가정했을 때 A 컴포넌트가 G 컴포넌트에 접근해 무언가 하려고 한다면 A ▶ B ▶ C ▶ D ▶ E ▶ F ▶ G 순서로 접근 후, 다시 G ▶ F ▶ E ▶ D ▶ C ▶ B ▶ A 루트를 통해 돌아와야한다. 얼마나 비효율적인 패턴인지는 굳이 설명을 안해도 알 것이다. 이 때 하나의 스토어 ( Store ) 라는 매체를 두면 위의 순서가 아니라, A ▶ Store ▶ G 식의 효율적인 접근이 가능하게 해준다. 이 Store 는 Redux 를 통해 사용할 수 있다. Redux 에 대.. 2021. 12. 28. [React] 크롬 React 디버깅 툴 설치 방법 (React Developer Tools) React 사용시 개발자모드 Elements 탭에서는 브라우저가 이해하는 코드를 보여주기 때문에 우리가 React를 사용하여 스크립트로 작성한 컴포넌트 구조를 정확히 볼 수 없다. React Developer Tools를 사용하게 되면, 크롬 웹에서 개발자 모드로 컴포넌트(Components) 구조를 볼 수 있고 변경하면서 테스트에 용이하다. 😎 링크 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revi.. 2021. 12. 13. [VScode] 리액트 필수 플러그인 React 코드 템플릿 자동 완성 플러그인 @ Reactjs code snippets VS code 툴을 사용하고 React 언어를 사용한다면 필수인 플러그인 Reactjs code snippets 신규로 컴포넌트를 정의할 때마다 일일이 코드를 작성해야 하는 번거로움을 줄여준다, 😎 설치 방법 VS CODE 가장 왼쪽 사이드바에서 4번째 탭을 들어가면 플러그인등 다운받는 스토어 가있다. 그리고 Reactjs code snippets 검색 세부정보를 내려보면 보면 사용가능한 단축 트리거 들이 있다. 😎 사용법 Trigger Content rcc→ class component skeleton rrc→ class component skeleton with react-redux connect rrdc→ class component skeleton with react-redux connect an.. 2021. 11. 19. [React] 클립보드 텍스트 복사하기 😎서론 웹에서 공유하기 또는 url 복사하기 같은 기능을 편하게 유저에게 제공할 때 두루 쓰이는 기능인 유저가 버튼 클릭시 컴퓨터에 텍스트가 복사되는 (cmd + c) 기능 클립보드에 데이터를 복사하는 방법은 exeCommand (opens new window)를 사용하거나 clipboard api (opens new window)를 사용하는 방법이 있습니다. clipboard api의 경우 exeCommand보다 최근 나온 기술로 호환하는 브라우저가 적으므로 exeCommand로 복사하는 방법을 알아보겠습니다! 😎흐름 현재 브라우저가 copy 기능을 지원하는지 확인 지원한다면 textarea를 만들어서 내부에 원하는 text를 복사 복사한 텍스트를 document.body에 appendChild exe.. 2021. 11. 17. React Hooks : useEffect() 함수 useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을 처리할 수 있다. 즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다. 😎useEffect() 사용법 기본 형태 : useEffect( function, deps ) - function : 수행하고자 하는 작업 - deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 import React, { useEffect } from 'react'; useEf.. 2021. 11. 14. [React] date format / moment moment Moment js는 날짜 및 시간에 대한 데이터를 이용할 경우, 가장 많이 사용되는 리액트 라이브러리입니다. 라이브러리 다운로드 $ npm install moment --save // 또는 $ yarn add moment 선언 import moment from 'moment'; //선언하지 않아도, 디바이스 혹은 locale의 시간을 불러온다. import 'moment/locale/ko';//대한민국 Command // format에 맞게 출력된다. const nowTime = moment().format('YYYYMMDD HH:mm:ss'); console.log(nowTime); // 출력 결과: 20210818 09:41:32 실제 사용예제 var nowTime = moment().f.. 2021. 10. 28. 이전 1 2 3 4 5 6 다음 728x90 반응형
