TIL_230114_ JS, React query, <GOLLA>

내일배움캠프 4기 스파르타코딩 React B반

---

📒 오늘의 공부

1. Modern Javascript tutorial Study

참조에 의한 객체 복사

알게 된 것

• 깊은 복사(deep clone)

  • …(Spread Operator)
    -> 원본 객체와 연결
    -> 객체를 복사해 와서 필요한 부분만 내용을 바꿔서 넣을 수 있다.

  • _.cloneDeep(obj)
    -> 원본 객체와 연결되지 않음
    -> 객체의 내용을 바꾸면 clone한 객체의 내용만 바뀐다.
    -> 사용법
    npm i --save lodash lodash 라이브러리 설치

   const _ = require("lodash");
  
    let a = {
      name: "john",
      age: 23,
      friend: { name: "john", family: { name: "sunny" } },
    };
  
    let clone1 = _.cloneDeep(a);
  

• 프로그래머스 풀 때 어떻게 풀어야 할지 주석으로 먼저 정리하기!

---

2. 프로그래머스 JS

Lv0. 팩토리얼

• 팩토리얼에 대해 이번에 알았다.
• 다른 사람의 풀이 참고해서 겨우 풀었다..
• i가 10보다 작은 이유는 n의 최댓값과 10!이 같기 때문

  function solution(n) {
  let answer = 1;
  for (i = 1; i <= 10; i++) {
    answer *= i;
    if (answer === n) return i;
    if (answer > n) return i - 1;
  }
  }

  알게된 것

  • 0! = 1
  • 양의 정수 n 팩토리얼
    -> n*(n-1)! 로 표현 가능
• 다른 사람의 풀이

  function solution(n) {
    let i = 1;
    let f = 1;
    while (f*i < n) f*=++i;
    return i;
  }

  • 항상 for문만 생각했는데 while문도 잘 쓸 수 있게 익숙해져야 한다.

---

3. React query 원장님 강의 복습

알게 된 것

• Query key
  • key가 같으면 같은 쿼리 및 데이터를 보장한다.
  • 배열이 아닌 단어로 선언해도 내부적으로는 배열로 가진다.
• Query Invalidation
  • queryClient.invalidateQueries("todos")
  • redux의 state가 필요없고 기존의 상한 데이터를 무효화하고 서버에서 바로 새로운 데이터를 다시 받아온다(refetching)
• useMutaion
  • CUD에 씀
  • mutation.mutate( 인자 )
  • 인자는 반드시 한 개의 변수 또는 객체
  • Query Invalidation과 같이 쓰면 firebase의 snapshot같이 작동

---

4. < GOLLA > project 회의

알게 된 것

• .gitignore
  • src/common 폴더 안의 firebase.js를 넣기
  • src/common/까지 쓰면 common폴더 전체가 들어감
  • src/common/firebase.js이렇게 하면 firebase.js 하나만 들어감

---

5. 후발대 강의

그 동안 못 본 강의 듣기

알게된 것

• json통신
  • .then과 .json에 대해 개념이 잡혔다. 그 전에는 제대로 이해 못 하고 쓰기만 했는데!

    fetch("https://jsonplaceholder.typicode.com/todos/")
    .then((res) => res.json())
    .then((data) => {
      for (item of data) {
        console.log(item["title"]);
      }
    });