[Angular2] 상태 다루기

참고: angular2에 대한 연재는 여기를 참조해 주세요. 틀린 부분이나 의견, 피드백은 언제든지 환영합니다. 

들어가기

이번 글에서부터 지난 시간에 설명한 Component에 살을 붙이기 시작합니다. 오늘은 컴포넌트의 상태값의 개념을 이해해보고 Angular2에서는 어떻게 상태를 관리하는지 간략하게 설명합니다. 이를 위해 Component 클래스에 첫 변수와 메서드를 정의해 봅니다.

 

상태(State)에 대해서

웹사이트에서 상품을 구매할 때 우리는 그림에서 보는 바와 같이 “… 동의”라는 체크박스를 흔하게 접하게 됩니다. 이 때 체크박스는 사용자의 클릭 행위에 따라서 상기의 내용에 동의하는지 여부를 확인하는 용도로 쓰입니다.  그리고 체크박스는 다음의 두가지 의미 중 하나를 반드시 갖게 됩니다.

# 체크박스 상태 의미
1 체크함 내용에 동의
2 체크 안 함 내용을 안 읽었거나 동의하지 않음

따라서 HTML 요소 들이 사용자의 행위에 따른 상태를 가질 수 있습니다. 보통은 예제의 체크박스를 포함하여 Form을 구성하는 input 요소나 셀렉트박스, 라디오박스도 상태를 가집니다.

 

상태정보를 다루는 방식

사용자의 상태 정보들이 결국 우리가 개발하는 웹 어플리케이션의 주요한 관심사이면서 또한 비즈니스 로직에 깊은 연관을 갖게 됩니다. 그렇다면 Angular2가 어떻게 상태정보를 다루는지와 비교하기 위해서 기존에는 HTML요소의 상태 정보를 어떻게 접근해서 활용해 왔는지를 확인해 봅시다.

위의 예제를 그대로 이어서 사용자가 상품 구매를 진행하기 위해서 모든 “…동의” 항목에 체크 했다고 생각해 봅시다. 보통 우리는 사용자가 상품의 구매를 위해서 반드시 “…동의”체크박스를 눌러야 한다는 입력정보의 검증로직을 작성합니다. 이 때 일반적인 웹 어플리케이션의 접근 방식은 체크박스의 “checked” property 상태 정보를 얻기 위해서 DOM API나 jQuery를 사용합니다. 아래 예제를 통해서 확인해 봅시다.

결국 DOM API나 jQuery 둘 중 어느 방식이든지 상태 정보가 필요할 때에 1. 해당 DOM에 접근한 후, 2. DOM의 상태정보를 읽어서, 3. 상태정보에 따라 해당 로직을 수행하는 절차를 거칩니다.

Angular2에서는 위 방식과는 달리 “선언적인” 방식으로 상태정보를 다룰 수 있게 해줍니다. 먼저 실제 라이브 예제를 살펴 봅시다.

이 예제는 왼쪽의 체크박스의 체크 상태 여부를 오른쪽의 버튼을 클릭할 때 alert창을 통해서 확인하는 것입니다. 체크박스의 상태를 변경해 가면서 오른쪽의 버튼을 눌러 정상적으로 체크박스의 상태를 가져오는지 확인해 보세요. 그리고나서 예제의 컴포넌트의 소스를 살펴봅시다.

먼저 위 예제는 javascript가 아닌 Typescript로 작성되어 있고 앞으로도 Typescript를 사용합니다. Typescript에서는 변수에 타입을 선언해 줘야 하는데 타입의 선언은 변수명 뒤에 콜론과 함께 선언해야 합니다. (앞으로 Typescript 문법설명이 필요한 부분이 있을 때 마다 설명합니다. 자세한 설명은 “Typescript 문법 소개(미정)”나, Typescript 매뉴얼을 참고해 주세요)

각 코드에 대한 의미는 아래와 같습니다.

  • 첫 번째 줄: 클래스에 angular에게 Component라는 것을 알려주기 위한 Decorator를 사용하기 위해 import 한 것입니다.
  • 5~8번째 줄:은 Component의 뷰를 구성하는 마크업 정보입니다.
  • 11번째 줄: 클래스에 멤버 변수로 isChecked라는 변수를 선언했습니다.
  • 12~14번째 줄: 클래스의 constructor 메서드 안에 isChecked를 true로 초기화 했습니다.
  • 16~18번째 줄: 버튼의  click 이벤트 시 호출할 메서드를 선언하였습니다.

Component에 template에 익숙하지 않은  [(ngModel)], (click)이 눈에 거슬릴 텐데요. angular1을 경험해 보신 분들은 two-way binding을 알고 계셔서 눈치를 채셨겠지만, 데이터 바인딩에 대해서는 다음 글(데이터 바인딩)에서 설명 하기로 합니다.

이 예제가 보여주는 핵심은 Angular2에서는 상태정보를 Component의 멤버변수로 선언하여 이를 체크박스의 체크 상태와 자동으로 연결해 준다는 것입니다. 이로 인해 우리는 DOM API나, jQuery와 같이 직접 DOM에 접근해서 상태정보를 읽는 노력을 할 필요가 없습니다. Component안에서 상태정보를 직접 관리할 수 있습니다.

이 방식의 목적은 단순히 angular2가 사용자의 행위에 의해 변경된 HTML요소의 상태를 자동으로 Component의 멤버변수에 반영해 주어 편의를 제공해 주는 것에 있는 것이 아닙니다. 비즈니스 로직에 필요한 상태정보를 얻기 위해 비본질적인 DOM의 접근하는 로직은 프레임워크에게 위임하고 Component 안에서 뷰의 비즈니스로직 처리에만 집중하게 해주는 것이 좀 더 근본적인 목표입니다.

물론 “[(ngModel)]”과 같이 자동으로 데이터를 반영해 주기 위한 최소한의 정보를 마크업에 담아야 하기 때문에 완벽하게 뷰와 Component간의 종속성을 끊을 수는 없습니다. 또한 실제 어플리케이션을 개발하다 보면 직접 DOM에 접근해야할 일도 있고 jQuery를 쓰게 될 수도 있습니다.

하지만, 최대한 뷰에 종속되는 로직을 줄이거나 한군데에 모으고 Component의 역할을 비즈니스로직 처리와 이벤트 핸들링에 초점을 맞추는 것이 중요한 접근 방식입니다. (참고: 추후에 Service와 의존성 주입을 설명하면서 비즈니스로직은 Service로 빠지게 됩니다.)

 

정리

웹어플리케이션에서 HTML요소들 중에 사용자의 행위에 따라 상태정보를 가지는 것들이 있습니다. 이 상태정보는 기존 방식에서는 DOM에 접근해야만 얻을 수 있었습니다. Angular2에서는 Component는 순수하게 상태정보를 다루고 사용하는 역할에만 집중하고 DOM에 접근하는 역할은 angular 프레임워크 내부의 동작에 위임합니다. 다음 글에서 angular가 자동으로 DOM의 상태를 Component 내부의 상태에 반영해 주는 원리인 “데이터 바인딩”에 대해서 살펴보기로 합니다.

Angular2 글 목록보기

[리뷰] 코딩 클럽 LV3. 제대로 된 파이썬 앱 만들기

코딩 클럽 LV3. 제대로 된 파이썬 앱 만들기“는 한빛리더스 시즌 2 활동의 마지막 미션 리뷰도서입니다. 이 책은 영국에서 청소년을 대상으로 “파이썬”을 활용하여 프로그래밍을 교육할 목적으로 제작된 총 4권의 시리즈 도서 중 3번째입니다.  LV3를 포함하여 LV1, LV2도 동일한 번역자들을 통해 기출간 되었기에 LV4도 나올 것 같습니다.

coding_club_3-1

책 겉표지와 외관만 보면 어렸을 때 공부했던 형형색색으로 표현된 영어교재와 유사한 느낌을 받습니다. 외관 뿐 아니라 목차나 내용의 배치와 구성을 보면 아이들을 위한 교재라는 느낌을 더 잘 받을 수 있습니다. 책 주제가 “10대를 위한 프로그래밍 노트”라고 하는데 청소년들에게는 다소 유치할 수 있겠다는 느낌은 들기는 합니다. ^^;

coding_club_3-2

내용적인 측면을 보면 이 책은 LV1, LV2에서 다룬 파이썬3, 변수, for loop 등 기본적인 내용을 전제로 하고 이야기를 시작합니다. 책의 부제 “제대로 된 파이썬 앱만들기”와 같이 3권의 목표는 핑퐁게임(My Pong)이라는 하나의 완결된 앱을 만드는 것입니다.

목차를 보면 알 수 있듯이 My Pong 게임을 OOP 기반으로  게임을 구성하는 요소들을 하나씩 구현하도록 안내합니다. 당연한 이야기지만 책에서 클래스, 객체 등에 대해서 상세히 다루지는 않고 게임을 개발하는데 필요한 최소한의 개념만 다루고 있습니다. 실제 모델링의 과정을 아래 그림처럼 상세하게 그림으로 표현하고 하나의 클래스를 도출하는 과정도 짧지만 잘 설명하고 있습니다. 물론 그래도 처음 접하는 친구들은 클래스가 뭐고 객체가 뭔지 궁금은 하겠지만요…

coding_club_3_7

그래도 책의 목적이 비전공자들에게 하나의 완결된 프로그램 개발을 하는 과정을 경험하게 해주는 것이 목적이라 내용을 적절하게 잘 가지치기한 점은 이 책의 큰 장점 중 하나인 것 같습니다.

비전공자를 대상으로 한 교재이다 보니 상당한 친절함을 책에서 찾아볼 수 있습니다. My Pong 구현을 위해서 일단 스켈레톤 코드를 주고 하나씩 구현하게 안내하는 점도 그렇고, 구현된 코드에 대한 구체적인 설명을 하나씩 놓치지 않고 해주고 있습니다.

coding_club_3_8

이 책은 대상독자가 비전공자이거나 청소년들을 대상으로 하고 있습니다. 그러다보니 실제 내용과 수준이 얼마나 적절한지,  추가했으면 하는 내용이 있거나빠진 부분이 있지는 않은지를 개발자 입장에서 판단하기는 어렵네요. 대신 1권부터 차근히 주변에 비전공자를 대상으로 한번 교육해 보면 재미있겠다는 생각을 들게 만들었습니다.

정리하면, 코딩교육 열풍(?)이 조금씩 일어나고 있는 즈음에 청소년 뿐 아니라 주변에 비전공자들에게 한번 알려주고 싶은 그런 프로그래밍 입문서가 되었으면 좋겠습니다.
readers_emblem_250

[이북 리뷰] this와 객체 프로토타입

this와 객체 프로토타입

이 책은 You don’t know JS 시리즈 중에 하나로 이 시리즈의 내용은 사실  Github에서 읽을 수도 있고 심지어 참여(?)도 할 수 있도록 공개되어 있다. 하지만 우리말로 좀 더 쉽게 읽을 수 있도록 한빛미디어에서 리얼타임 시리즈로 번역하여 이북으로 내놓고 있으며 이 책 “this와 객체 프로토타입”은 세 번째 책에 해당한다. 다른 두 책은 You Don’t Know JS: 스코프와 클로저You Don’t Know JS: 타입과 문법이다.

참고로, 세 번째 책의 원문은 다음의 링크에서 직접 읽어볼 수 있다.

https://github.com/getify/You-Dont-Know-JS/tree/master/this%20%26%20object%20prototypes

this 바인딩의 진실

jQuery나 Angular를 쓰든 아니면 날 것으로  getElementById()를 사용하든 자바스크립트를 쓰다 보면 가장 헷갈리는 부분 중 하나가 this 바인딩이다. 책에서는 깔끔하게 this 바인딩의 4가지 규칙을 2장에서 잘 설명하고 있어 큰 도움이 된다. 적어도 앞으로는 this 바인딩으로 헷갈릴 일이 없을 것 같다. 규칙을 잊어버렸다면 2장의 정리만 읽으면 읽었던 내용이 잘 드러난다.

Class인 척 하는 Javascript ([[prototype]])

이 책에서 저자가 힘을 주어 이야기 하는 부분이 바로 자바스크립트에서 OOP를 따라하려다 보니 오해가 많아지고 있다는 점이다. 동의하는 부분이다. 자바스크립트는 OOP처럼 class에서 객체로 복사하는 타입이 아니라 reference로 위임한다는 내용은 자바스크립트를 사용하려면 꼭 숙지하고 넘어가야할 내용이다.

OLOO (Objects Linked to Other Objects)

저자는 자바스크립트가 여타의 OOP언어와 동일한 것처럼 말하지 말라고 한다. 자바스크립트와 prototype을 통해서 class 기반의 디자인 패턴을 적용하는 것은 OK! 그러나 내부의 동작원리가 위임기반이라는 것을 제대로 알기!를 강조한다. 그래서 저자는 자바스크립트를 OLOO라고 부르기를 권하고 있는데 일리있는 말이라고 생각한다.

리뷰

원문을 Github에서 볼 수도 있지만 이 책이 가지고 있는 장점이 더 있다. 한글로 쉽게 읽을 수 있다는 장점도 무시 못하지만 역자가 이해를 돕기 위해 많은 내용을 더해서 설명하고 있다는 점이다. 물론 역자가 추가한 내용은 따로 잘 구분되어 있어서 원문의 내용을 해치지 않는다.

ref

이 책을 리뷰하면서 번역된 다른 두권도 사보게 될 만큼 추천할 만한 내용이다. 자바스크립트의 입문서를 떼고 이 시리즈를 읽거나, 개발 경험을 갖춘 사람들이 읽으면 도움이 될 것 같다.

readers_emblem_250

웹 엔지니어가 알아야 할 인프라의 기본

도서 리뷰에 앞서

IT/프로그래밍 관련 도서 리뷰를 하는 목적은 읽어야 할 것도 많고 알아야 할 것도 많은 엔지니어 분들이 책을 읽기 전에 조금이나마 자신이 생각했던 내용인지에 관한 정보를 주기 위함이다.

web_infra_book_1

책의 내용

책의 내용은 크게 웹을 기반으로 한 시스템의 1) 사전 설계, 2) 구축, 3) 모니터링, 4) 시스템 튜닝까지의 내용을 담고 있다.  4가지 주제를 보면 알겠지만 “웹 엔지니어가 알아야 할 인프라의 기본“은 웹 인프라의 기본부터 심화를 다루고 있지만 기본이라는 것이 어느 정도 웹기반 시스템에 대한 이해를 전제하고 있다. 2장 “인프라 기술의 기초 지식”에서 인터넷, URL, HTTP, 방화벽(보안), 암호화 등을 다루고 있지만 기본적인 이해가 있는 사람들이 환기 차원에서 읽을 수 있는 내용들이다.

 

내용에 따른 대상 독자

이 책은 웹서버와 HTTP 프로토콜과 늘상 붙어 있는 웹 개발업무 및 인프라 구축/모니터링 업무를 담당하는 사람들의 개발력에 잔근육을 키워줄 알찬 내공이 담겨있다. 반면, 책의 내용이 제목처럼 “기본”이라고 하기에 난이도가 있어서 5장 이후(모니터링, 튜닝) 주제는 개발경험이 많지 않은 입문자분들에게는 다소 실용성이 떨어질 수 있다.  하지만, 1~4장까지를 숲을 보는 목적으로 읽는다면 웹관련 기술에 대한 경험이 부재하거나 아직 많지 않은 학생들에게도 도움이 되는 내용으로 채워져 있다.

 

특히, 웹기반 스타트업을 하는 기획자나 운영자들도 1-4장까지는 중간 중간 이해 안되는 부분은 스킵하더라도 충분히 읽을만한 가치가 있다고 생각한다. 책의 초반에 아주 상세하게 인프라 구축을 위한 계획 및 절차에 대해서 상당히 꼼꼼히 다루고 있기 때문이다. 역으로, 개발업무를 하는 나는 이 부분이 다소 지루하게 느껴지기도 했지만 기획 및 운영 업무를 하는 사람들에게는 좋은 지침이 될 것이라고 생각이 들었다.

web_infra_book_2

이 책의 내용의 꽃은 5장부터 8장이다.

순전히 개발자 입장에서 본 이 책의 본록은 5장부터 8장이다. 5장과 6장에서는 리눅스기반 OS에서 사용가능한 각종 모니터링 툴과 Cacti사용에 대해서 상세하게 설명하고 있다. 5-6장을 보면서 이전에 웹서핑을 하면서 스크랩을 해 둔 80 Linux Monitoring Tools for SysAdmins 가 생각이 났는데, 이 블로그 글보다 상세하게 모니터링 도구들에 대한 사용법 및 해석방법을 설명하고 있다.

 

개인적으로는 7, 8장에 있는 튜닝 기법 중 아파치랑 MySQL 관련 내용이 좋았다. 기존에 아는 내용도 있었지만 간결하게 튜닝포인트를 찾아내는 이 내용은 웹개발자로서 초보의 발을 떼내는데 아주 큰 역할을 해줄 내용들이라고 생각을 한다. 혹 MySQL 의 퍼포먼스 관련해서 관심이 있는 사람이라면 MySQL 퍼포먼스 최적화 : 실무 예제로 다가가는 MySQL 쿼리 작성도 함께 읽어보면 좋다.

 

web_infra_book_3

기술의 생명주기가 짧은 곳 중에 하나인 곳이 웹 분야이다 보니 책을 사면 1-2년 지나면 무용지물이 되는 경우가 종종 있다. 그렇기 때문에 필요에 의해서 빌려볼 책과 사서 보관할 책을 잘 구분해야 하는데 적어도 이 책은 미력하나마 개인적인 식견으로는 5-10년은 곁에 두고 모니터링이나 Devops적인 측면에서 필요할 때마다 참조해서 내용을 환기하기에 좋은 책이라고 생각하기에 추천을 한다.

 

 

readers_emblem_250

빅데이터 컴퓨팅 기술 리뷰

_m_4114m “빅데이터 컴퓨팅 기술”  책은 일반적인 기술 개발서적은 아니다. 이 책은 빅데이터라는 큰 개념을 잘개 쪼개서 현재 기술들을 아주 상세하게 리뷰해 놓은 개론서이다.

한빛리더스 8기 5번째 미션도서 첫인상

책 자체가 한빛아카데미의 IT Cookbook 시리즈로 나와서 사실상 대학생 교재 및 참고도서라 봐도 무방하다.  그래서인지 총 6분의 공저자 모두 현직 대학교수들로 이루어져 있다. 또한 매 챕터마다 간단한 내용확인 수준의 연습문제가 제공되고 레퍼런스가 꼼꼼하게 달려있다. 레퍼런스가 잘 달려 있어서 관심있는 부분을 자세하게 찾아볼 수 있다는 점이 마음에 든다.

내용은 크게는 다음의 3개의 파트로 구분된다.

  1. 빅데이터 개요
  2. 빅데이터 컴퓨팅 기술
  3. 빅데이터 기술 개발현황과 실제 구현예

목차를 보고 책을 읽으면 각 파트별로 세부적으로 현재 나와 있는 거의 모든 기술 들에 대해서 조사해서 담았다는 것을 알 수 있다.  현재 석사생으로 이 책을 읽으며 가장 먼저 들었던 느낌은 과제 제안서에 넣을 키워드가 소스가 풍부한 책이라는 점이다. 빅데이터가 뭔지, 어디서부터 조사를 시작할지 잘 모르겠다면 이 책은 빅데이터에 대한 숲을 보여주는데 제 몫을 한다.

한빛리더스 8기 5번째 미션도서 첫인상

그런데, 이 점이 단점으로 작용하기도 한다. 이유는 단순한 기술과 정보의 나열이다 보니 책이 좀 지루하다. 계속 읽게끔 하는 매력이 별로 없다. 챕터마다 다음 챕터로 넘어가게끔하는 내용의 재미가 느껴지지 않는다. 조금 더아쉬운 점을 이야기하면, 단순히 현재 기술을 나열한 것 이상의 통찰을 주지는 못하는 것 같다.

정리하면, 빅데이터라는 주제를 백과사전식으로 잘 종합한 것은 좋은 점수를 줄 수 있으나 다소 내용이 평면적이고 딱딱하다는 점이 아쉽다.

풀컬러 내용

그러나  내용이 지루할 것을 편집자들이 이미 예견했다는 듯이 화려한 풀컬러로 독자들을 조금 더 책에 붙든다. 십중팔구 내용까지 단조로운 모노톤이었다면 읽기 쉽지 않았을 것이다. 지루하기 쉬울 내용을 풀컬러의 화려한 장표와 그림으로 채운 것에는 플러스 점수를 줄 수 있다.
풀컬러 내용

요약하면, 빅데이터와 연관이 있는 거의 모든 키워드들을 잘 짜여진 틀 안에 차곡 차곡 쌓아놓은 기술백서이다. 그래서 책에서 느껴지는 장단점도 보통의 white paper 같은 느낌이 드는 책이다.

책 첫머리에서 설명하는대로 빅데이터를 입문할 때 간단하게 살펴보기에 적절한 책이며 심화학습 및 내용을 위한 길라잡이라고 볼 수 있다.

이 리뷰는 한빛리더스 8기 활동의 일환으로 작성한 것입니다.

한빛리더스 8기

Java 객체 지향 디자인 패턴 리뷰

개발과 관련된 학습정보는 웹을 통해서 풍성하게 얻을 수 있다. 디자인 패턴 또한  위키피디아부터 시작해서 블로그에 잘 정리된 양질의 컨텐츠들이 참 많다. 더욱이 디자인 패턴은 케이스별로 다룰 수 있어 웹에서 관심 있는 패턴들을 검색해서 학습하기도 용이하다. 그런데 문제는 웹 상의 컨텐츠에는 대부분 “왜”가 빠져 있다는 점이다 . 컨텐츠의 작성자들은 대부분 “왜”를 가정하고 내용을 설명하고 있기 때문이다.

한빛미디어 리더스 8기 세 번째 미션!~

최근에 출판된 한빛미디어의  “Java 객체 지향 디자인 패턴“은  “왜 이 패턴이 필요한가?”에 질문에 답과 함께 패턴의 내용을 설명한 책이다.  패턴이란 것이 원래부터 있던 정형화된 이론이라기 보다는 시간이 지나면서 쌓여진 노하우이기 때문에 책만 읽는다고 해서 쉽게 내 것이 되지는 않는다.  다행히도  두 저자는 오랜 강의 경력을 바탕으로 이러한 문제를 충분히 절감하고 최대한 상세하게 패턴의 필요성을 피력하고 있음을 이 책에서 볼 수 있다.

한빛미디어 리더스 8기 세 번째 미션!~

책의 내용은 총14장으로 이루어져 있고, 이 중 1-4장은 디자인 패턴과 관련된 기본적인 내용 설명을 다루고 5장부터 14장까지 다음의총 10개의 디자인 패턴에 대해서 설명한다.

[책에서 설명하는 10가지 패턴]

  1. 스트래티지 패턴
  2. 싱글턴 패턴
  3. 스테이트 패턴
  4. 커맨드 패턴
  5. 옵서버 패턴
  6. 데커레이터 패턴
  7. 템플릿 메서드 패턴
  8. 팩토리 메서드 패턴
  9. 추상 팩토리 패턴
  10. 컴퍼지트 패턴

디자인 패턴 후면

각 디자인 패턴에 대한 설명은 그림과 같이 패턴이 적용되지 않은 일반적인 코드를 통한 문제 사례와 함께 문제를 인식하는 단계, 패턴을 도입하여 해결책을 제시하고,  패턴에 대한 설명과 함께 효과를 입증하는 순서로 반복 진행된다.

더불어 책의 부제에서 알 수 있듯이 이 책은 10가지 패턴을 “UML”의 클래스 다이어그램과 컬래보래이션 다이어그램을 가지고  설명하면서 자연스럽게 UML을 눈으로 익히고 보는데 큰 도움을 준다.

디자인 패턴 컬래보레이션 다이어그램

큰 장점이 될 수 있는 점은 부분은 모든 예제 문제와 연습문제에 해답을 제공하고 있다는 점이다. 문제는 제공하지만 해답을 제공하지 않거나 일부만 제공하는 책들과 비교했을때 저자의 세심한 배려가 눈에 띄는 부분이다.

다만, 역으로 생각하면 해답으로 제공되는 내용이 전체 책의 약 1/5이 된다는 점을 고려할 때 해답은 따로 PDF 형식으로 제공하고 책을 좀 더 가볍게 만들었으면 어떨까하는 아쉬움이 드는 부분이기도 하다.

한 가지 더 아쉬운 점은 들자면 이 책은 예제 소스를 제공하지 않는다.요즘 프로그래밍 서적 대부분이 예제 코드를 Github이든  zip 형태이든 어떤 방법으로든 제공하고 있다는 점을 고려할 때 조금 아쉽다는 생각이다.

요약하면, 이 책은 각 디자인 패턴의 필요성, 내용, 실제 적용과정 및 결과를 일관된 순서로  설명한다. 모든 챕터에 연습문제와 해답을 제공함으로 책 한권으로 혼자서 학습하기에 부족함이 없는 책이다.

본 리뷰는 한빛 리더스 8기 활동의 일환으로 작성한 것입니다.

한빛리더스 8기

프로그래밍 면접 이렇게 준비한다 리뷰: 한빛미디어

개발하는 사람이라면 한 번쯤 인터넷 상에서 “구글 면접 문제” 식의 글을 보고 문제도 풀어봤을 것이다. 그리고 아마 문제의 난이도 때문에 심한 좌절감(?)을 맛보았을지도 모르겠다. 실제로 구글 뿐 아니라 거의 모든 IT기업들은 개발자를 찾을 때 반드시 기술면접을 본다. 따라서 취업 또는 이직을 준비한다면 적절하게 기술면접을 준비할 필요가 있다. 왜냐하면, 기술면접은 바로 옆에 구글신과 스택오버플로우를 끼고서 할 수 없기 때문이다. 이렇게 구직을 위해 기술면접을 앞두고 있는 사람들을 위해 어떻게 기술면접을 준비할 것인가에 대한 내용을 담은 것이 “프로그래밍 면접 이렇게 준비한다”이다. 일단 당장 석사를 마치면 나도 구직을 준비해야 한다는 점에서 책을 꼼꼼히 읽어 나갔다. 한빛리더스 8기 2차 리뷰 도서 책의 원제는  “Programming Interviews Exposed”이고 부제로 “Secrets to Landing Your Next Job”이다.  원서의 제목에서 “Next Job”이 눈에 들어왔다. 원서의 부제 “Next Job” 이 말해주는 바와 같이 “기술 면접”은 인생에 단 한번 지나가는 통과의례라기보다는 주기적으로 접하게 될 확률이 높다. 따라서 이 책은 한번의 구직을 위한 일회성 책이 아니라는 점이 중요하다. 재판도 아니고 3판까지 책이 이어져 왔다는 것에서 이미 이 책의 가치는 어느 정도 검증되었다고 볼 수 있다. 책은 총 17장의 챕터와 이력서 작성을 돕는 부록으로 구성된다. 책에서 구분하고 있지는 않지만 각 챕터는 내용상 크게 5파트로 나누어 볼 수 있을 것 같다.

  • 1-2장: 구직과 관련된 일반적인 내용
  • 3-8장: 알고리즘 관련 내용
  • 9-13, 16장: 학부에서 다루는 컴퓨터 사이언스 관련 전반적인 지식
  • 14-15장: 문제해결능력과 연관된 퍼즐
  • 17장, appendix: 기타

먼저 이 책의 장점은  내용외적으로 깔끔한 편집 디자인이 가져다 주는 높은 가독성을 들 수 있다. 특히 내용의 핵심이나 코드 예제 중에서 중요한 부분의 볼드 처리가 마음에 든다. 프로그래밍 면접 책 안 또 다른 세심한 배려는 책의 가로 길이이다. 보통의 IT 서적들이 교과서와 같이 가로 길이가 길어서 휴대성이 떨어진다. 그러나 이 책은 들고 다니기 편한 소설책 정도의 가로 길이와 두께를 가지고 있다. 고로 휴대하고 다니면서 읽기에 좋다. 실제로도 나는 이 책을 아침 저녁 지하철에서 2주 동안 다 읽었다. 한빛리더스 8기 2차 리뷰 도서 표지 내용적인 측면에서도 훌륭하다. 3판까지 어어져 오면서 저자들이 더 날카롭고 예리하게 기술면접에 필요한 핵심적인 내용들을 망라해 놓았다는 것을 느낄 수 있다. 굳이 기술면접을 위해서가 아니더라도 한권 안에 빠르게 컴퓨터 사이언스의 주요 핵심들을 훑기에도 적절하다. 3-8장에 이어지는 알고리즘 설명은 분량면에서는 당연히 알고리즘 도서와 비교할 수 없지만 기술면접에 특화된 핵심을 족집게처럼 집어서 요약해 주어 유익하다. 특별히 8장 “정렬”은  적은 분량 안에 다양한 정렬 알고리즘의 장단점을 분석해 놓고 있어 빠르게 복습하기에 용이하다. 늘상 혼동하기 쉬운 부분들에 대한 설명도 마음에 든다. 예를 들면 책 16장 “인자전달” 문제 중에서 다음과 같은 것이다.

아마 C 계열의 언어를 접해 본 사람은 위와 같이 함수의 인자로 전달되는 포인터 타입이 은근히 헷갈린다는 것을 공감할 것이다. 이처럼 책에서는 포인트를 잘 집어서 밀도 있게 내용들을 담고 있다. 물론, 이 책의 아쉬운 점도 있다. 기본적으로 책이 쓰여진 맥락이 미국상황이라는 점이다.  국내 IT 기업들도 기술면접을 보긴 하지만 미국과는 절차나 방법이 다소 차이가 있다. 이런 부분들을 감안하면서 읽어야 한다. 부록에서 제시하는 이력서도 마찬가지다. 물론 부록의 내용이 국내상황에 맞지 않는다는 점을 저자도 밝히고 있다. 이러한 부분은 번역서로의 한계라고 느껴진다. 결론적으로, 이 책은 기술면접에 대한 경험이 없는 사람이라도 책을 읽고 나면 문제가 어떤 식으로 나올지, 어떻게 준비할 지에 대한 감을 충분히 쌓을 수 있다고 생각한다. 구직이나 이직을 준비하는 것은 결국 개발자 자신의 역량을 쌓는 일이라고 생각한다. 따라서 이 책은 일회성으로 기술면접을 대비하는 용도를 넘어서 다양한 알고리즘을 분석적으로 활용하고 사용하는 언어의 특성들에 대해서 이해하는 등의 사고를 키우는데도 도움이 될 것이다.

이 글은 한빛 리더스 8기 활동의 일환으로 작성한 것입니다.

한빛리더스 8기

함수형 자바스크립트 리뷰

함수형 자바스크립트 도서

함수형 자바스크립트는 함수형 프로그래밍 과 자바스크립트를 다루는 책이다. 하지만 내용은 자바스크립트로 “함수형 프로그램을 작성하는 방법”에 대해서 중점적으로 설명하는 책이다.

이 책에서는 자신의 라이브러리와 애플리케이션을 단순화할 때 자바스크립트의 복잡성이라는 괴물을 길들이는 데 함수형 스타일의 프로그래밍이 어떻게 도움이 되는지 설명한다. 27p

Untitled

항상 책을 읽고 리뷰를 하면서 강조하는 부분은 읽는 사람의 수준과 기본 지식에 대한 부분이다. 이 책은 “함수형 프로그래밍”에 대해서 자세하게 설명하지만 그렇다고 바닥부터 모든 것을 다루는 책은 아니다. 자바스크립트도 처음이고 함수형 프로그래밍에 대해서 들어본 적이 없다면 이 책은 일단 내려놓자. 

이 책은 난이도가 있다. 자바스크립트에 대한 선이해가 필수이다. 자바스크립트의 동작원리에 대해서 애매한 부분은 다른 책들을 다시 들춰 보면서 읽어나갔다. 자바스크립트에 대한 선이해와 경험이 충분해야 책 속의 내용을 깊이 이해할 수 있다.

Untitled

일급함수, 추상화와 클로저, 체이닝 등 한번 읽고 이해할 수 있다면 좋겠지만 적어도 리뷰하는 나는 그렇지가 못했다. 익숙했던 절차적 프로그램, 객체지향적 사고와는 다른 “함수형 프로그래밍”이란 새로운 관점을 배우고 익혀야 하기 때문이다. 그래서 이 책은 기본적으로 개념 설명이 본질이고 개념이해를 돕기 위한 수단으로 Underscore.js를 기반으로 예제를 보여준다. 

책을 읽고 예제를 따라하다 보니 아쉬운 점이 좀 있다. 책의 앞 부분에서 구현한 함수들을 자연스럽게 뒤에서 사용하고 있다. 즉 한번 읽는 흐름을 놓치면 책의 앞뒤를 왔다갔다하며 내용의 의미를 잘 찾아가야 한다. 

의외의 혜택은 책 끝 부분에 있는 “참고문헌”이다.  함수형 프로그래밍과 관련된 알짜같은 책목록이 있으니 서점에 가서 꼭 살펴보기를 권한다.

옮긴 분도 몇 번이나 읽는 수고를 반복해야 이해할 수 있었다는 데 욺긴이보다도 지식과 경험도 없는 사람이 겨우 한번 읽고 리뷰를 쓴다는게 어불성설이긴 하다.

그래도 요약해보면, 자바스크립트를 통한 함수형 프로그래밍에 대해서 제대로 공부하려면 이 책을 곱씹고 봐야 한다는 점이다.

이 글은 한빛 리더스 8기 활동의 일환으로 작성한 것입니다.

한빛리더스 8기

DOM을 깨우치다 리뷰

Bj퍼블릭 출판사 리뷰 도서

이 책은 자바스크립트를 가지고 DOM을 어떻게 제어하고 다룰 것인지에 대해서 자세하게 설명하고 있는 책이다. 자바스크립트 프레임워크 홍수의 시대 속에 자바스크립트로 DOM을 직접 다루는 것을 배우는 것이 의미가 있는지가 아마 이 책을 읽어야 하는 지를 결정지을 것이다. 역자도 서두에 밝히고 있듯이 jQuery로 손쉽게 DOM을 다룰 수 있는데 굳이 자바스크립트로 DOM을 다루는 이 책이 의미가 있을까 질문을 던지고 있다.

따라서 jQuery로 DOM을 다루는 데 만족할 사람이라면 굳이 이 책을 들쳐보라고 권하고 싶지 않다. 그러나 jQuery 의 동작원리와 함께 자바스크립트에서 DOM을 어떻게 제어하는지를 알고 싶은 궁금함이 가시지 않는 사람이라면 이 책은 탁월한 선택이 될 것이다.

개인적으로는 프론트쪽 웹개발을 주업으로 하지 않지만  종종 웹사이트 개발을 할 때가 많다. 이럴 때마다 자바스크립트에 대한 지식이 부족해서 jQuery 를 가지고 땜방식 코딩을 해온 것이 사실이다. 그러나 이 책을 읽으면서 DOM의 구성이 어떻게 이루어지는지 브라우저가 어떻게 HTML 코드를 파싱하여 메모리 상에서 객체로 쌓아두는지에 대한 명료하게 알 수 있었다. 그래서 책의 영문명 “DOM Enlightenment”와 한글명 “DOM을 깨우치다”가 모두 책 내용을 잘 반영한 제목이라는 생각이 든다.

이 책이 가지고 있는 좋은 점을 구체적으로 하나 들자면 모든 코드를 jsfiddle에 올려두어 링크를 제공한다는 점이다. 프로그래밍을 공부하는 방법은 일단은 묻지도 따지도 않고 책에 있는 코드를 다 따라 쳐보는 것이 상당히 효과적인 방법이기는 하다. 하지만 DOM을 이해하기 위한 목적으로는 이 방법이 그다지 효율적이라고 볼 수 없다. 이 책의 목적은 어디까지나 자바스크립트가 DOM을 어떻게 다루는지를 명확하게 설명하는 것이기 때문이다.

Bj퍼블릭 리뷰도서 DOM을 깨우치다

모든 예제의 링크가 그림과 같이 소스코드 상단에 적혀 있지만 출판사인  비제이퍼블릭 홈페이지에 가서 모든 링크정보가 있는 워드파일을 직접 받을 수도 있기 때문에 굳이 일일이 타이핑 할 필요도 없다. 카피앤페이스트로 모든 예제를 눈으로 확인할 수 있다.

개인적으로 나중에 확인해 둘 요량으로 OneDrive에 파일을 올려서 다음의 링크로 공개를 해 놓았다.

http://1drv.ms/NU0VAj

요약하면, 자바스크립트 코드를 간단히 사용하고 읽을 줄 알지만 DOM에 대한 원리가 궁금하다면 이 책은 적절한 해답이 되어 줄 것이다.