Front-end100 리액트 익스플로러(IE11) 연동하기 react-app-polyfill 리액트 익스플로러(IE11) 연동하기 해당글은 익스플로러 가 돌아가시전에 사용했습니다. 추억으로 사라져버린 익스플로러를 기억하며.. rip.. 리액트 프로젝트(CRA)는 JavaScript의 최신버전인 ES6이상의 문법을 사용합니다. 하지만, 역시 기대를 져버리지않는 IE는 ES6문법을 지원하지않기 때문에.. 우리는 익스플로러에서도 ES6이상의 문법을 해독할 수 있게끔 처리를 해줘야 정상적으로 화면이 출력이 됩니다. www.caniuse.com - ES6 Template Strings 리액트 프로젝트(CRA) 익스플로러-IE11 실행시 화면 해당 이슈를 Polyfill을 적용하여 해결할 수 있습니다. 1. react-app-polyfill 모듈 설치 - npm사용시 : npm install react-a.. 2022. 1. 4. React에서 사용자 브라우저를 쉽게 감지하는 방법 react-device-detect 리액트에서 지원하지않는 IE브라우저 IE 는 고작 10% 의 사람들이 사용한다고 한지만, 10%는 엄청난 수치입니다. 한 브라우저에서 잘 작동하는 몇 가지 기능이 있지만 다른 브라우저로 전환하면 예상대로 작동하지 않습니다. 최근에 React 프로젝트 중 하나에 추가 한 기능이 IE11과 호환되지 않는 것을 발견했습니다. IE11과 호환되는 기능을 추가하려면 많은 추가 작업이 필요했습니다. 대신 사용자가 IE11을 사용하는 경우 기능을 비활성화하기로 결정했습니다. 내 사용자가 사용중인 브라우저를 확인하는 간단한 방법을 찾고 싶었습니다. 이 기능을 비롯한 많은 기능을 수행 할 수있는 react-device-detect라는 패키지를 살펴 보겠습니다. 😎 시작하기 react-device-detect 라이브러리로.. 2022. 1. 4. 옵셔널 체이닝 '?.' 최근에 추가됨 스펙에 추가된 지 얼마 안 된 문법입니다. 구식 브라우저는 폴리필이 필요합니다. 옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다. 😎 옵셔널 체이닝이 필요한 이유 이제 막 자바스크립트를 배우기 시작했다면 옵셔널 체이닝이 등장하게 된 배경 상황을 직접 겪어보지 않았을 겁니다. 몇 가지 사례를 재현하면서 왜 옵셔널 체이닝이 등장했는지 알아봅시다. 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해봅시다. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있습니다. let user = {}; // 주소 정보가 없는 사용자 alert(user.a.. 2021. 12. 30. [javaScript] Optional chaining "?." 연산자 자바스크립트 / 리액트 코드등 앞단에서 의문의 연산자를 보았다. ex) edior?.canvas?.getObject() edior.canvas.getObject() - 이런 형식이 익숙하지만 코드 실행시 만약 canvas가 null 이라면 (null의 오브적트 임으로) 페이지가 오류가 나서 진행불가었다. 그래서 해결하는 방법이 ? 를 붙여 주는것 에러가 발생하지지 않고 undefined 를 리턴해주어 오류를 발생시키지 않는다. 😎 Optional chaining optional chaining 연산자 (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. ?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 null.. 2021. 12. 30. [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. [javaScript] URL정보 (window.location) 테스트 환경에서 localhost라고 host명을 고정해서 테스트하는 경우가 있습니다. 운영환경의 호스트명은 다르므로 운영환경에 맞게 호스트명을 자동으로 변경하고 싶은 경우가 있습니다. (물론 html파일이니까 리플레이스를 통해서 치환하면됩니다.) 여기서 사용할 수 있는 순수 자바스크립트는 다음과 같은 것이 있습니다. 예) http://192.168.0.94:85/hoops_web_viewer_sample.html?viewer=csr&instance=moto 예와 같이 URL이 있다고 할 때, 구글 크롬의 개발자 도구의 콘솔에 window.location을 조회해 보면 다음과 같은 내용을 확인할 수 있습니다. 참고로 window는 최상위 엘리먼트이므로 location으로 조회를 해도 같은 결과가 나옵니다.. 2021. 12. 27. [jQuery]이벤트의 연결 및 처리 .on() .off() .one() 😎 이벤트의 연결(event binding) 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler) 함수를 작성해야만 한다. 이렇게 작성된 이벤트 핸들러를 특정 요소에 연결하는 것을 이벤트 바인딩(event binding)이라고 한다. jQuery는 이벤트 바인딩을 위한 다양한 방법을 제공한다. 다음 예제는 id가 "btn"인 요소에 클릭(click) 이벤트 핸들러를 바인딩하는 다양한 방법이다. $("#btn").click(function(event) { // 실행하고자 하는 jQuery 코드 }); $("#btn").bind("click", function(event) { // 실행하고자 하는 jQuery 코드 }); $("#btn").on("click", funct.. 2021. 12. 23. 이전 1 ··· 5 6 7 8 9 10 11 12 다음 728x90 반응형
