인생을 걸고 배우는 개발 - 3주차
한국의 Programming Bootcamp - 3/12주차
Tough White-board Time in every Thursday. MISSION — During problem solving, keep talking.
매일 아침9시, 그날의 시작과 함께 우리는 매일 Toy-Problem으로 다양한 알고리즘 문제들을 푼다. 하지만 목요일만은 다르다. 목요일 아침으로 Pair White-boading시간이다. 2인1조가 되어 회사의 인터뷰를 보듯이 주어진 문제를 화이트보드에 풀고 설명한다. 화이트보딩과 손코딩이 익숙하지 않지만 생각하는 과정을 끊임없이 말로 설명하고, 문제 해결 과정의 방법을 찾아나간다. 솔루션이 바로 생각나지 않더라도 내가 알고 있는 것들을 최대한 설명하고, 그것들을 이용하여 문제를 해결하려고 한다. 이렇게 1시간 동안 화이트 보딩을 하고 나면 쌀쌀한 날씨에도 등에는 땀줄기가 흐른다.
DAY1~2. Browser apps, jQuery, and Ajax : “Chatter Box”
Firebase로 만들어진 Code/States 공통서버를 이용하여 채팅서비스를 구현하는 Sprint였다. 처음으로 서버와 연동하여 무언가를 만든다는 것이 신이 났었다. 하지만 생각보다 많은 어려움이 있었다. XSS attack을 피하기 위해 Text를 정규표현식(Regular Expression)으로 변환하였다. 그리고 카카오톡을 모방하여 새로운 메세지가 나올 때마다 new Audio를 사용하여 메세지 알림음이 발생하게 하였다. 또한 각 우리가 카카오톡에 들어가면 각 채팅창의 마지막 메세지가 채팅룸 목록에 보이는 것처럼 채팅창 제일 최신 메세지의 20자를 룸네임 아래에 보이도록 설정하였다.
‘isRinged’ and ‘setTimeout’ is a FLAG to block the excessive alarm.하지만 이런 기능구현과 버그 수정에만 집중을 하다보니 우리의 디자인(CSS)은 저기 저 먼 깐따비아 행성으로 가고 있었다. 그리고 그것을 되돌리기에 늦었다는 것을 우리는 너무 늦게 깨달아버렸다. 이 스프린트를 통해 무작정 기능 구현을 위해 코딩에 들어가기 보다는, 어떤 제품을 어떻게 만들 것인지에 대해서 팀원(페어)과 충분히 이야기를 하여 서로의 생각에 대해 컨센서스(Consensus)를 이루고 진행해야 한다는 것을 배웠다.
I realized the importance of the designer … OTL … Left side : Room list & Right side : Chat roomDAY3~4. MVC and Backbone: “mytunes”
이번 스프린트를 통해 데이터를 관리하는 Model, 유저에게 데이터를 보여주는 View, 그리고 사용자의 인터랙션을 전달해주는 Controller로 구성된 MVC패턴에 대해서 처음으로 학습하게 되었다.
List of client part. data & models & collections & Views … without Controller실제로 우리가 구현한 Structure에서는 Controller가 없었다. 대신 View가 Controller의 기능들을 구현하였다. 실제로 Stackoverflow에 Backbone이 MVC 패턴인지 MV* 패턴인지에 대한 질문이 꽤 있는 것으로 보아 많은 사람들이 나와 같은 의구심을 같는 것 같다. 명확한 답은 없었지만 View가 Controller의 역할까지 하기 때문에 일종의 MVC패턴이라고 본다는 답변이 있었다. 실제로 Backbone의 공식 홈페이지에는 별도로 Controller에 대한 설명은 없었다.
It is ‘myTunes’ that is a friend of ‘iTunes’유저인터페이스와 애플리케이션 로직을 분리하여 사용한다는데 있어서 MVC 패턴은 굉장히 편리했다. 하지만 양방향 데이터 바인딩에 대한 복잡함 때문에 이해하는데 많은 시간이 필요로 했다. 사실 현재 많이 사용하는 Javascript의 Front-End Framework으로는 Backbone보다는 Angular와 React가 핫(Hot) 한것 같다. 하지만 MVC 패턴을 이해하는데 있어서 유용한 스프린트였고, 앞으로 배울 Angular나 React와 비교하며 어떤 것의 어떤 점이 좋은지에 대한 고민을 해볼 필요가 있는 것 같다.
DAY5~6. ES6, APIs, and React : “recast.ly”
드디어 고대하던 React를 이용할 수 있는 Sprint가 나왔다. Facebook에서 개발하고, 한창 인기를 끌고있는 React를 이용하여 YouTube의 모방페이지를 구성하였다. 우선 기본DB를 이용하여 동작하는 홈페이지를 만들고, 추후에 YouTube의 API를 이용하여 라이브 연동이 되도록 하였다.
Stucture of DirectoriesMVC패턴이 아닌 View에 특화된 React를 이용하면서, View를 Search, Videoplay, VideoList 3부분으로 나누어 프로그래밍을 진행했다. Parent에서 Child로의 단방향 통신을 이용해 Child에 변경사항이 발생할 때마다 데이터를 갱신해주는 React의 동작이 신기했다. 그리고 데이터의 흐름 중 props와 state 데이터가 존재하데 props는 parent에게 받은 데이터로써, 그 변경이 불가능하다. 하지만 state는 변경가능한 데이터이다. render()를 통해 지속적으로 동기하여 데이터를 표현해줘야 하는 경우, 이런 경우 state를 유용하게 사용하였다. onKeyDown을 통해 keydown을 인식하여 400ms의 간격으로 Live search가 되게 만들었다. 결과물은 아래와 같다.
MVC패턴에 대해 학습하고 다양한 Framework를 이용하여 학습을 한 한주였다. 앞으로도 5주차까지는 Framework에 대해 익숙해지고, 그를 이용한 Sprint를 진행할 것이다. 2일에 1개의 Sprint를 진행하면서 모든 것을 깊이있게 공부하고 넘어가지는 못 하고 있다. 하지만 하나의 Framework에 대해서 문서들과 API, Library를 이해하고 사용하는 것들에 익숙해지고 있다. 이제는 낯선 Framework를 진행하는 것이 두렵지 않고 설렌다. 기본에 충실하여 Framework에 대한 구조를 이해하는데 집중해야겠다. 6일간의 일정을 끝내는 토요일이 되면, 모두가 많이 지쳐있다. 하지만 6일간 우리들이 해낸 Sprint와 결과물들을 보면서 서로를 응원하고, 격려하고, 칭찬한다. 우리가 이렇게 재미있게 프로그래밍을 배울 수 있는 이유는 아마도, 서로가 각 자의 꿈을 위해서 열심히 하고 있으며, 함께 배울 수 있는 서로가 있어서가 아닐까 싶다. 그리고 그 서로가 있기에 힘든 과정도 즐겁게 할 수 있는 것 같다.
Happy Birthday Party in Code/Sates & HiveArena