Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ahngh0113/todolist_ts
vanillaJS로 만들었던 todolist를 typescript로 변환
https://github.com/ahngh0113/todolist_ts
babel git-flow html5 netlify scss typescript webpack
Last synced: about 1 month ago
JSON representation
vanillaJS로 만들었던 todolist를 typescript로 변환
- Host: GitHub
- URL: https://github.com/ahngh0113/todolist_ts
- Owner: ahngh0113
- License: mit
- Created: 2021-09-26T11:43:38.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-10-06T05:27:29.000Z (over 3 years ago)
- Last Synced: 2024-09-10T13:44:23.096Z (4 months ago)
- Topics: babel, git-flow, html5, netlify, scss, typescript, webpack
- Language: TypeScript
- Homepage: https://skytodo-ts.netlify.app/
- Size: 854 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TODO LIST
**할 일을 적고 체크, 수정, 삭제할 수 있는 웹앱**
Tech Stack
 
 
 
 
 
 
 
### HTML5
- favicon과 title을 지정하여 문서의 주제를 명확히 함.
- header, main, h1 태그를 통해 시멘틱한 구조(의미있는 내용을 의미있는 태그로)를 나타냄.
### SCSS
- SCSS의 장점인 변수와 함수를 통해 정해진 색상, px은 변수로 만들어서 사용.
- 또한 자주 설정하는 flex or position같은 경우에도 mixin을 이용하여 사용하기 편하게 구성.
### TypeScript
- TS를 통해 변수와 함수에 타입을 지정하여 개발자의 개발의도에 유도할 수 있게 개발
### Node.js
- node환경에서 개발.
- npm을 통해 webpack에 필요한 모든 것(webpack, typescript, babel, loader, plugin...), sweetalert, reset-css를 다운받아 개발.
### Webpack
- Webpack을 이용하여 번들 사용.
- 'HtmlWebpackPlugin'을 통해 기존 HTML 사용.
- 'MiniCssExtractPlugin'로 css파일을 생성하여 HTML에 연결.
- 'CleanWebpackPlugin'로 필요없는 파일 삭제.
- 'CopyPlugin'로 static폴더를 지정하여 이미지나 폰트 파일을 저장.
- ts, babel, sass, css loader로 파일 읽기
### Babel
- babel을 통해 ES6^의 문법을 ES5이하의 문법으로 변환하여 모든 브라우저에서 동작할 수 있게 함.
### Netlify
- 배포를 도와주는 사이트.
##
## Product
> 이미지 클릭 시 페이지 이동
[
](https://skytodo-ts.netlify.app/)
## VanillaJS Version
> https://github.com/Ahn-GiHwan/todolist_vanillaJS
## React Version
> https://github.com/Ahn-GiHwan/todolist_react
## v2.1.0
- input에 focus가 false일 때 enter 클릭 시 keypress 이벤트 실행 됨
-> input에 focus가 true여야만 keypress 이벤트 적용
- list에 아무것도 없을 경우 '할 일을 적어주세요' 문구 출력
## v2.1.1
- 수정 시 호출되는 모달창의 input placeholder값을 수정 할 todo값이 나오도록 수정