WANZARGEN

이 글은 npm 공식 문서를 이해할 목적으로, 제가 이해할 수 있는 언어로 바꾸어 쓴 글입니다. TMI 현재 개발하고 있는 멀티 클라우드 플랫폼, 스페이스원(SpaceONE) 콘솔 웹 어플리케이션은 내부적으로 스페이스원 디자인 시스템 스페이스원 콘솔 서비스 내에서 전반적으로 사용되는 코어 라이브러리 를 패키지로 설치하여 사용하고 있습니다. 그리고 이렇게 멀티레포 방식으로 사용하는게 개발 효율을 무척 떨어뜨리더군요. (이전 글 우리 팀 FE 파트에서는 멀티레포가 왜 벅찰까 참고) 그래서 모노레포를 PoC 로 적용하려고 찾아다니다가, 간편하게 해결할 수 있는 npm workspaces를 찾아냈습니다. 설명 워크스페이스(workspaces)는 npm cli의 단일 최상위 루트 패키지 내에서 로컬 파일 시스템의..

개발하고 있는 스페이스원(SpaceONE) 콘솔 프로젝트에 모노레포를 도입하면서 TypeScript의 reference 기능을 알게되었습니다. 그러나 역시 최소한의 정보를 가지고 뛰어들면 삽질의 여정을 만나게 됩니다. 그래서 다시 공식 문서로 돌아와 하나하나 뜯어보며 이해하기로 결심하고 이 글을 씁니다. 이 글은 Typescript 의 공식 문서에서 References 와 관련된 부분을 개인적으로 이해할 목적으로 의역한 글입니다. 마지막 부분에 당장 불필요해서(이해가 안되어서) 빼먹은게 있긴 한데…. 언젠가 업데이트 할 날이 오겠죠 ㅠㅠ 타입스크립트의 프로젝트 참조가 뭔가요? 프로그램을 더 작은 조각으로 구성할 수 있는 TypeScript 3.0의 새로운 기능입니다. 이렇게 하면 빌드 시간을 크게 개선하..

저는 멀티 클라우드 플랫폼, 스페이스원(SpaceONE)의 웹 Console FE(프론트엔드) 개발을 하고 있습니다. 이 글은 SpaceONE Console을 개발하는 우리 팀 프론트엔드 개발자들의 개발 경험(DX)를 높이기 위해, 멀티레포 방식을 두고 무엇을 고민했는지 그 흔적을 남겨두기 위한 포스트입니다. 스페이스원 프론트엔드의 멀티레포 SpaceONE Console 프로젝트는 멀티레포로 관리되고 있습니다. 아… 물론 이전에는 모놀리틱하게 관리되고 있었습니다. 네, 태초에는요. 그런데 그것들이 점점 커지면서 아래와 같은 문제들이 불거지기 시작하더군요. 서로간 의존성이 커지면서 관심 분리가 어려워지고 뭐 하나 리팩토링을 하거나, 설계를 할 때에 그 범위 자체가 거대해서 비효율적이고 전혀 다른 프로젝트를..

TL;DR 솔루션 🧙🏽‍♀️: router.onError 콜백으로 chunk load 에러 핸들링 let nextPath: string; router.onError((error) => { console.error(error); if (error.name === 'ChunkLoadError') { window.location.href = nextPath || '/'; } }); 현재 Vue로 개발하고 있는 멀티 클라우드 플랫폼, SpaceONE(스페이스원)을 개발하면서 vue router chunk load fail 이슈를 만났다. 이 문제는 생각보다 간단히 해결되지만, 헛다리를 제대로 짚으면 매우매우 고생한다... 이 글은 그렇게 매우매우 고생한 이야기를 공유함으로써, 1. 나와 같은 문제를 겪고 있는 ..