jvn4dev

pnpm이 뭔가요?

평소 구현에 대한 부분만 관심을 갖고 개발하다보니 패키지 매니징과 관련된 에러나 의존성 관련된 문제를 만났을 때 어려움을 느꼈다. 현업에서의 프로젝트말고도 개인 프로젝트를 진행하면서도 몇가지 패키지 매니저를 사용해봤지만 단순히 빨라서 사용했지 정확히 어떤 이유에서 사용하는지 정확히 알고 사용하진 않았던 것 같다.패키지 매니징 관련해서 문제를 만났으니 현재 현업에서 사용 중인 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 상태관리는 무엇일까?상태란??주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경 가능즉, 문자, ..

프로젝트 마이그레이션을 진행하는 중 Mobx관련 setter함수를 사용할 때 있었던 문제를 정리해보려고 한다.구현하고자 했던 기능은 스페이스 설정에서 유저가 해당 스페이스의 설정중 저전력모드라는 기능을 토글로 on/off할 수 있는 기능을 구현 중이였다.구현 방향해당 기능은 유저 즉, 플레이어마다 스페이스별로 개별의 설정을 갖고 있어야했다. 그래서 플레이어의 설정관련된 전역상태를 저장하고 있는 settingStore내에 playerSettings라는 속성을 만들고 거기엔 스페이스(hashId)별 playerSettings객체를 갖도록하고 해당 정보는 유저의 로컬스토리지에 저장하도록 구현하였다.기존프로젝트(v1)에서는 추후 저전력모드 뿐만 아니라 플레이어별 설정들이 늘어날 것으로 예상하여 해당 서버 api..

구현기능스페이스에서 발생하는 배경음악 등의 볼륨을 조절할 수 있는 기능을 스페이스 설정창에 구현해야했다. v1(Angularjs)프로젝트에서 input의 range타입을 활용하여 해당 값을 앵귤러 컨트롤러 함수에 넘겨주려고 했다.해당 input의 oninput으로 값만 바로 바인딩하면 해결될 것 같았고, 해당 부분에서 슬라이더의 값이 변경되는 순간마다 로그에 값이 잘 바인딩이 되는 것을 확인했다.oninput onchange 차이점onchange 이벤트는 input 태그의 초점(focus)를 잃은 순간에 작동한다. 즉, input태그의 데이터를 입력하고 다른 곳을 클릭 했을 때 작동함.oninput은 input, textarea 태그에서만 사용이 가능하다. onchange는 input, textarea,..