타입 스크립트에서 외부 라이브러리 사용하기 JS를 사용할 때는 npmjs.com에서 바로 Installation 명령어에 따라 설치하기만 하면 됐지만 TS에서는 그렇게 할 수 없다. 코드 실행 전 타입 검사 기능을 시행하는데, 라이브러리 코드의 타입 검사도 수행한다. 따라서 라이브러리 코드의 타입 정보가 제공되지 않은 상황에서 타입 검사가 이뤄지지 않기에 오류가 발생한다. 단, 몇몇 라이브러리에서는 TS 아이콘(TS로 만들어짐)이 있는 것들은 원래 쓰던대로 바로 사용할 수 있다. DT 아이콘이 있는 경우 해당 아이콘을 누르면... 라이브러리 코드의 타입 정보를 갖고 있는 패키지를 추가로 설치해주면 된다. 이런 패키지를 Definitely Types라고 한다. **출처: 한 입 크기로 잘라먹는 타입스크립트..
타입스크립트 리액트 시작하기 npx create-react-app . npm i @types/node @types/react @types/react-dom @types/jest (타입스크립트 적용을 위해 타입 선언 패키지 추가) tsconfig.json 작성 target: TS 파일을 어떤 버전의 JS로 바꿔줄지 정하는 부분 module: JS 파일간 import 문법 구현 시 어떤 문법을 쓸지 정하는 부분 CommonJS는 require, ESM은 import 문법을 사용함 광범위한 호환성을 원할 때에는 ES5 & CommonJS로 설정 { "compilerOptions": { "target": "ES5", "module": "CommonJS", // react가 어디서든 잘 작동되게 ES5 & Com..
유틸리티 타입 제네릭, 맵드 타입, 조건부 타입 등 타입 조작 기능을 이용해 실무에서 자주 사용되는 타입을 미리 만들어 놓은 것 여러 가지 유틸리티 타입이 있다. (참고 링크) 맵드 타입 기반의 유틸리티 타입 1 : Partial, Required, Readonly Partial 특정 객체 타입의 모든 프로퍼티를 '선택적 프로퍼티'로 바꿔주는 타입 맵드 타입과 인덱스드 엑세스(참고 링크)를 활용해 구현할 수 있다. interface Post { title: string; tags: string[]; content: string; thumbnailURL?: string; } // const draft: Post = { // title: '제목1', // content: '초안', // }; const dr..
조건부 타입 삼항연산자를 이용해 조건에 따라 타입을 결정한다. type A = number extends string ? string : number; // type A = number type ObjA = { a: number; }; type ObjB = { a: number; b: number; }; type B = ObjB extends ObjA ? number : string; // true (ObjA = 슈퍼) 제네릭과 조건부 타입 function removeSpaces(text: string | undefined | null) { if (typeof text === 'string') { return text.replaceAll(' ', ''); } else { return undefined; ..
📌 문제 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: ..
