Work Experience
1.클라우드 모니터링 (Cloud Monitoring)
DataSaker
2.Playwright를 활용한 API Response 테스트
Assertions
3.requestAnimationFrame을 활용한 주사율 성능 평가 및 분석
Intro
4.FlutterFlow KPT 회고
FlutterFlow
5.[ Next.js ] URL 쿼리와 상태 관리를 결합한 동적 라우팅
Intro 동적 라우팅은 현대 웹 애플리케이션에서 사용자 경험을 개선하고, 유지보수성을 높이는 데 자주 사용되는 기술 중 하나이다. 특히 Next.js에서는 파일 기반 라우팅 (App Router)을 제공하여 보다 쉽게 동적 라우팅을 구현할 수 있다. URL 쿼리와
6.[ Next.js ] 외부 CDN (Amazon S3 등)의 이미지를 Next.js Image 컴포넌트와 통합하기
Next.js는 next/image에서 이미지 최적화 기능을 제공하여 애플리케이션의 성능을 향상시킬 수 있다. 하지만, 외부 CDN (Amazon S3 등)에서 이미지를 가져올 때는 별도의 설정이 필요하다. 회사 프로젝트를 진행하면서 대다수의 이미지 파일이 S3에 배포
7.[ React ] 효율적인 React 상태 관리 : useEffect ➝ useMemo
회사 프로젝트를 진행하면서 헤더의 드롭다운 부분 코드가 좀 수정이 필요함을 확인했다. 드롭다운을 렌더링하는 과정에서 불필요하게 useEffect를 호출하고 있어 렌더링 흐름에 맞지 않음을 발견하였고, useMemo를 활용하여 불필요한 렌더링을 방지하고자 했다.
8.[ Next.js ] Vercel Blob 활용하여 비디오 파일 배포하기
회사 프로젝트를 수행하면서 동영상 파일을 백그라운드에 집어넣어야 하는 상황이 있었다. 크기가 1.3MB밖에 되지 않는 짧은 길이의 영상이라 assets/ 폴더에 직접 넣어도 무방하지만 권장하지 않는 방법이라고 한다. 그렇다고 AWS S3 버킷에 넣기에는 과도한 설정인거
9.[ Next.js ] React-Youtube 라이브러리 활용하여 유튜브 동영상 렌더링하기
회사 프로젝트에서 react-youtube 라이브러리를 활용하여 유튜브 동영상의 렌더링을 진행하였다. youtube의 iframe을 직접 주입하는 것보다 React의 선언적 프로그래밍에 더 적합하다고 하여 적용하게 되었고, 이 글을 작성하면서 정리를 하고자 한다.
10.[ Next.js ] IndexedDB를 활용하여 비디오 파일 캐싱하여 여러 컴포넌트에 적용하기
저번 시간에 video-proxy API를 만들어 Vercel Blob에 저장된 비디오를 가져오는 로직을 구현하였다. 기획에 따라 여러 컴포넌트에서 동영상을 렌더링해야 하는 경우가 생겼고, 그때마다 동영상을 호출하는 과정을 줄이고자 IndexedDB에 동영상 파일을 저