4주차 멘토링

멘토미팅

[react-tag-input](https://www.npmjs.com/package/react-tag-input)

디테일 살리기

• 테이블에서 체크 클릭 시 너무 친절하지 않게 사라짐

  • 상태만 바꾸고 item render는 하지 않는 방식이 좋지 않을까

• id가 서비스 안에서 보여지는 것은 지양했으면 좋겠다. 사용자한텐 안보여줘도되는 데이터

• 개인적 : 중요도가 A B C 보다는 매우 중요 / 보통 / 낮음처럼 직관적이면 좋겠음

• 수빈 : hook 사용 관련

  • 현재 hooks에서 전역 데이터를 다루고 있음,, props로 내리는 게 많은 상황임
    • 구조가 점점 더 복잡해지면 store, context를 쓰는 것도 괜찮음
    • 리렌더링 범위를 최소화할 수 있게 노력해보자!

• async로 되어있다보니 state를 받을 때마다 then/catch 필수 : 코드가 좀 지저분해짐

  • ⇒(async) ⇒(async)
  • FE memory DB
  • <=(async) <=(async)
  • load해올 때 state가 비동기로 관리되어서 type지정에 항상 undefine | todoList 이렇게 해줘야함
    • 그렇게 밖에 할 수 밖에 없음
    • suspense가 어떻게 깔끔하게 데이터만 가지고 오고 로딩 상태를 보여주고 에러를 보여주는지 알아봤음 좋겠다 : 직접 구현해보는게 어떨지?
    • 실제 구현하기 위해서는 closure 같은 개념들이 수반됨. 다른 사람들이 suspense를 어떻게 구현했는지 보고 실제로 잘 사용해봤으면 좋겠다

• 다이어그램 구현 할 때 canvas를 쓸지, dom element를 쓸지 고민

  • 본인이 하기 쉬운 쪽으로 하세용~ 두개 다 섞어서 할 수도 있을 것

• clipboard API를 사용해서 했더니 https가 아니라서 copy가 안됨. https말고 다른 방법이 있을까?

  • https는 국룰이다! https 필수~~

• 메모리와 DB가 이어지는 부분을 (메모리/indexedDB)를 만들어서 DB 의존성 주입하게 만들었음. 하다보니 범용성을 위해서 DB side interface가 상당히 별로 없다. local/cloud

  • local/cloud 쓰는 것을 사용자가 action에 따라서 실제로 사용할 것인지 부터 생각해보자. 일단 시도는 좋은 시도

• indexed DB는 초기화 작업이 필요한데 생성자에서 해주면 undefined인데 factory pattern으로 해서 undefined를 가지지 않게 해놨는데 이게 보편적인지

  • 의존성이 좀…
  • 멘토님이 만든다면 각각 interface를 독립적으로 만들 것임 / DB init부분도 client side니까 항상 모든 함수마다 DB init하는 promise를 둬서 넘어가게하는 처리를 해주지 않을까 / todo의 interface만 가르키게 하지 않았을까
  • rendering하고 init하게 만드는 것 : react에서는 더 도움이 되는 다른 방법들로 간단하게 함수 단위로 사용하게 되면 어떨까? 독립적으로 호출하고 독립적으로 가져오는게 좋을 듯. suspense 공부하게 되면 어떤식으로 todo를 넣을지 고민을 되게 많이 할 것
  • TODO라는 DATA에 집중하자
    • 함수로 데이터를 관리한다는 것이 뭘까용?
      • 연결관계를 만들지않고 데이터만 다루게 한다
      • 무조건 처음에 init을 해서 update해야하는데 , 남의 todo를 볼 때 어떻게 볼건지? 내 todo만 보게 되어있음. todo자체의 확장성은 떨어짐
      • todo의 데이터만 보게해서 데이터를 주입하는 방식으로 생각하는게 좋을 듯
    • todo interface 노출되어있는게 쫌 있는데 모듈단위로 잘 쪼개시나… 어떻게 관리하면 될까요?
      • 그 모듈에 한정적이면 모듈안에 함수가 몇백개가 들어가도 그 안에 있어야한다
      • 진짜 todo에 관련된 비지니스면 그 모듈 안에 다 넣는 것도 방법
    • getAll, edit등 front에서 다루고 나머지는 server에서
    • todoList에 너무 많은 역할을 하고있음
  • 멘토님 추천 : 다른 사람들이 가장 많이 쓰는 API들을 다루는 react query : API 요청 캐싱된게 있어? 그대로 쓰는 써~ 내부적으로 suspense 기능도 있을 것이고..

  [TanStack Query | React Query, Solid Query, Svelte Query, Vue Query](https://tanstack.com/query/v4/)

  • todo가 endpoint를 server로 변경해도 무방한 구조인지 고민해보고 아니라면 변경해보자!

• 이번 프로젝트를 하면서 어떤 고민들을 했는지 이력서에 적으면서 wiki에 적은 개발일지를 넣으려고 하는데 이력서에는 wiki 링크 달고 이력서에는 간단하게 summary만 적어도 괜찮은 방식인지?

  • 됴아요.