PWA + FCM으로 web push notification 구현하기1

2024-02-28

FireBase를 초기화하는 단계는 진입점이 좋다.

우리의 진입점은 어디다? Layout이다.

하지만 Layout은 servercomponent이며 server component에서는 firebase client CDK를 사용할 수 없다.

이때 바로 RSC의 개쩌는점이 나타나는데

우리가 원래 다루던 React(RCC)와는 다르게

const ServerComponent = () => {
  return (
    <RCC>
      <RSC />
      <RSC />
    </RCC>
  );
};

이런 구조일 때를 보면 알 수 있다.

RCC인 client 컴포넌트로 감싸져있으니 하위인 RSC도 RCC가 되지 않나?? 라고 생각하는게 당연하지만

RSC, RCC의 경계는 그게 아니다..!!!!

어디서 선언되었는가 이다!!! ⇒ JS의 스코프처럼!!!!!!!!!!!!!!!!!

따라서 RCC안에서 Client에서만 하는 일을 한 후 자식요소인 RSC에서 그것을 사용할 수 있다는 말이다!!!!!!!!!!!!!!!!!

이거를 응용해서

나는 TQ를 쓰기 위해 감싸놓은 Provider(RCC)에 firebase를 초기화 해줬다.

나 이제 좀 RSC를 이해한거 같다… RSC의 장점도 이해한거 같다…! 엉엉ㅠ

RSC의 장점 client로 보내는 JS 번들 사이즈를 줄일 수 있다

HOW?

위의 구조처럼!!! server에서 처리할 수 있는 것들은 server에서 렌더링 해서 보내버리고!!! 그걸 이용해서 인터렉션이 필요하다면!!!!!!!!!!!!! 앞뒤로 RCC 감싸버리면 되잖아!!!!!!!!!!!!!!!!!!!!!!!!꺅❤️❤️

⇒ ‘서버 전용’으로만 렌더링하는 컴포넌트를 만들 수가 있다!!!!

참고