Frontend development

Yarn & Lerna

• Yarn - npm을 대체하는 빠른 속도가 강점인 npm
• Yarn workspace
  • 여러 node 프로젝트를 하나의 workspace로 묶어서
  • 하부 package에서 dependency를 추가하면 root 디렉토리의 nodemodules에 install되고 local npm처럼 import하면 된다.
• Lerna - 여러 package를 묶어서 하나의 project로 관리할수 있게 도와주는 tool
  • npm을 각 package별로 수행하고 package사이의 dependency를 link해서 관리해준다.
  • 각 package를 서로 link해서 참조할수 있게 한다.
• Vuejs
  • vue-cli-serve 조사
• Typescript
  • javascript확장
• Webpack
  • dist에 javascript를 bundle하기 위한 도구
  • 여러 javascript는 loading이 느려짐
  • dependency graph를 그려 resource들을 bundling하는 역할. 장점은 빠름
  • https://nesoy.github.io/articles/2019-02/Webpack
• Babel
  • config에서 Babel 설정할수 있음
  • Webpack의 plugin중 하나
  • javascript 호환성 도구
  • ES6를 ES5 문법으로 변환하여 old 브라우저에 대응
• Cypress
  • 현재 안씀
  • selenium 대체제. 좀더 simple함
  • browser driver를 쓰지 않고, 전체 js를 bundle해서 빈 browser를 띄워서 테스트한다고함
• storybook
  • component가 잘 동작하는지 storybook으로 테스트
  • frontend-library의 lib-components에서 각 component를 테스트