Ant-design: ๐Ÿ’ฅ Ant Design 4.0์ด ์ง„ํ–‰ ์ค‘์ž…๋‹ˆ๋‹ค!

์— ๋งŒ๋“  2019๋…„ 05์›” 31์ผ  ยท  182์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: ant-design/ant-design

์‚ฌ์ดํŠธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ

next.ant.design


์š”์•ฝ

Ant Design 3.0์ด ์ถœ์‹œ ๋œ 2017 ๋…„ 12 ์›” ์ดํ›„ 16 ๊ฐœ์›”์ด ์ง€๋‚ฌ์Šต๋‹ˆ๋‹ค. 4289 ๊ฐœ์˜ ์ปค๋ฐ‹, 138 ๊ฐœ์˜ ๋ฆด๋ฆฌ์Šค, 7675 ๊ฐœ์˜ ๋ฌธ์ œ ๋ฐ PR ๋‚ด์—์„œ ๋งŽ์€ ๋ฒ„๊ทธ๋ฅผ ์ˆ˜์ •ํ•˜๊ณ  ๋งŽ์€ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ ( changelog )์„ ์ถ”๊ฐ€ํ•˜์—ฌ GitHub์—์„œ 25375 ๊ฐœ์˜ ๋ณ„์„ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ Ant Design Pro 4.0 ๋„ ์ถœ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค. TypeScript, ๋ธ”๋ก ๋ฐ ๋ ˆ์ด์•„์›ƒ ์ถ”์ƒํ™” ์ง€์›. ๋ชจ๋“  ๊ธฐ์—ฌ์ž์—๊ฒŒ ๊ฐ์‚ฌ ๋“œ๋ฆฌ๋ฉฐ ์—ฌ๋Ÿฌ๋ถ„์˜ ๊ธฐ์—ฌ๋กœ Ant Design์ด ๋” ์ข‹๊ณ  ๋‚˜์•„์กŒ์Šต๋‹ˆ๋‹ค.

๋™์‹œ์— Ant Design Pro 4.0์„ ์ถœ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค. TypeScript, Block ๋ฐ Layout ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

์ด ์ˆœ๊ฐ„, ์šฐ๋ฆฌ๋Š” ์ƒ๊ฐํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ข‹์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ๋‹ค์Œ์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? Ant Design์„ ๋” ๋ฐœ์ „์‹œํ‚ค๊ธฐ ์œ„ํ•ด ๋ฌด์—‡์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? Ant Design 4.0์„ ๊ณ„ํš ํ•  ๋•Œ์ž…๋‹ˆ๋‹ค! ๐Ÿป

๋‹ค์Œ์€ 4.0์— ๋Œ€ํ•œ ์„ธ๋ถ€ ๊ณ„ํš์ž…๋‹ˆ๋‹ค. ์•„์ง ๊ณ„ํš ์ค‘์ด๋ฏ€๋กœ ์ผ๋ถ€๋ฅผ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐ŸŒ“ ํ˜ธํ™˜์„ฑ ์ •๋ณด

4.0์—์„œ ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ์†Œํ’ˆ์„ ์ œ๊ฑฐ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ฆ‰, ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ์†Œํ’ˆ์ด ๋” ์ด์ƒ ์ง€์›๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ตœ์‹  3.x์—์„œ ๊ฒฝ๊ณ ๊ฐ€ ํ‘œ์‹œ๋˜์ง€ ์•Š์œผ๋ฉด ์›ํ™œํ•˜๊ฒŒ ์—…๊ทธ๋ ˆ์ด๋“œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด 4.0์ด ๋ฆด๋ฆฌ์Šค ๋œ ํ›„ 3.0์— ๋Œ€ํ•œ ๋ฐ˜๋…„ ์œ ์ง€ ๊ด€๋ฆฌ ๋‹จ๊ณ„๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์—…๊ทธ๋ ˆ์ด๋“œํ•˜๋Š” ๊ฒƒ์ด ๋ฒˆ๊ฑฐ ๋กญ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ํ˜ธํ™˜ ๊ฐ€๋Šฅํ•œ ํŒจํ‚ค์ง€๋ฅผ ์ œ๊ณต ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค.

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
  <Compatible>
    <YourApp />
  </Compatible>
);

์ด ํŒจํ‚ค์ง€๋Š” 3.x ์œ ์ง€ ๊ด€๋ฆฌ ๋‹จ๊ณ„๊ฐ€ ๋๋‚  ๋•Œ๊นŒ์ง€ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ตœ์‹  React API ์‚ฌ์šฉ

์šฐ๋ฆฌ๋Š” ์˜ค๋žซ๋™์•ˆ React 15 ์ง€์›์„ ์ œ๊ณตํ•ด ์™”์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ React๋Š” ๊ฐ•๋ ฅํ•œ ํ˜ธํ™˜์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์†Œ์…œ ํ”ผ๋“œ๋ฐฑ (React 15์— ๋Œ€ํ•œ ๋ฌธ์ œ์˜ ๊ฑฐ์˜ 0 %๊ฐ€ ์žˆ์Œ)์—์„œ๋Š” ํ•„์š”ํ•˜์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. React 15๋ฅผ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด ์šฐ๋ฆฌ๋Š” ์ƒˆ๋กœ์šด API๋ฅผ ๋งค์šฐ ์‹ ์ค‘ํ•˜๊ฒŒ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. 4.0 ์ดํ›„์—๋Š” ๋” ์ด์ƒ ๋ฌธ์ œ๊ฐ€๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

  • ๊ด€๋ จ ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•œ Hooks API ์ œ๊ณต
  • ๋™์‹œ ๋ชจ๋“œ ์ง€์› (์•„์ง ์ค€๋น„ ์ค‘, 4.0์—์„œ ๊ณ„์† ์กฐ์ •)
  • React 17์„ ๋ฐ›์•„๋“ค์ด์„ธ์š” (wow๏ผ ~)

IE9 / 10 ์ง€์› ์ค‘์ง€

Ant Design 3.0์€ ์ด์ „ IE ๋ฅผ

๊ธฐํƒ€ ํ˜ธํ™˜ ์—…๋ฐ์ดํŠธ

  • Less 2.x๋ฅผ Less 3.x๋กœ ์—…๊ทธ๋ ˆ์ด๋“œ
  • ์•„์ด์ฝ˜ ์กฐ์ •
  • ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ์–ธ๊ธ‰

๐Ÿ“ฆ ํฌ๊ธฐ ์ค„์ด๊ธฐ

์•„์ด์ฝ˜ ํฌ๊ธฐ ์ตœ์ ํ™”

[email protected] ๋’ค์— svg ์•„์ด์ฝ˜ ( ์™œ svg? )์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์š”์ฒญ์‹œ๋กœ๋“œ ํ•  ์ˆ˜์—†๋Š” ์•„์ด์ฝ˜์„ ๋งคํ•‘ํ•˜๊ธฐ ์œ„ํ•ด ๋ฌธ์ž์—ด ์ด๋ฆ„์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ์•„์ด์ฝ˜ ํŒŒ์ผ์„ antd๋กœ ๊ฐ€์ ธ์™€ ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ํฌ๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค . 4.0์—์„œ์ด๋ฅผ ์ฒ˜๋ฆฌ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ด์ „ ์•„์ด์ฝ˜ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์€ * ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค * :

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

4.0์—์„œ ๋Œ€์‹  ๋‹จ์ผ ์•„์ด์ฝ˜ ๊ฐ€์ ธ ์˜ค๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

์ด์ „ ๋ฐฉ์‹์œผ๋กœ ํ˜ธํ™˜๋˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๊ณ„์† ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Draft.js ์ œ๊ฑฐ

ํŒ์—… ์œ„์น˜๋ฅผ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด Mention ๊ตฌ์„ฑ ์š”์†Œ์—์„œ Draft.js๋ฅผ ์‚ฌ์šฉํ•˜์ง€๋งŒ ๊ทธ ์ค‘ ์ผ๋ถ€ ๊ธฐ๋Šฅ ๋งŒ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋น„์šฉ ์ด์ƒ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. 4.0์—์„œ Draft.js๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ๋Œ€์‹  ๋‹ค๋ฅธ ๊ฐ€๋ฒผ์šด ์†”๋ฃจ์…˜์„ ์‚ฌ์šฉํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค. ๋™์‹œ์— 3.0์˜ Origin Mention ๊ตฌ์„ฑ ์š”์†Œ์™€ ๊ตฌ๋ณ„ํ•˜๊ธฐ ์œ„ํ•ด API ์ถฉ๋Œ์„ ํ”ผํ•˜๊ธฐ ์œ„ํ•ด ์ƒˆ๋กœ์šด ๊ตฌ์„ฑ ์š”์†Œ Mentions๊ฐ€ ๋„์ž…๋ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ํ˜ธํ™˜๋˜๋Š” ๋ฐฉ๋ฒ•์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention />
);
// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

๐Ÿงญ ์„ฑ๋Šฅ ์ตœ์ ํ™”

์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ํฐ ๋ฐ์ดํ„ฐ ์„ธํŠธ์— ๋Œ€ํ•œ ์„ฑ๋Šฅ ๋ฌธ์ œ ๊ฐ€ ๊ฑฐ์˜ ์—†์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ๋ช‡ ๊ฐ€์ง€ ์ตœ์ ํ™”๊ฐ€ ์ด๋ฃจ์–ด ์ง€๋„๋ก ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ฐ€์ƒ ์Šคํฌ๋กค

๊ฐ€์ƒ ์Šคํฌ๋กค์€ ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ์ˆ˜ํ–‰ํ•˜๋Š” ์ผ๋ฐ˜์ ์ธ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ์ด๋ฅผ ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์ง€์›ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค. 4.0 ๋ฆด๋ฆฌ์Šค์—์„œ๋Š” ์ฆ‰์‹œ ์™„๋ฃŒ๋˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹จ๊ณ„์ ์œผ๋กœ ํ†ตํ•ฉ๋ฉ๋‹ˆ๋‹ค.

๋ฆฌ ํŒฉํ„ฐ ์• ๋‹ˆ๋ฉ”์ด์…˜

์šฐ๋ฆฌ๋Š” ๊ณผ๊ฑฐ์— ์• ๋‹ˆ๋ฉ”์ด์…˜์œผ๋กœ ํ•ดํ‚น์„ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ํ•ดํ‚น ๋Œ€์‹  ํ›จ์”ฌ ์ˆœ์ˆ˜ํ•œ React ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค. ์ด ์—…๋ฐ์ดํŠธ๋Š” ์กฐ์šฉํžˆ ์ง„ํ–‰๋˜๋ฉฐ ์•„๋ฌด๋Ÿฐ ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๐Ÿงฉ ๊ตฌ์„ฑ ์š”์†Œ ์ตœ์ ํ™”

3.0์—์„œ ๋งŽ์€ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ–ˆ์œผ๋ฉฐ 4.0์—์„œ๋„ ๊ณ„์†ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋น„์ฆˆ๋‹ˆ์Šค ์‹œ๋‚˜๋ฆฌ์˜ค, Ant Design Pro ๋ฐ ์‚ฌํšŒ์  ์š”๊ตฌ ์‚ฌํ•ญ์—์„œ ๋น„๋กฏ๋ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ์ปดํฌ๋„ŒํŠธ ํ”„๋กœ์„ธ์Šค๋Š” Ant Design 3.0๊ณผ ๋™์ผํ•˜๋ฉฐ ๊ด€๋ จ ๋””์ž์ธ ํŒŒ์ผ์„ PR์— ๋„ฃ๊ณ  ๊ณต์‹ ์›น ์‚ฌ์ดํŠธ์—์„œ ์ˆ˜์ง‘ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ๋ถ€ ๋ฒ„์ „์—์„œ ๋ฆด๋ฆฌ์Šคํ•˜์‹ญ์‹œ์˜ค.

๋˜ํ•œ ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฝ๊ฒŒํ•˜๊ธฐ ์œ„ํ•ด ๋ช‡ ๊ฐ€์ง€ ์ฃผ์š” ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋ฆฌํŒฉํ† ๋ง ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค. ๋‹ค์Œ์„ ํฌํ•จํ•˜์ง€๋งŒ ๋‹ค์Œ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

ํ˜•ํƒœ

์–‘์‹์€ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ๊ตฌ์„ฑ ์š”์†Œ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์†Œ์…œ์ด API ๋””์ž์ธ์— ๋Œ€ํ•ด ๋งŽ์€ ์˜๊ฒฌ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ์„ ์•Œ์•˜์Šต๋‹ˆ๋‹ค.
4.0์—์„œ API๋ฅผ ๋‹จ์ˆœํ™”ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

  • ์–‘์‹์—๋Š” ๋ฐ์ดํ„ฐ ์ €์žฅ์†Œ๊ฐ€ ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. ๋” ์ด์ƒ Form.create() ์„ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
  • Fom.Item์—๋Š” ํ•„๋“œ ๋ฐ”์ธ๋”ฉ์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. ๋” ์ด์ƒ getFieldDecorator ์„ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
  • Form.Item์€ ๊ฐ’์„ ์œ ์ง€ํ•˜์ง€๋งŒ ํ•„๋“œ๊ฐ€ ์ œ๊ฑฐ๋˜๋ฉด ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๊ธฐ๊ฐ€ ๋น„ํ™œ์„ฑํ™”๋ฉ๋‹ˆ๋‹ค.
const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    // Do something...
  };

  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

์‹ค์ œ ์„ธ๊ณ„์—์„œ ์šฐ๋ฆฌ๋Š” ์–‘์‹ ๊ฐ„์˜ ๋งŽ์€ ํ†ต์‹ ์„ ๋งŒ๋‚ฉ๋‹ˆ๋‹ค (์ผ๋ฐ˜์ ์œผ๋กœ ์„ธ๋ถ€ ๊ตฌ์„ฑ์—์„œ). ์šฐ๋ฆฌ๋Š” ๋” ์‰ฝ๊ฒŒ ๋งŒ๋“ค๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (
    <FormContext>
      <YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

์–‘์‹ ์ง„ํ–‰ ์ƒํ™ฉ์„ ํ™•์ธํ•˜๋ ค๋ฉด ์—ฌ๊ธฐ ๋ฅผ

ํ‘œ

๊ณผ๊ฑฐ์—๋Š” ๋งŽ์€ ํ…Œ์ด๋ธ” ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ํ™•์žฅ ๋ฐ ์Šคํฌ๋กค ์†Œํ’ˆ์ด ํ•จ๊ป˜ ์ž˜ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ์—๋Š” ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐ ์ง‘์ค‘ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ฒŒ๋‹ค๊ฐ€ ์šฐ๋ฆฌ๋Š” ํ…Œ์ด๋ธ” ์ตœ์ ํ™”์— ๋Œ€ํ•ด ๋งŽ์€ ๊ฒƒ์„ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ ˆ์ด์•„์›ƒ์„ํ•˜๋Š” ์‰ฌ์šด ๋ฐฉ๋ฒ• :

const Demo = () => {
  return (
    <Table
      header={{
        templateAreas: `
          name    address     address
          name    building    no
        `,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

antd4-table

๋˜ํ•œ ์š”์•ฝ ํ–‰์„ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด ์š”์•ฝ ๋ฐ”๋‹ฅ ๊ธ€ ์„ ์ถ”๊ฐ€ ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค.

์ƒˆ๋กœ์šด DatePicker

ํ˜„์žฌ DatePicker๋Š” ๋Œ€๋ถ€๋ถ„์˜ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์ถฉ์กฑํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ปค๋ฎค๋‹ˆํ‹ฐ ํ† ๋ก  ์—์„œ ์šฐ๋ฆฌ๋Š” ๋” ๋งŽ์ด ํŒŒํ—ค์น  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ํœด์ผ ์„ ํƒ๊ธฐ์™€ ๋ ˆ์ธ์ € ์„ ํƒ๊ธฐ๋ฅผ ์ œ๊ณต ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค ( ํ† ๋ก  ). ๋˜ํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ค๊ธฐ ์œ„ํ•ด DatePicker ๋””์ž์ธ ์Šคํƒ€์ผ์„ ์—…๋ฐ์ดํŠธ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๐Ÿš€ ๊ณ„์† ์—…๋ฐ์ดํŠธ

์œ„์˜ ๋‚ด์šฉ ์™ธ์—๋„ ๊ณ„์† ์—…๋ฐ์ดํŠธ ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. ์ด๋“ค์€ ๊ฐœ๋ฐœ ๋ฐ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ค๊ธฐ ์œ„ํ•ด 4.0์—์„œ ๊ณ„์† ์—…๋ฐ์ดํŠธ๋ฉ๋‹ˆ๋‹ค.

๐Ÿงถ ์ ‘๊ทผ์„ฑ ํ–ฅ์ƒ

Ant Design 3.0์€ ์ ‘๊ทผ์„ฑ์„ ์ œํ•œ์ ์œผ๋กœ ์ง€์›ํ•˜๋ฏ€๋กœ dom ๊ตฌ์กฐ๋ฅผ ์กฐ์ •ํ•˜๊ณ  ๋” ๋งŽ์€ aria ๋งˆํฌ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ํ™”๋ฉด ํŒ๋…๊ธฐ ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ฌ ๊ณ„ํš์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ ํ‚ค๋ณด๋“œ ์ƒํ˜ธ ์ž‘์šฉ์„ ์ตœ์ ํ™” ํ•  ์ค€๋น„๋„ํ•ฉ๋‹ˆ๋‹ค.

๐ŸŽฏ ๊ฐœ๋ฐœ์ž API ํ‘œ์ค€

์ผ๋ถ€ API ์ด๋ฆ„ ์ง€์ • ์Šคํƒ€์ผ์€ ๋‹ค๋ฅธ ์ด๋ฆ„๊ณผ ์•ฝ๊ฐ„ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. Typescript ๊ฐœ๋ฐœ์ž์—๊ฒŒ๋Š” ๋ฌธ์ œ๊ฐ€ ์•„๋‹ˆ์ง€๋งŒ ๋‹ฌ๋ฆฌ ๊ธฐ์–ตํ•˜๊ธฐ๋Š” ์–ด๋ ต์Šต๋‹ˆ๋‹ค.
๋”ฐ๋ผ์„œ ํ˜„์žฌ API ๋ฐ ๊ด€๋ จ ๋ช…๋ช… ๊ทœ์น™์„ ํฌํ•จํ•˜๋Š” ๋ช…๋ช… ํ‘œ์ค€ ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์—์„œ๋Š” API ๋ช…๋ช… ์ถฉ๋Œ์„ ํ”ผํ•˜๊ธฐ ์œ„ํ•ด ๋ช…๋ช… ๊ทœ์น™์„ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค. ๋˜ํ•œ PR์—์„œ ์ด์— ๋Œ€ํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ์˜๊ฒฌ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ’ผ ๋ฐ˜์‘ ์—„๊ฒฉ ๋ชจ๋“œ

<React.StrictMode> antd ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋ž˜ํ•‘ํ•˜๋ ค๊ณ ํ•˜๋ฉด ๊ฒฝ๊ณ ๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ์ด๋ฏธ ์ผ๋ถ€ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ƒˆ๋กœ์šด ๋ผ์ดํ”„ ์‚ฌ์ดํด ๋ฐฉ๋ฒ•์œผ๋กœ ๊ต์ฒดํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด ์ž‘์—…์€ 4.0์—์„œ ๊ณ„์†๋ฉ๋‹ˆ๋‹ค.

๐Ÿ’ก ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜ ํ–ฅ์ƒ

๊ณผ๊ฑฐ์—๋Š” ๋ช‡ ๊ฐ€์ง€ ๋ฌธ์ œ๊ฐ€ ๋ฐ˜๋ณต์ ์œผ๋กœ ๋ฐœ์ƒํ•œ๋‹ค๋Š” ์‚ฌ์‹ค์„ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋Š” ์–ด๋–ป๊ฒŒ ๋“  ์‚ฌ์šฉ ์งˆ๋ฌธ์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์ด๊ฒƒ์— ๋Œ€ํ•ด ๋ญ”๊ฐ€๋ฅผ ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค (์‹ค์ œ๋กœ ์ด๋ฏธ 3.0์—์„œ ์‹œ์ž‘๋˜์—ˆ์Šต๋‹ˆ๋‹ค). ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ ์˜ˆ๊ธฐ์น˜ ์•Š์€ ์ƒํƒœ (์˜ˆ : Moment ๊ฐœ์ฒด ๋ฌดํšจํ™”, ์ ‘๋‘์‚ฌ / ์ ‘๋‘์‚ฌ ์กฐ์ •์œผ๋กœ ์ธํ•ด dom ๊ตฌ์กฐ ๋ณ€๊ฒฝ ๋“ฑ)๋ฅผ ๊ฒฝ๊ณ ํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์ฝ˜์†”์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ๋•Œ ๊ฐ€์žฅ ๋จผ์ € ์ง‘์ค‘ํ•ด์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋ฌธ์ œ๋ฅผ ์ฐพ๋Š” ๋ฐ ๋„์›€์ด ๋  ์ˆ˜์žˆ๋Š” ์ ์ ˆํ•œ ํŒ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๋™์‹œ์— ๊ฐ ๊ตฌ์„ฑ ์š”์†Œ ๋ฌธ์„œ์˜ FAQ์— ๋‹ค๋ฅธ ์งˆ๋ฌธ์„ ์š”์•ฝํ•ฉ๋‹ˆ๋‹ค. ์œ ์ง€ ๊ด€๋ฆฌ ์ธก๋ฉด์—์„œ ๊ฐ ์‚ฌ์šฉ ์งˆ๋ฌธ์— ๋Œ€ํ•ด ๋„์›€์„ ๋“œ๋ฆด ์ˆ˜๋Š” ์—†์ง€๋งŒ ํŠนํžˆ ์ƒˆ๋กœ ์˜จ ๊ฐœ๋ฐœ์ž์—๊ฒŒ๋Š” ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. FAQ๋Š” ๋งŽ์€ ๊ฒ€์ƒ‰ ์‹œ๊ฐ„์„ ์ ˆ์•ฝํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด์— ๊ด€์‹ฌ์ด ์žˆ์œผ์‹œ๋ฉด ์ €ํฌ์™€ ํ•จ๊ป˜ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ค๋Š” ๋ฐ ๋„์›€์„ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๐Ÿฑ ๋””์ž์ธ ๋ฆฌ์†Œ์Šค

Ant Design์€ ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ผ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋””์ž์ธ์ด ์ง€์›์˜ ํž˜์ž…๋‹ˆ๋‹ค. ๋””์ž์ธ ๋ฆฌ์†Œ์Šค (Sketch ์ปดํฌ๋„ŒํŠธ ํŒจํ‚ค์ง€, ์ฃผ๋ฐฉ ๋„๊ตฌ, ๋””์ž์ธ ํ† ํฐ ๋“ฑ)๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๊ณ  ํ˜„์žฌ ์ปดํฌ๋„ŒํŠธ ์Šคํƒ€์ผ์„ ์กฐ์ •ํ•˜์—ฌ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ฌ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋งˆ์ผ์Šคํ†ค

์ด์ •ํ‘œ ๊ณ„ํš์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. Github์—์„œ ๊ด€๋ จ ๋ฌธ์ œ๋ฅผ ๋งŒ๋“ค ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ ์‚ฌํšŒ ๊ณตํ—Œ์ž๋ฅผ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

Q2

  • ๊ด€๋ จ API๋ฅผ Deprecated๋กœ ํ‘œ์‹œํ•˜๊ณ  ๋ฌธ์„œ์—์„œ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.
  • ๋‚ฎ์€ ์ˆ˜์ค€์˜ ๊ตฌ์„ฑ ์š”์†Œ ๊ฒฝ๊ณ  ์—…๋ฐ์ดํŠธ.

Q3

  • antd 4.0 ๋ธŒ๋žœ์น˜๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๋ฌธ์„œ๋ฅผ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค.
  • ๋ถ€ํ’ˆ ๊ฐœ๋ฐœ.

4 ๋ถ„๊ธฐ

  • Ant Design 4.0์„ ์ถœ์‹œํ•ฉ๋‹ˆ๋‹ค.

ํƒ‘์Šน์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค

๊ฐœ๋ฐœ ๊ณผ์ •์—์„œ ๊ณ„์† ๊ฒŒ์‹œํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์œ„์˜ ๋‚ด์šฉ์€ ์ตœ์ข… ๋‚ด์šฉ์ด ์•„๋‹ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ์˜๊ฒฌ / ์กฐ์–ธ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค! Ant Design 4.0์„ ๋” ์ข‹๊ฒŒ ๋งŒ๋“ค์–ด ๋ด…์‹œ๋‹ค!


์†Œ๊ฐœ

Ant Design์ด 2017 ๋…„ 12 ์›” 3.0์„ ์ถœ์‹œ ํ•œ ์ง€ 16 ๊ฐœ์›”์ด ์ง€๋‚ฌ์Šต๋‹ˆ๋‹ค. ์ด ๊ธฐ๊ฐ„ ๋™์•ˆ ์šฐ๋ฆฌ๋Š” ๋งŽ์€ ๋ฒ„๊ทธ๋ฅผ ์ˆ˜์ •ํ•˜๊ณ  ๋งŽ์€ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ ( ์—…๋ฐ์ดํŠธ ๋กœ๊ทธ )์„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. 4289 ๊ฐœ์˜ ์ปค๋ฐ‹์„ ์ œ์ถœํ•˜๊ณ  138 ๊ฐœ์˜ ๋ฒ„์ „์„ ์ถœ์‹œํ–ˆ์œผ๋ฉฐ 7675 ๊ฐœ์˜ ๋ฌธ์ œ์™€ PR์„ ์ข…๋ฃŒํ•˜๊ณ  25375 ๊ฐœ์˜ ๋ณ„์„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ Ant Design Pro 4.0 ๋„ ์ถœ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค. TypeScript, ๋ธ”๋ก ๋ฐ ๋ ˆ์ด์•„์›ƒ ์ถ”์ƒํ™”๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. Ant Design์„๋ณด๋‹ค ์œ ์šฉํ•˜๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ํ—Œ์‹  ํ•ด ์ฃผ์‹  ๋ชจ๋“  ์ปค๋ฎค๋‹ˆํ‹ฐ ์ž์› ๋ด‰์‚ฌ์ž์—๊ฒŒ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

๋™์‹œ์— ๋‹ค์Œ ๋‹จ๊ณ„๋Š” ๋ฌด์—‡์ด๋ฉฐ Ant Design์„ ๋” ๋ฐœ์ „์‹œํ‚ฌ ์ˆ˜์žˆ๋Š” ๋ฐฉ๋ฒ•๋„ ์ƒ๊ฐํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ์˜ฌํ•ด 4 ๋ถ„๊ธฐ์— Ant Design 4.0 ๋ฒ„์ „์„ ์ถœ์‹œ ํ•  ์˜ˆ์ • ์ž…๋‹ˆ๋‹ค. ๐Ÿป

๋‹ค์Œ์€ 4.0์— ๋Œ€ํ•œ ์„ธ๋ถ€ ๊ณ„ํš์ž…๋‹ˆ๋‹ค. ๋ฌผ๋ก  ์ด๊ฒƒ์€ ์•„์ง ๊ณ„ํš ์ค‘์ž…๋‹ˆ๋‹ค. ์ •์‹ ์ถœ์‹œ์‹œ ์กฐ์ •๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐ŸŒ“ ํ˜ธํ™˜์„ฑ ์กฐ์ •

4.0์—์„œ Deprecated๋กœ ํ‘œ์‹œ๋œ ์†์„ฑ์„ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค. ์ด๋•Œ ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ๋ฅผ ์ตœ์‹  3.x๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๊ณ  ์ฝ˜์†”์— antd์˜ ๊ฒฝ๊ณ  ๋ฉ”์‹œ์ง€๊ฐ€ ํ‘œ์‹œ๋˜์ง€ ์•Š์œผ๋ฉด 4.0์œผ๋กœ์˜ ์—…๊ทธ๋ ˆ์ด๋“œ๋„ ์›ํ™œํ•˜๊ฒŒ ์ด๋ฃจ์–ด์ง‘๋‹ˆ๋‹ค. 3.x ๋ฒ„์ „์˜ ๊ฒฝ์šฐ 4.0 ๋ฆด๋ฆฌ์Šค ์ดํ›„์—๋„ ์ถ”๊ฐ€ 6 ๊ฐœ์›”์˜ ์œ ์ง€ ๊ด€๋ฆฌ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

์—…๊ทธ๋ ˆ์ด๋“œ ๋ฒ„์ „์€ ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” API๋ฅผ ํฌ๊ธฐํ•  ์—๋„ˆ์ง€๊ฐ€ ๋งŽ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. 4.0์„ ์ถœ์‹œ ํ•  ๋•Œ ํ”„๋กœ์ ํŠธ ์ „ํ™˜์„ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด ํ˜ธํ™˜์„ฑ ํŒจํ‚ค์ง€๋ฅผ ์ œ๊ณต ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค (๊ด€๋ จ API๋Š” ์•„์ง ์„ค๊ณ„ ์ค‘์ด๋ฉฐ ๊ณต์‹ ์ถœ์‹œ์‹œ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์Œ). ) :

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
  <Compatible>
    <YourApp />
  </Compatible>
);

3.0 ์œ ์ง€ ๊ด€๋ฆฌ ์ž‘์—…์ด ์ค‘๋‹จ ๋  ๋•Œ๊นŒ์ง€ ํ˜ธํ™˜์„ฑ ํŒฉ๋„ ์—…๋ฐ์ดํŠธ ๋œ ์ƒํƒœ๋กœ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค.

์ตœ์‹  ๋ฒ„์ „์˜ React API ์‚ฌ์šฉ

์šฐ๋ฆฌ๋Š” ์˜ค๋žซ๋™์•ˆ React 15 ๋ฒ„์ „์„ ์ง€์›ํ•ด ์™”์ง€๋งŒ ์ปค๋ฎค๋‹ˆํ‹ฐ ํ”ผ๋“œ๋ฐฑ์—์„œ ์ด๊ฒƒ์€ ์‹ค์ œ๋กœ ์ค‘์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค (React 15์˜ ์ด์Šˆ ๋ฒˆํ˜ธ๊ฐ€ 0 %์— ๊ฐ€๊นŒ์›Œ์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค). React ์ž์ฒด์—๋Š” ๋งค์šฐ ๊ฐ•๋ ฅํ•œ ํ˜ธํ™˜์„ฑ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. React 15๋ฅผ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด ์šฐ๋ฆฌ๋Š” ๊ฐœ๋ฐœ ๊ณผ์ •์—์„œ ์ƒˆ๋กœ์šด API๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๋งค์šฐ ์‹ ์ค‘ํ•ฉ๋‹ˆ๋‹ค. ๋ฒ„์ „ 4.0 ์ดํ›„์—๋Š” ์ตœ์‹  React ๋ฒ„์ „์„ ๊ฐœ๋ฐœ ๋ฒค์น˜ ๋งˆํฌ๋กœ ์‚ฌ์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

  • ๊ด€๋ จ ๊ตฌ์„ฑ ์š”์†Œ์˜ ํ›„ํฌ ๋ฒ„์ „ ์ œ๊ณต
  • ๋™์‹œ ๋ชจ๋“œ ์ง€์› (๋ฌผ๋ก  ์ค€๋น„ํ•ด์•ผ ํ•  ๊ฒƒ์ด ๋งŽ์œผ๋ฉฐ 4.0 ๋ฆด๋ฆฌ์Šค์—์„œ ๊ณ„์† ์กฐ์ •๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.)
  • React 17์„ ๋ฐ›์•„๋“ค์ด์„ธ์š” (์™€์šฐ! ~)

IE9 / 10 ์ง€์› ์ค‘์ง€

Ant Design 3.0์€ ์ด์ „ ๋ฒ„์ „์˜ IE์™€ ํ˜ธํ™˜๋˜๋„๋ก ๋งŽ์€ ๋…ธ๋ ฅ์„ ๊ธฐ์šธ

๊ธฐํƒ€ ํ˜ธํ™˜์„ฑ ์กฐ์ •

  • 2.x ๋ฏธ๋งŒ์—์„œ 3.x ๋ฏธ๋งŒ์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œ
  • ์•„์ด์ฝ˜ ์‚ฌ์šฉ ๋ณ€๊ฒฝ
  • ์“ธ๋ชจ์—†๋Š” ์–ธ๊ธ‰

๐Ÿ“ฆ ๋ณผ๋ฅจ ์ค„์ด๊ธฐ

์•„์ด์ฝ˜ ํฌ๊ธฐ ์ตœ์ ํ™”

[email protected] ์—์„œ๋Š” svg ์•„์ด์ฝ˜์„ ๋„์ž…ํ–ˆ์Šต๋‹ˆ๋‹ค ( ์™œ svg ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๊นŒ? ). ๋ฌธ์ž์—ด ๋„ค์ด๋ฐ์œผ๋กœ ์•„์ด์ฝ˜์„ ์„ค์ •ํ•˜๋Š” API๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์œผ๋ฉฐ,์ด ๋””์ž์ธ์—์„œ๋Š” ํ•„์š”์— ๋”ฐ๋ผ๋กœ๋“œ ํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— SVG ์•„์ด์ฝ˜ ํŒŒ์ผ์„ ์ „๋ฉด ๋„์ž…ํ•˜์—ฌ ํŒจํ‚ค์ง€ ์ œํ’ˆ์˜ ํฌ๊ธฐ๋ฅผ ํฌ๊ฒŒ ๋Š˜ ๋ ธ์Šต๋‹ˆ๋‹ค . 4.0์—์„œ๋Š”์ด๋ฅผ ์กฐ์ •ํ•˜์—ฌ ๋ณผ๋ฅจ์„ ์ตœ์ ํ™”ํ•ฉ๋‹ˆ๋‹ค.

์ด์ „ ๋ฒ„์ „์˜ ์•„์ด์ฝ˜ ์‚ฌ์šฉ์€ ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค .

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

4.0์—์„œ๋Š” ์ฃผ๋ฌธํ˜• ๋„์ž… ๋ฐฉ๋ฒ•์ด ์ฑ„ํƒ๋ฉ๋‹ˆ๋‹ค.

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

์œ„์˜ ํ˜ธํ™˜ ๊ฐ€๋Šฅํ•œ ๋ฐฉ๋ฒ•์„ ๊ณ„์† ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Draft.js ์ œ๊ฑฐ

๋“œ๋กญ ๋‹ค์šด ํ”„๋กฌํ”„ํŠธ ์œ„์น˜ ์ง€์ • ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด Mention ๊ตฌ์„ฑ ์š”์†Œ์— Draft.js๋ฅผ ๋„์ž…ํ–ˆ์ง€๋งŒ ๊ทธ ๊ธฐ๋Šฅ์˜ ์ผ๋ถ€๋งŒ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ€์„ฑ ๋น„๋ฅผ ๊ฐ์•ˆํ•˜๋ฉด ์กฐ๊ธˆ ๋‚ญ๋น„ ์ธ ๊ฒƒ ๊ฐ™๋‹ค. 4.0์—์„œ ์ข…์†์„ฑ์„ ์ œ๊ฑฐํ•˜๊ณ  ๋Œ€์‹  ๋” ๊ฐ€๋ฒผ์šด ์†”๋ฃจ์…˜์„ ์‚ฌ์šฉํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค. ๋™์‹œ์— 3.0์—์„œ Mention ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๊ตฌ๋ณ„ํ•˜๊ธฐ ์œ„ํ•ด API ์ถฉ๋Œ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ์ƒˆ๋กœ์šด ๊ตฌ์„ฑ ์š”์†Œ Mentions๋ฅผ ์ œ๊ณต ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์œ„์˜ ํ˜ธํ™˜ ๊ฐ€๋Šฅํ•œ ๋ฉ”์„œ๋“œ์˜ ์ง€์†์ ์ธ ์‚ฌ์šฉ๋„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention />
);
// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

๐Ÿงญ ์„ฑ๋Šฅ ์ตœ์ ํ™”

์œ ์ง€ ๋ณด์ˆ˜ ๊ณผ์ •์—์„œ ๋น… ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•œ ์„ฑ๋Šฅ ๋…ผ์˜ ๋ฅผ ๋งŽ์ด ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด ์„ฑ๋Šฅ ์ตœ์ ํ™”๋„ ๊ณ„ํšํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ€์ƒ ์Šคํฌ๋กค

๊ฐ€์ƒ ์Šคํฌ๋กค์€ ์ผ๋ฐ˜์ ์ธ ์ตœ์ ํ™” ๋ฐฉ๋ฒ•์ด์ง€๋งŒ Ant Design์˜ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ๋กœ ์ธํ•ด ๊ฐ€์ƒ ์Šคํฌ๋กค์„ ์‚ฌ์šฉ์ž ์ •์˜ํ•˜๋Š” ๊ฒƒ์ด ์‰ฝ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด์ œ ์šฐ๋ฆฌ๋Š” ์Šคํฌ๋กค๋ง์„ ํ†ตํ•ด ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ๊ฐ€์ƒ ์Šคํฌ๋กค๋ง์„ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ง€์›ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค. ๋ฌผ๋ก  4.0์ด ์ถœ์‹œ ๋  ๋•Œ ๋ชจ๋“  ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์—…๋ฐ์ดํŠธ๋˜์—ˆ๋‹ค๊ณ  ๋ณด์žฅํ•˜์ง€๋Š” ์•Š์œผ๋ฉฐ ๊ณ„์† ์—…๋ฐ์ดํŠธ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ฐœ์„ 

๊ณผ๊ฑฐ์—๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ๋ช‡ ๊ฐ€์ง€ ํ•ดํ‚น์„ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ์‹œ๋‚˜๋ฆฌ์˜ค์—์„œ ๋งค์šฐ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. 4.0์—์„œ๋Š”์ด๋ฅผ ์กฐ์ •ํ•˜๊ณ  ๋” ๋งŽ์€ React ๋„๋กœ์— ๋Œ€ํ•œ ํ•ดํ‚น ์ ‘๊ทผ ๋ฐฉ์‹์„ ํฌ๊ธฐํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค. ์กฐ์ •์€ ์ž๋™์œผ๋กœ ์—…๋ฐ์ดํŠธ๋˜๋ฏ€๋กœ ๋ณ€๊ฒฝํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

๐Ÿงฉ ๊ตฌ์„ฑ ์š”์†Œ ์ •๋ณด

3.0์—์„œ๋Š” ๊ณ„์†ํ•ด์„œ ๋งŽ์€ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. 4.0์—์„œ๋Š” ๊ณ„์†ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋‹น์‚ฌ์˜ ๋น„์ฆˆ๋‹ˆ์Šค ์‹œ๋‚˜๋ฆฌ์˜ค, Ant Design Pro ๋ฐ ์ปค๋ฎค๋‹ˆํ‹ฐ ์š”๊ตฌ ์‚ฌํ•ญ์— ๋”ฐ๋ผ ๊ฐœ์„  ๋  ๊ฒƒ์ด๋ฉฐ ์ด๋Š” ์ง€์†์ ์ธ ํ”„๋กœ์„ธ์Šค์ž…๋‹ˆ๋‹ค. ์‹ ๊ทœ ์ปดํฌ๋„ŒํŠธ ์ถ”๊ฐ€ ๊ณผ์ •์€ Ant Design 3.0๊ณผ ๋™์ผํ•ฉ๋‹ˆ๋‹ค. ๊ด€๋ จ ์ปดํฌ๋„ŒํŠธ์˜ ๋””์ž์ธ ์ดˆ์•ˆ์„ ์ด‰๋ฐœํ•˜์—ฌ PR์— ๊ฒŒ์‹œํ•˜๊ณ  ๊ณต์‹ ์›น ์‚ฌ์ดํŠธ์— ์—…๋ฐ์ดํŠธ ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ ์™„๋ฃŒ ํ›„ ์›”๊ฐ„ ๋งˆ์ด๋„ˆ๋กœ ๊ณต๊ฐœ ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. ๋ฒ„์ „.

๋˜ํ•œ ๊ฐœ๋ฐœ ๋ฐ ์ƒํ˜ธ ์ž‘์šฉ์˜ ์šฉ์ด์„ฑ์„ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด ๋ช‡ ๊ฐ€์ง€ ์ฃผ์š” ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋ฆฌํŒฉํ† ๋ง ํ•  ์ค€๋น„๋„ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—๋Š” ๋‹ค์Œ์ด ํฌํ•จ๋˜์ง€๋งŒ ์ด์— ๊ตญํ•œ๋˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค.

์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ

์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ์˜ ์ฒญ์ค‘์ด ๋งค์šฐ ๋งŽ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์„ฑ๊ฐ€์‹  ์–‘์‹ API์— ๋Œ€ํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ๋ถˆ๋งŒ๋„ ํ™•์ธํ–ˆ์Šต๋‹ˆ๋‹ค. 4.0์—์„œ๋Š” ๊ฐœ๋ฐœ ๋น„์šฉ์„ ๋‹จ์ˆœํ™”ํ•˜๊ธฐ ์œ„ํ•ด ๋” ๋‚˜์€ API ์–‘์‹์„ ํƒ์ƒ‰ํ•˜๊ณ ์žํ•ฉ๋‹ˆ๋‹ค.

  • ์–‘์‹์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์–‘์‹ ๋ฐ์ดํ„ฐ ํ•„๋“œ๋ฅผ ์ง‘๊ณ„ํ•˜๋ฏ€๋กœ ๋” ์ด์ƒ Form.create() ๋ฅผ ํ†ตํ•ด ์ปจํ…์ŠคํŠธ๋ฅผ ๋งŒ๋“ค ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
  • Fom.Item์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์–‘์‹ ํ•„๋“œ๋ฅผ ์ง‘๊ณ„ํ•˜๋ฏ€๋กœ getFieldDecorator ๋ฅผ ํ†ตํ•ด ํ•„๋“œ๋ฅผ ๋ฐ”์ธ๋”ฉ ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
  • Form.Item์˜ ๊ฐ’์€ ํ•ญ์ƒ ์œ ์ง€๋˜์ง€๋งŒ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ๊ธฐ๋Šฅ์€ ์–‘์‹ ํ•ญ๋ชฉ์ด ํ‘œ์‹œ ๋  ๋•Œ๋งŒ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.
const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    // Do something...
  };

  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

์‹ค์ œ ์žฅ๋ฉด์—์„œ ์šฐ๋ฆฌ๋Š” ๋‹ค์ค‘ ํ˜•ํƒœ ์—ฐ๊ฒฐ ์žฅ๋ฉด (์ƒ์„ธ ๊ตฌ์„ฑ์—์„œ ์ผ๋ฐ˜์ )์„ ๋งŒ๋‚ฌ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์‚ฌ์šฉํ•˜๊ธฐ ํŽธ๋ฆฌํ•˜์ง€ ์•Š๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์œผ๋ฏ€๋กœ ์–‘์‹ ๊ฐ„์˜ ์—ฐ๊ฒฐ ๊ธฐ๋Šฅ๋„ ์ œ๊ณต ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (
    <FormContext>
      <YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

๋‹น์‹ ์ด ์–‘์‹์˜ ์ง„ํ–‰์„ ๋”ฐ๋ผํ•˜๋ ค๋ฉด ํ™•์ธ์— ์˜ค์‹  ๊ฒƒ์„ ํ™˜์˜ ์ง„ํ–‰ ์ƒํ™ฉ์„ .

ํ…Œ์ด๋ธ” ๊ตฌ์„ฑ ์š”์†Œ

์ด์ „ ๋ฒ„์ „์—์„œ๋Š” ํ…Œ์ด๋ธ” ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ๋งŽ์€ ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ๊ณผ๊ฑฐ์—๋Š” Table์˜ ํ™•์žฅ ๋ฐ ์Šคํฌ๋กค ์†์„ฑ์ด ์ž˜ ์ž‘๋™ํ•˜์ง€ ์•Š์•˜ ์Œ์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ์—๋Š”์ด ์˜์—ญ์—์„œ ๊ฐˆ๋“ฑ์„ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐ ์ดˆ์ ์„ ๋งž์ถœ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ ํ…Œ์ด๋ธ” ๊ตฌ์„ฑ ์š”์†Œ์˜ ์„ฑ๋Šฅ์„ ๋”์šฑ ์ตœ์ ํ™” ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋” ๊ฐ„๋‹จํ•œ ํ…Œ์ด๋ธ” ๋ ˆ์ด์•„์›ƒ ๋ฐฉ๋ฒ•์„ ์‚ดํŽด๋ณด์„ธ์š”.

const Demo = () => {
  return (
    <Table
      header={{
        templateAreas: `
          name    address     address
          name    building    no
        `,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

antd4-table

๋˜ํ•œ ์š”์•ฝ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด ์š”์•ฝ ๋ฐ”๋‹ฅ ๊ธ€ ์„ ์ถ”๊ฐ€ ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค.

DatePicker ๋‹ค์‹œ ์‹คํ–‰

๊ธฐ์กด DatePicker๋Š” ๋Œ€๋ถ€๋ถ„์˜ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์ถฉ์กฑํ–ˆ์ง€๋งŒ ์ปค๋ฎค๋‹ˆํ‹ฐ ํ† ๋ก ์—์„œ . ์šฐ๋ฆฌ๋Š” ์—ฌ์ „ํžˆ ๋” ๊นŠ์ด ํŒŒ๊ณ ๋“ค ์ˆ˜์žˆ๋Š” ๊ธฐํšŒ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ ๋‚จ์€ ์—ฐ๋„ ์„ ํƒ์ž์™€ ํ•ด๋‹น ๋ฒ”์œ„ ์„ ํƒ์ž๋ฅผ ์™„๋ฃŒ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค ( ํ† ๋ก  ). ๋˜ํ•œ ์‚ฌ์šฉ์ž์˜์ธ์ง€ ๋น„์šฉ์„ ๋”์šฑ ์ค„์ด๊ธฐ ์œ„ํ•ด ๊ด€๋ จ ๋‚ ์งœ ๋ฐ ์‹œ๊ฐ„ ์„ ํƒ๊ธฐ์˜ ์Šคํƒ€์ผ์„ ์กฐ์ •ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๐Ÿš€ ์ง€์†์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ

์œ„์˜ ์ฝ˜ํ…์ธ  ์™ธ์—๋„ ์ผ๋ถ€ ์ฝ˜ํ…์ธ ๋„ ์ง€์†์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. ์ด๋Š” 4.0์—์„œ ์‚ฌ์šฉ์ž ๊ฐœ๋ฐœ ๋ฐ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด ํ›„์† ์กฐ์น˜๋ฅผ ์ทจํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๐Ÿงถ ์ ‘๊ทผ์„ฑ ๊ฒฝํ—˜ ํ–ฅ์ƒ

Ant Design 3.0์€ ์ ‘๊ทผ์„ฑ ๊ฒฝํ—˜์„ ์ง€์›ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ํ™”๋ฉด ์ฝ๊ธฐ ๊ฒฝํ—˜์„ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด ์ปดํฌ๋„ŒํŠธ ๊ตฌ์กฐ๋ฅผ ์กฐ์ •ํ•˜๊ณ  ๋” ๋งŽ์€ aria ํƒœ๊ทธ๋ฅผ ์ถ”๊ฐ€ ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ ๋” ๋‚˜์€ ์ „์ฒด ํ‚ค๋ณด๋“œ ์ƒํ˜ธ ์ž‘์šฉ ๊ฒฝํ—˜์„ ๋ณด์žฅํ•˜๊ธฐ ์œ„ํ•ด ๊ธฐ์กด ๊ตฌ์„ฑ ์š”์†Œ ํ‚ค๋ณด๋“œ ์ƒํ˜ธ ์ž‘์šฉ ๋ฐฉ๋ฒ•์„ ์ตœ์ ํ™” ํ•  ์ค€๋น„๋„ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๐ŸŽฏ ๊ฐœ๋ฐœ์ž API ์‚ฌ์–‘

์ง„ํ™” ๊ณผ์ •์—์„œ ๋ช‡ ๊ฐ€์ง€ API ์Šคํƒ€์ผ์ด ๋‹ค๋ฅธ ๊ตฌ์„ฑ ์š”์†Œ์™€ ํ˜ธํ™˜๋˜์ง€ ์•Š๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค. TypeScript ์‚ฌ์šฉ์ž์—๊ฒŒ๋Š” ๋ฌธ์ œ๊ฐ€๋˜์ง€ ์•Š์ง€๋งŒ ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž์—๊ฒŒ๋Š” ๋ฉ”๋ชจ๋ฆฌ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ๋Š” ํ‘œ์ค€ ๋ช…๋ช… ๋ฌธ์„œ๋ฅผ ๋งŒ๋“ค ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด ๋ฌธ์„œ์—๋Š” ๊ธฐ์กด API ๋ชฉ๋ก๊ณผ ์ ์ ˆํ•œ ๋ช…๋ช… ๊ทœ์น™์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋˜๋ฉด์ด ์‚ฌ์–‘์— ๋”ฐ๋ผ ์ด๋ฆ„์ด ์ง€์ •๋ฉ๋‹ˆ๋‹ค. ํ–ฅํ›„ API ์ฐจ์ด๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด. ๋ฌผ๋ก  PR์— ๋Œ€ํ•œ ํ”ผ๋“œ๋ฐฑ์„ ์ œ๊ณตํ•˜๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ ํ•™์ƒ๋“ค๋„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ’ผ ์—„๊ฒฉ ๋ชจ๋“œ ๋ฐ˜์‘

antd ๊ตฌ์„ฑ ์š”์†Œ ์™ธ๋ถ€์—์„œ <React.StrictMode> ๋ฅผ ๋ž˜ํ•‘ํ•˜๋ ค๊ณ ํ•˜๋ฉด antd ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ๋งŽ์€ ๊ฒฝ๊ณ  ๋ฉ”์‹œ์ง€๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. 3.0์—์„œ ์ผ๋ถ€ ๊ตฌ์„ฑ ์š”์†Œ์˜ ์ˆ˜๋ช…์ฃผ๊ธฐ ๋ฐฉ๋ฒ•์„ ์—…๋ฐ์ดํŠธํ–ˆ์Šต๋‹ˆ๋‹ค. 4.0์—์„œ๋Š” ๊ณ„์†ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๐Ÿ’ก ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜ ํ–ฅ์ƒ

๊ณผ๊ฑฐ ์œ ์ง€ ๊ด€๋ฆฌ ํ”„๋กœ์„ธ์Šค์—์„œ ํŠน์ • ๋ฌธ์ œ๊ฐ€ ์•ž๋’ค๋กœ ๋‚˜ํƒ€๋‚˜๋Š” ๊ฒƒ์„ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋Š” ์ผ๋ถ€ ์‚ฌ์šฉ ์‚ฌ์–‘ ๋˜๋Š” ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ ์‹œ๋‚˜๋ฆฌ์˜ค์—์„œ ์ผ๋ฐ˜์ ์ž…๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด ์šฐ๋ฆฌ๋Š” ์—ฌ๊ธฐ์„œ ๊ฐœ์„ ํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค (์‚ฌ์‹ค 3.0 ์ดํ›„๋กœ ๊ฐœ์„ ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค). ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ๋Š” ์˜ˆ๊ธฐ์น˜ ์•Š์€ ์ƒํ™ฉ (์˜ˆ : ์œ ํšจํ•˜์ง€ ์•Š์€ Moment ๊ฐœ์ฒด, ์ž…๋ ฅ ์ ‘๋‘์‚ฌ / ์ ‘๋ฏธ์‚ฌ์˜ ๋™์  ์กฐ์ •์œผ๋กœ ์ธํ•œ Dom ๊ตฌ์กฐ ๋ณ€๊ฒฝ ๋“ฑ)์— ๋Œ€ํ•ด ์ฝ˜์†”์—์„œ ๋ฉ”์‹œ์ง€๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์ฝ˜์†”์ด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ๊ฐœ๋ฐœ์ž๊ฐ€์ฃผ์˜๋ฅผ ๊ธฐ์šธ์ด๋Š” ์ฒซ ๋ฒˆ์งธ ์žฅ์†Œ๋ผ๊ณ  ํ™•์‹ ํ•˜๋ฉฐ ์—ฌ๊ธฐ์— ์ ์ ˆํ•œ ํžŒํŠธ๋ฅผ ์ œ๊ณตํ•˜๋ฉด ๋ฌธ์ œ๋ฅผ ์‹ ์†ํ•˜๊ฒŒ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋™์‹œ์— ์ผ๋ถ€ ํŠน์ˆ˜ํ•œ ์‚ฌ์šฉ ๋˜๋Š” ์‹œ๋‚˜๋ฆฌ์˜ค๋ฅผ ์œ„ํ•ด. ํ•ด๋‹น ๊ตฌ์„ฑ ์š”์†Œ ๋ฌธ์„œ์—์„œ FAQ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ ์œ ์ง€ ๋ณด์ˆ˜์˜ ๊ด€์ ์—์„œ ์šฐ๋ฆฌ์˜ ์—๋„ˆ์ง€๋Š” ์‚ฌ์šฉ ๋ฐฉ๋ฒ• ๋ฌธ์ œ์— ๋Œ€ํ•œ ์ž์„ธํ•œ ๋‹ต๋ณ€์„ ์ œ๊ณต ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๋Ÿฌํ•œ ์งˆ๋ฌธ์€ ์‚ฌ์‹ค์ด๋ฉฐ, ํŠนํžˆ ์‹ ๊ทœ ๊ฐœ๋ฐœ์ž์—๊ฒŒ๋Š” FAQ๊ฐ€ ๋งŽ์€ ๊ฒ€์ƒ‰ ์‹œ๊ฐ„์„ ์ ˆ์•ฝํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ด€์‹ฌ์ด ์žˆ์œผ์‹œ๋ฉด ์ปค๋ฎค๋‹ˆํ‹ฐ ์ž์› ๋ด‰์‚ฌ์ž๋“ค๋„ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜์„ ๊ฐœ์„ ํ•˜๋Š” ๋ฐ ๋„์›€์„ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿฑ ๋””์ž์ธ ์ž์‚ฐ ๊ด€๋ฆฌ

Ant Design์€ ๊ตฌ์„ฑ ์š”์†Œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์ง‘ํ•ฉ ์ผ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๊ทธ ๋’ค์—์žˆ๋Š” ๊ฐ•๋ ฅํ•œ ๋””์ž์ธ ์‹œ์Šคํ…œ์ด๊ธฐ๋„ํ•ฉ๋‹ˆ๋‹ค. 4.0์—์„œ๋Š” ์ตœ์‹  ๋””์ž์ธ ๊ด€๋ จ ์ž์‚ฐ (์Šค์ผ€์น˜ ๊ตฌ์„ฑ ์š”์†Œ ํŒจํ‚ค์ง€, ์ฃผ๋ฐฉ ๋„๊ตฌ ์„ธํŠธ, ๋””์ž์ธ ํ† ํฐ ๋“ฑ)์„ ์—…๋ฐ์ดํŠธํ•˜์—ฌ ๋””์ž์ธ์— ๊ด€์‹ฌ์ด์žˆ๋Š” ๋””์ž์ด๋„ˆ์™€ ํ•™์ƒ์„ ์ฐธ๊ณ ํ•  ์ˆ˜ ์žˆ๋„๋กํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ์กด ๊ตฌ์„ฑ ์š”์†Œ ๋””์ž์ธ ์Šคํƒ€์ผ๋„ ์‹œ๊ฐ์  ํšจ๊ณผ์™€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด ๋ฏธ์„ธ ์กฐ์ •๋ฉ๋‹ˆ๋‹ค.

์‹œ๊ฐ„ ๊ณ„ํš

๋‹ค์Œ์€ ์ผ๋ถ€ ๊ตฌ์„ฑ ์š”์†Œ ์—…๋ฐ์ดํŠธ๊ฐ€ ์ง„ํ–‰๋˜๋Š” ์ผ์ •์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” github์— ๊ด€๋ จ ๋ฌธ์ œ๋ฅผ ๋งŒ๋“ค ๊ฒƒ์ด๋ฉฐ ์ปค๋ฎค๋‹ˆํ‹ฐ ์ž์› ๋ด‰์‚ฌ์ž๋“ค๋„ ์ฐธ์—ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Q2

  • ํ•„์ˆ˜ ํ๊ธฐ ๋œ API๋ฅผ ํ๊ธฐ ๋จ์œผ๋กœ ํ‘œ์‹œํ•˜๊ณ  ๋ฌธ์„œ์—์„œ ์ง€์šฐ์‹ญ์‹œ์˜ค.
  • ๊ธฐ๋ณธ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ์˜ˆ์—ด๋ฉ๋‹ˆ๋‹ค.

Q3

  • antd 4.0 ๋ถ„๊ธฐ๋ฅผ ์„ค์ •ํ•˜๊ณ  ๋ฌธ์„œ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜์‹ญ์‹œ์˜ค.
  • ๋‚ฎ์€ ์ˆ˜์ค€์˜ ๊ตฌ์„ฑ ์š”์†Œ ๊ฐœ๋ฐœ.

4 ๋ถ„๊ธฐ

  • ๋ฆด๋ฆฌ์Šค 4.0 ๋ฒ„์ „.

์ฐธ์—ฌ๋ฅผ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค

4.0 ๊ฐœ๋ฐœ ๊ณผ์ •์—์„œ ์œ„์˜ ๋‚ด์šฉ์ด ์กฐ์ •๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ท€์ค‘ํ•œ ์•„์ด๋””์–ด์™€ ์ œ์•ˆ์„ ์ œ๊ณตํ•˜๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ ํ•™์ƒ๋“ค์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค. Ant Design 4.0์„ ํ•จ๊ป˜ ๋” ํŽธ๋ฆฌํ•˜๊ณ  ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

4.x โœจ Announcement ๐Ÿ•™ Plan ๐Ÿ—ฃ Discussion

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

15311

๋ฒ„์ „ 4์—์„œ Moment.js๋ฅผ ๋Œ€์ฒด ํ•  ์˜ˆ์ •์ž…๋‹ˆ๊นŒ?

๋ชจ๋“  182 ๋Œ“๊ธ€

15311

๋ฒ„์ „ 4์—์„œ Moment.js๋ฅผ ๋Œ€์ฒด ํ•  ์˜ˆ์ •์ž…๋‹ˆ๊นŒ?

ํ›Œ๋ฅญํ•ฉ๋‹ˆ๋‹ค. ์—…๊ทธ๋ ˆ์ด๋“œ๋ฅผ ๊ธฐ๋‹ค๋ฆด ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

V4 ์•ŒํŒŒ ์ค€๋น„

์ฃผ๋กœ ๋Œ€์ƒ

  • [x] v4 ๋ธŒ๋žœ์น˜
  • [x] ํ˜ธํ™˜ ๊ฐ€๋Šฅํ•œ ํŒจํ‚ค์ง€
  • [x] ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ์ฝ˜ํ…์ธ  ์ œ๊ฑฐ

    • [x] ์–ธ๊ธ‰ ๊ตฌ์„ฑ ์š”์†Œ

    • [x] ์ƒˆ๋กœ์šด ์–ธ๊ธ‰ ๊ตฌ์„ฑ ์š”์†Œ # 16532

    • [x] Form.create

    • [x] type # 12011 ์•„์ด์ฝ˜

    • [x] ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ๊ฒฝ๊ณ  ์†Œํ’ˆ์ด์žˆ๋Š” ๊ธฐํƒ€

  • [x] v3 ์ดํ•˜
  • [x] ์„ฑ๋Šฅ

    • [x] rc-animate ์—…๊ทธ๋ ˆ์ด๋“œ

    • [x] ๋™์‹œ ๋ชจ๋“œ ์ง€์›

    • [x] ๊ฐ€์ƒ ์Šคํฌ๋กค ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ง€์›

    • [x] ๊ฐ€์ƒ ์Šคํฌ๋กค

    • [x] rc ๊ตฌ์„ฑ ์š”์†Œ

    • [x] ๋‚˜๋ฌด

    • [x] ์„ ํƒ

    • [x] TreeSelect

    • [x] ์–‘์‹ : https://github.com/react-component/form/pull/292

    • [x] ํ›„ํฌ ๋ฒ„์ „ ์ œ๊ณต

    • [x] ํ…Œ์ด๋ธ”

    • [] templateAreas

    • [x] expand ๋ฐ scroll ๊ณต๋™ ์ž‘์—… ์ง€์›

  • [x] ์ƒˆ๋กœ์šด ๋””์ž์ธ์˜ DatePicker

    • [x] YearPicker

    • [x] RangePicker.YearPicker

    • [x] RangePicker.MonthPicker

    • [x] RangePicker.YearMonthPicker

    • [x] RangePicker.WeekPicker

    • [x] TimePicker.RangePicker

๊ณ„์† ๋Œ€์ƒ

  • [] ์ ‘๊ทผ์„ฑ
  • [x] API ํ‘œ์ค€
  • [] React.StrictMode

๋‹ค์Œ์€ Ant 4์— ๋Œ€ํ•œ ๋ช‡ ๊ฐ€์ง€ ์ œ์•ˆ์ž…๋‹ˆ๋‹ค.

์•ฝ templateAreas

templateArea ๋Š” ๋Ÿฐํƒ€์ž„์— ๋ฌธ์ž์—ด์„ ๊ตฌ๋ฌธ ๋ถ„์„ํ•ฉ๋‹ˆ๋‹ค. ๋ฌธ์ž์—ด ์˜คํƒ€๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์˜ˆ์™ธ์—†๋Š” ๊ตฌ๋ฌธ ๋ถ„์„ ์˜ค๋ฅ˜ ๋˜๋Š” ๋น„์ •์ƒ์ ์ธ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๋Ÿฐํƒ€์ž„ ๊ตฌ๋ฌธ ๋ถ„์„๋„ TypeScript์— ์ ํ•ฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Ant ํŒ€์ด ์•„๋ž˜ ์ œ์•ˆ์„ ๊ณ ๋ คํ• ๊นŒ์š”?

const columnTemplate = [
  ['name', 'address', 'adress'],
  ['name', 'building', 'no']
]

์˜์กด์„ฑ์— ๋Œ€ํ•ด

Ant Team์ด moment ์ข…์†์„ฑ ์ œ๊ฑฐ๋ฅผ ๊ณ ๋ คํ• ๊นŒ์š”?

์ˆœ๊ฐ„์ด ๋„ˆ๋ฌด ์ปค์„œ ํ”„๋ก ํŠธ ์—”๋“œ ํ”„๋กœ์ ํŠธ์— ๋น„ํ•ด ๋งŽ์€ ๋Œ€์•ˆ์ด ์žˆ์ง€๋งŒ TimePicker ๋ฐ DatePicker ์˜ props๋Š” Moment์—์„œ ์ค‘๊ณ„๋ฉ๋‹ˆ๋‹ค. moment ๋ฅผ date-fns ๋˜๋Š” Moment๋ณด๋‹ค ์ž‘์€ ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๋Œ€์ฒด ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์•„์ด์ฝ˜ ์ •๋ณด

Ant ์•„์ด์ฝ˜์ด ์ง€๊ธˆ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹์€ ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š์•„์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์•„์ด์ฝ˜์„ ๊ฐ€์ ธ ์˜ค๋Š” ์ƒˆ๋กœ์šด ๋ฐฉ์‹์€ ํ•˜๋‚˜์˜ ์•„์ด์ฝ˜์„ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ์ œ๊ฑฐ ํ•  ๋•Œ ์ผ๋ฐ˜์ ์ธ ๋ฒˆ๋“ค ์ฒญํฌ ๋ณ€๊ฒฝ์„ ์œ ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Ant Team์€ Ant ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜๋Š” ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. ๋ชจ๋“  ์•„์ด์ฝ˜์„ ํ•˜๋‚˜์˜ jsfile๋กœ ํŒจํ‚ค์ง•ํ•˜๋ฉด ๊ฐœ๋ฐœ์ž๋Š” <script> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ „์ฒด ํŒŒ์ผ์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์œผ๋ฉฐ ์›นํŒฉ์—์„œ externals ๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  2. ์œ„์— ์†Œ๊ฐœํ•˜๋Š” ์ƒˆ๋กœ์šด ๋ฐฉ๋ฒ•.

่ฟ™ ๆ˜ฏ ๆˆ‘ ๅฏน Ant4 ็š„ ไธ€ไบ› ๅปบ่ฎฎ

ๅ…ณไบŽtemplateAreas

templateAreasๅœจ่ฟ่กŒๆ—ถๅฏนๅญ—็ฌฆไธฒ่ฟ›่กŒ่งฃๆž,ๅฝ“ๅญ—็ฌฆไธฒๅ‡บ็Žฐๆ‹ผๅ†™้”™่ฏฏ็š„ๆ—ถๅ€™,ๅฏ่ƒฝไผšๅฏผ่‡ด่งฃๆžๅคฑ่ดฅๆˆ–่€…้™้ป˜้”™่ฏฏ่ฟ่กŒๆ—ถ่งฃๆžๅฏนํƒ€์ดํ”„ ๋ผ์ดํ„ฐไนŸไธๅ‹ๅฅฝ.Antๅ›ข้˜Ÿๆ˜ฏๅฆ่€ƒ่™‘ๅฆ‚ไธ‹ๆ–นๆกˆ. :

const columnTemplate = [
  ['name', 'address', 'adress'],
  ['name', 'building', 'no']
]

ๅ…ณไบŽ ไพ่ต–

ๆ˜ฏๅฆ ่€ƒ่™‘ ็งป้™ค ๅฏน ์ˆœ๊ฐ„ ็š„ ไพ่ต–๏ผŸ

Moment ์ด์ „์— ์กด์žฌํ•˜๋Š” ๋งŽ์€ ๊ธฐ๋Šฅ์˜ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค, TimePicker ์™€ DatePicker Moment ๅฏน่ฑก, ่ฟ™ ๆณ• ๅฏน่ฑก, ่ฟ™ ๆณ• ๅฏน่ฑกdate-fnsๆˆ–่€… ไธ€ไบ› ๆฏ” Moment ๆ›ด ๅฐ ็š„ ๅบ“ ๆฅ ๆ›ฟไปฃ Momentใ€‚

ๅ…ณไบŽ ๅ›พๆ ‡

ๆˆ‘่ฎคไธบๅฝ“ๅ‰ไฝฟ็”จ๊ฐœ๋ฏธๅ›พๆ ‡็š„ๆ–นๅผไธๅบ”่ฏฅ่ขซๅบŸๅผƒ.ๆ–ฐ็š„ไฝฟ็”จๆ–นๅผๅœจๆˆ‘ๆ–ฐๅขžๆˆ–่€…ๅˆ ้™คไธ€ไธชๅ›พๆ ‡ๅผ•็”จ็š„ๆ—ถๅ€™,ๅฏ่ƒฝไผšๅฏผ่‡ดๅ…ฌๅ…ฑ์ฒญํฌๅๅคๅ˜ๆ›ด.

Ant ๅ›ข้˜Ÿ ๅฏไปฅ ๆไพ› ๅฆ‚ไธ‹ ไธค็ง ๆ–นๆกˆ ๆฅ ไฝฟ็”จ Ant ๅ›พๆ ‡ ๏ผš

  1. js ๆ–‡ไปถ ไธญ, ๅผ€ๅ‘ ่€… ้€š่ฟ‡<script>ๆ ‡็ญพ ๅผ•็”จ ๅ…จ้ƒจ ๅ›พๆ ‡ ๏ผŒ ๅนถไธ” ๅœจ Webpack ไธญ ่ฎพ็ฝฎ ไธบexternals
  2. 4.0 ๆ–ฐ ไป‹็ป ็š„ ๅ›พๆ ‡ ไฝฟ็”จ ๆ–นๅผ

ํ…Œ์ด๋ธ” ๊ฐ€์ƒ ์Šคํฌ๋กค์„ ์ง€์›ํ•  ๊ณ„ํš์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๊ฒฝ์šฐ์— ๋”ฐ๋ผ ํŽ˜์ด์ง€ ๋งค๊น€๋ณด๋‹ค๋Š” ๋ฌดํ•œ ํ…Œ์ด๋ธ”์ด ์„ ํ˜ธ๋ฉ๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  3.11์— 'Comment'๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ ChatBox์™€ ChatMessage๊ฐ€ ์žˆ์„๊นŒ์š”?

ํ…Œ์ด๋ธ” ๊ฐ€์ƒ ์Šคํฌ๋กค์„ ์ง€์›ํ•  ๊ณ„ํš์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๊ฒฝ์šฐ์— ๋”ฐ๋ผ ํŽ˜์ด์ง€ ๋งค๊น€๋ณด๋‹ค๋Š” ๋ฌดํ•œ ํ…Œ์ด๋ธ”์ด ์„ ํ˜ธ๋ฉ๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  3.11์— 'Comment'๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ ChatBox์™€ ChatMessage๊ฐ€ ์žˆ์„๊นŒ์š”?

UserInfo ์šฐ์„  ์ˆœ์œ„ ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์•ฝ templateAreas

2 ์ฐจ์› ๋ฐฐ์—ด์˜ ๊ตฌ๋ฌธ๋„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.
2 ์ฐจ์› ๋ฐฐ์—ด์˜ ๊ตฌ๋ฌธ๋„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

templateAreas์™€ ๊ด€๋ จํ•˜์—ฌ ๋‹ค์Œ์€ ์ •์  ๊ฒ€์‚ฌ์˜ ์˜ˆ์ž…๋‹ˆ๋‹ค.
์ด๊ฒƒ์€ templateAreas์— ts๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์œ ํ˜• ์ •์  ๊ฒ€์‚ฌ์˜ ์˜ˆ์ž…๋‹ˆ๋‹ค.

interface Cell<T extends string = string> {
  key: T;
  title: string;
}

interface Config<K extends string = string> {
  header: {
    templateAreas: ReadonlyArray<ReadonlyArray<K>>;
    cells: ReadonlyArray<Cell<K>>
  };
}


declare function check<T extends string>(config: Config<T>): void;

const config = {
  header: {
    templateAreas: [
      ['name', 'address', 'address'],
      ['name', 'building', 'error'],
    ],
    cells: [
      { key: "name", title: "Name" },
      { key: "address", title: "Address" },
      { key: "building", title: "Building" },
      { key: "no", title: "No" }
    ]
  }
} as const;

check(config);

์šด๋™์žฅ

image

ํฐ

15311

๋ฒ„์ „ 4์—์„œ Moment.js๋ฅผ ๋Œ€์ฒด ํ•  ์˜ˆ์ •์ž…๋‹ˆ๊นŒ?

moment ์—์„œ ๋ฒ—์–ด๋‚˜๋Š” ์ฃผ์š” ๋ฌธ์ œ๋Š” locale s ์ฃผ๋ณ€์˜ ๋ณ€ํ™”๋ฅผ ๊นจ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. https://github.com/ant-design/ant-design/issues/15311#issuecomment -471383811

typescript์— ๋Œ€ํ•œ ์ง€์›์ด ๋” ๋‚˜์•„์งˆ ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

๋Œ€๋ฐ• 4.0์ด ์ง„ํ–‰ ์ค‘์ž…๋‹ˆ๋‹ค! ์•„๋ž˜์— ๊ณ ๋ คํ•  ๋ช‡ ๊ฐ€์ง€ ์ œ์•ˆ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋””์ž์ธ ํŒจํ„ด์— ๋งž๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ์‚ฌ์šฉ์ž ์ง€์ • ๊ฐ€๋Šฅ์„ฑ์— ๋Œ€ํ•ด์„œ๋Š” ์ œ ์ƒ๊ฐ์— ํ›Œ๋ฅญ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

  • <Table> ๋‚ด ํ–‰์˜ ๋ฐฐ๊ฒฝ์ƒ‰์„ ์ œ์–ด ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ํ•ด๋‹น ํ–‰์— ๋Œ€ํ•œ ๊ฒฝ๊ณ ๋ฅผ ๊ฐ•์กฐํ•˜๊ธฐ ์œ„ํ•ด ํ–‰์„ ์ฃผํ™ฉ์ƒ‰์œผ๋กœ ์ฑ„์ƒ‰ํ•ฉ๋‹ˆ๋‹ค.
  • ๋ฒ„ํŠผ ์ƒ‰์ƒ, ์ด๊ฒƒ์— ๋Œ€ํ•œ ์ด์ „ ํ† ๋ก ์„ ์ฐพ์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ฒ„ํŠผ์— ๋Œ€ํ•ด <Tag color="red">RED<Tag /> ์™€ ์œ ์‚ฌํ•œ API๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋‹ค๋ฉด ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค (์˜ˆ <Button color="red">Red Button<Button/> .
  • ๋‹ค๋ฅธ ๊ตฌ์„ฑ ์š”์†Œ ๋‚ด์—์„œ Font-Awesome 5.x ์•„์ด์ฝ˜์„ ์ง€์›ํ•˜๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ์•„์ด์ฝ˜ ์ž‘์—…์ด ์ง„ํ–‰ ์ค‘์ธ์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ <Icon> ๊ตฌ์„ฑ ์š”์†Œ ๋Œ€์‹  FA๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์ •๋ ฌ์— ๋ช‡ ๊ฐ€์ง€ ๋ฌธ์ œ๊ฐ€ ์žˆ์Œ์„ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค.
  • <Pagination> ๊ตฌ์„ฑ ์š”์†Œ๋Š” ํŽ˜์ด์ง€ ์–‘์„ ์ง์ ‘ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์„ ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ ์‚ฌ๋ก€๋Š” ์˜ˆ๋ฅผ ๋“ค์–ด ํŽ˜์ด์ง€ ์–‘๊ณผ ํ˜„์žฌ ํŽ˜์ด์ง€ ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ๊ฐ ํŽ˜์ด์ง€ ๋‚ด์—์„œ ๋ช‡ ๊ฐœ์˜ ํ•ญ๋ชฉ์„ ์‚ฌ์šฉํ•  ์ˆ˜๋Š” ์—†๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด๊ฒƒ์„ ์ฒ˜๋ฆฌํ•˜๋Š” ์ข‹์€ ๋ฐฉ๋ฒ•์„ ์•„์ง ์ฐพ์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค.

์˜ค๋ ˆ ์ฟ ์Šค

์˜ˆ๋ฅผ ๋“ค์–ด ํ•ด๋‹น ํ–‰์— ๋Œ€ํ•œ ๊ฒฝ๊ณ ๋ฅผ ๊ฐ•์กฐํ•˜๊ธฐ ์œ„ํ•ด ํ–‰์„ ์ฃผํ™ฉ์ƒ‰์œผ๋กœ ์ฑ„์ƒ‰

๋‚˜๋Š” rowClassName ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ์ด ํ–‰์— ํด๋ž˜์Šค๋ฅผ ์—ฐ๊ฒฐ ํ•œ ๋‹ค์Œ CSS๋กœ ๊ธฐ๋ณธ ์Šคํƒ€์ผ์„ ์žฌ์ •์˜ํ•˜๋Š” ๊ฒฝํ–ฅ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋งŒํผ๊ตฌ์„ฑ ์š”์†Œ๋Š” ํŽ˜์ด์ง€ ์–‘์„ ์ง์ ‘ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์„ ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊ฐ€์งœ ํ•ฉ๊ณ„๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด 50 ํŽ˜์ด์ง€๋ฅผ ์›ํ•˜๋Š” ๊ฒฝ์šฐ total = pageSize * 50 ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๊ฒƒ์€ ์ •๋ง ์ข‹์€ ์†Œ์‹์ž…๋‹ˆ๋‹ค ๐Ÿš€ ์„ฑ๋Šฅ์— ์ดˆ์ ์„ ๋งž์ถ”๋Š” ๊ฒƒ์ด ๋ˆˆ์— ๋„๊ณ  ์ข‹์€ ์†Œ์‹์ž…๋‹ˆ๋‹ค. ์ผ๋ถ€ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋งŽ์€ ์–‘์˜ ๋ฐ์ดํ„ฐ์— ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

๊ฐ€์ƒ ์Šคํฌ๋กค์„ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ? react-window ?

์ฃผ๋กœ ๋Œ€์ƒ ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ์šฐ์„  ์ˆœ์œ„๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?
์•ŒํŒŒ ๋‹จ๊ณ„์—์„œ ๊ฐ€์ƒ ์„ ํƒ์„ ์‹œ๋„ํ•˜๊ณ  ์‹ถ์€๋ฐ ์ด๊ฒƒ์— ๊ด€ํ•ด์„œ๋Š” ๋‚˜ ํ˜ผ์ž๊ฐ€ ์•„๋‹ˆ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๊ฐ์‚ฌ.

์š”์ฒญ์‹œ ๋ฌธ์ž์—ด ์ด๋ฆ„์„๋กœ๋“œ ํ•  ์ˆ˜์—†๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๋ฐ˜์‘์˜ lazy ()๊ฐ€ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜์ง€ ์•Š์Šต๋‹ˆ๊นŒ?

์•ˆ๋…•ํ•˜์„ธ์š”.
์˜ˆ,ํ•˜์ง€๋งŒ webpack ์˜ ํŠน์„ฑ, ํŠน์ • ์ž‘์—…์— ๋”ฐ๋ผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

๋‘ ๊ฐ€์ง€ ๋ฌธ์ œ๊ฐ€ ๋” ๋‘๋“œ๋Ÿฌ์ง‘๋‹ˆ๋‹ค

  • /* webpackChunkName: "icons/icon-" */ ๋ฅผ ์ž‘์„ฑํ•˜๋Š”์ด ๋ฐฉ๋ฒ•์€ webpack ์ œ๊ณต ํ•œ Magic Comments
  • ์›๋ณธ ํ…์ŠคํŠธ์—์„œ ๋งํ–ˆ๋“ฏ์ด "๊ฐ ์•„์ด์ฝ˜์—๋Š” ์•„์ด์ฝ˜ ๋‚ด์šฉ ์™ธ์— ์ถ”๊ฐ€ Webpack ๋ชจ๋“ˆ ์ •๋ณด๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค."

๊ธ€๋กœ๋ฒŒ ์Šคํƒ€์ผ ์˜ค์—ผ์— ๋Œ€ํ•œ ์•„์ด๋””์–ด๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? # 4331 # 9363

๊ธ€๋กœ๋ฒŒ ์Šคํƒ€์ผ ์˜ค์—ผ์— ๋Œ€ํ•œ ์•„์ด๋””์–ด๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? # 4331 # 9363

IMHO 4.0์—์„œ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์ „์—ญ ์ด๋ฆ„์œผ๋กœ antdesign ์Šคํƒ€์ผ์˜ ๋ฒ”์œ„๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋„๋กํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค (๋‚ด ์˜๊ฒฌ https://github.com/ant-design/ant-design/issues/4331#issuecomment-396047487 ์ฐธ์กฐ).

๋‹ค์Œ ๋งˆ์ผ์Šคํ†ค์— ๋Œ€ํ•ด ๋“ฃ๊ฒŒ๋˜์–ด ๊ธฐ์ฉ๋‹ˆ๋‹ค!

๋‚ด 2 Ct. ๋ฌธ์„œ ๋ฐ ๊ฐ„์†Œํ™” ๊ด€๋ จ :

๋ฌธ์„œํ™”๋˜์ง€ ์•Š์€ ๊ธฐ๋ณธ DOM ์š”์†Œ๋กœ ์ „๋‹ฌ๋˜๋Š” ์†Œํ’ˆ์ด์žˆ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค (IIRC ๊ฒฝ์šฐ์— ๋”ฐ๋ผ ๊ตฌ์„ฑ ์š”์†Œ ๊ตฌํ˜„์—์„œ ์„ ํƒํ•˜์ง€ ์•Š์€ ๋ชจ๋“  ์†Œํ’ˆ์ด ํ†ต๊ณผ ๋จ). ๋Œ€์ƒ ์š”์†Œ๋ณ„๋กœ ๊ทธ๋ฃนํ™”ํ•˜์—ฌ ๋ฌธ์„œํ™”ํ•˜๋ฉด ๋งค์šฐ ๋„์›€์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค (ํ•˜๋‚˜ ์ด์ƒ์žˆ์„ ์ˆ˜ ์žˆ์Œ) : "๋‹ค์Œ ์†Œํ’ˆ์€ ์ปจํ…Œ์ด๋„ˆ๋กœ ์ „๋‹ฌ๋ฉ๋‹ˆ๋‹ค.

"๋˜๋Š”"๋‹ค์Œ ์†Œํ’ˆ์€ element ... "๋˜๋Š”"๋‹ค๋ฅธ ๋ชจ๋“  props๋Š” ...๋กœ ์ „๋‹ฌ๋ฉ๋‹ˆ๋‹ค. "์ด๋Ÿฌํ•œ props์— ๋Œ€ํ•œ ์ž์„ธํ•œ ์„ค๋ช…์ด ํ•„์š”ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ MDN ๋งํฌ๋กœ ์ถฉ๋ถ„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ๋ณ€๊ฒฝ์€ TypeScript ๊ฐœ๋ฐœ์ž์—๊ฒŒ๋„ ํฐ ๋„์›€์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ˜„์žฌ ์ด์™€ ๊ด€๋ จํ•˜์—ฌ TS ์ •์˜๋ฅผ ์ตœ์‹  ์ƒํƒœ๋กœ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์€ ์ง€๋ฃจํ•œ ์ž‘์—…์ž…๋‹ˆ๋‹ค.

"๊ฐœ๋ฐœ์ž API ํ‘œ์ค€"์—์„œ ์ด๊ฒƒ์€ ๋ฌธ์„œํ™”๋˜์–ด์•ผํ•˜๋ฉฐ ํ•ญ์ƒ ์ „๋‹ฌ๋˜์–ด์•ผํ•˜๋Š” props (className, id,?)๋ฅผ ๊ฒฐ์ •ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ์งˆ๋ฌธ:

TypeScript ์ •์˜๊ฐ€์žˆ๋Š” JavaScript์—์„œ ๋„ค์ดํ‹ฐ๋ธŒ TypeScript๋กœ ๋” ๋งŽ์€ ํŒŒ์ผ (๋˜๋Š” ์‹ฌ์ง€์–ด rc ๊ตฌ์„ฑ ์š”์†Œ)์„ ์ „ํ™˜ ํ•  ๊ณ„ํš์ž…๋‹ˆ๊นŒ?

rc-form์„ Formik๊ณผ ๊ฐ™์€ ๋” ์œ ์—ฐํ•œ ๊ฒƒ์œผ๋กœ ๋ฐ”๊พธ๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•˜์‹ญ์‹œ์˜ค.

๊ด€๋ฆฌ์ž๋ฅผ์œ„ํ•œ ์งˆ๋ฌธ :

์šฐ๋ฆฌ ํŒ€์€ Ant๋ฅผ ์‚ฌ์šฉํ•ด๋ณด๊ณ  ์‹ถ์ง€๋งŒ https://github.com/ant-design/ant-design/issues/11097(Antd Less๊ฐ€ ์ „์—ญ JavaScript ๋ˆ„์ถœ์„ ์ƒ์„ฑ ํ•จ)์ด ์šฐ๋ฆฌ๋ฅผ ์ฐจ๋‹จํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์œ„์˜ ๋กœ๋“œ๋งต์€ Ant๊ฐ€ LESS ๋ฒ„์ „ 3์œผ๋กœ ์ด๋™ํ•  ๊ฒƒ์ด๋ผ๊ณ  ๋งํ•˜๋ฉฐ, ๋ฌธ์ œ์˜ ์•ˆ์ „ํ•˜์ง€ ์•Š๊ณ  ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ์ธ๋ผ์ธ JavaScript ๊ธฐ๋Šฅ์ด ๊ธฐ๋ณธ์ ์œผ๋กœ ๋น„ํ™œ์„ฑํ™”๋˜์–ด ์žˆ์Œ์„ ์ฝ์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ Ant ๋ฒ„์ „ 4๊ฐ€ ๋” ์ด์ƒ ๋ฌธ์ œ๊ฐ€ ์ ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๊นŒ?

IE9 / 10๋ฟ๋งŒ ์•„๋‹ˆ๋ผ IE ์ง€์› ์ค‘๋‹จ,

์˜ค ์ด๋Ÿฐ, ์ „์—ญ ์Šคํƒ€์ผ์„ ์˜ค์—ผ์‹œํ‚ค์ง€ ์•Š๋Š” ๊ฒƒ์ด ๋งค์šฐ ์œ ์šฉ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค ( html , body , *::before , ...)

react-slick ๊ธฐ๋ฐ˜์˜ Carousel์€ ์‚ฌ์šฉ์‹œ ๋งŽ์€ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฏ€๋กœ ์ƒˆ ๋ฒ„์ „์€ ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๊ต์ฒด ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
react-pannable ์€ ์‚ฌ์šฉํ•˜๊ธฐ์— ๊ฝค ์ข‹์Šต๋‹ˆ๋‹ค.

@cztflove ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์ปค๋ฐ‹์— ๋Œ€ํ•œ ์„ค๋ช…์€ ๋ชจ๋‘ no message ๐Ÿ˜ƒ์ด๊ณ  ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ๊ด€์‹ฌ์ด ๋„ˆ๋ฌด ๋‚ฎ์œผ๋ฏ€๋กœ ๊ณ ๋ คํ•ด์„œ๋Š” ์•ˆ๋ฉ๋‹ˆ๋‹ค.

@ yoyo837 ์ฃผ๋กœ์ด ๊ตฌ์„ฑ ์š”์†Œ๋Š” virtual list ๋ฐ ไปฟios่พน็ผ˜ๅผนๆ€ง ํ•˜๋ฏ€๋กœ์ด ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ผ๋ถ€ ๆ‹–ๆ‹ฝ ๊ธฐ๋Šฅ๋„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค ๐Ÿค” ํ–ฅํ›„ ํ™•์žฅ์˜ ์—ฌ์ง€๊ฐ€ ๋” ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•˜๋‚˜์˜ ๋ฒ”์šฉ ์–ธ์–ด๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•ด์•ผํ•˜์ง€ ์•Š์Šต๋‹ˆ๊นŒ?

๋‚˜๋Š” ์˜์–ด ์›์–ด๋ฏผ์ด ์•„๋‹ˆ๋”๋ผ๋„ ์ง€์—ญ ์–ธ์–ด์— ์ „์ ์œผ๋กœ ๋™์˜ํ•˜๊ณ  ์กด์ค‘ํ•ฉ๋‹ˆ๋‹ค. ์ด์ค‘ ์–ธ์–ด๋กœ ์ค‘๋ณต ์ž‘์—…์„ ๋งํ•˜๋Š” ๊ฒƒ์ด 100 ๊ฐœ๋‚˜ ๋” ์ข‹์œผ๋ฉฐ, ๋ฌด์—‡๋ณด๋‹ค๋„ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ์š”์†Œ๋Š” ์‹œ๊ฐ„, ๋…ผ์˜ ๋œ ๋ฌธ์ž์—ด ๋ฒˆ์—ญ, ๋ฌธ์„œํ™” ๋˜๋Š” ํŠœํŠธ์—์„œ ๋ฐฐ์šฐ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ฐ๋ชจ ๋“ฑ

์ธ์ •ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์–ธ์–ด ๊ฐˆ๋“ฑ์œผ๋กœ ์ธํ•ด ๊ธฐ์—ฌ์ž๊ฐ€ ๋ถ€์กฑํ•œ ๊ฒƒ์€ ์•„๋‹ˆ๋ฉฐ ์—ฌ์ „ํžˆ ์ˆ˜๋ฐฑ ๋ช…์˜ ์šฐ๋ฆฌ๊ฐ€ ์ฐธ์—ฌํ•˜๊ธฐ๋ฅผ ๋‘๋ ค์›Œํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฏธ ๋งŽ์€ ์Šคํ”„๋ฆฐํŠธ, ๋ฒˆ์—ญ ๋ฌธ์ œ๊ฐ€ ์ง„ํ–‰ ์ค‘์ด์ง€๋งŒ, ์ œ๊ฐ€ ์š”์ฒญํ•˜๋Š” ๊ฒƒ์€์ด ์ฃผ์š” ๋ฆด๋ฆฌ์Šค ๋ฅผ ํ†ตํ•ด ํ•˜๋‚˜์˜ ๋ฒ”์šฉ ์–ธ์–ด๋กœ ์™„์ „ํžˆ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜์—ฌ ์šฐ๋ฆฌ ๋ชจ๋‘์˜ ์ค„์ด๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

ํ•˜๋‚˜์˜ ๋ฒ”์šฉ ์–ธ์–ด๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•ด์•ผํ•˜์ง€ ์•Š์Šต๋‹ˆ๊นŒ?

๋‚˜๋Š” ์˜์–ด ์›์–ด๋ฏผ์ด ์•„๋‹ˆ๋”๋ผ๋„ ์ง€์—ญ ์–ธ์–ด์— ์ „์ ์œผ๋กœ ๋™์˜ํ•˜๊ณ  ์กด์ค‘ํ•ฉ๋‹ˆ๋‹ค. ์ด์ค‘ ์–ธ์–ด๋กœ ์ค‘๋ณต ์ž‘์—…์„ ๋งํ•˜๋Š” ๊ฒƒ์ด 100 ๊ฐœ๋‚˜ ๋” ์ข‹์œผ๋ฉฐ, ๋ฌด์—‡๋ณด๋‹ค๋„ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ์š”์†Œ๋Š” ์‹œ๊ฐ„, ๋…ผ์˜ ๋œ ๋ฌธ์ž์—ด ๋ฒˆ์—ญ, ๋ฌธ์„œํ™” ๋˜๋Š” ํŠœํŠธ์—์„œ ๋ฐฐ์šฐ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ฐ๋ชจ ๋“ฑ

์ธ์ •ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์–ธ์–ด ๊ฐˆ๋“ฑ์œผ๋กœ ์ธํ•ด ๊ธฐ์—ฌ์ž๊ฐ€ ๋ถ€์กฑํ•œ ๊ฒƒ์€ ์•„๋‹ˆ๋ฉฐ ์—ฌ์ „ํžˆ ์ˆ˜๋ฐฑ ๋ช…์˜ ์šฐ๋ฆฌ๊ฐ€ ์ฐธ์—ฌํ•˜๊ธฐ๋ฅผ ๋‘๋ ค์›Œํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฏธ ๋งŽ์€ ์Šคํ”„๋ฆฐํŠธ์™€ ๋ฒˆ์—ญ ๋ฌธ์ œ๊ฐ€ ์ง„ํ–‰ ์ค‘์ด์ง€๋งŒ, ์ œ๊ฐ€ ์š”์ฒญํ•˜๋Š” ๊ฒƒ์€ ์ด๋ฒˆ ์ฃผ์š” ๋ฆด๋ฆฌ์Šค ๋ฅผ ํ†ตํ•ด ํ•˜๋‚˜์˜ ๋ฒ”์šฉ ์–ธ์–ด๋กœ ์™„์ „ํžˆ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜์—ฌ ์šฐ๋ฆฌ ๋ชจ๋‘์˜ _ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ๊ฒฉ์ฐจ๋ฅผ ์ค„์ด๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

่ฏดๅพ— ๅฏน ๏ผŒ ไธ“ๅฟƒ ่ฏด ไธญๆ–‡ ๅง

๊ด€๋ฆฌ์ž๋ฅผ์œ„ํ•œ ์งˆ๋ฌธ : ๋น„ํ–‰ ์ค‘์— ์ƒ‰์ƒ ๋ฐ ์Šคํƒ€์ผ ํ…Œ๋งˆ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ธฐ ์œ„ํ•ด CSS ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ๊ณ„ํš์ด ์žˆ์Šต๋‹ˆ๊นŒ?

์‹ค์ œ๋กœ๋Š” ๋ณ€์ˆ˜๋ฅผ ํ†ตํ•ด ๊ตฌ์„ฑ ์š”์†Œ ์Šคํƒ€์ผ์„ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์ด ๋งค์šฐ ํŽธ์•ˆํ•œ ๋ฐฉ๋ฒ•์ด๋ผ๋Š” ๊ฒƒ์„ ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค. var(--css-vars) Less ๋ณ€์ˆ˜๋ฅผ ๋‹ค์‹œ ์ž‘์„ฑํ•˜๋ ค๊ณ ํ–ˆ์ง€๋งŒ ์Šคํƒ€์ผ ์ปดํŒŒ์ผ์—์„œ ๋งŽ์€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ๋งŽ์€ ์Šคํƒ€์ผ์ด ๊ฐ’๋ฟ๋งŒ ์•„๋‹ˆ๋ผ vars์™€ ํ•จ๊ป˜ ํ•จ์ˆ˜์™€ ์—ฐ์‚ฐ์„ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๊ฒƒ์ด ํฐ ์ž‘์—…์ด๊ณ  ์ด๋Ÿฐ ์‹์œผ๋กœ ์ฃผ์š” ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ์ƒ์„ฑํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜์ง€๋งŒ ์ฃผ์š” ๋ฒ„์ „์€ ์ฃผ์š” ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ์ƒ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค. :) ์‚ฌ์šฉ CSS vars๋Š” ๊ตฌ์„ฑ ์š”์†Œ ์Šคํƒ€์ผ์„ ์‚ฌ์šฉ์ž ์ •์˜ ํ•  ์ˆ˜์žˆ๋Š” ๋งŽ์€ ๊ธฐํšŒ๋ฅผ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๊ฒƒ์— ๋Œ€ํ•ด ์–ด๋–ป๊ฒŒ ์ƒ๊ฐํ•˜์„ธ์š”? ์–ด์จŒ๋“  ํ’€ ์š”์ฒญ์œผ๋กœ CSS vars ์‚ฌ์šฉ์œผ๋กœ ํ…Œ๋งˆ๋ฅผ ๊ฐœ๋ฐœํ•  ๊ณ„ํš ์ด์—ˆ๊ธฐ ๋•Œ๋ฌธ์—์ด ๊ธฐ๋Šฅ (์‹คํ–‰ ์ค‘ ํ…Œ๋งˆ ๋ณ€๊ฒฝ)์ด ๋‚ด ํ”„๋กœ์ ํŠธ์— ํ•„์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

ํ•ด๋‹น ์ œ์•ˆ์ด ์ค‘๋ณต ๋œ ๊ฒฝ์šฐ ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค.ํ•˜์ง€๋งŒ ๋‹ค๋ฅธ ๋ฌธ์ œ์™€ PR์—์„œ ํ•ด๋‹น ๋‚ด์šฉ์„ ์ฐพ์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค.

@ Z3SA https://caniuse.com/#search = CSS % 20Variables. ์ด๊ฒƒ์€ ๋ชจ๋“  IE ์ง€์›์„ ์ค‘์ง€ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. IE11 ์ง€์›์„ ์ค‘์ง€ํ•˜๋Š” ๊ฒƒ์€ ๋„ˆ๋ฌด ๊ธ‰์ง„์ ์ด์ง€๋งŒ ์ €๋„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

@ yoyo837 , IE ์ง€์› ๋ฌธ์ œ์˜ ๋„ˆ๋ฌด ๊ธ‰์ง„์  ์ธ ์›์ธ์ด๋ผ๋Š” ๋ฐ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ Ant Design์€ Electron (์›น์ด ์•„๋‹Œ ๋ณ„๋„์˜ ํ”Œ๋žซํผ)์„ ๊ณต์‹์ ์œผ๋กœ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค (ant.design์—์„œ ์–ธ๊ธ‰ ๋จ). ์ด ๊ฒฝ์šฐ ๋‘ ๊ฐœ์˜ ํ…Œ๋งˆ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์ด์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜๋‚˜๋Š” Less vars์ด๊ณ  ๋‹ค๋ฅธ ํ•˜๋‚˜๋Š” CSS vars์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ง€์›ํ•˜๊ธฐ๊ฐ€ ๋„ˆ๋ฌด ์–ด๋ ค์›Œ ๋ณด์ž…๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ๋‚ด๊ฐ€ ์ƒ๊ฐํ•˜๋Š” ๋‹ค๋ฅธ ๊ฐ€๋Šฅํ•œ ์ „๋žต์€ Less์˜ ๋ชจ๋“  ์‚ฌ์šฉ์ž ์ •์˜ ๊ฐ€๋Šฅํ•œ ์†์„ฑ์— ๋Œ€ํ•ด Less ๋ณ€์ˆ˜๋ฅผ ์ƒ์„ฑํ•˜๊ฑฐ๋‚˜ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ž์‹ ์˜ CSS ๋ณ€์ˆ˜์— ๋Œ€ํ•œ ํ•ญ๋ชฉ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” Less ๋ณ€์ˆ˜ ์•„๋ž˜์˜ ํ•จ์ˆ˜ ๋ฐ ์ž‘์—… ์‚ฌ์šฉ์„ ์ œ๊ฑฐํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋˜๋Š” ๋” ๊ฐ„๋‹จํ•˜๋‹ค๊ณ  ๋งํ•˜๋ฉด Less vars๋ฅผ ํ•จ์ˆ˜ ๋ฐ ์ž‘์—…์ด ์•„๋‹Œ ๊ฐ’ ์ปจํ…Œ์ด๋„ˆ๋กœ๋งŒ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค.

๋ฉ”์ด์ € ๋ธŒ๋ผ์šฐ์ € ๋งŒ ์ง€์›ํ•œ๋‹ค๋ฉด ์ฝ”๋“œ์˜ ํฌ๊ธฐ๊ฐ€ ์ž‘์•„์ง€๊ณ  ์œ ์ง€ ๊ด€๋ฆฌ๋„ ๋” ์‰ฌ์›Œ ์งˆ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

IE9 / 10๋ฟ๋งŒ ์•„๋‹ˆ๋ผ IE ์ง€์› ์ค‘๋‹จ,

@wanliyunyan ๋„ˆ๋ฌด antd @ 3๋ฅผ ๊ณ ์ˆ˜ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ด๋Š” ์šฐ๋ฆฌ์—๊ฒŒ ์ข‹์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

@ Z3SA ์—„์ฒญ๋‚œ ์ž‘์—…์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@dancerphil ๋‹คํ–‰ํžˆ๋„ ๋‚ด ํ”„๋กœ์ ํŠธ์—๋Š” ์ตœ์‹  ๋ฒ„์ „์˜ ํฌ๋กฌ ๋งŒ ๊ณ ๋ คํ•ฉ๋‹ˆ๋‹ค. ๐Ÿ˜ƒ ํฌ๊ธฐ๊ฐ€ ์ž‘์„์ˆ˜๋ก ์ข‹์Šต๋‹ˆ๋‹ค.

@ yoyo837 ์•Œ์•„์š”. ๊ทธ๋ฆฌ๊ณ ์ด ์•„์ด๋””์–ด๊ฐ€ ์ถฉ๋ถ„ํ•œ ๊ด€์‹ฌ์„๋ฐ›์ง€ ๋ชปํ•˜๋ฉด ๋‚ด๊ฐ€ ์ง์ ‘ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ๊ฐœ๋ณ„ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ ์ง„์ ์œผ๋กœ antd๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๋Š” ๊ฒƒ์„ ์ข‹์•„ํ•˜๋Š” ํšŒ์‚ฌ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ant๊ฐ€ Global ์Šคํƒ€์ผ์„ ์‚ฌ์šฉํ•˜๋ฉด์ด ๋ฌธ์ œ๊ฐ€ ์‹ค์ œ๋กœ ๋ณต์žกํ•ด์ง‘๋‹ˆ๋‹ค. ๊ธ€๋กœ๋ฒŒ ์Šคํƒ€์ผ์„ ์˜ค์—ผ์‹œํ‚ค์ง€ ๋งˆ์‹ญ์‹œ์˜ค.

์–‘์‹์€ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ๊ตฌ์„ฑ ์š”์†Œ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์†Œ์…œ์ด API ๋””์ž์ธ์— ๋Œ€ํ•ด ๋งŽ์€ ์˜๊ฒฌ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ์„ ์•Œ์•˜์Šต๋‹ˆ๋‹ค. 4.0์—์„œ API๋ฅผ ๋‹จ์ˆœํ™”ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

Fom.Item์—๋Š” ํ•„๋“œ ๋ฐ”์ธ๋”ฉ์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ๋ณ€๊ฒฝ์œผ๋กœ ์ธํ•ด Form.Item์„ ์—„๊ฒฉํ•œ ํ‘œํ˜„ ๊ตฌ์„ฑ ์š”์†Œ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋‚˜๋Š” antd์˜ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ข‹์•„ํ•˜์ง€๋งŒ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•ด react-final-form์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค. Form.Item์˜ ์Šคํƒ€์ผ์„ ์›ํ•˜๊ณ  ์ƒํƒœ ๊ด€๋ฆฌ ๋…ผ๋ฆฌ๋Š” ์—†์Šต๋‹ˆ๋‹ค.

4.0 ๋ธŒ๋žœ์น˜๊ฐ€ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. ์–ธ์ œ ๋ฏธ๋ฆฌ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ

์ƒˆ๋กœ์šด ์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๊ต‰์žฅํ•ฉ๋‹ˆ๋‹ค!

momentjs๊ฐ€ ํฌ๊ณ  ๋ฒˆ๋“ค ํฌ๊ธฐ๋„ ์ปค ์กŒ์œผ๋ฏ€๋กœ momentjs๋ฅผ dayjs๋กœ ๊ต์ฒดํ•˜์‹ญ์‹œ์˜ค.

์„œ์‹์žˆ๋Š” ํ…์ŠคํŠธ ํŽธ์ง‘๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•  ๋•Œ ํ•จ์ •์ด ์žˆ์Šต๋‹ˆ๊นŒ?

์ถœ์‹œ์ผ์€ ์–ธ์ œ์ธ๊ฐ€์š”?

@rafaelodassi ์•„์ง ํ™•์ • ๋œ ๋‚ ์งœ๋Š” ์—†์ง€๋งŒ ์•„๋งˆ๋„ 4 ๋ถ„๊ธฐ์—์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@babel/runtime@7 ๋ฐ core-js@3 ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๋Š” ๊ฒƒ๋„ ์šฐ๋ฆฌ์˜ ์ตœ์šฐ์„  ๊ณผ์ œ์ž…๋‹ˆ๋‹ค.

v3๊ฐ€ ์•„๋‹™๋‹ˆ๊นŒ? core-js@4 ๋Œ€ํ•œ ๋‰ด์Šค๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

ํ†ต๊ณ„์— ๊ฑฐ์˜ ์‚ฌ์šฉ๋˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ชจ๋‘๊ฐ€ IE ์ง€์›์„ ์ œ๊ฑฐํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•ฉ๋‹ˆ๋‹ค. ํ†ต๊ณ„์— ์ „ํ˜€ ๋“ค์–ด ๊ฐ€์ง€ ์•Š๋Š” ์ธํŠธ๋ผ๋„ท ๋’ค์—์žˆ๋Š” ์ˆ˜๋ฐฑ๋งŒ ๋ช…์˜ ๊ธฐ์—… ์‚ฌ์šฉ์ž๋Š” ์–ด๋–ป์Šต๋‹ˆ๊นŒ? ๊ทธ๋“ค์€ ๊ธฐ์—… ์ •์ฑ… ๋•Œ๋ฌธ์— IE10๊ณผ IE11์„ ๊ณ ์ˆ˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

IE11 ์ง€์›์ด ์ค‘๋‹จ๋˜๋ฉด antd @ 3 ์„ ๊ณ ์ˆ˜ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. IE10 ์‚ญ์ œ๋Š” MS์—์„œ ๋” ์ด์ƒ ์ง€์›ํ•˜์ง€ ์•Š๊ณ  ๊ธฐ์—… PC๊ฐ€ IE11๋กœ ์—…๋ฐ์ดํŠธ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋Œ€๋ถ€๋ถ„์˜ ํด๋ผ์ด์–ธํŠธ์—์„œ ํ—ˆ์šฉ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<Select/> ๊ฐ’์œผ๋กœ ๊ฐœ์ฒด ์‚ฌ์šฉ์„ ํ—ˆ์šฉํ•˜๋Š” API๋ฅผ ๋„์ž…ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.
์ž์„ธํ•œ ๋‚ด์šฉ์€ https://github.com/ant-design/ant-design/issues/13485 ๋ฅผ ์ฐธ์กฐ

cc @zombieJ

๊ฐ ๊ตฌ์„ฑ ์š”์†Œ์— ์ž์ฒด ์—…๋ฐ์ดํŠธ ๋กœ๊ทธ๊ฐ€์žˆ๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ์ˆจ๊ฒจ๋„ ์ƒ๊ด€ ์—†์Šต๋‹ˆ๋‹ค. ๊ฐœ์ธ์ ์ธ ์ œ์•ˆ ~

๋ฆด๋ฆฌ์Šค ๋˜๋Š” RC๋Š” ์–ธ์ œ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๊นŒ?

๊ฐ ๊ตฌ์„ฑ ์š”์†Œ์— ์ž์ฒด ์—…๋ฐ์ดํŠธ ๋กœ๊ทธ๊ฐ€์žˆ๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ์ˆจ๊ฒจ๋„ ์ƒ๊ด€ ์—†์Šต๋‹ˆ๋‹ค. ๊ฐœ์ธ์ ์ธ ์ œ์•ˆ ~

๊ฐ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๋ฌธ์„œ๋ฅผ ์–ด๋–ค ๋ฒ„์ „์œผ๋กœ ์ถ”๊ฐ€ ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ๋ฌธ์„œ๋ฅผ๋ณด๊ณ  ํ˜„์žฌ ๋ฒ„์ „์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”์ง€, ์ข…์†์„ฑ์„ ์—…๋ฐ์ดํŠธํ• ์ง€ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

GitHawk๋กœ ์ „์†ก

ํŠธ์œ— ๋‹ด์•„ ๊ฐ€๊ธฐ
์˜์–ด pls์—)

์˜์–ด ์ฑ„๋„๋กœ ์œ ์ง€ ํ•ด์ฃผ์„ธ์š” ~

4.0 ์•ŒํŒŒ๊ฐ€ ๊ฒŒ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ๋†€๋ผ์šด. ์–ด์„œ ์˜ค๋น .

๋ฒ ํƒ€ ๋ฒ„์ „์„ ๊ฒŒ์‹œํ•˜๋ฉด ๋‚ด ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฆฌํŒฉํ„ฐ๋งํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

antd ์˜ ๊ธฐ๋ณธ ํ…Œ๋งˆ๋Š” ์•„๋ฆ„๋‹ต์ง€๋งŒ ๋” ์ข‹์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
๊ฐ€๋…์„ฑ์„ ์œ„ํ•ด ํ–ฅ์ƒ๋œ ๋Œ€๋น„๋ฅผ ๊ณ ๋ คํ•˜๊ณ  ๋” ํฐ ํ…์ŠคํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค.

๊ธฐ์‚ฌ์™€ ๋„๊ตฌ๊ฐ€ ๋„ˆ๋ฌด ๋งŽ์Šต๋‹ˆ๋‹ค.
https://www.google.com/search?q=web+readability

antd v3์„ v4๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๋Š” ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

biz ํ”„๋กœ์ ํŠธ์— ๋„ˆ๋ฌด ๋งŽ์€ ์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. antd v3๋ฅผ v4๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๋Š” ๋ฐ ๋น„์šฉ์ด ๋„ˆ๋ฌด ๋งŽ์ด ๋“ญ๋‹ˆ๋‹ค.

react-relay ํŒ€๋„ ๋น„์Šทํ•œ ์ผ์„ํ–ˆ์Šต๋‹ˆ๋‹ค.
react-relay v3๋ฅผ react-relay v4 Realease ๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๋ ค๋ฉด ๋งŽ์€ ํŒŒ์ผ์„ ์ˆ˜์ •ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.
๋”ฐ๋ผ์„œ jscodeshift ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋ฏ€๋กœ react-relay ์˜ ์‚ฌ์šฉ์ž๊ฐ€ react-relay v3์„ v4๋กœ ์‰ฝ๊ฒŒ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ผ๋ถ€ ์Šคํƒ€์ผ์„ ๊ณผ์žฅํ•˜๋Š” ๊ฒƒ์ด ์–ด๋ ต๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ทธ๊ฒƒ์„ ๊ฐœ์„  ํ•  ๊ณ„ํš์ด ์žˆ๋‹ค๋ฉด?

๊ฐœ์ธ์ ์œผ๋กœ CSS-in-JS ์‚ฌ์šฉ์„ ์„ ํ˜ธํ•˜๋ฉฐ ๋งค์šฐ ์œ ์—ฐํ•˜๊ณ  React์™€ ๋งค์šฐ ์ž˜ ์–ด์šธ๋ฆฝ๋‹ˆ๋‹ค.

4.0 alpha์—์„œ ํด๋ž˜์Šค ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ์–‘์‹ ์—”ํ‹ฐํ‹ฐ๋ฅผ ์–ป์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. https://5d403395cd145c0008eea971--ant-design.netlify.com/components/form/v3-cn ์ด ๋งํฌ ์•„๋ž˜์˜ ์ƒ˜ํ”Œ ์ฝ”๋“œ๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. formRef ๋ฉ”์†Œ๋“œ์— ์—”ํ‹ฐํ‹ฐ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

ํ•ด๊ฒฐ

@ Kwei9 , ๋ฌธ์ œ๋ฅผ ์—ด๊ณ  ์ฒจ๋ถ€ํ•˜์—ฌ ์žฌํ˜„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?ํ•œ ๋ฒˆ ๋ณผ๊ฒŒ์š”

@ Kwei9 , ๋ฌธ์ œ๋ฅผ ์—ด๊ณ  ์ฒจ๋ถ€ํ•˜์—ฌ ์žฌํ˜„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?ํ•œ ๋ฒˆ ๋ณผ๊ฒŒ์š”

์ฐธ์กฐ ์ž‘์„ฑ์ด์ด ์†”๋ฃจ์…˜์œผ๋กœ ๋ณ€๊ฒฝ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ง€๊ธˆ์ด ๊ธ€๋กœ๋ฒŒ ์Šคํƒ€์ผ ์˜ค์—ผ์„ ํ•ด๊ฒฐํ•  ๋•Œ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค! ๋”ฐ๋ผ์„œ ๋‹ค๋ฅธ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ๊ณผ ํ•จ๊ป˜ antd๋ฅผ ์‚ฌ์šฉํ•ด์•ผํ–ˆ์Šต๋‹ˆ๋‹ค!

Moment๋Š” ํ”„๋ŸฐํŠธ ์—”๋“œ ํ”„๋กœ์ ํŠธ์— ๋„ˆ๋ฌด ์ปค์„œ ๋งŽ์€ ๋Œ€์•ˆ์ด ์žˆ์ง€๋งŒ TimePicker์™€ DatePicker์˜ props๋Š” Moment๋ฅผ ์ค‘๊ณ„ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ์šฐ๋ฆฌ๊ฐ€ ์ˆœ๊ฐ„์„ ๋Œ€์ฒด ํ•  ์ˆ˜ ์—†๋„๋ก ์ธ๋„ํ•ฉ๋‹ˆ๋‹ค.

@ jas0ncn ์•ˆ๋…•ํ•˜์„ธ์š”, momentjs๋ฅผ dayjs (2kb ๋Œ€์•ˆ)๋กœ ๊ต์ฒดํ•ด๋ณด์„ธ์š”. ์ด๋“ค์€ ์ด๋ฏธ Ant Design (Antd)์˜ Replace Moment.js์—์„œ Day.js https://github.com/iamkun/dayjs/issues/529 ์˜ ํ…Œ์ŠคํŠธ ๋œ ๋ฌธ์ œ์ด๋ฉฐ ์ •๋ง ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

dayjs์˜ ํ•ต์‹ฌ ๊ด€๋ฆฌ์ž๋กœ์„œ ์šฐ๋ฆฌ๋Š”์ด ๊ต์ฒด์— ๋Œ€ํ•œ ๋„์›€์„ ๊ธฐ๊บผ์ด ์ œ๊ณต ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ฐ์‚ฌ.

่ฏท ่€ƒ่™‘ ไฝฟ็”จ ่ฝป ้‡ ็š„ Dayjs ๆฅ ๆ›ฟๆข moment.js, ๅœจ ่ฟ™้‡Œ ๅทฒ็ป ๅ……ๅˆ† ๆต‹่ฏ• ่ฟ‡ ๆ›ฟๆข ็š„ ๅฏ่กŒๆ€งhttps://github.com/iamkun/dayjs/issues/529

์ด์ „ ์•„์ด์ฝ˜ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์€ * ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค * :

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

4.0์—์„œ ๋Œ€์‹  ๋‹จ์ผ ์•„์ด์ฝ˜ ๊ฐ€์ ธ ์˜ค๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

์ƒˆ ์•„์ด์ฝ˜ ์ฐธ์กฐ์— ๋Œ€ํ•œ ์•„์ด๋””์–ด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์œ„์˜ ์ƒˆ ๋‹จ์–ด๋กœ ์ธํ•ด ๊ฐ ์•„์ด์ฝ˜์€ ๋ณ„๋„์˜ ๊ตฌ์„ฑ ์š”์†Œ์— ํ•ด๋‹นํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๋กœ๋”ฉ ์•„์ด์ฝ˜์˜ ๋„์ž…์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

import Loading from 'antd/icons/Loading';

<Loading />

๊ทธ๋Ÿฌ๋‚˜ ์ผ๋ฐ˜์ ์œผ๋กœ ์‹ค์ œ ๋กœ๋”ฉ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ง์ ‘ ์บก์Šํ™” ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ณผ๊ฑฐ์—๋Š” <Icon /> ์ด (๊ฐ€) ํ•œ ๋ˆˆ์— ์•„์ด์ฝ˜์ด๋ผ๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์—ˆ์ง€๋งŒ ์ง€๊ธˆ์€ ๋„ˆ๋ฌด ๋งŽ์€ ์ด๋ฆ„์„ ์ฐจ์ง€ํ•˜๋ฏ€๋กœ ์•„์ด์ฝ˜์ด ์ด๋™ํ•ด์•ผํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ์ˆ˜์ž… ์žฅ์†Œ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์˜ˆ :

<Title />
<Loading />
<Sun />  

์–ธ๋œป๋ณด๊ธฐ์— ๋‹ค์Œ ๋‘ ๊ฐœ๋Š” ์•„์ด์ฝ˜์œผ๋กœ ๋ณด์ด์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค (๋ฌผ๋ก  ์ฝ”๋“œ ์‹คํ–‰์—๋Š” ์˜ํ–ฅ์„์ฃผ์ง€ ์•Š์Šต๋‹ˆ๋‹ค ~)
๋‹ค์Œ ๋ฌธ๊ตฌ๋กœ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒฝ์šฐ :

 import {Icon} from 'antd';
 import {Loading, Sun} from '@antd/icons';  

<Icon spec={Loading}  {...otherProps}/>
<Icon spec={Sun} />

๋นต์˜ ์™ธ๋ถ€ ๋ ˆ์ด์–ด๋ฅผ ํ†ตํ•ด ์ด์ „ ๋ ˆ์ด์–ด์™€ ๋งค์šฐ ์œ ์‚ฌํ•˜๊ฒŒ ๋ณด์ด๋ฉฐ ํ•„์š”์— ๋”ฐ๋ผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์œผ๋ฉฐ ์•„์ด์ฝ˜ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋„์ž… ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
ํŠน์ • ๊ทœ์น™์ด ์ถฉ์กฑ๋˜๋ฉด ์‚ฌ์šฉ์ž ์ •์˜ ์•„์ด์ฝ˜์ด spec ์†์„ฑ์„ ํ†ตํ•ด ์ „๋‹ฌ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋งŽ์€ ์•„์ด์ฝ˜์„ ๋ฏธ๋ฆฌ ์ •์˜ํ•˜๋Š” ๋ฐ ๋„์›€์„์ฃผ๋Š” antd์™€ ๋™์ผํ•˜์ง€๋งŒ ์‚ฌ์šฉ์ž ์ •์˜ ์•„์ด์ฝ˜์€ ๋˜‘๊ฐ™์Šต๋‹ˆ๋‹ค ~~~ (๊ทธ๋ƒฅ ์–˜๊ธฐํ•ด๋ณด์„ธ์š” ~)

์ถ”์‹  : ์•„๋‹ˆ๋ฉด ์ด๋Ÿฐ ์ข…๋ฅ˜์˜ ๊ธ€์€ ์‹ค์ œ๋กœ ์˜ค๋ž˜ ์ „์— ์ƒ๊ฐ ๋œ ๊ฒƒ์ž…๋‹ˆ๊นŒ, ์•„๋‹ˆ๋ฉด ์ด๋Ÿฐ ์ข…๋ฅ˜์˜ ๊ธ€์— ๋ฌธ์ œ๊ฐ€์žˆ์–ด์„œ ๊ทธ๊ฒƒ์— ๋Œ€ํ•ด ์ƒ๊ฐํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๊นŒ? . . ๐Ÿ˜‚
๊ทธ๋ƒฅ ์ƒ๊ฐ ํ–ˆ์–ด์š”. . .

@ppbl์€ ์•„์ด๋””์–ด์— ๋”ฐ๋ผ ๋‹ค์Œ๊ณผ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

import Icon from '@antd/icons'; 
imoort { LoadingOutline } from '@antd/icons-svg';

<Icon component={LoadingOutline}  {...otherProps}/>

์ƒˆ ์•„์ด์ฝ˜๋„ ์œ ์‚ฌํ•˜๊ฒŒ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/icons/AccountBook.tsx ์ฐธ์กฐ

Icon ์ด๋ฆ„์— Icon ์ ‘๋‘์‚ฌ / ์ ‘๋ฏธ์‚ฌ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ์ด๋Ÿฌํ•œ ์ƒํ™ฉ์„ ํ”ผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

imoort { LoadingOutlineIcon } from '@antd/icons';

<LoadingOutlineIcon  {...otherProps}/>

๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ์ค„์ด๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅํ•˜์‹ญ์‹œ์˜ค.
https://github.com/ant-design/ant-design/issues/9419
Button ๊ฐ€์ ธ ์˜ค๋ฉด ํ”„๋กœ์ ํŠธ์— 95KB๊ฐ€ ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” 2019 ๋…„์—๋Š” ํ—ˆ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๐Ÿ‘Ž

@vagusX ์–ด์ฉŒ๋ฉด ์ด๋ฆ„์ด ์กฐ๊ธˆ ๊ธธ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๊นŒ? ํ•ญ์ƒ ์ด๋ฆ„์ด ๊ฐ„๊ฒฐํ•˜๊ณ  ์ž‘์€ ๊ตฌ์„ฑ ์š”์†Œ ๋‚˜ ์ƒ๋Œ€์ ์œผ๋กœ ๋‹จ์ผ ๊ตฌ์„ฑ ์š”์†Œ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฆ„์ด ๋„ˆ๋ฌด ๊ธธ๊ณ  ํฐ ๊ตฌ์„ฑ ์š”์†Œ ์—ฌ์•ผํ•ฉ๋‹ˆ๋‹ค (๋ฌผ๋ก  ์ด๊ฑด ์ž˜๋ชป๋œ ๋Š๋‚Œ์ด์—์š” ~ ์•Œ์•„์š”). . ~

๋ฌผ๋ก , <Icon /> ๋งŒํ•ด๋„ ์•„์ด์ฝ˜ ์ธ ๊ฒƒ์„ ์•ˆ๋‹ค๋ฉด <Icon /> ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ง์ ‘ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉํ•  ๋•Œ antd ์•„์ด์ฝ˜์„ ๊ฐ์Œ€ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ํšจ๊ณผ๋Š” ๊ฑฐ์˜ ๋˜‘๊ฐ™์•„์š” ~ ๊ทธ๋ƒฅ ๋ชจ๋‘ ์•„์ด์ฝ˜์ด๊ณ  ์ด๋ฆ„์ด ํฉ์–ด์ ธ์žˆ๋Š” ๊ฒƒ ๊ฐ™์€ ๋Š๋‚Œ์ด ๋“ญ๋‹ˆ๋‹ค. ์กฐ๊ธˆ ์ด์ƒํ•˜๊ฒŒ ๋Š๊ปด์ง‘๋‹ˆ๋‹ค. ์ฐจ์ด์ ์€ ๋จผ์ € ์•„์ด์ฝ˜์ด๋ผ๋Š” ๊ฒƒ์„ ์•Œ์•˜๊ณ  ๊ทธ ๋‹ค์Œ์— ์–ด๋–ค ์œ ํ˜•์ธ์ง€ ์•Œ์•˜์Šต๋‹ˆ๋‹ค. ๋จผ์ € ํƒ€์ž…์„ ์•Œ๊ณ  ๊ทธ๋‹ค์Œ์— ์•Œ์•„, ์˜ค, ์•„์ด์ฝ˜์ด์•ผ ~

@ avalanche1 ์ด pr https://github.com/ant-design/ant-design/pull/18217#issuecomment -520683838์˜ ๋ฒˆ๋“ค ๋ถ„์„ ๊ฒฐ๊ณผ์™€ Button ๊ตฌ์„ฑ ์š”์†Œ์˜ ํฌ๊ธฐ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ถ„๋ช…ํžˆ ๊ฐ์†Œ

์•Œ์•„ ๋‘˜๋งŒ ํ•œ. ํ•˜์ง€๋งŒ ์Šคํฌ๋ฆฐ ์ƒท์—๋Š” ์‹ค์ œ ํฌ๊ธฐ๊ฐ€ ํ‘œ์‹œ๋˜์–ด ์žˆ์ง€ ์•Š์œผ๋ฏ€๋กœ ํ™•์ธํ•˜๊ฑฐ๋‚˜ ๋ฐ˜๋ฐ• ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

Form์„ ์ƒˆ API๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๋ ค๊ณ ํ•˜๋Š”๋ฐ field-form ์˜ ๋ฒ„์ „์ด ๋ถˆ์•ˆ์ •ํ•˜๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ๊ฒŒ ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์•ž์œผ๋กœ ์ด๋Ÿฌํ•œ ์ธํ„ฐํŽ˜์ด์Šค๊ฐ€ ํฌ๊ฒŒ ๋ณ€๊ฒฝ ๋ ์ง€ ์—ฌ๋ถ€๋ฅผ ์•Œ๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

@orzyyyy ,
antd๋Š” ์†Œ์…œ ๋ฐ ๋‚ด๋ถ€ ์ž์› ๋ด‰์‚ฌ์ž๊ฐ€ ํ…Œ์ŠคํŠธ ํ•  ์ˆ˜ ์žˆ๋„๋ก 4.0-alpha.x ๋ฒ„์ „์„ ์ถœ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค. ์•ŒํŒŒ ๋ฒ„์ „์—์„œ ๋ถ€์ •์ ์ธ ํ”ผ๋“œ๋ฐฑ์ด์—†๋Š” ๊ฒฝ์šฐ์ด API๊ฐ€ ๋ฆด๋ฆฌ์Šค์˜ ์ตœ์ข… ๋ฒ„์ „์ด๋ฉ๋‹ˆ๋‹ค.

@ avalanche1 @ant-design/icons v4-alpha ๋ฒ„์ „์€ ํŠธ๋ฆฌ ์…ฐ์ด ํ‚น์„ ์ง€์›ํ•˜๋ฏ€๋กœ ๋ฒˆ๋“ค ํฌ๊ธฐ๋Š” ๋‚ด๋ถ€์ ์œผ๋กœ ์•„์ด์ฝ˜์„ ๊ฐ€์ ธ ์˜ค๋Š” antd ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”์ง€ ๋˜๋Š” @ant-design/icons ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”์ง€ ์—ฌ๋ถ€์— ๊ด€๊ณ„์—†์ด ์ž์‹ ์˜ ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉํ•œ ์•„์ด์ฝ˜์˜ ์–‘์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง‘๋‹ˆ๋‹ค

์ดˆ๊ธฐ ๊ฒŒ์‹œ๋ฌผ์ด ๋ฒ„ํŠผ, ์บ˜๋ฆฐ๋” ๋ฐ ๊ธฐํƒ€ ๊ตฌ์„ฑ ์š”์†Œ์— ๊ด€ํ•œ ๊ฒƒ์ด์—ˆ์„ ๋•Œ ์•„์ด์ฝ˜์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? https://github.com/ant-design/ant-design/issues/9419

DatePicker ๊ฐ’์€ ์ˆœ๊ฐ„์ด์–ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์ˆœ๊ฐ„์„ ์ œ๊ฑฐ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? from์„ ์—…๋ฐ์ดํŠธํ•˜๋ฉด ์ˆœ๊ฐ„์œผ๋กœ ๋ณ€ํ™˜ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

moment ์— ๋Œ€ํ•œ ๊ณ ๋ ค ์‚ฌํ•ญ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. DatePicker๋Š” ํ˜ธํ™˜์„ฑ ์š”๊ตฌ ์‚ฌํ•ญ ๋•Œ๋ฌธ์— ๊ธฐ๋ณธ์ ์œผ๋กœ moment ๋ฅผ ๊ณ„์† ์‚ฌ์šฉํ•˜์ง€๋งŒ ๋‹ค๋ฅธ ๋‚ ์งœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ์ƒ์„ฑ ํ•  ์ˆ˜์žˆ๋Š” ํŒฉํ† ๋ฆฌ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

import DatePicker, { createPicker } from 'antd/lib/date-picker';

import dayjs from 'dayjs';

const basicDemo = <DatePicker />

const MyDatePicker = createPicker(dayjs, {
  // Some proxy function, maybe can provided by default...
  format(dayObj, formatStr) {
    return ...;
  },
  parse(str, formatStr) {
    return ...;
  },
});

const dayDemo = <MyDatePicker />;

๊ทธ๋ƒฅ ์ƒ๊ฐํ•ด, ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

์ด์ œ moment.js๋ฅผ ์ œ๊ฑฐ ํ• 

  1. Moment.js๋Š” ๋ณต์žกํ•œ OOP API๋กœ ์ธํ•ด ํŠธ๋ฆฌ๋ฅผ ํ”๋“ค ์ˆ˜ ์˜ค๋ฒ„ ํ—ค๋“œ ์ž…๋‹ˆ๋‹ค.

  2. Ant Design v4๋Š” ์ด๋ฏธ ํฌ๊ฒŒ ๋ณ€๊ฒฝ๋œ ์ฃผ์š” ๋ฆด๋ฆฌ์Šค์ž…๋‹ˆ๋‹ค. ์ง€๊ธˆ์ด ์ ˆํ˜ธ์˜ ๊ธฐํšŒ ๋‹ค!

  3. ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๊ต์ฒด ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. Antd ๊ฐ™์€ ์ž‘์€ ๊ฒƒ์„ ์‚ฌ์šฉํ•  ์ˆ˜ dayjs ๋˜๋Š” date-fns ๋‚ด๋ถ€์ ํ•˜์ง€๋งŒ ๋„ค์ดํ‹ฐ๋ธŒ ๋ฐ›์•„ ๋“ค์—ฌ์•ผํ•œ๋‹ค Date ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ๊ฐ์ฒด ๋‚˜ ๋ฌธ์ž์—ด์„.

moment() ๋ฅผ ๋ถ€๋ฅผ ๋•Œ๋งˆ๋‹ค ๊ฐ•์•„์ง€๊ฐ€ ์ฃฝ์Šต๋‹ˆ๋‹ค ..

:๊ฐœ:

@zombieJ ๋Š” Table ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ง„ํ–‰๋˜๊ณ  ์žˆ๋Š”์ง€ ์•Œ๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. Form๊ณผ ๊ฐ™์€ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ฒ„์ „์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๋‚˜๋Š” ๊ฑฐ์˜ ํ† ํ•  ํ”ผ๋ฅผ ํ† ํ–ˆ๋‹ค ๐Ÿ˜‚

์•ŒํŒŒ ๋ฒ„์ „์— ์ด๋ฏธ ์ƒˆ ํ…Œ์ด๋ธ”์ด ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๊นŒ? ๊ทธ๋ ‡๋‹ค๋ฉด ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์›น ์‚ฌ์ดํŠธ ์— ์˜ˆ์ œ๊ฐ€ ํฌํ•จ๋˜์–ด์•ผํ•ฉ๋‹ˆ๊นŒ?

ํ…Œ์ด๋ธ”์ด ๋Œ€๊ธฐ์—ด์— ์žˆ์œผ๋ฉฐ ํ˜„์žฌ ๊ฐ€์ƒ ๋ชฉ๋ก์—์„œ ์ž‘์—… ์ค‘์ž…๋‹ˆ๋‹ค.

์Šคํƒ€์ผ ๊ตฌ์„ฑ ์š”์†Œ ์ง€์›์€ ์–ด๋–ป์Šต๋‹ˆ๊นŒ?

์–‘์‹ initialValues๋Š” moment ์„ค์ •ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. https://github.com/react-component/field-form/blob/master/src/interface.ts#L7

Form์ด Excel๊ณผ ๊ฐ™์€ ๋Œ€ํ˜• ํผ์˜ ์„ฑ๋Šฅ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์ œ์–ด๋˜์ง€ ์•Š์€ ๋ฒ„์ „์„ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์•ŒํŒŒ ๋ฌธ์„œ๋ฅผ ์ผ๋ฐ˜ Ant ๋ฌธ์„œ ์‚ฌ์ดํŠธ๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๋‚ด ๊ณ ์šฉ์ฃผ๋Š” Netlify ๋„๋ฉ”์ธ์„ ์ฐจ๋‹จํ•˜๊ณ  ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋„ ๊ทธ๋Ÿด ์ˆ˜ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค.

๋ฉ”๋‰ด ๋ฐ ๋“œ๋กญ ๋‹ค์šด์—์„œ ํ‚ค๋ณด๋“œ ์ž‘๋™์„ ์ง€์›ํ•  ๊ตฌ์ฒด์ ์ธ ๊ณ„ํš์ด ์žˆ์Šต๋‹ˆ๊นŒ?

์•ŒํŒŒ ๋ฌธ์„œ๋ฅผ ์ผ๋ฐ˜ Ant ๋ฌธ์„œ ์‚ฌ์ดํŠธ๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๋‚ด ๊ณ ์šฉ์ฃผ๋Š” Netlify ๋„๋ฉ”์ธ์„ ์ฐจ๋‹จํ•˜๊ณ  ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋„ ๊ทธ๋Ÿด ์ˆ˜ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค.

์™œ? ใ…‹ใ…‹

Table ์ปดํฌ๋„ŒํŠธ๋Š” Element์˜ Table ์ปดํฌ๋„ŒํŠธ์™€ ๋น„์Šทํ•ด์ง€๊ธฐ๋ฅผ ๋ฐ”๋ผ๋ฉฐ, ๊ฐ ์ปฌ๋Ÿผ์€ ์ž๋™์œผ๋กœ ๋„ˆ๋น„๋ฅผ ๋จผ์ € ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ํ…Œ์ด๋ธ”์˜ ํ—ค๋” ๋ฌธ์ž๋Š” ์ค„ ๋ณ€๊ฒฝ์ด ์•„๋‹Œ ์ตœ์†Œ ๋„ˆ๋น„๋กœ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ์Šคํฌ๋กค ๊ธฐ๋Šฅ๊ณผ ๋™์‹œ์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์—ฌ๋Ÿฌ ํ•ญ๋ชฉ์„ ์„ ํƒํ•˜๋ฉด ํŠธ๋ฆฌ ๋ชจ์–‘์˜ ํ…Œ์ด๋ธ”์ด TreeSelect์™€ ๋น„์Šทํ•ด์ง€๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

Table ์ปดํฌ๋„ŒํŠธ๊ฐ€ Element์˜ Table ์ปดํฌ๋„ŒํŠธ์ฒ˜๋Ÿผ ๋  ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๊ฐ ์—ด์€ ์ž๋™์œผ๋กœ ๋„ˆ๋น„๊ฐ€ ๋จผ์ € ์„ค์ •๋ฉ๋‹ˆ๋‹ค. ํ…Œ์ด๋ธ” ํ—ค๋“œ ๋ฌธ์ž๋ฅผ ์ค„ ๋ฐ”๊ฟˆ์—†์ด ์ตœ์†Œ ๋„ˆ๋น„๋กœ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ์ ‘๊ธฐ ๊ธฐ๋Šฅ๊ณผ ์Šคํฌ๋กค ๊ธฐ๋Šฅ์ด ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๋™์‹œ์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠธ๋ฆฌ ํ…Œ์ด๋ธ”์ด ๋‹ค์ค‘ ์„ ํƒ์ด๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค., TreeSelect์™€ ์œ ์‚ฌ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

v4 ๋˜๋Š” v5๋กœ ์‚ฌ์šฉ์ž ์ •์˜์— ๋Œ€ํ•ด ๋ญ”๊ฐ€๋ฅผ ํ•  ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ์Šต๋‹ˆ๊นŒ? MaterialUI๋Š” ํ›จ์”ฌ ๋” ์™„๋ฒฝํ•˜๊ธฐ ๋•Œ๋ฌธ์— AntD๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ์—๋„ ๋‚ด๊ฐ€ ์ž‘์—…์ค‘์ธ ํ”„๋กœ์ ํŠธ์— ๊ณ„์† ์„ ํƒํ•˜๋„๋ก ์‚ฌ์šฉ์ž ์ •์˜ํ•˜๊ธฐ๊ฐ€ ํ›จ์”ฌ ์‰ฝ์Šต๋‹ˆ๋‹ค.
๋” ๋‚˜์€ ์‚ฌ์šฉ์ž ์ •์˜๋ฅผ ์œ„ํ•ด ๋œ ๋“œ๋กญํ•˜์‹ญ์‹œ์˜ค.

์—์ด์ „์‹œ๊ฐ€ ์šฐ๋ฆฌ์˜ antd ์›น ์•ฑ์„ ํ…Œ์ŠคํŠธํ•˜๊ฒŒ ํ•œ ํ›„ ๊ทธ๋“ค์€ ์‹ฌ๊ฐํ•œ ์ ‘๊ทผ์„ฑ ๊ฒฐํ•จ์„ ํ™•์ธํ–ˆ๊ณ  ๊ฐ€๋Šฅํ•œ ์ตœ์•…์˜ ๋“ฑ๊ธ‰์„ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ์ฃผ๋œ ์ด์œ ๋ฅผ ์กฐ์‚ฌ ํ•  ๋•Œ ๋‹ค์Œ rc ๊ตฌ์„ฑ ์š”์†Œ๋กœ ์š”์•ฝ๋ฉ๋‹ˆ๋‹ค.

  • rc-select (์šฐ๋ฆฌ๋Š” Downshift๋กœ ๋Œ€์ฒดํ•˜๊ณ  ์œ„์— antd ์Šคํƒ€์ผ์„ ์ ์šฉํ•ด์•ผํ–ˆ์Šต๋‹ˆ๋‹ค)
  • rc-tabs (# 18798 ์ฐธ์กฐ)
  • ๊ทธ๋ฆฌ๊ณ  ์šฐ๋ฆฌ๊ฐ€ ์ง€๊ธˆ๊นŒ์ง€ ์‚ฌ์šฉํ•˜์ง€ ์•Š์€ ๋‹ค๋ฅธ ๊ฒƒ๋“ค์€

antd๊ฐ€ rc ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•ด ์–ผ๋งˆ๋‚˜ ํฐ ๊ฑฐ๋ฒ„๋„Œ์Šค๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ ํŒ€์ด 4.0 ๋ฆด๋ฆฌ์Šค์— ๋Œ€ํ•ด ์ ์‹œ์—์ด๋ฅผ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ์ ‘๊ทผ์„ฑ์€ ํ•ญ์ƒ ์ƒ๋Œ€์ ์œผ๋กœ ์šฐ์„  ์ˆœ์œ„๊ฐ€ ๋‚ฎ์ง€ ๋งŒ ๊ธฐ์—…์ด ์ง์› / ๊ณ ๊ฐ์—๊ฒŒ ์•ก์„ธ์Šค ๊ฐ€๋Šฅํ•œ ์•ฑ์„ ์ œ๊ณตํ•˜๋„๋ก ๋ฒ•์ ์œผ๋กœ ๊ตฌ์†๋จ์— ๋”ฐ๋ผ ์ ‘๊ทผ์„ฑ์„ ๋ฌด์‹œํ•˜๊ธฐ๊ฐ€ ์ ์  ๋” ์–ด๋ ค์›Œ์ง‘๋‹ˆ๋‹ค.

์Šคํฌ๋ฆฐ ๋ฆฌ๋”๋ฅผ ์‚ฌ์šฉํ•œ ๋ฌด๊ฑฐ์šด ํ…Œ์ŠคํŠธ์™€ ๋ชจ๋ฒ” ์‚ฌ๋ก€์— ๋Œ€ํ•œ ๋ฒค์น˜๋งˆํ‚น์—์„œ ์ €๋ฅผ ๋ฏฟ์œผ ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

MaterialUI๋Š” ์‚ฌ์šฉ์ž ์ •์˜๊ฐ€ ํ›จ์”ฌ ์‰ฝ์Šต๋‹ˆ๋‹ค.

@murbanowicz ์ž์„ธํžˆ

@abenhamdine ๋ฌธ์ œ ์—†์–ด์š”!
MUI์—๋Š” ์•ฑ์„ ๋ž˜ํ•‘ํ•˜๋Š” ThemeProvider ๊ฐ€ ์žˆ์œผ๋ฉฐ TypeScript์— ์ž…๋ ฅ ๋œ JS ๊ฐœ์ฒด๋กœ ์ „์ฒด ํ…Œ๋งˆ๋ฅผ ๊ตฌ์„ฑํ•˜๋ฏ€๋กœ ์ž‘์—…ํ•˜๊ธฐ๊ฐ€ ๋„ˆ๋ฌด ์ข‹์Šต๋‹ˆ๋‹ค.

AntD์—์„œ ์‚ฌ์šฉ์ž ์ •์˜ํ•˜๋ ค๋ฉด LESS ๋˜๋Š” SASS (์ผ๋ถ€ ํ”Œ๋Ÿฌ๊ทธ์ธ ํฌํ•จ)๋ฅผ ์—‰๋ง์œผ๋กœ ๋งŒ๋“ค์–ด์•ผํ•˜๋ฏ€๋กœ ๋‹ค๋ฅธ deps ๋“ฑ์„ ์œ ์ง€ํ•ด์•ผํ•˜๋ฉฐ ๊ตฌ์„ฑ ์š”์†Œ ์†Œ์Šค๋ฅผ ํ†ตํ•ด ํŠน์ • ๊ตฌ์„ฑ ์š”์†Œ ๋“ฑ์— ๋Œ€ํ•ด ๋ณ€๊ฒฝํ•˜๋ ค๋Š” ๋ณ€์ˆ˜๋ฅผ ์ฐพ์•„์•ผํ•ฉ๋‹ˆ๋‹ค.
๋˜ํ•œ ์„œ๋ฒ„ ๋“ฑ์—์„œ ์‰ฝ๊ฒŒ ์–ป์„ ์ˆ˜์žˆ๋Š” JS ๊ฐ์ฒด๋ฅผ ์ „ํ™˜ํ•˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋„ MUI๋กœ ์‰ฝ๊ฒŒ ๋Ÿฐํƒ€์ž„์—์„œ ํ…Œ๋งˆ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ์ข‹์€ ๋ฐฉ๋ฒ•์ด ์—†์Šต๋‹ˆ๋‹ค.

๊ธฐ๋ณธ์ ์œผ๋กœ AntD ๋ฐ MUI์˜ ์‚ฌ์šฉ์ž ์ •์˜๋ฅผ ์ฐพ์„ ๋•Œ MUI์— ๋Œ€ํ•œ ์‰ฌ์šด ์˜ˆ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ๊ฐ„๋‹จํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋งํ•  ๊ฒƒ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์ด์ง€๋งŒ AntD ์‚ฌ์šฉ์ž ์ •์˜๋ฅผ ์œ„ํ•ด Google์„ ๊ฒ€์ƒ‰ ํ•  ๋•Œ ๋งŽ์€ ํ•ดํ‚ค ์†”๋ฃจ์…˜ ๋“ฑ์„ ์ฐพ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์™„์„ฑํ’ˆ๊ณผ ๋งŽ์€ ํ›Œ๋ฅญํ•œ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•ด AntD๋ฅผ ์ข‹์•„ํ•˜์ง€๋งŒ ์‚ฌ์šฉ์ž ์ •์˜๋Š” ์ •๋ง ์ข‹์ง€ ์•Š์œผ๋ฉฐ ๋‚ด ๊ฒฝํ—˜๊ณผ ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž์™€์˜ ๋Œ€ํ™”๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋กœ๋“œ๋งต์˜ ํ•ต์‹ฌ ํฌ์ธํŠธ ์ค‘ ํ•˜๋‚˜ ์—ฌ์•ผํ•ฉ๋‹ˆ๋‹ค.

@abenhamdine ๋ฌธ์ œ ์—†์–ด์š”!
MUI์—๋Š” ์•ฑ์„ ๋ž˜ํ•‘ํ•˜๋Š” ThemeProvider ๊ฐ€ ์žˆ์œผ๋ฉฐ TypeScript์— ์ž…๋ ฅ ๋œ JS ๊ฐœ์ฒด๋กœ ์ „์ฒด ํ…Œ๋งˆ๋ฅผ ๊ตฌ์„ฑํ•˜๋ฏ€๋กœ ์ž‘์—…ํ•˜๊ธฐ๊ฐ€ ๋„ˆ๋ฌด ์ข‹์Šต๋‹ˆ๋‹ค.

AntD์—์„œ ์‚ฌ์šฉ์ž ์ •์˜ํ•˜๋ ค๋ฉด LESS ๋˜๋Š” SASS (์ผ๋ถ€ ํ”Œ๋Ÿฌ๊ทธ์ธ ํฌํ•จ)๋ฅผ ์—‰๋ง์œผ๋กœ ๋งŒ๋“ค์–ด์•ผํ•˜๋ฏ€๋กœ ๋‹ค๋ฅธ deps ๋“ฑ์„ ์œ ์ง€ํ•ด์•ผํ•˜๋ฉฐ ๊ตฌ์„ฑ ์š”์†Œ ์†Œ์Šค๋ฅผ ํ†ตํ•ด ํŠน์ • ๊ตฌ์„ฑ ์š”์†Œ ๋“ฑ์— ๋Œ€ํ•ด ๋ณ€๊ฒฝํ•˜๋ ค๋Š” ๋ณ€์ˆ˜๋ฅผ ์ฐพ์•„์•ผํ•ฉ๋‹ˆ๋‹ค.
๋˜ํ•œ ์„œ๋ฒ„ ๋“ฑ์—์„œ ์‰ฝ๊ฒŒ ์–ป์„ ์ˆ˜์žˆ๋Š” JS ๊ฐ์ฒด๋ฅผ ์ „ํ™˜ํ•˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋„ MUI๋กœ ์‰ฝ๊ฒŒ ๋Ÿฐํƒ€์ž„์—์„œ ํ…Œ๋งˆ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ์ข‹์€ ๋ฐฉ๋ฒ•์ด ์—†์Šต๋‹ˆ๋‹ค.

๊ธฐ๋ณธ์ ์œผ๋กœ AntD ๋ฐ MUI์˜ ์‚ฌ์šฉ์ž ์ •์˜๋ฅผ ์ฐพ์„ ๋•Œ MUI์— ๋Œ€ํ•œ ์‰ฌ์šด ์˜ˆ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ๊ฐ„๋‹จํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋งํ•  ๊ฒƒ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์ด์ง€๋งŒ AntD ์‚ฌ์šฉ์ž ์ •์˜๋ฅผ ์œ„ํ•ด Google์„ ๊ฒ€์ƒ‰ ํ•  ๋•Œ ๋งŽ์€ ํ•ดํ‚ค ์†”๋ฃจ์…˜ ๋“ฑ์„ ์ฐพ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์™„์„ฑํ’ˆ๊ณผ ๋งŽ์€ ํ›Œ๋ฅญํ•œ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•ด AntD๋ฅผ ์ข‹์•„ํ•˜์ง€๋งŒ ์‚ฌ์šฉ์ž ์ •์˜๋Š” ์ •๋ง ์ข‹์ง€ ์•Š์œผ๋ฉฐ ๋‚ด ๊ฒฝํ—˜๊ณผ ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž์™€์˜ ๋Œ€ํ™”๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋กœ๋“œ๋งต์˜ ํ•ต์‹ฌ ํฌ์ธํŠธ ์ค‘ ํ•˜๋‚˜ ์—ฌ์•ผํ•ฉ๋‹ˆ๋‹ค.

๋ช…ํ™•ํ•˜๊ณ  ์ •ํ™•ํ•œ ์„ค๋ช…, thx!

@abenhamdine ๋ฌธ์ œ ์—†์–ด์š”!
MUI์—๋Š” ์•ฑ์„ ๋ž˜ํ•‘ํ•˜๋Š” ThemeProvider ๊ฐ€ ์žˆ์œผ๋ฉฐ TypeScript์— ์ž…๋ ฅ ๋œ JS ๊ฐœ์ฒด๋กœ ์ „์ฒด ํ…Œ๋งˆ๋ฅผ ๊ตฌ์„ฑํ•˜๋ฏ€๋กœ ์ž‘์—…ํ•˜๊ธฐ๊ฐ€ ๋„ˆ๋ฌด ์ข‹์Šต๋‹ˆ๋‹ค.

AntD์—์„œ ์‚ฌ์šฉ์ž ์ •์˜ํ•˜๋ ค๋ฉด LESS ๋˜๋Š” SASS (์ผ๋ถ€ ํ”Œ๋Ÿฌ๊ทธ์ธ ํฌํ•จ)๋ฅผ ์—‰๋ง์œผ๋กœ ๋งŒ๋“ค์–ด์•ผํ•˜๋ฏ€๋กœ ๋‹ค๋ฅธ deps ๋“ฑ์„ ์œ ์ง€ํ•ด์•ผํ•˜๋ฉฐ ๊ตฌ์„ฑ ์š”์†Œ ์†Œ์Šค๋ฅผ ํ†ตํ•ด ํŠน์ • ๊ตฌ์„ฑ ์š”์†Œ ๋“ฑ์— ๋Œ€ํ•ด ๋ณ€๊ฒฝํ•˜๋ ค๋Š” ๋ณ€์ˆ˜๋ฅผ ์ฐพ์•„์•ผํ•ฉ๋‹ˆ๋‹ค.
๋˜ํ•œ ์„œ๋ฒ„ ๋“ฑ์—์„œ ์‰ฝ๊ฒŒ ์–ป์„ ์ˆ˜์žˆ๋Š” JS ๊ฐ์ฒด๋ฅผ ์ „ํ™˜ํ•˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋„ MUI๋กœ ์‰ฝ๊ฒŒ ๋Ÿฐํƒ€์ž„์—์„œ ํ…Œ๋งˆ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ์ข‹์€ ๋ฐฉ๋ฒ•์ด ์—†์Šต๋‹ˆ๋‹ค.

๊ธฐ๋ณธ์ ์œผ๋กœ AntD ๋ฐ MUI์˜ ์‚ฌ์šฉ์ž ์ •์˜๋ฅผ ์ฐพ์„ ๋•Œ MUI์— ๋Œ€ํ•œ ์‰ฌ์šด ์˜ˆ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ๊ฐ„๋‹จํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋งํ•  ๊ฒƒ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์ด์ง€๋งŒ AntD ์‚ฌ์šฉ์ž ์ •์˜๋ฅผ ์œ„ํ•ด Google์„ ๊ฒ€์ƒ‰ ํ•  ๋•Œ ๋งŽ์€ ํ•ดํ‚ค ์†”๋ฃจ์…˜ ๋“ฑ์„ ์ฐพ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์™„์„ฑํ’ˆ๊ณผ ๋งŽ์€ ํ›Œ๋ฅญํ•œ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•ด AntD๋ฅผ ์ข‹์•„ํ•˜์ง€๋งŒ ์‚ฌ์šฉ์ž ์ •์˜๋Š” ์ •๋ง ์ข‹์ง€ ์•Š์œผ๋ฉฐ ๋‚ด ๊ฒฝํ—˜๊ณผ ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž์™€์˜ ๋Œ€ํ™”๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋กœ๋“œ๋งต์˜ ํ•ต์‹ฌ ํฌ์ธํŠธ ์ค‘ ํ•˜๋‚˜ ์—ฌ์•ผํ•ฉ๋‹ˆ๋‹ค.

Antd ๋ฅผ ์‚ฌ์šฉํ•œ ์‚ฌ์šฉ์ž ์ •์˜๊ฐ€ ์•ฝ๊ฐ„ ์ง€์ €๋ถ„ํ•ด์งˆ ์ˆ˜ ์žˆ๋‹ค๋Š” moment ์™€ ๊ฐ™์€ ๋งŽ์€ ์™ธ๋ถ€ ์ข…์†์„ฑ์œผ๋กœ ์ธํ•ด ๋ฒˆ๋“ค ํฌ๊ธฐ๊ฐ€ ์ปค์ง) ),ํ•˜์ง€๋งŒ ์˜ค๋žซ๋™์•ˆ MUI๋ฅผ ์‚ฌ์šฉํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— Antd๊ฐ€ ํ›จ์”ฌ ๋” ์ปค์Šคํ„ฐ๋งˆ์ด์ง•์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

MUI์˜ ์ƒˆ ๋ฆด๋ฆฌ์Šค์— ๋Œ€ํ•œ ์ตœ์‹  ์ •๋ณด๋Š” ์•„๋‹ˆ์ง€๋งŒ ๋งˆ์ง€๋ง‰์œผ๋กœ ํ™•์ธํ–ˆ์„ ๋•Œ ๊ฐœ๋ฐœ์ž๊ฐ€ classNames ์ถ”๊ฐ€ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ MUI๊ฐ€ styled-components ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž ์ง€์ •ํ•  ์ˆ˜์—†๋Š” ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์ผ๋ถ€์žˆ์—ˆ์Šต๋‹ˆ๋‹ค classNames ์–ด๋””์—์„œ๋‚˜ ๊ตฌ์„ฑ ์š”์†Œ์˜ ์ •ํ™•ํ•œ className์„ ์„ ํƒํ•˜๊ณ  ์ž์‹ ์˜ ์Šคํƒ€์ผ๋กœ ์žฌ์ •์˜ ํ•  ์ˆ˜๋Š” ์—†์Šต๋‹ˆ๋‹ค.
ํ…Œ๋งˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ง์ ‘ ์‚ฌ์šฉํ•˜๊ธฐ์—๋Š” ๋ฉ‹์ง€์ง€๋งŒ ๋””์ž์ธ ์‹œ์Šคํ…œ์— ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜๋ ค๋Š” ๊ฒฝ์šฐ MUI๊ฐ€ ๋งค์šฐ ์ง€์ €๋ถ„ํ•˜๋ฉฐ ๋•Œ๋กœ๋Š” ๋ถˆ๊ฐ€๋Šฅํ•˜๊ธฐ๋„ํ•ฉ๋‹ˆ๋‹ค.)

๊ทธ๋Ÿฌ๋‚˜ ์—ฌ์ „ํžˆ antd ๋Š” ์‚ฌ์šฉ์ž ์ •์˜ ๊ฒฝํ—˜์„ ๋” ์‰ฝ๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์‹ค์ œ๋กœ ์•ฝ๊ฐ„์˜ ์ž‘์—…์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.)

@filipjnc ,
์ ‘๊ทผ์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ค๋Š” rc-select ์ถœ์‹œ ์•ŒํŒŒ ๋ฒ„์ „. ๊ทธ๊ฒƒ์„ ํ…Œ์ŠคํŠธํ•˜๋Š” ๋ฐ ๋„์›€์„ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  v4 ์ค€๋น„ ๋ธŒ๋žœ์น˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒ๋‹จ์—์„œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
rc-tabs ์˜ ๊ฒฝ์šฐ ์ตœ์šฐ์„  ์ˆœ์œ„๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‚˜์ค‘์— ๊ฐœ์„  ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@zombieJ ์•Œ๊ฒ ์Šต๋‹ˆ๋‹ค . rc-select ์•ŒํŒŒ๋ฅผ ์‚ดํŽด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

rc-tabs ์ด ์šฐ์„  ์ˆœ์œ„๋Š” ์•„๋‹ˆ์ง€๋งŒ ์ ‘๊ทผ์„ฑ ํ…Œ์ŠคํŠธ ๊ฒฐ๊ณผ์—์„œ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ํฌ์ธํŠธ๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ํ’€ ๋ฆฌํ€˜์ŠคํŠธ๋ฅผ ํ™•์ธํ•ด ์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

์—ฌ๊ธฐ์— ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ ์•„์ด์ฝ˜ ๋ฆฌํผ ๋ฐฉ์‹์— ๋”ฐ๋ฅด๋ฉด antd ์ปดํฌ๋„ŒํŠธ ํ˜•ํƒœ์™€ ์•„์ด์ฝ˜์ด ์žˆ๋‹ค๋ฉด
์–‘์‹์ด ๋™์‹œ์— ๋„์ž…๋˜๋ฉด ๋ณ„์นญ ์ค‘ ํ•˜๋‚˜๋งŒ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@zkwolf ์˜ˆ, ์•„์ด์ฝ˜ ์ด๋ฆ„์„ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค : https://github.com/ant-design/ant-design-icons/pull/118

cc @vagusX

https://next.ant.design์—์„œ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๊ตฌ์„ฑ ์š”์†Œ ์‚ฌ์ด๋“œ ๋ฐ”์—์„œ ์•ŒํŒŒ๋ฒณ์ˆœ์œผ๋กœ ์ •๋ ฌ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
Schermata 2019-09-30 alle 18 01 03

์•„์‹œ๋‹ค์‹œํ”ผ, ant-design์€ ์ ‘๊ทผ์„ฑ ์ธก๋ฉด์—์„œ ์‹ค์ œ๋กœ ์ž˜ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋Œ€๋ถ€๋ถ„์˜ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ํ‘œ๋ฉด์ ์œผ๋กœ ๋„ˆ๋ฌด ๋ˆˆ์— ๋„์ง€ ์•Š์ง€๋งŒ ๋” ๊นŠ์ด ์ž ์ˆ˜ ํ•  ๋•Œ ํฐ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ant-design์˜ ์ ์ˆ˜๊ฐ€ ๋งค์šฐ ๋‚˜์˜๊ฒŒ ์—ฌ๊ธฐ์—์„œ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค : https://darekkay.com/blog/accessible-ui-frameworks/

์ข‹์€ ์†Œ์‹์€ ์ œ๊ฐ€ ant-design์„ ๋งŽ์ด ์ข‹์•„ํ•˜๊ณ  ์—”ํ„ฐํ”„๋ผ์ด์ฆˆ ํ”„๋กœ์ ํŠธ์— ๋” ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ๊ธฐ ๋•Œ๋ฌธ์— ์ œ ๋ชฉํ‘œ๋Š” ๋ชฉ๋ก์˜ ๋งจ ์œ„์— ์˜ฌ๋ฆฌ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋Œ€ํ–‰์‚ฌ์—์„œ ๋…์ผ์˜ ๊ณ ๊ฐ์„ ์œ„ํ•ด ์—”ํ„ฐํ”„๋ผ์ด์ฆˆ ์•ฑ ์ค‘ ํ•˜๋‚˜๋ฅผ ํ…Œ์ŠคํŠธํ•˜๋„๋กํ–ˆ์Šต๋‹ˆ๋‹ค (๋Œ€๊ธฐ์—…์—์„œ๋Š” ์ ‘๊ทผ์„ฑ์ด ํฐ ์ฃผ์ œ ์ž„). ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฒƒ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  1. ์„ ํƒ, ์ž๋™ ์™„์„ฑ ๋ฐ ํƒญ๊ณผ ๊ฐ™์€ ๊ธฐ๋ณธ์ด์ง€๋งŒ ์ค‘์š”ํ•œ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์Šคํฌ๋ฆฐ ๋ฆฌ๋” ์ ‘๊ทผ์„ฑ
  2. ์—ฌ๋Ÿฌ ๊ณณ์—์„œ ์ƒ‰์ƒ ๋Œ€๋น„
  3. ์ผ๋ถ€ ์œ„์น˜์˜ ํ‚ค๋ณด๋“œ ํƒ์ƒ‰

๋ชจ๋“  ์ ‘๊ทผ์„ฑ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋จผ์ € rc-tabs ์„ ์„ ํƒํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ณง ์ถœ์‹œ ๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค (https://github.com/react-component/tabs/pull/218). ๊ทธ๋Ÿฌ๋‚˜ ๊ฐ€์žฅ ๊ฑฑ์ •๋˜๋Š” ๊ฒƒ์€ rc-select , ํŠนํžˆ ์ฝค๋ณด ๋ฐ•์Šค (์ž๋™ ์™„์„ฑ) ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค. ์ฝค๋ณด ๋ฐ•์Šค๋Š” ํ™”๋ฉด ํŒ๋…๊ธฐ ์ ‘๊ทผ์„ฑ์˜ ๊ฐ€์žฅ ๊นŒ๋‹ค๋กœ์šด ์ธก๋ฉด ์ค‘ ํ•˜๋‚˜์ด๋ฉฐ ์ž˜๋ชป ์ดํ•ดํ•˜๊ธฐ ์‰ฝ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด ์•„๋ฆฌ์•„ ์†์„ฑ์— ๋Œ€ํ•œ ์•ฝ๊ฐ„์˜ ์กฐ์ •๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋Œ€๋Œ€์  ์ธ ์ ๊ฒ€์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์‹คํ–‰ํ•˜๊ธฐ ์ „์— ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋น ๋ฅด๊ฒŒ ์ˆ˜์ •ํ•˜๊ธฐ ์œ„ํ•ด ant-design์˜ Select ๋ฐ AutoComplete ( rc-select )๋ฅผ https://github.com/downshift-js/downshift๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœํ•˜๋Š” ๋‚ด ๊ตฌ์„ฑ ์š”์†Œ๋กœ ๋Œ€์ฒดํ–ˆ์Šต๋‹ˆ๋‹ค

๊ทธ๋ž˜์„œ ๋„๋ฐœ์ ์ธ ์งˆ๋ฌธ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค : ๋” ์ธ๊ธฐ ์žˆ๊ณ  ์™„์ „ํ•œ downshift ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์œ„ํ•ด ์ด์ค‘ ์ž‘์—…์„ํ•˜์ง€ ์•Š๊ณ  rc-select ๋ฅผ ๋” ์ด์ƒ ์‚ฌ์šฉํ•˜์ง€ ์•Š์„๊นŒ์š”? ํŒ€์—์„œ ์‹œ๊ฐ„์„ ์ ˆ์•ฝํ•˜๊ณ  ์˜คํ”ˆ ์†Œ์Šค ์‹œ์žฅ์—์„œ ์ข‹์€ ๋Œ€์•ˆ์ด์—†๋Š” ๋‹ค๋ฅธ ํ•ต์‹ฌ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์™„์„ฑํ•˜๋Š” ๋ฐ ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ์•„์ด๋””์–ด๋Š” @filipjnc ๋‚˜์—๊ฒŒ ํ™˜์ƒ์ ์œผ๋กœ

4.0 ๋ฆด๋ฆฌ์Šค์—์„œ ๋” ๋งŽ์€ ์ƒ‰์ƒ ๊ฐœ์„ ์„๋ณด๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ, ๋ฌธ์„œ์—๋Š” ๋Œ€์‹œ ๋ณด๋“œ ๋ฐ ๊ธฐํƒ€ ๋ฐ์ดํ„ฐ๊ฐ€ ๋งŽ์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋งค์šฐ ์œ ์šฉํ•œ "๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ์ƒ‰์ƒ ํ‘œ (์ถœ์‹œ ์˜ˆ์ •)"๊ฐ€ ์–ธ๊ธ‰๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋œปํ•˜๊ณ  ์ฐจ๊ฐ€์šด ํšŒ์ƒ‰์€ ๋”์šฑ ์‘์ง‘๋ ฅ์žˆ๋Š” ์ƒ‰์ƒ ํŒ”๋ ˆํŠธ๋ฅผ ๋งŒ๋“œ๋Š”๋ฐ๋„ ๋„์›€์ด๋ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ์ ‘๊ทผ์„ฑ์„ ์œ„ํ•ด ์ƒ‰์ƒ ๋Œ€๋น„๋ฅผ ์ˆ˜์ •ํ•  ์ˆ˜์žˆ๋Š” ์ข‹์€ ๊ธฐํšŒ์ž…๋‹ˆ๋‹ค (@filipjnc์—์„œ ์–ธ๊ธ‰ ํ•จ). ์ข‹์€ ์ผ์„ ๊ณ„์†ํ•˜์„ธ์š” ๐Ÿ‘

์•„์‹œ๋‹ค์‹œํ”ผ, ant-design์€ ์ ‘๊ทผ์„ฑ ์ธก๋ฉด์—์„œ ์‹ค์ œ๋กœ ์ž˜ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋Œ€๋ถ€๋ถ„์˜ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ํ‘œ๋ฉด์ ์œผ๋กœ ๋„ˆ๋ฌด ๋ˆˆ์— ๋„์ง€ ์•Š์ง€๋งŒ ๋” ๊นŠ์ด ์ž ์ˆ˜ ํ•  ๋•Œ ํฐ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ant-design์˜ ์ ์ˆ˜๊ฐ€ ๋งค์šฐ ๋‚˜์˜๊ฒŒ ์—ฌ๊ธฐ์—์„œ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค : https://darekkay.com/blog/accessible-ui-frameworks/

์ข‹์€ ์†Œ์‹์€ ์ œ๊ฐ€ ant-design์„ ๋งŽ์ด ์ข‹์•„ํ•˜๊ณ  ์—”ํ„ฐํ”„๋ผ์ด์ฆˆ ํ”„๋กœ์ ํŠธ์— ๋” ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ๊ธฐ ๋•Œ๋ฌธ์— ์ œ ๋ชฉํ‘œ๋Š” ๋ชฉ๋ก์˜ ๋งจ ์œ„์— ์˜ฌ๋ฆฌ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋Œ€ํ–‰์‚ฌ์—์„œ ๋…์ผ์˜ ๊ณ ๊ฐ์„ ์œ„ํ•ด ์—”ํ„ฐํ”„๋ผ์ด์ฆˆ ์•ฑ ์ค‘ ํ•˜๋‚˜๋ฅผ ํ…Œ์ŠคํŠธํ•˜๋„๋กํ–ˆ์Šต๋‹ˆ๋‹ค (๋Œ€๊ธฐ์—…์—์„œ๋Š” ์ ‘๊ทผ์„ฑ์ด ํฐ ์ฃผ์ œ ์ž„). ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฒƒ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

1. Screen reader accessibility for basic but crucial components like Select, Autocomplete and Tabs

2. Color contrasts in many places

3. Keyboard navigation in some places

๋ชจ๋“  ์ ‘๊ทผ์„ฑ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋จผ์ € rc-tabs ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ณง ์ถœ์‹œ ๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค ( react-component / tabs # 218 ). ํ•˜์ง€๋งŒ ๊ฐ€์žฅ ๊ฑฑ์ •๋˜๋Š” ๊ฒƒ์€ rc-select , ํŠนํžˆ ์ฝค๋ณด ๋ฐ•์Šค (์ž๋™ ์™„์„ฑ) ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค. ์ฝค๋ณด ๋ฐ•์Šค๋Š” ํ™”๋ฉด ํŒ๋…๊ธฐ ์ ‘๊ทผ์„ฑ์˜ ๊ฐ€์žฅ ๊นŒ๋‹ค๋กœ์šด ์ธก๋ฉด ์ค‘ ํ•˜๋‚˜์ด๋ฉฐ ์ž˜๋ชป ์ดํ•ดํ•˜๊ธฐ ์‰ฝ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด ์•„๋ฆฌ์•„ ์†์„ฑ์— ๋Œ€ํ•œ ์•ฝ๊ฐ„์˜ ์กฐ์ •๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋Œ€๋Œ€์  ์ธ ์ ๊ฒ€์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์‹คํ–‰ํ•˜๊ธฐ ์ „์— ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋น ๋ฅด๊ฒŒ ์ˆ˜์ •ํ•˜๊ธฐ ์œ„ํ•ด ant-design์˜ Select ๋ฐ AutoComplete ( rc-select )๋ฅผ https://github.com/downshift-js/downshift๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœํ•˜๋Š” ๋‚ด ๊ตฌ์„ฑ ์š”์†Œ๋กœ ๋Œ€์ฒดํ–ˆ์Šต๋‹ˆ๋‹ค

๊ทธ๋ž˜์„œ ๋„๋ฐœ์ ์ธ ์งˆ๋ฌธ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค : ๋” ์ธ๊ธฐ ์žˆ๊ณ  ์™„์ „ํ•œ downshift ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์œ„ํ•ด ์ด์ค‘ ์ž‘์—…์„ํ•˜์ง€ ์•Š๊ณ  rc-select ๋ฅผ ๋” ์ด์ƒ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ฒ ์Šต๋‹ˆ๊นŒ? ํŒ€์—์„œ ์‹œ๊ฐ„์„ ์ ˆ์•ฝํ•˜๊ณ  ์˜คํ”ˆ ์†Œ์Šค ์‹œ์žฅ์—์„œ ์ข‹์€ ๋Œ€์•ˆ์ด์—†๋Š” ๋‹ค๋ฅธ ํ•ต์‹ฌ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์™„์„ฑํ•˜๋Š” ๋ฐ ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋‹ค์šด ์‹œํ”„ํŠธ์— ๋Œ€ํ•ด ๊ทธ๋ ‡๊ฒŒ ์—ด์„ฑ์ ์ด์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. https://github.com/downshift-js/downshift/issues/730 ์ฐธ์กฐ
์ผ๋ถ€ ์‚ฌ์šฉ์ž์—๊ฒŒ๋Š” ์ ‘๊ทผ์„ฑ์ด ์ค‘์š”ํ•˜์ง€๋งŒ ๋” ๋งŽ์€ ์‚ฌ์šฉ์ž์—๊ฒŒ๋Š” ์„ฑ๋Šฅ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

ํ…Œ์ด๋ธ”์ด ๋Œ€๊ธฐ์—ด์— ์žˆ์œผ๋ฉฐ ํ˜„์žฌ ๊ฐ€์ƒ ๋ชฉ๋ก์—์„œ ์ž‘์—… ์ค‘์ž…๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”, @zombieJ
์š”์•ฝ ๋ฐ”๋‹ฅ ๊ธ€์— ์ง„ํ–‰ ์ƒํ™ฉ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

@ alexchen1875 ,
์ƒˆ ๋ผ์ดํ”„ ์‚ฌ์ดํด ์ฝ”๋“œ ์—…๋ฐ์ดํŠธ๋ฅผ ๋ณด๋ฅ˜ ์ค‘์ž…๋‹ˆ๋‹ค. ํ…Œ์ด๋ธ”์€ ์™„๋ฃŒ ํ›„ ๋‹ค์Œ์ž…๋‹ˆ๋‹ค :)

4.0 ์ผ๋ถ€ ์†Œํ’ˆ ๋งค๊ฐœ ๋ณ€์ˆ˜๋ฅผ ์นด๋ฉœ ์ผ€์ด์Šค๋กœ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ์˜ˆ๋ฅผ ๋“ค์–ด, Input.TextArea ์—์„œ autosize ์œผ๋กœ ๋ณ€๊ฒฝ autoSize ?
React์—์„œ ๋„ค์ดํ‹ฐ๋ธŒ HTML ํƒœ๊ทธ์˜ ์†Œํ’ˆ์€ ๋ชจ๋‘ <input autoComplete /> ์™€ ๊ฐ™์€ ์นด๋ฉœ ์ผ€์ด์Šค์ž…๋‹ˆ๋‹ค.์ด autosize ํ•ญ์ƒ ๋ถˆ์ผ์น˜ ํ•ด ๋ณด์ž…๋‹ˆ๋‹ค. . .

3.x์—์„œ ๋ณ€๊ฒฝ ๋  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์›๋ž˜ ์‚ฌ์šฉ์€ ํ˜ธํ™˜๋˜๊ณ  ํ๊ธฐ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. @ jinliming2 PR์— ๊ด€์‹ฌ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

  • 4.0 Tree์˜ props.children์„ ์˜ค๋ž˜๋œ API๋กœ ํ‘œ์‹œํ•˜๊ณ  ๋Œ€์‹  treeData์˜ ์ˆœ์ˆ˜ํ•œ ๋ฐ์ดํ„ฐ ๋ฉ”์†Œ๋“œ๋ฅผ ๊ถŒ์žฅํ•˜๋Š” ์ด์œ ๋Š” props.children์ด ๋งค์šฐ ์œ ์šฉํ•˜๊ณ  ๋งค์šฐ ์œ ์šฉํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
  • ComponentWillReceiveProps๋Š” ์ตœ์‹  react API์—์„œ ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ๊ฒƒ์œผ๋กœ ํ‘œ์‹œ๋˜์—ˆ์œผ๋ฉฐ ํ˜„์žฌ ํ‰๊ฐ€ํŒ ๋™์•ˆ ํ…Œ์ด๋ธ” ๊ตฌ์„ฑ ์š”์†Œ์™€ Animate ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์—ฌ์ „ํžˆ ์กด์žฌํ•˜๋Š” ๊ฒƒ์œผ๋กœ ํ™•์ธ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ ‘๊ทผ์„ฑ์— +1. ๋ถ€๋””!

ํด๋ฆฌ์–ด ์•„์ด์ฝ˜์˜ ํฌ๊ธฐ ๋ฌธ์ œ๋กœ ๋งํ•˜๋ฉด ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ์˜ ์•„์ด์ฝ˜์€ 12px, datepicker๋Š” 14px ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. datepicker๋Š” ์•„์ด์ฝ˜ ์Šค์œ„์น˜๊ฐ€ 14px์ด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๊นŒ?ํฌ๊ธฐ๋ฅผ ํ†ตํ•ฉ ํ•  ๊ณ„ํš์ด ์žˆ์Šต๋‹ˆ๊นŒ?

@zombieJ ๋Š” ํ…Œ์ด๋ธ”์— ๋‹ค์ค‘ ์—ด ์ •๋ ฌ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค.

pls๋Š” ์˜์–ด์— ์“ฐ๊ธฐ

๋„ˆ๋ฌด ํฐ ๋ชจ๋ฉ˜ํŠธ ํฌ๊ธฐ ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋ฉ๋‹ˆ๊นŒ?

๋„ˆ๋ฌด ํฐ ๋ชจ๋ฉ˜ํŠธ ํฌ๊ธฐ ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋ฉ๋‹ˆ๊นŒ?

๋จผ์ € dayjs๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์‹ญ์‹œ์˜ค

์˜์–ด๋กœ ํ•  ์ˆ˜ ์žˆ๋‚˜์š”? ์™ธ๊ตญ์ธ์˜ ๊ฐ์ •์„ ๊ณ ๋ คํ•ด๋ณด์„ธ์š”. ์ €๋Š” ํ•ญ์ƒ ๊ตฌ๊ธ€ ๋ฒˆ์—ญ์„ํ•ฉ๋‹ˆ๋‹ค. ๋ฌธ๋ฒ•์ด ํ‘œ์ค€์ด ์•„๋‹Œ ๊ฒƒ์€ ์ค‘์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‹จ์–ด๋Š” ๊ทธ๋“ค์—๊ฒŒ ์ดํ•ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฟก๋ฟก
์™ธ๊ตญ์ธ๋“ค์ด์ด ๋ ˆํฌ๋ฅผ ํŒ”๋กœ์šฐํ•˜๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ๊ฐ ํ•˜์…จ๋‚˜์š”? ์•ˆํƒ€๊น๊ฒŒ๋„ Google ๋ฒˆ์—ญ์€ ๊ท€ํ•˜๊ฐ€ ๋งํ•˜๋Š” ๋‚ด์šฉ์„ ์ดํ•ดํ•˜๋Š” ๋ฐ ์ข‹์€ ๋„๊ตฌ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. Ant-Design์˜ ๋Œ€๋ถ€๋ถ„์˜ ๊ฐœ๋ฐœ์ž์™€ ์‚ฌ์šฉ์ž๋Š” ์ค‘๊ตญ์ธ์ด๋ผ๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์ง€๋งŒ ์ค‘๊ตญ์ธ์ด ์•„๋‹Œ ์‚ฌ๋žŒ๋„ ๊ณ ๋ คํ•˜์‹ญ๋‹ˆ๊นŒ?
๋”ฐ๋ผ์„œ ์šฐ๋ฆฌ ๋ชจ๋‘๋ฅผ ์กด์ค‘ํ•˜๊ธฐ ์œ„ํ•ด ๊ตญ์ œ ์–ธ์–ด ๋ฅผ ์‚ฌ์šฉํ•˜์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”,
create-react-app ๋ฐ Typescript์™€ ํ•จ๊ป˜ Ant Design 4.0์„ ์‚ฌ์šฉํ•ด๋ณด๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.
https://next.ant.design/docs/react/introduce ์˜ ์ง€์นจ์„ ๋”ฐ๋ž์ง€๋งŒ ์ž‘๋™ํ•˜๋Š” ์•ฑ์„ ์–ป์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
create-react-app์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ์ง€์นจ ( import Button from 'antd/es/button'; )์— ๋”ฐ๋ผ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“ˆ antd / es / button์„ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

react-app-rewired, customize-cra, babel-plugin-import๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  import๋ฅผ import {Button} from 'antd' ๋ณ€๊ฒฝํ•˜๋ฉด ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๊ฐ€ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

๋ชจ๋“ˆ 'antd'์— ๋Œ€ํ•œ ์„ ์–ธ ํŒŒ์ผ์„ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

crea-react-app ๋ฐ typescript๋กœ antd4๋ฅผ ์ž‘๋™์‹œํ‚ค๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์กฐ์–ธ์„ ์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

@gynekolog ,
node_modules ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์„ค์น˜๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค.

ref https://codesandbox.io/s/cool-paper-4y1u7

@lvlohammadi ์•ˆํƒ€๊น๊ฒŒ๋„ ์ €์™€ ๊ฐ™์€ ์ผ๋ถ€ ์ค‘๊ตญ์ธ๋“ค์€ ์˜์–ด๊ฐ€ ๋ถ€์กฑํ•˜์ง€๋งŒ ์ปค๋ฎค๋‹ˆํ‹ฐ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์— ์ฐธ์—ฌํ•˜๊ธฐ ์œ„ํ•ด ๊ตญ์ œ ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์ตœ์„ ์„ ๋‹คํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@gynekolog ,
node_modules ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์„ค์น˜๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค.

ref https://codesandbox.io/s/cool-paper-4y1u7

๋„ค๊ฐ€ ์˜ณ์•„. ๋‚œ ๋‹ฌ๋ฆฐ๋‹ค

yarn add "https://github.com/ant-design/ant-design.git#4.0-prepare"

๋Œ€์‹ 

yarn add "[email protected]"

๋ถ€๋„๋Ÿฌ์›€...
๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

dropdownMatchSelectWidth on Select component break on alpha ๋ฒ„์ „, ์ด์ „ ๋ฒ„์ „์—์„œ ์œ ํšจ ํ•จ

antd๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๋ ค๋ฉด ๋ฒ„์ „ 3 ๋˜๋Š” 4 ์•ŒํŒŒ๋ฅผ ์„ ํƒ ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ? ๋ฒ„์ „ 4๋Š” ์–ผ๋งˆ๋‚˜ "์ƒ์‚ฐ ์ค€๋น„"์ƒํƒœ์ž…๋‹ˆ๊นŒ? ์—ฌ์ „ํžˆ 4 ๋ถ„๊ธฐ ์ถœ์‹œ๋ฅผ ๋ชฉํ‘œ๋กœํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

antd๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๋ ค๋ฉด ๋ฒ„์ „ 3 ๋˜๋Š” 4 ์•ŒํŒŒ๋ฅผ ์„ ํƒ ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ? ๋ฒ„์ „ 4๋Š” ์–ผ๋งˆ๋‚˜ "์ƒ์‚ฐ ์ค€๋น„"์ƒํƒœ์ž…๋‹ˆ๊นŒ? ์—ฌ์ „ํžˆ 4 ๋ถ„๊ธฐ ์ถœ์‹œ๋ฅผ ๋ชฉํ‘œ๋กœํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

Antd 4๋Š” ์•„์ง ์ƒ์‚ฐ ์ค€๋น„๊ฐ€๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. antd 3์œผ๋กœ ์‹œ์ž‘ํ•ด์•ผํ•˜๋ฉฐ, ์ „ํ™˜์€ ์‰ฌ์›Œ์•ผํ•ฉ๋‹ˆ๋‹ค (ํŠนํžˆ codemod๊ฐ€ ์˜ˆ์ƒ๋Œ€๋กœ ์ œ๊ณต๋˜๋Š” ๊ฒฝ์šฐ).

๋กœ์ง๊ณผ ๋””์Šคํ”Œ๋ ˆ์ด๊ฐ€ ์™„์ „ํžˆ ๋ถ„๋ฆฌ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ์ฆ‰, ํด๋ž˜์Šค ์ด๋ฆ„์„ ์กฐ์ž‘ํ•˜๋Š” ๊ฒƒ ์™ธ์— js๋Š” ๋ทฐ์— ๋Œ€ํ•ด ์•„๋ฌด๊ฒƒ๋„ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์‹œ๊ฐ์  ๋ชจ์–‘์€ ๋ชจ๋‘ CSS (LESS)๋กœ ์ฒ˜๋ฆฌํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ React Components ๋Œ€์‹  Web Components๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ React๊ฐ€ ์•„๋‹Œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋” ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋กœ์ง๊ณผ ๋””์Šคํ”Œ๋ ˆ์ด๊ฐ€ ์™„์ „ํžˆ ๋ถ„๋ฆฌ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ์ฆ‰, ํด๋ž˜์Šค ์ด๋ฆ„์„ ์กฐ์ž‘ํ•˜๋Š” ๊ฒƒ ์™ธ์— js๋Š” ๋ทฐ์— ๋Œ€ํ•ด ์•„๋ฌด๊ฒƒ๋„ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์‹œ๊ฐ์  ๋ชจ์–‘์€ ๋ชจ๋‘ CSS (LESS)๋กœ ์ฒ˜๋ฆฌํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ React Components ๋Œ€์‹  Web Components๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ React๊ฐ€ ์•„๋‹Œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋” ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  ๊ฒƒ์„ ์ •ํ™”ํ•˜๋ ค๋Š”์ด ์ƒ๊ฐ์€ ๋ฌด์˜๋ฏธํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋” ์ค‘์š”ํ•œ ๊ฒƒ์— ์ง‘์ค‘ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

https://react-select.com ๊ณผ ๊ฐ™์ด ์ž๋™ ์™„์„ฑ์—์„œ ๋‹ค์ค‘ ์„ ํƒ์— ๋Œ€ํ•œ ๊ณ„ํš์ด

๋กœ์ง๊ณผ ๋””์Šคํ”Œ๋ ˆ์ด๊ฐ€ ์™„์ „ํžˆ ๋ถ„๋ฆฌ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ์ฆ‰, ํด๋ž˜์Šค ์ด๋ฆ„์„ ์กฐ์ž‘ํ•˜๋Š” ๊ฒƒ ์™ธ์— js๋Š” ๋ทฐ์— ๋Œ€ํ•ด ์•„๋ฌด๊ฒƒ๋„ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์‹œ๊ฐ์  ๋ชจ์–‘์€ ๋ชจ๋‘ CSS (LESS)๋กœ ์ฒ˜๋ฆฌํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ React Components ๋Œ€์‹  Web Components๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ React๊ฐ€ ์•„๋‹Œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋” ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  ๊ฒƒ์„ ์ •ํ™”ํ•˜๋ ค๋Š”์ด ์ƒ๊ฐ์€ ๋ฌด์˜๋ฏธํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋” ์ค‘์š”ํ•œ ๊ฒƒ์— ์ง‘์ค‘ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

๋ถ„๋ฆฌ๋ณด๋‹ค ๋” ์‹œ๊ธ‰ํ•œ ๋ฌธ์ œ๋Š” ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ํŒ€์—์„œ CSS๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ๋””์ž์ด๋„ˆ๊ฐ€ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐ˜๋ฉด JS๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ์ฝ”๋”๊ฐ€ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ๋‘˜ ๋‹ค ์Šคํƒ€์ผ์„ ์กฐ์ž‘ํ•˜๋„๋ก ํ—ˆ์šฉํ•˜๋ฉด ํ˜ผ๋ž€๊ณผ ๋ถˆํ•„์š”ํ•˜๊ฒŒ ๊ฐœ๋ฐœ ์‹œ๊ฐ„์„ ์žƒ๊ฒŒ๋ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ๋ฉ”๋‰ด๋ฅผ ๊ฐ€์ ธ ๊ฐ€๋ฉด ๊ธฐ๋ณธ ๋„ˆ๋น„์™€ ๋†’์ด๊ฐ€ JS์— ์˜ํ•ด ์„ค์ •๋ฉ๋‹ˆ๋‹ค. ๋ฌธ์ œ๋Š” ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ์™ธ๋ถ€ ๋ž˜ํผ์˜ ๋„ˆ๋น„ ๋˜๋Š” ๋†’์ด๋ฅผ ๋ณ€๊ฒฝํ•˜๋ ค๊ณ  ํ•  ๋•Œ ๋ฉ”๋‰ด๊ฐ€ ํŠ€์–ด ๋‚˜์˜ค๊ฑฐ๋‚˜ ์ฃผ๋ณ€์— ๊ฐ„๊ฒฉ์ด ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด์„œ๋Š” ๋””์ž์ด๋„ˆ์™€ ์ฝ”๋”๊ฐ€ ๋ชจ๋‘ ์ˆ˜์ •ํ•ด์•ผํ•˜๋ฉฐ ์ด๋Š” ๋‹ค์šด ํƒ€์ž„์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ ๊ตฌ์„ฑ ์š”์†Œ๋กœ์„œ ์ฝ”๋“œ๊ฐ€ ์ง€๋‚˜์น˜๊ฒŒ ๋ณต์žกํ•˜์ง€ ์•Š๊ณ  ๋ถ„๋ฆฌ์— ๋งŽ์€ ๋…ธ๋ ฅ์ด ํ•„์š”ํ•˜์ง€ ์•Š์ง€๋งŒ ๊ฒฐ๊ณผ๋Š” ์‚ฌ์šฉ์ž์™€ ant.design ํŒ€ ์ž์ฒด์˜ ์‚ถ์„ ํ›จ์”ฌ ๋” ์‰ฝ๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

๋˜ ๋‹ค๋ฅธ ์ž‘์€ ๋ฌธ์ œ์ธ Icon์€ ๊ธฐ๋ณธ ๊ธ€๊ผด ํฌ๊ธฐ ์ธ 14px๊ฐ€ ์•„๋‹Œ 16px๋กœ ๊ธฐ๋ณธ ์„ค์ •๋˜์–ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ Icon์ด ํ…์ŠคํŠธ์™€ ๋ณ„๋„๋กœ @ default-icon-size, @ icon-size-lg ๋“ฑ๊ณผ ๊ฐ™์€ ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•จ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์‹ค์ œ๋กœ ๋ฒ„๊ทธ๋Š” ์•„๋‹ˆ์ง€๋งŒ ๊ธฐ๋Šฅ์ด ์†์‹ค๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋ฟก๋ฟก
์™ธ๊ตญ์ธ๋“ค์ด์ด ๋ ˆํฌ๋ฅผ ํŒ”๋กœ์šฐํ•˜๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ๊ฐ ํ•˜์…จ๋‚˜์š”? ์•ˆํƒ€๊น๊ฒŒ๋„ Google ๋ฒˆ์—ญ์€ ๊ท€ํ•˜๊ฐ€ ๋งํ•˜๋Š” ๋‚ด์šฉ์„ ์ดํ•ดํ•˜๋Š” ๋ฐ ์ข‹์€ ๋„๊ตฌ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. Ant-Design์˜ ๋Œ€๋ถ€๋ถ„์˜ ๊ฐœ๋ฐœ์ž์™€ ์‚ฌ์šฉ์ž๋Š” ์ค‘๊ตญ์ธ์ด๋ผ๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์ง€๋งŒ ์ค‘๊ตญ์ธ์ด ์•„๋‹Œ ์‚ฌ๋žŒ๋„ ๊ณ ๋ คํ•˜์‹ญ๋‹ˆ๊นŒ?
๋”ฐ๋ผ์„œ ์šฐ๋ฆฌ ๋ชจ๋‘๋ฅผ ์กด์ค‘ํ•˜๊ธฐ ์œ„ํ•ด ๊ตญ์ œ ์–ธ์–ด ๋ฅผ ์‚ฌ์šฉํ•˜์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์‚ฌ๋žŒ๋“ค์€ ์ž์‹ ์˜ ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ•  ์ž๊ฒฉ์ด ์žˆ์œผ๋ฉฐ ๊ทธ๋ ‡๊ฒŒํ•˜๋Š” ๊ฒƒ์ด ํŽธ์•ˆํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๋ฒˆ์—ญ์„ ์ œ๊ณตํ•˜์—ฌ ์ตœ๋Œ€ํ•œ ๋งŽ์€ ์ฒญ์ค‘์„ ์ฐธ์—ฌ์‹œํ‚ค๋ ค๋Š” ๋…ธ๋ ฅ์„ ์กด์ค‘ํ•˜๋Š” ํ•œ, ๋ˆ„๊ตฌ๋„ ์ž์‹ ์ด ๊ฐ€์žฅ ํŽธํ•œ ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ์œ„ํ•œ ๊ฐ•์˜๋ฅผ ๋ฐ›์•„์„œ๋Š” ์•ˆ๋ฉ๋‹ˆ๋‹ค. ๊ด€๋ฆฌ์ž๊ฐ€ ์˜์‚ฌ ์†Œํ†ต์„ ์ดํ•ดํ•˜๋Š” ๊ฒƒ. ์ด ํ”„๋กœ์ ํŠธ์˜ ์ฃผ์š” ๊ธฐ์—ฌ์ž๋“ค์ด ๋‹ค๋ฅธ ์–ธ์–ด๊ฐ€ ์šฐ์›”ํ•˜๋‹ค๋Š” ์˜์‚ฌ ์†Œํ†ต์— ์ž์‹ ์˜ ๋ชจ๊ตญ์–ด๋ฅผ ์‚ฌ์šฉํ•ด์„œ๋Š” ์•ˆ๋œ๋‹ค๋Š” ์ƒ๊ฐ์€ ํ„ฐ๋ฌด๋‹ˆ์—†๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ฒˆ์—ญ์„ ์š”์ฒญํ•˜๋Š” ๊ฒƒ์€ ๊ดœ์ฐฎ์ง€ ๋งŒ ์กด์ค‘ํ•ฉ๋‹ˆ๋‹ค. ์‘๋‹ต์ด ์ค‘๊ตญ์–ด๋กœ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ฐ˜๋Œ€ํ‘œ๋ฅผ ๋˜์ง€๋Š” ๊ฒƒ์€ ๋น„์ƒ์‚ฐ์ ์ด๊ณ  ์œ ์น˜ํ•ฉ๋‹ˆ๋‹ค.

์•ผ, And Design ๋ฒ„์ „ 4.0์—๋Š” CSS ์ƒ์„ฑ์„ ์œ„ํ•ด _Less_ ๋Œ€์‹  JSS๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

์•ผ, And Design ๋ฒ„์ „ 4.0์—๋Š” CSS ์ƒ์„ฑ์„ ์œ„ํ•ด _Less_ ๋Œ€์‹  JSS๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

AFAIK, ์•„๋‹ˆ. ๊ทธ๋Ÿฌ๋‚˜ ์ ์€ ๊ฒƒ ์™ธ์—๋„ ์Šคํƒ€์ผ์ด ์ง€์ •๋œ ๊ตฌ์„ฑ ์š”์†Œ (์˜ˆ :)๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. @ tomgao365 ๋‹˜ , ์ฐธ์กฐํ•˜์‹  ๋ฌธ์ œ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ๋œ ์™„์ „ํ•˜๊ฒŒ ์ œ๊ฑฐํ•˜๊ณ  JSS๋ฅผ ๋Œ€์‹  ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ํ›Œ๋ฅญํ•œ PR์„ ๋งŒ๋“ค๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ๋ฒ„์ „ 3์—์„œ ์ž‘์—…ํ•˜๋Š” ๊ฒƒ์€ ์ข‹์€ ์ƒ๊ฐ์ด ์•„๋‹™๋‹ˆ๋‹ค. ๋งŽ์€ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋ฒ„์ „ 3์„ ์‚ฌ์šฉํ•˜์—ฌ ๋งŒ๋“ค์–ด ์กŒ๊ธฐ ๋•Œ๋ฌธ์— ๋ฒ„์ „ 4์—์„œ JSS๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ, @abenhamdine ์—๊ฒŒ ์•ฝ๊ฐ„์˜ ์งˆ๋ฌธ์ด ์žˆ์Šต๋‹ˆ๋‹ค. Less ๋Œ€์‹  JSS ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•ด ์–ด๋–ป๊ฒŒ ์ƒ๊ฐํ•˜์‹ญ๋‹ˆ๊นŒ?

๋˜ํ•œ, @abenhamdine ์—๊ฒŒ ์•ฝ๊ฐ„์˜ ์งˆ๋ฌธ์ด ์žˆ์Šต๋‹ˆ๋‹ค. Less ๋Œ€์‹  JSS๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•ด ์–ด๋–ป๊ฒŒ ์ƒ๊ฐํ•˜์‹ญ๋‹ˆ๊นŒ?

๋‚˜์— ๋”ฐ๋ฅด๋ฉด ์ฃผ์š” ์ด์  :

  • ๋™์  ์Šคํƒ€์ผ๋ง (์ ์€ ๊ณ ํ†ต)
  • ์ž๋™ ์™„์„ฑ (ํ™•์‹คํ•˜์ง€ ์•Š์Œ, ์‚ฌ์šฉํ•˜๋Š” ๋„๊ตฌ / JSS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋”ฐ๋ผ ๋‹ค๋ฆ„)
  • ์Šคํƒ€์ผ ์ƒ์†

์‹œ๋„ ํ•  ๊ฐ€์น˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ ๊ทธ๊ฒƒ์€ ์€์ƒ‰ ์ด์•Œ์ด ์•„๋‹™๋‹ˆ๋‹ค.

@abenhamdine ๋‹˜ , Discussion ๋ฐฐ์ง€๋ฅผ๋ฐ›์€ ๋ฌธ์ œ๋ฅผ ๋‚จ๊น๋‹ˆ๋‹ค. # 19181์ž…๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  JSS ๊ตฌํ˜„์„ ์‹œ์ž‘ํ•˜๊ณ  Less๋ฅผ ์ƒ๋žตํ•˜๊ณ  ์‹ถ์ง€๋งŒ ์ƒˆ ๋ฒ„์ „์ด ์ถœ์‹œ ๋  ์˜ˆ์ •์ด๋ฉฐ ๋ชจ๋“  ๋…ธ๋ ฅ์ด ๋‚ญ๋น„ ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

moment.js๋ฅผ Day.js ๋˜๋Š” ๊ธฐ๋ณธ Date Object์™€ ๊ฐ™์€ ๋Œ€์•ˆ์œผ๋กœ ๋Œ€์ฒดํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ํ† ๋ก ์„ ๋ณด๊ฒŒ๋˜์–ด ๊ธฐ์ฉ๋‹ˆ๋‹ค https://github.com/ant-design/ant-design/issues/19738

๋ฒ„์ „ 4์—์„œ create-react-app์„ ์‚ฌ์šฉํ•˜์—ฌ ์ƒ‰์ƒ ํ…Œ๋งˆ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ๋” ์‰ฌ์šด ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

๋‚ด๊ฐ€ ๋œ ๋ณ€์ˆ˜ ์ž‘์—…์˜ ํ•„์š”์—†์ด ํ…Œ๋งˆ๋ฅผ ๋ฌด์‹œํ•˜๋Š” ๊ฒƒ์ด ์ข‹์„ ๊ฒƒ์ด๋ผ๊ณ  @flashtheman์— ๋™์˜ - ๊ฐ์ •์—์„œ ThemeProvider ๊ฐ™์€, ์ฆ‰ ๋ญ”๊ฐ€๋ฅผ : https://emotion.sh/docs/theming

jQuery ์‹œ๋Œ€์— ํ…Œ๋งˆ ์„ค์ •์€ ๋งค์šฐ ์ธ๊ธฐ๊ฐ€ ์žˆ์œผ๋ฉฐ ์‚ฌ์šฉ์ž๋Š”์ด๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์–ดํ•ฉ๋‹ˆ๋‹ค.
2 ๋…„ ๋„˜๊ฒŒ ํ”„๋กœ๋•์…˜ ํ™˜๊ฒฝ์—์„œ ํ…Œ๋งˆ๋ฅผ ์‰ฝ๊ฒŒ ์ˆ˜์ •ํ•  ์ˆ˜์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ๊ธฐ๋‹ค๋ ธ์Šต๋‹ˆ๋‹ค.

์ƒˆ ๋ฒ„์ „์˜ ์•„์ด์ฝ˜ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์•„์ด์ฝ˜์ด ๋™์ ์œผ๋กœ ๊ฒฐ์ •๋˜๋ฉด ์ƒˆ ๋ฒ„์ „์—์„œ๋Š” ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•ด์•ผํ•ฉ๋‹ˆ๊นŒ? ๋‹น๋ถ„๊ฐ„์€ require + variable ๋ฌธ์ž์—ด ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. type ์†์„ฑ ๋งŒ ๋ณ€์ˆ˜๋กœ ์ฑ„์›Œ์•ผํ•ฉ๋‹ˆ๋‹ค. ์ฒ˜๋ฆฌ ํ•  ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?
๊ตฌ๊ธ€ ๋ฒˆ์—ญ : ์•„์ด์ฝ˜ ๊ตฌ์„ฑ ์š”์†Œ์˜ ์ƒˆ ๋ฒ„์ „์—์„œ ์•„์ด์ฝ˜์ด ๋™์ ์œผ๋กœ ๊ฒฐ์ •๋˜๋ฉด ์ƒˆ ๋ฒ„์ „์—์„œ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋‹น๋ถ„๊ฐ„ require + ๋ณ€์ˆ˜ ๋ฌธ์ž์—ด ๋งŒ ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์›๋ž˜๋Š” ์ฑ„์šฐ๊ธฐ ๋งŒํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค. ๋ณ€์ˆ˜๊ฐ€์žˆ๋Š” ์œ ํ˜• ์†์„ฑ, ๋‹ค๋ฅธ ์ฒ˜๋ฆฌ ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

์ƒˆ ๋ฒ„์ „์˜ ์•„์ด์ฝ˜ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์•„์ด์ฝ˜์ด ๋™์ ์œผ๋กœ ๊ฒฐ์ •๋˜๋ฉด ์ƒˆ ๋ฒ„์ „์—์„œ๋Š” ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•ด์•ผํ•ฉ๋‹ˆ๊นŒ? ๋‹น๋ถ„๊ฐ„์€ require + variable ๋ฌธ์ž์—ด ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. type ์†์„ฑ ๋งŒ ๋ณ€์ˆ˜๋กœ ์ฑ„์›Œ์•ผํ•ฉ๋‹ˆ๋‹ค. ์ฒ˜๋ฆฌ ํ•  ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?
๊ตฌ๊ธ€ ๋ฒˆ์—ญ : ์•„์ด์ฝ˜ ๊ตฌ์„ฑ ์š”์†Œ์˜ ์ƒˆ ๋ฒ„์ „์—์„œ ์•„์ด์ฝ˜์ด ๋™์ ์œผ๋กœ ๊ฒฐ์ •๋˜๋ฉด ์ƒˆ ๋ฒ„์ „์—์„œ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋‹น๋ถ„๊ฐ„ require + ๋ณ€์ˆ˜ ๋ฌธ์ž์—ด ๋งŒ ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์›๋ž˜๋Š” ์ฑ„์šฐ๊ธฐ ๋งŒํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค. ๋ณ€์ˆ˜๊ฐ€์žˆ๋Š” ์œ ํ˜• ์†์„ฑ, ๋‹ค๋ฅธ ์ฒ˜๋ฆฌ ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

React ๋ฌธ์„œ์—์„œ ๊ถŒ์žฅํ•˜๋Š” https://github.com/smooth-code/loadable-components๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์‹ญ์‹œ์˜ค.

๊ณต์‹ ๋ฒ„์ „์€ ์–ธ์ œ ์ถœ์‹œ ๋˜๋‚˜์š”?

4.0 ํ…Œ์ด๋ธ”์€ ํ”ผ๋ฒ— ๊ธฐ๋Šฅ์„ ์ง€์›ํ•ฉ๋‹ˆ๊นŒ?

@ afc163- ๊ธ€๋กœ๋ฒŒ ์Šคํƒ€์ผ ์˜ค์—ผ์ด ์‚ฌ๋žŒ๋“ค์ด ์ƒˆ ๋ฆด๋ฆฌ์Šค์—์„œ ์›ํ•˜๋Š” 1 ์œ„ ๋ฌธ์ œ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ด ์ž‘์—…์„ ํ•  ์‚ฌ๋žŒ์ด ์žˆ์Šต๋‹ˆ๊นŒ? ์ด ์ผ์„ํ•˜๊ณ  ๋„์›€์„ ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. ์–ด๋ ต์ง€ ์•Š๊ณ  ์•ฝ๊ฐ„์˜ ๋…ธ๋ ฅ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ๋˜ํ•œ Ant Design ์—์„œ์ด ๋ฌธ์ œ๋กœ ๊ณ ํ†ต๋ฐ›์Šต๋‹ˆ๋‹ค. ํ•ด๊ฒฐํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

๊ตฌ์„ฑ ์š”์†Œ ํฌ๊ธฐ๋ฅผ ์ค„์ด๊ธฐ์œ„ํ•œ ์ž‘์—…์ด ์žˆ์Šต๋‹ˆ๊นŒ?
ํ•œ ๋ฒˆ๋งŒ : ๊ฐ„๋‹จํ•œ Button -์ „์ฒด antd.css ํŒŒ์ผ์„ ๊ฐ€์ ธ์™€์•ผํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ ??

๊ตฌ์„ฑ ์š”์†Œ ํฌ๊ธฐ๋ฅผ ์ค„์ด๊ธฐ์œ„ํ•œ ์ž‘์—…์ด ์žˆ์Šต๋‹ˆ๊นŒ?
ํ•œ ๋ฒˆ๋งŒ : ๊ฐ„๋‹จํ•œ Button -์ „์ฒด antd.css ํŒŒ์ผ์„ ๊ฐ€์ ธ์™€์•ผํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ ??

@ avalanche1 https://ant.design/docs/react/introduce#Usage ๋ฅผ

๋ชจ๋“ˆํ™” ๋œ antd ์‚ฌ์šฉ

๋‚˜์—๊ฒŒ ์—…๋กœ๋“œ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ํ˜„์žฌ ์‚ฌ์šฉ์ž ์ง€์ • ๋ชฉ๋ก ๋ Œ๋”๋ง ์ง€์›์— ์ถฉ๋ถ„ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
๋˜ํ•œ ์—…๋กœ๋“œ ์ง„ํ–‰๋ฅ ์€ ๋ฐฑ๋ถ„์œจ์— ๋ถˆ๊ณผํ•˜๋ฉฐ ์‹ค์‹œ๊ฐ„ ์†๋„ ํ‘œ์‹œ๋ฅผ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด ํ™•์žฅํ•˜๋Š” ๊ฒƒ์€ ํŽธ๋ฆฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

ํ—‰ํ—‰

https://github.com/ant-design/ant-design/blob/c824569ea0810e2cf11bc2953b333eb0e404fd1c/components/upload/interface.tsx#L47 -L52

์†๋„ ํ‘œ์‹œ๋ฅผ ์›ํ•˜๋Š” ๊ฒฝ์šฐ onChange๋Š” ์—…๋กœ๋“œ ๋œ ํŒŒ์ผ์˜ ๋ฐฑ๋ถ„์œจ์„ ๋ฐ˜ํ™˜ํ–ˆ์Šต๋‹ˆ๋‹ค. ์—…๋กœ๋“œ ์†๋„๋ฅผ ๊ณ„์‚ฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@ Z3SA https://caniuse.com/#search = CSS % 20Variables. ์ด๊ฒƒ์€ ๋ชจ๋“  IE ์ง€์›์„ ์ค‘์ง€ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. IE11 ์ง€์›์„ ์ค‘์ง€ํ•˜๋Š” ๊ฒƒ์€ ๋„ˆ๋ฌด ๊ธ‰์ง„์ ์ด์ง€๋งŒ ์ €๋„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

ํด๋ฐฑ ์ง€์›์„ ์‚ฌ์šฉํ•˜๋ฉด ์—ฌ์ „ํžˆ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ : color: var(--red, @red); ํ˜„์žฌ์˜ ๋ชจ๋“  ๋ณ€์ˆ˜์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ์ „์—ญ ์ฐพ๊ธฐ / ๋ฐ”๊พธ๊ธฐ๋งŒ์œผ๋กœ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

SASS ๋˜๋Š” ๋‹ค๋ฅธ ๋” ๋‚˜์€ ์Šคํƒ€์ผ๋ง ์†”๋ฃจ์…˜์ด v4์— ๋Œ€ํ•ด ๊ณ ๋ ค๋˜๊ณ  ์žˆ๋Š”์ง€์— ๋Œ€ํ•ด ๋” ์ ๊ฒŒ ๋“œ๋กญํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

์•ˆ๋…•, @murbanowicz, ๊ฐ์‚ฌ ์˜๊ฒฌ์„ ๋‚จ๊ฒจ์ฃผ, ๋‚ด๊ฐ€ ์‚ฌ์šฉ์— ๋Œ€ํ•œ ๋ฌธ์ œ๊ฐ€ ๋– ๋‚  JSS ๋Œ€์‹  Less ์—ฌ๊ธฐ๋ฅผ,์ด ์ด๋™ํ•˜์ง€๋งŒ ํ•˜๋‚˜์˜ ์‡ผ ์กฐ์น˜์— ๋Œ€ํ•œ ๋‚ด ์ค€๋น„ ์ƒํƒœ๋ฅผ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š” @zombieJ , Ant Design์— ๋Œ€ํ•œ ํ›Œ๋ฅญํ•œ ์ž‘์—…์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์—์„œ ์–ด๋‘์šด ํ…Œ๋งˆ๋ฅผ ์ „ํ™˜ํ•˜๋Š” ์ฆ‰์‹œ ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณต ํ•  ๊ณ„ํš์ด ์žˆ์Šต๋‹ˆ๊นŒ?

์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์ œ์•ˆ :
์ƒˆ๋กœ์šด 4.0 ๋ฒ„์ „์—์„œ ์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋” ์นœ์ˆ™ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ๋˜์–ด ๋งค์šฐ ๊ธฐ์ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ์˜ˆ์ œ๋ฅผ ๋ณด์•˜์Šต๋‹ˆ๋‹ค. Form ๊ตฌ์„ฑ ์š”์†Œ ์•„๋ž˜์˜ Form.Item ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋” ์ด์ƒ getFieldDecorator๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋งค์šฐ ์ข‹์€ ๊ฐœ์„ ์ด์ง€๋งŒ ์ข€ ๋” ๊ธ‰์ง„์  ์ธ ์ œ์•ˆ์ด ์žˆ์Šต๋‹ˆ๋‹ค. Form.Item ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ์ฝ”๋“œ ์ž‘์„ฑ ํ™˜๊ฒฝ์„ ๋”์šฑ ์ตœ์ ํ™”ํ•˜๊ณ  ์ฝ”๋”ฉ์„ ๋” ์ƒˆ๋กœ ๊ณ ์นฉ๋‹ˆ๋‹ค. Form.Item ๊ตฌ์„ฑ ์š”์†Œ์˜ ์›๋ž˜ ๊ธฐ๋Šฅ์€ ํŠน์ • ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ (์˜ˆ : Input, DataPick ๋“ฑ)๋กœ ์ง์ ‘ ์ „์†ก๋ฉ๋‹ˆ๋‹ค.
์ด๋Š” ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ๊ฐœ๋ฐœ ๋œ ์–‘์‹์ด antd์˜ ๋‚ด์žฅ ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ํ–ฅ์ƒ์‹œ์ผœ Form.Item ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ์ˆ˜์žˆ๋Š” ์กฐ๊ฑด์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ์„ ๊ณ ๋ คํ•˜๊ธฐ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ช‡ ๊ฐ€์ง€ ํŠน์ˆ˜ํ•œ ๊ฒฝ์šฐ (์˜ˆ : ์‚ฌ์šฉ์ž ์ž์ฒด ์ •์˜ ๊ตฌ์„ฑ ์š”์†Œ, ํŠน์ • ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋Š” Form์— ๋ฐ”์ธ๋”ฉ๋˜์ง€ ์•Š์Œ) ์ง€์นจ์— ๋Œ€ํ•œ ํŠน์ˆ˜ ํŒจํ‚ค์ง• ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
antd์— ๋Œ€ํ•œ ์—ฐ๊ตฌ๋Š” ๊นŠ์ง€ ์•Š๊ณ  ์ผ๋ฐ˜ ์‚ฌ์šฉ์ž์˜ ์ž…์žฅ์—์„œ๋งŒ ํ˜ธ์†Œ ์ œ์•ˆ์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์ œ์•ˆ :
์ƒˆ๋กœ์šด 4.0 ๋ฒ„์ „์—์„œ ์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋” ์นœ์ˆ™ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ๋˜์–ด ๋งค์šฐ ๊ธฐ์ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ์˜ˆ์ œ๋ฅผ ๋ณด์•˜์Šต๋‹ˆ๋‹ค. Form ๊ตฌ์„ฑ ์š”์†Œ ์•„๋ž˜์˜ Form.Item ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋” ์ด์ƒ getFieldDecorator๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋งค์šฐ ์ข‹์€ ๊ฐœ์„ ์ด์ง€๋งŒ ์ข€ ๋” ๊ธ‰์ง„์  ์ธ ์ œ์•ˆ์ด ์žˆ์Šต๋‹ˆ๋‹ค. Form.Item ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ์ฝ”๋“œ ์ž‘์„ฑ ํ™˜๊ฒฝ์„ ๋”์šฑ ์ตœ์ ํ™”ํ•˜๊ณ  ์ฝ”๋”ฉ์„ ๋” ์ƒˆ๋กœ ๊ณ ์นฉ๋‹ˆ๋‹ค. Form.Item ๊ตฌ์„ฑ ์š”์†Œ์˜ ์›๋ž˜ ๊ธฐ๋Šฅ์€ ํŠน์ • ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ (์˜ˆ : Input, DataPick ๋“ฑ)๋กœ ์ง์ ‘ ์ „์†ก๋ฉ๋‹ˆ๋‹ค.
์ด๋Š” ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ๊ฐœ๋ฐœ ๋œ ์–‘์‹์ด antd์˜ ๋‚ด์žฅ ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ํ–ฅ์ƒ์‹œ์ผœ Form.Item ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ์ˆ˜์žˆ๋Š” ์กฐ๊ฑด์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ์„ ๊ณ ๋ คํ•˜๊ธฐ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ช‡ ๊ฐ€์ง€ ํŠน์ˆ˜ํ•œ ๊ฒฝ์šฐ (์˜ˆ : ์‚ฌ์šฉ์ž ์ž์ฒด ์ •์˜ ๊ตฌ์„ฑ ์š”์†Œ, ํŠน์ • ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋Š” Form์— ๋ฐ”์ธ๋”ฉ๋˜์ง€ ์•Š์Œ) ์ง€์นจ์— ๋Œ€ํ•œ ํŠน์ˆ˜ ํŒจํ‚ค์ง• ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
antd์— ๋Œ€ํ•œ ์—ฐ๊ตฌ๋Š” ๊นŠ์ง€ ์•Š๊ณ  ์ผ๋ฐ˜ ์‚ฌ์šฉ์ž์˜ ์ž…์žฅ์—์„œ๋งŒ ํ˜ธ์†Œ ์ œ์•ˆ์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

@shengliangli ๋Š” ์ปคํ”Œ ๋ง์ด ๋„ˆ๋ฌด ๊ฐ•ํ•˜๋‹ค๊ณ  ๋Š๋‚๋‹ˆ๋‹ค. . .

์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์ œ์•ˆ :
์ƒˆ๋กœ์šด 4.0 ๋ฒ„์ „์—์„œ ์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋” ์นœ์ˆ™ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ๋˜์–ด ๋งค์šฐ ๊ธฐ์ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ์˜ˆ์ œ๋ฅผ ๋ณด์•˜์Šต๋‹ˆ๋‹ค. Form ๊ตฌ์„ฑ ์š”์†Œ ์•„๋ž˜์˜ Form.Item ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋” ์ด์ƒ getFieldDecorator๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋งค์šฐ ์ข‹์€ ๊ฐœ์„ ์ด์ง€๋งŒ ์ข€ ๋” ๊ธ‰์ง„์  ์ธ ์ œ์•ˆ์ด ์žˆ์Šต๋‹ˆ๋‹ค. Form.Item ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ์ฝ”๋“œ ์ž‘์„ฑ ํ™˜๊ฒฝ์„ ๋”์šฑ ์ตœ์ ํ™”ํ•˜๊ณ  ์ฝ”๋”ฉ์„ ๋” ์ƒˆ๋กœ ๊ณ ์นฉ๋‹ˆ๋‹ค. Form.Item ๊ตฌ์„ฑ ์š”์†Œ์˜ ์›๋ž˜ ๊ธฐ๋Šฅ์€ ํŠน์ • ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ (์˜ˆ : Input, DataPick ๋“ฑ)๋กœ ์ง์ ‘ ์ „์†ก๋ฉ๋‹ˆ๋‹ค.
์ด๋Š” ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ๊ฐœ๋ฐœ ๋œ ์–‘์‹์ด antd์˜ ๋‚ด์žฅ ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ํ–ฅ์ƒ์‹œ์ผœ Form.Item ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ์ˆ˜์žˆ๋Š” ์กฐ๊ฑด์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ์„ ๊ณ ๋ คํ•˜๊ธฐ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ช‡ ๊ฐ€์ง€ ํŠน์ˆ˜ํ•œ ๊ฒฝ์šฐ (์˜ˆ : ์‚ฌ์šฉ์ž ์ž์ฒด ์ •์˜ ๊ตฌ์„ฑ ์š”์†Œ, ํŠน์ • ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋Š” Form์— ๋ฐ”์ธ๋”ฉ๋˜์ง€ ์•Š์Œ) ์ง€์นจ์— ๋Œ€ํ•œ ํŠน์ˆ˜ ํŒจํ‚ค์ง• ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
antd์— ๋Œ€ํ•œ ์—ฐ๊ตฌ๋Š” ๊นŠ์ง€ ์•Š๊ณ  ์ผ๋ฐ˜ ์‚ฌ์šฉ์ž์˜ ์ž…์žฅ์—์„œ๋งŒ ํ˜ธ์†Œ ์ œ์•ˆ์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

@shengliangli ๋Š” ์ปคํ”Œ ๋ง์ด ๋„ˆ๋ฌด ๊ฐ•ํ•˜๋‹ค๊ณ  ๋Š๋‚๋‹ˆ๋‹ค. . .

Form.Item์€ Form ์ปดํฌ๋„ŒํŠธ์˜ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด antd์— ์˜ํ•ด ์ถ”๊ฐ€ ๋œ "์ถ”๊ฐ€"์ปดํฌ๋„ŒํŠธ๋ผ๊ณ  ์ƒ๊ฐํ•˜๋Š”๋ฐ,์ด ๊ตฌํ˜„์—๋Š” ์ด์œ ๊ฐ€ ์žˆ์ง€๋งŒ ๊ฒฐ๊ตญ ์ถ”๊ฐ€๋˜๋Š” ๊ฒƒ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ์‚ฌ๋žŒ๋“ค์ด redux์—์„œ ๋„ˆ๋ฌด ๋งŽ์€ ๋ชจ๋“ˆ ์ฝ”๋“œ์˜ ๋ฌธ์ œ๋ฅผ ๋น„ํŒํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๊ฐœ๋ฐœ์ž๋Š” ์ด๋Ÿฌํ•œ ์ž‘์„ฑ ๋ฐฉ์‹์„ ์ข‹์•„ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. form.item์— ์˜ํ•ด ๊ตฌํ˜„ ๋œ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ ๊ธฐ๋Šฅ์„ Input๊ณผ ๊ฐ™์€ ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ์˜ ํŠน์„ฑ์œผ๋กœ ์ดํ•ดํ•˜์—ฌ ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค๋ฉด ๋” ์ž์—ฐ ์Šค๋Ÿฝ์Šต๋‹ˆ๊นŒ?

๋˜ํ•œ ์ปคํ”Œ ๋ง ๋ฌธ์ œ์— ๋Œ€ํ•ด์„œ๋„ ์ƒ๊ฐํ–ˆ๋Š”๋ฐ ๋ฌธ์ œ์˜ ๊ทผ์›์€ ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ๊ณผ ๋™์ž‘ ํŠน์„ฑ์„ ์ •์˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์—์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์ œ์•ˆ :
์ƒˆ๋กœ์šด 4.0 ๋ฒ„์ „์—์„œ ์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋” ์นœ์ˆ™ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ๋˜์–ด ๋งค์šฐ ๊ธฐ์ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ์˜ˆ์ œ๋ฅผ ๋ณด์•˜์Šต๋‹ˆ๋‹ค. Form ๊ตฌ์„ฑ ์š”์†Œ ์•„๋ž˜์˜ Form.Item ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋” ์ด์ƒ getFieldDecorator๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋งค์šฐ ์ข‹์€ ๊ฐœ์„ ์ด์ง€๋งŒ ์ข€ ๋” ๊ธ‰์ง„์  ์ธ ์ œ์•ˆ์ด ์žˆ์Šต๋‹ˆ๋‹ค. Form.Item ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ์ฝ”๋“œ ์ž‘์„ฑ ํ™˜๊ฒฝ์„ ๋”์šฑ ์ตœ์ ํ™”ํ•˜๊ณ  ์ฝ”๋”ฉ์„ ๋” ์ƒˆ๋กœ ๊ณ ์นฉ๋‹ˆ๋‹ค. Form.Item ๊ตฌ์„ฑ ์š”์†Œ์˜ ์›๋ž˜ ๊ธฐ๋Šฅ์€ ํŠน์ • ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ (์˜ˆ : Input, DataPick ๋“ฑ)๋กœ ์ง์ ‘ ์ „์†ก๋ฉ๋‹ˆ๋‹ค.
์ด๋Š” ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ๊ฐœ๋ฐœ ๋œ ์–‘์‹์ด antd์˜ ๋‚ด์žฅ ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ํ–ฅ์ƒ์‹œ์ผœ Form.Item ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ์ˆ˜์žˆ๋Š” ์กฐ๊ฑด์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ์„ ๊ณ ๋ คํ•˜๊ธฐ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ช‡ ๊ฐ€์ง€ ํŠน์ˆ˜ํ•œ ๊ฒฝ์šฐ (์˜ˆ : ์‚ฌ์šฉ์ž ์ž์ฒด ์ •์˜ ๊ตฌ์„ฑ ์š”์†Œ, ํŠน์ • ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋Š” Form์— ๋ฐ”์ธ๋”ฉ๋˜์ง€ ์•Š์Œ) ์ง€์นจ์— ๋Œ€ํ•œ ํŠน์ˆ˜ ํŒจํ‚ค์ง• ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
antd์— ๋Œ€ํ•œ ์—ฐ๊ตฌ๋Š” ๊นŠ์ง€ ์•Š๊ณ  ์ผ๋ฐ˜ ์‚ฌ์šฉ์ž์˜ ์ž…์žฅ์—์„œ๋งŒ ํ˜ธ์†Œ ์ œ์•ˆ์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

@shengliangli ๋Š” ์ปคํ”Œ ๋ง์ด ๋„ˆ๋ฌด ๊ฐ•ํ•˜๋‹ค๊ณ  ๋Š๋‚๋‹ˆ๋‹ค. . .

Form.Item์€ Form ์ปดํฌ๋„ŒํŠธ์˜ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด antd์— ์˜ํ•ด ์ถ”๊ฐ€ ๋œ "์ถ”๊ฐ€"์ปดํฌ๋„ŒํŠธ๋ผ๊ณ  ์ƒ๊ฐํ•˜๋Š”๋ฐ,์ด ๊ตฌํ˜„์—๋Š” ์ด์œ ๊ฐ€ ์žˆ์ง€๋งŒ ๊ฒฐ๊ตญ ์ถ”๊ฐ€๋˜๋Š” ๊ฒƒ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ์‚ฌ๋žŒ๋“ค์ด redux์—์„œ ๋„ˆ๋ฌด ๋งŽ์€ ๋ชจ๋“ˆ ์ฝ”๋“œ์˜ ๋ฌธ์ œ๋ฅผ ๋น„ํŒํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๊ฐœ๋ฐœ์ž๋Š” ์ด๋Ÿฌํ•œ ์ž‘์„ฑ ๋ฐฉ์‹์„ ์ข‹์•„ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. form.item์— ์˜ํ•ด ๊ตฌํ˜„ ๋œ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ ๊ธฐ๋Šฅ์„ Input๊ณผ ๊ฐ™์€ ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ์˜ ํŠน์„ฑ์œผ๋กœ ์ดํ•ดํ•˜์—ฌ ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค๋ฉด ๋” ์ž์—ฐ ์Šค๋Ÿฝ์Šต๋‹ˆ๊นŒ?

๋˜ํ•œ ์ปคํ”Œ ๋ง ๋ฌธ์ œ์— ๋Œ€ํ•ด์„œ๋„ ์ƒ๊ฐํ–ˆ๋Š”๋ฐ ๋ฌธ์ œ์˜ ๊ทผ์›์€ ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ๊ณผ ๋™์ž‘ ํŠน์„ฑ์„ ์ •์˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์—์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํŠน๋ณ„ํžˆ ๋™์˜ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Form.Item์€ ์ฃผ๋กœ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์ธ๋ผ์ธ์— ์ ํ•ฉํ•˜์ง€ ์•Š์€ ๋ ˆ์ด๋ธ” ๋ฐ ์—ด๊ณผ ๊ฐ™์€ ์†์„ฑ๊ณผ ๊ฐ™์€ ๊ตฌ์„ฑ ์š”์†Œ์˜ ์™ธ๋ถ€ ํŒจํ‚ค์ง€๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š” @zombieJ
๋ฒ„์ „ 4๊ฐ€ ์–ธ์ œ ์ถœ์‹œ๋˜๋Š”์ง€ ์•Œ๊ณ  ์‹ถ์œผ์‹ญ๋‹ˆ๊นŒ?
๋‹ต๋ณ€์„ ๊ธฐ๋‹ค๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

๋””์ž์ธ์— ์–ด๋–ป๊ฒŒ ๊ธฐ์—ฌํ•ฉ๋‹ˆ๊นŒ?
๋ˆ„๊ตฐ๊ฐ€์˜ ์˜๊ฒฌ์„ ๋“ฃ๊ณ 

beta.0 ๋ฒ„์ „์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์˜๋ฏธ์ž…๋‹ˆ๊นŒ?

์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์ œ์•ˆ :
์ƒˆ๋กœ์šด 4.0 ๋ฒ„์ „์—์„œ ์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋” ์นœ์ˆ™ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ๋˜์–ด ๋งค์šฐ ๊ธฐ์ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ์˜ˆ์ œ๋ฅผ ๋ณด์•˜์Šต๋‹ˆ๋‹ค. Form ๊ตฌ์„ฑ ์š”์†Œ ์•„๋ž˜์˜ Form.Item ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋” ์ด์ƒ getFieldDecorator๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋งค์šฐ ์ข‹์€ ๊ฐœ์„ ์ด์ง€๋งŒ ์ข€ ๋” ๊ธ‰์ง„์  ์ธ ์ œ์•ˆ์ด ์žˆ์Šต๋‹ˆ๋‹ค. Form.Item ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ์ฝ”๋“œ ์ž‘์„ฑ ํ™˜๊ฒฝ์„ ๋”์šฑ ์ตœ์ ํ™”ํ•˜๊ณ  ์ฝ”๋”ฉ์„ ๋” ์ƒˆ๋กœ ๊ณ ์นฉ๋‹ˆ๋‹ค. Form.Item ๊ตฌ์„ฑ ์š”์†Œ์˜ ์›๋ž˜ ๊ธฐ๋Šฅ์€ ํŠน์ • ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ (์˜ˆ : Input, DataPick ๋“ฑ)๋กœ ์ง์ ‘ ์ „์†ก๋ฉ๋‹ˆ๋‹ค.
์ด๋Š” ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ๊ฐœ๋ฐœ ๋œ ์–‘์‹์ด antd์˜ ๋‚ด์žฅ ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ํ–ฅ์ƒ์‹œ์ผœ Form.Item ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ์ˆ˜์žˆ๋Š” ์กฐ๊ฑด์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ์„ ๊ณ ๋ คํ•˜๊ธฐ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ช‡ ๊ฐ€์ง€ ํŠน์ˆ˜ํ•œ ๊ฒฝ์šฐ (์˜ˆ : ์‚ฌ์šฉ์ž ์ž์ฒด ์ •์˜ ๊ตฌ์„ฑ ์š”์†Œ, ํŠน์ • ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋Š” Form์— ๋ฐ”์ธ๋”ฉ๋˜์ง€ ์•Š์Œ) ์ง€์นจ์— ๋Œ€ํ•œ ํŠน์ˆ˜ ํŒจํ‚ค์ง• ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
antd์— ๋Œ€ํ•œ ์—ฐ๊ตฌ๋Š” ๊นŠ์ง€ ์•Š๊ณ  ์ผ๋ฐ˜ ์‚ฌ์šฉ์ž์˜ ์ž…์žฅ์—์„œ๋งŒ ํ˜ธ์†Œ ์ œ์•ˆ์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์šฐ์„  ๋‚ด์žฅ ์—ฌ๋ถ€์™€๋Š” ๋ฌด๊ด€ํ•˜๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ์•„์•ผํ•ฉ๋‹ˆ๋‹ค. ์†Œ์œ„ ๋‚ด์žฅ ๋ถ€ํ’ˆ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ์‚ฌ๊ณ ๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
getFieldDecorator ๋Š” ์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ์™€ ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์—ฐ๊ฒฐํ•˜๋Š” ๋ธŒ๋ฆฌ์ง€์ž…๋‹ˆ๋‹ค. Form.item์€ value ๋ฐ onChange ๋‘ ์†์„ฑ์œผ๋กœ ์ „๋‹ฌ ๋œ ๋‹ค์Œ ๋ž˜ํ•‘ ๋œ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ value ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค onChange ์ด ๋‘ ์ธํ„ฐํŽ˜์ด์Šค ๋ฉ”์„œ๋“œ๋Š” ์™ธ๋ถ€ ์„ธ๊ณ„์™€ ์ƒํ˜ธ ์ž‘์šฉํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, value ๋ฐ onChange ๊ฐ€ ๊ตฌํ˜„๋˜๋Š” ํ•œ ๋ชจ๋“  ๊ตฌ์„ฑ ์š”์†Œ๋Š” getFieldDecorator ์˜ ๋งค๊ฐœ ๋ณ€์ˆ˜๊ฐ€ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.์ด๊ฒƒ์€ program to interface ์˜ ์ผ๋ฐ˜์ ์ธ ์•„์ด๋””์–ด์ž…๋‹ˆ๋‹ค.

์ถ”์‹  : ๋‚˜๋Š” ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์ฝ์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์œ„์˜ ๋ชจ๋“  ๊ฒƒ์€ ๋ฌธ์„œ๋ฅผ ์ฝ์€ ํ›„ ๋‚ด ์ถ”์ธก์ž…๋‹ˆ๋‹ค.

Form.Item ์ด ๊ธฐ๋ณธ Component ์™€ ์ƒํ˜ธ ์ž‘์šฉํ•  ์ˆ˜์žˆ๋Š” ์ด์œ ๋Š” ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ์˜ˆ์ƒํ•˜๋Š” '๋นŒ๋“œ ์ธ'๋ฉ”์ปค๋‹ˆ์ฆ˜๊ณผ๋Š” ์•„๋ฌด ๊ด€๋ จ์ด ์—†์Šต๋‹ˆ๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์„ธ๊ณ„์—์„œ program to interface ๋ผ๋Š” ์ผ๋ฐ˜์ ์ธ ์†์ž„์ˆ˜์ž…๋‹ˆ๋‹ค.

๊ธฐ๋ณธ์ ์œผ๋กœ Form ๊ตฌ์„ฑ ์š”์†Œ์™€ ๊ธฐ๋ณธ ๊ตฌ์„ฑ ์š”์†Œ๋Š” value ๋ฐ onChange ๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋“ค์€ ์˜์‚ฌ ์†Œํ†ต์„ ์œ„ํ•ด ๋‘ ์„ธ๊ณ„ ์‚ฌ์ด์˜ ์ธํ„ฐํŽ˜์ด์Šค ์—ญํ• ์„ํ•ฉ๋‹ˆ๋‹ค. ๋””์ปคํ”Œ๋ง์„ ๋ชฉ์ ์œผ๋กœํ•˜๋Š” ์ข‹์€ ๋””์ž์ธ์ž…๋‹ˆ๋‹ค.

@dancerphil ์•„๋งˆ๋„ ๊ณต์‹ ๋ฌธ์„œ์—์„œ ์•„์ด๋””์–ด๋ฅผ ๋” ๋ช…ํ™•ํ•˜๊ฒŒ ์„ค๋ช… ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”. v4 ๋ฒ ํƒ€๊ฐ€ ์ถœ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. API๋Š” ์ด์ œ ์•ˆ์ •์ ์ด๋ฏ€๋กœ ์ค‘์š”ํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š” ํ•œ API์— ํฐ ๋ณ€ํ™”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๋ฒ ํƒ€ ๋ฒ„์ „ ๋™์•ˆ ๋””์ž์ด๋„ˆ๋Š” UI ์‹œ๊ฐ์  ๋””์ž์ธ ์กฐ์ •์„ ๊ณ„์†ํ•  ๊ฒƒ์ด๋ฉฐ ๋ฒ„๊ทธ ์ˆ˜์ •์— ์ง‘์ค‘ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ถ€๋‹ด์—†์ด ์‚ฌ์šฉํ•ด๋ณด์„ธ์š”. ๋ถˆ ๋ฒŒ๋ ˆ๋ฅผ ๋•๊ฑฐ๋‚˜ ํ”ผ๋“œ๋ฐฑ์„์ฃผ์„ธ์š”.

์ฝ”๋”ฉ๊ณผ ์‹œ๋„์— ์ฐธ์—ฌ ํ•ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์˜ ๋„์›€์€ ๋งŽ์€ ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค :)


์•ˆ๋…•ํ•˜์„ธ์š” ์—ฌ๋Ÿฌ๋ถ„, ๋ฒ ํƒ€ ๋ฒ„์ „์ด ์ถœ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. API์— ์ฃผ์š” ๋””์ž์ธ ๋ฌธ์ œ๊ฐ€์—†๋Š” ๊ฒฝ์šฐ ๋” ์ด์ƒ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ฒ ํƒ€ ๋ฒ„์ „์—์„œ๋Š” ๋””์ž์ด๋„ˆ๊ฐ€ v4์˜ UI ์Šคํƒ€์ผ ์กฐ์ •์„ ์ง€์›ํ•˜๊ณ  ๋ฒ„๊ทธ ์ˆ˜์ •์— ์ค‘์ ์„ ๋‘˜ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ฒ„๊ทธ๋ฅผ ์ฐพ๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ํ”ผ๋“œ๋ฐฑ์ด์žˆ๋Š” ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ ๋ฐ ์‹œ๋ฒ” ์ž‘์—…์— ์ฐธ์—ฌํ•ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๊ท€ํ•˜์˜ ๋„์›€์€ ๋งค์šฐ ์˜๋ฏธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.)


์ฐธ์กฐ : http://new-issue.ant.design/

๋””์ž์ธ์— ์–ด๋–ป๊ฒŒ ๊ธฐ์—ฌํ•ฉ๋‹ˆ๊นŒ?
๋ˆ„๊ตฐ๊ฐ€์˜ ์˜๊ฒฌ์„ ๋“ฃ๊ณ 

@ ekeminimarkk001 ์•„๋งˆ๋„ ์ฐธ์กฐ : https://ant.design/docs/react/contributing

@zombieJ ๋ฌธ์ œ ์— ๋‚˜์—ด๋œ ๋ชจ๋“  ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ๋ฒ ํƒ€ ๋ฒ„์ „์—์„œ ๊ตฌํ˜„ ๋˜์—ˆ์Šต๋‹ˆ๊นŒ?

์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์ œ์•ˆ :
์ƒˆ๋กœ์šด 4.0 ๋ฒ„์ „์—์„œ ์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋” ์นœ์ˆ™ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ๋˜์–ด ๋งค์šฐ ๊ธฐ์ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ์˜ˆ์ œ๋ฅผ ๋ณด์•˜์Šต๋‹ˆ๋‹ค. Form ๊ตฌ์„ฑ ์š”์†Œ ์•„๋ž˜์˜ Form.Item ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋” ์ด์ƒ getFieldDecorator๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋งค์šฐ ์ข‹์€ ๊ฐœ์„ ์ด์ง€๋งŒ ์ข€ ๋” ๊ธ‰์ง„์  ์ธ ์ œ์•ˆ์ด ์žˆ์Šต๋‹ˆ๋‹ค. Form.Item ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ์ฝ”๋“œ ์ž‘์„ฑ ํ™˜๊ฒฝ์„ ๋”์šฑ ์ตœ์ ํ™”ํ•˜๊ณ  ์ฝ”๋”ฉ์„ ๋” ์ƒˆ๋กœ ๊ณ ์นฉ๋‹ˆ๋‹ค. Form.Item ๊ตฌ์„ฑ ์š”์†Œ์˜ ์›๋ž˜ ๊ธฐ๋Šฅ์€ ํŠน์ • ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ (์˜ˆ : Input, DataPick ๋“ฑ)๋กœ ์ง์ ‘ ์ „์†ก๋ฉ๋‹ˆ๋‹ค.
์ด๋Š” ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ๊ฐœ๋ฐœ ๋œ ์–‘์‹์ด antd์˜ ๋‚ด์žฅ ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ํ–ฅ์ƒ์‹œ์ผœ Form.Item ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ์ˆ˜์žˆ๋Š” ์กฐ๊ฑด์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ์„ ๊ณ ๋ คํ•˜๊ธฐ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ช‡ ๊ฐ€์ง€ ํŠน์ˆ˜ํ•œ ๊ฒฝ์šฐ (์˜ˆ : ์‚ฌ์šฉ์ž ์ž์ฒด ์ •์˜ ๊ตฌ์„ฑ ์š”์†Œ, ํŠน์ • ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋Š” Form์— ๋ฐ”์ธ๋”ฉ๋˜์ง€ ์•Š์Œ) ์ง€์นจ์— ๋Œ€ํ•œ ํŠน์ˆ˜ ํŒจํ‚ค์ง• ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
antd์— ๋Œ€ํ•œ ์—ฐ๊ตฌ๋Š” ๊นŠ์ง€ ์•Š๊ณ  ์ผ๋ฐ˜ ์‚ฌ์šฉ์ž์˜ ์ž…์žฅ์—์„œ๋งŒ ํ˜ธ์†Œ ์ œ์•ˆ์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์šฐ์„  ๋‚ด์žฅ ์—ฌ๋ถ€์™€๋Š” ๋ฌด๊ด€ํ•˜๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ์•„์•ผํ•ฉ๋‹ˆ๋‹ค. ์†Œ์œ„ ๋‚ด์žฅ ๋ถ€ํ’ˆ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ์‚ฌ๊ณ ๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
getFieldDecorator ๋Š” ์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ์™€ ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์—ฐ๊ฒฐํ•˜๋Š” ๋ธŒ๋ฆฌ์ง€์ž…๋‹ˆ๋‹ค. Form.item์€ value ๋ฐ onChange ๋‘ ์†์„ฑ์œผ๋กœ ์ „๋‹ฌ ๋œ ๋‹ค์Œ ๋ž˜ํ•‘ ๋œ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ value ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค onChange ์ด ๋‘ ์ธํ„ฐํŽ˜์ด์Šค ๋ฉ”์„œ๋“œ๋Š” ์™ธ๋ถ€ ์„ธ๊ณ„์™€ ์ƒํ˜ธ ์ž‘์šฉํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, value ๋ฐ onChange ๊ฐ€ ๊ตฌํ˜„๋˜๋Š” ํ•œ ๋ชจ๋“  ๊ตฌ์„ฑ ์š”์†Œ๋Š” getFieldDecorator ์˜ ๋งค๊ฐœ ๋ณ€์ˆ˜๊ฐ€ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.์ด๊ฒƒ์€ program to interface ์˜ ์ผ๋ฐ˜์ ์ธ ์•„์ด๋””์–ด์ž…๋‹ˆ๋‹ค.

์ถ”์‹  : ๋‚˜๋Š” ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์ฝ์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์œ„์˜ ๋ชจ๋“  ๊ฒƒ์€ ๋ฌธ์„œ๋ฅผ ์ฝ์€ ํ›„ ๋‚ด ์ถ”์ธก์ž…๋‹ˆ๋‹ค.

๋‹ต์žฅ์„ ์ฝ์€ ํ›„ antd์˜ ํผ ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•œ ์ œ ์ œ์•ˆ์€ ๋„ˆ๋ฌด ์„ฑ์ˆ™ํ•˜์ง€ ์•Š๋‹ค๊ณ  ๋งํ•ด์•ผํ•˜๋Š”๋ฐ, ๋ฐ˜๋ฉด์—์ด ์ œ์•ˆ์„ ๋งŒ๋“œ๋Š” ๊ฒƒ์€ ์ผ๋ฐ˜ ์‚ฌ์šฉ์ž์˜ ๊ด€์ ์—์„œ ๋ฌธ์ œ์— ๋Œ€ํ•ด ์™„์ „ํžˆ ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์‚ฌ์šฉ ๊ฐ•๋„๊ฐ€ ๋†’์€ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ฒฝ์šฐ ๊ฐœ๋ฐœ ๋ฐ ์‚ฌ์šฉ์ด ๋” ํŽธ๋ฆฌํ•˜๊ณ  ์ฝ”๋“œ๋ฅผ ์ ๊ฒŒ ์ž‘์„ฑํ•˜๊ณ  ๋” ๋ช…ํ™•ํ•˜๊ณ  ์ž์—ฐ์Šค๋Ÿฌ์šด ํ‘œํ˜„์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด antd์— ๋Œ€ํ•œ ์—ด๋ ฌํ•œ ๊ธฐ๋Œ€์ž…๋‹ˆ๋‹ค.

์‚ฌ์šฉ์ž์˜ ๊ด€์ ์—์„œ ๋ณด๋ฉด antd๋Š” ์ด๋ฏธ ๋งค์šฐ ํ›Œ๋ฅญํ•˜๋ฉฐ ๋Œ€๋ถ€๋ถ„์˜ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ์‚ฌ์šฉํ•˜์ž๋งˆ์ž ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ  ๋‹ค ์‚ฌ์šฉํ•˜๋ฉด ์žŠ์–ด ๋ฒ„๋ฆฝ๋‹ˆ๋‹ค. ์ด ํšจ๊ณผ๋ฅผ ๋‹ฌ์„ฑํ•˜๋Š” ์ด์œ ๋Š” ์ข‹์€ API ๋””์ž์ธ ๋ฐ ๊ตฌ์„ฑ ์š”์†Œ์˜ ํŒจํ‚ค์ง•๊ณผ ๋ถ„๋ฆฌ ํ•  ์ˆ˜ โ€‹โ€‹์—†์ง€๋งŒ ์ผ๋ถ€ ๊ตฌ์„ฑ ์š”์†Œ (์˜ˆ : from, table)์— ๋Œ€ํ•œ ์‚ฌ์šฉ ์‹œ๋‚˜๋ฆฌ์˜ค๊ฐ€ ์žˆ์œผ๋ฉฐ ๋” ๋‚˜์€ ๊ฐœ์„ ์˜ ์—ฌ์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

Antd๋Š” ํ”„๋กœ์ ํŠธ์˜ ๋„๊ตฌ ๊ตฌ์„ฑ ์š”์†Œ ์ผ๋ฟ์ž…๋‹ˆ๋‹ค. ์ž์ฒด ๊ตฌํ˜„ ๋ฉ”์ปค๋‹ˆ์ฆ˜์„ ๋…ธ์ถœํ•˜๊ฑฐ๋‚˜ ์™ธ๋ถ€ API์—์„œ ๊ตฌํ˜„ ๋ฉ”์ปค๋‹ˆ์ฆ˜์„ ๊ต๋ฌ˜ํ•˜๊ฒŒ ์ˆจ๊ธฐ๊ณ  ๋™ํ™”ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ์ข‹์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๋Š”์ด ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋ฅผ ์›ํ•˜๊ณ  ๊ฐ€์žฅ ํŽธ๋ฆฌํ•˜๊ณ  ์ž์—ฐ์Šค๋Ÿฌ์šด ํ˜•ํƒœ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ๋ฅผ ์›ํ•˜๋ฉฐ ๋„๊ตฌ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์ „๋ฌธ๊ฐ€๊ฐ€๋˜๊ธฐ๋ฅผ ์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

ํผ ์ปดํฌ๋„ŒํŠธ๋กœ ๋Œ์•„๊ฐ€์„œ, ํ˜„์žฌ 3.x api์—์„œ ๋‚˜๋Š” ์‹ค์ œ๋กœ Ali์˜ uform์„ ๋” ๊ธฐ๊บผ์ด ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค .antd ํผ์— ๋น„ํ•ด uform์€ ๋” ์ ์€ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์•ผํ•˜๊ณ  ๋” ์ƒ์‚ฐ์ ์ž…๋‹ˆ๋‹ค. ๋ฌผ๋ก  uform์€ antd์˜ ํ˜•์‹๊ณผ๋Š” ๋งค์šฐ ๋‹ค๋ฅด๋ฉฐ ์ฐธ์กฐ ํ•  ๊ฐ€์น˜๊ฐ€ ๋งŽ์ง€ ์•Š์€ ์„ ์–ธ์  ์ž‘์„ฑ ๋ฐฉ์‹๊ณผ ๋น„์Šทํ•ฉ๋‹ˆ๋‹ค.

๊ฐœ๋ฏธ ํŒŒํ‹ฐ๋กœ์„œ ๋„ˆ๋ฌด ๋งŽ์€ ์š”๊ตฌ ์‚ฌํ•ญ์„ ๋ฌป๋Š” ๊ฒƒ์ด ์กฐ๊ธˆ ๋‹นํ™ฉ ์Šค๋Ÿฝ์ง€๋งŒ ์‚ฌ๋ž‘์œผ๋กœ ์ธํ•ด ๋” ์ข‹๊ธฐ๋ฅผ ๋ฐ”๋ผ๋ฉฐ ํ”„๋กœ์ ํŠธ ํŒ€์ด ์ดํ•ดํ•˜๊ธฐ๋ฅผ ๋ฐ”๋ผ๋ฉฐ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ฐœ๋ฐœ ๋ฐ ์‚ฌ์šฉ ๊ฒฝํ—˜์„ ๋”์šฑ ์ตœ์ ํ™”ํ•˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ์ ์ ˆํ•œ ๋ฒ„์ „์—์„œ.

์ด์ƒ ํ•ด์š”. ๋‚˜๋Š” Icon์„ ์ „ํ˜€ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜์ง€๋งŒ ๋ชจ๋“  icons-svg๋ฅผ ํŒจํ‚ค์ง€ํ–ˆ์Šต๋‹ˆ๋‹ค.
webpack-bundle-analyzer.png
๋ฒ„์ „ ๋ฒˆํ˜ธ : 4.0.0-beta.0. Babel-plugin-import ๋ฐ tree-shaking์ด ์‚ฌ์šฉ๋˜์ง€๋งŒ ์“ธ๋ชจ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

์ด์ƒ ํ•ด์š”. ๋‚˜๋Š” Icon์„ ์ „ํ˜€ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜์ง€๋งŒ ๋ชจ๋“  icons-svg๋ฅผ ํŒจํ‚ค์ง€ํ–ˆ์Šต๋‹ˆ๋‹ค.
webpack-bundle-analyzer.png
๋ฒ„์ „ ๋ฒˆํ˜ธ : 4.0.0-beta.0. Babel-plugin-import ๋ฐ tree-shaking์ด ์‚ฌ์šฉ๋˜์ง€๋งŒ ์“ธ๋ชจ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

์ด ๊ตฌ์„ฑ ์‚ฌ์šฉ

{
                    test: /\.js?$/,
                    include: [/node_modules[\\\\/]antd/],
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                plugins: [
                                    '@babel/plugin-syntax-dynamic-import',
                                    [
                                        'import',
                                        {
                                            libraryName: 'antd',
                                            style: true,
                                            libraryDirectory: 'es',
                                        },
                                        'ant',
                                    ],
                                    [
                                        'import',
                                        {
                                            libraryName: '@ant-design/icons',
                                            customName: name => {
    const formatName = name.split('-').reduce((acum, value) => acum + value[0].toUpperCase() + value.slice(1), '');

    return `@ant-design/icons/lib/icons/${formatName}`;
};
                                        },
                                        '@ant-design/icons',
                                    ],
                                ],
                            },
                        },
                    ],
                },

์ด์ƒ ํ•ด์š”. ๋‚˜๋Š” Icon์„ ์ „ํ˜€ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜์ง€๋งŒ ๋ชจ๋“  icons-svg๋ฅผ ํŒจํ‚ค์ง€ํ–ˆ์Šต๋‹ˆ๋‹ค.
webpack-bundle-analyzer.png
๋ฒ„์ „ ๋ฒˆํ˜ธ : 4.0.0-beta.0. Babel-plugin-import ๋ฐ tree-shaking์ด ์‚ฌ์šฉ๋˜์ง€๋งŒ ์“ธ๋ชจ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

์ด ๊ตฌ์„ฑ ์‚ฌ์šฉ

{
                    test: /\.js?$/,
                    include: [/node_modules[\\\\/]antd/],
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                plugins: [
                                    '@babel/plugin-syntax-dynamic-import',
                                    [
                                        'import',
                                        {
                                            libraryName: 'antd',
                                            style: true,
                                            libraryDirectory: 'es',
                                        },
                                        'ant',
                                    ],
                                    [
                                        'import',
                                        {
                                            libraryName: '@ant-design/icons',
                                            customName: name => {
    const formatName = name.split('-').reduce((acum, value) => acum + value[0].toUpperCase() + value.slice(1), '');

    return `@ant-design/icons/lib/icons/${formatName}`;
};
                                        },
                                        '@ant-design/icons',
                                    ],
                                ],
                            },
                        },
                    ],
                },

๋‹ต์žฅ์„ ๋ณด๋‚ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.ํ•˜์ง€๋งŒ ๊ตฌ์„ฑ์— ๋”ฐ๋ผ ์ž‘๋™ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

๋ฒ„์ „ : 4.0.0-beta.0
๋ฌธ์ œ : ๋ณด์ด๋Š” ๋ชจ๋‹ฌ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์ „ํ™˜๋˜๋ฉด ํŽ˜์ด์ง€๊ฐ€ ๋กค์˜ค๋ฒ„๋˜์–ด ์ฃผ์†Œ๋ฅผ ์žฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

@xiaoxintang ๋งˆ์Šคํ„ฐ ๋ธŒ๋žœ์น˜์—์„œ ์ˆ˜์ •๋˜์–ด ๋ณ‘ํ•ฉ์„ ๊ธฐ๋‹ค๋ฆฌ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

@ afc163 antd4.0 ๋ฒ ํƒ€๋ฅผ ์–ด๋–ป๊ฒŒ ์„ค์น˜ํ•ฉ๋‹ˆ๊นŒ?

https://next.ant.design/ ๋Š์—ˆ์Šต๋‹ˆ๋‹ค

@ afc163 antd4.0 ๋ฒ ํƒ€๋ฅผ ์–ด๋–ป๊ฒŒ ์„ค์น˜ํ•ฉ๋‹ˆ๊นŒ?

npm install antd@next
๋˜๋Š”
yarn add antd@next

๋ฏธ๋ฆฌ๋ณด๊ธฐ ์‚ฌ์ดํŠธ๊ฐ€ ๋ง๊ฐ€์ง„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ํŽ˜์ด์ง€๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†์Œ ์˜ค๋ฅ˜ ๋งŒ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์ œ์•ˆ :
์ƒˆ๋กœ์šด 4.0 ๋ฒ„์ „์—์„œ ์–‘์‹ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋” ์นœ์ˆ™ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ๋˜์–ด ๋งค์šฐ ๊ธฐ์ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ์˜ˆ์ œ๋ฅผ ๋ณด์•˜์Šต๋‹ˆ๋‹ค. Form ๊ตฌ์„ฑ ์š”์†Œ ์•„๋ž˜์˜ Form.Item ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋” ์ด์ƒ getFieldDecorator๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋งค์šฐ ์ข‹์€ ๊ฐœ์„ ์ด์ง€๋งŒ ์ข€ ๋” ๊ธ‰์ง„์  ์ธ ์ œ์•ˆ์ด ์žˆ์Šต๋‹ˆ๋‹ค. Form.Item ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ์ฝ”๋“œ ์ž‘์„ฑ ํ™˜๊ฒฝ์„ ๋”์šฑ ์ตœ์ ํ™”ํ•˜๊ณ  ์ฝ”๋”ฉ์„ ๋” ์ƒˆ๋กœ ๊ณ ์นฉ๋‹ˆ๋‹ค. Form.Item ๊ตฌ์„ฑ ์š”์†Œ์˜ ์›๋ž˜ ๊ธฐ๋Šฅ์€ ํŠน์ • ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ (์˜ˆ : Input, DataPick ๋“ฑ)๋กœ ์ง์ ‘ ์ „์†ก๋ฉ๋‹ˆ๋‹ค.
์ด๋Š” ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ๊ฐœ๋ฐœ ๋œ ์–‘์‹์ด antd์˜ ๋‚ด์žฅ ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ํ–ฅ์ƒ์‹œ์ผœ Form.Item ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ์ˆ˜์žˆ๋Š” ์กฐ๊ฑด์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ์„ ๊ณ ๋ คํ•˜๊ธฐ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ช‡ ๊ฐ€์ง€ ํŠน์ˆ˜ํ•œ ๊ฒฝ์šฐ (์˜ˆ : ์‚ฌ์šฉ์ž ์ž์ฒด ์ •์˜ ๊ตฌ์„ฑ ์š”์†Œ, ํŠน์ • ์ž…๋ ฅ ๊ตฌ์„ฑ ์š”์†Œ๋Š” Form์— ๋ฐ”์ธ๋”ฉ๋˜์ง€ ์•Š์Œ) ์ง€์นจ์— ๋Œ€ํ•œ ํŠน์ˆ˜ ํŒจํ‚ค์ง• ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
antd์— ๋Œ€ํ•œ ์—ฐ๊ตฌ๋Š” ๊นŠ์ง€ ์•Š๊ณ  ์ผ๋ฐ˜ ์‚ฌ์šฉ์ž์˜ ์ž…์žฅ์—์„œ๋งŒ ํ˜ธ์†Œ ์ œ์•ˆ์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์ด๊ฒƒ์„ ์‹œ๋„ํ•ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค : https://github.com/aweiu/ant-modifier

๊ธ€๋กœ๋ฒŒ ์Šคํƒ€์ผ ์˜ค์—ผ์— ๋Œ€ํ•œ ์ตœ์ ํ™”๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

๊ธ€๋กœ๋ฒŒ ์Šคํƒ€์ผ ์˜ค์—ผ์— ๋Œ€ํ•œ ์ตœ์ ํ™”๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

Antd๋Š” ์ ‘๋‘์‚ฌ๊ฐ€์žˆ๋Š” ๊ฒƒ ๊ฐ™์ง€๋งŒ ์˜ค์—ผ์ด ์•„๋‹™๋‹ˆ๋‹ค.์ž์‹ ์˜ ํ”„๋กœ์ ํŠธ CSS ์ฝ”๋“œ๋Š” CSS ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ง€๊ตฌ ์˜ค์—ผ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ธ€๋กœ๋ฒŒ ์Šคํƒ€์ผ ์˜ค์—ผ์— ๋Œ€ํ•œ ์ตœ์ ํ™”๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

Antd๋Š” ์ ‘๋‘์‚ฌ๊ฐ€์žˆ๋Š” ๊ฒƒ ๊ฐ™์ง€๋งŒ ์˜ค์—ผ์ด ์•„๋‹™๋‹ˆ๋‹ค.์ž์‹ ์˜ ํ”„๋กœ์ ํŠธ CSS ์ฝ”๋“œ๋Š” CSS ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ง€๊ตฌ ์˜ค์—ผ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ธ€์Ž„์š”, ์ €๋Š”์ด ์ ‘๋‘์‚ฌ๋ฅผ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ „ ์„ธ๊ณ„ CSS ์žฌ์„ค์ • ๋ถ€๋ถ„์˜ ์˜ค์—ผ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๋ ˆ๊ฑฐ์‹œ ํ”„๋กœ์ ํŠธ์—์„œ antd ๋ฐ CSS ์žฌ์„ค์ •์„ ๋„์ž…ํ•˜์—ฌ ์•ผ๊ธฐ ๋œ ์˜ค์—ผ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.

๊ธ€๋กœ๋ฒŒ ์Šคํƒ€์ผ ์˜ค์—ผ์— ๋Œ€ํ•œ ์ตœ์ ํ™”๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

Antd๋Š” ์ ‘๋‘์‚ฌ๊ฐ€์žˆ๋Š” ๊ฒƒ ๊ฐ™์ง€๋งŒ ์˜ค์—ผ์ด ์•„๋‹™๋‹ˆ๋‹ค.์ž์‹ ์˜ ํ”„๋กœ์ ํŠธ CSS ์ฝ”๋“œ๋Š” CSS ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ง€๊ตฌ ์˜ค์—ผ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ž์„ธํ•œ ๋‚ด์šฉ์€ ๊ณต์‹ ์›น ์‚ฌ์ดํŠธ ๋งํฌ์˜ ๋ฌธ์ œ ํ† ๋ก ์„ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค : https://ant.design/docs/react/faq-cn#antd-% E8 % A6 % 86 % E7 % 9B % 96 % E4 % BA % 86 % E6 % 88 % 91 % E7 % 9A % 84 % E5 % 85 % A8 % E5 % B1 % 80 % E6 % A0 % B7 % E5 % BC % 8F % EF % BC % 81

Antd Pro 4.0์—์„œ Antd Pro 4.0 ๋ ˆ์ด์•„์›ƒ์„ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ•  ๊ณ„ํš์ด ์žˆ์Šต๋‹ˆ๊นŒ?
์ง์ ‘ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ•  ๋•Œ pro-layout์—์„œ SiderMenu.js Icon.createFromIconfontCN ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. pro-layout์˜ ์ข…์†์„ฑ์€ ์•„์ง v3 ๋ฒ„์ „์ด๋ฏ€๋กœ ์ข…์†์„ฑ์„ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ์•„๋Š” ์‚ฌ๋žŒ์ด ๊ฐ€๋ฅด์ณ ์ค„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Antd Pro 4.0์—์„œ Antd Pro 4.0 ๋ ˆ์ด์•„์›ƒ์„ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ•  ๊ณ„ํš์ด ์žˆ์Šต๋‹ˆ๊นŒ?
์ง์ ‘ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ•  ๋•Œ pro-layout์—์„œ SiderMenu.js Icon.createFromIconfontCN ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. pro-layout์˜ ์ข…์†์„ฑ์€ ์•„์ง v3 ๋ฒ„์ „์ด๋ฏ€๋กœ ์ข…์†์„ฑ์„ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ์•„๋Š” ์‚ฌ๋žŒ์ด ๊ฐ€๋ฅด์ณ ์ค„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์•„์ด์ฝ˜์ด 4.0์—์„œ ๋ถ„๋ฆฌ ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€์ ธ ์˜ค๊ธฐ๋ฅผ ์ˆ˜์ •ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. next.ant.design์—์„œ ํ˜„์žฌ ์•„์ด์ฝ˜์˜ api ๋ฌธ์„œ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

v4 ๋ฒ„์ „์— ๋Œ€ํ•œ ๋ชจ๋“  ๊ธฐ์—ฌ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. 4.0.0-rc.0 ๋ฒ„์ „ ์ถœ์‹œ ์ดํ›„ ์ข…๋ฃŒ : ref # 20661

StrictMode๊ฐ€ ๋ชฉํ‘œ์ž…๋‹ˆ๊นŒ? ๋ ˆ๊ฑฐ์‹œ ์ปจํ…์ŠคํŠธ๋ฅผ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•ด์•ผ ํ•จ https://github.com/ant-design/ant-design/issues/9870

antd3์™€ antd4๋ฅผ ์ €์žฅ์†Œ์— ๋‘˜ ๋‹ค ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋ฆฌํฌ์ง€ํ† ๋ฆฌ๊ฐ€ ๋„ˆ๋ฌด ์ปค์„œ ๋ชจ๋“  ๊ณณ์—์„œ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†์œผ๋ฉฐ ์™„์ „ํ•œ ์ฝ”๋“œ๋ฒ ์ด์Šค๋ฅผ ๊ฑฐ์˜ ๋‹ค์‹œ ์ž‘์„ฑํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.
๋˜ํ•œ ๊ทธ๋ ‡๋‹ค๋ฉด antd3 CSS๋ฅผ ์ „์—ญ์— ์œ ์ง€ํ•˜๊ณ  antd4 CSS๋ฅผ ์ผ๋ถ€ ํด๋”์™€ ํ•˜์œ„ ํด๋”์— ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰