할 일 목록

# 추후 도전 과제

# git link :

# 개발 환경 : HTML5, Sass, Rollup.js

1. 개발환경 설정하기

1) rollup 설정

- rollup basic setting & plugin

• rollup 설치 : npm i -D rollup
• scss rollup compile plugin : npm i -D rollup-plugin-scss sass
  ** 같이도 가능 : npm i -D rollup rollup-plugin-scss sass

2) eslint, prettier 설치 및 설정

3) html, css 만들기

2. todo list 기능 구현

1) 입력 기능

2) 삭제 기능

3) 수정 기능

4) 저장 기능

3. 필터 기능 구현

4. Router 구현

Learn more

#1. Router

Router 란?
쉽게 말해 페이지 이동을 의미한다.
링크 버튼을 클릭했을 때, 그 링크 경로에 맞는 컴포넌트 페이지들을 보여주는 개념이다.
새로운 페이지의 로드는 아니고 업데이트 되는 새로운 페이지만 path와 element로 연결하여 컴포넌트를 불러오는, 화면만 바뀌는 기능이다.
(보통 레거시 스타일로 작업할 땐, 경로 클릭시 새로운 페이지가 로딩이 되는데 너무나도 데이터 자원낭비이다!)

1) hash

window hashchange 이용

2) history API

#2. Local/Session Storage

개발자 도구 > Application 탭에 local/session 스토리지 내용 보임

localStorage > 데이터 지우지 않는 이상 해당 url에 영원히 감
sessionStorage > 창이나 탭을 닫으면 데이터가 날라감

.setItem()
.getItem()