Javascript

useEffect() hook의 의존성에 refObject를 넣지 말자
요약 useEffect의 dependency array에 ref.current를 넣어봤자, current가 바뀌어도 훅이 호출되지 않는다. 자세한 설명은 여기에 https://velog.io/@shmoon2917/useEffect-%EC%9D%98%EC%A1%B4%EC%84%B1%EC%97%90-ref%EB%A5%BC-%EB%8B%B4%EC%9D%84-%EB%95%8C%EB%A7%88%EB%8B%A4-%EC%B0%9C%EC%B0%9C%ED%95%98%EC%8B%A0-%EB%B6%84%EB%93%A4%EC%9D%84-%EC%9C%84%ED%95%B4
  • 1more
zustand
최근에 여기저기서 이름이 언급되는걸 자주 들었다. 핫한 상태관리 라이브러리인듯. 살펴보니 boiler plate가 적다 React component의 lifecycle 바깥에서 상태 조회/변경이 가능하다 observer 등의 HoC로 감싸지 않아도 되고, 상태 변경시 컴포넌트의 re-render가 강제되지 않는다 redux devtool을 바로 적용할 수 있다 정도의 당장 체감되는 장점이 느껴진다. 컨퍼런스에서 어떤분이, 장점중 하나로 '곰이 귀엽다'고 하셨는데, 실제로 공식홈페이지의 그래픽이 귀엽다. 서버 상태값의 Hydration만 할 수 있다면 기존의 mobx를 완전히 대체할 수 있을것 같은데...... https://github.com/pmndrs/zustand?tab=readme-ov-file#typescript-usage
  • 1more
서드파티 aws cdk library
https://aws-lite.org/#install-aws-lite 가 나왔네. aws-cdk v3이 느려서 만들었다고 하는데. 아직 사용자도 인기도 많은것같지는 않음 https://github.com/architect/aws-lite
  • 1more
React v18의 Suspense로 탭이동시 깜빡임 줄이기
https://velog.io/@seungchan__y/React-18-Concurrent-%EB%A7%9B%EB%B3%B4%EA%B8%B0
  • 1more
react-router v6.4 이상에서 data API 가 동작하지 않는다면
https://reactrouter.com/en/main/routers/picking-a-router 문서의 설명에 따라, createBrowserRouter 를 적용했으나, loader 나 errorElement 가 동작하지 않는다. migration guide랑 유사한 방식으로 잘 구현한 것 같은데.... 왜그런지 확인해보니, createBrowserRouter 는 적용했으나 아래와 같은 형식의 기존의 라우트 코드 내부에서는 data API가 동작하지 않는 것 같았다. (Typescript 자동완성이 되길래, 당연히 잘 될줄 알았지만..) 테스트 해보니, 제일 바깥쪽이 data router로 만들어졌더라도 <Routes>하위에 사용한 loader 등의 data API는 동작하지 않는다. 아래처럼 <Routes> 바깥쪽 라우트의 data API는 동작은 하지만, LegacyComponentWithRoutes 내부의 ( <Routes> 하위) 컴포넌트에서 발생한 exception은 무시된다. 반면, loader에서 발생한 exception으로는 잘 동작한다.
  • 1more
react-router v6 에서 일치하는 경로를 찾는 방법
v5에서 쓰던 <Switch> 컴포넌트를 <Routes> 로 변경했다. 어떤 방법으로 적당한 경로를 찾아오는지 궁금해서 찾아보았다. https://velog.io/@peacesong/react-router-v6 요약하면, v5 이전( <Switch> )에서는 위에서부터 아래로 탐색하며 일치하는 라우트를 확인하고 v6 ( <Routes> )부터는 전체 목록 중 가장 적당한 라우트를 찾아준다고 한다. 그럼 매치되는 라우트가 많으면? 궁금해서 확인해보니 아래와같이 동작한다 일치하는 라우트가 둘 이상인 경우: 위쪽 컴포넌트를 반환 exact match 우선 반환
  • 1more
node.js docker image 선택
도커이미지 고를때 이름만보면 뭐가 뭔지 알수가 없어 당황하게 된다 https://snyk.io/blog/choosing-the-best-node-js-docker-image/ 대략적인 설명과 비교 표가 정리되어있다. 따봉
  • 1more
bun 1.0
1.0이 나왔다며 여기저기 글이 올라온다 https://bun.sh/blog/bun-v1.0 엄청 빠르다는데..?
  • 1more
null-prototype object
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects js object인데, 기본으로 상속받는 prototype이 없는 객체를 만들 수 있다고 한다. https://getaround.tech/exif-data-manipulation-javascript/ 이 글을 읽다가 발견했는데, const result = groupBy() 결과에서 result[toString] 같은게 존재하면 곤란하니까.... 그렇구만.
  • 1more