FE3 [TO-DO-App] 투두앱을 만들어보자 by React - 02. 할일 목록 저장 TodoList 컴포넌트 구현 - 리액트는 컴포넌트를 결합하여 만들어진다. 이 앱의 메인 컴포넌트인 를 만들어보자 코드의 주요 특징은 다음과 같다 - 컴포넌트를 선언하는 export default function 을 통해 선언. - useState를 통하여 상태를 정의하고 그것을 설정하는 함수인 setTodos를 가지고 있는 map을 선언. - todos에 모든 할일 목록을 가지고 있음 - id는 UUID를 통해서 랜덤화 시키고, 실제 할일은 text라는 prop에 넣는다 - 활성 상태 여부를 status라는 prop으로 선언. - handleAdd라는 함수로 추가하는 로직을 만들고 그 과정에서 useState의 setTodos를 사용 - AddTodo 라는 컴포넌트를 선언하고 추가 기능을 구현한다. (.. 2023. 8. 6. [TO-DO-App] 투두앱을 만들어보자 by React - 01. 기능 요구사항 정의 간단하게 할일을 관리하는 투두앱을 리액트로 만들어보자. 1. 기능 요구사항 - 전체아이템 보여주기 - 아이템 추가 - 아이템 삭제 - 아이템 체크박스 - 아이템 필터링(활성, 완료등) - 다크모드 지원 전체 코드는 아래 깃헙에서 보실 수 있습니다! https://github.com/jhshim0131/todo-app 2023. 8. 6. React 관련 Tool FrontEnd 개발에서 자주 쓰게 되는 Tool을 알아보자. Babel : 바벨은 ES6로 쓰여진 코드를 ES5로 변환해준다. Webpack : 리소스(Assets)들을 번들링 해준다 https://webpack.js.org/ ESLint :코드의 잘못된 부분, 문법적으로 틀린 부분을 지적해준다 Jest : 자바스크립트 테스팅 프레임워크 PostCSS : css 라이브러리 2023. 8. 6. 이전 1 다음
