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 프로젝트는 멀티레포로 관리되고 있습니다. 아… 물론 이전에는 모놀리틱하게 관리되고 있었습니다. 네, 태초에는요. 그런데 그것들이 점점 커지면서 아래와 같은 문제들이 불거지기 시작하더군요. 서로간 의존성이 커지면서 관심 분리가 어려워지고 뭐 하나 리팩토링을 하거나, 설계를 할 때에 그 범위 자체가 거대해서 비효율적이고 전혀 다른 프로젝트를..

https://dev.to/bespoyasov/clean-architecture-on-frontend-4311 위 글의 일부를 번역 & 정리한 글입니다. 아키텍처와 설계 시스템 설계는 나중에 다시 조립할 수 있도록 시스템을 분리하는 것입니다. 그리고 너무 많은 작업 없이 쉽게 조립할 수 있어야 한다는 것입니다. 아키텍처의 또 다른 목표는 시스템의 확장성입니다. 프로그램에 대한 요구사항은 지속적으로 변경되며, 새로운 요구사항을 충족하기 위해 쉽게 변경할 수 있어야 하는데, 클린 아키텍처는 이러한 목표를 달성하는 데에 도움을 줍니다. 클린 아키텍처 애플리케이션 도메인에 대한 근접성에 따라, 책임과 기능 부분을 분리하는 방법입니다. 도메인 이것은 실제 세계의 변환을 반영하는 데이터 변환입니다. 예를 들어, 제..

http://www.javapractices.com/topic/TopicAction.do?Id=205 위 링크의 글을 번역하여 나름대로 정리한 글입니다. 위 글은 자바의 package 를 어떤 기준으로 나눌지에 대한 글입니다. 되게 당연해보이고 이미 아는 것 같은 내용이지만, 생각보다 당연하게 뇌피셜 기준으로 디렉토리를 막 만드는 나를 발견합니다. 프로젝트 디렉토리 구조를 세울 때마다 제발 이 글 좀 보고 각성하라고 미래의 나에게 이 글을 바칩니다. 응용 프로그램을 빌드할 때 첫 번째 질문은 "어떻게 패키지로 나눌 수 있습니까?"입니다. 일반적인 비즈니스 애플리케이션의 경우 이 질문에 답하는 두 가지 방법이 있는 것 같습니다. 기능별 패키지 단일 기능과 관련된 모든 항목을 단일 디렉토리에 배치합니다. 그..

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. 나와 같은 문제를 겪고 있는 ..

마이크로 프론트앤드는 마이크로 서비스의 개념을 프론트엔드 세계로 확장한 개념이다. 마이크로 서비스처럼 전체 화면을 작동할 수 있는 단위로 나누어 개발한 후 서로 조립하는 방식이다. Main Concept 기술 독립성 각 작동 단위들은 기술적으로 독립적일 수 있어야 한다. 각 작동 단위에 사용된 프론트앤드 기술(React, Vue, Vanilla JS 등)에 상관 없이 조합이 가능해야 한다. 컨텍스트 독립성 각 작동 단위들이 같은 프레임워크를 사용하더라도, 컨텍스트를 공유해선 안된다. 독립적인 애플리케이션을 자체적으로 구축해야 하고, 상태 공유나 전역 변수에 의존해서는 안된다. 네임스페이스를 활용한 분리 각 작동 단위의 격리가 불가능한 경우, 네이밍 컨벤션에 따라 prefix 등으로 네임스페이스를 활용한다..

Conventional Commits? 커밋 메세지에 사용자와 기계 모두가 이해할 수 있는 의미를 부여하기 위한 스펙 명확한 커밋 히스토리를 생성하기 위한 간단한 규칙을 제공 커밋 히스토리를 이용하여 더 쉽게 자동화된 도구를 만듦 이 컨벤션은 커밋 메세지에 신규 기능 추가, 문제 수정, 커다란 변화가 있음을 기술함으로써 유의적 버전(Sementic Versioning)과 일맥상통 git 으로 commit 시에 일괄된 양식을 유지 → 그 양식을 바탕으로 버전 관리나 Change Log 를 자동으로 만들 수 있음 커밋 메시지 구조 [적용 범위(선택 사항)]: [본문(선택 사항)] [꼬리말(선택 사항)]커밋 메시지 구조적 요소 Git hook에 Conventional Commit 적용하기 Commit 메시지를..

실행 컨텍스트 정의 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념 = 실행 가능한 코드가 실행되기 위해 필요한 환경 자바스크립트 엔진은 실행 가능한 코드를 실행하기 위해 필요한 정보를 형상화하고 구분하기 위해 실행 컨텍스트를 물리적 객체의 형태로 관리한다. 실행 가능한 코드 전역 코드 : 전역 영역에 존재하는 코드 함수 코드 : 함수 내에 존재하는 코드 Eval 코드 : eval 함수로 실행되는 코드 Eval 함수? 문자로 표현 된 JavaScript 코드를 실행하는 함수. 인자로 받은 코드를 caller의 권한으로 수행하므로, 제 3자 코드가 eval()이 호출된 위치의 스코프를 볼 수 있으며, 비슷한 함수인 Function으로는 실현할 수 없는 공격이 가능하여 절대 쓰지 않는 것이 좋다. 실행..

프로토타입(Prototype) 뽀개버리기!! 함수도 객체다 함수의 기본 기능인 코드 실행뿐만 아니라, 함수 자체가 일반 객체처럼 프로퍼티들을 가질 수 있다. function add(x, y) { return x+y; } add.status = 'OK'; console.log(add.status) add( ) 함수를 생성할 때 함수 코드는 함수 객체의 [[Code]] 내부 프로퍼티에 자동으로 저장된다(이것은 ECMAScript 명세서를 참조한 것이다* ). add() 함수에 마치 일반 객체처럼 status 프로퍼티를 생성하고 저장한 것을 확인할 수 있다. status 프로퍼티도 일반 객체에서의 접근 방식처럼 add.status를 이용해 접근 가능하다. 이처럼 자바스크립트에서 함수는 특정 기능의 코드를 수행..