brunch

You can make anything
by writing

C.S.Lewis

by 나는 나를 응원한다 May 19. 2016

인생을 걸고 배우는 개발 - 2주차

한국의 Programming Bootcamp - 2/12주차

본격적인 Sprint들이 시작되었다. Javascript의 inheritance와 prototype에 대해 학습하는 Pseudoclassical Subclasses, Recursion과 Javascript 구조에 대해 학습할 수 있었던 N-Queens, 그리고 Javascript의Data를 HTML, SVG(Scalable Vector Graphic), 그리고 CSS를 이용해서 뛰어난 View를 보여주는 D3js library까지… 하루 10시간 이상의 Pair programming(짝 프로그래밍)을 통해 달려갔다.

DAY1~2. Inheritance patterns : “Subclass-Dance-Party”

상속 패턴 학습를 통한 Dance-Party를 제작했다. 댄서 객체를 생성할 Dancer 함수 객체를 생성한 후, 그 특성 및 종류에 따라 3종류의 댄서(gif파일)를 만들었다. Add버튼을 통하여 종류별 댄서의 수를 늘릴 수 있고, ‘Go to strip bar’를 클릭하면 배경화면이 바뀌며, Row와 Column버튼을 통해 댄서가 줄을 맞추어 춤을 추도록 할 수 있다.

Make a dancer and move randomly with options(using by Inheritance pattern)

댄서 제작을 위한 각 함수는 Child Class를 생성하고 new를 통하여 생성자를 호출한 후 prototype chain을 활용하여 상속을 구성한다. Child class의 prototype은 Parent class의 인스턴스를 참조한다. 이렇게 생성한 각 댄서가 다른 종류의 댄서를 만났을 때 그 자리에 멈춰서 함께 춤을 추도록 하였다. 이를 위해 For-loop을 통해 각 댄서 사이의 거리를 계산하였고, 그 거리가 일정 픽셀이하가 되었을 때 move를 멈추게 하였다.

처음에는 랜덤값을 통하여 댄서의 이동을 컨트롤하였더니, 주어진 화면 밖으로 나가는 현상이 생겼다. 이를 수정하기 위해 만약 이동 후의 위치가 화면밖일 경우, 이동할 위치를 화면 안이 될 때까지 랜덤생성하도록 하였다.

Result of Mocha-SpecRunner.html(Every sprint is with TDD)

DAY3~4. Algorithm : “N-Queens”

N-Queens란 체스의 (상하,좌우,대각선 이동이 가능한)퀸을 체스판에 놓을 때, 이동가능 경로가 다른 퀸가 겹치지 않도록 하여 놓는 것이다. 이동경로가 겹칠 경우, 해당경로는 아래 그림과 같이 붉은 색으로 채워진다.

N-queens to check the validity whether I can put or not(using by Algorithms)

우리는 이 Sprint를 풀기위해 우선 RowConflict, ColConflict, MajorDiagonalConflict, MinorDiagonalConflict 여부를 확인할 수 있는 함수를 작성하였다. 그리고 주어진 SpecRunner를 통해 함수의 정상작동여부를 확인할 수 있었다. 그리고 이렇게 개별적으로 작성한 함수를 통해 체스의 (상하, 좌우만 이동 가능한)룩과 퀸에 대한 솔루션과 그 경우의 수를 측정하는 함수를 작성하였다.

특히 경우의 수를 측정하기 위해서는 말을 체스판에 임의로 놓고 진행을 하다가 그 다음줄에 놓을 경우의 수가 없다면, 다시 이전으로 돌아와 다음 경우의 수로 진행을 하는 방법을 썼다. 처음에는 For-loop이나 While문으로 시도해보았지만, 계속 진행하다가 놓을 곳이 없다면 다시 이전으로 복귀를 해야한다는 점 때문에 그 구현이 어려웠다. 그렇기 때문에 나와 짝(Pair)은 2시간여를 그 알고리즘으로 고민을 하다가 결국 Recursive Function(재귀함수)으로 작성하기로 하였다.

Recursive function to check the countNQueensSolutions

페어의 도움으로 성공적으로 재귀함수를 작성하여 이 솔루션을 구할 수 있었다. 재귀함수인 setNqueen함수의 2번째 if문을 통해 Queen의 충돌가능성이 없으면 해당 row의 column에 말을 놓았다고 가정하고, 재귀함수를 통해 다음줄로 진행하여 그 과정을 반복한다. 만약 계속 진행하다가 n개의 row에 진행되기 전 경우의 수가 없다면 이전으로 돌아가고, n개의 row까지 모두 진행되었다면 solutionCount를 1 증가 시킨 후 그 재귀함수는 종료되고 이전으로 돌아가 다른 솔루션을 찾기위해 계속 진행된다. column이 n이 되기 전까지 계속말이다.

추가적으로 Advanced 로 Bitwise연산을 이용하여 해당 솔루션들을 구현해보았다. 웹문서를 통해 그 방법을 배워 함수로는 구현하였지만, 그 내용은 이해하지 못했다.

It is THE Bitwise function to find ‘countNQueensSolutions’

DAY5~6. D3(Data-Driven Documents) : “Watchout”

D3를 이용하여 움직이는 enemy를 만들고 그것을 피하는 일종의 게임을 만드는 Sprint였다. 우선 D3의 canvas를 설정한 뒤, transition과 setTimeout을 이용하여 움직이는 enemy를 생성하였다. 이 생성은 D3 웹API(Application Programming Interface)를 통해 쉽게 만들 수 있었다. 하지만 문제가 하나 발생하였다. 바로 이 enemy들이 우리가 정해준 canvas 밖으로 계속 빠져나간다는 것이였고, 우리의 통제를 벗어났다. 우리는 이것을 해결하는데 꽤 많은 시간을 할애하였고, 우리는 gravity를 이용하여 아래의 코드를 통해 문제를 해결하였다. enemy circle이 경계선으로 갈 경우, 중력과 같은 역할을 하는 gravity함수를 통해 canvas의 안으로 튕겨지는 것처럼 보이도록 했다.

This code save us from the enemy blackhole that never comeback

우리가 조종하는 Main Circle은 cx, cy좌표의 최대값을 canvas 내부의 값으로 한정하여 드래그 도중 Main Circle이 캔버스 밖으로 빠져나가 드래그로 다시 끌고올 수 없는 문제를 해결하였다. 처음에는 드래그의 경계를 두지 않아 캔버스 밖으로 빠져나갈 경우, 마우스의 클릭에 동작하지 않기 때문에 드래그로 불러올 수 없어서 아주 난감했었다.

Check the collision the BIG BLACK circle with others(by using D3)

enemy와 Main Circle의 충돌은 각 값의 거리를 피타고라스 함수로 계산하여 측정하였고, 여러개의 enemy가 동시에 중복충돌하는 것을 카운트하지 못하도록 하기 위해서 setTimeout을 통해 일정시간동안의 충돌을 무시하도록 하였다.

사실 우리는 이런 게임을 만들었지만, D3는 데이터 시각화에 있어서 효과적으로 표현할 수 있는 좋은 라이브러리이다. D3의 다양한 Examples를 보면 감탄사를 연발하며, 그 매력에 빠져들 수 밖에 없을 것이다.

Javascript를 통하여 다양한 프로그램을 작성하고, 라이브러리와 친해지는 연습을 통해 API 문서와도 조금씩 친해지고 있다. 아직은 미숙한 Googling과 온통 영어로 된 낯선 API들이지만 그것들을 통해 조금씩 알아가고 적용해가면서 변화되어 가는 결과물들을 볼 때 정말 짜릿한 희열이 느껴진다. 매일 많은 시간 노트북에 앞에 앉아 머리를 감싸며 고민하고, 토론하고, 검색하는 그 시간들을 충분히 이겨낼 수 있을 만큼 : )