26일)

신나는 6주차의 커리큘럼 !!!
(와씨 타입스크립트쓰다가 맨날 가능한 제네릭이 아닙니다..그놈의 제네릭 제네릭으리아ㅡㄹ아거!!!!1
이랬는데 드디어 배운다 ㅠㅠ!!!!!!!!!!)

- 비구조화할당(= 구조분해할당)

기존에 객체에있는 값을 꺼내올때 간편하게 표현하게 하기 위해 적는 방식이 비구조화 할당 !
중괄호는 객체 안에있는 키값을 빼서 변수로 선언하겠다 !


우리가 함수명()이렇게 썼을때는 항상 리턴값이 있다는거였지,
그 값안에 const ~ 부분이 들어있다는 뜻이었고
밑을 예로들면 (data,loading)으로 받는다는 뜻이었어!
근데 사실, return값을 객체로 받는거면,{}이렇게 객체형태로 안받아도
구조를 분해해서 저렇게 받아도 되겠지(할당해도 되겠지)!
-> aaa로 한번에 받아서,,aaa.data , aaa.loading..

이 3 줄을 한 줄로 줄였구나!

우리 useState()= const [,] 이렇게 썼었지!

setCounter가 바꿔주는 값이었는데, 걔는 바뀌는 함수이니까 counter값을 20으로 바꿔주고 싶다면
setCounter(20)이렇게 쓰는거고, 그래서 bbb[1](20 이라는 말인데! 실제로 이렇게 쓰지는 않는다
구조분해할당을 이해하기위해 이렇게까지 함 생각해보자!

이렇게는 아주쉽지!
리턴값이 객체였기 때문에 우리가 중괄호로 받을수 있었다는것 !

그래서 우리가 data.fetchboards.writer로 뽑아서 쓸수 있었지!
이제 그럼 배열을 봐보자..
우리가 const [,] = useState() 했을때 꼭 ,를 써줘야 했던 이유!

여기서 쉼표를 써주지 않으면 child2에 철수가 들어가게 될거야!

함수를 만드ㅏㄹ고, 앞에것을 뭐로할지 뒤에것을 뭐로할지 이름을 정해조야지
얘도 리턴값이 배열이었기 때문에 이름을 정해주고 배열형태고 받을수 있었던것 !
그래서 원리를 이해하고 보면 이렇게 활용하는부분까지 가능 !

그럼 객체와 배열의 차이가 몬ㄷ ㅔ ?
객체는 - 키값이 중요했지, 키값을 꺼내서 변수로 삼아서 받는거였잖아 ! 얘는 순서는 중요하지않고, 키값이 중요했어
const{age,school} = profile 여기서 age를age로 받아오는거기 때문에 둘이 순서가 바뀌어도 상관없고 이름만 같으면 되었음 !
배열 - 순서가 갱장히 중요하다 ! 순서를 지켜주게끔 하기위해 빈콤마라도 찍어주는만큼,,,
그럼 useState는 왜 배열로?

• 변수이름을 우리가 지어줘야하니까 우리가 받고싶은 값을 원하는 순서에 받을수 있으니까!!

  useQuery는 왜 객체로?

이 객체에서 school만 뽑아서 변수로 만들겠다 ! 해서 함수에서 뽑아온부분..!

배열의 값을 지정해주는 부분 !

배열과 객체의 구조분해할당을 잘 구분해서 기억해놓자 ?

- const {} const []의 차이가 뭐지~

- 객체에서 데이터를 삭제해보자! rest - parameter

이제 지우고 싶을때 우찌하는지 알아보자
근데 사실 쉬워 앞에 delete만 붙이면 댐 !

근데 자바스크립트에서 원본을 건드리는 행위는 좋지 않으니( child가 어디서 쓰일수도 있잔하)
그래서 저렇게 원본을 건드리는건 좋지 않아
money와 hobby만 할당하고 싶을때, 구조분해할당을 하긴하는데!

이렇게 하면돼 나머지 모든애들(name,age,school)을 rest에 담아줘!

그러면 rest안에 내가 원하는걸 지운 애들만 들어가있다 !

물론 rest말고 다른 이름들도 가능하다!

- HOC는 클래스용? ) custom hooks

useRouter, useQuery, useMutation....등등 처럼 우리가
funtion useAaa(){ }
해서 커스텀 훅을 만들수 있어 !
보통 함수안에서 우리가 쓰는 use기능들이 있으면 이름이 useAaa되는거고, 아니라면 그냥 이름 지어도 된다!
^이런 친구들을 custom hooks가 되는고다(안에 use패밀리 쓰고 있으니까 함수이름에 use를 붙여주세요!)
내가 배운 use친구들 (useRouter, useState,useQuery, useMutation, useEffect 등...)

useAuth라는 함수를 컴포넌트로 만들어와서 철수의 페이지가 열리기전에 함수를 한번 실행하게 함으로서
권한분기를 실행하게 해주는 모습 !

우리 이렇게 아이디 안줄꺼야

이렇게 하나의 함수안에 값을 넘기는걸로 해서 줄거고 저기 페이지 넘어갈때마다 추가하고싶은 기능들 (사진띄우기, 추가검증하기 등등)을 넣을수가 있겠지 !

- refetch의 문제점 / 개선법

현재는 리패치가 안되는 상태, 리패치 안하고 캐치를 직접 건드리는 방법으로 해보자

위에서 공부했던거 한번 이해하고 ~

두가지 방식의 차이를 이해하자

순서가 헷갈려서 넣지 못하거나 할필요 없이 키값이 같으면 되겠지 ! 그래서 구조분해할당을 하는것이다!
우리 리패치 했었는데 그렇게 안하고 , update는 globalstate를 직접 수정하는걸 (?)

data안에있는거를 키값으로 불러오는거 !
리턴값이 data.deleteBoard data.createBorad
아폴로 cachestate에서 각각 {data}해서 쿼리때려서 불려온 data는 글로벌 스테이트에 저장이 된다. globalstate(apollo - cache - state) 에 fetchboard:{}이런식으로 저장이 되어이따 얘네를 cache.modify해서 직접 수정하려고 하는것이다
배열에서 이렇게 객체를 합치려면

스프레드연산자 썼던거 기억하지 ?
그래서 최신게시글 제일 위로 올려주는것

우리는 globalstate에서 쓰는 모든 컴포넌트에서 업데이트되어서 새롭게 다 보이는 형식이었다
저 fetchboards가 바뀌었으니까 같이 쓰는 모든 애들이 다 바뀐다 !

- Cache-Modify

- 알고리즘 수업

전에 썼던 메서드인데 왜 생각못했지 !
Replace!
단지 쓸때, 앞에있는 데이터만 변경이 되기 때문에, 중복되는 데이터는 변환해주지 못한다 !
그래서 replaceAll을 사용하면 안에있는 모든데이터를 찾아서 변경 시켜준다

str = "123452"
str.replace("2","0")  // "103452"
str.replaceAll("2","0") // "103450"

이렇게 !
replaceAll을 사용하지 않고 while문을 사용했을때

정규표현식을 사용한 풀이
->신선하고 재밌다
/열고/닫고 슬래시 안에 검증하는 문자열을 추가해준다
/g 명령어는 전역 검색을 의미한다

s = s.replace(/zero/g,0)
s = s.replace(/one/g,1)...이런식으로 진행한 후
return Number(s)
이걸 for와 정규표현식으로 같이 쓸수 있어! (10번 반복해서 써준건 좋은 코드가 아니니까!) 

  const numbers = ["zero","one","two","three","four","five","six","seven","eight","nine"]
  
function solution(s){
  for(let i =0; i<numbers.length; i++){
  	const regExp = new RegExp(numbers[i],"g")
     s = s.replace(regExp,i)                
                                  //(정규표현식안에 변수를 사용할수 있게하는 친구)} 
          return Number(S)
  }