학습내용

리액트
과제 - todolist 만들기

Github
push단계에서 username 및 password 요구

todolist

완성본

• Github
• 배포

컴포넌트 구조

• App
  • Header
  • Content
    • Todolist
  • Footer

기능

App

• useState로 리스트 상태 변경
• 하위 컴포넌트들을 리턴
• 하위 컴포넌트에 useState 관련props 전달

Header - 투두리스트 추가

• addList 버튼
  날짜와 체크리스트 정보를 저장 후 props로 받아온 setList로 체크리스트 상태 변경

• 인풋 초기화
  체크리스트 저장 후 useState로 인풋 박스 내용 초기화

  보완점
  인풋의 내용이 빈칸일 때 리스트 추가 제한하기 ➡️ alert 후 빈칸 자동 포커싱

Contents - 체크리스트/완료리스트 나누기

• 체크리스트/완료리스트
  props로 받아온 list를 isDone의 true/false 여부로 체크리스트와 완료리스트 영역으로 나눠서 출력

• deleteList 버튼
  매개변수로 id를 받아서 현재 id에 해당되지 않는 리스트를 모아 새로운 리스트로 반환

• listButton 버튼
  deleteList와 같은 원리이나 현재 id와 일치시 해당 id의 isDone이 true인 리스트(=완료리스트)를, 불일치시 나머지 체크리스트를 반환하는 리스트 생성 -> done/cancle 버튼 클릭시 해당 리스트 반환

• 리스트 출력
  <TodoList/> 컴포넌트로 분리

• <TodoList/>에 props 전달
  todo, key,handleDelete, handleButton 전달

  보완점

  • 리스트 중복 코드 제거하기
  • 삭제, 취소 전 confirm으로 확인하기
  • props 구조분해할당으로 사용하기

Todolist - 리스트 출력

• list 출력

• handleDelete 버튼 출력

• handleButton 버튼 출력
  삼항연산자로 isDone이 true일시 cancel 버튼(=완료리스트)을, false일시 done 버튼(=체크리스트) 출력

  보완점
  props 구조분해할당으로 사용하기

Footer

하단에 이름 출력

처음에는 체크리스트와 완료리스트의 상태를 따로 관리하는 방법으로 구현했었는데 하다가 뭔가 안풀려서 튜터님을 찾아갔더니 isDone으로 관리하는 방법이 효율적이라고 하셔서 99% 정도 완성한 코드를 다 뜯어고쳤다. 그래서 시간이 부족했던 탓에 과제에는 컴포넌트를 분리하지 못한 버전으로 제출했다. 이게 다 과제 공지를 제대로 읽지 않은 나의 탓^^... 아 그리고 원장님 과제 리뷰 시간에 부족한 기능을 CSS로 채워보려는 시도가 엿보인다고 하셔서 뜨끔했다. 나의 과제로 리뷰를 한 것은 아니었지만 나 역시 언제나 그런 식이였으니까.......ㅎ

---

Github

push단계에서 username 및 password 요구

발단
이라고 하기에는 두서가 없지만...ㅎ 처음 push를 시도했을 때 remote 관련 에러가 발생해서 remote를 초기화 하고 다시 등록하기를 반복하다가 어느 순간 push를 시도하니 username과 password를 요구하기 시작함. username은 잘 넘어갔지만 password는 깃헙 비번, 토큰 번호, 맥북 비번을 눌러도 다 안됨...

원인
git remote -v를 실행하면 아래와 같이 HTTPS로 시작하는 주소가 출력되는데 이 경우엔 usernamse과 password를 요구한다고 함(자세히는 나도 모름 구글링 하니까 그렇게 나옴)

origin	https://github.com/cinephi1e/todolist.git (fetch)
origin	https://github.com/cinephi1e/todolist.git (push)

처음 remote를 설정할 때 HTTPS 경로로 설정했었는데 그게 화근이었나보다(아님 말고)

해결
git remote set-url origin (repository의 SSH 경로) 실행하면 끝
git remote -v로 경로가 제대로 설정되었는지 확인 후 push 하면 문제없이 작동한다!

---

리액트는 한 번 배웠었으니까 이 정도는 금방 구현 할 줄 알았는데 거의 이틀에 걸쳐서 완성을 했다. 물론 하루는 내가 공지를 제대로 안읽는 바람에 삽질해서 그런 거지만... 아무튼 까먹고 있었던 개념을 다시 복기할 수 있었던 좋은 기회였다. 내일부터 심화 파트도 열심히 해야지. 리액트의 꽃은 아무래도 리덕스니까(뇌피셜)