묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결타입스크립트 입문 - 기초부터 실전까지
vue ie11 지원
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. vue, typescript 사용 중에 ie11에서 화면이 안나오고 있어서 문의드립니다. javascript1002 에러가 나타나고 있으며, 현상은 아래 url의 화면과 동일합니다.https://jacklyons.me/how-to-fix-vuejs-not-working-in-ie11/ 플러그인은 크게 ui프레임웍 quasar를 쓰고 있는 정도이며, package.json 아래와 같이 사용하고 있습니다. "dependencies": { "@quasar/extras": "^1.0.0", "@sentry/browser": "^5.15.5", "@sentry/integrations": "^5.15.5", "@shopify/draggable": "^1.0.0-beta.8", "animate.css": "^4.1.0", "axios": "^0.19.0", "core-js": "^3.1.2", "konva": "^4.0.16", "libphonenumber-js": "^1.7.38", "lodash": "^4.17.15", "moment": "^2.24.0", "moment-range": "^4.0.2", "quasar": "^1.11.3", "query-string": "^6.12.1", "register-service-worker": "^1.6.2", "v-calendar": "^1.0.0-beta.23", "validator": "^12.1.0", "vue": "^2.6.10", "vue-axios": "^2.1.5", "vue-bounce": "^1.1.0", "vue-class-component": "^7.0.2", "vue-infinite-loading": "^2.4.4", "vue-konva": "^2.0.11", "vue-loaders": "^3.0.2", "vue-multiselect": "^2.1.6", "vue-online-2": "^2.2.0", "vue-pinch-zoom": "^1.0.1", "vue-property-decorator": "^8.1.0", "vue-router": "^3.0.3", "vue-scroll-sync": "^1.0.5", "vue-uuid": "^1.1.1", "vuex": "^3.0.1", "vuex-class": "^0.3.2" }, "devDependencies": { "@babel/plugin-proposal-optional-chaining": "^7.7.5", "@bahmutov/add-typescript-to-cypress": "^2.1.2", "@cypress/webpack-preprocessor": "^5.4.1", "@types/chai": "^4.1.0", "@types/lodash": "^4.14.149", "@types/mocha": "^5.2.4", "@types/moment-range": "^4.0.0", "@types/uuid": "^3.4.6", "@types/validator": "^12.0.1", "@vue/cli-plugin-babel": "^4.0.3", "@vue/cli-plugin-e2e-cypress": "^4.0.3", "@vue/cli-plugin-eslint": "^4.0.3", "@vue/cli-plugin-pwa": "^4.1.1", "@vue/cli-plugin-typescript": "^4.0.3", "@vue/cli-plugin-unit-mocha": "^4.0.3", "@vue/cli-service": "^4.0.3", "@vue/eslint-config-prettier": "^5.0.0", "@vue/eslint-config-typescript": "^4.0.0", "@vue/test-utils": "^1.0.0-beta.29", "babel-eslint": "^10.0.1", "babel-plugin-transform-imports": "1.5.0", "chai": "^4.1.2", "console-panel": "^1.0.4", "cypress": "4.12.1", "cypress-intellij-reporter": "^0.0.4", "eslint": "^5.16.0", "eslint-plugin-prettier": "^3.1.0", "eslint-plugin-vue": "^5.0.0", "lint-staged": "^10.0.0-0", "mochawesome": "^6.1.1", "mochawesome-merge": "^4.1.0", "node-sass": "^4.9.0", "prettier": "^2.0.5", "sass-loader": "^7.1.0", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "ts-loader": "^7.0.5", "typescript": "^3.4.3", "vue-cli-plugin-quasar": "^2.0.0", "vue-template-compiler": "^2.6.10", "vuex-module-decorators": "^0.10.1", "webpack": "^4.43.0" }, "prettier": { "singleQuote": true, "arrowParens": "always", "trailingComma": "none", "jsxBracketSameLine": true, "htmlWhitespaceSensitivity": "css" }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions" ], "gitHooks": { "pre-commit": "lint-staged" }, "lint-staged": { "*.{ts,tsx,*.vue}": [ "vue-cli-service lint --fix", "git add" ], "*.{ts,tsx,*.vue,*.scss,*.css}": [ "prettier --write", "git add" ] } plugin 좀 더 자세한 내용은 아래와 같습니다. import Vue from 'vue'; import { Quasar } from 'quasar'; import './push'; import VueAxios from 'vue-axios'; import axios from './axios'; import VueKonva from 'vue-konva'; // @ts-ignore import VueLoaders from 'vue-loaders'; import 'vue-loaders/dist/vue-loaders.css'; import InfiniteLoading from 'vue-infinite-loading'; // @ts-ignore import VCalendar from 'v-calendar'; // @ts-ignore import Bounce from 'vue-bounce'; import * as Sentry from '@sentry/browser'; import { Vue as VueIntegration } from '@sentry/integrations'; import PinchZoom from 'vue-pinch-zoom'; import 'animate.css'; // vue-axios : rest 통신용 라이브러리 Vue.use(VueAxios, axios); // vue-konva : svg 좌석 그리는 용도 Vue.use(VueKonva); // vue-loaders : 로더 모양 (추후 필요 없으면 삭제) Vue.use(VueLoaders); // vue-infinite-loading : list 무한 스크롤 // @ts-ignore Vue.use(InfiniteLoading, { slots: { noMore: Quasar.lang.props.msg.noMore, noResults: '' } }); // Use v-calendar & v-date-picker components Vue.use(VCalendar, { isDark: true }); // vue-bounce, ios scroll bounce handler Vue.use(Bounce); Vue.component('pinch-zoom', PinchZoom); // sentry if (process.env.NODE_ENV !== 'development') { Sentry.init({ dsn: 'https://b22383345c094318a3ca4cc89cdac858@o389025.ingest.sentry.io/5226673', integrations: [ new VueIntegration({ Vue, attachProps: true }), new Sentry.Integrations.GlobalHandlers({ onerror: false, onunhandledrejection: false }) ] }); } 이 상태에서 아래 url 에서의 상황을 실행해봐도 잘안되고 있습니다.https://program-error-review.tistory.com/32 모르는게 많아 질문도 어떻게 드려야 할지 몰라 혹시 추가로 알아야 하는 사항이 있으면 말씀부탁드립니다.
-
미해결실전 리액트 프로그래밍
react IE polyfill 관련해서 질문드립니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 d있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 강의들으면서 관련 프로젝트를 진행중입니다. IE 9 / IE 10 환경에서도 react가 흰화면이 아닌 정상적으로 나오도록 react-app-polyfill 모듈을 사용하여 polyfill 적용을 해보고있는데, IE11은까지는 확인을 했는데, IE 9 / IE 10 환경에서도 정상적으로 작동하도록 하려면 어떻게해야하는지 궁금합니다. IE 11 에 나오도록 작업한 방법은 index.js 파일에 import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; 를 추가 하였고, package.json 의 브라우저 리스트에 "e 11" 을 추가하면서 확인을 하였는데, IE 9 환경에서도 나오도록 확인하기위해 import 'react-app-polyfill/ie9'; import 'react-app-polyfill/stable'; 이렇게 index.js 파일에 추가하고 package.json 의 브라우저 리스트에 "e 9" 을 추가하면서 확인을 하였는데, 구문 에러가떠서 어떻게 해야할지 모르겠습니다. 모듈 캐시폴더도 지워보고 해봤는데, 어떤방법이 더있을까요? 구문 에러는 SCRIPT : 1002 구문에러가 뜹니다. (IE 9 / IE 10 환경에서)