TIL 1월 17일

김수찬 🤟

Facts

• mediasoup 튜토리얼 진행하면서 server-client에 대해 더 알아가는중
• 튜토리얼 대로 진행하면 리펙토링 꽤나 걸릴 듯
• 타이핑에 오타가 너무 많이난다..

Feeling

• 40분 짜리 수업인데 버그 하나 잡는데만 40분 넘게 걸리니까 눈물이 난다...
• 꼭꼭 md에 남겨야하니까 집중, + 깔끔하게 코딩합시다

Finding

• socekt.io 할 땨 emit on에 대한 적용이 아직 미숙하다 (이전 연습때는 연결이 되고 어쩔때는 연결이 안되는 이유가 뭔지 모르겠음)
• client단에서 emit이 잘 안되는 문제가 있는데 이것을 잘 잡아야 이후에 문제가 발생하지 않을 것 같다

Future (Optional)

• 벌써 이렇게 버그가 많이뜨는데.... 어쩌지...

김현우 😀

Facts

• react ts blog 프로젝트 처음부터 시도
• 중간공유회 발표 준비

Feeling

• 5시간 거의 논스탑 발표 자료 준비 힘들었다.
• ppt 만드는 거 역시 재밌는듯 함.
• typescript에 대해서 모르는 부분, 부족한 부분이 많음

Finding

• storybook 적용해서 사용하는 방법에 대해서 확실히 습득했다.
• storybook 적용할 때 관련 라이브러리 세팅을 다 해줘야 할 필요가 있다는 점.(source map 관련 에러...)

Future (Optional)

박규현 🤑

covid 19 issue 😭😭

백종인 🐭

Facts

• 개인 프로젝트 쬐..끄..음 하고 코어타임때 중간공유회 발표 준비함

Feeling

• 글.. 문서.. 그만 쓰고 싶다..
• 그림 그리기도 시간 오래 걸려..

Finding

• ppt 지식이 늘었다.. 사진을 동그랗게.. 배경을 일괄 설정하기..

Future (Optional)

• 중간 발표회 준비만 잘하자! 이것만 끝나면 최종까진 거의 터치 없을듯 ㅠ.ㅠ

허다은 🐣

Facts

• zustand 문서 읽기
• 클론코딩(ing) : Auth 완료, TodoList 진행 중
• 22:00 ~ 00:00 코어 회의

Feeling

• 처음에는 react-query와 zustand를 함께 사용하는 방법을 익히려고 클론 코딩을 시작했는데, 코드를 뜯어볼 수록 처음보는 참신한 코드들이 많이 들어있어서 배울 점이 많다.

Finding

• 스타일을 쉽게 리셋하고 싶으면 라이브러리를 쓰면 된다. styeld-components를 사용한다면 styled-reset을, emotion을 사용한다면 emotion-reset을 쓰자.
• get을 할 때에는 useQuery를, post, put, delete를 할 때는 useMutation을 사용한다.
• 자주 쓰이는 스타일 코드를 하나의 파일로 저장하고 불러오는 방법을 활용하면 좋을 것 같다.
  • 예로 들어서 가운데로 정렬하는 스타일을 자주 쓴다고 한다면, 이런 식으로 사용할 수 있다!

export const flexCenter = {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
};

const FormContainer = styled.div`
  ${flexCenter}
  ...
`;

• react-helmet-async를 사용하면 한 페이지 내에서 비동기적으로 head를 변경할 수 있다. (title을 바꾸는 용도로 활용할 수 있음)
• 에는 replace 속성이 있다. default값인 false로 설정하면 뒤로가기가 가능하고, true로 설정하면 navigate에 적힌 주소로 넘어간 후 뒤로가기를 하더라도 이전 페이지로 돌아오지 않는다.
• useMatch에 인자로 url을 넘기면, 해당 url과 일치할 경우 url의 정보를 반환하고, 일치하지 않으면 null을 반환한다.
• useEffect와 zustand의 subscribe를 함께 사용하면 state에 변경사항이 있을 때 컴포넌트를 강제로 리렌더링하지 않고 state만 받아오도록 할 수 있다. 아직 활용해보진 않았는데 프로젝트에 필요한 일이 있으면 사용해봐야지.

const useScratchStore = create(set => ({ scratches: 0, ... }));

const Component = () => {
  // Fetch initial state
  const scratchRef = useRef(useScratchStore.getState().scratches);

  // Connect to the store on mount, disconnect on unmount, catch state-changes in a reference
  useEffect(() => useScratchStore.subscribe(
    state => (scratchRef.current = state.scratches)
  ), []);
  ...

• store에 여러 개의 state가 든 객체가 들어있다면 shallow 함수를 사용하자. 그렇지 않으면 모든 state가 변경될 때마다 컴포넌트가 리렌더링된다.

import { shallow } from 'zustand/shallow'

const { nuts, honey } = useBearStore(
  (state) => ({ nuts: state.nuts, honey: state.honey }),
  shallow
) 

Future (Optional)

• 클론코딩 완료하기
• 진행 중인 클론코딩에 ts 적용해서 리팩토링하기
• 컴포넌트에 스토리북 적용하기