Vanilla Js를 사용하여 경량 코드 편집기 만들기

안녕하세요!??
간단한 프런트엔드 코드 편집기인 NEXON이라는 새로운 프로젝트를 공유하게 되어 기쁩니다.
저는 바닐라 js를 사용하여 만들었습니다.

소개

Nexon은 온라인에서 프런트엔드 코드를 작성할 수 있는 간단하고 가벼운 온라인 코드 편집기입니다.
또한 프로젝트를 저장하고, 편집하고, 프로젝트를 .html 형식으로 다운로드할 수 있는 강력한 프로젝트 관리 기능도 제공합니다!

특징

• 프로젝트 관리
• 실시간 코드 미리보기
• 다운로드 기능
• 간단하고 직관적인 UI

사용된 기술 및 라이브러리

• html
• 자바스크립트
• litestyle.css
• FileSaver.js

내 프로젝트를 확인해 보세요

• 넥슨
• 깃허브

아이디어

어제 심심해서 뭔가를 만들어보기로 하고 넥슨이 탄생했습니다

과정

그래서 먼저 UI를 디자인하고 몇 달 전에 구축한 CSS 프레임워크인 litestyle.css를 사용하기로 했습니다. 기능을 확인하고 싶었기 때문입니다.
& 그런 다음 이를 위해 js를 작성했습니다.
저는 간단한 iframe과 텍스트 영역을 사용했는데, 여기서 텍스트 영역의 값은 입력할 때마다 iframe의 srcdoc로 설정됩니다.
사용자 데이터를 저장하기 위해 로컬 스토리지를 활용했습니다.

직면한 도전

다운로드 기능을 구현하는 것이 까다로워 FileSaver.js를 사용하여 이 문제를 극복했습니다.

배운 교훈

NEXON을 만드는 것은 정말 좋은 학습 경험이었습니다.
NEXON을 구축하면서 JAVASCRIPT 지식을 확고히 하는 데 도움이 되었습니다.
& 또한 모듈식 코드 작성의 중요성을 배웠습니다.

결론

NEXON을 구축하는 것은 바닐라 JS의 힘을 보여주는 나의 프런트엔드 여정에서 중요한 이정표입니다.

위 내용은 Vanilla Js를 사용하여 경량 코드 편집기 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!