728x90
728x90
서론 이번 포스팅에선 흔히 프론트엔드에서 사용되는 전역상태관리 라이브러리(Redux, MobX, Zustand, Recoil 등등...)들을 사용하지 않고 SWR만으로 전역상태를 관리하는 방법에 대해 소개해볼까 한다. What is SWR? SWR은 효율적인 데이터를 패칭을 위한 React용 라이브러리이다. SWR을 통해 서버로 요청을 보내고 응답을 받을 수 있으며, 응답을 key에 대응되도록 캐시해준다. 이때, 이전 요청을 통해 받은 응답을 캐시해두기 때문에 key를 통해 바로 접근이 가능하다. 그래서 항상 사용자에게 빠른 응답성을 제공해줄 수 있고, 사용자가 key를 통해 캐시에 들어있는 값을 사용하는 동안 백그라운드에서 해당 요청의 응답을 최신화시켜준 뒤 사용자에게 반영해줄 수 있다. 데이터 가져오..
서론 이번 포스팅에선 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..
서론 이번 포스팅에서는 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하지 않아도 ..
서론 이번 포스팅에서는 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..
서론 필자가 최근 새로 참여하게된 팀에서 firebase를 통해 서비스를 구축하고자 하여, 이와 관련한 github 브랜치별 firebase 배포 설정을 작업하게 되었다. 이때 했던 내용들을 정리차 포스팅으로 남겨보았다. 이러한 배포 자동화 설정은 수동으로 일일히 배포하는 방식보다 큰 수고를 덜어주고 항상 일률적으로 빠르게 배포할 수 있게되어, 오직 개발에만 집중할 수 있도록 도움이 된다. 특히 팀에서 협업을 위해 코드리뷰를 진행하는 경우 프론트 프로젝트에서는 preview가 필수이기 때문에 더욱 이러한 배포 자동화는 필요하다. firebase는 2020년부터 미리보기 채널(베타)라는 이름으로 production 배포를 위한 live channel뿐만 아닌 테스트, 개발을 위한 배포 채널을 나눌 수 있도..
서론 이번 포스팅에선 CloudFlare로 Notion 포트폴리오 페이지에 커스텀 도메인을 연결하는 방법을 소개하려고 한다. 약간의 수고만 해주면 아래처럼 자신의 Notion 포트폴리오의 URL을 깔끔한 도메인으로 바꿔줄 수 있다. before: https://betaman.notion.site/Kang-Minsu-BetaMan-1cab39b8a57a4ea0841acb8fb960d4ac after: https://portfolio.betaman.kr 강민수 Kang Minsu - BetaMan 🏆 수상경력 portfolio.betaman.kr 1. 준비물 Notion 포트폴리오에 커스텀 도메인을 붙이기 위해서 우선 아래와 사항이 필요하다 CloudFlare 네임서버가 등록된 개인 도메인 Notion 포트..