토이프로젝트
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 29WEB Dev/ToyProject 2022. 1. 16. 18:31
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 id값 전달하기 지금부터 할 것은 어제 GoalEditForm의 TextField에 기존 title이 올라가도록 만들었으니 이제 id값도 전달해서 해당 id값과 goal state를 비교해서 업데이트 해주는 코드를 만들려고 한다. Goals 컴포넌트에서 editEventHandler를 통해 전달된 id 값을 통해 GoalEditForm에 title이 전달되는데 이 때 id 값도 같이 전달되고, 이 아이디값을 가진 state를 만들어 줄 수 있도록 함수를 만들자. GoalForm에서는 newGoalItem 이라..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 28WEB Dev/ToyProject 2022. 1. 16. 01:51
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 이제 해보아야 할 것은 이런 것이다. 조건문으로 어떤 상태가 add 이면, 컴포넌트가 Goal 컴포넌트 위 자리에 있고, 상태가 edit으로 바뀌면 이 Goal 컴포넌트 위에 있는 것이다. 왜 이렇게 생각했냐면 document.querySelector로 내부 내용을 바꾼다고 해도, 확인 버튼이 이미 onClick={onButtonClick}으로 설정되어 있기 때문에 수정할 때 얻은 아이디 값을 맞게 바꾸기 어려워서 이다. App에 State 만들기 처음 김다정님 책 따라 만들었던 것처럼 readOnly라는 s..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 27WEB Dev/ToyProject 2022. 1. 15. 20:38
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 어제 목표 출력 화면은 정리가 되었고 이제 작성된 목표를 클릭하면 Input에 값이 전달되고 그 값을 수정하면 해당 목표가 수정될 수 있도록 해야한다. 어떻게 하면 Input 태그에 값을 전달할 수 있을까 고민하다보니 이전에 PHP로 회원가입을 만들었던 화면이 떠올랐다. 회원가입 후 회원정보수정에 들어가면 회원 아이디를 이용해 데이터베이스에서 정보를 찾아 value에 뿌려줬었다. 이것도 그것과 같지 않을까.. Input 태그에 title 값 뿌리기 우선 클릭하면 editId를 인자로 받는 Input에 뿌리는 ..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 26WEB Dev/ToyProject 2022. 1. 13. 00:36
🔷 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..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 25WEB Dev/ToyProject 2022. 1. 13. 00:25
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 어제 만들어둔 수정 함수를 이어서 개발하려고 하는데 복잡한 기능을 구현하려고 하니 많이 막막해졌다. 하나씩 정리해서 풀어나가보자 목표 수정 기능을 위해 구현해야 할 것 - 현재 표시된 목표를 클릭하면 해당 state의 title과 key가 GoalForm에 전달될 것 - GoalForm의 textfield에 state의 title이 적힐 것 - title을 수정하고 다시 등록버튼을 누르면 같은 key의 state가 업데이트 될 것 그리고 기존에 작성한 목표 컴포넌트를 보면 InputBase로 적혀있는데 이게 ..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 24WEB Dev/ToyProject 2022. 1. 11. 00:24
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 저번주에 만들었던 수정 부분이 뭔가 잘못되었다고 생각한다. 우선 readOnly 상태를 변경하는 것은 잘 되었으나, 우리가 생각했던 방식의 수정은 아닌 것 같다. readOnly 상태를 두되, 우리는 목표를 클릭하면, 다시 Input에 목표가 노출되고 그것을 다시 수정해서 확인 버튼을 통해 등록될 수 있도록 해야한다. 그래서 목표를 클릭하면 readOnly가 false가 되고 Input에 값이 노출되도록 해보자. 우선 offReadOnlyMode 함수를 수정해서 아래와 같이 만들어 준다. // 목표를 클릭하면..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 23WEB Dev/ToyProject 2022. 1. 6. 23:47
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘은 수정부분을 만들 차례! 실제로 책에서 도움을 받을 수 있는 부분은 서버 연결이라고 생각한다. 책에서는 엄청 단순한 앱을 만들기 때문이다 ㅠㅠ 어쨌든 투두 등록, 수정, 삭제가 기능의 대부분이니까 ... 수정에는 두 가지가 있다. 첫번째는 투두 상태 변화다. 투두에 체크를 하면 할 일을 완료한 상태이기 때문에 items state의 done 값이 true가 되게 하는 것과 이미 등록한 투두를 수정하는 것이다. 그리고 또 한 가지는 이미 등록한 투두를 클릭하면 내용을 바꿀 수 있게 하는 단계다. 이 단계가..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 22WEB Dev/ToyProject 2022. 1. 5. 00:10
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘 할 일은 책에 나온대로 Todo를 삭제하는 함수를 추가해본다. 투두메이트에서의 목표 삭제 버튼은 하단에 있고, 클릭하면 작성한 목표가 삭제된다. 요것은 나중의 자리배치의 문제일 것 같아서 우선 후딱 삭제 기능을 구현해본다. MUI의 ListItemSecondaryAction을 이용해서 삭제 버튼을 구현한다. 이 때 삭제 버튼 컴포넌트가 들어갈 곳은 이전에 만든 Goals.js 컴포넌트의 사이가 되겠다. 그리고 InputBase에 id와 name 속성이 있는지 확인한다. 이 id와 name이 삭제하거나 수..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 21WEB Dev/ToyProject 2022. 1. 4. 00:05
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 이제는 + 모양 버튼을 누르면 리스트가 추가되어야 한다. 이것도 김다정님의 책을 참고해서 일부분 변형해서 구현해보려고 한다. 지금 문제는 원래 todomate의 추가 버튼이 상단 바 오른쪽에 있어서 나도 그렇게 만들어야 한다면, route 별로 BasicNavBar가 다르게 보일 수 있도록 해야하는건지, 아니면 그냥 화면에 구현하고 위치만 상단으로 옮겨놔도 되는지 이다. 고민하다가 일단 버튼을 만들어서 상단에 올려놓고, 나중에 조건문을 쓰던 뭘 하던 해야겠다고 생각... 1. Todo를 추가하는 컴포넌트 만들..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 20WEB Dev/ToyProject 2022. 1. 2. 14:12
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 이제 즐거운 마크업 시간은 가고 진짜 기능들을 구현해놔야 하는 시점이 된 것 같다. 이제 Main의 Feed 부분을 만들어야 하는데, 이 Feed는 Goal(목표)의 하위에 들어가는 todo를 입력하고, 관리하는 부분이라 Goal 페이지 먼저 만들어야 한다는 사실을 깨달았다. 이런 순서도 없이 마구잡이로 만드려고 하니 오히려 내 Todo가 정리가 안되는 느낌이다. 그래서 회피로 가득차는 바람에 어제도 조금 코드를 건드렸지만 기록을 남기지 못해서 오늘 몰아서 기록한다. 우선 주말 계획은 Goals ▶ Feed ..