Portfolio

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.

https://www.educative.io/blog/nextjs-tutorial-examples


npx create-next-app [project_name]

Storybook

webpack v5 설치

To v5 from v4 | 웹팩

웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다.

https://webpack.kr/migrate/5/


yarn add -D webpack@latest

Storybook 초기화

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.

https://storybook.js.org/blog/get-started-with-storybook-and-next-js/


npx sb init --builder webpack5

Emotion


yarn add @emotion/react @emotion/styled

💡

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.

https://www.npmjs.com/package/@emotion/babel-plugin

@emotion/babel-plugin 사용했을 때의 장점

소스맵 제공

Source Map | 웹팩 핸드북

소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요? 정답은 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하는 것입니다.

https://joshua1988.github.io/webpack-guide/devtools/source-map.html#%EC%86%8C%EC%8A%A4-%EB%A7%B5

emotion allows for emotion components to be targeted like regular CSS selectors

Minification, dead code elimination 등등

CSS 선택자를 사용하기 위해 @emotion/babel-plugin

ESLint

아래의 아티클을 읽고 eslint-config-prettier만 사용하기로 결정!

prettier와 eslint를 구분해서 사용하자

Prettier는 formatter고 eslint는 linter 이다. 두 개의 차이점과 사용법을 알아야 더 스마트하게 사용할 수 있다. 개취지만 포맷팅 안 된 코드 상종 안 한다. (SI 다닐때 정말 힘들었...) 결론부터 말하자면 오류를 잡으려면 린터, 스타일을 교정하려면 포맷터 를 사용하자. 린터 룰은 크게 포맷팅(스타일) 룰과 코드 퀄리티 룰이라는 두가지 카테고리로 나눌 수 있다.

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

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.

https://duncanleung.com/profile-measure-find-remove-slow-eslint-rules/

eslint, eslint-config-prettier, eslint-config-airbnb(peerDependencies 포함) 설치


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

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.

https://www.npmjs.com/package/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.

https://www.npmjs.com/package/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.

.eslintrc 작성

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.

https://eslint.org/docs/user-guide/configuring/

ESLint 설정 살펴보기

ESLint 설정에 대해서 살펴봅니다. 이 문서는 eslint.org를 참고하여 eslint 6.8.0 버전 에서 작성되었습니다. (2020/03/02) ESLint Configuration은 eslintrc.* 파일 또는 package.json의 eslintConfig 필드에 작성할 수 있습니다. ESLint의 핵심 구성 정보는 세가지 영역으로 나누어져 구성되어 있습니다. Environments: 스크립트 실행환경에 대한 설정, 사전 전역 변수 설정등 Globals: 사용자가 추가하는 전역 변수 Rules: 활성화 규칙 및 오류 수준 parserOptions 은 ESLint 사용을 위해 지원하려는 Javascript 언어 옵션을 지정할 수 있습니다.

https://velog.io/@kyusung/eslint-config-2


{
  "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"]
  }
}

Prettier

Prettier 설치


yarn add -D prettier

workspace에 .vscode/settings.json작성

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.

https://code.visualstudio.com/docs/getstarted/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.


{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

.prettierrc 작성


{
  "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
}

✍🏻 추가해야 될 내용

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 속성

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

✍🏻 추가해야 될 내용