TIL_221207_ 🍀❗🚩React 과제, 리뷰

내일배움캠프 4기 스파르타코딩 React B반

---

📒 오늘의 공부

1. React 과제 제출 - TO DO LIST

• 역시 좀 쉬면서 생각하다 보면 해결 방법이 더 잘 떠오른다.

  • 삭제 버튼 누를 때 배열이 새로 만들어지듯이 완료, 취소 버튼 눌렀을 때도 배열이 새로 만들어지게 코드 짜보기!
    -> 아님... 배열을 새로 만드는 게 아니고 버튼을 눌렀을 때 'isDone'을 변경시켜야 함
    -> 버튼 연결은 했는데 오류
    Cannot create property 'isDone' on boolean 'false'

  • 한 방향으로만 이동 함
    -> working에서 완료 누르면 Done으로 이동 하는 것만 되고 코드를 true-false 바꾸면 이젠 Done에서 working으로 올라가는 것만 됨
    -> 그리고 완료를 눌러도 아래의 글이 위로 올라오고 취소를 눌러도 위로 올라감.. 뭔가 다 연결되어 있어서 id 값으로 해야 하는 것 같은데!!
    -> map, filter는 여기에 쓰는 게 아닌 것 같다. 이건 false인 애들, true인 애들을 모아서 일괄로 다 변경을 시켜서 반환하니까 아무 버튼이나 눌러도 다 바뀜..
    -> 함수 문제가 아니라 내 이해도가 문제였다.

---

🍀

매니저님 도움

• 과제에 함수를 잘못 쓴 것 같아 질문하러 갔다.
  • map()함수에 대한 낮은 이해도로 코드를 잘못 짜서 map()함수 공부를 시켜주셨다.

❗

• 진짜 JS 기초를 탄탄히 해야한다는 걸 깨달았다.
  • 화살표 함수 몇 번 썼다고 순간 당황해서 함수 표현식을 까 먹었네;
  • 함수 표현식, 선언식으로 계속 바꿔보며 코드 이해하기
  • cosole.log로 하나하나 찍어보는 것 습관 들이기!!
  • 이론으로 배운 것들을 하나하나 코드로 쳐보면서 이해하기
• 질문할 때 좀 더 정리해서 가기
  • 어떤 걸 구현하고 싶은지
  • 왜 이 코드를 썼는지
  • 이 코드가 어디서 어떻게 작동을 하고 있는지

---

• map을 쓰지 않아도 될 것 같고 id값을 가져와서 할 수 있을 것 같은데.. 너무 안 되네.
  • 팀원은 컴포넌트를 하나 더 만들어 리스트를 나눴는데 그렇게 해야 하는 건가..
  • 이젠 버튼을 눌렀을 때 한 방향으로만 이동하는 것도 안 된다.
  • id값을 가져와서 여러 번 시도해봤는데 안 돼서 결국 제출!
    https://vercel.com/ys739/react-todo-list
• 제출하고 나서 폴더 구조 컴포넌트 구성 나눠야 하는 걸 알아서 나눌 수 있는 만큼 나눔.
  -> css도 다시 나누고 export default import 각 jsx파일에서 import 해야 하는 부분도 있어 확인하며 진행했다.
  -> 분리한 jsx 파일을 app.js에서 쓰는 방법도 익힐 수 있었다.
  -> App 안에 있는 부분도 나누고 싶었는데 const로 선언된 부분을 여기저기서 써서 나눌 수 없었다.
• input값 초기화하는 거 아예 잊고 있었다.
  • 구현해야 할 부분 따로 정리해서 과제를 위한 ToDo List를 만들었어야 했다.
  • 완성에만 신경쓰느라 제일 중요한 부분을 놓쳤다.

---

2. React 과제 리뷰

• App.js

  • 다 지우고 처음부터 쓰는 연습 많이 해보기

• 화면을 렌더링하는 기준

  • props 변경
  • state 변경
    -> useState함수를 통해 묶인 state가 setState에 의 해 변경 됐을 때 감지
    -> state가 useState로 묶여 있어야 react가 인지한다

• 과제 리뷰

  1. input 내용이 비었을 때 추가하기 누르면 alert
  • alert 뜨고 나서 포커스가 input에 가도록!

  2. ! 활용하기

  3. component 분리할 때 props로 넘겨줘야 할 것 잘 정리하기

  4. 비슷한 컴포넌트는 같이 묶어주기

  • 나눠져 있으면 유지보수가 배로 든다.

  5. 배포할 때는 console.log 다 주석처리하거나 지우기

  6. components가 들어가면 .jsx파일로 바꿔주기

  7. 열고 닫는 태그 안에 있는 내용은 children으로 받을 수 있다.

  8. children이 없을 때는 <component/> 닫는 태그 하나만 써도 된다.

  ⭐ 주석 달기

---

3. Programmers

캐릭터의 좌표

• 이동할 수 있는 길이 = (board[0].length-1)/2

  • board.length로 구하는 게 아니고 board 자체로 해야 함! (board[1]-1)/2

• 각 방향의 개수를 구하고 좌우, 상하끼리 -를 한 값도 구하기

  • 일단 "left" 개수 구하는 것부터 해 봄

• 정확도가 70% 정도 나온다. 뭘 놓친걸까?

  • 실패한 테스트 내용을 확인할 수가 없어서 테스트 케이스를 하나하나 추가해보며 어떤 조건에서 코드가 적용이 안 되는지 파악했다.
  • board가 [1,1]로 주어졌을 때 board 길이를 적용하면 실제 board와 달리 0이 나온다.

• 다음날 이어서 풀기

  • boarad가 1일 때와 아닐때로 나누고 그 안에서 또 if문으로 b0, b1이 board보다 클 때 나눠보기
  • 잘 안 됨!!

---

4. React Udemy 강의

JavaScript

• 객체와 배열은 참조형 데이터 타입!

---

🚩

• 내가 배워야 할 것을 놓치고 있진 않은지 확인하기.
  • 완성에 급급해서 코드를 하나하나 이해하고 넘어가는 게 많이 부족했다.
  • '이 코드는 왜 이 순서로 쓰는지', '이 함수는 어떻게 사용하는 건지' 깊이 생각하지 않았던 것들이 이번 과제를 할 때 모두 걸림돌이 되었다.
  • 5개 중 1개를 구현했다고 해도 그 1개를 내가 온전히 이해하고 구현한 것은 5개를 이해하지 않고 구현한 것보다 훨씬 값지다.
• 다음 과제는 내가 부족한 부분을 꼭 보완하고 시작하자