23.12.13 UI 컴포넌트 생성

작업한 것

• UI 컴포넌트 생성
  • MainLayout
  • Navigation
  • Button
  • Slider
• MainPage UI 생성

배운 것

• SSR Client와 Socket Micro Service 연결 방식 고민
  1. Client -> BFF -> API Gateway -> MS의 과정으로 통신한다
  2. Client -> API Gateway -> MS의 과정으로 통신한다
  • 멘토님 의견 : Client -> BFF -> API Gateway -> MS로 소켓 커넥팅 후, Client -> MS로 직접 통신
  • 크게 어려운 아이디어도 아닌데 좁은 시야에서 생각했다.
  • 가능한 방법인지 검증 및 테스트해보아야 한다.

이슈

• Styled Components 렌더링 이슈

  • 상황: index.tsx에서는 적용되었으며, theme provider(스타일을 모든 컴포넌트에 속성으로 넘기는 기능)으로 색상 적용에 성공함

  • 문제1: 렌더링 초기에 잠깐 스타일이 적용되지 않은 화면이 렌더링 됨

    • 시도1: Styled Components 서버사이드 렌더링 기능 적용

      1. 컴파일러 플러그인(babel-plugin-styled-components) 설치
         • Next.js 12버전 이상 부터는 설치하지 않아도 된다.
      2. _document.tsx 파일 수정

      // _document.tsx
      ...
        static async getInitialProps(ctx: DocumentContext) {
          const sheet = new ServerStyleSheet();
          const originalRenderPage = ctx.renderPage;
          try {
            ctx.renderPage = () =>
              originalRenderPage({
                enhanceApp: (App) => (props) =>
                  sheet.collectStyles(<App {...props} />),
              });
            const initialProps = await Document.getInitialProps(ctx);
            return {
              ...initialProps,
              styles: (
                <>
                  {initialProps.styles} {sheet.getStyleElement()}
                </>
              ),
            };
          } finally {
            sheet.seal();
          }
        }
        ...

      3. next.config.js 파일 수정

      //next.config.js
      
      /** @type {import('next').NextConfig} */
      const nextConfig = {
        reactStrictMode: true,
        compiler: {
          styledComponents: true,
        },
      };
      
      module.exports = nextConfig;

    • 결과 : 정상적으로 스타일 데이터를 받아온 이후 렌더링 됨.

    • 추가 문제 : 렌더링에 시간이 다소 소요되어, 유저에게 렌더링을 알리기 위한 로더 UI 추가 필요.

  • 문제2: pages/_document.tsx에 적용한 레이아웃 컴포넌트에 스타일이 적용되지 않음

    • 시도1: Next.js의 버전을 최신 14버전에서 안정화된 13버전으로 다운그레이드
      1. 서버사이드 렌더링 및 컴파일러 설정 과정은 보다 안정적으로 진행됨
      2. _document.tsx파일에서 styled-components 파일이 동작하지 않는 것은 마찬가지.
    • 시도2: Styled Components 렌더링을 _document.tsx가 아닌 index.tsx에서 불러옴
    • 결과: 동일한 컴포넌트도 정상적으로 렌더링 됨.
    • 추가 문제 : 정확한 동작 원리를 확인하지 못함. _document.tsx 파일을 통해 레이아웃을 조작하려고 시도하려면 추가 조사 필요.

마무리

뚝딱뚝딱