7주 5일차 - REST API, 타입스크립트, 이진 탐색

7주 5일차 - REST API

1. 배운 것

• 데일리코딩 12번
• REST API
• 타입스크립트

2. 내용 정리

데일리코딩 12번

• if문을 외부 for문 내부 for문 각각 줄 필요 없이 내부 for문에서 한번만 주어도 해결이 되는 문제였다. 중첩 반복문에서 조건을 줄일 수 있는지 조금 더 생각해 보는게 좋겠다.

// 함수 몸체 생략.
// 외부 for문의 if문 조건을 생략하고 내부 for문에서 .push(i, j) 했어도 되었음.

let result = [];

  for (let i = 0; i < arr.length; i++) {
    if (arr[i].indexOf('B') !== -1) {
      result.push(i);
    }
    for (let j = 0; j < arr[i].length; j++) {
      if (arr[i][j] === 'B') {
        result.push(j);
      }
    }
  }

  return result;

타입스크립트

• vscode 타입스크립트 개발환경 세팅

// 경로: 작업 폴더 root 경로

// 1. 터미널 명령어

npm init -y // 빈 npm project 생성. -y: yes

npm i typescript // 타입스크립트 설치

tsc --init // tsconfig.json 생성(타입스크립트 환경설정 파일)

// 2. 컴파일러 옵션 수정: 소스 파일과 컴파일 결과물 경로 지정하기.
// 작업 폴더 root 경로에 src, out 폴더 생성해야 함.
// tsconfig.json 파일에서 주석 해제, 또는 새로 기입.

/* Modules */
    "rootDir": "./src",
/* Emit */
    "outDir": "./out",

// 3. 작업폴더 내 .vscode/launch.json 파일 생성 후 아래 내용 작성.
// src 폴더 내 index.ts를 진입점으로 설정하였으므로 해당 경로에 해당 파일 생성.
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: <https://go.microsoft.com/fwlink/?linkid=830387>
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/src/index.ts",
      "outFiles": ["${workspaceFolder}/**/*.js"]
    }
  ]
}

타입스크립트 - 왜 타입스크립트를 사용하는가

• 자바스크립트의 함수는 매개변수의 자료형을 명시하지 않아 문제가 될 수 있다. Parameter ‘num’ implicitly has an ‘any’ type.
• 런타임 이전에 오류가 발견되기 때문에 편리하다.
  • 자바스크립트는 동적 언어로 런타임에 타입이 결정되고 오류가 발견된다.
  • 타입스크립트는 정적 언어로 컴파일시 타입이 결정되고 오류가 발견된다.
• 타입스크립트에서는 몇개의 매개변수를 어떤 자료형으로 명시했는지 일일히 코드를 뒤져볼 필요가 없다. 리턴값도 표시해준다.
  • 함수 호출 시 소괄호에 커서를 올리면 매개변수와 타입이 안내된다.
  • add(num1: number, num2: number): void 에서 void : 아무것도 리턴하지 않음.

// * 1. TS: 매개변수의 타입 지정하기.
// 명시한 타입과 일치하지 않으면 에러 발생.

function multiply(num1: number, num2: number) {
  console.log(num1 * num2);
}

multiply('1', 2);
// Argument of type 'string' is not assignable to parameter of type 'number'.

// * 1-1. TS: 매개변수로 객체(요소가 숫자인 배열) 받기

function showItems(arr: number[]) {
  arr.forEach(e => console.log(e));
}
showItems([1, 2, 3, 4]);f

// 자바스크립트 방식: 매개변수의 타입을 지정할 수 없음.

function multiply(num1, num2) {
    console.log(num1 * num2);
}
multiply(2, 3);

function showItems(arr) {
  arr.forEach(e => console.log(e));
}
showItems([1, 2, 3, 4]);

타입스크립트 - 기본 타입

// * 타입스크립트의 기본 타입들
// 변수 선언시 지정한 타입에 맞지 않는 값으로 재할당 불가.

let user: string = 'Ryan';
user = 'Kim';
user = 10; // Type 'number' is not assignable to type 'string'.

// * 타입 추론
// 선언시 타입을 명시하지 않아도 최초에 할당한 타입만 재할당 가능.

let num = 1;
num = 'Ryan';
// Type 'string' is not assignable to type 'number'.

// * 기본 타입들
let age: number = 30;
let isMale: boolean = true;
let numArr: number[] = [1, 2, 3];
let strArr: Array<string> = ['a', 'b', 'c'];

// 배열과 배열의 요소 타입을 지정하는 2가지 방법.
let nums: number[] = [1, 2, 3];
let nums2: Array<Number> = [1, 2, 3];

// 지정한 배열 요소의 타입이 아닌 요소로 배열 수정 불가.
nums.push('문자');
// Argument of type 'string' is not assignable to parameter of type 'number'.

• 변수 선언시 타입을 명시한 경우 해당 타입의 값으로만 재할당 가능.
• 타입을 명시하지 않아도 타입 추론에 의해 초기값과 같은 타입의 값만 재할당 가능.

타입스크립트 - 1. 튜플 타입

// * 튜플 : 타입과 길이가 고정된 배열.
// 다른 타입도 하나의 배열에 담을 수 있다.
// 지정한 타입의 순서와 개수에 맞게 할당해야 한다.
// push 메서드 사용시 주의.

let complexArr: [string, number];
complexArr = ['str', 1];
complexArr = [1, 'str']; // 타입의 순서가 맞지 않음.
complexArr[0].toLowerCase();
complexArr[1].toLowerCase(); // 타입과 메서드 불일치.

// 주의: push 메서드 사용시 최초 지정한 배열의 길이를 무시함.
complexArr.push(1);
console.log(complexArr); // [ 'str', 1, 1 ]

• 튜플 타입: 배열에서 요소들의 타입이 다르더라도 명시하여 사용 가능.
  • 튜플: 길이와 타입이 고정된 배열.
  • 튜플은 자바스크립트에는 존재하지 않는 데이터 타입이다.
  • 지정한 타입의 순서와 개수에 맞게 할당해야 한다.
  • 주의점: push 메서드 사용 시 정해진 길이를 무시하고 배열에 요소가 추가됨.

타입스크립트 - 2. void, never 타입

// * void, never 타입

// void: 반환값이 없는 함수에 사용 가능.
function noReturn(): void {
  console.log('abcd');
}

// never: 무한 루프의 반복문, 또는 항상 에러를 반환하는 함수에 사용 가능.
function loopForever(): never {
  while (true) {
    // 무한반복
  }
}

function err(): never {
  throw new Error('에러 메세지');
}

• void, never 타입
  • void: 반환값이 명시되지 않은 함수에 사용 가능.
  • never: 무한 루프나 에러만을 반환하는 함수에 사용 가능.

타입스크립트 - 3. enum 타입

// * enum 타입
enum Brands {
  Hyundai = 5,
  Kia = 10,
  GM,
}
console.log(Brands[10]); // Kia
console.log(Brands['Kia']); // 10
/**
 * 자바스크립트 방식
var Brands;
(function (Brands) {
    Brands[Brands["Hyundai"] = 5] = "Hyundai";
    Brands[Brands["Kia"] = 10] = "Kia";
    Brands[Brands["GM"] = 11] = "GM";
})(Brands || (Brands = {}));
 */

• enum 타입
  • 자바스크립트에는 없는 데이터 타입.
  • 비슷한 값들끼리 묶어둔 형태. (추가 공부 필요)
  • 값에 숫자를 입력할 경우 양방향 매핑 가능. 숫자 타입만!

타입스크립트 - 4. null, undefined 타입

// * null, undefined 타입

let a: null = null;
let b: undefined = undefined;

이진 검색 응용문제 - leetcode 278번

var solution = function(isBadVersion) {
    /**
     * @param {integer} n Total versions
     * @return {integer} The first bad version
     */
    return function(n) {
        //
        
        
        
        let start = 0;
        let end = n;
        let mid = Math.floor((start + end) / 2);
        while (start <= end) {
            if (isBadVersion(mid)) {
                end = mid - 1;
            } else if (!isBadVersion(mid)) {
                start = mid + 1;
            }
            mid = Math.floor((start + end) / 2);
        }
        return end + 1;
    };
};

• 이러한 문제 유형을 parametric search 라고 따로 부르는 것 같다. 이분 검색으로 풀 수 있다. 자세한 정리는 주말에..

HTTP messages 복습

리액트 복습

REST API

• 별도 문서로 정리. https://ryan-kim-dev.tistory.com/85

참고 자료

• 코딩앙마님 타입스크립트 강좌

3. 리뷰

3.1 좋았던 점

• 오랜만에 스터디원분들을 뵈어서 좋았다.
• 타입스크립트를 공부하면서 힐링할 수 있었다.

3.2 아쉬웠던 점

• 알고리즘 문제 풀이 경험이 많이 부족한게 느껴진다.

3.3 notes

답답해 죽겠지만 분명 실력이 늘긴 늘었어.

풍선을 계속 누르면 터지잖아. 그냥 날아가게 두면 되는걸.

4. 할 일

• 토요일
  • 리액트 - 컴포넌트, props, 동적ui 복습
  • css - 리액트 환경에서 css 만들어보기
  • 이분탐색 응용문제 미진한 부분 다시 복습.
  • 딥다이브 16장 정리
• 일요일
  • ajax 6강
  • REST API
  • HTTP message 복습
  • 딥다이브 16장 정리