실시간 코드 에디터 만들기 1번째 준비 how to make code editor

실시간 코드 에디터는 내가 직접 웹에서 코드를 만들어 실행시켜 볼 수 있는 괜찮은 도구이다. codepen이나 w3schools 의 웹에디터를 생각하면 쉽다. 만약 자신이 웹페이지를 운영하고 있다면 코드 에디터를 직접 만들어 또다른 웹컨텐츠들을 제공할 수 있다. 물론, ftp를 이용해 코드를 만들어야 하는것은 있다. 지금의 많은 실시간 코드 에디터들은 대표적으로 html, css, javascript 에 대한 학습의 도구로써 많이 사용된다.

코드 에디터 만들기 준비
how to make code editor

w3schools 나 codepen 같은 곳들을 보면 내가 만든 코드를 만들고 테스트하고 공개하고 실행할 수 있다.

이런곳들은 실시간 코드 에디터를 제공하여 서비스를 하는 것이다.

다양한 형태의 웹과 앱들의 코드가 여러가지 올라오는데 공부하기 좋은 곳이긴 하다.

만약 내가 웹페이지를 운영 중에 있다면 어떨까.

ftp로 연결해서 코드를 수정하고 입력하는 것이 귀찮을 수 있다.

최소한 html 웹화면과 자바스크립트만큼은 웹에서 따로 운영하면 편하게 수정할 수 있다.

코드 에디터

코드에디터는 웹에서 직접 프로그래밍 코드를 만들고 바로 실행해 볼 수 있는 웹에디터를 말한다.

코드 에디터가 굳이 필요없을 수도 있지만 컨텐츠형태의 웹페이지을 수시로 만들어 배포하는 것은 귀찮다.

차라리 코드를 DB에 넣고 그때그때 불러오면 단순히 블로그를 운영하는 것처럼 다양한 웹컨텐츠를 제공할 수 있다.

물론, 컨텐츠의 한계는 있겠지만 수시로 업데이트 하면서 편의성을 높이는 방법 밖에는 없다.

codepen 이나 w3schools 에서 테스트해 보기 위해 에디터를 제공하는데 이들이 대표적이다.

준비물

html5 약간의 지식과 자바스크립트를 할 줄 알면 된다.

어렵지 않다.

웹페이지에서 필요한 태그는 textarea와 iframe 이다.

button 태그는 자바스크립트를 실행시켜 짜여진 코드를 미리보기 하기 위해 필요하다.

준비물은 아래와 같다.

• html5와 자바스크립트에 대한 깨알같은 약간의 지식
• 사용할 태그 : textarea, iframe, button