λ€μκ³Ό κ°μ΄ annotations
νμ¬ react-ace
κ΅¬μ± μμλ₯Ό λ λλ§ν©λλ€.
<ReactAce
mode={'javascript'}
// ...
annotations={[{row: 0, column: 0, type: 'error', text: 'Some error.'}]}
/>
μλ μ£Όμμ μ μ νμλμλ€κ° μμ
μκ° μ€νλλ©΄ μ κ±°λ©λλ€.
μ΄ gifλ νμ΄μ§ μλ‘ κ³ μΉ¨μ 보μ¬μ€λλ€. κ° νμ΄μ§ λ‘λμ μ£Όμμ΄ νμλμ§λ§ μ κ±°λ©λλ€.
setOptions={{useWorker: false}}
μμ
μλ₯Ό λΉνμ±ννμ§λ§ μλμΌλ‘ μνν μ£Όμλ λΉνμ±νλ©λλ€.
κ°μ¬ ν΄μ!
μ£Όμ μΈνΈκ° 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}
/>
}
κ°μ₯ μ μ©ν λκΈ
annotations
μνμ μ¬μ©νλ λμ μλμΌλ‘setAnnotations
ν©λλ€.