jvn4dev

정기결제? 그래서 뭘 한다고?기존 레거시(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를 마무리하는 시기에 느끼는 부분으로는 정말 힘들고 짧지않은 시간이였지만 꽤나 큰 뿌듯함이 몰려온다. 짧은 시간 내에 변경된 코드를 파악하고 기능을 구현해야했어서 어려운 부분이 많았고 온전히 내 것으로 만들었다는 확신도 아직은 들지 않지만 최..