HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
Getting Started with Next.js - template w/ CNA, Storybook, Emotion, ESLint, Prettier
Getting Started with Next.js - template w/ CNA, Storybook, Emotion, ESLint, Prettier
Getting Started with Next.js - template w/ CNA, Storybook, Emotion, ESLint, Prettier

Getting Started with Next.js - template w/ CNA, Storybook, Emotion, ESLint, Prettier

Next.js
Next.js tutorial with examples: Build better React apps with Next
Next.js is a React front-end framework that lets you improve your app's user-experience and SEO through server-side rendering. Today, we'll help you get started with Next.js with examples.
Next.js tutorial with examples: Build better React apps with Next
https://www.educative.io/blog/nextjs-tutorial-examples
Next.js tutorial with examples: Build better React apps with Next
Storybook
  1. webpack v5 설치
      2. To v5 from v4 | 웹팩
      웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다.
      To v5 from v4 | 웹팩
      https://webpack.kr/migrate/5/
      To v5 from v4 | 웹팩
  1. Storybook 초기화
      2. Get started with Storybook and Next.js
      Next.js is a fantastic framework for building high-performance applications in React. But as it becomes more advanced - with features like next/image - it becomes more difficult to integrate with documentation and testing environments like Storybook. I dove in deep to learn how to make Storybook the best component-driven UI environment for Next.js pages.
      Get started with Storybook and Next.js
      https://storybook.js.org/blog/get-started-with-storybook-and-next-js/
      Get started with Storybook and Next.js
Emotion
💡
With @emotion/babel-plugin
Note:
If you’re using Create React App, you can use the Babel macro
Emotion has an optional Babel plugin that optimizes styles by compressing and hoisting them and creates a better developer experience with source maps and labels.
yarn add --dev @emotion/babel-plugin
@emotion/babel-plugin
Babel plugin for the minification and optimization of emotion styles. @emotion/babel-plugin is highly recommended, but not required in version 8 and above of Emotion. components as selectors Allows an emotion component to be used as a CSS selector. Minification Any leading/trailing space between properties in your css and styled blocks is removed.
@emotion/babel-plugin
https://www.npmjs.com/package/@emotion/babel-plugin
@emotion/babel-plugin
  • @emotion/babel-plugin 사용했을 때의 장점
      1. 소스맵 제공
          2. Source Map | 웹팩 핸드북
          소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요? 정답은 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하는 것입니다.
          Source Map | 웹팩 핸드북
          https://joshua1988.github.io/webpack-guide/devtools/source-map.html#%EC%86%8C%EC%8A%A4-%EB%A7%B5
      1. emotion allows for emotion components to be targeted like regular CSS selectors
      1. Minification, dead code elimination 등등
CSS 선택자를 사용하기 위해 @emotion/babel-plugin
ESLint
  • 아래의 아티클을 읽고 eslint-config-prettier만 사용하기로 결정!
      • prettier와 eslint를 구분해서 사용하자
      Prettier는 formatter고 eslint는 linter 이다. 두 개의 차이점과 사용법을 알아야 더 스마트하게 사용할 수 있다. 개취지만 포맷팅 안 된 코드 상종 안 한다. (SI 다닐때 정말 힘들었...) 결론부터 말하자면 오류를 잡으려면 린터, 스타일을 교정하려면 포맷터 를 사용하자. 린터 룰은 크게 포맷팅(스타일) 룰과 코드 퀄리티 룰이라는 두가지 카테고리로 나눌 수 있다.
      prettier와 eslint를 구분해서 사용하자
      https://velog.io/@yrnana/prettier%EC%99%80-eslint%EB%A5%BC-%EA%B5%AC%EB%B6%84%ED%95%B4%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90
      prettier와 eslint를 구분해서 사용하자
    • eslint-config-prettier
      • Prettier와 충돌하는 ESLint 규칙을 전부 꺼줌
    • eslint-plugin-prettier
      • 린터 규칙인 것처럼 Prettier를 실행함
      • 특정 상황에서 유용할 수 있지만 포맷팅 문제도 오류로 출력돼서 오류 메시지가 지나치게 많아지며 Prettier를 직접 실행하는 것보다 느림
        • Profile and Remove Slow ESLint Rules
        I was reviewing our project's ESLint config and I noticed that our lint process was running quite slow. Here was my process to identify and eliminate slow and unnecessary rules. Prefixing the eslint command with TIMING=1 profiles the time spent running each individual ESLint rule.
        Profile and Remove Slow ESLint Rules
        https://duncanleung.com/profile-measure-find-remove-slow-eslint-rules/
        Profile and Remove Slow ESLint Rules
  1. eslint, eslint-config-prettier, eslint-config-airbnb(peerDependencies 포함) 설치
      2. eslint-config-prettier
      Turns off all rules that are unnecessary or might conflict with [Prettier]. This lets you use your favorite shareable config without letting its stylistic choices get in the way when using Prettier. Note that this config only turns rules off, so it only makes sense using it together with some other config.
      eslint-config-prettier
      https://www.npmjs.com/package/eslint-config-prettier
      eslint-config-prettier
      eslint-config-airbnb
      This package provides Airbnb's .eslintrc as an extensible shared config. We export three ESLint configurations for your usage. Our default export contains most of our ESLint rules, including ECMAScript 6+ and React. It requires eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y. Note that it does not enable our React Hooks rules.
      eslint-config-airbnb
      https://www.npmjs.com/package/eslint-config-airbnb
      eslint-config-airbnb
      💡
      If using npm 5+, use this shortcut npx install-peerdeps --dev eslint-config-airbnb If using yarn, you can also use the shortcut described above if you have npm 5+ installed on your machine, as the command will detect that you are using yarn and will act accordingly. Otherwise, run npm info "eslint-config-airbnb@latest" peerDependencies to list the peer dependencies and versions, then run yarn add --dev <dependency>@<version> for each listed peer dependency.
       
      notion image
  1. .eslintrc 작성
      2. Configuring ESLint
      ESLint is designed to be flexible and configurable for your use case. You can turn off every rule and run only with basic syntax validation or mix and match the bundled rules and your custom rules to fit the needs of your project.
      Configuring ESLint
      https://eslint.org/docs/user-guide/configuring/
      Configuring ESLint
      ESLint 설정 살펴보기
      ESLint 설정에 대해서 살펴봅니다. 이 문서는 eslint.org를 참고하여 eslint 6.8.0 버전 에서 작성되었습니다. (2020/03/02) ESLint Configuration은 eslintrc.* 파일 또는 package.json의 eslintConfig 필드에 작성할 수 있습니다. ESLint의 핵심 구성 정보는 세가지 영역으로 나누어져 구성되어 있습니다. Environments: 스크립트 실행환경에 대한 설정, 사전 전역 변수 설정등 Globals: 사용자가 추가하는 전역 변수 Rules: 활성화 규칙 및 오류 수준 parserOptions 은 ESLint 사용을 위해 지원하려는 Javascript 언어 옵션을 지정할 수 있습니다.
      ESLint 설정 살펴보기
      https://velog.io/@kyusung/eslint-config-2
      ESLint 설정 살펴보기
Prettier
  1. Prettier 설치
  1. workspace에 .vscode/settings.json작성
      2. Visual Studio Code User and Workspace Settings
      You can configure Visual Studio Code to your liking through its various settings. Nearly every part of VS Code's editor, user interface, and functional behavior has options you can modify. VS Code provides two different scopes for settings: User Settings - Settings that apply globally to any instance of VS Code you open.
      Visual Studio Code User and Workspace Settings
      https://code.visualstudio.com/docs/getstarted/settings
      Visual Studio Code User and Workspace Settings
      • Workspace Settings: Settings stored inside your workspace and only apply when the workspace is opened.
      • Workspace settings override user settings. Workspace settings are specific to a project and can be shared across developers on a project.
  1. .prettierrc 작성
 

✍🏻 추가해야 될 내용

Storybook builder로 webpack v5 쓴 이유
eslint-config-prettier 정확히 하는 일 & eslint-plugin-prettier와의 차이점
@babel/eslint-parser가 하는 일
Prettier option 내용
.eslintrc 작성
package.json 전체
.vscode/settings.json option, 작성법
@emotion/babel-plugin, @emotion/babel-preset-css-prop 문제점
jsx 태그와 css 속성
 
npx create-next-app [project_name]
yarn add -D webpack@latest
npx sb init --builder webpack5
yarn add @emotion/react @emotion/styled
yarn add -D eslint eslint-config-prettier
npx install-peerdeps -D eslint-config-airbnb

# eslint-config-airbnb의 peerDependencies

# eslint-plugin-import
# eslint-plugin-react
# eslint-plugin-react-hooks
# eslint-plugin-jsx-a11y
{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": ["airbnb", "prettier", "next/core-web-vitals"],
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react/jsx-props-no-spreading": 0,
    "react/function-component-definition": [
      1,
      {
        "namedComponents": "arrow-function",
        "unnamedComponents": "arrow-function"
      }
    ],
    "arrow-body-style": ["error", "always"]
  }
}
yarn add -D prettier
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "semi": false,
  "arrowParens": "always",
  "jsxSingleQuote": false,
  "quoteProps": "as-needed",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "auto",
  "insertPragma": false,
  "proseWrap": "preserve",
  "requirePragma": false,
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}