Programming Language 검색 결과

해당 글 113건

window 객체

🧷 window.navigator navigator는 대체로 (전부는 아니지만) Web API를 사용하기 위한 것입니다. (https://developer.mozilla.org/ko/docs/Web/API/MediaDevices) 음성 녹화, 영상 녹화, 화면 공유, 위치 정보 받기 등이 가능합니다. 영상 녹화 : (https://darrengwon.tistory.com/516) 음성 인식 : (https://darrengwon.tistory.com/242) 위치 정보 : (https://darrengwon.tistory.com/219) navigator.geolocation 관련 메서드를 사용하면 된다. navigator.geolocation.getCurrentPosition(success[, erro..
Programming Language/🟨 Javascript 2020. 4. 7. 05:38

[mo.js ]mo.js - 모션그래픽 라이브러리

mojs/mojs The motion graphics toolbelt for the web. Contribute to mojs/mojs development by creating an account on GitHub. github.com mo.js mojs.github.io 간단한 애니메이션은 직접 구현할 수 있겠지만 대개 라이브러리를 이용하는 게 편하도 더 화려하다. 웹 페이지내 구현되는 모션 그래픽 라이브러리 중 가장 유명하다고 할 수 있는 mo.js를 살펴보자. 🧷 설치 npm으로 설치 가능하지만 npm 주간 다운로드 수를 보면 처참하다. 1000이 안 넘는다. 대부분 CDN을 사용하고 있는 듯하니 CDN을 활용하자. 주의할 점은 script를 body 태그의 상단부에 넣어야 한다는 점이다. npm..
Programming Language/🟨 Javascript 2020. 4. 7. 05:35

localStorage

Storage The Storage interface of the Web Storage API provides access to a particular domain's session or local storage. It allows, for example, the addition, modification, or deletion of stored data items. developer.mozilla.org localStorage 객체를 통해서 로컬 스토리지를 관리할 수 있습니다. 로컬 스토리지는 보통 쿠키의 대안으로 생각됩니다. HTML5가 나온 이후, cookies의 많은 사용 방법들은 LocalStorage의 사용으로 대체되었습니다. LocalStorage는 cookies보다 더 많은 장점이 있기 때문..
Programming Language/🟨 Javascript 2020. 4. 7. 01:57

Object, Array, String

(Object)freeze, rest, entries, fromEntries (Array) map, filter, reduce, findIndex (String) includes, padStart 이번에 React 챌린지에 도전하면서 사용한 Object와 그 메소드를 가져와 보았습니다. Object The Object class represents one of JavaScript's data types. It is used to store various keyed collections and more complex entities. Objects can be created using the Object() constructor or the object initializer / literal syntax...
Programming Language/🟨 Javascript 2020. 4. 7. 01:39

JS 객체 지향 프로그래밍 : 객체와 클래스

TS에서 class를 사용하는 방법은 아래 포스트를 참고합시다. (https://darrengwon.tistory.com/527?category=867626) - 간단한 배열과 객체의 반복문 주의할 점은, 반복문에서 member.name을 할 경우 undefined을 출력하므로 member[name]으로 입력해줘야 함 // 배열 const a = [1, 3, 57, 8]; let i = 0; while (i < a.length) { console.log(i); i++; } // 객체 const member = { manager: "deluze", client: "jijek" }; for (let name in member) { console.log(name, member[name]); } - this t..
Programming Language/🟨 Javascript 2020. 3. 17. 00:46

프로미스(Promise) 사용법

콜백 안에 콜백 안에 콜백...과 같은 콜백 지옥이 너무 깊어지면 관리가 어려워 진다. 각 콜백을 변수로 빼서 해결하기는 했지만 여전히 가독성이 안 좋기는 마찬가지였다. 이러한 문제를 해결하기 위해 프로미스가 등장했다. Promise는 대강 이런 꼴을 가진다. 클래스처럼 사용하는 방식이 정해져이씩 때문에 외워두자. Promise는 생성자 함수이기 때문에 앞에 new를 붙이고 대문자로 시작한다. resolve는 성공, reject는 실패를 의미한다. new Promise((resolve, reject) => {}); plus란 이름을 가진 프로미스를 만든 후 then과 catch로 사용해보았다. resolve의 경우 then, reject의 경우 catch가 실행된다. 중요한 점은 처음 .then에 ret..
Programming Language/🟨 Javascript 2020. 3. 6. 18:35

interface 기초와 활용 (Read-only properties, Indexable Types, extends)

interface 기본 (https://typescript-kr.github.io/pages/interfaces.html) (typescript-handbook-ko.org/pages/interfaces.html) interface는 object의 type을 체크해주는 ts의 고유한 문법이다. object 각 요소들의 타입을 따질 때 편리하다. interface는 TS 문법이기 때문에 컴파일 될 때 js로 컴파일이 되지 않는다. 컴파일된 js파일을 살펴보면 확인할 수 있다. 활용하는 방법은 아래와 같다. interface Human { name: string; age: number; boo(): void; } const person: Human = { name: "da", age: 5, boo: () =..
Programming Language/🟦 Typescript 2020. 3. 5. 17:40

tsc-watch 사용하기

https://www.npmjs.com/package/tsc-watch tsc-watch The TypeScript compiler with onSuccess command www.npmjs.com 단도직입적으로 tsc-watch를 왜 사용하느냐 => nodemon과 같이 자동 실행을 해주기 때문이다. npm install tsc-watch -D package.json에 tsc-watch가 설치된 것을 확인한 후 실습을 위해 dist, src 폴더를 생성한다. (굳이 이 이름일 필요는 없다) 모든 ts는 src에 넣고 dist를 .gitignore에 추가해주자. 기존에 컴파일된 js와 js.map은 삭제하자. package.json의 start 부분을 다음과 같이 수정해준다. --onSuccess의 의미..
Programming Language/🟦 Typescript 2020. 3. 5. 16:43

TS 기본 입문!

TS 핸드북, 타입 설명 : (https://typescript-kr.github.io/pages/basic-types.html#%EB%B0%B0%EC%97%B4-array) 한눈에 보는 TS : (https://heropy.blog/2020/01/27/typescript/) JS가 가지고 있는 타입인 Boolean, Number, String, Null, undefined, Symbol, array, object를 기본으로 가지고 있고 이에 더해서 any, void, never, enum, tuple을 가지고 있습니다. 주로 any, void, enum을 사용합니다. 배열과 튜플의 차이 튜플은 배열이되 각 순서와 길이가 정해진 것이라고 보시면 됩니다. [string, number] 꼴의 튜플이라면 길이..
Programming Language/🟦 Typescript 2020. 3. 5. 16:13

Typescript 사용 환경 설정, tsconfig의 속성들

Typescript는 js의 슈퍼셋이며 js로 transpile합니다. 동적 타입 언어인 js를 정적 타입 언어로 사용할 수 있게 됩니다. 물론 동적 언어로 발생할 수 있는 에러를 테스트 코드의 커버리지를 높이는 방식으로 커버할 수도 있겠지만 굳이... 우선, Typescript는 공식 문서가 상당히 체계적으로 잘 정리되어 있습니다. 때문에 공식 문서로 공부하는 것을 추천해드립니다. 심지어 handbook은 번역까지 되어 있으니 참고합시다. https://typescript-kr.github.io/ TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io yarn이든 npm이든 사용가능하나 가급적 npm 사용을 권장합니다. npm init npm ..
Programming Language/🟦 Typescript 2020. 3. 4. 23:04