March 7, 2024

240307(목)

🌱 성장일지 9.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🧩 (10.0) 매일 공부한 것, 새롭게 알게 된 것, 간단하게라도 작성하고 싶은 것을 주관적인 생각과 함께 편하게 작성하자! 그리고 그 중에서 괜찮은 내용을 잡동사니에서 자세히 다루자!

🔨 개발관련

[책] 모던 리액트 딥다이브

class component와 function component

class와 function의 차이하면 떠오르는 건 객체지향과 함수형이다.
개인적으로 리액트가 function component로 나아가게 된건, 각 컴포넌트는 jsx를 반환하는 UI 함수로서의 역할을 하게 하고 클로저를 통해 구현한 hook으로 상태를 관리하기 위함이라고 생각한다.
function component가 선언적이기에 더 간결하고 깔끔하긴 하지만, component의 lifecycle을 관리하는 면에서는 class component가 더 명시적이라고 생각한다.

js는 단일 스레드

그렇기에 브라우저의 이벤트 루프를 통해 비동기 처리를 한다.
이 때, 코드의 실행 순서는 동기 코드(일반적인 JS 코드) -> 마이크로 테스크 큐(프로미스) -> 렌더링 -> 매크로 테스크 큐(setTimeout, setInterval) 순으로 진행된다.
- 마이크로 테스크 큐의 콜백 함수가 실행될 때마다 렌더링이 발생한다.
- 테스크 큐는 진짜 큐 자료구조가 아니라 Set 자료구조이다.
  - 왜냐하면 실행 가능한 가장 오래된 테스크를 가져와야 하기 때문이다.

Object.is()

'=='과 '==='이 해결하지 못하는 문제를 해결하기 위해 나온 메서드
(주의할 점) 객체 비교 시에는 큰 의미가 없다.

useEffect에 전달하는 함수에 이름을 붙여주면 디버깅에 도움이 된다.

function Example() {
  useEffect(
    function getName() {
      console.log('디버깅에 도움이 된다.');
    },
    [name],
  );
}

@types로 시작하는 패키지는 해당 라이브러리의 타입 정의 파일을 제공한다.

DefinitelyTyped라는 프로젝트에서 수많은 라이브러리의 타입 정의 파일을 제공한다.(애초에 라이브러리가 d.ts 파일을 제공한다면 이런 패키지는 필요 없다.)

React Native

React Components > React Native Components(Core Components, Community Components, Custom Components)와 같은 구조로 이루어져 있다.

기본적으로 RN에서 제공하는 여러 Core Components를 사용한다.
- 이 부분이 정말 뭔가, 일반 리액트랑 다른 느낌...! 좋게 보면 틀이 있어서 편리하다는 거고, 나쁘게 보면 뭔가 리액트보다 자유롭지 못한 느낌이다.

Platform Specific Code

Platform.select()를 사용하여 플랫폼별로 다른 컴포넌트를 렌더링할 수 있다.
- ios, android와 같이 플랫폼에 따라 default로 렌더링되는 ui가 다르기 때문에, 이를 해결할 때 유용할 것 같다.

yarn의 버전

yarn은 npm, pnpm과 더불어 node.js의 패키지 매니저 중 하나이다. npm과 비슷한 기능을 제공하지만, npm보다 빠르고 안정적이다.

이전에는 yarn을 전역에 설치하고 사용했다. 내가 설치했던 방법은 3가지였는데,

npm install -g yarn
brew install yarn
asdf plugin-add yarn

asdf는 여러 버전의 패키지를 설치하고 사용할 수 있게 해주는 패키지 매니저이다.(나중에 기회가 되면 좀더 자세히 다뤄볼 예정)

그런데 현재 yarn의 공식문서를 들어가보면 이제는 yarn을 전역에 설치하지 않는 것을 권장하고 있다.(2+ 버전부터 이렇게 바뀌었다고 한다.)
현재 yarn은 classic이라고 불리는 1.x 버전과 berry라고 불리는 2.x+ 버전(현재는 4.1.1까지 나옴...)이 있다.
또 기본적으로 node 14.19 / 16.9 부터는 내장된 corepack을 통해 yarn을 사용할 수 있다.

corepack enable

# yarn 명령어를 사용할 수 있다.
yarn install

본인이 yarn을 어디에 어떻게 설치했는지 모르겠을 때, 혹은 분명 버전을 변경했음에도 불구하고 yarn 버전이 바뀌지 않는다면, which yarn 명령어를 통해 yarn이 설치된 경로를 확인하고, 해당 경로에 있는 yarn을 삭제하고 다시 설치하면 된다. => 리소스는 한 곳에서 관리하자...

🥳 감정관련

후... 오늘은 RN 프로젝트를 하다가 yarn 버전에서 꼬여버려서 한참을 헤맸다. 지금도 완전히 해결된 건 아니지만, 현재 대략적으로 yarn이 어떻게 버전관리를 하고 있고 어떤 방향을 추구하는지 배울 수 있었다. 아주 큰 프로젝트가 아니라면 그냥 npm 사용해도 괜찮을지도...?ㅎㅎㅎ

Jayden { do: smite }