VSCode와 같은 나만의 텍스트 편집기를 만든 방법

Hello World! 새로운 글로 돌아왔습니다 🎉....

오늘은 제가 만든 에디터 👉작은 에디터; 웹 브라우저 등에서 코드를 작성하는 데 매우 유용합니다.

그래서, 내가 어떻게 만들었지?

라이브러리/프레임워크

리액트 JS

코드미러

모나코 에디터

tiny-unique-id

FontAwesome 아이콘

반응 샌드박스 편집기

데이터베이스(코드 및 인증 저장용)

Cloud Firestore(Firebase)

코드 입력/편집기는 어떻게 만들었나요?

Editor/Input을 만들기 위해 CodeMirror를 사용했습니다.

<ControlledEditor 
            onBeforeChange={handleChange}
            value={value}
            className="code-mirror-wrapper"
            options={{
                lineWrapping: true,
                lint: true,
                mode: language,
                theme: 'material',
                lineNumbers: true,
                autoCloseBrackets: true,
                matchBrackets: true,
                autoCloseTags: true,
                matchTags: true,
            }}
/>

VSCode Editor의 경우 Monaco Editor를 사용했습니다.

<Editor
     defaultLanguage="javascript"
     theme="vs-dark"
     value={js}
     onChange={setJs}
     className='editor'
   />

출력 표시 방법

출력을 표시하기 위해 iframe를 사용했습니다.

<iframe
      srcDoc={srcDoc}
       title="output"
       sandbox="allow-forms allow-popups allow-scripts allow-same-origin allow-modals"
       frameBorder="0"
       width="100%"
       height="100%"
      />

코드는 어떻게 저장/업데이트합니까?

코드를 저장하기 위해 JSON에 코드를 저장하는 Cloud Firestore(Firebase)를 사용했습니다.

이것이 VSCODE와 같은 나만의 텍스트 편집기를 만든 방법입니다.

쇼케이스 영상을 만들어 놓았으니 꼭 영상으로 확인하시고 제

Reference

이 문제에 관하여(VSCode와 같은 나만의 텍스트 편집기를 만든 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dhairyashah/how-i-made-my-own-text-editor-2aj8

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다