React-ace: ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ฉˆ์ถ”๊ณ  ํŽธ์ง‘๊ธฐ์— ์ž…๋ ฅํ•œ ํ›„ ๋ฉ”๋ชจ๋ฆฌ๊ฐ€ ๊ณ„์† ์ฆ๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2017๋…„ 07์›” 06์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: securingsincity/react-ace

๋ฌธ์ œ

maxLines ๋ฅผ 1 ๋˜๋Š” 2๋กœ ์„ค์ •ํ•˜๊ณ  onLoad ์‚ฌ์šฉํ•˜์—ฌ ๋žฉ ๋ชจ๋“œ๋ฅผ ๋™์‹œ์— true๋กœ ์„ค์ •ํ•˜๊ณ  ๋งˆ์ง€๋ง‰ ์ค‘๊ด„ํ˜ธ ์•ž์„ ํด๋ฆญํ•˜๊ณ  Enter ๋ฒ„ํŠผ์„ ์ž…๋ ฅํ•˜์—ฌ ํŽธ์ง‘๊ธฐ ์„œ์‹์„ ์ž๋™์œผ๋กœ ๋งŒ๋“ค๋ฉด ๋‹ค์Œ์„ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ฉˆ์ถ”๊ณ  ๋ฉ”๋ชจ๋ฆฌ๊ฐ€ ์ฆ๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

๋ฌธ์ œ๋ฅผ ์žฌํ˜„ํ•˜๊ธฐ ์œ„ํ•œ ์ƒ˜ํ”Œ ์ฝ”๋“œ

<AceEditor
      mode="json" maxLines={2} value={"{\"a\":\"b\"}"}
      onLoad={editor => editor.getSession().setUseWrapMode(true)}
/>

๋˜๋Š” ๊ฐ„๋‹จํ•œ ํ”„๋กœ์ ํŠธ react-ace-editor-issuse๋ฅผ ๋ฐฉ๋ฌธํ•˜์‹ญ์‹œ์˜ค.

์ฐธ๊ณ ๋ฌธํ—Œ

์ดˆ๊ธฐ ๋ฉ”๋ชจ๋ฆฌ ๋ฐ CPU
tim 20170706095723
Enter ๋ฒ„ํŠผ ์ž…๋ ฅ ํ›„ 10์ดˆ
tim 20170706095813

์ง„ํ–‰ ์ƒํ™ฉ: #
์œˆ 10 / ํฌ๋กฌ 58&IE 11 / ๋ฆฌ์•กํŠธ 15.6.1

bug unable to reproduce

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

๋‚˜๋Š” React v16.4, react-ace v6.1.2๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

  1. create-react-app
  2. ์•„๋ž˜ ์ฝ”๋“œ๋กœ ํ…Œ์ŠคํŠธํ•˜๊ณ  AceEditor๋ฅผ maxLines ๋ฐ wrapEnabled
class App extends React.Component {
  render() {

    const props = {
      mode: 'javascript',
      theme: 'monokai',
      value: 'const test = \'hello loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text\'',
      maxLines: 1,
      wrapEnabled: true,
    };

    return (
      <div>
        <AceEditor {...props} />
      </div>
    );
  }
}

๊ทธ๋ฆฌ๊ณ  ๊ทธ๊ฒƒ์€ CPU์™€ ๋ฉ”๋ชจ๋ฆฌ ์ƒ์Šน์„ ์ผ์œผํ‚ฌ ๊ฒƒ์ž…๋‹ˆ๋‹ค
image

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

์šฐ๋ฆฌ๋Š” https://github.com/JedWatson/react-codemirror ์—์„œ ๋ฉ€์–ด์ง€๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ–ˆ์Šต๋‹ˆ๋‹ค. ์ ์–ด๋„ ํ˜„์žฌ๋กœ์„œ๋Š” ์ž˜ ์œ ์ง€๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. .

@SecMao ๋‚ด Mac์—์„œ ์žฌ์ƒ์‚ฐํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์žฌํ˜„ํ•  Windows ๋…ธํŠธ๋ถ์„ ์ฐพ์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.

@inoas ์ด ๋ฌธ์ œ๋ฅผ ์žฌํ˜„ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๊นŒ? codemirror์—์„œ ์ „ํ™˜ํ•˜๋ ค๊ณ  ํ•œ๋‹ค๊ณ  ์–ธ๊ธ‰ํ•˜๋Š” ๋ช‡ ๊ฐ€์ง€ ์˜๊ฒฌ์„ ๋ณด์•˜์ง€๋งŒ ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ๋กœ์ปฌ์—์„œ ๋ณด์•˜๋Š”์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ์•„์ง ์ด๋™์„ ํ•˜์ง€ ์•Š์•˜์œผ๋ฉฐ ๋งŒ์•ฝ ์šฐ๋ฆฌ๊ฐ€ ํ–ˆ๋‹ค๋ฉด ์ด๊ฒƒ์„ ์žฌํ˜„ํ•˜๊ณ  ์–ด๋–ค ๊ฒฝ์šฐ์—๋“  ๋‹ค์‹œ ๋ณด๊ณ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค(๋ˆ„์„ค ์—†์Œ ๋˜๋Š” ๋ˆ„์ถœ "์œ ์‚ฌ")

๋‚˜๋Š” React v16.4, react-ace v6.1.2๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

  1. create-react-app
  2. ์•„๋ž˜ ์ฝ”๋“œ๋กœ ํ…Œ์ŠคํŠธํ•˜๊ณ  AceEditor๋ฅผ maxLines ๋ฐ wrapEnabled
class App extends React.Component {
  render() {

    const props = {
      mode: 'javascript',
      theme: 'monokai',
      value: 'const test = \'hello loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text\'',
      maxLines: 1,
      wrapEnabled: true,
    };

    return (
      <div>
        <AceEditor {...props} />
      </div>
    );
  }
}

๊ทธ๋ฆฌ๊ณ  ๊ทธ๊ฒƒ์€ CPU์™€ ๋ฉ”๋ชจ๋ฆฌ ์ƒ์Šน์„ ์ผ์œผํ‚ฌ ๊ฒƒ์ž…๋‹ˆ๋‹ค
image

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