사용 목적: react-grid-layout을 활용한 gridSystem을 쉽게 적용하기 위함.

0. 사용전 전처리 사항

Create React App을 typescript로 설치해서, 해당 npm 모듈을 사용하도록 한다.

#> npx create-react-app my-app --template typescript

1.1. package.json 설정

아래 내용은 npm에 publishing하는걸 주 목표로한 설정 값이다.

note: name에 @이 있는 경우는 third-party를 의미하는데, @을 사용하고자 하는 경우엔 private repository에서 git이 관리되어야 한다. @이 없을 경우엔 일반적으로 npmjs.org에 publish하게 된다.

{
	"name": "react-grid-preset", //유일한 npm module명을 입력해야 함.
	"version": "0.1.4", //npm에 publish할때마다 버전이 달라야 함.
	"files": ["react"], //npm에 publish할 대상 directory를 지정함.
	"module": "react/index.js", //bundling할 경로/파일명을 지정함.
	"types": "react/ReactGridPreset.d.ts", //typescript bundling할 경로/파일명을 지정함.
	...,
	"scripts": {
		...,
		"build": "rollup -c",
		"build:types": "tsc --emitDeclarationOnly",
		...
	},
	...
}

1.2. bundle

해당 npm 모듈은 rollup을 이용해서 bundling한다. 아래 명령어를 실행하면 package.json에 설정된 files 경로 안에 index.js로 bundling된다.

#> npm run build

2.1. tsconfig.json 설정

아래 내용은 npm에 typescript를 publishing하는걸 주 목표로한 설정 값이다.

note: 아래 주석에 달린 내용과 같이 allowJs/isolatedModules/noEmit은 모두 값이 false여야 정상적으로 bundling이 가능하다. npm/yarn start를 하는 경우, isolatedModules/noEmit의 값이 true로 자동 변경되므로 이에 유의하자.

{
	"compilerOptions": {
		...,
		"declarationDir": "react/",
		"allowJs": false, //지우거나 값을 false로 지정해야 함.
		"isolatedModules": false, //지우거나 값을 false로 지정해야 함.
		"noEmit": false //지우거나 값을 false로 지정해야 함.
	},
	"include": ["src/components/*"]
}

2.2. typescript bundle

해당 npm 모듈은 rollup을 이용해서 bundling한다.

note: 아래 명령어를 실행하면 package.json에 설정된 files 경로 안에 index.d.ts, ReactGridPreset.d.ts로 각각 bundling된다. buldling 대상은 tsconfig.json의 include에 지정되어 있음.

#> npm run build:types

3. project 시작해보기

#> npm start
or
#> yarn start

4. .npmrc

npm을 third-party로 publish하기 위해서는 package.json에 명시된 name과 마찬가지로 private repository를 이용해야 진행이 가능함.

5. npm에 publish하기

• publish할때 유의점:

1. package.json에 version을 올린다.
2. tsconfig.json에 allowJs/isolatedModules/noEmit 각 값을 false로 설정한다.

#> npm publish

5.1. npm publish시 유의사항

note: package.json에 dependencies는 publish할때와 npm start해서 확인할 때 다르게 관리되야 한다. jsonata와 react-grid-layout은 npm module로써 사용될 경우 반드시 필요하다.

5.2. publish할 경우 package.json

...
	"dependencies": {
		"jsonata": "^1.8.4",
		"react-grid-layout": "^1.2.5",
	}
...

5.3. npm start할 경우 package.json

해당 npm module로 publish를 하지 않고 local 테스트를 하기 위한 설정 값으로, 개발자를 제외하고는 아래와 같은 설정은 할 필요없음.

...
	"dependencies": {
		"@testing-library/jest-dom": "^5.11.4",
		"@testing-library/react": "^11.1.0",
		"@testing-library/user-event": "^12.1.10",
		"@types/jest": "^26.0.15",
		"@types/node": "^12.20.13",
		"@types/react": "^17.0.5",
		"@types/react-dom": "^17.0.0",
		"eslint-config-prettier": "^8.3.0",
		"jsonata": "^1.8.4",
		"react": "^17.0.2",
		"react-dom": "^17.0.2",
		"react-grid-layout": "^1.2.5",
		"react-scripts": "4.0.3",
		"typescript": "^4.2.4",
		"web-vitals": "^1.0.1"
	}
...

6. npm module에서 install하기

#> npm install react-grid-preset

7. 컴포넌트 사용시 유의사항

import ReactGridPreset, { printLayouts } from "react-grid-preset";

...
printLayouts("reactGridPreset1"); //layouts의 구조를 미리 console.log로 확인할 수 있다. parameter를 true로 넘길 경우, JSON.stringify된 값으로 확인 가능함.

<ReactGridPreset storagePresetName="reactGridPreset1" dynamicComponentName={name} defaultLayouts={layouts}>
	<ComponentA name="ComponentA">
	...
</ReactGridPreset>
...

7.1. ReactGridPreset

note: defaultLayouts에 설정될 값의 구조는 printLayouts()로 쉽게 확인할 수 있다.

| props | 의미 | 값(type) | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------- | | storagePresetName | localStorage에서 관리될 preset의 name을 입력한다.ReactGridPreset을 다중으로 사용하기 위해 추가된 값.기본값: "reactGridPreset" | string | | dynamicComponentName | 동적으로 추가될 컴포넌트 이름을 입력한다.동적 컴포넌트 추가 기능이 필요하지 않으면 입력하지 않아도 됨.기본값: "" | string | | defaultLayouts | 컴포넌트가 바로 layouts 구조를 가지고 rendering되도록 기본 값을 설정한다. | json |

7.2. Components(children)

| props | 의미 | 값(type) | | ----- | ------------------------------------------------------------------------------------------------------------------------------ | -------- | | name | children으로 입력되는 컴포넌트를 동적으로 관리하기 위해 컴포넌트명을 props로 입력받는다. 해당 컴포넌트를 이름으로 사용하면 됨. | string |