우리가 편하게 개발하고 있는 토대가 되는 여러가지 도구들, 혹은 기술들 중에 ‘이건 도대체 어떻게 만들었을까?’ 라는 의문을 가지게 될때가 종종 있다.
나중에 한번 알아봐야지 하고 그냥 지나칠 경우가 굉장히 많은데 세상은 나처럼 게으른 자를 위해 나보다 조금 더 부지런한 사람이 작업을 해 두었다. ‘Build your own X’ 라는 프로젝트가 오늘의 주인공이다. X 대신에 내가 만들고 싶은 무엇을 대입하면 된다라는 뜻의 이 프로젝트는 프로젝트 Readme 파일에 리차드 파인만의 명언이 적혀있다. ‘What I cannot create, I do not understand’
대체적으로 동감한다. (대체적이라고 쓴 것은 리처드 파인만이 천재중의 천재이기 때문에 여지를 남겨 둔 것이다.) HTML의 한 부분을 파싱할려고 해도 jQuery를 import 해서 쓰던 옛 습관들을 되돌아 보면 가끔은 내가 라이브러리 덕후인지 개발자인지를 헷갈릴 때도 있다.
개인적으로 궁금해 했었던 프로젝트들
Web Framework
가장 최근에 궁금해 했었던 프로젝트는 아마도 React 가 아니었나 싶다. GIS(Geographic Information System) 프로젝트를 하면서 Zero Dependency Map Framework를 만들던 추억을 되짚어 보면서 언젠가 비슷한 프레임워크를 만들어야지 했었던 다짐(?)들이 솔솔 떠오르는 주제중의 하나가 웹 프레임워크인데 Virtual DOM이 어떻게 작동할지가 가장 궁금한 영역이었다.
아래의 리스트들을 살펴보자.
- JavaScript: WTF is JSX (Let’s Build a JSX Renderer)
- JavaScript: A DIY guide to build your own React
- JavaScript: Reverse Engineering React
(중략) - JavaScript: Build your own Vuejs
- JavaScript: Build Your own Simplified AngularJS in 200 Lines of JavaScript
JavaScript: How to write your own Virtual DOM
Welcome To Facebook 의 약자라 믿으며(응?) 읽어볼 수 있는 “WTF is JSX”는 어떻게 JSX를 파싱해서 렌더링 트리를 만드는지에 대한 내용이 주로 있다. 이 글에서 가장 중요한 부부은 h() 함수. hyperscript 부분이다.
1
2
3
4function h(nodeName, attributes, ...args) {
let children = args.length ? [].concat(...args) : null;
return { nodeName, attributes, children };
}
hypertext를 JavaScript 객체로 바꿔 주는 부분이라고 볼 수 있다.
이 내용은 마지막 링크인 “How to write your own Virtual DOM” 과 굉장히 자연스레 이어지기 때문에 독자들에게는 좋은 인사이트를 줄 수 있을 것 같다.
위의 hyperscript가 JSX 를 파싱해서 아래와 같은 형태의 DOM 트리를 만들고나면 브라우저에 DOM으로 표현을 하게 되면 이른바 우리가 알고 있는 브라우저에 렌더링 하는 형태로 드러나지게 되는 것이다.1
2
3
4h(‘ul’, { ‘class’: ‘list’ },
h(‘li’, {}, ‘item 1’),
h(‘li’, {}, ‘item 2’),
);
이후, Hanlding Changes 부분이 바로 Tree의 변화를 감지해서 바로 그려주게 되는 내용을 기술하고 있다고 보면 된다. props와 state등의 더 깊은 부분은 이 포스팅에서는 찾아볼 수 없지만, 이루어지는 메커니즘을 이해하는데에는 훌륭한 글이라 보여진다.
물리엔진
물리 엔진(영어: physics engine) 또는 물리 연산 엔진은 강체동역학(충돌 감지 포함), 연체동역학, 유동역학과 같은 단순한 특정 물리 시스템을 최대한 시뮬레이션하려고 하는 컴퓨터 소프트웨어이다.
- 참고: 위키백과
물리엔진의 존재를 처음 생각하게 된 것은 Doom 이라는 게임을 접하면서 였던 거 같다. 물론 그 당시 수준이란게 물리엔진이라는 수준 보다는 3D 엔진의 도화선이 된 것이었지만 움직이면서 오브젝트가 작동하는 방식들이 일종의 물리엔진을 가지기는 한다.
유명한 물리엔진은 하복(havok) 과 크로노 프로젝트(project chrono)가 있다.
하복을 사용하는 게임으로는 철권 태그 토너먼트, 디아블로3, 엘더스크롤5: 스카이림, 헤일로2~4, 하프라이프2, 스타크래프트2 등의 명작 게임이 즐비하다.
이 물리 엔진을 위해서 아래의 내용들을 제공하고 있다.
- C: Video Game Physics Tutorial
- C++: Game physics series by Allen Chou
- C++: How to Create a Custom Physics Engine
(중략) - JavaScript: Build your own basic physics engine in JavaScript
- JavaScript: How Physics Engines Work
이 중에서 “Build your own basic physics engine in JavaScript”에는 브라우저에서 어떻게 캔버스에 물리 오브젝트를 그리고 값을 변화시기는지 간단하게 나와 있다. 이 중에서 가장 초보자들이 가장 눈여겨 봐야할 부분은 다음의 소스 코드에서 requestAnimationFrame 이 들어간 부분이다. 이 부분은 브라우저 캔버스에서 60프레임을 확보하기 위해서 사용되는 내장 브라우저 함수이다.1
2
3
4
5
6
7Loop = function()
{
//재귀호출을 실행한다.
requestAnimationFrame(Loop);
//실제 프레임 안에서 작동하는 내용을 기술해서 작동하도록 한다.
frameRender();
}
requestAnimation에 대한 자세한 내용은 다음을 통해 숙지하자.
모질라 개발자 사이트 - requestAnimationFrame
“How Physics Engines Work” 글에서는 조금 더 나아가서 실제로 오브젝트에 물리식들을 조금씩 적용해 보는 예제들을 확인할 수 있다. 뉴턴의 제2법칙 -
물체의 운동량의 시간에 따른 변화율은 그 물체에 작용하는 힘과 (크기와 방향에 있어서) 같다. -인 F=ma 를 찾아볼 수 있다. 즉 질량 * 가속도 = 힘으로 우리가 알고 있는 내용이다.
실제 중력 가속도 인 0.98을 이용해서 공이 자유낙하 하는 예제를 포함하고 있다.
jsfiddle 예제
jsfiddle 예제를 통해서도 볼 수 있다.
더 관심이 있는 사람은 다른 아티클들을 가지고 더 들여다 볼수도 있다.
이 외에도 블럭체인, OS, Database, 검색엔진 같은 흥미로운 주제들을 생각해 볼 수 있을 것으로 보인다.
맺으며
조금 더 좋은 개발자가 된다는 일은 어떤 느낌일까? 개인적으로는 조금 더 깊은 본질에 가까워지는 노력을 게을리 하지 않고, 흘러가는 트렌드를 놓치지 않기 위해 노력하지만 천둥 벌거숭이 같은 남자 아이 셋을 키우는 입장에서는 언제나 시간이 부족하다. 하지만 언제나 이런 좋은 리소스들이 넘쳐나는 세상에서 배울것이 무궁무진하다는 것은 고무적인 일이다.