프로그래밍 언어 아희를 아시나요? (상당히) 독특한 프로그래밍 방법으로 나름의 명성이 있는데요, 예시 코드를 보고 가겠습니다.

방뿌반탸볃쑹희빠초텨
순처산썩속뱌뮹쏭셩토
붕툐터뱑뫃밙뎌붃벓본
사받본몽성멓샥뗘모볻
아희꿀잼빠썅펴댜셩속

네, 제가 직접 짰던 코드인데요, 이 코드가 하는 일은 무엇일 것 같나요? 무려 백준 1003번 문제의 해답 코드입니다. 수를 입력받아 피보나치 수열 함수의 호출 횟수를 출력하는 문제이죠.


혹시 여기까지만 보시고 채점 페이지에 저걸 제출한다면 "틀렸습니다" 문구를 보게 되실 겁니다. "자바스크립트로 된 아희 처리기"나 "알파희"에서는 잘 되는데, 백준 온라인 저지에서 사용하는 C언어 아희 구현체 caheui가 문제입니다. BOJ 게시판에 해당 구현체가 말썽이라는 언급문제제기가 있었지만 비주류 언어로서 안타깝게도 해결이 되지 않고 있습니다.


그래서 저는 아희 스펙을 완전히 준수하는 자바스크립트 인터프리터를 만들어보고자 이 프로젝트를 시작하게 되었습니다. 사실 위의 채점만이 문제라면 C언어로 짰을텐데요, 저는 더 큰 그림을 그리고자 했습니다. 인터넷 시대에 최첨단 세대들이 웹브라우저로 간편하게 아희를 접하고 이로움을 널리 퍼ㄸ... 아무튼 웹 환경이 아무래도 접근성이 좋고, 여차하면 node.js와도 호환되도록 작성해 쉘로도 실행할 수 있도록 구상했습니다.


앞서 말한 공식 자바스크립트 처리기는 (BOJ의 텍스트 입력과는 다르게) 입력 명령을 만날 때마다 prompt를 띄우는 식으로 입력을 받으며, 디버그 시 유용한 "한 단계만" 실행은 '실행 횟수'로 쓰이는 변수 k정수 입력에서도 사용하여 여러 단계를 건너뛰는 문제점이 있습니다. 그리고 자바스크립트 고유의 유니코드 표현법(Surrogate pair)을 잘 처리하지 못해 문자열 입력 테스트 스니펫에서 이모티콘 입력을 잘 처리하지 못하는 모습을 보였습니다. Aheui.js는 그러한 문제점을 개선하고 가능한 많은 부분을 모듈화하여 유지보수성을 높였으며, 명령어 실행에 사용하는 Aheui 객체에 run(), step(), stop(), reset() 등의 제어 메소드와 on(), once(), off()로 상태('start', 'step', 'stop', 'end'), 동작('reset'), 출력('character', 'integer')과 같은 이벤트 콜백을 두어 쉽고 풍부하게 기능을 활용할 수 있는 기반을 제공하고자 했습니다. 아직 개선할 점은 많지만 우선 깃허브에 코드를 공개해놓아 코드를 보실 수 있습니다.


한번 확인해보세요!

View on GitHub


저작자 표시 비영리 변경 금지
신고

'진행중인 프로젝트' 카테고리의 다른 글

아희 인터프리터 Aheui.js  (0) 2017.09.12
블로그 이미지

예비컴공돌이

각종 프로젝트 진행중! 생각날때마다 블로그 업데이트합니다.

카카오뱅크가 오픈한 게 7월 27일, 난 그 날 밤 카카오뱅크 계좌를 개설했다.

처음 본인인증부터 시작해서,

이런 의미불명의 "알림" 등 계속된 오류 끝에 11시 50분경에서야 끝이 났다.


그 후 체크카드를 개설하려고 약관을 훑어보고 카드 선택 후 발급 신청을 하자, 기적같이 업무시간이 끝나 수십분 후에 다시 시도하라고 한다. 결국 의지로 신청한 콘 체크카드. 카카오프렌즈를 봐왔다면 알겠지만 콘은 초록색 쪼그마한 캐릭터이다. 내가 초록색을 좋아하기도 하고, 다른 캐릭터들이 큼직하게 그려져있을 때 그 사이에 깨알같이 그려진 그 디자인이 깔끔하고 귀여워서 얘로 골랐다. 솔직히 라이언같은 인기 많은거 신청하면 늦게 올까봐도..

그래서 드디어 지난 수요일(8/2)날, 본인 수령을 해야 한다는 연락 이후 도착한 노란 편지 한 통!

봉투도 잘 만든 것 같다. 깔끔한 배경과 재질에 카카오뱅크 마크가 뙇!

내용물은 아래처럼 카드, 웰컴기프트, 약관, 혜택안내 등으로 구성되어 있다.


웰컴기프트로는 깨알같은 카카오프렌즈 스티커 선물이. 어머 스티커를 시켰더니 체크카드가 왔어요 이건 노트북에 붙이는걸로!


앞으로 주력으로 사용할 귀요미 콘 카드.


적어도 오는 학기부터는 주력 은행을 바꿔보려고 한다. 무엇보다 은행앱이 깔끔하게 디자인돼서 빠르게 결제내역 조회, 이체가 가능하다는 점이 마음에 들었다. 학기중에는 밥값처럼 자잘하게 돈을 이체해야 할 일도 많은데, 지금은 이체 수수료도 없고, 상대방 계좌번호를 몰라도 카톡으로 보내는 기능이 마음에 들었다. 또 내년 1월까지 다양한 캐시백 혜택도 있어 쏠쏠히 재미를 볼 수도 있을 것 같다.


끝!

저작자 표시 비영리 변경 금지
신고
블로그 이미지

예비컴공돌이

각종 프로젝트 진행중! 생각날때마다 블로그 업데이트합니다.

[이전 글]

2017/02/03 - [소프트웨어/JS, Node.js] - 웹 워커(Web Worker) - 1. 개요


웹 워커는 UI 스레드와 별개로 동작한다. UI 스레드 상에서 여러 작업들끼리 시간을 나눠가며 실행될 필요 없이 오직 내 스크립트만을 위한 공간에서 끊김없이 작업을 이어나갈 수 있으며, UI 스레드는 널널해져서 페이지는 사용자 반응을 빠릿하게 처리할 수 있다는 장점이 있다.


웹 워커 사용 예

아래는 시간이 오래 걸리는 작업(1부터 5000000000까지의 합 계산)을 일반 코드 vs 웹 워커 상에서 실행하는 예시이다. 작업이 실행중일 때 일반 코드는 페이지의 반응이 멈추어 아래 버튼이 클릭되지 않는 반면, 웹 워커에서 실행하면 자유롭다.

실행 시간은 두 경우 모두 비슷하지만, 페이지가 멈추기 때문에 창을 새로 고칠 수 없고 클릭에 대한 반응도 할 수 없는 등 전반적으로 좋지 않다.


웹 워커 선언

처음에 페이지에 있는 스크립트에서 워커 객체를 생성한다.

var worker = new Worker("worker.js");

이러면 worker.js 파일을 불러와서 웹 워커 상에서 실행하고, worker 변수를 통해 워커를 제어할 수 있다. worker.js라는 파일을 만들어서 코드를 작성하면 되는 것이다.


그렇다면 그 코드가 실행되는 과정 혹은 결과는 어떻게 알 수 있을까?

웹 워커와의 통신은 이벤트 기반으로 이루어진다.

// worker.js
onmessage = function(e) {
	postMessage(e.data + " World!");
};
// 페이지 스크립트
var worker = new Worker("worker.js");
worker.onmessage = function(e) {
	console.log(e.data);
};
worker.postMessage("Hello");

간단한 웹 워커 사용 예제이다. 스크립트에서 웹 워커를 생성하고 message라는 이벤트의 리스너를 등록하고 값을 보내면, 웹 워커에서는 message 이벤트가 발생하고 e.data 값을 이용해 결과를 원래 창으로 전송한다. 그러면 결과적으로 "Hello" + " World!" = "Hello World!"라는 문자열이 콘솔에 출력될 것이다.


위처럼 가장 기본적인 틀을 바탕으로 느려지는 부분을 웹 워커 상에서 실행하면 된다. 넘겨주는 값은 문자열, 숫자 뿐만 아니라 배열이나 객체도 가능하다.


참고로 웹 워커 스크립트 내에서는 몇몇 작업들(DOM 수정 포함)을 하지 못한다. UI 스레드에서 화면을 그리고 있는데 워커에서 갑자기 내용을 바꾸었을 때의 처리 등 복잡한 문제가 발생한다. 따라서 결과값을 이벤트로 보내고, UI쪽 코드에서 처리해야 한다.

저작자 표시 비영리 변경 금지
신고

'소프트웨어 > JS, Node.js' 카테고리의 다른 글

웹 워커(Web Worker) - 2. 사용법  (0) 2017.02.23
웹 워커(Web Worker) - 1. 개요  (0) 2017.02.03
블로그 이미지

예비컴공돌이

각종 프로젝트 진행중! 생각날때마다 블로그 업데이트합니다.