jvn4dev

서비스를 사용 중에 갑자기 튕기거나 새로고침되는 이슈가 있어요. 이 부분들을 빠르게 수정해야 할 것 같아요. 서비스의 튕김이라는 사업적으로도 제품적으로도 안좋은 경험을 해결하고자 해당 이슈 해결에 대한 프론트파트 차원의 온도가 급격하게 높아졌습니다. 현재 저희 서비스는 브라우저에 phaser 게임엔진을 통해 움직이는 캐릭터를 중심으로 web-rtc나 react 등 많은 일을 하고 있어 코드만 봤을 때는 어디서 어떤 에러가 발생할지 예측하기가 어렵습니다. 그렇기 때문에 우선 현재 발생하는 에러들 중에 어디서 어떤 에러가 발생하는지를 파악하는 게 중요했어요. 이를 위해서도 예전부터 에러 모니터링 툴인 센트리(Sentry)를 사용하여 현재 저희의 주요 애플리케이션에서 발생하는 에러를 수집하고 있었어요.  하지..

센트리 정상화 과정에서 next.config.js 의 설정한 config 값이 제대로 적용되는지를 확인하고 싶은 니즈가 있었다.webstorm을 사용하다가 cursor로 갈아탄지 얼마 안된 상황에서 디버깅 환경에 익숙해지면 좋은 기능들이 많아 기록해두는게 좋겠다.next.js의 module config 내부의 값을 확인해보는 방법은 다음과 같다.1) 확인하고자 하는 앱의 next.config.js 의 debugger 추가하기// apps/web-app/next.config.jsmodule.exports = async (phase, context) => { let config = withBundleAnalyzer(nextConfig); config = await withNx(config)(phase, c..

평소 구현에 대한 부분만 관심을 갖고 개발하다보니 패키지 매니징과 관련된 에러나 의존성 관련된 문제를 만났을 때 어려움을 느꼈다. 현업에서의 프로젝트말고도 개인 프로젝트를 진행하면서도 몇가지 패키지 매니저를 사용해봤지만 단순히 빨라서 사용했지 정확히 어떤 이유에서 사용하는지 정확히 알고 사용하진 않았던 것 같다.패키지 매니징 관련해서 문제를 만났으니 현재 현업에서 사용 중인 pnpm에 대해서 조금 알아보고 가면 좋을 것 같아 가볍에 정리해보려고 한다.우선 pnpm의 공식문서에서는 다음과 같이 소개하고 있다.npm대비 2배 빠르다.효율적이다.(?) - node_modules cloned, hard linked? 모노레포를 지원한다.엄격하다.이들이 말하는 효율적이다는 부분은 처음 봤을 때 정확하게 이해하지 ..

정기결제? 그래서 뭘 한다고?기존 레거시(Angularjs) 프로젝트를 신규 프로젝트(Next.js)로 마이그레이션한지 얼마 되지 않아 우리에게 새로운 미션이 떨어졌다. 바로 젭 스페이스에 정기결제 기능을 추가하는 것이였다.💡 젭 스페이스 정기결제란? 각 스페이스마다 선택가능한 ****플랜(플랜 별 제공기능 상이)과 해당 플랜에 따른 금액이 등록된 카드로 매달 정기적 과금되는 신규 BM커다란 프로젝트가 끝난지 얼마 되지 않아 꽤 규모가 있는 기능이 바로 출시가 된다는 점이 생각보다 꽤 부담으로 다가왔다.하지만 서비스의 안정성이나 추후 개발 유지보수성을 올리기 위해 리액트로의 프로젝트 마이그레이션을 결정했고 그를 위해 우리의 서비스는 약 6개월이 넘는 기간동안 멈춰있었다. 프로덕트 관점에서 본다면 사실상..

Scroll Event vs Intersection ObserverScroll Event로 구현 순서1. scroll 이벤트를 감지한다.2. 현재 스크롤 영역의 `위치를 계산`한다. with Throttle3. 영역 계산을 통해 페이지 아래에 위치하면 API 요청을 진행한다.4. 받아온 데이터를 추가하여 다시 렌더링한다.5. 무한 반복const handleScroll = () => { const { scrollTop, offsetHeight } = document.documentElement if (window.innerHeight + scrollTop >= offsetHeight) { setFetching(true) } }쓰로틀을 걸어서 실질적인 이벤트감지 수를 최적화하더라도 docu..

나홀로 캡틴판교 강의보고 Partial 구현해보기.유틸리티 타입 혹은 제네릭 타입이라고도 불리는 것들 중 Partial 은 제네릭으로 넘긴 타입의 구성을 전부 optional하게 변환해주는 타입을 쉽게 만들어준다.interface Developer { name: string; skill: string; age: number;}위와 같이 만들어둔 타입이 있는데 이를 재사용하는 시점에 특정 타입구성만 받고싶을 때, 그 구성의 interface를 가진 새로운 타입을 만들어도되겠지만 최대한 불필요한 코드를 줄이고 중복되는 코드를 줄여나가는 것이 결국 개발자들의 궁극적인 목표가 아니겠는가.type FakePartial = { name?: Developer['name']; skill?: Developer[..