지난 4월에는 깃허브(GitHub) 기술 트렌드 대신 “Responsive Web(반응형 웹)“에 대해 다루었습니다. Responsive Web의 개념은 이해하지만 막상 어떻게 개발해야 하는지를 몰라 막막했던 개발자들을 위해 꼭 알아야 하는 기술들을 소개했었죠.

Responsive Web
[BY 삼성SDS] 반응형 웹(Responsive Web)...
반응형 웹

오늘은 5월의 깃허브에서 어떤 프로젝트가 개발자들에게 큰 호응을 얻었는지를 살펴보겠습니다.

1. 5월의 가장 핫한 프로젝트 10선

아래 리스트는 5월 한 달간 깃허브에서 가장 핫했던 프로젝트입니다. 간단히 소개하자면, "Build your own X"는 '개발자가 직접 만들 수 있는 프로젝트만이 그가 제대로 이해한 것'이라는 지극히 평범하면서도 비범한 프로젝트입니다. javascript-algorithm의 경우, JavaScript로 구현한 알고리즘의 예제들이 이에 해당합니다. tui.calendar는 nhn 엔터에서 만든 JavaScritpt 프레임워크 중 하나인데, Dooray를 만든 팀에서 지속적으로 오픈소스화하고 있는 것이 예사롭지 않습니다.

2. 주목할 만한 프로젝트: build-your-own-x

개발자들이 편하게 개발할 수 있는 토대가 되는 여러 도구들, 혹은 기술들에 대해 '이건 도대체 어떻게 만들었을까?'라는 의문을 가지게 될 때가 종종 있습니다. 필자처럼 게으른 사람은 ‘나중에 한번 알아봐야지.’ 하고 지나치는 경우가 많은데, 부지런한 사람들은 곧바로 의문을 풀기 위한 작업을 하기도 합니다."Build your own X"라는 프로젝트가 바로 그 주인공이죠. "X 대신에 내가 만들고 싶은 '무엇'을 대입하면 된다." 라는 뜻의 이 프로젝트는 Readme 파일에 리처드 파인만(Richard Feynman)의 명언이 적혀 있습니다.

'만들어낼 수 없다면, 이해하지 못한 것!' 필자는 이 말에 대체적으로 동감합니다. ('대체적'이라고 한 것은 리처드 파인만이 천재 중의 천재이기 때문에 여지를 남겨둔 것입니다.) HTML의 한 부분을 파싱하려고 해도 jQuery를 import해서 쓰던 옛 습관들을 돌아 보면 가끔은 필자가 라이브러리 마니아인지 개발자인지 헷갈릴 때가 있죠.
twitter: https://twitter.com/danistefanovic
깃허브 페이지: https://github.com/danistefanovic/build-your-own-x

3. 필자가 궁금했던 프로젝트 이모저모

① Web framework
필자가 최근에 가장 궁금해한 프로젝트는 React였습니다. GIS(Geographic Information System) 프로젝트를 진행하면서 Zero Dependency Map Framework를 만들던 시절을 생각해 보면, ‘언젠가 비슷한 프레임워크를 만들어야지.’ 다짐했던 기억들이 솔솔 떠오릅니다. 이러한 다짐을 떠올리게 하는 주제 중의 하나가 웹 프레임워크죠. 특히, Virtual DOM이 어떻게 작동할지가 가장 궁금한 영역이었습니다.
아래의 리스트들을 살펴보시죠.

'Welcome To Facebook'의 약자(?)라 추측되는 "WTF is JSX"에는 어떻게 JSX를 파싱해서 렌더링 트리를 만드는지에 대해 설명되어 있습니다. 이 글에서 가장 중요한 부분은 h( ) 함수. 즉, hyperscript 부분입니다.

hyperscript는 hypertext를 JavaScript 객체로 바꿔 주는 부분으로 볼 수 있습니다. 이 내용은 마지막 링크인 "How to write your own Virtual DOM"과 자연스레 이어지기 때문에 이 글을 읽고 있는 여러분에게 좋은 인사이트를 줄 수 있을 듯합니다. 위의 hyperscript가 JSX를 파싱해서 아래와 같은 형태의 DOM 트리를 만들고 나면 브라우저에 DOM으로 표현되어 이른바 우리가 알고 있는 '브라우저에 렌더링하는 형태'로 드러납니다.

이후 Handling Changes 부분이 바로 Tree의 변화를 감지해서, 그려지는 내용을 기술한다고 보면 됩니다. 위 포스팅에 props와 state 등에 대한 더 자세한 내용은 없지만, 메커니즘이 이루어지는 과정을 이해하는 데 있어서는 훌륭한 글이라 생각됩니다.

② 물리엔진
물리 엔진(영어: physics engine) 또는 물리 연산 엔진은 강체동역학(충돌 감지 포함), 연체동역학, 유동역학과 같이 단순한 특정 물리 시스템을 최대한 시뮬레이션하려는 컴퓨터 소프트웨어입니다.
( ※ 참고: 위키백과)

물리엔진의 존재를 처음 생각하게 된 것은 'Doom' 이라는 게임을 접하면서였습니다. 물론 당시에는 게임 엔진의 수준이 물리엔진이라고 부르기에는 좀 초라했습니다. 하지만 Doom 자체는 3D 게임 엔진의 도화선이 될 정도로 인상적인 작품이었죠. 특히, 움직이면서 오브젝트가 작동하는 방식들은 현재의 물리엔진으로 발전하는 기폭제가 되었습니다. 현재 유명한 물리 엔진으로는 하복(havok)과 크로노 프로젝트(project chrono)가 있습니다. 하복을 사용하는 게임으로는 철권 태그 토너먼트, 디아블로3, 엘더스크롤5: 스카이림, 헤일로2~4, 하프라이프2, 스타크래프트2 등 명작 게임이 즐비하죠.

물리 엔진을 배우기 위해 아래의 내용을 살펴보겠습니다.

이 중 "Build your own basic physics engine in JavaScript"에는 브라우저에서 어떻게 캔버스에 물리 오브젝트를 그리고 값을 변화시키는지 간단히 설명되어 있습니다. 이 중에서 초보자들이 가장 눈여겨봐야 할 부분은 다음의 소스 코드에서 'requestAnimationFrame'이 들어간 부분입니다. 이 부분은 브라우저 캔버스에서 60프레임을 확보하기 위해 사용되는 내장 브라우저 함수입니다.

requestAnimation에 대한 자세한 내용은 다음을 통해 숙지할 수 있습니다.
모질라 개발자 사이트 - requestAnimationFrame
"How Physics Engines Work" 글에서 조금 더 나아가 실제로 오브젝트에 물리 공식을 조금씩 적용해 보는 예제들을 확인할 수 있습니다. 예를 들어, 뉴턴의 제2법칙ㅡ물체 운동량의 시간에 따른 변화율은 그 물체에 작용하는 힘과 (크기와 방향에 있어서) 같다.ㅡ인 F=ma를 찾아볼 수 있습니다. 우리가 "질량*가속도=힘"으로 알고 있는 바로 그 내용이죠.
또, 실제 중력 가속도인 0.98을 이용해서 공이 자유낙하하는 예제를 포함하고 있습니다. 링크의 jsfiddle 예제를 통해서도 볼 수 있습니다. (jsfiddle 예제)

[jsfiddle 예제 실행시]

더 관심 있는 분들은 다른 아티클들도 확인해보길 추천합니다. 이 외에도 블록체인, OS, Database, 검색엔진 등 흥미로운 주제들에 대해 생각해볼 수 있을 것입니다.

4. 맺으며

조금 더 좋은 개발자가 된다는 것은 어떤 의미일까요? 필자는 본질에 더 가까워지기 위해, 트렌드 흐름을 놓치지 않기 위해 부지런히 노력하고 있지만 남자아이 셋을 키우는 입장에선 언제나 시간이 부족합니다. 그럼에도 불구하고 이러한 좋은 리소스들이 늘 넘쳐나는 세상에서 배울 것이 무궁무진하다는 것은 상당히 고무적인 일이라 생각합니다.



▶   해당 콘텐츠는 저작권법에 의하여 보호받는 저작물로 기고자에 저작권이 있습니다.
▶   해당 콘텐츠는 사전 동의없이 2차 가공 및 영리적인 이용을 금하고 있습니다.