241124 TIL

• 감정 일기 프로젝트 개선
  • New 페이지와 Edit 페이지 합치기
  • 확실히 유사한 틀을 갖고 있는 페이지를 하나로 합치고 차이를 Props로 관리하니 아래로 전달해줘야 했던 State들을 관리하기에도 좀 더 수월했다.
  • 유사한 UI를 갖고 있고, 다뤄야 하는 state와 props가 비슷한 경우엔 적절하게 페이지나 컴포넌트를 묶어서 만들어주는 게 좋을 수 있겠다는 걸 배웠다.
  • 커스텀 훅의 존재 목적은 아래 중 하나여야 한다.
    • 상태 관리: 커스텀 훅 내부에서 상태를 관리(useState), 외부 상태를 제공(useContext)해야한다.
    • 함수 반환: 컴포넌트에서 사용할 수 있는 함수나 데이터를 반환하고, 해당 반환값은 적절한 시점에 동작하도록 유도해야 한다.
    • 호출 즉시 동작을 실행하지 말아야 한다: 커스텀 훅 내부에서 어떤 동작을 즉시 실행하면 컴포넌트의 로직 흐름과 충돌할 수 있다. 커스텀 훅은 동작을 실행하기 위한 준비만 하고, 컴포넌트가 적절한 시점에 이를 호출하도록 해야 한다.

    // bad case
    const usePageMove = () => {
    const nav = useNavigate(); // 호출은 OK
      // 커스텀 훅 내부에서 페이지 이동을 바로 실행
      nav('/'); // 즉시 실행 (잘못된 사용)
    };

  • 커스텀 훅은 순수해야 한다. 순수 함수는 같은 인풋에 언제나 같은 아웃풋이 나와야 하고, 외부의 데이터(State나 Props)를 변경하면 안 된다. 어떠한 부수효과도 없이 동작하도록 설계하자.
• 모던 자바스크립트 딥다이브
  • 클래스에 대한 챕터 공부
  • 자바스크립트의 클래스는 자바스크립트의 생성자 함수를 확장해서 클래스 기반 객체 지향 언어의 클래스를 흉내 낸 문법적 설탕이다.
  • class라는 예약어로 선언하며, 자바스크립트의 클래스는 함수다. constructor라는 특수한 메서드를 가지고, constructor 내부에 있는 값들을 프로퍼티로 갖는 객체를 생성한다.
  • constructor 외부 클래스 본체에는 메서드들을 선언할 수 있으며, 일반 변수와 같이 활용할 수 있는 클래스 필드 문법도 최신 자바스크립트 문법으로 추가되었다.
  • 메서드는 인스턴스 메서드와 정적 메서드가 있다. 정적 메서드는 static 키워드를 메서드 이름 앞에 붙이는 식으로 정의한다.
  • 인스턴스 메서드는 프로토타입의 메서드가 되고, 정적 메스드는 클래스 내부에 존재하여 클래스를 통해서만 접근이 가능하다.
  • super 키워드는 extends로 확장(상속)한 부모 클래스를 가리킨다.
• 인프런 <한 입 크기로 잘라먹는 타입스크립트>
  • 타입스크립트는 자바스크립트의 확장판이다. 자바스크립트의 기본 문법을 따르면서, 조금 더 확장된 정적 타이핑 문법을 제공한다.
  • 타입스크립트는 동적 타이핑되는 자바스크립트 언어가 정적으로 타이핑될 수 있도록 지원하며, 따라서 좀 더 안정적인 개발을 할 수 있는 환경이 된다.
  • 타입스크립트로 작성된 코드는 자바스크립트로 컴파일된다. 자바스크립트로 컴파일될 때 적용될 옵션은 tsconfig.json 파일에 정의한다.
  • tsconfig.json 파일에 작성된 내용에 따라 프로젝트에서 타입스크립트는 다른 방식으로 동작할 수 있기 때문에, 프로젝트의 목적과 상황에 맞게 적절한 옵션을 설정하는 게 중요하다.