5주차 멘토링

기술스택

• styled-component 를 왜 tailwind 등을 제치고 사용했는지?
• jotai와 다른 상태관리 라이브러리들의 비교를 쓰기
• Vite, TDD는 그나마 괜춘
• 나머지는 사용 이유가 굉장히 추상적이라서 그닥.. 내용 보완하기
• (기술적 특장점)확장성을 고려한 인터페이스 설계
  • github wiki 링크 넣쟈!!!
  • 좀 더 자세히
  • MVP는 빠른 개발 (스케줄링에 집중) → 메모리로 했다가 점차 Index DB → 자연스럽게 Interface를 DB로 확장할 수 있도록 했다.
  • todoList Interface를 스샷찍어서 올려도 좋을듯
  • 우리는 언제든 바꿀 준비가 되어 있다
• 팀 노션 썸네일 바꾸기
• 렌더링 최적화 (어떻게) 내용 추가하기
• Todo 없을 때 자연스럽게 추가할 수 있는 UI 추가하기

멘토님께 질문

• React에서 querySelectorAll를 써도 괜찮을까요?

  • 특정한 여러개를 가지고 오고 싶으니까 쓴거겠죠?
  • 컴포넌트가 2번, 3번, 4번 같은 출력을 했어도 각각 다른 행동을 할 수 있냐?
  • 컴포넌트를 재사용해도 되냐를 따졌을 때 된다면 querySelector를 사용해도 됨.
  • 재사용이 되는 코드인가? ex) 업데이트가 아닌 계산만을 한다면 괜찮다
  • 임의의 id를 사용한다면 재사용이 되지 않는 컴포넌트 일 것
  • 굳이 쓴다면? 최상단 element를 ref로 정해서 그 밑에 친구들한테 querySelector를 쓸 순 있을듯

• 다이어그램 view에서 transform, translate로 다 넣었는데 괜찮을까요?

  • x, y를 props로 받아서 그리는 부분은 개선하면 좋을 듯

    • 문제가 되는 부분: todo가 100개면 className이 100개 생성됨.
    • 단순히 x, y가 다른건데 100개가 생성됨
    • styleDom이 여러 개 계속 생김
    • 멘토님 클라쓰 미쳤다,, 감탄 계속함
    • styled component: 실행할때마다 새로운 클래스 생김

  • zero-runtime stylesheets

    • https://vanilla-extract.style/
    • https://linaria.dev/
    • css파일을 ts 파일 쓰듯이 만듦 (props를 css 변수로 받음)
    • style.css: hero container에 css 변수가 들어감
    • props를 css 변수로 치환하고, inline variable 넣듯이 넣음
    • x, y를 css 변수로 넣을 수 있으니까 더 개선될 것으로 보임

    <div style={{ “--x”: 10, “--y”: 10 }}>
    transform: translate3d(var(--x), var(--y), var(--z))

  • 그래서 이제 styled components 잘 안 씀,,

  • tailwind가 대세가 되었다고 한다. → 일관된 스타일 적용, 근데 적용 방식은 마음에 들지 않음

  • background, x, y, dnd → 이동할 때마다 클래스네임이 쫘아악 생김 (진짜 별로)

    • 지우더라도 계속 생성되니까 너무너무 비효율적임

• 튜토리얼 모드의 효용성 자체는 굳이 모드로 나눌 필요가 있을까 싶긴 함

  • 더 좋은 경험을 줄 수 있는 방향으로 변경 가능할 듯
  • XState 활용도 가능할 듯 (1 → 2 → 3 → 4 → 일반 모드)

• 렌더링 성과를 어떻게 보여줄 수 있을까?

  • 개발자도구 Profiler
    • 자식 컴포넌트가 렌더링 되고 있을 때 부모 컴포넌트는 렌더링 되고 있지 않는데 이를 확연히 볼 수 있음.
  • jotai → 렌더링 범위를 줄이겠다의 목적을 가짐.
    • 어떻게 사용되는 컴포넌트에서만 상태를 돌게 할까? 어떻게 만들까??
  • React Memo에 대해서 설명할 수 있나요?
    • React 컴포넌트 렌더링 발생조건, 재렌더링 막을꺼면 어떻게 할 것?
    • React가 어떻게 렌더링을 최적화하고있나?(virtual DOM)
    • Context API를 써서 전체 컴포넌트가 모두 렌더링 될 때 어떻게 해결 할 것인지? useMemo를 써서 변하지않는 props를 내려줘서 막을건지, Jotai를 쓸 것인지
  • 최상단에서 Update를 해도 하위에서 어떻게 재렌더링을 막을건지 잘 설명할 수 있으면 좋지 않을까요
  • Jotai 원리를 파악하고 이것처럼 만들려면 어떻게 해야할까를 누군가에게 설명할 수 있는 수준이 되자

• async State는 suspense에 Jotai가 걸리게 해주더라. 순차적인 비동기를 Suspense로 어떻게 처리해야할지?

  • 비동기 순차적이면 suspense가 분리가 되어있어야함
    • 선행되어야되는 suspense가 상위, 그 아래 비동기 Suspense
  • suspense는 여러개의 비동기보다는 하나의 비동기를 처리한다고 생각하는게 편함
  • Custom으로 promise를 props로 throw 하면 린트가 에러만 throw 하라고 합니다. ⇒ 옵션을 끄세요!

• sprite image로 animation만들기