본문 바로가기
반응형

Archive188

TS 냐금냐금 - 2 잉여 속성 검사 (해깔릴 수 있는 부분) A 인터페이스에서는 a 프로퍼티밖에없어서 obj1에 할당하는 값에 b프로퍼티가 들어있으면 에러가발생한다. 그런데, 밑 사진처럼 obj라는 변수에 담아서 다시 할당하면 문제가 발생하지 않는다. 즉, 옵셔널로 프로퍼티가 들어가는 거라면 이런식으로 객체에 담아서 할당하면된다. void return 타입에 Null은 불가능, undefined는 가능 void 논란 함수를 정의하는 타입은 3가지가 조금씩 다르다 - function에서 return void 실제 리턴값이 없다는 의미(void) - 객체의 프로퍼티에서 ()=>void 리턴값을 사용하지 않겠다는 의미 (void이든 string, number.. 다상관없음, 있다해도 안쓴다는 의미여서 에러표시 x) - 매개변수의.. 2022. 7. 25.
TS 냐금냐금 - 1 as const 엄격하게 정확한 값으로 타입을 추론함 객체의 값을 그대로 타입으로 사용하고싶은데, number로 추론해버리는 경우 사용한다. 지금처럼 number가 아니라 각 숫자를 타입으로 사용하려면 객체뒤에 as const로 선언해주면 된다. readonly까지 붙여준다. keyof, typeof (객체의 키값들을 타입으로 추출하고 싶을 때) 자바스크립트 객체를 타입으로 사용하고 싶을때 사용한다. 만약에 위 사진과 같이 Direction의 키 값들을 타입으로 사용하고 싶다면, keyof 를 사용한다. 그러면 Direction의 key값들 UP, DOWN, LEFT, RIGHT 를 가져올수있는데 이때는 에러가난다. 자바스크립트 객체를 타입으로 상용할 수 없기때문이다. 이럴때 typeof 키워드를 함께사.. 2022. 7. 25.
CRA없이 React Typescript 환경세팅하기 [2] - webpack-dev-server 패키지 추가설치 yarn add -D webpack-dev-server @types/webpack-dev-server webpack-cli yarn add -D @types/webpack-dev-server yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh # ts 컴파일 blocking을 병렬로 전환하여 웹팩과 동시에 빌드되도록 성능개선 yarn add -D fork-ts-checker-webpack-plugin script 추가 "scripts": { "dev": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack serve --env development", ".. 2022. 7. 18.
CRA없이 React Typescript 환경세팅하기 [1] 1. React 패키지 및 Typescript 설치 npm init -y yarn add react react-dom @types/react @types/react-dom yarn add typescript { "name": "kong", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", "react": ".. 2022. 7. 18.
JS에서 2차원 배열 동적으로 만들 때 주의할 점 보통 초기화된 배열이 필요할 때 배열을 만들기도하고, 동적으로 배열을 만들어야 할 상황이 올때, 배열의 크기를 미리 지정해둔다. const arr = new Array(5) 이렇게하면 length 프로퍼티만 채워진 채 5개의 요소가 들어있지 않은 상태가 된다. 그래서 5개짜리 배열을 만들고싶다면 그내용을 채워주도록 해야하는데 그 방법에는 두가지가있다. const arr = new Array(5).fill(undefined); const arr = Array.from({length:5},()=> undefined); 두가지의 차이점이 있다는 것을 알고리즘 문제를 풀면서 알게됬다. Array.from() An iterable or array-like object to convert to an array. A.. 2022. 7. 17.
React Ionic 정리 이번에 공모전 앱 프로젝트를 함께 참가하게되면서 Ionic 프레임워크를 접하게되었다. HTML, CSS, JS를 IOS테마, Material Design 으로 각 네이티브 환경에 맞게 적용된다. React Native 와 비교하면 모바일 기기와 더불어 PWA, web, 자동차, 냉장고... 에서도 실행가능한 형태로 빌드가 가능하다. 정말 웹개발만하면되는데, 네이티브 API 를 사용하기 위해서 Capacitor 이나 Cordova 를 사용해서 SDK 권한을 얻어서 블루투스, 카메라, GPS 등의 기본기능도 사용가능하다. 직접 사용해보면서 PWA로 아이폰과 아이패드에서 다운받아봤는데 UX가 상당히 괜찮았다. 그냥 앱다운로드해서 사용하는 느낌이었다. 몇달전 웹브라우저가 모바일 푸시알림을 곧 지원한다는 소리에 .. 2022. 7. 15.
반응형

티스토리툴바