HTML과 Javascript를 이용한 가상 IDE를 개발해보려고 합니다.

HDNua의 이미지

안녕하세요. 한동안 활동이 뜸하던 군인입니다.
입대 전에는 프로그래밍 관련해서 올 일이 많아 자주 들렀는데
요즘은 근무다 뭐다 해서 통 들어오질 않았네요.

일단 질문입니다.
군 부대는 기본적으로 프로그램 개발이 금지되어있어서
프로그래밍을 공부하기에 약간 무리가 있습니다.
빌더를 다운받는 것 자체도 괜찮은지 의심이 가거니와
잘못 만들면 보안과에서 삐용삐용 할 수도 있는 일이구요.

그렇게 프로그래밍 공부는 책으로만 하려던 도중,
메모장을 이용해 Javascript로 프로그래밍을 할 수 있다는 사실을 알았습니다.
아직 익숙친 않지만 기본적으로 제가 프로그래밍하던 Java나 C#과 메서드 이름이 비슷하고,
변수 타입이 지정되지 않아 형 변환에 어려움이 있을 뿐 실제로 어려운 언어는 아닌 듯하여
이를 이용해 프로그램 개발 공부를 하려고 합니다.

문제는 사용할 수 있는 도구가 현재 메모장밖에 없어서
작성 중 실수가 빈번히 발생하고 가독성도 떨어지는 상황이라,
프로그래밍을 보다 효과적으로 할 수 있도록 도구를 만들어보려고 합니다.

목표는 다음과 같습니다.
1. 파일을 통합적으로 관리하는 프로그램을 작성할 것입니다.
┌──────┬───────────────┐
│파일 리스트│main.txt           │
├──────┼───────────────┤
│프로젝트  │내용             │
│ㄴmain.txt │               │
│ㄴclass.txt │               │
│      │               │
│      │               │
├──────┼───────────────┤
│열기 버튼 │출력             │
│컴파일버튼 │               │
│닫기 버튼 │               │
└──────┴───────────────┘
대충 이런 식으로 간단하게 파일을 관리하는 것을 작성하려 합니다.
- 필요한 기술
(1) 드래그 앤 드롭을 이용하여 파일 추가
(2) 엔터와 같은 키를 눌렀을 때 공백 생성
(3) 탭 키를 눌렀을 때 다른 컨트롤로 포커스가 이동하지 않음
(4) 키워드에 대해서만 색깔을 입히는 textarea 객체가 필요하지만, textarea는 이를 지원하지 않음
-> textarea를 상속하는 다른 컨트롤 또는 텍스트 입력에 관한 완전히 새로운 컨트롤 작성 필요
(5) 출력 부분의 textarea는 수정할 수 없아야 함
(6) 기타 등등 떠오르는 대로.

2. C를 빌드할 수 있는 간단한 수준의 빌더를 만들 것입니다.
The C Programming Language - Ritchie & Kernighan에 있는 dcl 예제에서 힌트를 얻어
현재 선언을 해석하는 방법과 수식을 읽는 방법을 알고 있는 상태이므로,
이를 이용해 간단한 C 빌더를 개발할 생각입니다. (할 수 있다면)

----
이 정도를 목표로 공부하려는데, 참고할 만한 자료나 추천해주실 만한 책이 있는지요.
KLDP 고수 분들의 답변을 기다립니다.

읽어주셔서 감사합니다.

익명 사용자의 이미지

F#용 웹 IDE 입니다.
http://www.tryfsharp.org/Create

HDNua의 이미지

이 쪽에서 이용하기엔 무리가 있어 나중에 자세히 알아봐야겠습니다.

소중한 답변 감사합니다.

저는 이렇게 생각했습니다.

HDNua의 이미지

너무 글을 길게 쓴 게 잘못이었나 하는 생각이 들어 필요한 정보만 뽑아 다시 달아보았습니다.

필요한 기술
(1) 드래그 앤 드롭을 이용하여 파일 추가
(2) 엔터와 같은 키를 눌렀을 때 공백 생성
(3) 탭 키를 눌렀을 때 다른 컨트롤로 포커스가 이동하지 않음
(4) 키워드에 대해서만 색깔을 입히는 textarea 객체가 필요하지만, textarea는 이를 지원하지 않음
-> textarea를 상속하는 다른 컨트롤 또는 텍스트 입력에 관한 완전히 새로운 컨트롤 작성 필요
: 카페 같은 데서 글 올릴 때 나오는 컨트롤 정도가 적당함

이에 대해 정보를 얻을 수 있는 곳이나 책이 있는지요.

저는 이렇게 생각했습니다.

마잇의 이미지

jsfiddle.net


--
마잇

HDNua의 이미지

소중한 답변 감사합니다.

저는 이렇게 생각했습니다.

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.