JavaScript 검색 결과

해당 글 77건

Generics

제네릭은 자바나 C에서 재사용이 가능한 함수에 다양한 타입의 파라미터를 받을 수 있게끔 하는 특징이다 제네릭 함수 제네릭 함수의 Hello World라는 identity함수를 만들어보자 function identity (arg: number) :number{ return arg; } identity 함수는 받은 파라미터를 그대로 반환하는 아주 간단한 함수이다 하지만 타입스크립트 처럼 들어오는 파라미터의 타입과 반환 타입이 미리 명시되어있다면 어떻게 해야 유동적으로 타입을 받을 수 있을까? function identity (arg: any) : any{ return arg; } any를 사용하면 간단할 것 같다 어떤 타입이 들어오든 들어온 타입으로 반환할 수 있다 하지만 문제가 있는데 제네릭을 사용하는 i..
JavaScript/TypeScript 2021. 3. 12. 12:08

Function

자바스크립트와 같이 기명 함수와 익명 함수 그대로 사용할 수 있다 함수 타입 함수에 타입 붙이기 // 기명 함수 function add(x: number, y: number): number { return x + y; } // 익명 함수 let myAdd = function(x: number, y: number): number { return x + y }; 파라미터의 타입을 보고 리턴값의 타입을 파악할 수 있으므로 생략이 가능 함수 타입 작성하기 위는 그저 함수에 타입을 붙인 것이고 함수 전체의 타입을 설정하는 법도 존재한다 let myAdd: (value: number, increase: number) => number /* 여기까지 함수 타입 */ = function(x: number, y: num..
JavaScript/TypeScript 2021. 3. 11. 17:42

Vanilla JS로 MVC 패턴 구현하기 1

inflean에 있는 김정환님의 강의 실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발 에서 파트1 격인 MVC패턴를 바닐라 자바스크립트로 구현하는 강의를 보고 공부한 내용을 기록했다 이 강의에서 구현하는 것은 쇼핑몰 검색 페이지이다 폴더 구조 MVC 패턴을 적용시키니 당연히 Model, View, Controller 3가지로 나누어서 개발을 진행한다 모듈 패턴도 적용시키기 때문에 기능별로 적절하게 js를 쪼개어서 개발을 진행하고 index.html에는 app.js 하나만 등록해서 구현할 예정 View index.html에서 html마크업은 DOM 뼈대만 작성하고 자세한 구현은 View 즉, js로 구현하게된다 views 폴더안에는 View.js라는 파일이 하나 존재한다 // in ..
JavaScript 2021. 3. 4. 15:02

클래스

프로퍼티 타입스크립트는 자바스크립트와 다르게 클래스 내에서 선언한 프로퍼티들만 사용할 수 있다 class Animal { constructor(name, age) { this.name = name; this.age = age; } } 이런 코드는 자바스크립트에선 아무런 문제 없이 돌아가지만 타입스크립트에서는 에러를 발생시킨다 class Animal { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } } 이렇게 클래스 내에서 선언해주어야 그 이후에 사용이 가능하다 상속 이미 존재하는 클래스를 이용해 상속 받아서 새로운 클래스를 만들 수 있다 class Vehicle { ..
JavaScript/TypeScript 2021. 3. 3. 13:23

인터페이스

인터페이스 이해 function printLabel (labelObj: {label:string}){ console.log(labelObj.label); } printLabel의 타입 검사를 보면 객체를 파라미터로 받은 뒤 객체 내부에 존재하는 label값이 string인지 검사하고 있다 function printLabel (labelObj: {label:string}){ console.log(labelObj.label); } let myObj = {label: "string in labelObj"}; printLabel(myObj); // "string in labelObj" myObj안에 string타입의 label 프로퍼티가 들어가 있기 때문에 정상적으로 출력되는 것을 볼 수 있다 만약 객체의 내부..
JavaScript/TypeScript 2021. 3. 2. 10:43

기본 타입

왜 타입스크립트를 사용해야할까? 자바스크립트는 동적 언어이다 ⇒ 컴파일 시점에 에러를 잡지 않고 런타임 환경에서 에러가 쉽게 발생할 수 있는 단점을 가진다 객체 지향 프로그래밍이 가능하다 ⇒ 인터페이스, 제네릭타입 등 으로 강력한 객체 지향 프로그래밍이 가능하다 자바스크립트의 기능들을 그대로 제공한다 기본 타입 기존 타입 원래 자바스크립트에서 자주 사용되는 원시 타입의 변수와 객체 // boolean let bool : boolean = false; // Number let num : number = 1; // String let str : string = 'string'; let template : string = `this is ${str}`; // Array let arr : number[] = [..
JavaScript/TypeScript 2021. 3. 1. 12:55

async/await

async/await는 promise를 좀 더 쉽고 편하게 사용할 수 있게 만들어주는 ES8 문법이다 우선 함수를 하나 구현해 보자 function increase(number){ const promise = new Promise((resolve, reject) => { setTimeout(()=>{ const result = number +10; if(result>50){ const e = new Error('TooBig'); return reject(e); } resolve(result); },1000); }); return promise; }1초 뒤 10을 더해서 반환하고 10을 더한 수가 50보다 크면 에러를 반환한다는 promise 이전에 한 번 다루었으니 간단하게 설명하면 pro..
JavaScript 2021. 2. 7. 01:51

Tagged templates

Tagged templates Tagged templates이란 template literals에서 발전된 형태인데 태그 함수 라는 것을 사용해서 템플릿 리터럴을 파싱하는 것이 가능하다 태그 함수의 첫번째 인자는 문자열 값의 배열을 받고 나머지 인수는 표현식을 차례대로 받아온다 function myTag(strings, first, second){ console.log(strings); // ["일", "이", "삼", raw: Array(3)] console.log(first); // 1 console.log(second); // 2 } myTag`일${1}이${2}삼`;위에서 말한대로 첫번째 파라미터인 strings는 파싱된 문자열을 배열로 받고 나머지 파라미터는 차례대로 표현식인 (first : 1..
JavaScript 2021. 1. 23. 12:25

다차원 배열 생성시 주의점

2차원 배열 여느때 처럼 알고리즘 문제를 풀던 도중 2차원 배열을 만들어서 푸는 과정에서 이상한 점을 발견했다 간단히 나타내면 다음과 같다 const arr = Array(3).fill(Array(3).fill(0)); arr[1][1] = 1; console.log(arr); 이와 같이 3*3의 배열을 만들고 가운데 부분에 1을 넣고 배열을 출력해보았다 나의 기댓값은 0 0 0 0 1 0 0 0 0 큰걸 바란게 아니었는데.. 자바스크립트는 나를 저버리고 0 1 0 0 1 0 0 1 0 을 출력한다.. 대체 왜 일까? 이해할 수 없는 나는 구글의 힘을 빌려 해답을 찾고 싶었지만 검색할 키워드가 마땅치 않았다 자바스크립트, 다차원, 배열, 대입, 값, 선언.. 등등 많은 검색을 했지만 답이 나올 것 같지 ..
JavaScript 2021. 1. 21. 14:36

자바스크립트의 유니코드

유니코드 유니코드는 문자나 기호, 숫자에 대응되는 코드로 이루어진 데이터베이스라고 생각할 수 있다 유니코드로 U+0041 는 A를 U+00A9 는 ©를 U+2603 는 ☃를 U+1F4A9 는 💩를 각각 가르킨다 이 유니코드들은 앞에 U+라는 것을 붙여서 유니코드 기호라는 것을 나타내고 뒤에 16진수 최소 4자리를 붙여서 표현한다 최소 4자리가 의미하는 바는 위의 4가지 코드들을 보고 눈치챘을지 모르겠지만 앞의 3개는 4자리로 뒤의 똥은 5자리로 표현되고 있는데 자주 쓰이는 4자리로 이루어진 코드들은 다국어 기본 평면(Basic Multilingual Plane) 또는 BMP이라고 불리고 그 범위 밖에 있는 것들은 아스트랄 평면들(astral planes)이라고 불린다 자바스크립트의 유니코드 자바스크립트에..
JavaScript 2021. 1. 13. 16:09