index.html

이제 drag & drop 기능을 추가해 줄 것이다. 여기서는 패키지를 불러와서 기능을 추가해 줄 것인데 일단 설치해줘야 할것은 npm i react-beautiful-dnd 이놈이다. 이놈은 DragandDropContext 와 Draggable, Droppable 이 세가지를 지정해줘야 하는 모양이다. 우선 App.js가 DragDropContext가 될 것이다. import { DragDropContext } from 'react-beautiful-dnd' 임폴트 해주고 컴포넌트 안에 드래그가 끝나면 무슨일을 할껀지를 정의하는 함수를 하나 추가해준다음에 const onDragEnd = () => { //드래그 끝나면 할일 } DragDropContext 로 기존에 있던놈들을 한번 감싸준다. //pr..

생각보다 분량이 많지 않았다. 지래 겁먹어서 어렵겠다... 하고있었는데 생각보다 쉬웠다. 오늘 만든건 저번시간과 대충 비슷한 맥락의 리스트보드 안의 카드 추가였다. 복습하는 느낌으로 따라하니 괜찮았다. 우선 actions 폴더에 cardsActions.js 를 만들어 준다. 이후 저번 listsAction.js 내용을 복붙해주고(거의 같으니까) 세부 내용만 조금 수정해 주었다. import { CONSTANTS } from "../actions"; export const addCard = (listID, text) => { return { type: CONSTANTS.ADD_CARD, payload: {text, listID} }; }; 이놈은 파라미터로 listID 와 text 를 받는데 listID는..

오늘은 시간에비해 진전이 없었다. 그마저도 벨로퍼트님의 블로그(https://react.vlpt.us/) 없었으면 아직도 씨름하고 있었을것이 분명하다. 리덕스의 기본개념은 정말 너무 상세하고 자세하게 기술되어있기때문에 나처럼 삽질하지말고 차근차근 읽어본후 부딪히길 바란다...... 오늘 구현할 기능은 아래와 같다. Add another List를 누르고 나온 입력폼에 뭔가를 적고 ADD LIST 를 누르면 오른쪽처럼 리스트가 추가되는것이다. 일단 오늘 습득한 개념은 action과 dispatch 이다. 그리고 1일차에 이해가 안갔던 부분도 사실 사전세팅이었다. 오늘들어서 보니 action의 type에 따라서 새로운 상태를 만들어주는 reducer 였다. const listsReducer = (state ..

오늘 추가할것. 요놈들이다. +Add another Card 를 클릭하면 입력 폼이 나와서 카드를 추가 할 수 있고 오른쪽엔 Add another list 로 리스트보드를 생성할 수 있게 해준다. 하지만 Add another card 와 Add another list 는 다른 컴포넌트가 아니라 하나의 컴포넌트에서 들어오는 props에 따라서 텍스트와 스타일만 바뀌게 해줄 것이다. 우선 components 폴더에 trelloActionButton.js 파일을 생성해 준다. 이놈이 저 카드를 추가해주고 리스트를 추가해주고 하는 컴포넌트가 될 것이다. 위에서 보면 알수 있지만 텍스트 이외에도 + 모양의 아이콘이 하나 있다. 이놈은 material-ui 에서 Icon 으로 가져올것이다. import React ..

기존 스터디도 To Do List 만들기지만 훌륭한 개발자가 되기위해 꼭만들어야하는 어쩌구 9개 인가 6개인가를 보고 갑자기 삘꽂혀서 만들기 시작했다. (유튜브 선생님의 지도아래..) 아직 뭐가뭔지 모르니 차근차근 정리하며 만들어보려고 한다. 1. 만들것 (Trello) 이놈이다. 투두리스트와 비슷하지만 drog & drop 도 되고 이것저것 참 알차다. 2. 설계 이미 만들고 정리하는거라 이렇게 정리가 되더라. 리듀서에 있는 listReducer 에서 리스트를 만들어주고 각 컴포넌트에 뿌려주고 state도 변화한다. 일단 임의로 리스트를 만들어 넣어줬다. Title가 큰 보드(TrelloList)를 만들어 줄꺼고 Text가 그 안에 자잘한 카드(TrelloCard)를 만들어 줄 것이다. 3. 설치 우선..