├── .gitignore ├── README.md ├── css └── common.css └── template.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | # Bundle File 40 | dist/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # todo_react: 리액트 수업을 위한 저장소 2 | 3 | ### 최종 결과물 4 | 5 | 6 | ![thumnail](https://cloud.githubusercontent.com/assets/11900262/19553618/e376b0c2-96ef-11e6-81cc-265b38d31f18.png) 7 | 8 | 9 | ``` 10 | - 쓰기 기능 11 | - 삭제 기능 12 | ``` 13 | 14 | ### 기술 스택 15 | 16 | 17 | ``` 18 | - dependencies: react, react-dom, react-addons-update, react-redux, redux 19 | - devDependencies: babel-core, babel-loaser, babel-preset-react, react-hot-loader, webpack, webpack-dev-server 20 | - javaScript version: es5 21 | ``` 22 | 23 | 24 | ### 매 단원은 브랜치로 구분되어있음 25 | 26 | 27 | #### [devSetting](https://github.com/apple77y/todo_react/tree/00-devSetting) 28 | ``` 29 | - 웹팩을 활용한 배포용, 개발용 환경 구축, 개발용은 HMR을 활용 30 | ``` 31 | 32 | 33 | #### [helloWorld](https://github.com/apple77y/todo_react/tree/01-helloWorld) 34 | ``` 35 | - Hello World를 화면에 출력 36 | ``` 37 | 38 | 39 | #### [jsx](https://github.com/apple77y/todo_react/tree/02-jsx) 40 | ``` 41 | - 마크업을 jsx로 변환. jsx 사용 방법에 초점 42 | ``` 43 | 44 | 45 | #### [component](https://github.com/apple77y/todo_react/tree/03-component) 46 | ``` 47 | - jsx로 떼어놓은 부분을 성격에 따라 리액트 컴포넌트로 변환. 모듈화에 초점 48 | ``` 49 | 50 | 51 | #### [propsState](https://github.com/apple77y/todo_react/tree/04-propsState) 52 | ``` 53 | - props와 state의 개념 및 활용 방법 54 | ``` 55 | 56 | 57 | #### [lifecycle](https://github.com/apple77y/todo_react/tree/05-lifecycle) 58 | ``` 59 | - 리액트 컴포넌트가 화면에 렌더링 되는 과정 60 | ``` 61 | 62 | 63 | #### [event](https://github.com/apple77y/todo_react/tree/06-event) 64 | ``` 65 | - 클릭 이벤트로부터 데이터를 처리하는 과정 66 | ``` 67 | 68 | 69 | #### [stateless](https://github.com/apple77y/todo_react/tree/07-stateless) 70 | ``` 71 | - 1단계 개발이 끝난 후, 가능한 순수함수로 리팩토링 72 | ``` 73 | 74 | 75 | #### [propTypes](https://github.com/apple77y/todo_react/tree/08-propTypes) 76 | ``` 77 | - 데이터(props)의 형(type) 체크를 통한 개발 오류 방지 78 | ``` 79 | 80 | 81 | #### [redux](https://github.com/apple77y/todo_react/tree/09-redux) 82 | ``` 83 | - react-redux를 적용해 콜백 패턴을 리팩토링 84 | ``` 85 | -------------------------------------------------------------------------------- /css/common.css: -------------------------------------------------------------------------------- 1 | ul{ 2 | padding:0; 3 | list-style: none; 4 | } 5 | li{ 6 | padding: 10px 0px; 7 | border-bottom:1px solid #eee; 8 | } 9 | .container{ 10 | max-width:900px; 11 | font-size:18px; 12 | } 13 | .btn-container{ 14 | float: right; 15 | } 16 | .btn-container a{ 17 | margin-right:10px; 18 | } 19 | -------------------------------------------------------------------------------- /template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | To do template 4 | 5 | 6 | 7 | 8 | 9 |
10 |
11 |

To do list

12 |
13 |
14 | 15 | 16 | 17 | 18 |
19 |
20 | 38 |
39 | 40 | --------------------------------------------------------------------------------