React-ace: μž‘μ—…μžκ°€ μˆ˜λ™ 주석을 μ œκ±°ν–ˆμŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2018λ…„ 07μ›” 02일  Β·  5μ½”λ©˜νŠΈ  Β·  좜처: securingsincity/react-ace

문제

λ‹€μŒκ³Ό 같이 annotations ν•˜μ—¬ react-ace ꡬ성 μš”μ†Œλ₯Ό λ Œλ”λ§ν•©λ‹ˆλ‹€.

<ReactAce
  mode={'javascript'}
  // ...
  annotations={[{row: 0, column: 0, type: 'error', text: 'Some error.'}]}
/>

μˆ˜λ™ 주석은 μž μ‹œ ν‘œμ‹œλ˜μ—ˆλ‹€κ°€ μž‘μ—…μžκ°€ μ‹€ν–‰λ˜λ©΄ μ œκ±°λ©λ‹ˆλ‹€.
이 gifλŠ” νŽ˜μ΄μ§€ μƒˆλ‘œ 고침을 λ³΄μ—¬μ€λ‹ˆλ‹€. 각 νŽ˜μ΄μ§€ λ‘œλ“œμ— 주석이 ν‘œμ‹œλ˜μ§€λ§Œ μ œκ±°λ©λ‹ˆλ‹€.
annotation

setOptions={{useWorker: false}} μž‘μ—…μžλ₯Ό λΉ„ν™œμ„±ν™”ν–ˆμ§€λ§Œ μˆ˜λ™μœΌλ‘œ μˆ˜ν–‰ν•œ 주석도 λΉ„ν™œμ„±ν™”λ©λ‹ˆλ‹€.

감사 ν•΄μš”!

Documentation

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

annotations μ†Œν’ˆμ„ μ‚¬μš©ν•˜λŠ” λŒ€μ‹  μˆ˜λ™μœΌλ‘œ setAnnotations ν•©λ‹ˆλ‹€.

const Editor = ({ annotations: customAnnotations = [], value }) => {
  const [annotations, setAnnotations] = useState([]);
  const [editor, setEditor] = useState();

  const nextAnnotations = [
    ...annotations.filter(({ custom }) => !custom),  // annotations by worker
    ...customAnnotations.map((annotation) => ({ ...annotation, custom: true })) // flag for exclusion
  ];

  useEffect(() => {
    if (editor) {
      editor.getSession().setAnnotations(nextAnnotations);
    }
  }, [editor, JSON.stringify(nextAnnotations)]);

  return (
    <ReactAce
      mode="html"
      onLoad={setEditor}
      onValidate={setAnnotations}
      setOptions={{ useWorker: true }}
      value={value}
   />
}

λͺ¨λ“  5 λŒ“κΈ€

주석 μ„ΈνŠΈκ°€ 2개 μžˆμ–΄μ•Ό ν•œλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€. μˆ˜λ™μœΌλ‘œ μΆ”κ°€λœ 주석 및 λͺ¨λ“œμ˜ νŒŒμ„œμ— μ˜ν•΄ μƒμ„±λœ 주석. μ§€κΈˆ μ„œλ‘œ λΆ€λ”ͺν˜€ μ§€μš°κ³  μžˆλŠ” 것 같은데...

λ„€, 그런 일이 μΌμ–΄λ‚˜κ³  μžˆμŠ΅λ‹ˆλ‹€. μž‘μ—…μžμ˜ 수λͺ…μ£ΌκΈ° 외뢀에 주석이 μ‘΄μž¬ν•  수 μžˆλŠ”μ§€ ν™•μ‹€ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

저도 같은 도전에 직면해 μžˆμŠ΅λ‹ˆλ‹€.
μž‘μ—…μžμ˜ 주석을 μœ μ§€ν•˜λ©΄μ„œ μ‚¬μš©μž μ •μ˜ 주석을 νŽΈμ§‘κΈ°μ— μΆ”κ°€ν•  수 있기λ₯Ό μ›ν•©λ‹ˆλ‹€.

λ‚΄ μ‚¬μš©μž 지정 주석을 μ„€μ •ν•œ ν›„ μž‘μ—…μžμ˜ 주석이 λ‚΄ 주석을 μž¬μ •μ˜ν•©λ‹ˆλ‹€.
μž‘μ—…μžλ₯Ό λΉ„ν™œμ„±ν™”ν•˜λΌλŠ” μ œμ•ˆμ„ λ³Έ 적이 μžˆμŠ΅λ‹ˆλ‹€.

setOptions={{useWorker: false}}

μ΄λ ‡κ²Œ ν•˜λ©΄ μž‘μ—…μžμ˜ 주석이 λΉ„ν™œμ„±ν™”λ˜λ―€λ‘œ λ‚΄ λͺ¨λ“  린트/ꡬ문 κ°•μ‘° ν‘œμ‹œκ°€ μ‚¬λΌμ§‘λ‹ˆλ‹€. (λ‚΄κ°€ μ›ν•˜λŠ” λ§ŒνΌμ€ μ•„λ‹˜)

μž‘μ—…μžμ˜ 주석을 λ‚΄ μ‚¬μš©μž μ •μ˜ 주석과 병합할 수 있기λ₯Ό μ›ν•©λ‹ˆλ‹€.

λˆ„κ΅°κ°€ 이 문제λ₯Ό ν•΄κ²°ν•˜λŠ” 방법을 μ œμ•ˆν•  수 μžˆμŠ΅λ‹ˆκΉŒ?

μ•ˆλ…•ν•˜μ„Έμš”, μ €λŠ” λΉ„μŠ·ν•œ 상황에 μ²˜ν•˜μ—¬ μ‚¬μš©μž μ •μ˜ 였λ₯˜ λ©”μ‹œμ§€λ₯Ό μΆ”κ°€ν•  수 μ—†μŠ΅λ‹ˆλ‹€. μ–΄λ–€ 해결책이 μžˆμŠ΅λ‹ˆκΉŒ?

annotations μ†Œν’ˆμ„ μ‚¬μš©ν•˜λŠ” λŒ€μ‹  μˆ˜λ™μœΌλ‘œ setAnnotations ν•©λ‹ˆλ‹€.

const Editor = ({ annotations: customAnnotations = [], value }) => {
  const [annotations, setAnnotations] = useState([]);
  const [editor, setEditor] = useState();

  const nextAnnotations = [
    ...annotations.filter(({ custom }) => !custom),  // annotations by worker
    ...customAnnotations.map((annotation) => ({ ...annotation, custom: true })) // flag for exclusion
  ];

  useEffect(() => {
    if (editor) {
      editor.getSession().setAnnotations(nextAnnotations);
    }
  }, [editor, JSON.stringify(nextAnnotations)]);

  return (
    <ReactAce
      mode="html"
      onLoad={setEditor}
      onValidate={setAnnotations}
      setOptions={{ useWorker: true }}
      value={value}
   />
}
이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰