[CNU SW Academy] 40일차(23.01.27)

프로그래머스 - 프론트엔드 미니 데브코스

타입스크립트(TypeScript)

- 타입이 적용된 JavaScript

- MS에서 만듦

- 장점

    - 타입이 있다는 것

      => 안정성 : 컴파일 단계에서 미리 오류를 감지할 수 있다.

      => 가독성 : 타입을 보고 무엇을 하는지 미리 알 수 있다.

- 단점

    - 초기 설정을 해야한다.

    - 스크립트 언어의 유연성이 낮아진다.

    - 컴파일 시간이 길어질 수 있다. (한 번 빌드해야 한다. => 빌드에 시간이 오래 걸린다.)

 

문법

1. 타입 주석과 타입 추론

- 변수, 상수 혹은 반환값이 무슨 타입인지를 나타내는 것을 의미

- 생략하면 컴파일 타임에 알아낸다.

let a: number = 1;	// 타입 주석
let b = 2;	// 타입 추론

let c: boolean = false;
let d: String 'TypeScript';

let f = {a: 1};
f.a = 2; // 가능
f.b = 3; // 다른 값 추가는 불가능

let h : number[] = [];
h.push(1); // 가능
h.push(''); // 불가능

let i: 'good' = 'good'; // i 변수는 good이라는 string만 들어갈 수 있다.

let g: any = 3; // string, number, boolean 등 자유자재로 넣을 수 있다. 남발하는 것은 좋지 않다.

function add(a: number, b: number): number {
	// a는 number type, b도 number type, return값도 number type
	return a + b;
}

2. 인터페이스

- 객체의 타입을 정의하는 방법

- interface라는 키워드로 가능하다.

interface Company {
	name: string;
    age: number;
    address?: string;
}

const cobalt: Company = {
	name: 'Cobalt, Inc.',
    age: 3,
    // address: 'Seoul'
}

const person: {
    name: string,
    age?: number
} = {
	name: 'Ahn Hyo-jin'
    age: 23
}

콜론(:) 옆에 ?를 붙이면 선택 속성 => address는 undefined도 들어갈 수 있다.

 

person의 경우 익명 인터페이스에 해당한다.

한 번만 사용하는 경우 인터페이스 정의보다 익명 인터페이스를 활용하는 것이 깔끔

 

3. tuple

배열을 tuple로 이용하는 방법

const tuple: [string, number] = ['narlo', 23]

0번째는 string, 1번째는 number만 들어갈 수 있는 형태

 

4. enum

열거형을 사용하는 방법

enum Color {
	RED // = 'red',
    GREEN // = 'green',
    BLUE // = 'blue'
}

const color = Color.BLUE;

 

5. 대수 타입

여러 자료형의 값을 가질 수 있게 하는 방법

    1) 합집합 타입

    2) 교집합 타입

let numOrStr: number | string = 1; // 합집합 타입, number or string이 들어갈 수 있다. 둘 중 하나는 들어가야 한다.
numOrStr = 'str';

// let numAndStr: number & string = ''; // 원시 타입에서 사용할 수는 없습니다. 인터페이스에서 유용하게 사용

interface Name {
	name: string;
}

interface Age {
	age: number;
}

let narlo: Name & Age = {
	name: 'narlo',
    age: 23
}

type Person = Name & Age;	// type 키워드를 이용해 새로운 타입을 만들어낼 수 있다.
let julia: Person = {
	name: 'julia',
	age: 100
}

 

6. Optional

선택 속성을 편하게 이용할 수 있도록 하는 문법

interface Post {
    title: string;
    content: string;
}

interface ResponseData {
	post?: Post;
    message?: string;
    status: number;
}

const response = ResponseData[] = [
{
	post: {
    	title: 'Hello',
        content: 'How are you?'
        },
        status: 200
    },
    {
        message: 'Error!!',
        status: 500
    }
];

console.log(response[1].post && response[1].post.title);
console.log(response[1].post?.title); // 데이터가 없다면 자동으로 undefined를 반환한다.
console.log(response[1].post!.title); // 무조건 값이 있음을 의미

 

7. Generic

하나의 인터페이스로 여러 타입을 이용할 수 있게 하는 방법

interface Value<T> {
	value: T;
}

const value: Value<number> = {
	value: 1
}

const value2: Value<string> = {
	value: '1'
}

function toString<T>(a: T): string {
	return `${a}`;
}

console.log(toString<number>(5));
console.log(toString('5'));	//generic은 생략 가능

8. Partial, Required, Pick, Omit

- 기존 interface를 재활용 할 수 있게 만든다.

interface User {
	id: number;
    name: string;
    age: number;
    address: string;
    createdAt?: string;
    updatedAt?: string;
}

// 모든 필드가 Optional이 된다. 선택 속성이 아닌 id, name, age, address도 입력하지 않아도 된다.
const partial: Partial<User> = {}

// 모든 필드가 Required가 된다.
const required: Required<User> = {
	id: 1,
    name: 'Lee',
    age: 0,
    address: 'Seoul',
    createdAt: '',
    updatedAt: ''
 }
 
 // 특정 필드만 골라서 사용할 수 있다.
 const pick: Pick<User, 'name' | 'age' | 'address'> = {
 	name: '',
    age: 100,
    address: ''
}

// 특정 필드만 빼고 사용할 수 있다.
const omit: Omit<User, 'id' | 'createdAt' | 'updatedAt'> = {
	name: ''
    age: 0,
    address: ''
}

const mixed: Omit<User, 'id' | 'address' | 'age' | 'createdAt' | 'updatedAt'> & Pick<Partial<User>, 'address' | 'age'> = {
	name: '',
}

9. extends

특정 인터페이스를 상속 받아 인터페이스를 확장할 수 있다.

interface Time {
	hour: number;
    minute: number;
    second: number;
}

interface DateTime extends Time {
	year: number;
    month: number;
    day: number;
}

interface OffsetDateTime extends DateTime {
	offset: number;
}

interface ZonedDateTime extends DateTime {
	zoneId: string;
}

interface TimeFormat extends Pick<Time, 'hour' | 'minute'> {
	ampm: 'am' | 'pm';
}

const timeFormat: TimeFormat = {
	hour: 10,
    minute: 30,
    ampm: 'am'
}

 

github pages

html, css, js만 있는 정적 사이트를 올릴 수 있는 페이지

https://pages.github.com/

GitHub Pages

---

코딩테스트

제설

n = int(input())
r1, c1, r2, c2 = map(int, input().split())
rmin, rmax = min(r1, r2), max(r1, r2)
cmin, cmax = min(c1, c2), max(c1, c2)

for i in range(n):
    for j in range(n):
        if i >= rmin-1 and i < rmax and j >= cmin-1 and j < cmax:
            print('.', end='')
        else:
            print('*', end='')
    print()