🥞 오늘 한 일

• 리액트 입문주차 개인과제
  • 해설 기반 과제 개선
    • 3, 4강 수강 완료
    • Working, Done 필터링 TodoContainer에서 미리 하여 props로 넘기도록 수정
  • 과제 재제출
• 스탠다드반 2nd 과제 완료 (참조하지 않고 TodoList 제작)
• 스탠다드반 투두 리스트 타임어택 연습 (29분)
• 알고리즘 코드카타
  • 체육복

리액트 입문주차 개인과제

해설 기반 과제 개선

Working, Done 필터링 TodoContainer에서 미리 하여 props로 넘기도록 수정

// TodoContainer.jsx

const workingTodos = todos.filter((todo) => !todo.isDone);
const doneTodos = todos.filter((todo) => todo.isDone);

// TodoContainer.jsx

<TodoList
  isDone={false}
  todos={workingTodos} // 미리 필터링해서 넘겨주는 props
  deleteTodoHandler={deleteTodoHandler}
  toggleTodoHandler={toggleTodoHandler}
  />
<TodoList
  isDone={true}
  todos={doneTodos} // 미리 필터링해서 넘겨주는 props
  deleteTodoHandler={deleteTodoHandler}
  toggleTodoHandler={toggleTodoHandler}
  />

기존에는 TodoList 내에서 필터링을 거쳤지만, 애초부터 필터링을 거친 배열을 넣어줘서 더 가독성 측면에서 보기 좋도록 제작해보았다.

🍽️ 문제 해결

스탠다드반 2nd 과제

TodoList props 문제

해설 영상에 나왔던 대로, TodoItem에서 삭제, 토글 이벤트 함수를 한 번 만들어주려고 했다. 하지만 왜인지 너무 이상하게 되는 것. (완료를 눌렀는데 삭제가 된다거나...) 분명 함수 자체에는 문제가 없는 것 같은데, 왜 이런 식으로 이상하게 나오는거지? 하고 코드를 보다가 한 가지 사실을 깨달았다.
다음 코드를 보면 TodoContainer 내에서 TodoList에 props로 todos를 전달한다는 것을 알 수 있다.

// TodoContainer.jsx

const workingTodos = todos.filter((todo) => !todo.isDone);
const doneTodos = todos.filter((todo) => todo.isDone);

...

<TodoList
  title="Working"
  btn="완료"
  deleteTodoHandler={deleteTodoHandler}
  toggleTodoHandler={toggleTodoHandler}
  todos={workingTodos}
  />
<TodoList
  title="Done"
  btn="취소"
  deleteTodoHandler={deleteTodoHandler}
  toggleTodoHandler={toggleTodoHandler}
  todos={doneTodos}
  />

여기서 나는 todos={todos}가 아니라, workingTodos, doneTodos를 todos로 전달했다.
해당 변수들은 todos에서 isDone의 true false 여부로 필터링한 변수들이었던 것... 그래서 todos가 전체 todo들이 나오는게 아닌 필터링된 todos가 나오는 것이었다.
때문에 나는 과제 특성 상 새로운 도전을 하기보다는 과제에 충실히 하는 것이 맞다고 생각해, 기존 방식대로 다시 TodoContainer에 이벤트를 넣어주었다.

알고리즘 코드카타

체육복

문제

점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다.

전체 학생의 수 n, 체육복을 도난당한 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 가져온 학생들의 번호가 담긴 배열 reserve가 매개변수로 주어질 때, 체육수업을 들을 수 있는 학생의 최댓값을 return 하도록 solution 함수를 작성해주세요.

문제점

function solution(n, lost, reserve) {
  const filteredReserve = reserve.filter((item) => {
    return !lost.includes(item);
  });
  for (let i = 0; i < lost.length; i++) {
    if (filteredReserve.includes(lost[i])) {
      filteredReserve.splice(filteredReserve.indexOf(lost[i]), 1);
    } else if (filteredReserve.includes(lost[i] - 1)) {
      filteredReserve.splice(filteredReserve.indexOf(lost[i] - 1), 1);
    } else if (filteredReserve.includes(lost[i] + 1)) {
      filteredReserve.splice(filteredReserve.indexOf(lost[i] + 1), 1);
    } else {
      n--;
    }
  }
  return n;
}

63.3점의 풀이. 우선 lost와 reserve가 정렬이 되어있지 않다는 점, 체육복이 두 벌 있는 학생은 lost와 reserve 둘 모두에서 삭제시켜줘야한다는 점 등 놓친 부분이 많았다. 힌트 페이지가 있는 문제였기에 힌트를 참고했다.

해결

function solution(n, lost, reserve) {
  lost.sort((a, b) => a - b);
  reserve.sort((a, b) => a - b);
  let newLost = [...lost];
  let newReserve = [...reserve];
  reserve.forEach((item) => {
    if (lost.includes(item)) {
      newLost.splice(newLost.indexOf(item), 1);
      newReserve.splice(newReserve.indexOf(item), 1);
    }
  });
  for (let i = 0; i < newLost.length; i++) {
    if (newReserve.includes(newLost[i] - 1)) {
      newReserve.splice(newReserve.indexOf(newLost[i] - 1), 1);
    } else if (newReserve.includes(newLost[i] + 1)) {
      newReserve.splice(newReserve.indexOf(newLost[i] + 1), 1);
    } else {
      n--;
    }
  }
  return n;
}

정렬이 안 된 케이스가 있을 수 있어 먼저 정렬을 시켜주었고, lost나 reserve 자체를 변경시킬 경우 forEach에서 원치 않는 결과가 나올 수 있어 새로운 배열을 만들어 겹치는 값(여벌의 체육복이 있지만 체육복을 잃어버린 학생)을 삭제해주었다. 그 다음 로직은 새로운 배열을 비교해줬다는 점 빼곤 처음에 만든 로직과 거의 동일하다.

🍴 느낀 점

• 참고하지 않고 오로지 내 지식 및 경험에만 의존하여 기능을 구현해보는 것은 아주 큰 도움이 된다. 과제는 제출했지만, 당장 다음 주 월요일에 투두 리스트 타임어택이 있기 때문에, 40분 내로 투두 리스트를 여유롭게 만드는 연습을 더 해야겠다. 오늘 기록은 디자인 없이 기능만 만드는 데에 29분!

🍳 내일 할 일

• 리액트 숙련 강의 지급 시 수강 (정확한 지급 시기 미정)
• 스탠다드반 투두 리스트 타임어택 연습