binilog.log

브라우저 렌더링 최적화

Mon, 02 Jan 2023 13:23:22 GMT

Browser rendering optimization

javascript: JavaScript로 시각적 변화가 트리거되는 작업을 처리하는데 사용 style: css rule을 어떤 요소에 적용할지 계산하는 프로세스 layout: 요소가 화면에서 얼마의 공간을 차지하고 배치되는지 계산하는 작업 paint: 픽셀을 채우는 프로세스로, 다수의 layer에서 수행 composite: 그려진 여러 layer를 가지고 page를 그리는데 정확한 순서로 화면에 그리는 합성 과정

60fps (60 tiems a second)란?

각 기계마다 1초에 몇 프레임이 그려지는지를 표현하는 단위

한장을 그릴 때 1초 (1000ms/60) = 16.6ms안에 브라우저가 표현되어야 한다. 브라우저에서 그리지 못할 경우 애니메이션이 끊겨서 보여지는 현상이 나타난다.

위 모든 단계를 16.6ms안에 그래서 불필요한 과정은 생략하고 압축해서 수행해야 하는것이 기본적인 최적화이다.

[크롬 브라우저 Rendering Path]
- Recalculate Style
- height 속성 변경으로 좌표 계산이 필요한지?
- 필요하다면 layout발생(reflow)
- 효과적인 처리를 위해 update layer tree
- 계산된 영역 정보를 비트맵으로 저장하기 위해 paint 발생
- composite layer 작업에서 레이어를 병합 후 화면을 출력

이러한 애니메이션 동작을 위해서는 16.6ms내에 처리되어야 한다.

[layoer 모델]

웹 페이지를 렌더링하기 위해 필요한 이미지 단위 요소이다.

레이어들을 배치/합성하여 최종적인 웹 페이지를 표현한다.
모든 페이지를 root레이어를 가진다.
레이어의 이미지는 텍스처로서 paint작업시 CPU에 의해서 Video Memmory에 로드된다.
결국 레이어 생성 비용이 크고 추가 memory가 필요하게 된다.

마치 층 처럼 움직이는데 기존의 process와 별개로 하나의 레이어가 특정한 레이어 층과 만났을 때 생성되는 것이다. 레이어 트리거: 어떤 특정 프로퍼티

transform이라는 css property를 만들게 되면 레이어를 새롭게 만들라는 트리거로 작용하게 된다.

결국은 웹 브라우저화면에서 기존의 렌더링 프로세스와 별개로 또 하나의 화면이라 부를수 있다. 어떠한 화면을 렌더링 할 것인지 병합하는 과정이 composite layer이다.

브라우저 렌더링 프로세스들이 어떤 장치가 수행하는 것일까? 더 빠른 렌더링을 위해 렌더링 최적화 작업이 필요하다.

script가 들어왔을 때 CPU에서는 Recalculate style을 수행한다. 레이어를 업데이트 -> 메인 메모리 저장 -> 페인트 GPU안에서 연산을 한다. Composite Layer

연산 능력보다 GPU가 더 빨리 연산을 할 수 있다. Composite layer가 연산 비용이 더 적다. 같은 dom을 조작시키는 상태에서 cpu조작보다 GPU조작을 하는 것이 비용적으로 더 적게 드는 것이다.

어떻게 하면 성능을 개선할 수 잇는지에 대한 대답은 RAYPER와 PAINT를 최

✔️ 참고

https://youtu.be/G4eQziVzCTE

vue router(2)_404, 중첩 라우팅

Mon, 02 Jan 2023 13:19:58 GMT

NotFound route 설정하기

동적으로 라우트를 설정할 때 잘못된 경로로 중첩이 들어갈 경우 정규식을 사용해서 무엇이든 일치시킬 수 있다.

{
    path: "/:catchAll(.*)",
    // 함수로 보이지만 정규식 패턴임
    // 잡히지 않는 모든 경로를 포함한다는
    name: "NotFoundPage",
    component: NotFoundPage,
},

{ 
  path: '/:pathMatch(.*)*', 
  name: 'NotFound', 
  component: NotFoundView 
},

Nested 사용 방법

router.replace

예시)


  Nested One

router.push메소드에 replace: true 속성을 추가하여 동작한다. replace: true로 설정할 경우 해당 route는 현재 항목을 대체하는 용도로 쓰인다.

[router.replace & router.push와 차이점] 서로 같은 역할을 하지만 router.replace는 새로운 히스토리 항목에 추가하지 않고 탐색한다.

https://v3.router.vuejs.org/kr/api/#router-link

브라우저 렌더링 과정_(2)

Sun, 01 Jan 2023 17:40:06 GMT

[html 파싱 DOM 생성] 브라우저의 요청에 의해서 서버가 응답한 HTML문서는 문자열로 이루어진 텍스트이다. 해당 텍스트 문서를 브라우저에 시각적으로 렌더링을 하기 위해서는 브라우저가 이해할 수 있는 자료구조로 변환을 해야 한다.

브라우저 렌더링 엔진은 HTML문서를 파싱하여 브라우저가 이해할 수 있는 자료구조 (DOM)을 생성한다.

rendering engine working process

하나의 렌더링 엔진 과정을 알아보자 렌더링 엔진은 URI를 통해 요청을 받아 해당하는 데이터를 렌더링 하는 역할을 한다. 크롬의 경우 webkit이라는 렌더링 엔진을 사용한다.

[render tree] 렌더링을 위한 트리 구조의 자료구조이다. 브라우저 화면에 렌더링 되지 않는 NODE(script, meta tag등)와 display:none등 node들은 포함되지 않는다. 렌더 트리는 브라우저 화면에 렌더링 되는 노드로만 구성된다. 완성된 렌더트리는 페인팅 처리에 의해 입력되게 된다.

[rendering engine 동작 과정] 렌더 트리를 구축 -> 배치 -> 그리기 파싱 된 HTML는 결과적으로 render tree를 구축하게 된다. render tree는 배치를 하고 최종적으로 브라우저에 표시되는 글자와 이미지 등으로 그려지게 된다.

DOM tree 구축 HTML, css, javascript 파싱한다. html문서 컨텐츠 내부의 태그들을 DOM node(Document Object Model) 이라는 하나의 요소로 변환시킨다. css파일도 함께 모든 스타일 요소들을 parcing하여 스타일 규칙이 적용된 DOM Node는 최종적으로 렌더 트리(render object)를 생성하게 된다.

render object로 바꾼다는 표현이 더 정확한다.

render tree 구축 html,css를 파싱해서 만들어진 DOM tree는 render tree로 바뀌게 된다. 색상, 면적, 시각적 속성을 갖는 사각형을 포함한다.
render tree 배치 render object는 DOM object가 변환된 것이다. DOM Node가 배치 정보를 갖고 있기에 각각 그려질 위치 정보를 갖고 있다. 그래서 각 요소들은 브라우저의 화면의 배치 정보에 배치되게 된다.
render tree 그리기 각 node를 돌아다니면서 paint작업을 진행하게 된다.

DOM tree는 Dom Node라는 자식 요소들로 구성되어 있다. DOM tree가 다 구성된 후 렌더 트리가 생성되는 것이 아닌 각각의 요소들이 새로 생성되고 업데이트 될 때마다 render object로 전달된다. 바로 바로 변환되게 되는 것이다.

즉, DOM tree가 완벽히 완성될 때까지 화면이 안보이는 것이 아닌 DOM tree가 완성되는 중간중간 render tree 구축, 배치, 그려지게 되는것이다.

webkit 동작 과정

DOM tree => render tree => 그리기

html 파싱하여 DOM tree 생성 html 태그를 파싱을 하면 DOM tree(DOM node가 tree 형태로 바뀐 모습)가 생성되게 된다. html은 마크업 랭귀지로써 정보를 표시하는 역할만 할 수 있기에 정보가 동적으로 움직이는 프로그래밍 언어로 동작은 불가능하다. 그래서 html을 Dom tree로 변환하게 되면 javascript와 상호작용하여 해당 정보들은 동적으로 움직일 수 있게 된다.

HTML을 DOM tree로 변경하게 되면? 버튼을 누르면 버튼기능 등의 사용자와 상호작용이 가능하게 된다.

[script태그는 왜 하단에 위치하는 것일까?]

1.

username.name을 여러개 사용해야 한다면?

username.name을 직접 return 시키면 되지 않나? 정답은 No! 직접 속성값을 전달하게 되면 반응성을 잃게 된다. (상태 변화에 대한 감지가 불가능하게 된다는 말)

ref

데이터의 형태를 object가 아닌 단일 값으로 보내고 싶을 때

일반적인 javascript 형태일 경우의 형태로 입력을 했을 때 isHansome의 값이 바뀌어도 isNotUgly값은 바뀌지 않는다. vue에서는 isNotUgly값 또한 변화를 기대하기에 반응성을 주입을 시켜줘야한다.

단일의 값인 경우는 ref를 이용할 수 있다. 더 다양한 데이터는 reative를 사용해서 보낼 수 있다.

reactive({})

toRefs()

object형태로 값을 보내기때문에 스프레드 연산자를 이용해서 전달해야한다.

vue beiginner

Sat, 24 Dec 2022 16:06:25 GMT

template refs

javascript로 dom을 핸들링 할 경우



export default {
    name: "App",
    components: { Modal },
    data() {
        return {
            title: "My First Vue App",
        };
    },
    methods: {
        handleClick() {
            console.log(this.$refs.boo);
            this.$refs.boo.classList.add("active");
            this.$refs.boo.focus();
        },
    },
};

style의 scoped & global



    
        Hello vue
            mouseOver
            mouseLeave
            double click
            
                position - {{x}} {{y}}

//app.js
const app = Vue.createApp({
    data() {
        return {
            x: 0,
            y: 0,
        };
    },
    methods: {
        handleEvent(event, data) {
            console.log(event, event.type);
            if (data) {
                console.log(data);
            }
        },
        handleMouseMove(e) {
            this.x = e.offsetX;
            this.y = e.offsetY;
        },
    },
});

app.mount("#app");

v-for

//index.html

  
      
          {{book.title}}
          {{book.author}}


//app.js
const app = Vue.createApp({
    data() {
        return {
            showBooks: true,
            books: [
                {
                    userId: 1,
                    title: "AAAAA",
                    author: "as23",
                    age: "123456",
                },
                {
                    userId: 2,
                    title: "BBBB",
                    author: "h5jdd",
                    age: "123456",
                },
                {
                    userId: 3,
                    title: "CCCCC",
                    author: "2dhbs",
                    age: "33333333",
                },
                {
                    userId: 4,
                    title: "DDDDD",
                    author: "bacasd",
                    age: "222222222",
                },
                {
                    userId: 5,
                    title: "EEEEE",
                    author: "asdfasdf",
                    age: "111111111",
               }
            ],
        };
    },
    methods: {
        toggleShowBooks() {
            this.showBooks = !this.showBooks;
        },
    },
});

app.mount("#app");

속성 데이터 바인딩

Dynamic class

미리 클래스 이름에 스타일을 지정해 놓고 조건에 맞추어 해당 클래스 적용을 시킬 때 사용한다.

방법1. 객체

v-bind: calss  = "{클래스 이름: 조건}"
or
:calss = "{클래스 이름: 조건}"

//index.html
 
  
    
        
        {{book.title}}
        {{book.author}}

computed property

//index.html

  
  {{book.title}}
  {{book.author}}



//app.js
computed: {
    filterdBooks() {
        return this.books.filter((book) => book.isFav);
    },
},

연산자를 이용한 타입 정의

Mon, 05 Dec 2022 18:45:28 GMT

union type

|를 사용한다.

function logMessage( value:any) {
    console.log(value)
}

logMessage('hello')
logMessage(100)
logMessage(false)

any를 사용하면 어떤 타입이건 넣을 수 있다. 하지만 이렇게 사용하면 타입을 사용하는 의미를 잃게 된다.

function logMessage( value:string | number) {
    console.log(value)
}

logMessage('hello')
logMessage(100)

|| or연산자를 썼을 때의 파이프를 하나 추가해준다. 문자열과 숫자 모두 동일하게 받아서 사용할 수 있게 된다.

장점

타입 가드: 특정 타입으로 타입의 범위를 좁혀나가는 과정(필터링시켜줌)

타입 구분 후 api를 쉽게 접근할 수 있다.

var soso: string | number | boolean
const logMessage2 = (value: string | number) => {
    if( typeof value === 'number'){
        value.toLocaleString()
        // number에 대한 속성을 바로 쓸 수 있다.
    }
    if(typeof value ==== 'string'){
        // string에 대한 속성을 쓸 수 있다. 
    }
    //string과 number가 아닌 타입에 대해 에러를 만들 수 있다.
    throw new TypeError('value must be string or number')
}
logMessage('hello')
logMessage(222)

특정 변수나 파라미터에 한가지 이상의 타입을 사용하고 싶을 때 활용한다. 위 코드처럼 매개변수로 string과 number를 받고 있다.

if문안의 value는 해당 타입에 적용되는 메서드들이 표시가 된다. any를 사용할 경우는 (타입스크립트가 추론하는 시점에) 타입을 정의할 수 없어서 api나 속성들을 볼 수가 없다.

그 외에 string과 number가 아닌 타입에 대해서는 에러를 발생시킬 수 있다.

특징

유니온 타입은 인터페이스를 여러개 뒀을 때 공통된 속성만 접근할 수 있다.

interface Developer{
    name: string,
    skill: string
}
interface Person{
    name: string,
    age: number
}
const who = (someone:Developer | Person) => {
    someone.name
    someone.skill //사용불가
    someone.age //사용불가
    }

someone.을 치면 name만 표시가 된다. 왜일까? 타입스크립트 관점에서는 someone이 어떤 값이 올지 모른다. 타입 검증도 없이 사용하게 된다면 코드상의 에러가 날 수 있다고 추측하게 된다. 그래서 interface나 type처럼 여러개의 구조체를 사용할 경우에는 보장된 공통된 속성만을 사용할 수 있게 해놨다.

그렇다면, age와 skill을 사용하고 싶을 땐 어떻게 해야할까? 유니온 타입의 장점에서 살펴봤던 타입가드를 활용해서 특정 타입으로 제한을 둔 후의 로직을 활용해야 한다.

Intersection type

'&' 연산자 인터섹션 타입

타입을 모두 만족하는 타입

사진처럼 타입이 never로 표시된다. string이면서 number이면서 boolean인 하나의 타입을 말한다.

[함수 내부에서 사용할 때] 유니온 타입을 사용했을 때 구조체를 여러개 사용했을 경우에는 공통 속성외 속성을 사용하기 위해선 타입에 대한 추가적인 처리가 필요했었다. 하지만, 인터섹션타입을 활용한 함수안에서 someone.을 치게되면 name, skill, age 모두 사용할 수 있게 표시가 된다.

인터섹션과 유니온타입의 차이점

함수를 호출할 때 두가지의 차이점을 확인하자.

//union

interface Developer{
    name: string,
    skill: string
}
interface Person{
    name: string,
    age: number
}

function askSomeone(value: Developer | Person){

}

askSomeone({name:'빈', skill: 'typescript'}) //Developer타입
askSomeone({name:'므앙고', age:  100}) //Person타입

유니온 타입을 사용한 함수는 호출 시에 인자 값으로 Developer 이거나 Person을 주면 된다.

//intersection

interface Developer{
    name: string,
    skill: string
}
interface Person{
    name: string,
    age: number
}


function askSomeone(value: Developer & Person){

}
askSomeone({name:'빈', skill: 'typescript'}) //에러
askSomeone({name:'빈', skill: 'typescript', age:  100})

인터셉션을 사용한 함수의 호출 관점으로 보면 Developer & Person 속성을 모두 합한 모습이 인자로 들어와야 한다. Developer | Person의 속성을 모두 합친 하나의 타입이라고 보면 된다.

ts 함수 매개변수의 속성 타입

Sat, 03 Dec 2022 16:54:16 GMT

아래 예문에서 함수는 object[]를 타입이다. 매개변수도 타입을 정의해줬는데, 함수 내부에서 파라미터의 속성의 타입이 없다는 에러를 발견했을 때의 오류는 어떻게 해결해야 할까?

parameter의 타입이 object일 때

let todoItems: object[];

function completeTodo(index:number, todo:object):void {
  todo.done = true;
  todoItems.splice(index, 1, todo);
}

todo.done의 부분 done이 빨간 밑줄이 생기는데 속성의 타입이 없다고 한다. 이럴때는 객체의 형태를 구체적으로 타입을 정의해줘야 한다.

let todoItems: {{id:number, title: string, done: boolean}}[];

function completeTodo(index:number, todo?:{id:number, title: string, done: boolean}):void {
  todo.done = true;
  todoItems.splice(index, 1, todo);
}

이제 중복되는 코드 부분을 정리해보자

let todoItems: {
  id:number
  title: string
  done: boolean
}[];

todoItems의 object부분은 다른 함수에서도 매개변수나 반환값으로도 쓰이고 있다. 이럴때는 타입별칭을 사용해서 타입을 먼저 선언해 준다.

type Todo = {
  id:number
  title: string
  done: boolean
}


let todoItems: Todo[];

Todo를 선언하고 사용하는 곳에 Todo라고 타입을 지정해주면 된다. 또는 interface를 사용한다.

interface는 타입스크립트에서 가장 핵심이다. 이제 Todo라는 값을 이용해서 중복되는 부분을 줄여나갈 수 있다.

interface란?

인터페이스는 반복되는 타입에 대해서 하나의 interface를 만들고 사용한다. 동일한 규칙을 쓰겠다는 상호간의 약속을 의미한다.

객체의 스펙(속성과 속성의 타입)
함수의 파라미터
함수의 스펙(파라미터, 반환 타입)
배열과 객체를 접근하는 방식
클래스

[객체 속성과 속성의 타입]

// bin라는 변수는 User라는 interface를 받는다. 
// interface User는 객체의 스펙이 정의됨

interface User{
    name: string
    age: number
}

const bin : User = {
    age: 33,
    name: '비니'
}

함수의 파라미터에 인터페이스 활용 함수의 인터페이스를 활용할 때 파라미터에 정의를 확인하고 함수 호출시 인자가 파라미터에 정의한 인터페이스의 규칙에도 맞는지 확인한다.

아래 getUser()함수는 User의 인터페이스를 가져야한다.

function getUser(user:User) {
    console.log(user)
}


// const capt = {
//     name: 'bin'
// } error
const capt = {
    name: 'bin',
    age: 33
}
getUser(capt)

[함수 구조에 인터페이스 활용]

함수의 전체적인 모습도 인터페이스로 정의할 수 있다.

const sumFun ={
    (a: number, a:number):number
}


//화살표 함수로 사용했을 때
const sum = (a, b):sumFun => {
    return a + b
}

//or
let sum: sumFun
sum = function(a, b){
    return a + b
}

// 위 함수는 이런 모습이다.
sum = function(a:number, b:number):number{
    return a + b
}

[배열에 인터페이스 활용]

인덱싱 방식을 정의하는 인터페이스

interface stringArr {
  [index: number]: string
  // 배열에 접근하는 방식
}

const arr:stringArr = ['a', 'b'] arr[0] = 10 //stringArr에 맞지 않음

stringArr는속성은 이름이 정해져 있지 않다. 
(위에서는 임의로 index라고 넣어줌)


배열에 대한 정의를 []괄호 안에 넣고, 해당 속성의 타입을 지정해 줄 수 있다. 


- 인터페이스 딕셔너리 패턴
인덱싱과 유사하다. 해당 key에 대한 타입과 속성에 대한 타입을 interface에 정의해준다.

interface StringRegexDictionary{ [key: string]: RegExp // [속성의 이름: 속성 타입]: }

// 정규식을 갖고 있는 객체 생성 const obj: StringRegexDictionary = { // cssfile: 'css' 정규식이 아니기에 error발생

cssfile: /\.css$/,
jsfile: /\.js$/

}


장점?  
obj에 있는 key만 forEach로 돌렸다. value는 모두 string 타입이다. 타입스크립트가 자동으로 추론을 해준다.

Object.keys(obj).forEach((value) => { console.log(value) //string })


만일 객체에 접근했을 때 정해놓은 인터페이스에 어긋날 경우를 바로 캐치할 수 있다.

obj['cssfile'] = 'a' //RegExp타입이 아니라 오류가 나옴



**[인터페이스 확장]**

oop, js prototype 마찬가지로 기존의 interface를 확장해서 사용한다는 개념

interface Person2 { name: string age: number }

// interface Developer { // name: string //중복 // age: number //중복 // language: string // }

interface Developer extends Person2{ language: string }

- extends 키워드를 사용
확장을 하려고 할 때 이미 다른 인터페이스에 있는 속성이 중복될 경우에는 
갖고 있는 속성과 타입에 대해 상속을 받아서 사용할 수 있다.

const newPerson: Developer = { name: 'lili' } //에러 발생

const newPerson: Developer = { name: 'lili', age: 33, language: 'ts' }

```

확장한 인터페이스로 객체를 선언 만약 하나의 속성만 사용하게 되면 인터페이스 오류가 나게 된다. Person과 Developer의 타입들을 모두 정의 해줘야 하는것이 인터페이스 확장의 규칙이다.

타입스크립트_class

Fri, 18 Nov 2022 07:33:51 GMT

//class 다루기

class Car {
   color:string
   constructor(color:string){
      this.color = color
   }
   start(){
      console.log("start")
   }
}

const bmw = new Car("red")

타입스크립트에서 클래스를 작성할때 멤버변수는 미리 선언해줘야한다.

class Car {
   //color:string
   constructor(public color:string){
      this.color = color
   }
   start(){
      console.log("start")
   }
}

const bmw = new Car("red")

멤버변수를 사용하지 않을 때는 readonly나 public 키워드를 적어준다.

접근 제한자(access modifier)

[public, private, protected]

ES6의 클래스는 다른 객체지향언어처럼 접근 제한자를 지원하지 않았다. 하지만, 타입스크립트는 접근 제한자를 지원한다.

[public]: 자식 클래스나 클래스 인스턴스 모두 접근 가능하다. 아무것도 표기하지 않고 작성하면 모두 public이다. [private]: 해당 클래스 내부에서만 접근 가능. [protected]: 자식 클래스에서 접근 가능, 클래스 인스턴스는 참조 불가

[public]

//class 다루기

class Car {
   public name: string ="car" //public 명시 안해줘도 됨
   color:string
   constructor(color:string){
      this.color = color
   }
   start(){
      console.log("start")
   }
}


//Car 클래스를 상속받은 Bmw
class Bmw extends Car{
   constructor(color:string){
      super(color)
      //super를 호출하지 않으면 에러가 발생한다.
   }
   showName(){
      console.log(super.name) //Car의 name이 public이기에 자식클래스에서 사용해도 문제가 없다.
   }
}


const z4 = new Bmw("black")

[private]

class Car {
   private name: string ="car"
   color:string
   constructor(color:string){
      this.color = color
   }
   start(){
      console.log("start")
      console.log(this.name)
   }
}


class Bmw extends Car{
   constructor(color:string){
      super(color)
   }
   showName(){
      console.log(super.name) //에러발생
   }
}

const z4 = new Bmw("black")

private일 경우 자식 클래스에서 name을 사용할 수 없다.

class Car {
   #name: string ="car"
   color:string
   constructor(color:string){
      this.color = color
   }
   start(){
      console.log("start")
      console.log(this.#name)
   }
}


class Bmw extends Car{
   constructor(color:string){
      super(color)
   }
   showName(){
      console.log(super.#name) //에러발생
   }
}

const z4 = new Bmw("black")

private대신 #으로 사용할 수 있다.

[protected]

//class 다루기

class Car {
   protected name: string ="car"
   color:string
   constructor(color:string){
      this.color = color
   }
   start(){
      console.log("start")
      console.log(this.name)
   }
}


//Car 클래스를 상속받은 Bmw
class Bmw extends Car{
   constructor(color:string){
      super(color)
      //super를 호출하지 않으면 에러가 발생한다.
   }
   showName(){
      console.log(super.name) 
   }
}


const z4 = new Bmw("black")
console.log(z4.name) //error발생

protected는 자식 클래스 내부에서는 참조할 수 있다. 하지만 클래스 인스턴스에는 참조할 수 없다.

타입스크립트_리터럴, 유니온/교차 타입

Wed, 16 Nov 2022 12:56:11 GMT

literal types

const userName1 = "Bob"
let userName2 = "Tom"

let은 변할 수 있기에 마우스를 올리면 type이 string으로 표시된다. const는 변할 수 없는 값이기에 Bob 이외의 값을 가질 수 없다.

let userName2 = "Tom"
let userName2: string | number = "Tom"
userName2 = 3

userName2은 최초 할당된 값이 string이 였지만 타입이 다른 값을 추가하고 싶다면 type을 선언해준다.

[type을 통해서 enum 비슷한 형태를 만들 수 있다. ]

enum: 열거형으로서 비슷한 값들끼리 묶어준다.
```
type Job= "police"  | "developer" | "teacher"
```

interface User{ name:string, job: Job }

const user: User = { name: "Bob", job: 'police' }

---
### 유니온타입
||을 의미한다.
동일한 속성을 타입을 다르게해서 구분할 수 있게 도와주는것이 식별 가능한 유니온 타입이라고 한다.

interface Car{ name: "Car" color: string start(): void } interface Mobile{ name: "mobile" color: string call(): void }

function getGift(gift: Car | Mobile){ console.log(gift.color) //둘다 갖고있기에 color는 나옴 if(gift.name === "Car"){ //먼저 확인 gift.start() }else{ gift.call() } }

gift는 union타입을 사용하여 car 또는 mobile을 받는다. 
동일한 속성의 name을 줬지만 타입을 다르게 줌으로써 두 개의 인터페이스를 구분할 수 있게 된다. 

![](https://velog.velcdn.com/images/dabin-lee/post/a3b33209-f12d-4558-86b6-36e379597c74/image.png)

gift에 마우스를 오버했더니 parameter를 알 수 있다. 

예문에는 if를 사용했지만, 검사해야할 항목이 많아지면 swich를 사용하는게 가속성에 좋다. 



---

### 교차타입
교차타입은 &&를 의미한다.
여러개 타입을 하나로 합쳐주는 역할을 한다.
그래서 필요한 모든 기능을 가진 하나의 타입이 만들어 진다.

interface Car{ name: string start(): void } interface Toy{ name: string color: string price: number }

const toyCar: Toy & Car = { name: "타요", start(){}, color: "blue", price: 1000 }

``` toyCar의 속성은 Toy와 Var의 interface를 모두 가지고 있다. 이럴 경우 두 interface속성을 모두 가지고 있어야한다.

타입스크립트_함수

Wed, 16 Nov 2022 11:31:33 GMT

함수

function add(num1:number, num2:number): void{
    // return num1 + num2 
    console.log(num1 - num2)
}

return이 없을 땐 void를 입력해준다.

function IsAdult(age:number): boolean{
    return age > 19 
}

[선택적 매개변수]

function hello(name:string){
    return `Hello, ${name || "world"}`
}
// name이 있으면 name을 쓰고 없으면 world

const result = hello() //error

${name || "world"}로 대비한 코드가 있지만 error가 발생한다. typescript에선 보다 명시적으로 알려줘야 한다.

▼

function hello(name?:string){
    return `Hello, ${name || "world"}`
}
const result = hello() 
const result2 = hellow("sam")

name에 물음표를 붙여서 있어도 되고 없어도 되는 파라미터를 표시한다. 옵셔널이라고 하더라도 타입은 항상 지켜줘야 한다. undefined이거나 만약에 있다면 string이여야 한다.

사실 javascript에서 매개변수로 default값을 줄 수가 있다.

위에 있는 코드와 같은 모양인것을 확인할 수 있다.

이름과 나이를 받아서 문자열을 출력해준다. 여기서 나이는 optional이다.

function hello(name:string, age?:number): string{
   if(age !== undefined){
    return `hello ${name}. you are ${age}`
   }else{
    return `hello ${name}`
   }
}

주의 name앞에 age가 오면 안된다. 필수 매개변수보다 선택적 매개변수가 앞으로 오게 되면 성립할 수 없는 코드이다.

function hello( age?:number, name:string): string{
   if(age !== undefined){
    return `hello ${name}. you are ${age}`
   }else{
    return `hello ${name}`
   }
}

만약 age를 앞에두고 옵셔널하게 사용하고 싶다면?

function hello(age:number | undefined, name:string): string{
   if(age !== undefined){
    return `hello ${name}. you are ${age}`
   }else{
    return `hello ${name}`
   }
}

console.log(hello(undefined, "sam"))

age를 number와 undefined를 받을 수 있게 한다. 사용시에는 명시적으로 undefined를 나타내줘야 한다.

[restparameter]

restparameter는 개수가 매번 바뀔 수 있다. 전달받은 매개변수를 배열로 나타낼 수 있다.

function add(...num: number[]){
   return num.reduce((result, num) => result + num, 0)
}

add(1, 2, 3)
add(1, 2, 3,4,5,6,7,8,9,10)

[함수에서 this]

interface User {
   name: string
}

const Sam: User = {
   name: 'sam'
}

function showName(){
   console.log(this.name)
}

const aa = showName.bind(Sam)
aa()

bind 메소드로 this를 묶어준다.

Sam이라는 객체는 User의 타입을 갖고 있는 상태 this는 사용하는 방법에 따라 달라지지만, this를 명시해주고 싶을 때는 bind를 통해서 해당 객체와 묶어준다.

[만약 this의 type을 정의해주고 싶을 땐?]
```
function showName2(this:User){
 console.log(this.name)
}
```
매개변수 자리에 this와 타입을 같이 입력해주면 된다.

[만일 매개변수가 있을 경우?]

function showName3(this:User, age:number, gender: 'm'|'f'){
  console.log(this.name, age, gender)
}
const a = showName3.bind(Sam)
a(30, 'f') // "sam",  30,  "f"

[함수 오버로드] 전달받은 매개변수의 개수나 타입에 따라 다른 동작을 하도록 하는 것을 의미한다. 함수위에 똑같은 모습으로 함수를 작성한다.

interface User {
   name: string,
   age: number
}


// number 또는 string을 받을 수 있다. 
// 나이가 숫자가 아닐때 string을 반환
// User혹은 string이 반환됨


function join(name:string, age:string):string
function join(name:string, age:number):User
function join(name:string, age:number | string): User | string{
   if(typeof age === 'number'){
      return{
         name,
         age
      }
   }else{
      return "나이는 숫자로 입력해주세요."
   }
}


// age를 number로 받았을때 User로 받을 수 있다. 
const sam: User = join("sam", 30)

// age가 string일때
const jane: string = join("jane", "31")

useRef를 이용한 이벤트리스너

Wed, 16 Nov 2022 07:17:33 GMT

dom을 직접 선택해야 하는 경우들이 있다.

엘리먼트의 크기를 가져와야 할 때
스크롤바 위치를 가져와야 할 때
엘리먼트에 포커스를 설정 해줘야 할 때 등등

모달 창 외의 부분을 클릭하게 되면 창이 닫히는 이벤트를 만들어 줄것이다. (먼저 modal div에 ref를 설정해준 상태이다)

//main.js

const ref = useRef()
useOnClickOutside(ref, () => { setModalOpen(false) })

함수를 하나 만들자. useOnclickOutside()함수는 ref와 콜백함수를 매개변수로 받고 있다.

import React, { useEffect } from 'react'

export const useOnClickOutside = (ref, handler) => {
    useEffect(() => {
        const listener = (event) => {
            if (!ref.current || ref.current.contains(event.target)) {
                return
            } else {
                handler()
            }
        }
        document.addEventListener("mousedown", listener) 
        document.addEventListener("touchstart", listener)

        return () => {
            document.addEventListener("mousedown", listener)
            document.addEventListener("touchstart", listener)

        };
    }, [ref, handler])
}

왜 useEffect를 했을까?

ref.current의 변화(모달 창 의 안인지? 밖인지?)가 있는것을 감지하고 이벤트를 실행해야 한다.
모달 창의 밖을 클릭한게 맞다면? 콜백 함수를 실행해 줄 것이다.

listener의 함수를 살펴보자. !ref.current : event가 발생했는데 ref가 없을 때 ref.current.contains(event.target): 이벤트의 타겟을 ref가 포함하고 있을 때

(모달 창 안의 내용을 클릭할 때) 이럴 때는 그냥 return을 해준다.

그렇지 않을 경우 handler함수로 이용해 setModatl(false)로 모달 창을 닫아 준다.

[useEffect에서 mount, unMount]

useEffect안에서 마운트가 됐던 컴포넌트의 listner는 return을 통해서 unMount(clear)를 해줘야 한다.

document.addEventListener("mousedown", listener) 
document.addEventListener("touchstart", listener)

타입스크립트_기본타입, interface

Tue, 15 Nov 2022 18:23:01 GMT

Typescript

function showTimes(arr) {
    arr.forEach(element => {
        console.log(element)
    });
}

showTimes([1,2,3]) //1, 2, 3
showTimes(1,2,3) //error 발생

Javascript(동적언어): 실행되는 시점 (런타임)에 타입이 결정되고 오류가 있을 시 그때 처리가 가능하다.

function showTimes(arr:number[]) {
    arr.forEach(element => {
        console.log(element)
    });
}

showTimes([1,2,3]) //1, 2, 3


function showTimes(arr:string[]) {
    arr.forEach(element => {
        console.log(element)
    });
}

showTimes([1,2,3]) //error

Java, TypeScript(정적언어) 컴파일시에 타입이 결정된다. 코드 작성때 시간이 길어지지만, 생각하고 코드를 짠다면 안정적인 로직 작성이 가능하다.

정리하자면, 타입스크립트를 쓰는 이유? javascript에 타입이 추가 된 것이다. 그로인해 코드가 올바르게 작동하는지 확인할 수 있다.

[javascript]
function showTime(arr){
    arr.forEach((item) => {
        console.log(item)
    })
}
showTime([1, 2, 3])
showTime(1, 2, 3)

///1
///2
///3
/// error...

//런타임에서 타입이 결정 됨

[첫번째 예제 확인]

function add(num1:number, num2:number){
    console.log(num1 + num2)
}

//add() 
//add(1)
add(1,2)
//add('hello', 'world')

any타입이였던 인수가 number로 고정이 됐다. 인수의 개수가 맞지 않은 부분과 string의 함수 호출부분이 에러가 표시가 됐다.

함수를 만들 때 의도했던 방식 외에 다른 방법은 모두 에러라고 나온다. 몇개의 인수를 어떤 타입으로 전달해야하는지 일일이 코드를 뒤져볼 필요가 없다.

[두번째 예제 확인]

any: 아무 타입이나 가능하다. 도저히 어떤 타입인지 모를때 사용한다. 하지만 가급적이면 사용을 지양한다.

Expected 1 arguments, but got 3 한개의 인수만 필요한데 3개를 받았다는 에러 메세지이다.

function showTime(arr:number[]){
    // arr: number의 배열을 받음
    arr.forEach((item) => {
        console.log(item)
    })
}
showTime([1, 2, 3])

타입스크립트 기본 타입

원시타입

let car:string = 'bmw'

let age:number = 30
let isAdult:boolean = true
let a:number[] = [1,2,3]
let a2:Array = [1,2,3]

let week1:string[] = ['mon', 'tue', 'wed']
let week2:Array = ['mon', 'tue', 'wed']

week1.push(3)//error

let u:undefined = undefined
let n:null = null

null과 undefined 모든 타입의 하위 타입으로 number 같은 타입에 할당할 수 있다. strickNullChecks를 사용하게 되면 null과 undefined는 오직 any타입과 각자 자신타입에만 할당 가능하다.

참조타입

object, array, tupple

object

타입을 지정해주면 지정된 값들만 넣을 수 있게 만들어야 한다. 타입이 길어질경우 가독성이 많이 떨어지기에 보통 타입을 따로 지정해서 사용한다.

각 타입 지정 방법: Type Alias & Interface, index signature
- type alias: type을 따로 만들어서 사용한다.
- index signature: [key: string] key값에 어떤 타입이 명세될줄 모르나 전부 string으로 타입을 지정하는 방식이다.
- union type: string | number 처럼 여러 타입을 같이 선언한다

[기본형]
let obj: {
    name: string;
    age: number;
} = {
    name: 'dabin',
    age: 22
}

[type alias]
type myType = {
    name: string;
    age: number;
}
let obj: myTpye = {
    name: 'dabin',
    age: 22
}

[Type Alias + Index Signature + Union Type]
type myType = {
    [key: string]: string | number
}
let obj: myTpye = {
    name: 'dabin',
    age: 22
}

Array

javascript처럼 자유롭지 못하다.

[기본형]
let a:number[] = [1, 3, 5]
let b:Array = [4, 6, 7]
let week1:string[] = ['mon', 'tue', 'wed' ]
let week2:Array = ['mon', 'tue', 'wed' ]

week1.push('4')

[배열 다중 타입]

let arr: (string|number)[] = [1, '1']

튜플(Tuple)

배열과 비슷하다. 인덱스별로 타입이 다를 때 사용한다.

//배열의 첫번째 요소에는 string 두번째 요소에는 number을 입력할 수 있음]
let ab:[string, number];
ab = ['z', 1]
ab = [1, 'z'] //error

// 문자 => 숫자 toLowerCase
b[0].toLocaleLowerCase()
b[1].toLocaleLowerCase() //number에는 toLocaleLowerCase가 없음


// void, never

void, never

function sayHello():void{
    console.log('hello')
}

void는 함수에서 아무것도 반환하지 않을 때 주로 사용한다.

function showError():never{
    throw new Error()
}

function infLoop():never{
   while (true){
    //do something...
   }
}

never는 영원히 끝나지 않는 함수나, 항상 에러를 반환하는 함수에서 사용할 수 있다.

enum

열거형으로서 비슷한 값들끼리 묶어준다. 특정값만 입력하게 강조하고 싶을 때 또한 그 값들이 공통점이 있을 때 사용한다.

enum Os{
    Window,
    Ios,
    Android
}

각각 수동으로 값을 할당하지 않으면 자동으로 0부터 1씩 증가되며 값이 할당된다.

enum Os{
    Window,
    Ios = 3,
    Android
}

값을 할당하게 되면 해당 값부터 차례대로 값이 출력되는걸 알 수 있다. window는 건너뛰고 값을주면 window는 0이된다.

console.log(Os[3]) // [LOG]: "Ios"
console.log(Os['Ios']) // [LOG]: 10

컴파일된 결과를 보면 OS라는 객체가 생성되고 양방향으로 내편되어 있다. enum에는 숫자가 아닌 물자도 입력이 가능한데, 이럴때는 양방향이 아닌 단방향 맵핑만된다.

enum Os{
    Window = 'win',
    Ios = 'ios',
    Android = 'and'
}

// 숫자가 아닌 문자열도 입력할 수 있다. 이럴 경우 단방향 맵핑만 된다. 

 let myOs : Os;
 //myOs에는 Os에 있는 window, ios, Android만 사용할 수 있게 된다. 

 myOs = Os.Window //특정값만 입력할 수 있게 할 수 있다.

인터페이스(interface)

let user:object;

user = {
    name: 'xx',
    age: 30
}

console.log(user.name)
//콘솔에 있는 name부분이 빨간줄이 그어진다.

object에는 특정 속성값에 대한 정보가 없기때문에 에러가 발생한다.

interface User{
    name: string,
    age: number,
}

let user2: User={
    name: 'xx',
    age: 30
}

user2.age = 10 

console.log(user2.age)

interface를 통해서 객체의 property를 정의해서 표현해준다.

[property 추가]

interface User{
    name: string,
    age: number,
    gender? : string,
}

있어도되고 없어도 되는 속성을 추가하고 싶을 때는 optional chaining 사용한다. (* optional chaining: 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. )키 값뒤에 ? 를 넣어준다.

interface User{
    name:string,
    age:number,
    gender?: string // 입력을 해도 되고 안해도 되는 속성은 optional을 사용한다.
}

let user: User = {
    name: 'xxx',
    age: 30
}

user.age = 10
user.gender = "male" //error

console.log(user.name)

만약 gender라는 property가 있을 때는 무조건 string이여야 한다.

[readOnly]

값에 접근할 수 는 있지만 수정은 불가능하다.

interface User{
    gender? : string,
    readonly birthYear: number
}

let user2: User={
    age: 30,
    birthYear: 2000
}

user2.birthYear = 1999
console.log(user2.birthYear)

user2.birthYear = 1999를 입력하면 에러가 뜨게된다. 읽기 전용 속성이라 수정할 수 없다.

[문자열 index 속성]

interface User{
    gender? : string,
    age: number,
    readonly birthYear: number
    1? : string;
    2? : string;
    3? : string;
    4? : string;
}

let user2: User={
    age: 30,
    birthYear: 2000,
    1: 'A'
}

학년별로 interface를 정의해줄 수 있다. 하지만, 1학년만 쓰고 싶을 때는 optional chaining 쓸 수 바께 없다.

이럴 경우에 문자열 index 속성을 사용하면 된다.

type Score = 'A' | 'B' | 'C' | 'F'

interface User{
    gender? : string,
    age: number,
    readonly birthYear: number
    //[grade: number] : string
    [grade: number] : Score
}

let user2: User={
    age: 30,
    birthYear: 2000,
    1: 's',  //에러발생 
    2: 'B'
}


// 학년별로 interface를 정의해줄 수 있다.

[grade: number] : string 학년은 숫자로 받음 : 학점은 string number를 key로 하고 string value로 받는 property를 여러개 만들 수 있다.

만약 학점을 String으로 받기에는 범위가 너무 넓은데 이럴 때 사용할 수 있는게 문자 리터럴이다.

type Score = 'A' | 'B' | 'C' | 'F'

이렇게 추가하게 되면 Score의 입력값만을 사용할 수 있다.

[interface로 함수 정의]

interface Add {
    // (num1: number, num2: number): void
    (num1: number, num2: number): number
}

const add : Add = function(x, y){
    return x + y
}
add(10, 20)


interface IsAdult {
    (age:number): boolean
}

const a:IsAdult = (age) => {
    return age > 10
}

console.log(a(7)) //false
console.log(a(11)) //true

[interface로 클래스 정의]

[implements]

interface Car{
  color: string
  wheels: number
  start(): void
}

class Bmw implements Car { color = "red" wheels = 4 }

- error가 발생한다. 속성값을 모두 입력해야 하기때문에 start()의 함수도 같이 정의를 해줘야 한다.