변덕쟁이 개발자

이 글은 인프런의 견고한 JS 소프트웨어 만들기를 학습하며 작성한 글입니다. 강좌에서는 Jasmine을 사용했지만 글에서는 Jest를 사용했습니다. 배경 강좌에서 학습한 내용과 직접 만들어본 예제를 강좌에서 소개한 TDD의 단계에 따라 구현해나가는 과정을 정리했습니다. TDD의 3단계 1단계 : 적색 단계 Unit Test 코드를 작성합니다. Unit Test 코드는 준비(arrange), 실행(act), 단언(assert) 패턴을 따릅니다. 기능 구현 전 상태이므로 테스트가 무조건 실패하며 이를 적색 단계로 표현합니다. 2단계 : 녹색 단계 1단계에서 작성한 Unit Test 코드가 성공할 수 있도록 최소한의 기능을 구현합니다. Unit Test가 모두 통과하며 이를 녹색 단계로 표현합니다. 3단계 :..

배경 TDD를 학습하며 Jest의 기본 문법을 정리한다. Jest Facebook에서 만든 테스팅 프레임워크 "Delightful Javascript Testing" https://jestjs.io/ 시작하기 jest 설치 $ npm run i -D jest babel 설정 $ yarn add --dev babel-jest @babel/core @babel/preset-env // babel.config.js module.exports = { presets: [ [ '@babel/preset-env', { targets: { node: 'current', }, }, ], ], }; typescript 설정 $ yarn add --dev @babel/preset-typescript // babel.conf..

배경 fork를 사용할 수 없는데 다른 프로젝트의 변경사항을 지속적으로 가져와야하는 상황이 있었다. 이를 해결하기위해 방법을 찾아본 결과 remote를 추가한 뒤 merge를 할 때 --allow-unrelated-histories 옵션을 사용해서 해결할 수 있었다. 삽질을 많이 했었기 때문에 간단한 거지만 기록해보려한다. remote 추가하기 현재 등록된 remote는 내 프로젝트다. $ git remote -v origin https://github.com/woriwori/empty-project.git 변경사항을 트랙킹하고 싶은 프로젝트를 upstrem remote 로 등록한다. $ git remote add upstream https://github.com/woriwori/upstream-proj..

배경 회사에서 구현해야 하는 앱은 일반 사용자용 화면과 관리자용 화면이 필요하다. 페이지는몇 개 없지만 업무 상 이런 류의 앱을 만들어야 할 상황이 자주 온다. 이제까지는 한개의 레포지토리에서 vue cli를 사용하여 user, admin 프로젝트를 각각 만들어 사용했는데 user와 admin의 룩앤필이 같아서 중복 코드가 매우 많았다. 레포지토리를 user, admin으로 분리하기엔 페이지가 너무 적어서 비효율적이라 한개의 레포지토리는 유지하되 중복코드만 분리하는 방법을 고민하던 중 vue cli의 pages 옵션을 활용해보기로 했다! Pages Type: Object Default: undefined Build the app in multi-page mode. Each "page" should hav..