"리액트로 웹앱 만들기 with 타입스크립트"
전예홍, 이지스퍼블리싱
가격: 40,000원
쪽수: 677쪽
발행: 2024. 03. 30

1. 서론

“프런트엔드 개발자 채용 공고에서 인기 있는 자격 요건은 모두 갖췄다!”
최신 웹 개발 트렌드를 반영하고 실무 코드로 가득 채운 ‘리액트 전문서’ 등장!
이 책은 많은 기업에서 우대하는 타입스크립트 기반의 리액트 프로그래밍으로 요즘 대세로 떠오른 SPA(single page application)와 REST(representational state transfer) API 서버를 만듭니다. 그 과정에서 리액트 훅과 리덕스, 라우팅은 물론 테일윈드CSS로 컴포넌트 스타일링까지 습득할 수 있습니다. 또한 오류를 막고 성능을 높이는 최적화 기법과 글로벌 수준의 타입스크립트 코드 패턴도 엿볼 수 있기 때문에 리액트와 타입스크립트 입문자는 물론이고 자바스크립트에 익숙한 숙련자에게도 유용합니다.
책에서 다룬 내용을 종합해 프로젝트 관리 소프트웨어인 트렐로 같은 앱과 제품이나 서비스를 소개하는 랜딩 페이지를 만들어 봅니다.

프론트엔드 개발 라이브러리 React는 개발 경력이 있는 사람이라면 사용해보진 않았어도 들어봤을 것입니다. npm trend에서 근 5년 간 프론트엔드 라이브러리, 프레임워크의 다운로드 횟수를 보면 다른 라이브러리, 프레임워크에 비해 점유율이 높고 꾸준히 상승하고 있는 것을 확인할 수 있습니다.

React 기반 프레임워크인 Next.js도 현재 21버전까지 출시되었고, 기존 라이브러리들을 치고 올라오고 있는 추세입니다. 그만큼 프론트엔드 개발에서 React의 선택은 강력하게 권장되고 있습니다.

국내 채용 시장 상황도 마찬가지입니다. 이미 국내 IT 기업에서는 React 라이브러리를 사용하지 않는 곳이 없다 할 정도입니다. MVP(Minimum Value Production) 개발을 위해 Vue.js를 사용하는 기업도 꽤 있으나, 비율적으로 React 사용 기업이 더 많은 추세입니다.

위 사진은 개발자 채용 서비스 점핏에서 발췌한 프론트엔드 개발자 채용 공고입니다. 함께 기재된 기술 스택을 살펴보면 React 외에 Typescript, Redux, Next.js, GraphQL 등도 자주 등장하는 것을 확인할 수 있습니다.

간단한 사이드 프로젝트, 토이 프로젝트에서는 위와 같은 기술이 필요 없을 수 있습니다. 하지만 프로그램의 규모가 커질 수록 복잡도가 증가하고, 제대로 된 체계와 관리가 필요한 시점이 찾아옵니다. 이럴 때 Typescript와 같은 정적 타이핑 언어를 도입하고, Redux와 같이 전역 상태 관리 툴을 사용한다면 프로그램의 완성도 또한 보장할 수 있을 것이며, 개발의 생산성도 올라갑니다.

이러한 배경에서 국내 IT 기업에서는 공통적으로 주로 사용하는 기술 스택이 있으며, 프론트엔드 개발자가 되길 희망하는 학생과 현직자는 이 기술들을 잘 습득할 필요가 있습니다.

2. 본론

이 책은 동일 저자 및 출판사에서 2023년 1월 19일에 발행한 리액트 모던 웹 개발 with 타입스크립트 초판의 개정본입니다. 기존 초판과 동일한 구성 및 내용을 포함하고 있고, 책 패키지와 일부 내용이 수정되어 개정본으로 출간되었습니다.

이 책에서는 Typescript를 사용하여React App을 구현하는 방법을 소개합니다.
목차는 다음과 같습니다.

1. 리액트 개발 준비
2. 리액트 동작 원리
3. 컴포넌트 CSS 스타일링
4. 함수 컴포넌트와 리액트 훅
5. 상태 관리와 리덕스 패키지
6. 리액트 라우터
7. 몽고 DB와 API 서버

리액트의 배경과 개념, 원리 등 원론적인 이야기를 먼저 다루며, 이후 OS 별 개발 환경 세팅, TailwindCSS 등의 다양한 방법을 사용한 페이지 스타일링, 컴포넌트로 재사용이 쉬운 앱 구조 만들기, React Hook을 사용한 렌더링 컨트롤, Redux를 사용한 전역 상태 관리, React Router를 사용한 라우팅 처리, Express 서버와 MongoDB를 사용하여 풀 스택 개발 해보기 등 React와 Typescript를 사용한 웹 프론트엔드 개발의 전반적인 과정을 다룹니다.

실습 코드가 자세하게 나와있고, 순차적 학습을 지향하기 때문에 기초 내용을 초장에 다루며 그 내용을 뒤로 갈수록 응용하여 최종적으로 Trello 프로그램을 따라 만들어보는 것이 목표로 되어 있습니다.

실습 코드는 설명을 더해가며 내용을 추가하는 방식으로 학습을 진행합니다.
책을 읽고 있으면, 저자가 프로그래밍 언어와 리액트에 대한 깊은 이해를 가지고 있다는 것이 느껴집니다. 리액트의 동작 원리에 대한 이해와 지식을 바탕으로 어떠한 결과가 어떠한 원인에 의해서 나타나는지 자세하게 설명하여 단순 구현만 하면 모르고 지나칠 것들을 잘 알 수 있게 됩니다.

한편, 개발 환경 세팅과 같은 기초 내용부터 다루는 책 치고는 선행 지식 및 개발 경험은 반드시 필요한 책이라고 생각했습니다. 웹 개발에 대한 개괄적인 원리와 지식, Typescript에 대한 이해는 갖춘 채로 이 책을 읽어야 중간에 막히는 일이 없을 거 같습니다.

책에 나온 코드를 그대로 따라 치며 실습한다는 데에 의의를 둔다면 상관 없겠지만, 이 책에서 설정해둔 슬로건인 "리액트 개발자라면 이렇게 해야 인정받는다"를 이루기 위한다면 사전 지식이 없는 채 읽었을 때 설명이 빈약하여 이해가 잘 되지 않는 부분이 다소 있습니다.

또, 출판사에서 발행할 때 삽화를 흑백 그림으로 인쇄하는 점은 프론트엔드 개발에 있어 매우 아쉬운 점입니다. style을 적용하며 개발해야 함에 있어 책에서 기술한 색깔 등을 확인할 수 없는 점은 개선되어야 할 것 같습니다.

덧붙이자면, 이 책으로 전예홍 저자의 책은 3권째 읽어보는데, 3권 모두 Typescript와 React를 다루는 책이다보니 초장 구성과 페이지가 모두 똑같습니다. 이 초장 구성이 빈약한 설명에 의해 아쉬웠던 부분인데, 모든 책이 같은 구성인 점은 다소 아쉬운 부분입니다.

기반 지식이 어느 정도 갖추어진 사람이 읽는다면 저자의 깊은 이해를 기반으로 실무에서도 사용할 수 있는, 수준이 보장되는 지식을 얻을 수 있다고 생각합니다.

3. 결론

Typescript를 이용한 React App 개발은 현재 프론트엔드 개발에서 majority한 트렌드이며, 본 책은 실무 수준의 React App 개발에 대한 절차를 잘 지도하고 있습니다.

단, 프로그래밍 언어와 웹 개발의 원리 등 기반 지식이 없는 상태에서 읽는다면 이해하기 어려운 부분이 있기 때문에 다음과 같은 독자에게 권장되는 책입니다.

1. Javascript를 사용할 수 있고, Typescript에 대한 이해가 있는 사람
2. 웹의 동작 방식을 이해하고 있는 사람
3. React를 사용해보거나 이해가 있는 사람

이 책은 이지스퍼블리싱으로부터 제공받아 작성한 리뷰입니다.