[Typescript] 전역상태관리 라이브러리(Redux, Recoil, MobX...) 없이 react-query로 전역상태 관리하기

서론필자는 원래 SWR를 주로 즐겨 사용해왔다. 그러다가 최근에 react-query에 관심을 가지게 되어 공부를 하던 중, 기존에 필자가 SWR로 전역상태를 관리했던 것처럼 react-query에서도 똑같이 사용할 수 있지 않을까 라는 생각이 들게되어 이번 포스팅을 작성하였다. 아직 SWR로 전역상태를 관리하는 방법을 모르거나 궁금한 사람은 아래 글을 참고하길 바란다. [Typescript] SWR로 React에서 전역상태관리 라이브러리 걷어내기서론 이번 포스팅에선 흔히 프론트엔드에서 사용되는 전역상태관리 라이브러리(Redux, MobX, Zustand, Recoil 등등...)들을 사용하지 않고 SWR만으로 전역상태를 관리하는 방법에 대해 소개해볼까 한다. blog.betaman.kr그래서 어캐 만듦..

• format_list_bulleted SW/Typescript
• · 2023. 7. 6.
• textsms

[Typescript] Next.js에서 Tailwind CSS와 Chakra UI를 함께 사용했을 때 생기는 CSS Overriding 문제 해결(feat. Emotion cache)

서론 Next.js에서 TailwindCSS와 Chakra UI(혹은 emotion 기반의 다른 UI 라이브러리)를 함께 사용하면 UI 라이브러리의 컴포넌트가 정상적으로 표시되지 않는 문제가 생긴다. 이번 포스팅에선 이 문제를 해결하는 법에 대해 소개하도록 하겠다. 해결법 위 이미지를 보면 알겠지만, Chakra UI의 Button 컴포넌트가 CSS 적용이 정상적이지 못해서 화면에 표시되지 못하는 문제가 생겼다. 결론부터 말하자면, 이 문제의 원인은 ChakraProvider에 의해 삽입된 emotion cache의 위치때문이었다. tailwind는 전역 css 파일에 "@tailwind base" 구문을 넣어 프론트 프로젝트에 tailwind preflight css를 삽입한다. 그런데 문제는, 그 p..

• format_list_bulleted SW/Typescript
• · 2023. 5. 21.
• textsms

[Typescript] SWR로 React에서 전역상태관리 라이브러리 걷어내기

서론 이번 포스팅에선 흔히 프론트엔드에서 사용되는 전역상태관리 라이브러리(Redux, MobX, Zustand, Recoil 등등...)들을 사용하지 않고 SWR만으로 전역상태를 관리하는 방법에 대해 소개해볼까 한다. What is SWR? SWR은 효율적인 데이터를 패칭을 위한 React용 라이브러리이다. SWR을 통해 서버로 요청을 보내고 응답을 받을 수 있으며, 응답을 key에 대응되도록 캐시해준다. 이때, 이전 요청을 통해 받은 응답을 캐시해두기 때문에 key를 통해 바로 접근이 가능하다. 그래서 항상 사용자에게 빠른 응답성을 제공해줄 수 있고, 사용자가 key를 통해 캐시에 들어있는 값을 사용하는 동안 백그라운드에서 해당 요청의 응답을 최신화시켜준 뒤 사용자에게 반영해줄 수 있다. 데이터 가져오..

• format_list_bulleted SW/Typescript
• · 2023. 5. 18.
• textsms

[Typescript] Nest.js Cloudflare R2 + Images 통합 Multer storage engine 개발기

서론 이번 포스팅에선 Nest.js에서 Cloudflare R2와 Images를 통합하여 Multer Storage engine으로 사용하기 위한 개발기를 담았다. 이전 포스팅과 이어지는 내용이니 그 포스팅을 참고하길 바란다. 2023.03.08 - [SW/Typescript] - [Typescript] Nest.js Multer Storage Engine에 Cloudflare Images 적용기 [Typescript] Nest.js Multer Storage Engine에 Cloudflare Images 적용기 서론 이번 포스팅에서는 nest.js multer의 storage engine으로 Cloudflare Images 서비스를 URL 업로드 방식으로 연동해보려는 시도를 담았다. 1. Cloudfl..

• format_list_bulleted SW/Typescript
• · 2023. 3. 18.
• textsms

[Typescript] Nest.js JWT 인증 모듈 만들기 (+ 커스텀 데코레이터)

서론 이번 포스팅에서는 Nest.js에 JWT 인증 모듈을 개발한 경험을 담았다. 실제 필자가 JWT 인증 모듈을 만들면서 개인적으로 고려했던 부분들이 포함되어있다. 1. 프로젝트 구조 JWT 인증/발급 기능에 대한 관심사를 "JWT 인증 모듈"만 가지도록 분리하기 위해 다음과 같은 프로젝트 구조를 가졌다. global.d.ts: 전역에서 JWT의 사용하기 위해 전역으로 인터페이스를 본 파일에 정의하게 된다. jwt-auth.module.ts: PassportModule이나 JwtModule을 import 및 initialize하기 위한 파일이다. 이 모듈은 @Global() 데코레이터가 붙였기 때문에, jwt 인증/발급 기능을 사용할 다른 모듈에선 jwt-auth.module을 import하지 않아도 ..

• format_list_bulleted SW/Typescript
• · 2023. 3. 10.
• textsms

[Typescript] Nest.js Multer Storage Engine에 Cloudflare Images 적용기

서론 이번 포스팅에서는 nest.js multer의 storage engine으로 Cloudflare Images 서비스를 URL 업로드 방식으로 연동해보려는 시도를 담았다. 1. Cloudflare Images가 뭔데? Cloudflare Images는 Amazon S3나 Cloudflare R2 처럼 파일을 저장하고 서빙해주는 서비스인데, 그 파일이 "이미지"에 초점이 맞춰져 있는 서비스이다. 그래서 Cloudflare Images는 이미지 파일 서빙을 위한 강력한 기능, 가격정책을 제공한다. Cloudflare Images의 가격정책은 용량단위의 가격이 아닌 이미지 개수의 대한 가격으로 책정된다. 그래서 이미지 10만개를 호스팅 하는데 $5, 이미지 10만개를 전송하는데 $1의 비용만 발생한다. C..

• format_list_bulleted SW/Typescript
• · 2023. 3. 8.
• textsms