todoList

상단 카테고리를 클릭하면 클릭에 맞는 CSS로 클릭한 곳을 알수 있으며, 카테고리 내용에 맞는 날짜별 투두리스트를 불러오는 내용이다. 카테고리는 4가지가 있지만 Week는 아직 미완성이다.모두 자바스크립트를 사용하여 만들었다.카테고리 클릭시 먼저 css를 삭제하여야

todoList를 javascript로 프로젝트를 진행하던 중 리스트를 추가했을시 이벤트가 먹히지 않는 상황에서 시간을 많이 허비하였다. 이벤트 위임시 버블링이생겨 추가되는 요소의 이벤트도 가져올수 있다는 개념이 떠올라서 시도해 보았다.가장 부모엘리먼트인 todo-li

데이터의 array이름은 TODOS이다.TODOS의 오브젝트는 {id,month,date,year,contents}로 구성되어있고, 새로 newTodo{}를 만들어서 데이터에 push하도록 하였다.newTodo의 id는 findIndex를 사용하여 마지막 index번호

기존에 하던 투두리스트를 리액트로 해보기전에 선택항목을 불러오는 투두리스트를 짜보았다.인풋값이 onChange할때마다 inputText로 들어가게 하였으며, 새로운 todos변수에 data형식 array를 만들어서 text안에 인풋값이 다시 들어가게 하였다.리액트에서

기존에 진행했던 투두리스트를 리액트와 스타일 컴포넌트를 공부 한 후에 다시 만들어 보았다. 상태관리를 해주는 리덕스를 경험 해보고자하여 리덕스 또한 적용 하였으며, 리덕스 툴킷을 최대한 이용하고자 노력 하였다.reset css와 아웃풋을 잡아주는 css는 style폴더

리스트의 아이템 more버튼을 클릭하면 새로운 기능 박스가 나오는 상황이다. 다른 아이템을 누르면 기존 box가 사라지고 한번 더 누르면 toggle되는 기능을 react로 구현해보았다.list => item => box 순으로 컴포넌트를 분리해서 만들어보았다.클릭한

기존에 react.js로 진행중이던 todoList의 기능을 추가하던중 drag and drop기능을 추가하여 보았다.rbd는 drag and drop을 쉽게 구현할수 있게 해주는 npm이다.1.import {DragDropContext, Droppable} from

폴더 구조를 보는 이유는 input에서 onChange될때의 상태가 todoList컴포넌트에도 영향을 미쳐야 하기 때문이다.input의 값을 받을 state를 container태그에서 생성하여 input컴포넌트와 list컴포넌트로 뿌려주었다.이제 onChange할때마다