## 브라우저 히스토리

브라우저의 히스토리는 `window.history`안에 있다.

`History {length: 3, scrollRestoration: "auto", state: null}`

`length`만 가져올 수 있을 뿐, 실제 내부에 리스트는 가져올 수가 없는데 이는 보안상의 문제 때문이다.

`window.history.back()` `window.history.forward()`는 각각 브라우저의 앞으로가기 뒤로 가기와 동일한 역할을 한다.

## 특정 위치로 가기

`window.history.go(n)` 현재 페이지의 index는 0 이라고 볼 수 있다. -1 은 바로 전 페이지, 1 은 다음 페이지라고 볼 수 있다.

## 히스토리 추가 및 변경

### pushState

`window.pushState(state, title, url)`

아래와 같이 한번 사용해보자.

```javascript
history.pushState({ hello: 'world' }, 'title', 'hello')
```

현재 있는 페이지 주소창에서 `hello`가 추가되었음을 알 수 있다. 그러나 브라우저는 이를 불러오지도 않고, 해당 주소의 존재여부도 파악하지 않는다. 그저 주소만 바뀐 것이다.

아래 프로세스를 살펴보자.

1. `www.google.com` 접속 -> history: 1
2. `history.pushState({ hello: "world" }, "title", "hello");` 입력 -> 주소창: `google.com/hello` / history: 2
3. `www.naver.com` 접속 -> history: 3
4. 뒤로가기 버튼 클릭
5. `https://www.google.com/hello` 가 404를 띄움 -> history.state에 hello: world 가 있음.
6. 뒤로가기 버튼 클릭
7. `www.google.com` 으로 돌아가지만, 여전히 404

따라서 `pushState`는 history에 새로운 history만을 추가할 뿐, 실질적으로 페이지 이동은 일으키지 않는 다는 것을 볼 수 있다.

#### state

javascript object로, pushState로 새로운 히스토리를 만드는 것과 관련이 있다. 사용자가 새로운 상태로 이동할 때마다, `popState`이벤트가 발생해서, `state`의 사본을 가져온다. 파이어폭스의 경우 640k정도의 데이터를 저장할 수 있으며, 이는 브라우저를 재시작해도 사용할 수 있다. 즉, 해당 history state에서 필요한 값을 넣어두는 용도로 사용하면 좋다.

#### title

현재 파이어폭스나 크롬에서 쓰지 않는 변수로 보인다. state의 명칭을 기록해 두는 용도로 사용하면 될 것 같다.

#### URL

새로운 history의 url을 지정한다. 이 전 예제에서도 봤던 것처럼, 브라우저는 해당 URL을 호출하지 않는다.

어째 돌아가는 모양, 주소는 바뀌지만 url을 로딩하지 않는 다는 것이 `window.location = '#foo'` 와 비슷해 보이는 측면이 있다. 이렇게 쓸모없어보이는 `pushState`는 아래와 같은 장점이 있다.

- `pushState`로 생성한 URL은 현재 URL을 기준으로 한다. 반대로 window.location는 해쉬값을 지정할 경우에만 같은 document에 머물러 있다. (아무튼 URL로딩을 안함)
- URL 변경이 필요 없다면, URL값을 안넣어서 변경을 안해주어도 된다. 반대로 해쉬값 지정의 경우에는 현재 해쉬값과 다른 경우에만 새로운 히스토리를 생성한다.
- `state` 오브젝트로 데이터를 저장할 수 있다. 반면 해쉬는 해쉬값을 활용해야 한다.

### replaceState

`replaceState`는 `pushState`와 동작이 거의 비슷하다. 다만 히스토리를 추가하는 것이 아닌, 덮어 쓴다는 것에서 차이가 있다.


브라우저 히스토리 조작

[목차](/2019/08/13/reactjs-interview-questions/) # table of contents  ```toc tight: true, from-heading: 2 to-heading: 3 ```  ## React Router  ### What is React Router?  React Router는 리액트 최상단에 있는 강력한 라우...

리액트 면접 질문 모음 (2)

[목차](/2019/08/13/reactjs-interview-questions/)  ```toc tight: true, from-heading: 2 to-heading: 3 ```  ## Core React  ### What is React  리액트는 오픈소스 프론트엔드 자바스크립트 라이브러리로, 특히 싱글 페이지 애플리케이션의 사용자 인터페이스 구축을...

리액트 면접 질문 모음 (1)

## 문제의 시작

문제의 시작은 [여기](/2019/06/17/typescript-type-enum-partial-record/) 였다.

내가 사용하는 코드는 아래와 같았다.

```typescript
type GlobalColors = 'Red' | 'Blue' | 'Green' | 'Black'

// 기본값으로 색상을 선언한다.
const enum ConstGlobalColorSet {
  Red = '11, 11, 11',
  Blue = '22, 22, 22',
  Green = '33, 33, 33',
  Black = '44, 44, 44',
}

// red, blue, green, black에 대해서는 글로벌하게 지정해둔 컬러를 사용하되,
// 그밖의 string이 오면 그냥 그 string을 리턴한다
function GetGlobalColor(colorString: GlobalColors | string) {
  return GlobalColorSet[colorString] || colorString
}
```

그러나 다른 프로젝트에서 아래와 같은 에러가 발생했다.

```javascript
// Element implicitly has an 'any' type because index expression is not of type 'number'.
return GlobalColorSet[colorString] || colorString
```

파라미터로오는 `colorString` 이 enum의 키가 아닐 수도 있기 때문에 발생하는 에러 였다. 기존 lint 룰에서는 any를 accept했기 때문에 에러가 발생하지 않았던 것이다.

## 해결

`as` 키워드를 써서 문제를 해결했다.

```typescript
function GetGlobalColor(colorString: GlobalColors | string) {
  return GlobalColorSet[colorString as GlobalColors] || colorString
}
```

## 타입 단언

타입스크립트의 타입 추론은 매우 좋고 강력한 기능이지만, 어쩔수 없이 한계가 존재하는 경우가 더러 있다. 이를 보완하기 위해, 타입 단언은 컴파일러가 실제 런타임에 존재할 변수와 다르게 추론하거나, 너무 보수적으로 추론하는 경우에 개발자가 수동으로 컴파일러에 대해 타입의 힌트를 주는 것이다.

위의 코드로 돌아와 보자.

```typescript
enum ConstGlobalColorSet {
  Red = '11, 11, 11',
  Blue = '22, 22, 22',
  Green = '33, 33, 33',
  Black = '44, 44, 44',
}
```

위코드는 컴파일을 거치고 나면 다음과 같이 해석된다.

```javascript
var ConstGlobalColorSet
;(function (ConstGlobalColorSet) {
  ConstGlobalColorSet['Red'] = '11, 11, 11'
  ConstGlobalColorSet['Blue'] = '22, 22, 22'
  ConstGlobalColorSet['Green'] = '33, 33, 33'
  ConstGlobalColorSet['Black'] = '44, 44, 44'
})(ConstGlobalColorSet || (ConstGlobalColorSet = {}))

// {Red: "11, 11, 11", Blue: "22, 22, 22", Green: "33, 33, 33", Black: "44, 44, 44"}
```

당연하지만 `Red` `Blue` `Green` `Black`에 대해서는 올바르게 리턴할테지만, 다른 string에 대해서는 null을 리턴할 것이다. 즉, 컴파일 에러가 날 일은 없을 것이다. 이런 경우, `as` 키워드를 통해서 타입단언을 해주면 컴파일 에러 없이 사용할 수 있다.

대부분의 경우 `as any`와 같은 치트키로 컴파일 문제를 해결할 수 있다. 그러나 이런 키워드가 득실 거릴수록 타입스크립트로 얻을 수 있는 장점이 사라지기 때문에, 가능한 적게 사용해야 한다.

## 타입선언과 타입 캐스팅의 차이

**타입 단언은 런타임에 영향을 미치지 않는다. 그러나 타입 캐스팅은 컴파일 타임과 런타임 모두 타입을 변경 시킨다. 타입 단언은 컴파일러에서만 타입을 변경 시킨다**

타입 단언은 두가지로 사용될 수 있다.

```typescript
;(colorString as GlobalColors) < GlobalColors > colorString
```

`<Type>`은 리액트의 JSX 문법과 겹치는 느낌이 있어서 보통 `as type`을 더 많이 쓴다.

## 타입 가드

타입 가드는 타입스크립트 컴파일러에 타입 체크를 알려주는 기능이다. 자바스크립트에서는 이런 느낌으로 처리했을 것이다.

```javascript
function doSomething(x: number | string) {
  if (typeof x === 'string') {
    // string 만 들어오게 처리 해줬기 때문에 에러가 날 수 없음
    console.log(x.substr(1))
  }
  x.substr(1) // 에러 날 수도 있음
}

class Foo {
  foo = 123
  common = '123'
}

class Bar {
  bar = 123
  common = '123'
}

function doStuff(arg) {
  if (arg instanceof Foo) {
    console.log(arg.foo) // OK
    console.log(arg.bar) // undefined
  }
  if (arg instanceof Bar) {
    console.log(arg.foo) // undefined
    console.log(arg.bar) // OK
  }

  console.log(arg.common) // OK
  console.log(arg.foo) // undefined?
  console.log(arg.bar) // undefined?
}

doStuff(new Foo())
doStuff(new Bar())
```

이를 타입스크립트에서 처리하려면 어떻게 해야할까?

```typescript
interface A {
  x: number
}
interface B {
  y: string
}

function doStuff(q: A | B) {
  if ('x' in q) {
    // q: A
  } else {
    // q: B
  }
}
```

`in`키워드를 사용하거나 아래 처럼 `is`키워드를 사용할 수도 있다.

```typescript
interface Foo {
  foo: number
  common: string
}

interface Bar {
  bar: number
  common: string
}

/**
 * arg를 Foo라고 타입 가드를 선언
 */
function isFoo(arg: any): arg is Foo {
  return arg.foo !== undefined
}

function doStuff(arg: Foo | Bar) {
  if (isFoo(arg)) {
    console.log(arg.foo) // OK
    console.log(arg.bar) // Error!
  } else {
    console.log(arg.foo) // Error!
    console.log(arg.bar) // OK
  }
}

doStuff({ foo: 123, common: '123' })
doStuff({ bar: 123, common: '123' })
```


타입스크립트 타입 단언

[원문-reactjs-interview-questions](https://github.com/sudheerj/reactjs-interview-questions)

[1. Core React](/2019/08/13/reactjs-interview-questions-1/)

[2. React - Router, Internationalization, Redux, Native and supported libraries and Integration](/2019/08/21/reactjs-interview-questions-2/)


[원문-reactjs-interview-questions](https://github.com/sudheerj/reactjs-interview-questions) [1. Core React](/2019/08/13/reactjs-interview-questions-1/)  [2. React - Router, Internationalization, Redux,...

Javascript 42

브라우저 히스토리 조작

리액트 면접 질문 모음 (2)

리액트 면접 질문 모음 (1)

타입스크립트 타입 단언

리액트 면접 질문 모음