이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍any는 함수 시그니처를 무시 function calculateYear(birthDate: Date): number { // ... } let birthDate: any = "1990-01-09"; calculateYear(birthDate); // 정상 - birthDate 매개변수는 Date 타입이어야 하는데, any 타입을 사용하여 calculateAge의 시그니처를 무시

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍덕 타이핑(duck typing) 이란? - 객체의 변수 및 메서드 집합이 타입을 결정 즉, 객체가 어떤 타입에 부합하는 변수와 메서드를 가질 경우, 객체를 해당 타입에 속하는 것으로 간주하는 것 - 많은 새들 중에서 오리처럼 걷고, 헤엄치고, 꽥꽥거리면 그 새를 오리라고 할 수 있는 것에서 유래 📍구조적 타이핑(structural typing) - 타입 구조가 유사하면 (ex. 객체의 프로퍼티들이 비슷) 다른 두 타입이 서로 호환될 수 있는 것 - JS가 덕 타이핑 기반이고, TS는 JS의 런타임 동작을 모델링하기 때문에, 구조적 타이핑 발생 - 예시 Vector2D 타입과 NamedVector 간 관계를 선언하지 않았는데 호환이 가능 inter..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍타입 에러가 있는 코드도 컴파일이 가능 - 타입 체크와 컴파일은 독립적으로 동작 - 문제가 있는 부분을 알려주지만, 빌드가 중단되지는 않음 - tsconfing.json에서 noEmitOnError를 설정하면 타입 에러일 때 컴파일 X 📍런타임에는 타입 체크 불가 - 런타임에서는 타입을 활용할 수 없다 아래 코드에서 그 예시를 확인할 수 있다 interface Square { width: number; } interface Rectangle extends Square { height: number; } type Shape = Square | Rectangle; function calculateArea(shape: Shape) { if (shape ..

📍문제 링크https://www.acmicpc.net/problem/3107 3107번: IPv6첫째 줄에 올바른 IPv6 주소가 주어진다. 이 주소는 최대 39글자이다. 또한, 주소는 숫자 0-9, 알파벳 소문자 a-f, 콜론 :으로만 이루어져 있다.www.acmicpc.net 📍알고리즘 분류- 구현- 문자열 📍문제 풀이- 4자리 16진수가 1 그룹이 되고, 그룹 8개가 : 로 연결된 문자를 만들자- 그룹에서 앞부분의 0은 생략할 수 있다- 0으로만 이루어진 그룹이 연속되어 있으면, :: 으로 축약 가능 📍의사 코드- split(":") 을 이용해 그룹을 분리해 배열 splittedArr로 만든다- 배열을 순회하며 그룹의 길이가 4보다 작으면, 작은만큼 0을 앞에 채워주는 함수 insertZer..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍tsconfig.json 1️⃣tsc --init 명령어로 초기 생성 2️⃣noImplicitAny // tsconfig.json { "compilerOptions": { "noImplicitAny": true // true로 설정해서 모든 변수에 타입 설정하는 것이 좋다 // ... } } - 변수들이 미리 정의된 타입을 가져야 하는지 여부를 제어 - any 타입으로 간주될 가능성을 사전에 차단 3️⃣strictNullChecks - noImplicitAny = true 필요 - null과 undefined가 모든 타입에서 허용되는지 확인 // null 대신 undefined 써도 동일 // strictNullChecks = false const..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍JS와 TS의 관계 JS로 작성한 코드의 확장자를 .ts로 바꿔도 실행 가능하다. 반면, TS로 작성한 코드의 확장자를 .js로 바꾸면 에러가 발생한다. (타입스크립트 별도의 문법 존재) 📍타입 구문을 통해 타입스크립트에게 코드의 의도를 전달 TS 자체적으로 해결책을 제시하는데, 합당해보이긴 하지만, 완벽한 해결책은 아님 const states = [ // capital 대신 오타가 발생 {name: "Alabama", capitol: "Montgomery"}, {name: "Alaska", capitol: "Juneau"}, {name: "Arizona", capitol: "Phoenix"}, // ... ]; for (const state of..

📍문제 링크 https://www.acmicpc.net/problem/2659 2659번: 십자카드 문제 입력은 한 줄로 이루어지며, 이 한 줄은 카드의 네 모서리에 씌여있는 1 이상 9 이하의 숫자 4개가 시계 방향으로 입력된다. 각 숫자 사이에는 빈칸이 하나 있다. www.acmicpc.net 📍알고리즘 분류 - 구현 - 브루트포스 - 정렬 📍문제 풀이 - 주어진 4개의 수의 시계방향 순서를 유지하는 최솟값을 구한다 - 최소의 시계수 1111 ... 시작하여 최솟값이 시계수에 해당하면 몇 번째에 등장하는지 계산하여 출력한다. 📍의사 코드 - 주어진 십자카드에서 앞의 숫자를 빼서 뒤로 보내는 것을 반복해서 시계수(최솟값)를 구한다. - 어떤 수가 주어졌을 때, 시계수이면 true를 출력하는 판별 함수를..

📍참고 https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/adding-gatsby-image-support/#adding-a-gatsbyimagedata-graphql-resolver Adding Gatsby Image support to your plugin | Gatsby The new Gatsby image plugin includes React components for displaying images, and these can be used with data from plugins. The plugin… www.gatsbyjs.com 📍gatsbyImageData 리졸버 - 이미지의 크기를 조절 (layout) - 이미지가 위치할 자리에 처음부터..