TIL 1월 18일

김수찬 🤟

Facts

• 진행 속도가 많이 더딘편인것 같다...
• mediasoup 간단하게 만든 서버 이거 진짜 간단한거 같기도하고...? 성능은 조금 더 살펴봐야한다

Feeling

• 피곤해죽겠는데 할게 너무 많다
• 여기저기 치이는게 참...

Finding

• docs는 꼭 확인한번씩 해주세요
• object를 create하려면 안전하게 동기방식을 사용하자
• 시간 약속 잘 지키자...

Future (Optional)

• 오늘 handson3 들어갈예정

김현우 😀

Facts

• 중간공유회 참석 및 발표
• storybook, zustand 적용 공부
• 발표를 맥으로 하는 과정에서 ppt 이슈 터짐...(미리 확인 했어야 되는데;;)

Feeling

• 중간공유회가 생각했던 거와 달리 너무 털렸지 않나 생각함. 분명히 장기자랑 같은 공유회가 될거라고 했던 거 같은데 막상 가서 느꼈던 중간공유회는 pmp,아키텍처 발표의 연장선 같은 느낌이었다. 준비가 조금 부족했던 점을 감안해도 미리 알려줬으면 더 좋지 않았을까?
• 타입스크립트를 쓰는데 있어서 미흡한 점이 많은 거 같다. 일단은 체험한다고 생각하고 리팩토링에 공부하면서 적용하고 이번 설에 강의를 들으면서 개념을 확실하게 잡을 필요가 있다.

Finding

• from 이사님 : f4 작성법에서 future는 필수적인 것이라고 반드시 적어야 된다고 한다. 안적으면 이걸 왜 쓰냐고..., 꼭 작성해야 겠다.
• 발표에 대한 목적을 확실하게 잡아야 한다.(발표 주제...)
• 대본을 좀 더 구체적으로 작성할 필요가 있었던 것 같다.

Future (Optional)

• 타입스크립트 리팩토링 시도 마저 진행하기
• react-query 적용하기
• 설 중에 타입스크립트 개념 확실하게 정리하기

박규현 🤑

covid 19 issue 😭😭

백종인 🐭

Facts

• 중간 공유회 참석 및 발표 진행

Feeling

• 발표분담에 착오가 있어서 중간에 프리스타일로 발표함 ㅋㅋㅋ .. (새벽까지 작업한게 컸던 거 같다..)
• 경북 지역에 다른 팀이 디스코드 주제를 다루는것을 알게 되어 흥미로웠음 (경북대 학생이라고 하던데, 추후에 정보공유해도 좋을 거 같다.)
• 중간 공유회는 생각과 많이 달랐음, 배워가는 것도 많았으나 여러모로 현타 오는 타임이었다.
• 아 ~ 배민가고 싶다~

Finding

• 발표준비시 내가 해당 발표로 어떤내용을 전달하고 싶은지, 목표를 정하자!

Future (Optional)

• 내일은 인증부분 꼭 끝내자, 못 끝내면 인간이 아님

허다은 🐣

Facts

• 투두리스트 미니 프로젝트에 타입스크립트 적용하여 리팩토링해봄
• 클론코딩 완료

Feeling

• 타입 스크립트 정말 어렵다. 열심히 공부해서 정복해버릴 겁니다. (ㅂㄷㅂㄷ…)
• 멘탈이 회복되는게 느껴져서 힘이 난다! 일찍 자고 일찍 일어나고 규칙적인 생활을 하고 컨디션도 얼른 회복합시다..

Finding

• Date에 toLocaleDateString를 사용하면 날짜 데이터를 언어별로 표현한 문자열로 반환할 수 있다.

• react의 <Outlet>

  • 중첩 렌더링. 쉽게 말해서 다른 페이지의 내용을 가져와서 넣을 수 있다.(로 저는 이해했습니다)
  • Outlet에 속성으로 context를 주면 해당 페이지에 데이터를 전달할 수 있다.
  • context로 전달한 데이터는 페이지에서 useOutletContext 로 꺼내올 수 있다!

• react-query

  • react-query를 사용해서 포스트 요청을 하거나 삭제 요청을 했을 때, 화면에 보여주는 데이터에도 변화를 주어야 한다. 이 때 queryClient의 invalidateQueries 메서드를 사용해서 query키를 날리면 된다. 즉, mutation 함수가 성공할 때, unique key로 맵핑된 get 함수를 invalidateQueries 에 넣어주면 된다.

  const mutation = useMutation(postTodo, {
    onSuccess: () => {
      // postTodo가 성공하면 todos로 맵핑된 useQuery api 함수를 실행합니다.
      queryClient.invalidateQueries("todos");
    }
  });

  • useQuery는 비동기로 작동한다. 그래서 한 컴포넌트에 여러 개의 useQuery가 있다면 하나가 끝나고 다음 useQuery가 실행되는 것이 아니라, 두 개의 useQuery가 동시에 실행된다! 그래서 만약 useQuery를 비동기로 여러 개 실행하는 경우에는 useQuery 대신 useQueries 를 사용하자.

• 타입스크립트

  • type.d.ts 파일 안에 타입들을 작성하면 컴포넌트에서 import 할 필요 없이 타입을 그냥 사용할 수 있다. (d의 의미는 declare)

  // type.d.ts
  
  declare interface TodoType {
    id: number;
    isDone: boolean;
    title: string;
    content: string;
  }

  • 모든 것에 타입을 줄 필요는 없다. 타입 추론이 가능한 것은 타입을 주지 말고 그냥 넘어가자! 생산성 저하됨.
  • props의 타입을 작명할 땐 @@Props 로 짓자. (컨벤션)

Future (Optional)

• 클론코딩 프로젝트의 컴포넌트에 스토리북 적용해보기
• 코딩애플 타입스크립트 강의 듣기
• (+) 클론코딩 프로젝트에 타입스크립트 적용해서 리팩토링하기