DIL: 모던 리액트 딥 다이브, 5주차-2

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week5-2_2024-04-02

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ---- | -------------------------------------------------- | ----------- | | 5주차 | 9장 | 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 | 538p~542p |

오늘 읽은 내용을 markdown으로 간단히 메모

---

모던 리액트 개발 도구로 개발 및 배포 환경 구축하기

next.config.js 작성

/** @type {import("next").NextConfig} */
const nextConfig = {
  reactStrictMode: true, // 리액트 엄격모드
  poweredByHeader: false, // X-Powered-By 헤더 제거
  eslint: {
    ignoreDuringBuilds: true,
    // - 일반적으로 빌드 시 Next.js, ESLint도 같이 수행한다
    // - true로 설정해서 ESLint CI 과정에서 별도로 작동하게 하기 -> 빌드를 빠르게!
  },
};

module.exports = nextConfig;

ESLint와 Prettier 설정하기

• ESLint JS가 정적 분석에 의존
• eslint-config-next는 스타일링 정의는 x
• @titicaca/eslint-config-triple

//.eslintrc.json
{
  "extends": ["next/core-web-vitals"]
}

스타일 설정하기

• styled-component 설정의 경우
  • ServerStyleSheet: _document.tsx에 Provider 래퍼 추가
  • next.config.js에 styledComponent: true 추가