📌 문제 https://school.programmers.co.kr/learn/courses/30/lessons/17677 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 여러 언론사에서 쏟아지는 뉴스, 특히 속보성 뉴스를 보면 비슷비슷한 제목의 기사가 많아 정작 필요한 기사를 찾기가 어렵다. Daum 뉴스의 개발 업무를 맡게 된 신입사원 튜브는 사용자들이 편리하게 다양한 뉴스를 찾아볼 수 있도록 문제점을 개선하는 업무를 맡게 되었다. 개발의 방향을 잡기 위해 튜브는 우선 최근 화제가 되고 있는 "카카오 신입 개발자 공채" 관련 기사를 검색해보았다. 카카오..
📌 문제 https://school.programmers.co.kr/learn/courses/30/lessons/64065 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 셀수있는 수량의 순서있는 열거 또는 어떤 순서를 따르는 요소들의 모음을 튜플(tuple)이라고 합니다. n개의 요소를 가진 튜플을 n-튜플(n-tuple)이라고 하며, 다음과 같이 표현할 수 있습니다. (a1, a2, a3, ..., an) 튜플은 다음과 같은 성질을 가지고 있습니다. 중복된 원소가 있을 수 있습니다. ex : (2, 3, 1, 2) 원소에 정해진 순서가 있으며, 원소의 ..
[그림으로 쉽게 이해하는 웹/HTTP/네트워크를 읽고 정리합니다.] 라우터 라우터란? LAN: 가정집이나 회사같은 소규모 네트워크 WAL: LAN이 모인 네트워크 이전에는 LAN 안에서 통신하는 것만으로도 충분했지만, 인터넷이 발달하고 네트워크의 규모가 커지면서 흩어진 LAN을 연결하고 다른 LAN으로 데이터가 올바르게 전달될 수 있도록 돕는 '중간 장치'가 필요했다. => 라우터(router) 라우터는 데이터가 원하는 목적지로 원활하게 도착할 수 있도록 적절한 통신 경로를 안내하는 장치 공유기가 라우터의 역할을 함 (외부에서 들어오는 케이블을 연결할 수 있는 WAN 연결부에 인터넷 케이블 연결 > 라우터 기능) 가정용 라우터 외에도 인터넷 제공 업체에서 관리하는 라우터, 기업용 라우터 등 다양한 종류의..
타입 조작 기본 타입이나 별칭, 인터페이스로 만든 원래 존재하던 타입들을 상황에 따라 유동적으로 다른 타입으로 변환시키는 기능 제네릭을 비롯해 4가지 타입 조작 기능(인덱스드 엑세스 타입, keyof 연산자, Mapped 타입, 템플릿 리터럴 타입)에 대해 알아보자. 인덱스드 엑세스 타입 객체, 배열, 튜플 타입으로부터 특정 프로퍼티나 특정 요소의 타입만 추출한다. type Post = { title: string; content: string; author: { id: number; name: string; age: number; }; }; const post: Post = { title: '제목', content: '본문', author: { id: 1, name: 'summermong', age: ..
프로미스와 제네릭 Promise는 제네릭 클래스로 구현되어 있다. 따라서 새로운 Promise를 생성할 때 타입 변수에 할당할 타입을 직접 설정하면 해당 타입이 resolve 결과값의 타입이 된다. const promise = new Promise((resolve, reject) => { setTimeout(() => { // 결과값 : 20 resolve(20); }, 3000); }); promise.then((response) => { // response는 number 타입 console.log(response); }); promise.catch((error) => { if (typeof error === "string") { console.log(error); } }); reject 함수에 인수..
제네릭 클래스 class NumberList { constructor(private list: number[]) {} push(data: number) { this.list.push(data); } pop() { return this.list.pop(); } print() { console.log(this.list); } } const numberList = new NumberList([1, 2, 3]); numberList.pop(); numberList.push(4); numberList.print(); NumberList라는 클래스를 만들었다. private를 붙이면 필드를 따로 지정하지 않아도 되고, 생성자 함수 내에서도 별도로 this.~ 를 적을 필요가 없다. 따라서 private로 접근 제어..
제네릭 인터페이스 제네릭은 인터페이스에도 적용할 수 있다. 인터페이스에 타입 변수를 선언해 사용하면 된다. interface KeyPair { key: K; value: V; } let keyPair: KeyPair = { key: 'key', value: 1, }; let keyPair2: KeyPair = { key: true, value: ['1'], }; 키페어를 저장하는 객체 타입을 제네릭 인터페이스로 정의했다. 변수 keyPair에서는 타입으로 KeyPair를, keyPair2에서는 KeyPari을 정의했다. 그러면 key에는 K = string | boolean, V = number | string[]으로 정의되게 된다. 제네릭 인터페이스는 제네릭 함수와 달리 변수의 타입으로 정의할 때, 반..
제네릭을 이용한 JS의 배열 메서드 map, forEach 구현 map 구현 const arr = [1, 2, 3]; const newArr = arr.map((it) => it * 2); function map(arr: unknown[], callback: (item: unknown) => unknown): unknown[] {} 배열 arr에 map과 콜백 함수를 적용해 새로운 배열 newArr을 만들었는데, 이를 TS와 제네릭으로 구현해보려 한다. 먼저 메서드를 적용할 배열 arr과 콜백 함수 callback을 매개변수로 받아준다. 이 때 두 매개변수의 타입은 우선 모두 unknown으로 해주고, 함수의 반환값 타입도 unknown[]로 지정해준다. function map(arr: T[], call..
제네릭을 활용하자 function swap(a: T, b: U) { return [b, a]; } const [a, b] = swap("1", 2); 2개의 타입 변수가 필요한 위와 같은 상황에서는 타입 변수를 T, U 이렇게 2개를 사용할 수 있다. function returnFirstValue(data: T[]) { return data[0]; } let num = returnFirstValue([0, 1, 2]); // number let str = returnFirstValue([1, "hello", "mynameis"]); // number | string 다양한 배열 타입을 인수로 받는 제네릭 함수를 만들어야 한다. 함수 매개변수 data의 타입을 T[]로 설정했기 때문에 배열이 아닌 값은 인..
제네릭 함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어주는 TS의 기능 제네릭 함수는 두루두루 모든 타입의 값을 적용할 수 있는 범용적인 함수다. function func(value: any) { return value; } let num = func(10); // any 타입 let str = func("string"); // any 타입 다양한 타입의 매개변수를 받고 해당 매개변수를 그대로 반환하는 함수를 만들려고 한다. 이 때 다양한 타입의 매개변수를 받기 위해 매개변수의 타입을 any로 정의했다. 그랬더니 누가 봐도 10, string인 변수의 타입이 any로 고정되어 버렸다. 이는 func 함수의 반환값 타입이 return문을 기준으로 any라고 추론되었기 때문..
