Introducing Microservice Next.js !!

Microservice Next.js is space to learn with Next.js.

No	Title	Remarks
0	환경설정	Next.js환경셋팅
1	커리큘럼	커리큘럼
2	설계	실습

Get Started(`Next.js`)

1. Node.js 설치

Web 서버 구축을 위한 Node.js 설치
Node.js 다운로드

Next.js로 프로젝트 만들기

$ npx create-next-app --typescript [프로젝트 폴더명]
# or
$ yarn create next-app --typescript [프로젝트 폴더명]

tsconfig.json 설정

// tsconfig.json\
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Eslint + prettier 설정

$ yarn add --dev eslint eslint-config-airbnb eslint-config-next 
$ eslint-config-prettier eslint-plugin-babel eslint-plugin-import $ eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react $ eslint-plugin-react-hooks prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

.prettierrc.json

{
    "printWidth": 80,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "all",
    "tabWidth": 4,
    "bracketSpacing": true,
    "endOfLine": "auto",
    "useTabs": false
}

eslintric.json

// .eslintrc.json
{
  "env": {
    "browser": true, // browser 인식 Ok
    "es6": true,     // es6 버전사용 OK
    "node": true     // node 사용 OK
  },
  "parser": "@typescript-eslint/parser", // typescript 전용 parser로 지정 
  "parserOptions": {
      "project": "./tsconfig.json", 
      "sourceType": "module" 
  },
  "settings": {
      "react": {
          "version": "detect"
      }, 
      "import/parsers": { 
          "@typescript-eslint/parser": [".ts", ".tsx", ".js"] 
      }       
  },
  "plugins": ["react", "react-hooks", "prettier","@typescript-eslint"],
  "extends": [
      "eslint:recommended", 
      "airbnb", 
      "plugin:react/recommended", 
      "prettier", // 8.0.0 버젼이상은 모두 prettier로 통합됨. 
      "plugin:@typescript-eslint/eslint-recommended", 
      "plugin:@typescript-eslint/recommended", 
      "plugin:prettier/recommended", 
      "plugin:jsx-a11y/recommended", 
      "plugin:import/errors", 
      "plugin:import/warnings" 
  ], //plugin과 extends로 적용된 규칙에 덮어씌워져서 강제 설정할 수 있는 부분 
  "rules": {
      "prettier/prettier": 0, 
      "arrow-body-style": "off", 
      "prefer-arrow-callback": "off", 
      "react/react-in-jsx-scope": "off", 
      "react/prefer-stateless-function": 0, 
      "react/jsx-one-expression-per-line": 0, 
      "react/jsx-filename-extension": "off", // <> </>쓰는 것을 방지 
      "no-unused-expressions": 0, 
      "import/extensions": ["off"], 
      "import/no-unresolved": "off", 
      "import/prefer-default-export": "off", 
      "@typescript-eslint/no-var-requires": "off", // require 사용을 방지 
      "@typescript-eslint/explicit-module-boundary-types": "off", //values returned from a module are of the expected type. 
      "no-nested-ternary": "off", // 삼항연산안에 또 삼항연산 하는 것을 방지 
      "spaced-comment": "off", // 주석 쓰는 것 방지 
      "no-unused-variable": "off", // 사용되지 않는 변수가 있는 것을 방지 
      "@typescript-eslint/no-non-null-assertion": "off", 
      "react/prop-types": "off", 
      "react/jsx-props-no-spreading": "off", // spread 연산자 사용을 방지 
      "camelcase": "off", // camelcase만 써야함 // 
      "@typescript-eslint/ban-types": "off", // function, object를 types로 명시하는 것을 방지 
      "no-use-before-define": "off", // 정의 되기 전에 사용하는 것을 방지 
      "@typescript-eslint/no-inferrable-types": "off", // 초기값 할당하는 경우 type 명시를 방지 
      "react/require-default-props": "off", // props에 undefined 들어가는 것을 방지 
      "jsx-a11y/accessible-emoji": "off", // emoji 대신 img 태그 사용 
      "jsx-a11y/no-static-element-interactions": "off", // html tag에서 event handler있을 때 role props도 있어야 함 
      "jsx-a11y/click-events-have-key-events": "off" // non-interactive한 tag의 경우 클릭 이벤트가 있을 때 keyboard 이벤트도 함께 있어야 함
  
  }
}

절대 경로 설정

# tsconfig.json 파일에 추가
  "paths": { 
    "@components/*": ["src/components/*"], 
    "@pages/*": ["pages/*"], 
    "@api/*": ["src/lib/api/*"], 
    "@assets/*": ["src/assets/*"] 
  },

styled-components 설정

ssr에서 styled-components를 사용하는 경우 서버단에서 미리 만들어진 페이지에 css를 적용시키는 방식이기 때문에, 사용자에게 css가 적용되지 않은 페이지가 먼저 보이게 된다. 이를 방지하기 위해서 미리 css를 수집해서 처리하는 과정이 필요하다. pages 폴더에 _document.tsx 파일을 생성하고 아래 코드를 입력해주자.

// pages/_document.tsx
import Document, { DocumentContext } from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
    static async getInitialProps(ctx: DocumentContext) { 
        const sheet = new ServerStyleSheet(); 
        const originalRenderPage = ctx.renderPage; 
        
        try { 
            // sheet을 사용해 정의된 모든 스타일을 수집 
            ctx.renderPage = () => originalRenderPage({ 
                enhanceApp: (App) => (props) => 
                sheet.collectStyles(<App {...props} />),
             }); 
             
             // Documents의 initial props 
             const initialProps = await Document.getInitialProps(ctx); 
             
             // props와 styles를 반환 
             return { 
                 ...initialProps, 
                 styles: ( 
                    <> 
                        {initialProps.styles}
                        {sheet.getStyleElement()} 
                    </> 
                 ),
            }; 
        } finally { 
            sheet.seal(); 
        } 
    }
}

styled-components 설치

$ npm install styled-components
# or
$ yarn add styled-components

@svgr/webpack, url-loader 설정
@svgr/webpack, url-loader 설정
storybook 설치

src 폴더 안에 storybook이라는 폴더가 생성되었을텐데 이 친구는 필요없으니 삭제해도 된다.

https://velog.io/@devstone/스토리북-제대로-활용하기

$ npx sb init
# storybook 컴포넌트 테이블
$ npm i -D react-docgen-typescript-loader
# or
$ yarn add --dev react-docgen-typescript-loader
# storybook 가동
$ npm run storybook
# or
$ yarn storybook

CSS Module

리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS Module 이라는 기술을 사용하면, CSS 클래스가 중첩되는 것을 완벽히 방지

반응형 WEB 설치

$ npm install @types/react-responsive
$ npm install react-responsive
or
$ yarn add @types/react-responsive
$ yarn add react-responsive

react 다국어 모듈 설치

$ npm install react-i18next i18next
# or
$ yarn add react-i18next i18next

Mobx 설치

$ npm install mobx-react
# or
$ yarn add mobx mobx-react
# babel 설치
$ npm install @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators
# or
$ yarn add @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators

Semantic UI 설치

$ yarn add semantic-ui-react
$ yarn add semantic-ui-react semantic-ui-css

axios 설치

$ yarn add axios

next auth 설치

$ yarn add next-auth

Data & Source

Table of Data & Source

No	Title	Educational Institution	Source	Remarks
1	mio	개인개발	mio	`Next.js`

`Next.js`로 프로젝트 만들기

1. Next.js App 설치하기

$ yarn create next-app [프로젝트 명] --typescript

2. eslint, prettier 라이브러리 설치(vscode extension 설치와 settings.json 설정은 필수)

특정한 폴더로 이동하여 create-Next.js-app 명령어를 이용하여 spa라는 폴더를 만들어 보도록 하겠습니다.

$ npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
$ npm i -D prettier eslint-config-prettier eslint-plugin-prettier
$ npm i -D babel-eslint eslint-plugin-babel
$ npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
# or 
$ yarn add eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
$ yarn add prettier eslint-config-prettier eslint-plugin-prettier
$ yarn add babel-eslint eslint-plugin-babel
$ yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser
$ yarn add --dev @next/eslint-plugin-next

3. 서버 가동하기

yarn으로 가동 가능, 만약 yarn이 설치 안되어 있으면…

$ yarn dev
$ yarn build
$ yarn start

4. Material UI

$ yarn add @material-ui/core

5. Semantic UI

$ yarn add semantic-ui-react semantic-ui-css

6. axios

$ yarn add axios

Reference

블로그
1. Next.js - 반응형 web
2. Redux vs Mobx : Next.js에서 Mobx 경험기 (Redux와 비교기)
3. Next.js 프로젝트에 TypeScript를 적용
Next.js
store api분리
동적라우팅
동적라우팅1
https://colinch4.github.io/2021-06-07/mobx/
https://velog.io/@seunghwa17/Next.js-Typescript-%EC%97%90-Styled-component-%EC%A0%81%EC%9A%A9
https://www.w3schools.io/learn/nextjs-custom-404-error/
https://www.howdy-mj.me/boilerplate/next-ts-mobx-sc-sb/
안경잡이개발자

Microservice Next.js

Introducing Microservice Next.js !!

Microservice Next.js is space to learn with Next.js.

Contents

Table of Contents

Get Started(`Next.js`)

1. Node.js 설치

Data & Source

Table of Data & Source

`Next.js`로 프로젝트 만들기

1. Next.js App 설치하기

2. eslint, prettier 라이브러리 설치(vscode extension 설치와 settings.json 설정은 필수)

3. 서버 가동하기

4. Material UI

5. Semantic UI

6. axios

Reference

Microservice Next.js

Introducing Microservice Next.js !!

Microservice Next.js is space to learn with Next.js.

Contents

Table of Contents

Get Started(Next.js)

1. Node.js 설치

Data & Source

Table of Data & Source

Next.js로 프로젝트 만들기

1. Next.js App 설치하기

2. eslint, prettier 라이브러리 설치(vscode extension 설치와 settings.json 설정은 필수)

3. 서버 가동하기

4. Material UI

5. Semantic UI

6. axios

Reference

Get Started(`Next.js`)

`Next.js`로 프로젝트 만들기