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[..

기존의 input에 { …register } 방식으로 사용하다가, 수수료를 설정해야하는 input에 요구사항에 맞게 onBlur 이벤트를 사용해야할 부분(빈스트링이 들어갔다면 해당 수수료를 0으로 설정)이 있어 register api가 내장하고 있는 onBlur가 덮어씌워지지 않도록 ref, onChange, name 을 별도로 구조분해할당하여 사용하였다.문제 발생기존에 라이브나 마이그레이션 당시 왜 문제가 발생하지않았는지 의문이지만, 후원설정 토글을 on으로 설정한 뒤 form의 isDirty가 true가 되어 설정의 저장버튼이 활성화된 시점에서 수수료의 값을 변경하니 form이 변경되어 활성화되어있던 저장버튼이 비활성화가 돼버리는 문제가 발생했다.트러블슈팅우선 가정할 수 있는 상황은 다음과 같았다.f..

요즘 읽고 있는 책을 보다 Next.js를 사용하는 이유이기도하며 가장 중요한 개념들을 정리해두려고 한다. 현업에서도 얼마 전 에디터와 어드민 페이지를 제외한 모든 페이지를 Next.js 기반의 프로젝트로 마이그레이션을 완료했다. 이제 프로젝트의 꽤 많은 부분을 Next.js와 함께하면서 이미 익숙해진 개념이지만 이번 기회에 확실하게 정리해두고자 한다.Next.js의 렌더링Next.js 는 페이지 별로 렌더링 방법을 전환할 수 있다. 사용할 수 있는 방법은 총 4가지다.정적 사이트 생성(SSG: Static Site Generation)클라이언트 사이드 렌더링(CSR: Client Side Rendering)서버 사이드 렌더링(SSR: Server Side Rendering)점진적 정적 재생성(ISR: ..

3월 말정도부터 시작됐던 본격적인 ZEP 플레이화면의 마이그레이션 프로젝트를 진행하면서 느낀 점들을 회고해보려고 한다. 약 두달이 넘는 시간동안 프론트엔드팀 전부가 꽤 많은 시간을 크런치모드 상태로 지냈던 것 같다.사실 나는 신입이였기에 이게 얼마나 힘든 일인지 몸으론 느꼈지만 머리로 가늠은 하지 못하고 있는 상태에서 그저께 회식에서 팀장님이 말씀해주시길 자기의 커리어상 가장 힘들고 긴 크런치모드였다고…한다.크리티컬한 문제가 있을만한 이슈들은 쳐내고 마이그레이션 TF를 마무리하는 시기에 느끼는 부분으로는 정말 힘들고 짧지않은 시간이였지만 꽤나 큰 뿌듯함이 몰려온다. 짧은 시간 내에 변경된 코드를 파악하고 기능을 구현해야했어서 어려운 부분이 많았고 온전히 내 것으로 만들었다는 확신도 아직은 들지 않지만 최..

처음 v1(Angularjs) 프로젝트에서 정적페이지로만 이루어진 부분 먼저 v2(React)로 마이그레이션을 진행하던 중 상태관리 및 query fetching에 대한 효율적인 부분을 고민하던 중 ReactQuery가 좋은 대안이 될 수 있겠다고 판단했고 관련된 내용을 찾아보던 중 배민 주문팀 프로젝트에 성공적인 ReactQuery 도입과정을 세미나로 풀어낸 내용이 있어 해당 내용을 정리하였다.당시 바쁘던 팀원들의 상태를 위해 그나마 빠르게 정리할 수 있도록 내용을 정리하고 공유했다.유튜브 배민 세미나 영상 출처 https://www.youtube.com/watch?v=MArE6Hy371c1. FE 상태관리는 무엇일까?상태란??주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경 가능즉, 문자, ..