TIL

241030 TIL

GoJay 2024. 10. 30. 23:31

TODO App 만들기

  • 자바스크립트 모듈을 이용해서 컴포넌트를 쪼개고, App.js에서 통합으로 상태를 관리할 수 있도록 애플리케이션을 만들었다.
  • 상위 컴포넌트인 App.js에서는 최대한 '상태의 관리'에 집중하고, 뷰를 그리는 것과 로직을 처리하는 것들은 하위 컴포넌트에서 처리되도록 하기 위해 고민했다(쉽지 않았다).
  • 하위 컴포넌트에서 로직을 처리하면서 변경되는 상태는 다시 App.js로 끌어올려서 의존이 있는 다른 컴포넌트의 setState()를 호출해 변경된 상태를 등록해줘야 한다. 그러기 위해 App.js에 있는 setState() 메서드를 하위 컴포턴트들의 파라미터로 전달하고, 하위 컴포넌트에서 상태의 변화를 상위 컴포넌트인 App.js의 setState()에 인자로 전달했다.
  • 해당 방식으로 하다보니, 하위 컴포넌트에서 함수를 쪼개고, 인자로 필요한 값들을 전달할 때, 상위 컴포넌트의 setState()가 여러 군데에서 참조되면서 상태의 흐름을 파악하는 게 복잡해지는 문제가 있었다.
  • 아직은 도구의 도움보단, 순수 언어로만 구현하는 연습을 더 해보려고 한다. 내일 한번 더 처음부터 개발해보면서 어디서 어떻게 상태를 관리해야 효율적이고, 코드적으로도 상태의 흐름을 직관적으로 파악할 수 있을지 다시 고민해봐야겠다.
  • 오늘 개발한 부분에서 100% 완벽하게 구현하지 못한 부분이 있었다.
    • TODO Items의 업데이트를 TODO 상태를 관리하는 배열을 기반으로 한 게 아니라, DOM에서 캐치한 $ul 태그의 하위 요소 기준으로 생성-토글했다.
    • 그렇게 하니, filter의 상태를 '완료'로 해둔 상태에서 새로운 TODO item을 추가했을 때 필터가 적용되지 않고 화면에 뿌려지는 문제가 있었다.
    • 내일은 이 부분에 좀 더 중점을 두고 다시 구현해봐야겠다.

완료를 누르고 할 일을 추가하면 필터가 안 걸린 상태로 추가된다. 내일은 꼭 고쳐보자.

Udemy <클린코드 자바스크립트>

  • 데이터의 타입을 검사할 때 typeof에만 의존하면 안된다. typeof는 원시 타입인 null을 object로 평가하고, 함수인 function도 object로 평가한다.
  • 원시 타입들도 래퍼 객체인 생성자 함수로 만든 값들은 typeof 연산을 했을 때 object가 나온다. typeof는 여러 가지로 불완전하다.
  • 객체 타입의 데이터를 확인할 땐 instanceof를 활용하면 좋다. myFunc instanceof Function 이런 식으로 하면 함수를 function 타입으로 점검할 수 있다.
  • 하지만, instanceof는 프로토타입 체인을 통해 검색이 되고, myFunc instanceof Object로 해도 참이 나온다(자바스크립트에서 함수는 객체다). instanceof도 정답은 아니다.
  • 다양한 타입 확인이 필요한 상황마다 그 상황에 맞는 적절한 방식을 찾아서 사용해야한다. 여러 케이스를 잘 다뤄보면서 자바스크립트 타입 변환에 익숙해지자.
  • 함수의 매개변수로 너무 많은 파라미터를 넘기도록 함수를 설계하면 문제가 될 수 있다.
  • 함수의 파라미터가 길어질 것 같으면 함수를 감싸는 다른 함수로 사용 빈도가 덜한 인자를 분리하거나, rest 파라미터, 객체 구조 분해 할당 등을 적극적으로 사용하자.
  • 특히, 객체 구조 분해 할당으로 인자를 넘기면 인자의 순서에 상관 없이 접근이 가능하기 때문에 안전하다.
  • 아직 객체 구조 분해 할당이 익숙하지 않은데, 자꾸 써보면서 문법에 익숙해져보자.

코테 문제 풀기