와... 거의 다 만들었다...
만드는 과정에서 힘들었던점.
1. 완료버튼을 눌렀을때 Done 카드에 버튼만 넘어가고 제목과 내용이 넘어가지 않는 부분
2.Done 카드에서 삭제하기를 누르면 기존의것과 함께 삭제되는 부분
해결하기위해 한 생각
1. 위에 Working부분에서는 객체 key명을 title, comment이고
아래의 Done부분에서의 객체 key명이 doneTitle, doneComment로 인해
마지막 맵함수를 통해 jsx문법으로 key값을 불러오는문제가 있는 것은 아닌지에대한 생각이 들었다.(유길,윤건,우정님 모두 같은 생각)
2. 이부분은 이미 겪은 팀원의 조언을 통해 빠르게 해결방안을 얻었는데, id값이 기존의 것과 같기 때문이었다.(우정님 도움)
해결방안
1. 이부분은 {item.title}{item.doneTitle} 이런식으로 태그안에 jsx문법을 이용하여 넣어주는 것을 통해 해결하였다.
2. id를 랜덤하게 주기위해 random함수를 이용하였다. id를 변수로 선언하여 그 후 id는 모두 선언된 변수를 넣어주는 것으로 해결하였다.(유길님 해결방안제시)
const id = Math.random()
프로젝트 과정
수요일까지 강의를 모두 들은 후 밤 9시부터 새벽 1시까지 틀을 만들었다.
강의 17강 부터 21강까지 다시 들으면서 부분부분 만들기 시작하였다.
상단의 input과 추가하기 버튼 부분을 완료하고 이 버튼을 누르면
하단의 working부분에 카드 추가되는 기능과 카드내 삭제버튼을 누르면 삭제가되는 기능 + 완료버튼만들기
Done에서의 삭제하기 버튼 기능구현까지 완료하였다. + 취소버튼 만들기
약간의 CSS로 상단 전체와 하단의 카드라인정도 만듬.
목요일 아침 8시부터 완료버튼구현하기를 수행하였는데 위에 2가지의 힘들었던 점으로 인해 12까지 해결하였고,
팀원들과 화면공유및 live share를 통해 상의하면서 덕분에 더 힘들지 않고 빠르게 오류를 찾고 해결방안을 알 수 있었다. 힘든 부분을 제 일 처럼 나서서 도와주는 정말 너무좋은 팀원들을 만났다. 팀원분들께 너무 감사하다.
완료하기 버튼기능구현을 끝내고 나니 같은방법으로 취소버튼기능 구현을 하여 빠른시간내에 끝낼수 있었다.
모든 기능을 구현하고 CSS부분을 진행하였다.
모든 버튼들의 CSS, font 정렬, 카드 grid
*grid 정보 (참조 https://studiomeal.com/archives/533)
.app-style {
padding-left : 2rem;
gap : 12px;
display : grid;
grid-template-columns: repeat(5,1fr);
}columns : 가로나열
repeat(가로나열 카드 수, 1프레임) : 반복 나열하는 방법
깃 사용
레포지터리는 깃허브에서 직접만듬
git init
git branch
git remote add origin https://github.com/han0111/todolist.git
git branch -M main
git push -u origin main(오류발생)
구글링 답변
깃허브에서 pull 없이 push할 경우
기존 내용 삭제 문제가 생길 수 있기 때문.
해결방법 :
git init
git add.
git commit -m "message"
git remote add origin "깃허브주소"
git push -u origin master
그대로 했는데 또 같은 오류가 뜸
*이모티콘 사용하기(mac)
control + cmd + 스페이스
*숨김폴더 보기(mac)
cmd + shift + .
CSS
버튼 호버기능주기 : className이 red-btn인 곳에 hover기능을 주는데 마우스를 올리면 크기가 1.1배 커진다.
.red-btn:hover {
transform: scale(1.1);
}Enter로 입력하기
input태그들을 form태그로 묶는다.
자동새로고침을 방지하기위해 event매개변수로 event.preventDefault();를 화살표함수에 입력해주었다.
//추가하기 버튼 변수할당 및 form태그 Enter입력시 새로고침방지,카드추가
const clickAddButtonHandler = (event) => {
event.preventDefault();
const newPlan={
id,
title,
comment,
}
//배열 불변성 유지
setPlans([...plans,newPlan]);
//추가하기버튼 누른 후 내용삭제
setTitle("");
setComment("");
}
모든 기능 실현 후 다른조 분들과 이야기하다가 isDone: true, false 사용에 대해 말하게 되어
원래 만든 나의 코드에서 변경하는 것을 재영님의 도움과 함께 진행해 보았는데.... 결국 아직 하진 못했다....
먼저 컴포넌트 나누기가 끝나고 다시 해봐야할 사항이다.
*isDone : true, false 사용하는것 (재영님 도움부분)
과제는 제출함
내일의 할 일 컴포넌트 분리하기