About Me With CMD

𝗔𝗯𝗼𝘂𝘁 𝗠𝗲 𝗪𝗶𝘁𝗵 𝗖𝗺𝗱

위의 cmd 화면을 클릭하여 명령어를 입력할 수 있습니다.

• 매뉴얼 레파지토리

학부 시절 System Programming을 배우며 unix style 커널을 구현한 경험이 있습니다. 당시에는 명령어를 parsing하는 데에 시간을 많이 쏟았다면, 이번 프로젝트에선 페이지를 직접 그리고, 라인 시작점 좌표값들을 찍어보며 커널 그 이전 단계를 직접 구축해보는 느낌이었습니다.

순 작업시간은 14시간 정도로 추정됩니다. 개발자의 자기소개도 커널을 띄워 보여주면 재미있겠다는 생각에 당일 저녁 바로 작업에 착수했고, 새벽 6시까지 12시간 이상 작업하여 완성한 후 다음날 3시간 정도를 들여 구입해둔 웹서버와 깃페이지에 배포하였습니다.

처음엔 플래시게임처럼 About Me 페이지에 바로 띄우고자 HTML5 게임 엔진을 찾아보았습니다. 찾아보니 많은 웹게임 개발자들이 사용하고, 가벼운 게임엔진인 Phaser를 선택하여 다운로드받고, 4시간 정도는 작업의 진전 없이 Phaser를 이해하는 데에 시간을 쏟았던 것 같습니다. 또한 깃페이지에 확실히 띄울 수 있을지, 나아가 깃블로그에 iframe 태그로 페이지를 삽입할 수 있을지에 대한 조사 역시 병행하였습니다. 개발 과정에선 javascript에 대한 깊은 이해가 없던 저로서는 javascript 심층적인 작동 역시 이해하는 데에 시간이 걸렸었습니다.

배운게 너무 많아 어디서부터 정리해야 할지 가늠조차 안되네요. 하나하나 정리해보겠습니다.

𝐖𝐡𝐚𝐭 𝐈 𝐋𝐞𝐚𝐧𝐫𝐧

(1) 사용해본 적 없는 라이브러리를 사용하는 방법을 배웠습니다.

• 작업에 들어가며 Phaser의 존재를 처음 알았기 때문에, 개발 과정에서 써보지 않은 라이브러리를 사용하는 법을 배우게 되었습니다. 또한 한국어로 된 매뉴얼이 많지 않은 상황이었기 때문에, 구글링 하는 법을 굉장히 많이 배웠습니다.
• 가장 도움을 많이 받은 것은 역시 공식 문서입니다. Phaser 3의 예제 코드에서 원하는 파트를 찾아 코드를 뜯어보고, 샌드박스에서 코드를 바꿔보며 해당 함수의 작동을 어림짐작했습니다. 사용하기 위한 것이니 심화의 심화에 대한 이해는 접어두고, 사용법을 중점적으로 공부했습니다.
• 쌩초급자였음에도 불구하고 의외로 스택오버플로우의 도움도 많이 받았습니다.
  • 공식 문서를 먼저 살펴본 후, 사용하길 원하는 메소드를 엔진 이름인 Phaser와 함께 검색하면 스택오버플로우 다양한 질문들이 쏟아져 나왔습니다. 모든 질문과 답변을 읽으며 현재 처해있는 문제가 내가 잘 사용하지 못해서 발생하는 문제인건지, 그 외의 문제인지 정도를 파악할 수 있었습니다. 무엇을 모르는지 모르는 상태에서 남들이 모르는 부분들을 알게된다는 점이 오히려 무엇을 모르는 지를 알게 해주었던 것 같습니다.

(2) 문제 해결력을 높였습니다.

• Phaser 3에서 유저 입력에 따라 라인이 위로 밀려나는 그래픽을 구현하기 위하여, 처음에는 javascript에 Queue를 적용하여 특정 라인 이상이 되면 dequeue되고, 새로운 라인을 추가하는 코드를 작성하였으나 Phaser의 특성상 좌푯값을 매번 새롭게 업데이트해주기엔 비효율적이어서 해당 방법을 폐기했습니다.

• 이후 캔버스에 라인의 좌푯값을 미리 저장해두고, line을 해당 좌푯값에 찍어주는 방식으로 진행했습니다. moveUpEntries() 함수를 구현하여 한 라인의 높이(line_h)만큼 모든 line의 height를 올려주어서 라인의 이동을 표현하게 되었습니다.

  function moveUpEntries() {
  	for (var i = 0; i < (entryArray.mark).length; i++) {
  		(entryArray.mark[i]).y -= line_h;
  		(entryArray.content[i]).y -= line_h;
  	}
  }
  
  

위의 코드는 해당 문제를 해결한 코드입니다. Phaser의 textEntry의 text, width, hieght 등의 속성값을 바꾸면 새롭게 이미지를 띄우지 않아도 된다는 점에서 착안했습니다. 이에 라인의 textEntry들을 모든 entryArray 만들어 y값을 미리 지정해둔 한 라인의 높이(line_h)씩 위로 돌려주는 방식을 채택하였습니다.

(3) javascript에 대한 이해가 높아졌습니다. 특히, javascript에서 구조체 배열을 만드는 법을 익혔습니다.

• 처음엔 javascript에는 구조체가 따로 지원되지 않는다는 글을 접하고 굉장히 당황하였으나, 더 효율적인 방식으로 코드 기술이 가능하기에 지원하지 않는 듯 합니다. javascript 구조체 배열을 생성하고 사용하는 코드단은 다음과 같습니다.

var entryArray = {
	mark : [],
	content : []
};
...
var markEntry = game.add.text(10, line_h*line, input_line, textStyle_line_mark);
var userInputEntry = game.add.text(30, line_h*line, recentInput, textStyle_input);
(entryArray.mark).push(markEntry);
(entryArray.content).push(userInputEntry);
...
var markEntry = game.add.text(10, line_h*line, input_line, textStyle_line_mark);
var userInputEntry = game.add.text(30, line_h*line, recentInput, textStyle_input);

(entryArray.mark).push(markEntry);
(entryArray.content).push(userInputEntry);

• 위처럼 etnryArray라는 이름의, 내부에 mark라는 key와 empty Array를 value로 갖는 변수를 만들어주었습니다. 이후 각각의 entry를 받고, entryArray.mark에 push해주거나 entryArray.content에 push해주는 방식을 택했습니다.

function clear() {
	for (var i = 0; i < (entryArray.mark).length; i++) {
		(entryArray.mark[i]).text = '';
		(entryArray.content[i]).text = '';
	}
	line = -2;
}

• 사용은 entryArray 내부의 mark 혹은 content의 array length만큼 순회하며, entryArray의 mark배열에 접근하였습니다.
• 나아가, 크롬 개발자도구를 사용하는 데에 약간 익숙해졌습니다. 여전히 디버깅을 하는 데에는 버벅거리지만, 적어도 중단점을 설정하고 실행하는 법, 파일 구조를 살펴보는 법을 학습했다는 데에 큰 의의가 있습니다.

(4) 협업과 유사한 리팩토링 방식을 시도하게 되었습니다.

• 클린코드 서적을 읽은 후 머릿 속에 담아두고 실제 적용은 미루던 코드 작성 방식들을 사용해보게 되었습니다. 해당 웹 어플리케이션을 사용자가 깃블로그에 삽입하기 위해서는, 실제 코드 내부에서의 변수값을 조정하는 과정이 요구되었습니다. 이에 사용자가 나의 코드를 반드시 읽는다는 생각으로 마지막에 리팩토링을 실시했습니다. 이 과정에서 최대한 가독성 좋은 변수명을 정하고, 전역변수는 한 곳으로 옮겼으며, 사용자가 조정 가능한 변수들을 따로 모아 정리해두었으며, 불필요하게 많은 기능을 하는 하나의 함수를 여러 개의 함수로 분리했습니다.
• 타인이 내 코드를 반드시 본다는 생각으로 코드를 작성하고, 리팩토링하는 과정에서 코드는 하나의 줄글이나 다름없다는 생각을 했습니다. 또한 주변인들이 대다수 비개발직군에 종사하는 까닭에, 해당 웹어플리케이션을 보러 오고, 사용해보기 위해서는 반드시 가독성 좋고 이해하기 쉬운 코드가 필요했습니다. 이 과정에서 변수명과 함수명의 중요성을 배웠습니다.

(5) 깃허브를 아름답게 유지하려는 노력

• 특정 기능 추가 등 한 번의 개발 과정이 끝날 때마다 바로바로 커밋을 해주고자 노력했습니다. 몇몇 프로젝트에서 언제든 내 원본 코드가 나의 실수로 망할 수 있다는 사실을 깨달았기 때문에, 기능 구현이 완료될 때마다 바로바로 커밋을 해두었습니다. 아니나다를까, 웹서버에 배포가 안되어 폴더 구조를 임의로 바꾸었을 때 생긴 에러를 고치고자 깃허브 커밋 히스토리에서 많이 도움을 받을 수 있었습니다.

(6) 버전의 중요성

• Phaser 2.x(phaser.min.js)를 사용하던 도중, Phaser 3.x(phaser.js)를 사용하게 되었습니다. 해당 과정에서 분명히 인식되던 함수들이 인식이 되지 않아 keyboard input 파트의 코드를 변경하는 작업이 있었습니다. 해당 과정에서 머리로만 이해하면 버전의 중요성을 느낄 수 있었습니다.
• 위의 작업에선 game.input.keyboard.onCallBack(...) 함수가 game.input.keyboard.on(...)으로 변경되었습니다. 해당 과정에서 한 글자씩 character를 받아오던 get_keys() 코드가 키 코드(event.keyCode)를 받아오는 코드로 바뀌었습니다. 미리 get_keys() 함수로 빼두었기에 탈부착이 어렵지 않았고, 이에 따라 한 함수는 하나의 기능을 해야한다는 클린 코드의 원칙 중 하나를 실감할 수 있었습니다.

(7) 웹서버 배포, 웹어플리케이션 배포 과정

• gitpage에서 업로드하기 이전 개인 웹서버에 올리는 과정을 겪었습니다. 네이버클라우드플랫폼에서 받은 1년 짜리 무료 CentosOS 서버를 사용했으며, 현재 제 웹서버에서도 배포되고 있습니다. 해당 링크는 여기를 클릭하시면 됩니다.
• 배포를 체험해보며, jdk 버전을 새로 깔고, tomcat 8.5버전 서버를 텅 빈 웹서버에 깔았습니다. 이 과정에서 tomcat의 root에 대한 이해가 높아졌고, webapp으로 접근하여 파일을 읽는 동작방식을 어렴풋하게 이해했습니다.
• tomcat을 로컬 서버로 돌리며 작성한 자바스크립트 파일과 index.html을 어떻게 웹 서버에 올리는지를 파악했습니다. 굉장한 과정이 있는 줄 알았는데, 학부생 때 Visual Studio에서 콘솔 어플리케이션을 Release하듯이 IDE에서 Export를 하면 됩니다. 직접 간단한 배포까지 끝마쳐보며 웹서버의 동작에 대한 이해를 했습니다.

(8) 작업 시간에 대한 이해

• 늘 그래선 안된다는 걸 알고는 있었지만 작업 시간을 측정할 때마다 늘 작업 시간을 적게 생각해왔습니다. 내가 모든 걸 고려해서 잡는 작업시간보다 대략 2배 정도는 시간이 더 드는 듯 합니다.
• 특히 전혀 모르는 라이브러리를 사용하는 경우에는 더더욱 그렇습니다. 처음 작업을 구상하고 실행할 때에는 cmd창을 직접 그리는게 아니라, 뭔가 다른 방법이 있으리라 생각했었는데요. 막상 Phaser 게임 엔진을 뜯어보니 당연한 거지만 text 까지도 하나하나 캔버스에 찍어주는 것이었씁니다. 이에 따라 텍스트간의 간격을 조정하는 일, 특히 라인 수가 많아질 경우 라인들이 밀리는 점과 /CLEAR 함수 이후의 간격 조정 등에서 어려움을 겪었습니다. 이처럼 전혀 모르는 상태에서 생각한 작업시간은, 실제로는 최소 그 두배는 든다는 점을 배웠습니다.

(9) 나의 개발 집중력에 대한 이해

• 재미있는 일이 있으면 쉬지 않고 그 일만 하는 저의 특성은 알고 있었지만, 정신과 체력에 약간 부정적인 영향이 갈 만큼 몰입하는 습관이 있는 듯 합니다. 저녁 시간에 시작해서 작업을 끝내고 아침에 자는 것보단, 구상을 끝낸 후 다음 날 아침부터 작업을 시작해 평소의 취침 시간에는 잠드는 것이 좋을 듯 합니다.
• 방 불을 끈 상태로 주변 조명으로 주황등 스탠드를 켜고, 책상 끝의 흰색 작업등 스탠드를 켰을 때에 편안할 정도로 주변 조도가 낮은 것을 선호하는 편입니다. 집중력이 높은 환경인 만큼, 알람이 오거나 컴퓨터 색상이 바뀌는 것(갑자기 야간모드가 켜져서..)에 민감하게 반응하는 듯 합니다. 가장 적합한 업무 환경을 찾았으니, 이제 어디서든 이렇게 집중할 수 있도록 환경을 조절하거나 조도를 맞추는 법을 익히면 되겠습니다.
• 감명깊게 본 개발자 브이로그에서 “시간의 리듬”이라는 말을 하셨었는데, 그걸 단적으로 체험한 느낌입니다. 한 번 리듬을 타면 쭉 지속되고, 리듬이 흐트러지면 다시 원래의 집중력을 찾는 데에 시간이 걸리더라구요. 생활패턴 역시 리듬감있게 맞춰나가야겠습니다.

💻 개발 : Joomal
▶️ 개발환경 : javascript, phaser 3.5.x , apache tomcat 8.5.x
▶️ IDE : Eclipse, Bracket
▶️ 순작업시간 : 14시간