react-grid-preset

사용 목적: 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