241222 TIL

• useState 직접 구현하기
  • useState는 상태와, 상태를 업데이트할 때 사용되는 setState 값을 배열로 반환해 준다.
  • 컴포넌트들이 실행되면서 useState는 여러 번 호출될 수 있다. 여러 번 호출될 때마다 클로저로 관리되는 state의 참조가 중복되면 이후에 실행된 useState에서 state를 덮어 씌우는 문제가 발생한다. 이런 경우에 적절하게 대응하기 위해서 클로저로 관리하는 states를 배열로 관리하고, useState의 실행 순서에 따라서 상태를 인덱스로 관리하는 걸로 했다.
  • 컴포넌트의 구조가 똑같다면, 상태는 바뀔 수 있지만 useState가 호출되는 순서는 동일할 것이다. 그 점을 고려해야 한다.
  • state는 값이지만, 값을 직접 변경하려고 하면 컴포넌트 간 공유된 상태의 연결이 끊어져야 하고, 리렌더링이 발생하면 안 된다. 해당 사항을 구현해 주기 위해 state를 상태로 바로 내려주는 게 아니라 getState와 같은 함수로 한 번 래핑 해주고, 해당 함수의 즉시 실행 결과를 state로 내려줬다. 이를 통해 여러 컴포넌트에 공유된 state의 변경은 오직 setState로만 할 수 있도록 처리해 줬다.
  • setState는 인자로 새로운 상태 값을 받고, states[currentCursor]의 값을 바꿔준 뒤, 리렌더링을 실행해 주는 식으로 구현한다. 이때, 현재 버전에선 상태 업데이트 시 전체 돔을 한 번에 리렌더링 해주는 것으로 구현했기 때문에, 전체 컴포넌트가 리렌더링 될 때 useState 함수들이 다시 호출되는 상황을 고려해줘야 한다. 그래야만 리렌더링 시 전체 state 값이 안전하게 유지될 수 있다.
  • 이후엔 Diffing 알고리즘을 구현해 볼 예정이고, Diffing이 들어가면 전체 DOM이 싹 다 리렌더링 되는 게 아니라 변화가 있는 부분만 리렌더링 되도록 처리해 주는 게 필요하다. 해당 로직을 구현하는 것과, 해당 로직이 구현될 때 '재실행이 필요한 useState가 무엇인지'를 판단해서 상태를 적절하게 유지해 주는 것이 중요한 과제겠다.
• Node.js 교과서
  • ES Module에선 import로 공개된 모듈의 값을 불러올 수 있다.
  • import() 처럼 함수로 구문을 사용하면 Promise 객체를 반환한다.
  • if 블록 내부 등 모듈의 최상단이 아닐 경우 일반 import는 동작하지 않는다. 대신 await import({경로})와 같이 사용하면 다이내믹 임포트가 가능하다(위치에 상관없이 동적으로 불러올 수 있으며, import()는 프로미스 객체를 반환한다.
  • CommonJS에서 경로를 사용하고 싶을 때 __filename이나 __dirname을 사용할 수 있다. 둘 다 경로를 나타내고, 각각 파일-디렉토리의 경로를 나타낸다.
  • ES Module은 __filename과 __dirname을 지원하지 않는다. 대신, import.meta.url을 사용하면 호출한 모듈의 경로를 확인할 수 있다.
  • setImmediate는 사실상 setTimeout({콜백}, 0)과 동일하게 동작한다. 백그라운드를 한번 거쳤다가 태스크 큐에 들어가고, 그다음 실행 컨텍스트로 옮겨진다.
  • Node에서는 process 내장 객체, os 내장 모듈을 통해 운영 체제 관련 일부 정보에 접근할 수 있다. process는 노드가 돌아가고 있는 프로세스 정보를 나타내고, os는 운영체제 정보를 나타낸다.
  • process.env는 외부 공개가 꺼려지는 보안 정보를 환경 변수로 저장하는 데 많이 사용된다.
  • path 모듈은 경로 지정을 위해 사용된다. 운영체제 별로 경로 구분자가 서로 다르며, 이 부분을 별도 예외처리해 주는 게 번거롭기 때문에, 가급적 path 모듈을 사용한다.
  • 파일 경로에서 파일명이나 확장자만 따로 떼는 기능도 모듈에 미리 구현되어 있어서, 필요시 편리하게 사용할 수 있다.