ㅇㅇㅈ Blog

프론트엔드 수행중

0%

Array reduce()

ruduce를 이요해 객체 데이터에서 특정값 더하기

1
2
3
4
5
6
7
8
9
10
let arr = [
{name:'Tom', age:20},
{name:'Anna', age:30},
{name:'Bobby', age:40},
{name:'Cole', age:50},
]

const sum = arr.reduce((acc,value) => acc + value.age, 0)
console.log(sum)
// 140

groupBy

1
2
3
4
5
6
7
8
9
10
11
12
13
const groupBy = (data, key) => {
// data = 객체 배열 데이터
// key = 분류할 키
return data.reduce((acc, el) => {
// 초기값 {}
// console.log(el); // data 안에 있는 각각의 객체들
acc[el[key]] = acc[el[key]] || [];

acc[el[key]].push(el);

return acc;
}, {});
};

console.log(data)

  • 객체 배열이 들어온다

console.log(el)

  • 각각의 객체
  • 키를 기준으로 그룹시켜준다 (현재는 type이 key)

console.log(acc[el[key]])

filter()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 4자 이상만 필터
let snacks = ['새우깡', '프링글스', '감자깡', '꿀꽈배기', '콘칩', '허니버터칩']
const result = snacks.filter(item => item.length > 3)
// console.log(result)


// 18 이상만 필터
const aboveEighteen = (number) => {
return number > 18
}

let numbers = [12, 5, 8, 33, 18, 22].filter(aboveEighteen)
console.log(numbers) // [33, 22]

// 짝수만 필터
const isEven = (number) => {
return number % 2 === 0
}

let filteredNumbers = [1, 1, 3, 0, -10, 22, 900].filter(isEven)
console.log(filteredNumbers) //[0, -10, 22, 900]


// 매운 들어 갔을때만 필터
let snacksTwo = ['새우깡', '프링글스', '감자깡', '꿀꽈배기', '콘칩', '허니버터칩', '매운 새우깡', '매운 감자깡']
const filterItems = (query) => {
return snacksTwo.filter(snack => snack.indexOf(query) > -1)
}
console.log(filterItems('매운')) // ['매운 새우깡', '매운 감자깡']

// 객체 필터하기
let students = [
{ id: 1, name: 'james', age: 30 },
{ id: 2, name: 'tim', age: 40 },
{ id: 3, name: 'jhon', age: 25 },
{ id: 4, name: 'Anna', age: 39 },
{ id: 5, name: 'bobby', age: 22 },
]

const filterStudents = students.filter(e => e.age >= 30)
console.log(filterStudents)
// 0: {id: 1, name: 'james', age: 30}
// 1: {id: 2, name: 'tim', age: 40}
// 2: {id: 4, name: 'Anna', age: 39}

데이터를 가공할때 reduce와 filter가 많이 쓰이는거 같아서 개념을 확실히 익혀둬야 할거 같다

두 배열 비교하기

교집합

두 배열에 모두 포함된 값만 출력

1
2
3
4
5
6
const arr1 = [1,2,3,4,5]
const arr2 = [1,2]

console.log(arr1.filter((e) => arr2.includes(e)))

// [1,2]

차집합

arr1에서 arr2의 값이 포함 안된 값만 출력

1
2
3
4
5
const arr1 = [1,2,3,4,5]
const arr2 = [1,2]

console.log(arr1.filter((e) => !arr2.includes(e)))
// [3,4,5]

  1. 체육복을 도난 당한 학생 수는 1명 이상 n명 이하 중복된 번호는 없다
  2. 여벌의 체육복을 가져온 학생의 수는 1명 이상 n명 이하 중복된 번호는 없다
  3. 여벌 체육복을 가져온 사람만 빌려 줄 수 있다
  4. 자신의 번호 앞 뒤로 +1 -1 인 사람 한테만 한 벌 빌려 줄 수 있다
  5. 자기 자신의 체육복도 도난 당했을 수도 있다 => 자기만 입을 수 있고 빌려 줄 수는 없다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let lost = [2, 4]
let reserve = [1, 3, 5]

function solution(n, lost, reserve) {
var answer = 0
let lostV = lost.filter((x) => !reserve.includes(x))
console.log(lostV)
let reserveV = reserve.filter((x) => !lost.includes(x))
console.log(reserveV)
let arr = reserveV
.map((e) => {
return e + 1
})
.filter((e) => e <= n)
// console.log(arr)
let arr2 = lostV.filter((x) => {
return !arr.includes(x)
})
// console.log(arr2)
answer = n - arr2.length
console.log(answer)
return answer
}
solution(5, lost, reserve)

첫 작성 코드.. 30점

  • 문제는 자기 자신이 잃어 버렸을때는 자기 밖에 못 입는다는게 문제!
  1. 가져온 사람 번호에서 잃어버린 사람 번호를 필터한다
  • -> 자기 자신도 잃어 버렸으면 걸러진다
  • 진짜 못 입는 사람과, 두 벌 가져온 사람만 남는다
  1. 두 벌 가져온 사람 번호에서 -1을 해서 잃어버린 사람 꺼를 다시 필터 해준다
  2. 두 벌 가져온 사람 번호에서 +1을 해서 잃어버린 사람 꺼를 다시 필터 해준다
  3. 총 학생 수 에서 필터된 못입는 사람수를 빼준다

잘 안풀린다..

함수형 컴포넌트 State

Class Component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import React, { Component } from 'react'

export default class ClassComponent extends Component {
constructor(props) {
super(props)
this.state = { date: new Date() }
}

componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000)
}

componentWillUnmount() {
clearInterval(this.timerID)
}

tick() {
this.setState({
date: new Date(),
})
}

render() {
return (
<div>
<h1>Hello, world! Class Component</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
)
}
}

Functional Component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { useEffect, useState } from 'react'

export default function FunctionalComponent() {
const [date, setDate] = useState(new Date())
const tick = () => {
setDate(new Date())
}
useEffect(() => {
// DidMount
const interval = setInterval(() => tick(), 1000)

return () => {
// WillUnmount
clearInterval(interval)
}
}, [])

return (
<div>
<h1>Hello, world! It's Functional</h1>
<h2>It is {date.toLocaleTimeString()}.</h2>
</div>
)
}

컴포넌트 생명주기

  • 어떤 타이밍에 어떤 동작들이 일어나는가

https://ko.reactjs.org/docs/react-component.html

  1. 마운트 - 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출
  • constructor()
  • render()
  • componentDidMount()
  1. 업데이트 - Props 또는 state가 변경되면 갱신이 발생. 컴포넌트가 다시 렌더링될때 순서대로 호출
  • render()
  • componentDidUpdate()
  1. 마운트 해제 - 컴포넌트가 DOM 상에서 제거될 때에 호출
  • componentWillUnmount()

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

생명주기 도표

합성 이벤트

https://ko.reactjs.org/docs/handling-events.html

  • React 엘리먼트에서 이벤트를 처리하는 방식은 DOM엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하지만 , 몇 가지 문법 차이가 있다
    • React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용한다.
    • JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.
    • React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시적으로 호출해야 한다
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      function Form() {
      function handleSubmit(e) {
      e.preventDefault();
      console.log('You clicked submit.');
      }

      return (
      <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
      </form>
      );
      }

캡쳐링과 버블링

  • 이벤트 버블링
    • 자식요소에서 발생한 이벤트가 상위의 부모요소에까지 영향을 미치는 것
  • 이벤트 캡쳐링
    • 버블링과는 반대로 부모요소의 이벤트가 자식요소에까지 영향을 미치는 것
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export default function Event() {
const handleButtonClick = () => {
console.log('handleButtonClick');
};
const handleClickcaputre = () => {
console.log('handleClickcaputre');
};
const handleClickCaputre2 = () => {
console.log('handleClickCaputre2');
};
const handleClickBubble = () => {
console.log('handleClickBubble');
};

return (
<div onClickCapture={handleClickcaputre}>
<div onClickCapture={handleClickCaputre2} onClick={handleClickBubble}>
<button onClick={handleButtonClick}>Button</button>
</div>
</div>
);
}

제일 상위 div에서 캡쳐링 > 그 아래 div > 캡쳐링 > 버튼의 클릭이벤트 > 그 위 div의 버블링

조건부 렌더링

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React from 'react';

const UserGreeting = ({ name, count }) => {
return (
<h1>
{name && name + ','} Welcome {count && `Its ${count} times`}
</h1>
);
};
const GuestGreeting = () => {
return <h1>Plsease sign Up</h1>;
};

const Greeting = (props) => {
// if (props.isLoggedIn) {
// return <UserGreeting name='jimmy' count={0} />;
// }
return props.isLoggedIn ? (
<UserGreeting name='jimmy' count={0} />
) : (
<GuestGreeting />
);
};

export default function Condition() {
const isLoggedIn = true;
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
</div>
);
}

논리연산자 && 으로 if를 인라인으로 표현하기

JavaScript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가됩니다

1
2
3
4
5
6
7
  const UserGreeting = ({ name, count }) => {
return (
<h1>
{name && name + ','} Welcome {count && `Its ${count} times`}
</h1>
);
};
  • name이 있을경우에 && 뒤의 name + ‘,’ 가 보인다. name이 없으면 아무것도 출력되지 않음
  • falsy 표현식을 반환하면 여전히 && 뒤에 있는 표현식은 건너뛰지만 falsy 표현식이 반환된다는 것에 주의하라
  • count에 0이 들어가면 내용이 안나오는게 아닌 0이 렌더링 된다
1
2
3
4
5
6
7
const UserGreeting = ({ name, count }) => {
return (
<h1>
{name && name + ','} Welcome {Boolean(count) && `Its ${count} times`}
</h1>
);
};
  • count를 Boolean으로 감싸서 falsy를 false로 만든다 => 아무것도 출력되지 않는다
  • 삼항연산자를 쓸 수도 있다
1
2
3
4
5
6
7
const UserGreeting = ({ name, count }) => {
return (
<h1>
{name && name + ','} Welcome {count ? `Its ${count} times` : null}
</h1>
);
};

List 와 Key

  • default key => key를 안주면 react는 index를 쓴다(워닝 O)
  • 고유성 => 형제 사이에서만 고유하면 된다
  • key props => key는 props로 넘어가지 않음
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    const todos = [
    { id: 1, text: '아침먹기' },
    { id: 2, text: '점심먹기' },
    { id: 3, text: '저녁먹기' },
    { id: 4, text: '간식먹기' },
    ];

    const Item = (props) => {
    )
    return <li>{props.text}</li>;
    };

    const TodoList = () =>

    todos.map((todo) => <Item key={todo.id} text={todo.text} />);



    export default function List() {
    // const numbers = [1, 2, 3, 4, 5];
    // return (
    // <ul>
    // {numbers.map((item) => (
    // <li key={item.toString()}>{item}</li>
    // ))}
    // </ul>
    // );

    return (
    <>
    <TodoList />
    </>
    );
    }

Generics

1
2
3
4
5
function hello(message: any) : any {
return message
}
console.log(hello('mark')) // any로 추론되기 때문에 .length 같은 property를 사용하지 못한다
console.log(hello(39))
1
2
3
4
function helloGeneric<T> (message:T) :T { // 함수의 안에서 T의 타입을 기억하게 된다
return message
}
console.log(helloGeneric('Mark'))
1
2
3
4
function helloGeneric<T> (message:T) :T { // 함수의 안에서 T의 타입을 기억하게 된다
return message
}
console.log(helloGeneric(39))
1
2
3
4
function helloGeneric<T> (message:T) :T { // 함수의 안에서 T의 타입을 기억하게 된다
return message
}
console.log(helloGeneric(true))

Generics Basic

1
2
3
4
5
6
7
function helloBasic<T>(message: T): T {
return message
}

helloBasic<string>('hello') // 타입이 string으로 된다
helloBasic(36) // T의 타입을 넣지 않으면 추론된다 36이 number이지만 number가 아닌 가장 좁은 범위인 36으로 추론된다

Generics Array & Tuple

1
2
3
4
5
6
function helloArray<T>(message: T[]): T {
return message[0]
}

helloArray(['Hello', 'World'])
helloArray(['hello', 5])

string으로 추론

string과 number로 추론

사용할 수 있는 메서드가 제한적이다

1
2
3
4
5
function helloTuple<T, K>(message: [T, K]): T {
return message[0]
}
helloTuple(['Hello', 'World'])
helloTuple(['Hello', 5])

Generics Function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// type alias
type HelloFunctionGeneric1 = <T>(message: T) => T

const hellofunction1: HelloFunctionGeneric1 = <T>(message: T): T => {
return message
}

// interface
interface HelloFunctionGeneric2 {
<T>(message: T): T
}

const helloFunction2: HelloFunctionGeneric2 = <T>(message: T): T => {
return message
}

Generics Class

1
2
3
4
5
6
7
8
9
class Person<T> {
private _name: T

constructor(name: T) {
this._name = name
}
}
const p1 = new Person('Mark')
new Person<string>('123')
1
2
3
4
5
6
7
8
9
10
11
12
class Person<T, K> {
private _name: T
private _age: K

constructor(name: T, age: K) {
this._name = name
this._age = age
}
}

const p1 = new Person(123, 'Mark')
new Person<string, number>('Hello', 123)

Generics with extends

1
2
3
4
5
6
7
8
9
10
11
12
13
class PersonExtends<T extends string | number> {
// T 는 string 과 number만 가능하다
// class 상속과는 조금 다른 개념
private _name: T

constructor(name: T) {
this._name = name
}
}

new PersonExtends('Mark')
new PersonExtends(39)
new PersonExtends(true) // error

keyof & type lookup system

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
interface IPerson {
name: string
age: number
}

const person: IPerson = {
name: 'Mark',
age: 39,
}

type Keys = keyof IPerson

const keys: Keys = 'name'

// IPerson[keyof IPerson]
// => IPerson["name" | "age"]
// => IPerson['name] | IPerson['age']
// => string | number
function getProp<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}

getProp(person, 'name')

function setProp<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
obj[key] = value
}

setProp(person, 'name', 'anna')

Class

  • class 키워드를 이용하여 클래스를 만들 수 있다
  • class 이름은 대문자로 시작한다
  • new를 이용하여 class를 통해 object를 만들 수 있다
  • constructor를 이용하여 object를 생성하면서 값을 전달할 수 있다
  • this를 이용해 만들어진 object를 가르킬 수 있다
  • JS로 컴파일되면 es5의 경우 function으로 변경된다
1
2
3
4
5
6
7
8
9
class Person {
name
constructor(name: string) {
this.name = name
}
}
const p1 = new Person('Mark')

console.log(p1.name)

constructor & initialize

1
2
3
4
5
6
7
class Person {
name: string
age: number
}
const p1 = new Person()

console.log(p1)
1
2
3
4
5
6
7
class Person {
name: string = "Mark"
age: number
}
const p1 = new Person()
p1.age = 39 // 초기값 없이 이후에 값을 설정 하고 싶을때
console.log(p1)

초기값이 없으면 에러가 뜬다

1
2
3
4
5
6
7
8
class Person {
name: string = "Mark"
age!: number // age 뒤에 ! 를 붙여준다
}
const p1 = new Person()
// p1.age = 39 // age 뒤에 ! 가 붙어있는데 값을 설정 하지 않은 경우
console.log(p1.age)
// undefined가 뜬다

접근 제어자 (Access Modifiers)

  • 접근 제어자에는 public, private, protected가 있다
  • 설정하지 않으면 public
  • 클래스 내부의 모든 곳에(생성자, 프로퍼티, 메서드) 설정 가능하다
  • private 으로 설정하면 클래스 외부에서 접근할 수 없다
  • 자바스크립트에서 private 지원하지 않아 오랫동안 프로퍼티나 메서드 이름 앞에 _를 붙여서 표현 했다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Person {
name: string = 'Mark'
age: number

private constructor(age: number) {
this.age = age
}

async init() {}
}
const p1 = new Person(39) // error
// p1.age = 39
console.log(p1.age)

constructor에 private 설정 한 경우 외부에서 생성자 호출 불가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Person {
name: string = 'Mark'
private age: number

constructor(age: number) {
this.age = age
}

async init() {}
}
const p1 = new Person(39)
// p1.age = 39
console.log(p1.age) // error

프로퍼티에 private 를 붙였을때 age에 접근 불가

initialization in constructor parameters

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 기존
class Person {
name: string
age: number

constructor(name: string, age: number) {
this.name = name
this.age = age
}
}
const p1 = new Person('Mark', 39)
console.log(p1)


// 수정

class Person {
constructor(public name: string, public age: number) {
}
}
const p1 = new Person('Mark', 39)
console.log(p1)

Getters & Setters

1
2
3
4
5
6
class Person {
constructor(public name: string, public age: number) {}
}
const p1 = new Person('Mark', 39)
console.log(p1.name) // get
p1.name = 'John' // set
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Person {
constructor(public _name: string, public age: number) {}

get name() {
console.log('get')
return this._name
}

set name(n: string) {
// return 해줄 필요 없다
// 인자를 받아 넣어 준다
console.log('set')
this._name = n
}
}
const p1 = new Person('Mark', 39)
console.log(p1.name) // get
p1.name = 'John' // set

타입 호환성 (Type Compatibility)

서브 타입(1)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// sub1 타입은 sup1 타입의 서브 타입이다.
let sub1: 1 = 1;
let sup1: number = sub1;
sub1 = sup1 //error! Type 'number' is not assignable to type '1'

// sub2 타입은 sup2 타입의 서브 타입이다
let sub2: number[] = [1]
let sup2: object = sub2; // sup2에는 sub2를 할당 할 수 있다
sub2 = sup2
// error! Type '{}' is missing the following properties from type 'number[]':length, pop, push, concat, and 16 more.

// sub3 타입은 sup3 타입의 서브 타입이다.
let sub3: [number, number] = [1,2]
let sup3: number[] = sub3; // sup3에 sub3 을 할당 할 수 있다
sub3 = sup3
// error! Type 'number[]' is not assignable to type '[number, number]'. Target requires 2 element(s) but source may have fewer.

서브 타입(2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// sub4 타입은 sup4 타입의 서브 타입이다.
let sub4: number = 1;
let sup4: any = sub4; // any는 어떤것도 들어갈 수 있다
sub4 = sup4; // 반대의 경우도 마찬가지

// sub5 타입은 sup5 타입의 서브 타입이다.
let sub5: never = 0 as never;
let sup5: number = sub5; // number에 포함 될 수 있지만 반대의 경우 문제가 된다
sub5 = sup5; // error! Type 'number' is not assignable to type 'never'

class Animal {}
class Dog extends Animal {
eat() {}
}

// sub6 타입은 sup6 타입의 서브 타입이다.
let sub6: Dog = new Dog()
let sup6: Animal = sub6;
sub6 = sup6; // error! Property 'eat' is missing in type 'SubAnimal' but required in type 'SubDog'

1. 같거나 서브 타입인 경우, 할당이 가능하다. => 공변

1
2
3
4
5
6
7
8
9
10
11
// primitive type
let sub7: string = '';
let sup7: string | number = sub7;

// object - 각각의 프로퍼티가 대응하는 프로퍼티와 같거나 서브타입이어야 한다.
let sub8: { a: string; b: number} ={a: '', b: 1}
let sup8: { a: string | number; b: number} = sub8;

// array - object 와 마찬가지
let sub9: Array<{ a: string; b:number}> =[{a: '', b: 1}]
let sup9: Array<{ a: string | number; b: number}> = sub8;
Read more »

interface

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
interface Person1 {
// 컴파일 됐을때는 사라지게 된다
// 컴파일 타임에만 필요하다
// 컴파일 타임에 인터페이스를 이용해 관계를 규명해 체크해주는 역할
name: string
age: number
}

function hello1(person: Person1): void {
console.log(`안녕하세요 ${person.name}입니다`)
}

const p1: Person1 = {
name: 'Mark',
age: 39,
}
hello1(p1)

optional property (1)

1
2
3
4
5
6
7
8
9
10
11
12
13
interface Person2 {
name: string
age?: number
// 객체에 있을수도 있고 없을수도 있을때 ? 를 뒤에 붙인다
}

function hello2(person: Person2): void {
console.log(`안녕하세요 ${person.name}입니다 `)
}

hello2({ name: 'Mark', age: 39 })
hello2({ name: 'Anna' })

optional property (2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
interface Person3 {
name: string
age?: number
[index: string]: any
}

function hello3(person: Person3): void {
console.log(
`안녕하세요 ${person.name} ${person.systers} ${person.father}입니다`
)
}

const p31: Person3 = {
name: 'Mark',
age: 39,
}

const p32: Person3 = {
name: 'Anna',
systers: ['sung', 'chan'], // any 이기 때문에 들어 올 수 있다
}

const p33: Person3 = {
name: 'Bokdan',
father: p31, // any 이기 때문에 들어 올 수 있다
mother: p32, // any 이기 때문에 들어 올 수 있다
}

hello3(p31)
hello3(p32)
hello3(p33)

function in interface

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
interface Person4 {
name: string
age: number
hello(): void
}

const p41: Person4 = {
name: 'Mark',
age: 39,
hello: function (): void {
console.log(`안녕하세요! ${this.name} 입니다`)
},
}

const p42: Person4 = {
name: 'mark',
age: 39,
hello(this: Person4): void {
console.log(`안녕하세요! ${this.name}입니다`)
},
}

const p43: Person4 = {
name: 'Mark',
age: 39,
hello: (this: Person4): void => {
console.log(`안녕하세요! ${this.name}입니다`) // this는 글로벌을 가르킨다
},
}

두 배열을 하나의 객체로 만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
const keys = ['k1', 'k2'];
const values = ['injuk', 'ingnoh'];

const result = keys.reduce((acc, curr, idx) => {
acc[curr] = values[idx];
return acc;
}, new Object);

console.log(result);

/* 실행 결과
{ k1: 'injuk', k2: 'ingnoh' }
*/

extends

  • tsconfig에서 다른 파일의 설정을 상속받을때 사용한다
  • 파일(상대) 경로명 : string
  • TypeScript 2.1 버전 이상에서만 가능
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // tsconfig.json
    {
    "extends": "./base.json",
    "compilerOptions": {
    ...
    // "strict": true,
    }
    }

    // base.json
    {
    "compilerOptions": {
    "strict": true
    }
    }
    // base.json파일의 설정을 상속받아 strict: true 가 적용 된다

files, include, exclude

  • 프로젝트 안의 어떤 파일을 컴파일 할건지 결정하게 된다
  • 셋다 설정이 없으면, 전부다 컴바일

files

  • 상대 혹은 절대 경로의 리스트 배열이다
  • files에 설정이 되어있으면 exclude되어 있어도 컴파일이 된다

include,exclude

  • glob패턴 (마치 .gitignore)

include

  • exclude로 제외 되어있으면 컴파일하지 않는다

exclude

  • 설정 안하면 4가지(node_modules,bower_components,jspm_packages, <outDir>를 default로 제외한다
  • <outDir>은 항상 제외된다 (include에 있어도)

compileOptions

typeRoots, types

@types

  • TypeScript 2.0부터 사용 가능해진 내장 type definition 시스템
  • 아무 설정 안하면?
    • node_modules/@types라는 모든 경로를 찾아서 사용
  • typeRoots를 사용하면?
    • 배열 안에 들어 있는 경로들 아래서만 가져온다
  • types를 사용하면?
    • 배열 안의 모듈 혹은 ./node_modules/@types/ 안의 모듈 이름에서 찾아온다
    • []빈 배열을 넣는 다는건 이 시스템을 이용하지 않겠다는 것
  • typeRoots와 types를 같이 사용하지 않는다
    Read more »