JSCC: JavaScript로 개발하는 C Compiler [2015-07-31. 00:11 End]

HDNua의 이미지

군 내에서 1년동안 연구했던 결과를 블로그 및 다른 사이트에 게시하려고 합니다. 많은 분들이 피드백 주신다면 감사하겠습니다.
email: rbfwmqwntm@naver.com
link: http://hdnua.tistory.com/2
github: https://github.com/HDNua/JSCC
오픈튜토리얼스: https://opentutorials.org/course/1715

1장. 스택과 계산기 (http://hdnua.tistory.com/3)
2장. C의 선언 (http://hdnua.tistory.com/4)
3장. 컴파일러와 인터프리터 (http://hdnua.tistory.com/5)
4장. 어셈블리 튜토리얼 1 (http://hdnua.tistory.com/6)
5장. 어셈블리 튜토리얼 2 (http://hdnua.tistory.com/10)
6장. JavaScript 튜토리얼 (http://hdnua.tistory.com/11)
7장. JSCC 준비 (http://hdnua.tistory.com/19)
8장. 가상 머신 개발 1 (http://hdnua.tistory.com/21)
9장. 가상 머신 개발 2 (http://hdnua.tistory.com/22)
10장. 링커 개발 (http://hdnua.tistory.com/23)
11장. C 컴파일러 개발 (기본편) (http://hdnua.tistory.com/25)
12장. C 컴파일러 개발 (문법편) (http://hdnua.tistory.com/26)
13장. C 컴파일러 개발 (실전편) (http://hdnua.tistory.com/27)

==============================================
프로젝트 이름: JSCC: JavaScript로 개발하는 C Compiler
개발 시작: 2013-12-01
개발 종료: 2015-07-31
문서화 시작: 2015-04-23
문서화 종료: 2015-07-31
문서화 분량: 513 page (13 Chapters)
==============================================

1. 읽어주셔서 감사합니다. 기회가 된다면 다시 오겠습니다.
2. 오픈 소스 프로젝트에 참여하려면 이 곳을 참조합니다.
https://github.com/HDNua/JSCC

-----

JSCC: Javascript로 개발하는 C Compiler

HandyPost는 한 도영(HDNua)이 작성하는 포스트 문서입니다.

 

1. 저자 서문

2013422일에 공군 병으로 입대하여 2015421일부로 전역을 하게 되었습니다. 마음이야 한 달은 전에 전역해서 부대 전역 전날까지만 해도 크게 느낌이 없었으나, 정문을 나와 바깥 공기를 쐬고 하룻밤 자고 일어나서 다음 복귀 일자를 생각하지 않아도 된다는 사실에 안도하고 나서야 정말로 제가 전역했음을 실감합니다.

저는 입대 이전에 The C Programming Language을 읽으면서, ‘C의 선언 방식을 설명하는 예제를 보고 저도 컴파일러를 만들 수 있겠다는 생각을 막연히 하고 있었습니다. 후에 자료구조 서적을 볼 때 복합 연산이 가능한 계산기예제를 공부했는데, 이 예제를 보고 나서 그러한 마음이 더욱 커져서 이 두 가지 사실을 기초로 컴파일러 제작에 도전해봤습니다. 물론 저는 뛰어난 두뇌를 가진 수재가 아니라 열심히 공부하는 일반적인 학생이었고, 정수형 변수의 선언과 값의 대입, 사칙 연산과 나머지 연산까지는 열심히 연구하여 성공했지만, 함수의 정의와 호출에서 도무지 갈피를 못 잡고 방황하다 결국엔 부족한 내공을 탓하며 프로젝트를 중단했습니다. 그리고는 어린 친구들도 간단히 만들 법한 스도쿠 게임(Sudoku!), 미궁 게임(모래 미궁), 파일 이름 정리 프로그램(HandyComicNamer) 등을 만들면서 어영부영 시간을 보내다가 군대로 갔습니다.

군대에서 프로그래밍을 공부할 수 있을까?”라는 건 제게 아주 중요한 문제였기 때문에, 자대에 배치되어 전입 신병을 위한 교육 생활을 하던 때에 저와 동기들을 인솔하던 간부에게 이를 물어봤습니다만, 대답은 부정적이었고 저는 남는 시간을 컴퓨터 없이 진행해야 한다는 사실에 크게 실망했습니다. 막 들어온 신병이라 책을 펴놓고 공부할라치면 높은 기수 선임의 눈치가 보이고, 아무래도 막내다보니 온갖 궂은 잡일을 도맡아하게 되어 도무지 공부를 할 환경으로는 생각할 수 없었습니다. 그뿐만이 아닙니다. 인트라넷은 개발 도구를 찾기 아주 힘든 환경이고, 개발 도구가 있다 하더라도 사용하려면 부서장 등의 간부가 인가를 해야 합니다. 그렇게 인가된 도구로 개발을 한다손 쳐도 혹 잘못된 코드를 작성하면 인트라넷에 깔린 백신 프로그램이 작성한 프로그램을 바이러스로 인식하고, 이 프로그램을 만든 사람은 보안과에 호출되어 진술서를 작성해야 하는 등 프로그래밍을 하기 아주 껄끄러운 환경이었습니다.

하지만 어디든 찾으면 방법은 있더군요. 부대 사람들에게 제 능력을 보이고 싶은 마음에 중학생 때 배웠던 HTML을 이용하여 미궁 게임을 만들어보려고 부대 내에서 사용되는 인트라넷 페이지의 소스 보기를 클릭했더니, 제가 알고 있는 프로그래밍 언어와 아주 비슷한 글들이 보이는 겁니다(그것이 Javascript라는 걸 안 건 더 나중의 일이었습니다). 마치 운명처럼 군대 내에서의 프로그래밍 공부 가능성을 발견했고, 저는 이를 놓칠 수 없었습니다. 근무 시간에는 틈틈이 어떤 것이 가능할지 생각해보고, 비번 시간에는 휴게실의 컴퓨터를 이용해 눈에 띄지 않게 Javascript를 공부했습니다. 위에도 밝혔듯 개발 도구가 없기 때문에 세 달에서 네 달은 메모장만으로 코드를 작성했습니다. 267번 줄에 오류가 있다고 하면 메모장으로 파일을 연 다음 1번 줄부터 차례로 267번 줄을 찾았습니다. 그러다 불편함을 도저히 참을 수가 없어서 textarea 요소를 이용해 줄 번호와 코드를, iframe을 이용해 오른쪽에 결과 화면을 보여주는 프로그램을 개발하여 사용했습니다(Handy HTML Maker, 5버전까지 나왔고 최종 버전은 그럭저럭 쓸 만했습니다).

군대에서 프로그래밍이 가능함을 깨닫자 아주 재미있는 생각이 들었습니다. Javascript는 배우기 쉬운 기술이지만, 군대 안에서 프로그래밍을 배우고자 하는 사람은 아주 많고 그 중 대다수가 C를 배우고 싶어 했으나 환경이 여의치 않아 공부를 할 수 없었습니다. 그래서 저는 Javascript를 이용하여 C 컴파일러를 개발하면 모든 사람들이 군대에서 프로그래밍을 공부할 수 있게 될 것이라는 사명감에 불타올랐고, 입대 전에 포기했던 이 프로젝트를 그 당시 생소했던 Javascript라는 언어로 새롭게 작성하게 되었습니다.

이 문서는 제 개인 국내 블로그에 한국어로, 다른 제 외국 블로그에 영어로 올릴 계획입니다. 한국어로 작성하는 이유는 제가 한국어를 사랑하고, 또한 제가 쓸 수 있는 말 중에 가장 능숙한 언어여서 제 생각을 왜곡 없이 전달할 수 있기 때문입니다. 영어로도 작성하는 이유는 스스로 더 많은 사람들과 소통하기 위한 의사소통 능력을 키우기 위함입니다.

많은 부분이 정확한 교재나 문서가 아닌 추론으로 되어있기에 현대적 관점에서의 컴파일러보다 당연히 성능이 떨어지고 오류가 많을 것입니다. 그럼에도 불구하고 제가 이 글을 쓰는 이유는, 제가 1년이라는 나름 긴 시간을 연구해온 결과가 있기에 이를 자랑하고 자긍심을 얻고 싶었기 때문입니다. 칭찬은 고래도 춤추게 하는 만큼 저도 제 결과물에 비판보다 칭찬을 받고 싶은 마음이 크지만, 따끔한 비판도 저를 성장하게 하는 원동력이라 생각하고 겸허히 받아들일 수 있도록 마음가짐 하고 있습니다. 피드백은 언제나 환영합니다.

 

2015423

한 도영

HDNua(rbfwmqwntm@naver.com)


2. 개요

JSCC 프로젝트는 제목에서도 밝혔듯, Javascript 프로그래밍 언어를 이용하여 C 프로그래밍 언어의 컴파일러를 개발하는 프로젝트다. 컴파일러를 개발한다고 적어놨으니 학부 1, 2학년은 기겁을 하고 달아날 일일지도 모르지만, 이 프로젝트를 진행한 사람 또한 그렇게 뛰어나지도 않은 일반적인 학부생이니 너무 부담 가지지 않았으면 한다. 실제로 이 글의 대상은 순수하게 프로그래밍 지식만을 이용하여 C 프로그래밍 언어의 컴파일러를 개발하고 싶어 하는 학생들이고, 난 그에 맞춰 내가 생각하는 가장 친절한 방법으로 내 프로젝트를 설명할 것이다. 모를 수도 있는 개념은 다시 설명할 것이고, 범위를 벗어나는 내용을 다루기 전에 최대한 사전에 이를 설명하기 위한 준비를 해놓을 것이다. 사실 아직 모든 부분을 완전히 작성하지 않은 프로젝트이지만, 컴파일러를 프로그래밍 지식만으로 개발하기 위해 무엇을 알고 있어야 하는가에 대한 단서는 될 수 있으리라 믿는다. 이렇게 장편의 글을 써보는 것이 그렇게 자주 있는 일이 아니라 설명을 어떻게 할까 하는 순서 등을 정하지 못했지만, 일단 내가 어떤 내용의 글을 쓸 것이라는 것만 간략히 이 곳에 적어두고 나머지는 진행하면서 완성해나가는 것도 괜찮을 것 같아서 그렇게 하기로 했다(팔 것도 아닌데 뭐).

이 문서는 CC++ 두 가지 언어에 능숙한 컴퓨터 과학을 전공하는 학생에게 적합하다. 이는 이 프로젝트가 Javascript로 개발하는 컴파일러임에도 불구하고, 이 글을 읽기 전에 독자가 먼저 Javascript를 배우지 않아도 된다는 뜻이다. 왜냐하면 문서 중간에 이 프로젝트와는 별개로 HTML, CSS, Javascript를 연습하는 프로젝트를 추가하여 이 예제를 직접 만들어보는 식으로 Javascript를 설명할 것이기 때문이다. 이에 독자가 의아함을 마음 한구석에 품을 수 있으나, 두 프로젝트를 서로 분리하기 어렵다고 판단하여 이렇게 정한 것이니 양해를 바란다.


3. 목차

반드시 이 순서로 진행한다고 장담할 수 없으나, 개략적인 순서는 다음과 같다.

 

1. 스택과 계산기

1.1) 프로젝트 준비

1.2) 스택 자료구조

1.3) 복합 연산이 가능한 계산기

1.4) 문자열 버퍼

1.5) 변수를 처리할 수 있도록 개선된 복합 연산이 가능한 계산기

2. C언어의 변수 선언과 정의

2.1) 스택 메모리

2.2) C의 복잡한 선언

2.3) 변수 선언과 정의

2.4) 계산기와의 결합

2.5) 한계

3. 컴파일러 & 인터프리터

3.1) 기계어와 어셈블리

3.2) 무엇을 개발하고 있는가?

3.3) 인터프리터를 개발한다면?

3.4) JSCC의 개발 방향

4. 어셈블리 튜토리얼

4.1) 프로젝트 준비

4.2) MASM 개요

4.3) MASM 문법

5. 번외: Handy HTML Maker

5.1) 개요

5.2) HTML, CSS, Javascript

5.3) HTML, CSS 튜토리얼

5.4) Javascript 튜토리얼

5.5) Handy 라이브러리 작성

5.6) Handy HTML Maker 개발

6. JSCC 설계 및 구현

6.1) 개요

6.2) Runner

6.3) Linker

6.4) Compiler

7. 심화 주제

7.1) 전처리기

7.2) 추가로 다루어볼 만한 것

7.3) 맺음말

8. 참고



HandyPost:JSCC, JSCC, Javascript C Compiler, 컴파일러

-----

===== [연재 기록] =====

[2015-07-24]
다음 주에 연재 종료합니다.

[2015-07-17. 00:28]
세 달이 다 되어갑니다. 끝이 보이네요.

[2015-07-10. 00:12]
다음 문서는 드디어 컴파일러입니다. 지금까지 연재한 어떤 문서보다 재미있을 겁니다.

[2015-07-03. 00:09]
이번에도 엄청 기네요. 이거 다음에 링커고 그 다음 컴파일러입니다.

[2015-06-19. 12:39]
오픈튜토리얼스에 연재 시작했습니다.
https://opentutorials.org/course/1715

[2015-06-08. 01:03]
읽는 분이 계시는지 모르겠으나, 공지는 해야겠기에..
이번 주 JSCC는 휴재합니다.
HTML과 JavaScript가 가능한 ActiveX 이외의 GUI 개발 환경을 찾던 도중에
Node.js와 Node-webkit이라는 것을 알아냈는데,
이걸 연구하는 데 시간이 더 걸릴 것 같아요.

[2015-06-05]
1. 열심히 써보고 있습니다.
2. 메인 블로그를 티스토리로 옮겼습니다. 좋네요.

[2015-05-29]
1. 연재가 많이 늦었습니다.
2. 5장의 문서를 읽을 때, 블로그의 QuickNASM 프로그램도 사용합니다.

[2015-05-01]
1. github 페이지를 만들었습니다.
link: https://github.com/HDNua/JSCC
2. 연재라는 게 생각보다 참 힘든 일이군요.. 몰랐습니다.
3. 매주 금요일에 연재합니다.

Forums: 
익명 사용자의 이미지

열악한 군대 환경에서 1년간 꾸준히 연구해 온 열정이 정말 대단하신 것 같습니다.
이렇게 만드신 자바스크립트를 군대 후배들이 사용하면서 C 언어를 공부할 수 있게 되면 큰 보람일 것 같습니다.

일반적인 컴파일러 서적(드래곤북 등)과는 전혀 다른 목차는 어떻게 진행이 될지 궁금하게 만들기도 하고,
흔히 생각하는 컴파일러 개발의 과정(렉시컬->신택스->시맨틱이라던지..)이
눈에 딱 들어오질 않아 이해가 가지 않기도 합니다.

아무튼 꾸준한 연재 기대하겠습니다!

HDNua의 이미지

부족한 글 읽어주시고 칭찬해주셔서 감사합니다. ㅎㅎ

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

cococo의 이미지

3 - 4 학년이 되면, 컴파일러 수업을 듣습니다.
그때 해보는 숙제 중에 하나가 parser -> compiler 죠.
도움도 도움이지만, 전공 담당 교수님이나 조교 분께 여쭈어 보면, 가장 편하게 빠르게 자료를 얻을 수 있지 않을까 생각됩니다.
즐거운 작업 되시기 바랍니다.

HDNua의 이미지

생각해보니 잘 아는 사람에게 물어보는 것이 가장 정확하고 좋겠군요. 조언 감사합니다.

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

xxxvan의 이미지

군대 내에서 그만큼의 열정을 불태우셨다는 것에 기립박수를 보내드립니다. 대학와서 프로그래밍을 처음 접했지만 그래도 아직 까지 부족한 저를 생각하면 마냥 부끄러워질수 밖에없네요.
좋은 개발되시길 빕니다!

"Cogito ergo sum" - René Descartes

HDNua의 이미지

하고 계시는 일도 잘 될 거에요. 인터프리터는 분명 쉽지 않은 과제이지만
끈기 있기 진행하시다보면 원하는 결과를 얻을 수 있으리라 생각합니다.

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

익명 사용자의 이미지

짝짝짝짝~~

HDNua의 이미지

지금이 고비라고 생각하고 힘을 내고 있습니다. 부족한 글 읽어주셔서 감사합니다. 열심히 할게요.

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

HDNua의 이미지

관심 가져주셔서 감사했습니다.

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

kdzlvaids의 이미지

오랜만에 kldp에 방문했다가 어디선가 뵌 분의 글을 보게 되네요.
오래 된 글에 댓글을 남겨도 될지 모르겠습니다.

힘든 일을 해내셨네요..
군에서라니, 군에서 무언가를 하는 건 쉽지 않을텐데요..

연재 종료 축하드립니다!

---

Jongmin Kim

OpenPGP key located at https://jongmin.dev/pgp
OpenPGP fingerprint: 012E 4A06 79E1 4EFC DAAE 9472 D39D 8D29 BAF3 6DF8

HDNua의 이미지

축하해주셔서 고맙습니다.

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

Kjy의 이미지

2018년에 입대해서 현역인 군인인데 서버통신으로 메신저 만들려고 이것저것 찾다보니 여기로 왔는데 역시 저랑 같은생각을 한사람이 있어서 다행이네요ㅋㅋㅋ 포스팅보고 열심히 공부하겠습니다ㅋㅋ

HDNua의 이미지

18년 입대이시면 이미 전역하고 한참 즐길 시기겠군요. 도움이 되었다면 좋겠습니다.

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

댓글 달기

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
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.