그림판

# 추후 도전 과제

# git link :

# 개발 환경 : HTML5, Sass, Vanilla JS, Parcel, Canvas

1. 개발환경 설정하기

1) parcel 설정

- parcel basic setting & plugin

• parcel 설치 : npm i -D parcel
• scss parcel compile plugin : npm i -D @parcel/transformer-sass
  ** 같이도 가능 : npm i -D parcel @parcel/transformer-sass

- package.json

  "source": "index.html",
  "scripts": {
    "start": "parcel",
    "build": "parvel build --public-url ./"
  },

• index.html 기준으로 파일 찾기 옵션 : --public-url ./
  -> 배포 시키기 전후 모두 적용해서 파일 찾기 가능
  ./ 안 넣으면 배포된 url 기준으로 파일 찾음
  배포 전 로컬에서는 파일 못찾아서 적용이 안됨

2) eslint, prettier 설치 및 설정

2. 선 그리기 구현

참고 : MDN getBoundingClientRect

3. 지우개 구현

4. 미리보기(내비게이터) 구현

5. 실행 취소 구현

6. 초기화 구현

7. 다운로드 구현

Learn more

#1. class/id 사용

• class : 스타일 적용 시 사용
• id : script/event 적용 시 사용