[취업준비일지] - 3

1.컴포넌트에 제네릭을 사용하려면 [React를 react에서 import한 후 // 이 부분은 리액트 환경에서는 생략해도 무방하다] type 부분에 React.FC로 제네릭 타입 선언을 할 수 있으며 <{items : string[]}> 형태를 React.FC 오른쪽에 추가해 제네릭 내부 타입의 형태를 지정할 수 있다.

이런 형태로 컴포넌트에 형태를 지정할 경우 상위 컴포넌트에서도 하위 컴포넌트에 props를 넘겨주지 않은 경우 경고표시가 뜨며 해당 type 체크 기능도 있다.


2.Form을 사용할 경우 해당 Form을 관리할 함수의 event에는 React.FormEvent type을 설정해줘야한다.


3.input type은 <HTMLInputElement>를 사용해야 하고 
useRef 또한 type을 지정해서 사용해야 하기 때문에 
input에 사용하려면 위에서 언급된 <HTMLInputElement>를 type으로 지정해야 한다.
또한 초기값이 없으면 문제가 발생할 수 있기 때문에 useRef<"type">(null)을 통해 초기값을 넣어줘야 한다.


4.ref를 사용할 경우 일반적으로 ?가 붙는 모습을 볼 수 있는데 해당 값은 실행되고 난 시점에서 들어가는 경우가 대부분이기 때문에 실행되기 전에는 type을 확신할 수 없다는 typescript의 알림으로 만약 다른 곳에서 함수를 이용하지 않고 
제대로 통제되고 있는 상황이라면 !를 통해 본인이 지정한 type의 값만 들어간다는 것을 알려줄 수 있다.


5.함수를 props로 받아올 경우 함수의 type을 설정하는 부분은 조금 더 까다로운데
입력, 출력을 모두 신경써야 한다. 
만약 출력값이 없는 경우 또는 입력값이 없는 경우는 void로 type을 지정할 수 있다.


6.click event의 경우 함수의 매개변수 위치에 type을 React.MouseEvent로 지정해줘야한다.


7.저번에 언급된 적이 있지만 setState를 사용할 경우 setState((el) => {return el.filter(a => a !== id)})형식으로 사용해줘야 즉각 반영된다. 형태를 잘 기억해두자



8.json setting 중 strict 모드 true/false에 따라 여러 검증 기능이 활성화되는데
이중 가장 크게 느껴지는 차이는 strict true 상태에서는 추론으로 설정된 type을 제외한 묵지석인 any type설정은 허용되지 않고 any type을 원한다면 직접 any로 설정해야 한다.


9.insertion sort(삽입 정렬)은 단계적으로 포인터를 뒤로 이동하며 해당 값을 앞에 끼워넣는 방식으로 진행된다.

만약 제일 큰 숫자라면 자리의 이동이 없기 때문에 최적의 경우 O(N)의 시간복잡도를 가지고 있어 효율인 부분이 있다.

그렇기 때문에 insertion sort와 merge sort를 합해 만든 tim sort는 둘의 장점을 고루 가지고 있다.(그렇기 때문에 sort는 잘 몰라도 JS는 문제없다..?)

하지만 단일로 사용하기에는 다른 bubble, selection sort와 같이 O(N^2)의 시간복잡도를 가지고 있기 때문에 정렬이 거의 되어있는 상황이 아니라면 효과적이지는 않다.


10.TRACE라는 경로 조사 메서드가 있지만 보안상 문제와 실질적으로는 거의 쓰지 않는 메서드기 때문에 이 책에서 처음 본 것 같다.
오리진 서버에 접속할 때 그 동작을 확인하기 위해 사용되며
재귀나 for문의 횟수 지정처럼 Max-Forwards에 number값을 넣어주면 0이 될 때까지 진행해 (2인 경우 3번 이동) 도착 지점에서 response를 보낸다.


11.CONNECT라는 메서드는 프록시에 터널링을 하겠다는 요청을 보낸 후 응답을 받은 경우 터널링을 진행하기 위해 사용된다.



(1).백준 2476번 주사위 게임은 주사위가 더블,트리플일 경우 해당 숫자에 보너스 포인트를 더해 점수를 계산하고 단일로 3가지가 나온 경우 최대값에 100을 곱하는 방식으로 제일 높은 값을 구하는 문제였다.
여기서 조금 더 업그레이드 하자면 해당 주사위를 굴린 사람의 이름이 같이 나온 다음 최고 득점자의 포인트와 득점자를 같이 출력하는 방식이 있다.

let input = `3
3 3 6
2 2 2
6 2 5`.split('\n').slice(1)

let max = 0
for(let i = 0 ; i < input.length ; i++){
    let [a,b,c] = input[i].split(' ').map(Number)
    if(a === b && b === c){
        max = Math.max(max,a*1000 + 10000)
    }
    else if( a === b || a === c){
        max = Math.max(max,a*100 + 1000)
    }
    else if(b === c){
        max = Math.max(max,b*100 + 1000)
    }
    else{
        max = Math.max(max, Math.max(a,b,c)*100)
    }
}
console.log(max)