🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 벌써 31번째 글이다. 그동안 텀이 좀 있었는데 회의를 통해 백엔드 팀원분들과 소통하고 있었고, MUI의 캘린더 컴포넌트인 DatePicker를 가지고 투두메이트의 캘린더처럼 구현하는 시간이 꽤나 소요되었다. 캘린더 만드는 것은 이 코드를 거의 대부분 참조했다. renderDay 함수를 이용해서 각 날짜의 한 칸 한 칸을 새로 렌더링 해 주는 방법이다. 클래스를 붙여 스타일을 주는 것으로 대부분 해결했다. Customize Material-UI Datepicker Wit..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 editGoal 함수를 만들어 보자 editGoal은 인자로 editGoalItem.item을 받아온다. 즉, 수정을 위해 선택된 title의 id와 수정된 title을 인자로 넘겨받는다. 그래서 editGoal 함수를 만들고 e를 찍어보면 다음과 같이 나온다. //목표 수정 함수 function editGoal(e){ console.log('e : ', e) } 현재 goal state의 id값과 넘어온 e의 id 값이 같은 것의 인덱스 번호를 찾아야 하기 때문에 findIndex 메소드를 이용해 인덱스를 ..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 id값 전달하기 지금부터 할 것은 어제 GoalEditForm의 TextField에 기존 title이 올라가도록 만들었으니 이제 id값도 전달해서 해당 id값과 goal state를 비교해서 업데이트 해주는 코드를 만들려고 한다. Goals 컴포넌트에서 editEventHandler를 통해 전달된 id 값을 통해 GoalEditForm에 title이 전달되는데 이 때 id 값도 같이 전달되고, 이 아이디값을 가진 state를 만들어 줄 수 있도록 함수를 만들자. GoalForm에서는 newGoalItem 이라..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 이제 해보아야 할 것은 이런 것이다. 조건문으로 어떤 상태가 add 이면, 컴포넌트가 Goal 컴포넌트 위 자리에 있고, 상태가 edit으로 바뀌면 이 Goal 컴포넌트 위에 있는 것이다. 왜 이렇게 생각했냐면 document.querySelector로 내부 내용을 바꾼다고 해도, 확인 버튼이 이미 onClick={onButtonClick}으로 설정되어 있기 때문에 수정할 때 얻은 아이디 값을 맞게 바꾸기 어려워서 이다. App에 State 만들기 처음 김다정님 책 따라 만들었던 것처럼 readOnly라는 s..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 어제 목표 출력 화면은 정리가 되었고 이제 작성된 목표를 클릭하면 Input에 값이 전달되고 그 값을 수정하면 해당 목표가 수정될 수 있도록 해야한다. 어떻게 하면 Input 태그에 값을 전달할 수 있을까 고민하다보니 이전에 PHP로 회원가입을 만들었던 화면이 떠올랐다. 회원가입 후 회원정보수정에 들어가면 회원 아이디를 이용해 데이터베이스에서 정보를 찾아 value에 뿌려줬었다. 이것도 그것과 같지 않을까.. Input 태그에 title 값 뿌리기 우선 클릭하면 editId를 인자로 받는 Input에 뿌리는 ..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 ListItemText로 구현된 목표 텍스트를 클릭하면 위의 GoalForm의 TextField로 다시 title state가 전달되도록 해보자 그러려면 ListItemText 태그에 onClick으로 이벤트핸들러 함수를 바인딩 시켜야 한다. editEventHandler 라는 함수를 목표 삭제 이벤트핸들러인 deleteEventHandler 근처에 만들어준다. 클릭하면 콘솔에 값이 정상적으로 입력되는지 확인하기 위해 console.log('id : ', e.target.id)과 console.log('tit..