바닐라 타입스크립트로 구현한 자판기입니다.

프로젝트 실행 🚀

npm install

npm run start

Project history 🎞

1. vanilla JavaScript로 구현해보기 (초기모델)

• 바닐라 자바스크립트로 구현했던 초기의 밴딩머신

2. Class로 구현해보기

• Class로 다시 구현해보는 밴딩머신
  • dom 조작 및 utils 함수들 분리
  • 전반적인 디렉토리 구조 재조정

3. TypeScript 적용기

• 바닐라 자바스크립트에 타입스크립트 적용해보기
  • 웹팩 환경 설정
  • 타입스크립트 적용

---

개발환경 ⚙️

• Webpack

  • webpack
  • webpack-cli
  • webpack-dev-server

• Webpack plugin

  • copy-webpack-plugin
  • html-webpack-plugin
  • mini-css-extract-plugin
  • json-minimizer-webpack-plugin
  • tsconfig-paths-webpack-plugin

• Babel

  • @babel/core
  • @babel/preset-env
  • @babel/plugin-proposal-class-properties
  • @babel/preset-typescript
  • core-js
  • whatwg-fetch

• SCSS

  • sass
  • sass-loader
  • css-loader

• TypeScript

  • typescript
  • ts-loader

• Prettier

  • prettier
  • eslint-config-prettier
  • eslint-plugin-prettier

• ES Lint

  • eslint
  • eslint-plugin-import-helpers
  • @typescript-eslint/parser
  • @typescript-eslint/eslint-plugin

결과

pc ver.	mobile ver.