Do it! 클론 코딩 영화 평점 웹서비스

#리액트 #클론코딩 #두잇시리즈 #개발 #프론드엔드 #자바스크립트 #서평

이지스퍼블리싱 출판사의 “Do it” 시리즈는 깔끔한 편집와 구성 때문에 개인적으로 좋아하고 신뢰한다. 10여년 전에 “Do it 안드로이드 앱 프로그래밍” 을 읽었던 기억도 나고 코틀린과 리액트도 “Do it” 시리즈 책이 있다. 지금은 실무에서 웹개발을 하고 있지 않지만 내가 20여년 전, 웹개발을 처음 시작했을 시절에는 웹페이지 폼 요소의 입력값의 유효성을 체크(form validation) 하거나 간단한 css 조작하는 정도로만 자바스크립트를 활용했었다. 그 당시와는 비교할 수 없을 수준으로 자바스크립의 활용 폭과 위상이 정말 많이 달라졌다. 리액트로 대표되는 프론트엔드 자바스크립트 라이브러리도 발전을 거듭했고 node.js를 이용한 백엔드처리도 아주 손쉽게 구현할 수 있다.

노마드코더 유튜브로 잘 알려진 이 책의 저자 니콜라스는 다양한 IT 기술에 대해 명쾌하게 설명하는 영상으로 유명한데, 자신의 온라인 아카데미를 만들어서 다양한 프로그래밍 기술을 강의하기도 한다. 저자의 클론 강의가 유명한데 설명을 듣고 그대로 따라서 코딩하면 완성된 결과물을 확인할 수 있는 게 클론코딩이다. 이론적인 설명과 그와 연관된 파편적인 예제코드가 있는 전형적인 입문서가 아니라 영화 평점 웹서비스라는 결과물를 만들어가는 전체 과정을 처음부터 끝까지 따라가며 개념과 기능을 구체적으로 익힐 수 있도록 구성되어 있다.

니콜라스 저자의 유튜브 강의를 몇 번 본 적이 있는데, 아무래도 영어강의를 한글 번역 자막과 소스코드를 동시에 보면서 코딩하는 게 번거로왔고, 저자가 영상강의에서 지나치게 반복적으로 설명을 하는 게 개인적으로는 지루하게 느낀 적도 있다. 책을 통해 공부하니 명쾌한 설명과 정리된 소스코드를 내 속도에 맞게 스피디하게 살펴 보면서 코딩을 할 수 있기 때문에 훨씬 깔끔하고 동영상 강의보다 시간도 절약할 수 있었다.

이 책의 대상독자는 "자바스크립트와 ES6 문법에 대한 기초적인 이해가 있으면서, 현업에서 가장 인기있는 자바스크립트 프론트엔드 라이브러리인 react가 무엇인지 알고 싶어하는 분” 정도로 정리할 수 있을 것 같다. 리액트에 대해 깊은 내용까지 다루지는 않지만 이 책을 통해 “리액트 개발 과정이 이렇게 돌아가는구나” 정도를 재미있게 이해할 수 있다. 이 책 내용을 이해했다면 다른 리액트 개발서적과 강의를 통해 더 다양한 기술들을 어렵지 않게 익혀나갈 수 있다.

책에서 다루는 내용을 구체적으로 적어보자면

- node.js, npx 등 리액트 개발에 필요한 기본환경 세팅

- create-react-app 명령을 통해 리액트 프로젝트 생성

- JSX, 컴포넌트, props, state, 클래스형 컴포넌트의 생명주기(lifecycle) 함수, 라우터 등의 리액트 기초개념

- 자바스크립트 ES6의 map()함수와 비구조화할당

- axio를 이용해 API로 공개된 JSON 데이터를 가져와서 파싱해서 뿌리기

- css적용, 미디어쿼리로 반응형 페이지 적용

- github을 이용한 저장소(repository) 생성 및 배포.

등이다.

리액트의 기초적인 내용을 다루고 있지만 완전히 코딩을 처음 하는 분 보다는 어느 정도 프론트엔드 웹개발의 기초가 있는 분들이 보면 좋을 것 같다. 개인적으로는 리액트를 개발한 페이스북도 Hook을 활용한 함수형 컴포턴트를 권장하는데 클래스형 컴포넌트로 구현이 되어 있는 점과 조금 더 깊은 내용까지 다루었으면 좋았겠다라는 아쉬움도 있지만 사람마다 기반지식과 환경이 다르기 때문에, 이 책을 통해 쉽고 재미있게 배울 수 있는 분들도 정말 많으리라 생각한다.

결과화면

반응형 처리

우리 집 책장에서 Do it 시리즈 책을 모두 찾아봤음.

Do it 안드로이드, 초판 1쇄로 구입했는데 벌써 10년이 넘게 흘렀음.. ㅎ