묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 궁금한점이요!!
안녕하세요 저는 웹팩 소스는 복붙하고 패키지를 직접 하나씩 설치해보았는데 빌드나 실행시 에러가 나서 webpack-dev-server 가 4.0.0 인걸 지우고 @ 3.11.2로 다시설치하니까 되더라고요. 원래 이렇게 버전하나때문에 에러가 잘 발생하나요? 그리고 setting/ts 그대로 빌드해보면 저는 이건 에러는 아니고 경고지만 이런 세가지 경고 들이 뜨는데 원래 이런건가요?? 상관없는건가요?
-
미해결타입스크립트 입문 - 기초부터 실전까지
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 모르는게 많아 질문도 어떻게 드려야 할지 몰라 혹시 추가로 알아야 하는 사항이 있으면 말씀부탁드립니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
socket.io-client typescript 모듈 에러 관련
현재 시점으로 npm i @types/socket.io-client하면 3.0.0 버전으로 설치가되어 2버전과 맞지 않아 에러가 나옵니다. 저 같은 경우는 제로초님의 깃헙에 올라와있는 json을 보고 1.4.35 버전으로 명시하여 설치하여 문제를 해결하였습니다. 혹시 문제 있으신 분 확인해보세요. npm i -D @types/socket.io-client@1.4.35
-
미해결Slack 클론 코딩[실시간 채팅 with React]
dedupingInterval에 관련해서 질문드립니다!
제가 이 강의를 듣고 이해한게 맞는지 궁금해서 질문올립니다! dedupingInterval을 사용하지 않으면 swr이 재요청 하는 기준이 다른 텝을 갔다가 오는 경우 재요청을 보내게 되고 dedupingInterval 옵션을 추가하게 되면 그 시간안에는 탭을 갔다와도 재요청을 보내지 않고 캐시해서 그대로 데이터를 사용하다가 그 시간이 끝나면 다시 재요청을 보내는 것이 맞는지 궁금합니다!
-
미해결Slack 클론 코딩[실시간 채팅 with React]
Login에서 mutate 대신 revalidate를 써야 하네요.
저번에 mutate를 이용해서 서버에서 가져오는 데이터를 바로 data에 집어 넣는 식으로 했었는데, 그걸 유지했더니 리다이렉트 할때 에러가 나는 군요. .then((response) => { mutate(response.data) }) 리다이렉트를 할 때 워크스페이스 페이지가 열림과 동시에 user를 가져와야 에러가 안 생기는데, mutate를 쓰면 워크스페이스 페이지가 열릴 때 서버에 요청을 안보내네요... 그래서 실습 코드 뒤져보다가 revalidate를 쓴 걸 보고 revalidate를 쓰도록 코드를 수정했더니 workspace 들어가자마자 user 요청을 보내네요. 아직 알쏭달쏭 합니다. swr은 로컬 스토리지를 쓸때 디버깅을 하기가 어려운 것 같아요.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
typescript 타입 관련 질문
안녕하세요 선생님. 강좌를 모두 듣고 , 혼자서 복습할 겸 파일 하나하나 다시 한 번 보고 있습니다. 타입스크립트를 좀 더 공부해볼려고 강의시간에 미처 다 다루지 못하고 넘어간 타입들을 하나하나 지정해주고 있는데요, 마우스 Click 이벤트와 관련된 event의 타입을 정할 때 React.MouseEvent<...>로 지정해주고 나서, 예를 들어 id에 접근을 하려고 한다면 e.target.id 로 접근하면 제대로 타입스크립트 오류가 뜨고, 반면 e.currentTaget.id로 접근하면 정상적으로 접근할 수 있었습니다. 해당 문제를 구글링을 해보니, Event Delegation과 관련해서 e.target은 마우스에 무엇이 클릭되느냐에 따라 그때그때 담기는 대상이 다르기에 이를 EventTarget으로 처리하지 않아 e.target에서 그 밑에 있는 property를 제대로 탐색할 수 없다고 이해했습니다. (구글링을 많이 해보았으나 관련 내용이 충분하지 못해 정확한 정보인지는 모르겠습니다) 위 과정에서 두 가지 의문점이 생겼는데요! 1) 그렇다면 타입스크립트는 Event Delegation과 관련된 기법을 지양한다고 봐도 될까요? 2) 강의에서는 원활한 강의 진행 + 굳이 안 해도 정상 작동하는 이유로 event와 같은 몇몇 매개변수의 타입을 지정하지 않고 넘어가셨는데, 이 경우 대부분 any 타입으로 지정되는 것으로 알고 있습니다. 타입스크립트에서 any로 사용하는 것은 최대한 지양한다고 알고 있는데, 실무에서도 위와 유사한 이유로 타입 지정을 건너뛰는 경우가 빈번한가요?매번 감사드립니다 :)
-
미해결타입스크립트 입문 - 기초부터 실전까지
타입호환은 어디에 쓰는건가요?
내용은 이해가 되는데 구조적 타이핑은 실무에서 언제쓰는지 궁금하네요..
-
미해결Slack 클론 코딩[실시간 채팅 with React]
커스텀 훅 useInput에서 Dispatch<SetStateAction<T>>에 관한 설명을 어디서 찾아볼수 있을까요?
커스텀 훅 useInput에서 Dispatch<SetStateAction<T>>에 관한 설명을 어디서 찾아볼수 있을까요?
-
미해결타입스크립트 입문 - 기초부터 실전까지
username.innerText = user[0].name 부분에서 값이 안불러와 지는 경우 어케해야되나요?
username.innerText = user[0].name 부분에서 값이 화면에 안불러와 지는 경우 어케해야되나요? 콘솔창에서는 TypeError: Cannot read property 'name' of undefined at app.js:20 해당부분이 타입이 맞지않다고 나옵니다.
-
미해결Node.js에 TypeScript 적용하기(feat. NodeBird)
프론트단에 질문이 있습니다
백엔드 노드쪽 타입과 함께 프론트쪽도 타입스크립트로 하고 있는데 기존 react-nodebird의 _app.js 나 index파일이랑 ts-nodebird의 _app.tsx, index 파일들을 보면 코드구조가 다르거나 추가되는 것들이 있는데 코드가 다른 이유가 있는건가요? 프론트에 타입스크립트 적용하려면 ts-nodebird 기준으로 하면 될까요?
-
해결됨타입스크립트 입문 - 기초부터 실전까지
compile과 transcompile
수업 내용에서 보면 compile이라고 하셨는데, 또 어디서는 transcompile이라는 용어를 사용하더라구요 두가지의 차이점과 어떤게 맞는건지 알고싶습니다 판교님!
-
미해결실전 프로젝트로 배우는 타입스크립트
lib 질문
안녕하세요. 지금 target을 ES5로 잡다보니 Promise type를 이해할 수 없어서 lib에 ES2015를 넣는 것 같습니다. DOM 같은 경우 DOM에 관련된 type을 찾기 위해서 DOM을 따로 넣는 것 같은데 DOM.Iterable은 무엇인가요 ? NodeList와 같은 유사배열을 위한 type을 위한 것 인가요 ?
-
미해결타입스크립트 입문 - 기초부터 실전까지
Variable 'empty2' is used before being assigned.ts(2454)
empty2와 notempty2에서 이런 에러가 발생합니다. 아마도 값을 주지 않고 할당을 해줘서 나는 에러인것같아서 let empty2: Empty<string> | undefined let notempty2: NotEmpty<number> | undefined 이런식으로 처리해주었습니다. 강의에서는 뜨지 않는 에러인데 어떤 설정을 바꿔줘야 안뜰까요 ?
-
미해결타입스크립트 입문 - 기초부터 실전까지
다른 분들은 eslint 플러그인 잘 작동했는 지 모르겠네요.
수업을 따라 진행하는데, "Missing return type on function. "메세지가 나타나지 않더라구요. eslint 제대로 동작하지않는 구나 싶어서 구글링해보니vscode > eslint > extension 옵션 중 workingDirectories가 있는 걸 알았습니다.해당 옵션 값을 {"mode": "auto"}로 하니 eslint도 정상작동하네요.참고한 깃헙 이슈 : https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-512252381혹시 저와 같은 문제가 있으신 분은 참고해도 좋을거 같아요.
-
해결됨타입스크립트 입문 - 기초부터 실전까지
유니온, 인터섹션 질문입니다.
핸드북에는 유니온(Union) 타입이란 두 타입의 합집합을 의미한다고 (&) 써있고 교차(Intersection) 타입이란 아래와 같이 타입이 2가지 이상일 경우에 교집합(교차)인 경우의 속성만 보장해주는 특성을 의미합니다. 라고 써있는데.. 강의에서는 유니온이 | 이거고 인터섹션이 & 이거라고 하셔서.. 어떤게 맞는건가요? 갑자기 너무 헷갈리네요요 제가 이해를 잘못하고있는건가요..?
-
해결됨타입스크립트 입문 - 기초부터 실전까지
eslint 질문입니다
안녕하세요. 1. 저는 매개변수에 빨간물결은뜨는데 노란색이 안뜨는데 어떻게 해야하나요? format on Save는 껐습니다. 2. 그리고 다른질문이있는데 원래 format on Save를 끄기전에 vscode에서 프리티어가 코드를 정리해줬는데 js는 적용이 되고 ts파일은 적용이 안되더라구요. 왜 ts는 프리티어 적용이 안되나요?
-
해결됨타입스크립트 입문 - 기초부터 실전까지
강의 내용 확인(함수 타입 - 옵셔널 파라미터)
강사님~ 강의 잘 보고 있습니다 함수 타입 - 옵셔널 파라미터 강의 2:15쯔음부터 옵셔널 연산자 설명해주시는데... 물음표 얘기하시는 거죠? 코드에선 ?로 보여주시는데 음성으로는 느낌표(!)라고 녹음이 되었네요
-
미해결타입스크립트 입문 - 기초부터 실전까지
타입 확장 불가능에 대한 질문입니다.
type test1 = {name: string} type test2 = test1 & {age: number} const test3: test2 = { name: 'd', age: 33 } 찾아보니 제가 보기에는 위 코드가 interface 처럼 확장이 되는 것 같던데, 제가 쓴 코드는 확장의 개념이 맞는지 아닌지 질문드립니다.
-
해결됨타입스크립트 시작하기
3:48초 Person의 배열이 된다는 게 이해가 잘 안갑니다🤣
다른 타입으로 할당 가능한 타입은 제거가 된다는데 와닿지가 않아서요 person으로 할당하면 korean에 있는 liveInSeoul 프로퍼티를 참조 불가능하지 않나 싶은데..
-
해결됨웹 게임을 만들며 배우는 React에 TypeScript 적용하기
ref 관련 질문드립니다
안녕하세요 강의 수강 중 궁금한 점이 생겨 질문드립니다 1. function useRef<T>(initialValue : T | null) : RefObject<T>;2. function useRef<T>(initialValue : T ) : MutableRefObject<T>; 3. function useRef<T = undefined>() : MutableRefObject<T | undefined>;setTimeout, useRef 타이핑 강의 끝부분에서<T>를 <number | null> 을 줬습니다.그러면 2번 꼴이 만들어지는 거를 확인할 수 있었는데요,그럼, <number> 만 잇엇을때에도 똑같이 Mutable~ 로 인식할수잇다고 생각햇는데, 제가 어디를 놓친건지 알려주시면 감사하겟습니다