index.html

오늘 추가할것. 요놈들이다. +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. 설치 우선..

import React, { useState, useEffect } from 'react'; function App() { const [number, setNumber] = useState(0) const onclicked = () => { setNumber(number + 1) } useEffect(()=>{ console.log('값이 바뀜') }, [number]) return ( {number} +1 ) } export default App; 위와 같이 작성했을때(카운터 예제에 useEffect만 추가함) useEffect는 변화를 캐치하는 놈이며 첫번째 파라미터 자리에는 실행하고싶은 함수를 넣어주면 되고 두번째 파라미터에는 빈 배열을 넣어준다(이놈은 deps 임). 기본적으로 빈 배열일 경우 첫..

1. findIndex const imarray = [{text:"aa", id:1}, {text:"bb", id:2}, {text:"cc", id:3}] const index = imarray.findIndex(i => i.text == "bb") //index에 1을 반환 객체가 들어있는 배열에서 배열의 특정 값을 조회하여 찾고 싶을때 쓸 수 있는 함수이다. 인자로 각 배열들을 받아 조건과 부합하면 해당객체의 배열번호를 알려주고(몇번째에 있는지) 만약 값이 배열 안에 존재하지 않는다면 -1을 반환한다. 2. reduce const array = ["a", "b", "c", "d"] const result = array.reduce((a, b, c, d) => {return a + b}, 1) cons..

function deletWord(e){ e.preventDefault(); const span = e.target; const li = span.parentNode; wordList.removeChild(li) const cleanWord = wordListArr.filter(function(element){ return element.id !== parseInt(li.id); }) wordListArr = cleanWord; saveWord() } Todo 리스트를 만들때 리스트 하나하나를 개별적으로 지워야 할때 사용한 filter함수. 배열.filter 로 작성하고 뒤에 콜백함수의 인자(element)로 각 배열들이 들어오고 필터는 들어온 배열과 다른 값을 비교하여 true 이면 유지하고 false..

for(let i = 0; i