devlog

Process

1. user api request

2. enter middleware

3. need auth ( x => logger middleware )

4. session middleware ( iron-session )

5. auth middleware ( get access token or refresh token or response UnAuthorization)

6. logger middleware ( who , what log api request )

7. server axios response ( if error return error response from next api server to client )

8. client get response ( if error catch throw error to error boundary )

9. error boundary catch error 

Process basic

1. web open

2. cookie 내 server refresh token 확인

3. refresh token으로 서버용 access token 발급

4. server refresh api 호출시 kakao 토큰 갱신, 서버 토큰 갱신

5. 갱신된 토큰 받아 cookie 저장

2022.04.26 - [Structure] - monorepo use yarn berry with nextjs, react storybook + typescript - 3 (react + stroybook + typescript)

현재 프로젝트 구조

next js에 참조할 project 추가

next js package.json 의 dependencies에 추가할 project의 package.json의 name 추가

next js의 next.config.js에 사용할 모듈 알려주기

next js 패키지에 next-transpile-modules 추가

yarn workspace web add -D next-transpile-modules

next.config.js 수정

아래와 같이 사용할 모듈 추가

const withTM = require("next-transpile-modules")(["@common/components"]);
const nextConfig = {
  reactStrictMode: true,
};

module.exports = withTM(nextConfig);

pages/index.tsx

아래와 같이 import하여 사용

2022.04.26 - [Structure] - monorepo use yarn berry with nextjs, react storybook + typescript - 2 (nextjs + typescript 추가)

CRA로 react 세팅

- 2022.04.26 storybook babel preset에 오류가 있어 CRA로 대체 -> cra preset 사용하기 위해

- 추후 순수 react setting으로 바꿀 예정

cd packages
yarn dlx create-react-app <설치를 윈하는 폴더> --template typescript

- typescript 설치가 안될 경우 수동으로 설치

- 설치 시 yarn workspace <package name> add

- package name은 yarn workspaces list로 확인

storybook 설치

- CRA를 components 이름으로 생성했기에 yarn workspace components 사용

- webpack5 버전으로 storybook 세팅

yarn workspace components dlx sb init --builder webpack5

styled-components 설치

- styled-compoenents의 의존성 패키지인 react-is 설치

yarn workspace components add styled-components
yarn workspace components add react-is

typescript confing

tsconfig.json

{
  "extends": "../../tsconfig.json",
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

storybook main.js 설정

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app",
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5",
  },
  features: {
    interactionsDebugger: true,
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) =>
        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
    },
  },
  webpackFinal: (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        modules: [...config.resolve.modules],
        fallback: {
          timers: false,
          tty: false,
          os: false,
          http: false,
          https: false,
          zlib: false,
          util: false,
          assert: false,
          ...config.resolve.fallback,
        },
      },
    };
  },
};

필요없는 package.json 설정 제거 및 packageManager추가

{
  "name": "@common/components",
  "packageManager": "yarn@3.2.0",
  "main": "src/index.tsx",
  "private": true,
  "dependencies": {
    "cra-template-typescript": "1.2.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-is": "^18.0.0",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.5"
  },
  "scripts": {
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "devDependencies": {
    "@mdx-js/react": "^1.6.22",
    "@storybook/addon-actions": "^6.4.22",
    "@storybook/addon-docs": "^6.4.22",
    "@storybook/addon-essentials": "^6.4.22",
    "@storybook/addon-interactions": "^6.4.22",
    "@storybook/addon-links": "^6.4.22",
    "@storybook/builder-webpack5": "^6.4.22",
    "@storybook/jest": "^0.0.10",
    "@storybook/manager-webpack5": "^6.4.22",
    "@storybook/node-logger": "^6.4.22",
    "@storybook/preset-create-react-app": "^4.1.0",
    "@storybook/react": "^6.4.22",
    "@storybook/testing-library": "^0.0.11",
    "@types/node": "^17.0.27",
    "@types/react": "^18.0.7",
    "@types/react-dom": "^18.0.0",
    "@types/styled-components": "^5",
    "typescript": "^4.6.3",
    "webpack": "^5.72.0"
  }
}

storybook(webpack5)을 사용하기위한 root 세팅

root위치의 package.json 에 resolutions 설정

{
	"resolutions": {
	    "webpack": "5",
	    "@storybook/core-common/webpack": "^5",
	    "@storybook/core-server/webpack": "^5",
	    "@storybook/react/webpack": "^5"
	  }
}

storybook에 typescript를 적용하기 위해 root tsconfig에 references 추가

{
  "compilerOptions": {
   ...
  },
  "references": [
    {
      "path": "packages/components"
    }
  ],
  "exclude": ["packages/**/dist/**"],
  "include": []
}

최종

2022.04.26 - [Structure] - monorepo use yarn berry with nextjs, react storybook + typescript - 1 (root basic setting)

next js + typescript 프로젝트 추가

cd packages
yarn create next-app {project} --typescript

typescript config

root의 tsconfing 세팅을 extends하여 생성

중복된 설정 제거 및 extends

{
  "extends": "../../tsconfig.json",
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

package.json 수정

version -> packageManager

root package.json의 packageManager 복사하여 붙여넣기

{
  "name": "web",
  "packageManager": "yarn@3.2.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@common/components": "workspace:*",
    "next": "12.1.5",
    "react": "18.0.0",
    "react-dom": "18.0.0"
  },
  "devDependencies": {
    "@types/node": "17.0.27",
    "@types/react": "18.0.7",
    "@types/react-dom": "18.0.0",
    "eslint": "8.14.0",
    "eslint-config-next": "12.1.5",
    "next-transpile-modules": "^9.0.0",
    "typescript": "4.6.3"
  }
}

yarn 패키지 의존성 갱신

root 위치에서 yarn 실행

yarn workspace 확인

yarn workspaces list

최종

yarn berry 활성화

yarn set version berry
yarn init
yarn plugin import typescript
yarn

yarn plugin import typscript

자체 types를 포함하지 않는 패키지를 추가할 때 @types 패키지를 package.json폴더에 종속성으로 자동으로 추가

Workspace 구성

root 디렉토리의 package.json 파일 수정

• packages 디렉토리 하위의 모든 디렉토리를 패키지로 봄

{
  "workspaces": ["packages/*"]
}

typescript, eslint, prettier 설치

yarn add -D typescript prettier eslint

vs code 세팅

yarn dlx @yarnpkg/sdks vscode

하위 패키지(workspace)만들기

mkdir packages

typescript config

tsconfgi.json

* next js의 기본 옵션을 사용함

{
  "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
  },
  "references": [
    {
      "path": "packages/components"
    }
  ],
  "include": [],
  "exclude": ["node_modules"]
}

prettier config

.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 200,
  "endOfLine": "auto",
  "arrowParens": "avoid",
  "bracketSpacing": true
}

eslint config 생략

최종 구조