104%

프로젝트 구조 현재 프로젝트는 yanr workspace와 lerna를 활용한 모노레포로 구성되어 있다. 각 패키지에서는 웹팩을 사용하고 있는데 문제는 yarn install로 패키지를 설치할때 yarn workspace가 자동으로 각 패키지간 중복된 모듈들을 루트에 딱 한번만 설치해주는 hoist기능을 해준다는것이다. multiwrite라는 패키지를 webpack-dev-server로 오픈하려고 할때 위와 같은 오류가 발생했다. 원인은 multiwrite 패키지는 cra로 생성된 프로젝트라 웹팩 4.42.0버전을 요구하고 있는데 프로젝트 루트에 설치된 웹팩의 버전이 4.43.0이기 때문에 오류가 발생할 가능성이 있어서 이렇게 길고 긴 에러 메세지를 뱉어주고 있는것이다. 세 패키지의 웹팩 버전을 ^4.4..

atomic design을 알게 되고 실제로 적용하려고 하니 애매한 부분이 너무 많았습니다. 1. html태그당 atom 한개를 만들어야 하는데 그럼 모든 html 태그에 대해서 atom을 만들어야 하는 것 인가? 2. atom, molecules, organisms등은 재사용의 가능성을 높이기 위해서 컨텍스트를 배제해야 하는가? (예를들면, UserList라고 하는 molecule이 아니라 User라는 Context를 제외하여 컴포넌트를 List로 작성하는것.) 3. molecule과 organism의 경계는?? 4. 어플리케이션의 상태는 어디부터 들어가야하는가? 이러한 궁금증을 해결하기 위해 이 개념을 만든 bradfrost가 직접 쓴 글을 번역했습니다. 아토믹 디자인 창시자 bradfrost의 글 ..

아토믹 디자인은 컴포넌트를 5개의 단계로 나눈다. Atoms(원자) button, icon, input등과 같이 컴포넌트의 최소단위를 의미한다. (보통 HTML 태그가 원자의 단위가 된다.) 원자는 컬러, 폰트, 애니메이션등을 포함한다. MoleCules(분자) 원자를 결합하여 분자를 만든다. INPUT 원자와 BUTTON 원자를 합쳐 검색창 분자를 만들수있다. Organisms(유기체) 분자들을 결합하면 유기체가 된다. 검색창 분자와 메뉴 분자 두개가 합쳐서 헤더라는 유기체를 만들었다. 유저는 유기체 단위로 사이트를 인식하기 시작한다. 유기체는 독립적이어야 하며(standalone), 쉽게 여기저기 옮길수 있어야하고(portable), 재사용(reusable)이 가능해야한다. Template(템플릿) ..

도구 없이 모노레포를 구성하려고 하면 매우 귀찮다. 서로 의존하고 있는 패키지들을 npm link로 손수 연결해줘야 하기 떄문이다.(심볼릭 링크란?) 그래서 이런 작업들을 자동화 해주는 도구들을 소개한다. yarn workspace? lerna? yarn에서는 workspace기능을 제공한다. workspace란 한국말로 '작업공간'이라는 뜻인데, 이 '작업공간'안에 들어있는 여러개의 패키지를 관리해주는 기능이라서 이런 이름이 지어진 것 같다. lerna로도 패키지 관리를 할 수 있긴 하지만 yarn에서 workspace가 나오고 난 이후부터는 패키지 관리는 workspace로 하는 것이 보편화 되어 있다. 그래서 요즘은 보통 모노레포를 구성할때 yarn의 workspace와 lerna를 같이 사용하게 ..