web_trouble_shooting

Next.js 사용시 styled components 스타일이 적용전에 렌더가 되는 문제발생

-> Next.js 공식문서를 참고하여 _document.tsx 파일을 커스텀 하여 해결함

루트 파일에 .babelrc 파일 만들기

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ]
  ]
}

Create the _document.js file pages 폴더 아래에 _document.js 생성

import Document, { Head, Main, NextScript } from 'next/document';
// Import styled components ServerStyleSheet
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    // Step 1: Create an instance of ServerStyleSheet
    const sheet = new ServerStyleSheet();

    // Step 2: Retrieve styles from components in the page
    const page = renderPage((App) => (props) =>
      sheet.collectStyles(<App {...props} />),
    );

    // Step 3: Extract the styles as <style> tags
    const styleTags = sheet.getStyleElement();

    // Step 4: Pass styleTags as a prop
    return { ...page, styleTags };
  }

  render() {
    return (
      <html>
        <Head>
          <title>My page</title>
          {/* Step 5: Output the styles in the head  */}
          {this.props.styleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

참고 https://dev.to/aprietof/nextjs--styled-components-the-really-simple-guide----101c

cookie 접근문제

문제상황 : 엔트리 파일에서 switch route 분기처리 부분에서 로컬스토리지와 쿠키에 접근하여 유저의 로그인 여부를 판별하였던
기존의 리액트 프로젝트와 달리, next.js에서 쿠키 및 로컬 스터리지에 접근하는 방법을 찾지 못해 어려움을 겪었다.
- getServersideProps를 사용하여 req.headers.cookie로 쿠키에 접근하는 것에 성공하였다.
- 서버에서 얻은 쿠키를 클라이언트에 넘겨주고, api.default.headers.authorization에 해당 쿠키를 넣는 방법으로 헤더에 쿠키를 넣을 수 있었다.

iOS와 pc 분기처리 문제

문제상황 : iOS 팀과의 협업 중, iPad를 user-agent에서 구분하지 못하는 문제가 발생하였다.
- iPad가 버전 업데이트 되면서 웹과 거의 유사한 uger-agent를 보였기 때문에 분기처리에 어려움을 느꼈다.
- 결국 auth2라는 새로운 API를 만들어 모바일 팀에 전달함으로써 문제를 해결하였다.