23.02.03-23.02.09 주특기 입문 주차 / React, todo-list 만들기
주간 일정
2월 3일(금) ~21시 S.A과제 회원가입 html 만들고, 배포
2월 9일(목) 10시-12시 입문주차 퀴즈
2월 9일(목) ~21시 개인 입문주차 과제 제출(todo) / 2월 8일 완료
2월 9일(목) ~21시 팀 과제 노션 작성 제출
ToDo List
- 컴포넌트 분리 없이 app.js / app.css만 이용해서 todo-list 만들기
- 컴포넌트 분리 후 만들기
문제점
- 컴포넌트 분리로 시작을 하였는데, input이 출력되지않음
- input이 출력되고 난 후에는 버튼들의 기능이 제대로 작동하지 않음
시도
우선 컴포넌트 분리가 익숙하지 않으므로, 한개의 파일에 모두 작성해보기 위해 강의를 새롭게 들으며 시작
input박스는 정상으로 출력되나 add나 delete, cancle과 같은 기능이 출력되지않아 모든 코드를 한줄한줄 읽고, 또 비교
해결방법
todo.map((todos) => {
if(!todos.isDone){
return <div className="workingcard">완료 시 todo.isDone 앞에 ! 를 붙이지 않음
추가 후 해결
현재는 컴포넌트 분리 방법으로 진행예정
금일 회고 및 피드백
키, 밸류 사용과 화살표함수와 같은내용이 갑자기 많이 사용되니 익숙하지않아 많이 헤매게 된 듯 하다.
우선 app.js내에 한 파일에 코드 구현은 완료했으나, 컴포넌트 분리 시도해보고 input내용 작성 후 제출 시 초기화 되는것도 추가로 구현해둘 예정
기술매니저님의 피드백
➕ 제목이나, 내용이 없을 경우 입력하라는 알람 뜨게하기
➕ id값을 0, 1, 2과 같은 숫자로 넣을 경우 add, delete를 반복하다보면 id값이 겹치게 되니 다른 방법 고려해보기
완성본
｡˚⋆｡˚ ☁︎˚｡⋆｡˚☽˚｡⋆˚ ☁︎˚