본문 바로가기

분류 전체보기542

인터넷 익스플로러 실행시 엣지로 실행되는 문제 해결 방법 대부분 크롬을 많이 사용하지만 익스플로러 사용이 필요할경우가 있습니다. 익스 플로러 실행시, 자동으로 엣지가 실행되어 불편함을 느끼는 경우가 있죠 포기하지말고 10초만에 해결 엣지 화면 실행후 오른쪽 상단 ... 메뉴 클릭 -> 설정 설정메뉴에서 [기본 브라우저]선택후 "Internet Explorer를 사용하여 Microsoft Edge에서 사이트를 열어보세요" 항목 부분이 "항상"으로 설정되어 있으실텐데, "안함"으로 선택후 창을 닫고 익스플로러를 열어보시면 정상적으로 익스플로러에서 인터넷 창이 열리는걸 확인 가능합니다. 더보기 참고 : https://nameesse.tistory.com/426 2022. 1. 6.
[부여 맛집] 부여 1등 맛집 - 엄가네 곰탕 부여 맛집 갈비찜 맛집 / 곰탕 맛집 엄가네 곰탕 http://naver.me/FRYnJFHc 네이버 지도 엄가네곰탕 map.naver.com 얼마전 티비를 보다 알게된 식당 부여를 간다면.. 꼭 방문하리라 다짐했던 곳이다. 사장님 = 쉐프 신데 한식대첩도 출연하시고 방송 여기저기 많이 출연하셨다고 한다. 요리로 유명하신 분 이다. 가게 이름은 "곰탕" 이다. 모든 요리에 신경쓰지만 특히 곰탕에 시간 투자를 많이한다고 들었다. 전국에서 배달주문을 받는다고 한다! 곰탕도 너무 궁금했지만 갈비찜비주얼이 엄청났음으로 우리는 2명 이었고! 용궁갈비찜은 양이 어마무시하다 4인기준 그리고 갈비찜을 먹기위해선 최소 4시간 전 전화예약은 필수 그냥 뚝딱 만드는 게 아니라 갈비를 삶고 등등 준비가 많이 필요하다고 한다 .. 2022. 1. 5.
browserslist / browserslistrc 사용법 react등 프론트 개발시 허용하는 브라우져 구조 설정이 필요한 경우가 있습니다. 가벼운 프로젝트의 경우 설정을 package.json에 하는 경우가 대부분이지만, 브라이져 설정이 나눠져 따로 관리를 하는 경우가 많습니다. 언젠가부터 브라우저스리스트(browserslist)라는 것이 자주 눈에 띄더니 지금은 FE 개발 환경에서 뺄 수 없는 도구가 되었어요. 아마도 바벨(Babel)이라는 FE 계의 걸출한 스타 프로젝트에서 도입했기 때문일 거라고 생각합니다. 😎 Browserslist가 뭘까 소개는 짧게 할게요. 브라우저스리스트는 브라우저를 선택하는 옵션 기능만 따로 뽑아 놓은 도구라고 생각하시면 돼요. 어떤 프로그램이 브라우저에 대응해 내부에서 처리해야 할 작업이 다르다면 옵션으로 지원 브라우저 환경을 .. 2022. 1. 5.
리액트 익스플로러(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.
728x90
반응형

티스토리툴바