🔷 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..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 어제 만들어둔 수정 함수를 이어서 개발하려고 하는데 복잡한 기능을 구현하려고 하니 많이 막막해졌다. 하나씩 정리해서 풀어나가보자 목표 수정 기능을 위해 구현해야 할 것 - 현재 표시된 목표를 클릭하면 해당 state의 title과 key가 GoalForm에 전달될 것 - GoalForm의 textfield에 state의 title이 적힐 것 - title을 수정하고 다시 등록버튼을 누르면 같은 key의 state가 업데이트 될 것 그리고 기존에 작성한 목표 컴포넌트를 보면 InputBase로 적혀있는데 이게 ..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 저번주에 만들었던 수정 부분이 뭔가 잘못되었다고 생각한다. 우선 readOnly 상태를 변경하는 것은 잘 되었으나, 우리가 생각했던 방식의 수정은 아닌 것 같다. readOnly 상태를 두되, 우리는 목표를 클릭하면, 다시 Input에 목표가 노출되고 그것을 다시 수정해서 확인 버튼을 통해 등록될 수 있도록 해야한다. 그래서 목표를 클릭하면 readOnly가 false가 되고 Input에 값이 노출되도록 해보자. 우선 offReadOnlyMode 함수를 수정해서 아래와 같이 만들어 준다. // 목표를 클릭하면..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘은 수정부분을 만들 차례! 실제로 책에서 도움을 받을 수 있는 부분은 서버 연결이라고 생각한다. 책에서는 엄청 단순한 앱을 만들기 때문이다 ㅠㅠ 어쨌든 투두 등록, 수정, 삭제가 기능의 대부분이니까 ... 수정에는 두 가지가 있다. 첫번째는 투두 상태 변화다. 투두에 체크를 하면 할 일을 완료한 상태이기 때문에 items state의 done 값이 true가 되게 하는 것과 이미 등록한 투두를 수정하는 것이다. 그리고 또 한 가지는 이미 등록한 투두를 클릭하면 내용을 바꿀 수 있게 하는 단계다. 이 단계가..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘 할 일은 책에 나온대로 Todo를 삭제하는 함수를 추가해본다. 투두메이트에서의 목표 삭제 버튼은 하단에 있고, 클릭하면 작성한 목표가 삭제된다. 요것은 나중의 자리배치의 문제일 것 같아서 우선 후딱 삭제 기능을 구현해본다. MUI의 ListItemSecondaryAction을 이용해서 삭제 버튼을 구현한다. 이 때 삭제 버튼 컴포넌트가 들어갈 곳은 이전에 만든 Goals.js 컴포넌트의 사이가 되겠다. 그리고 InputBase에 id와 name 속성이 있는지 확인한다. 이 id와 name이 삭제하거나 수..