리액트를 배우기 전,
바닐라 자바스크립트로 할일 목록을 만들어봅시다.
이후 리액트의 작동 원리나 필요성을 더 잘 이해할 수 있을뿐만 아니라
자바스크립트로 무엇이든 할 수 있다는 자신감(!)을 얻을 수 있습니다.
아래 순서대로 작업하세요!
-
하드코딩 되어있는 할일 목록을 배열 형태의 데이터로 표현하고, 이것을 화면에 렌더링해봅시다.
- index.js에서 작업하세요!
-
할일을 추가할 수 있도록 버튼에 이벤트 핸들러를 추가해봅시다.
-
할일을 삭제할 수 있도록 버튼에 이벤트 핸들러를 추가해봅시다.
-
할일이 완료되었음을 체크할 수 있도록 만들어봅시다.
- 할일을 객체로 관리해야할 필요성이 느껴집니다.
- 객체의 프로퍼티에 완료여부를 나타낼 수 있는 속성을 추가합니다.
- 버튼에 이벤트 핸들러를 추가해봅시다.
심화
- 마지막으로 MVC 패턴을 적용해 코드를 분리시켜봅시다. 클래스를 사용한 객체지향 패러다임을 적용해볼 수 있습니다.
- 점점 늘어나는 코드를 어떤 기준으로 분리하거나 관리할 수 있을지 고민해보세요.**
- 좋은 변수명과 코드스타일에 대해 고민하고 적용해보세요.*
- 일정한 커밋 컨벤션을 사용할 수 있도록 노력해보세요.
- 커밋을 적절한 작업단위로 나눌 수 있도록 노력해보세요.
- 리액트로 동일한 어플리케이션을 구현한다면 어떤 차이가 있을까요?
- 리액트를 배운 후 비교해봅시다.**