본문 바로가기

Javascript

(37)
[타입스크립트] generic에 대하여 generic타입 : 함수에서 타입을 지정해줄 때, 타입파라미터를 통해서 자유롭게 함수내에서 사용하는 타입을 정해줄 수 있는 방법이 있다. 이것을 generic타입이라고 부른다. 이 타입을 활용하면, 한 가지 타입에만 제한되지 않고 다양한 타입을 함수마다 적용해서 사용할 수 있다. 때문에 확장성도 넓다. 바로 예시부터 확인해보자. function 함수(x: MyType[]) :MyType { return x[0]; } let a = 함수([4,2]) let b = 함수(['kim', 'park']) 위의 코드를 보면, 함수()과 같은 방식으로 generic 타입을 선언할 수 있다. 이렇게 선언하고 난 타입은 함수를 호출 할 때, 타입을 파라미터에 넣어주면된다. 변수 a의 경우에는 generic의 타입을 ..
[타입스크립트] protected, static 키워드 사용하기 extends 문법 복습해보기 : class의 내용을 복사하고 싶을때, 어떤 코드를 사용하면 되는가? extends 키워드를 사용하면 된다. class User{ x = 10; } class NewUser extends User{ } let 사람 = new NewUser(); console.log(사람); 위와 같이 코드를 작성하면 User로 부터 복사되어서 생성된 사람이라는 instance에서도 x속성이 들어가 있는 것을 확인할 수 있다. 개발자들은 이런식으로 코드의 양을 줄일 수 있 수 있었다. protected 란? : 그런데 만약 여기서 private키워드를 사용하면 어떻게 될까? private는 해당 중괄호{}안에서만 이용이 가능하다. 그렇기 때문에 복사된 클래스 안에서는 private으로 지정..
[타입스크립트] public, private 키워드를 사용하는 방법 타입스크립트의 장점은 무엇일까? 타입을 지정할 수 있다는 장점이외에도, 자바스크립트에서 쓸 수 없는 문법을 쓸 수 있는 장점이 있다. 어떤 문법을 말하는 것일까? 자바스크립트에는 존재하지 않는 public, private, protected, static 등등의 키워드들을 사용할 수 있다. class를 만들어서 개발을 하는 경우가 많다면, 이런 네개의 키워드를 활용해서 더욱 객체지향적인 코드를 짤 수 있다. public키워드 사용법 : 먼저 public에 대해서 알아보자. class User { public name : string constructor(){ this.name = 'kim' } } 이렇게 필드의 값에 public 키워드를 붙일 수가 있다. 이것을 붙이면 어떤 효과가 있느냐? 이 name ..
[타입스크립트] rest parameter의 타입을 지정하기 rest parameter란 무엇일까 : fucntion 함수() { } 함수(1,5,3,5,6,6) 이렇게 함수가 있는데, 함수의 파라미터에 몇개의 인자가 들어올지 모르는 상황이다. 이럴 때 사용하는 것이 rest parameter이다. 문법은 spread operator를 사용한다. fucntion 함수(...a) { } 함수(1,5,3,5,6,6) 만약 다른 파라미터도 함께 사용하고 싶다면, 다른 파라미터의 맨 뒤에서 사용해야 한다. fucntion 함수(x,y, ...a) { //이렇게! } 함수(1,5,3,5,6,6) 그리고 이렇게 rest parameter를 통해서 들어온 값들을 콘솔에 출력해보면 전부다 배열에 담겨서 나오는 것을 알 수 있다. function 함수(...a){ console...
[타입스크립트] 클래스의 타입을 지정하기 클래스의 필드값 : 클래스에 타입을 지정하는 것을 설명하기에 앞서서 클래스의 필드값에 대해서 설명해보겠다. class Person{ data = 0 } 이렇게 Person이라는 클래스에 constructor가 없이 변수를 선언해두면, 이런 값을두고 우리는 클래스의 필드값이라고 부른다. 이런 필드값들은 생성된 모든 자식들에게서 사용이 가능하다. let 사람1 = new Person() console.log(사람1.data) // 0 이렇게 출력해보면 0이라는 값이 나오게 될 것이다. 클래스의 타입지정하기 : 이제 본격적으로 클래스의 타입 지정에 대해서 알아보자. 기본적으로 클래스를 생성할 때, 인스턴스의 속성을 정의하기 위해서 constructor를 사용해야한다. class Person { construc..
[자바스크립트] 프로토타입이란 무엇일까? 지난 글에서, 오브젝트 복사기계를 만드는 것이 class라고 말했다.(지난글을 읽지 않았다면 읽는것을 추천!) 그리고 그 안에 오브젝트의 여러가지 속성들을 미리 정의해둘 수 있다는 것을 배웠다. 프로토타입으로 데이터 물려주기 : 그런데, 프로토타입을 사용해도 자식 오브젝트에게 데이터를 물려줄 수 있다는 사실을 아는가? 프로토타입은 기본적으로 '유전자'라는 개념을 가지고 있다. 우리의 생김새는 어떻게 결정되는가? 부모님이 우리에게 물려주신 유전자에 의해서 결정된다. 부모님의 유전자가 무엇이냐에 따라서 우리의 생김새가 달라진다. prototype도 마찬가지로 유전자라고 생각할 수 있다. 이 유전자의 값에 따라서 거기서 파생되는 자식들이 소유한 속성값이 달라진다. 지난번 헬스장등록기계로 다시 예를 들어 설명해..
[자바스크립트] class 문법 이해하기 class에 대해서 알아보겠다. 무언가를 배울 때는 이것이 어떤 상황에서 사용될 지 가정하면서 만들면 이해하는데에 한 층 더 도움이 된다. 헬스장에서 사람들을 관리하는 상황이라고 가정을 해보자. 사람들에 대한 정보를 관리해야 한다. 그리고 우리는 js 자료형에다가 먼저 정보들을 담아두어야 겠다고 생각하고 있다. 헬스장에 철수와 병철이가 왔다. var 철수 = { 키: 175, 몸무게: 70, } var 병철 = { 키 : 180, 몸무게: 85, } 이런식으로 저장을 했다고 하자. 그런데, 영희와 수진이가 또 헬스장에 등록을 하러 왔다. var 영희 = { 키 : 165, 몸무게 : 50, } ... 계속 이런식으로 일일이 사람들의 정보를 쭉 정리해나가면, 반복된 노동이 너무 많아진다. 이런 상황에서 유..
[자바스크립트] 제너레이터 함수 제너레이터 함수의 기본개념 : 제너레이터는 함수의 실행을 중간에 멈췄다가 중간에 재개할 수 있는 독특한 기능이다. 함수 옆에 *를 붙여서 사용을 한다. 함수 내부에 yield키워드를 붙이면 그곳에서 함수를 멈출 수 있다. 아래의 코드를 보자. 중간중간에 yield가 있다. function* fn() { console.log(1) yield 1; console.log(2) yield 2; console.log(3) console.log(4) yield 3; return "finish"; } const a = fn(); 제너레이터 함수의 메서드 next() : 제너레이터에는 총 3가지 메서드가 있다. next, return, throw.이 중 next메서드를 먼저 알아보자. 위의 코드를 실행하면, 맨 처음에..