본문 바로가기

분류 전체보기

 (65)
Generic(제네릭) "타입을 미리 지정 안하고 , 사용 시 지정하는 꼼수" 1.개념설명 & 예제3.extends(제약)  1. 개념설명function firstElements(elements: number[] | string[]) { return elements[0];}대충 이런 함수가 있다고 하자.이 함수는 배열의 첫번쨰 놈만 뽑아 보여주는 함수다. 근데 이 함수에 1번 놈이 넘버,스트링 등등 자료형이 계속 바뀔 수가 있다.그럴 때 쓰는 놈이다. 방법은 생각보다 쓰기 쉽더라.1.= 넣어준다. (T가 관례임.)2.호출시 함수()그럼 이 가 "사용시 지정하는 타입 매개변수"가  되는 것이다. //1. 등호 오른쪽에 바로 써준다.const firstElements2 = (elements: T[]) => {return el..
interface , Type alias(타입별칭) interface 객체 타입명시 템플릿주로 객체의 구조를 정의하는 데 사용된다."변수에 마우스를 올리면 툴팁으로 어떤 타입인가를 안보여준다던데"==> 커맨드 누르고 마우스 갖다대니 보이네..class를 예로 들어보겠다.// 인터페이스 정의interface Person { name: string; age: number; greet(): void;}// 인터페이스를 사용하는 객체const person: Person = { name: 'Alice', age: 30, greet() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); }};// 인터페이스를 사용하는 클래스..
as const 사전적 의미를 아무리 해봤자 어려워서 이렇게 외우기로 했다."const처럼"자. const와 let의 차이점이 뭐였더라?그렇다. "값이 안변한다"let hi = "hi";//타입을 string으로 추론let hi2 = "hi" as const;//타입을 "hi"밖에 못쓰게 된다. as const를 쓰게 되면 ,string으로 타입으로 추론 => "hi"로 타입추론이 된다.즉, 글자면 다 됩니다! => "hi"만 됩니다!    예시를 넣어 놓겠다.const person = { name: 'Alice', age: 30} as const;// 타입: { readonly name: 'Alice'; readonly age: 30; }person.name = 'Bob'; // 오류: 읽기 전용 속성 'n..
타입스크립트 중급(옵셔널 프로퍼티,인터페이스,타입) 옵셔널 프로퍼티(optional property) :객체 안에서 name? 이렇게 쓰는 것이다.요소를 필수요소가 아닌 옵션인 요소로 만들 수 있다. 병합(Interface merging)interface User { name: string; age: number; gender: string; height: number;}const obj6: User = { name: "김과장", age: 50, gender: "몰루", height: 12,};똑같은 인터페이스 이름이 정의가 되면 , 인터페이스는 합쳐지게 된다.interface User , interface User 이렇게 두개가 있으면 두개 조건들이 합쳐지는 거임. 확장(extneds)기존에 선언한 interface를 확장시킬 수 있다.//extends..
class , 생성자 함수 , 프로토타입 메서드 사실 class는 두개 담은 바구니다.생성자 함수 = 변수만드는 함수(constructor) +프로토타입 메서드 = 만든 변수 가지고 할 함수(protoype method)  생성자함수 : 자바스크립트에서 객체를 만들고 초기화하는 특별한 함수다.생성자함수는 일종의 템플릿으로 , 여러개의 유사한 객체를 쉽게 만들 수 있게 해준다.즉 , "변수집합을 만드는 함수"인 것이다. 생성자 함수 사용법 1 1.대문자로 시작하는 이름 (파스칼케이스)생성자 함수의 이름은 보통 대문자로 시작한다. 2.this 키워드 사용생성자 함수 안에서 'this'라는 키워드는 개로 생성된 객체를 가르킨다. 3.new 키워드와 함께 사용생성자 함수는 'new'키워드와 함께 호출되어야 한다.'new' 키워드를 사용하면 새로운 객체가 생성..
타입추론(Type inference) , 타입 명시(Type Annotation) 타입추론 = "타입스크립트가 알아서 해줌"타입명시 = "내가 타입지정함" 타입추론 (Type inference): 타입스크립트가 해당 변수의 타입을 추론하는 방법변수를 선언할 때 타입을 명시하지 않아도 타입스크립트가 할당된 값을 통해 타입을 추론 let num : number = 10; 이렇게 타입을 써줘야하는데, 타입스크립트가 알아서 "아 이건 넘버구나"하고서 추론해주는 거임.그냥 자동으로 파악해주는 게 타입추론임.const num = 10 ; //"10만 올 수 있다."let num = 10; // numberlet으로 선언하면 넘버가 되고,const로 사용하면 "10"이라는 넘버 하나만 된다.다른 것도 마찬가지다.무엇을 변수로 선언했냐에 따라서 타입을 자동으로 추론해준다.일반 변수는 타입추론이 되는..
Closer 클로저 : 실행 컨텍스트가 정상적으로 제거(종료)되지 못하는 현상 function outerFunc() { let count = 0; return function innerFunc() { count++; console.log(count); };}const counter = outerFunc();counter();counter();counter();counter();결과 :1,2,3,4  실행할 때마다 1씩 증가한다.원래 자신의 차례가 끝나면 , 콜스택에서 본인은 제거되어야 한다.근데 innerFunc 시점으로 보면, "outerFunc이 자신의 값을 참조하네?"내 값 참조 안하면 버그가 되는데? => 그럼 나 못사라지는데? => 값이 메모리에 남아야겠다.이 현상이 "closer"가 된다...
깊은 복사,얕은 복사 이 개념은 객체를 복사할 때 사용되는 개념이다. 얕은복사(Shallow Copy)객체의 최상위 레벨만 복사하고, 중첩된 객체는 복사하지 않고 참조를 공유합니다.즉,복사된 객체 내부의 중첩된 객체들은 원본 객체와 동일한 참조를 가진다. 깊은 복사(Deep Copy)객체와 그 객체에 포함된 모든 중첩된 객체들까지 재귀적으로 복사한다.즉, 복사된 객체는 원본과 다른 메모리 주소를 갖게 된다. 원본이 변할 때얕은 복사 : 값이 원본과 같이 변함깊은 복사 : 원본과 다른 주소값을 갖고 있기에 변하지 않음. let a = [1, 2, 3];//이렇게 변수를 냅다 갖다놔버리면 값을 공유함. (얕은 복사)let b = a;let c = [...a];//이렇게 스프레드 연산자로 배열을 없앴다가 다시 놓아주면,//메모리주..

티스토리툴바