기본 콘텐츠로 건너뛰기

Do it! 리액트 프로그래밍 정석

Do it! 리액트 프로그래밍 정석

Do it! 시리즈의 새로운 자바스크립트 라이브러리 도서다.

Do it! 시리즈에서 Node.js 와 Vue.js 로 접한 적이 있다.

리액트가 왜 안나올까 생각했었는데, 올해 초에 출시가 됐다.

( 다음은 어떤 자바스크립트 진영이 나올까, Angular.js 이려나?! )

Do it! 시리즈라는 점 외에 눈길을 끄는 점은 '정석' 이라는 제목과 '가상 코인 거래소' 라는 프로젝트가 명시되어 있다는 점이다.

다른 웹 프론트 도서들을 봤을 때 TODO 예제는 다뤄본 적은 있어도, 그럴싸한 프로젝트까지 다룬 도서는 없었다.

데이터를 관리하고 서버와 통신하여 화면에 나타나기까지 일련의 개발 과정을 다룬다.

이 과정에서 Redux, Axios, Router, 실무에 쓰이는 자바스크립트 라이브러리와 미들웨어들을 적용한다.

인상 깊게 봤던 점은 다음과 같다.

첫 번째로 코드 자체보다는 프로젝트를 진행할 때 요구 명세서부터 화면 설계, 통신 설계까지 어떤 프로세스로 프로젝트를 진행하는지 인상 깊게 읽었다.

두 번째로 리액트 프로젝트를 할 때 리덕스 스토어로 어떻게 하면 데이터를 효율적으로 관리할 수 있는지 궁금했었는데 해소가 됐다.

세 번째로 화면 설계할 때 UI 라이브러리를 사용하는 것이 아니라 Common 컴포넌트도 정의하고 직접 제작한다. CSS 스타일을 어떻게 하면 관리하고 컴포넌트들을 어떻게 분리하는지의 과정을 알 수 있어서 좋았다.

최종 코인 거래소 화면이다.

상단바부터 컴포넌트 배치, 데이터 관리와 네트워크 통신까지 총 집약되어 있다.

마지막 부록에서는 파이어베이스로 리액트 프로젝트를 어떻게 배포할 수 있는지 설명한다.

파이어베이스 배포는 이전에도 해봤던 적이 있기도 하고 어렵지 않은 작업이기에 쉽게 배포가 가능했다.

그리고 리액트와 호환되는 next.js 라이브러리로 서버 사이드 렌더링을 도입해서 검색 엔진에도 표시될 수 있도록 한다.

파이어베이스의 Functions 기능이 제일 궁금했었는데, 부록에서도 짧게나마 소개한다. 파이어베이스 데이터 스토리지와 어떻게 연동하고 API 로 만드는지 가볍게 실습해볼 수 있어서 좋았다.

책의 단점으로는 오타가 살짝 많다. 문법 오류가 있는 코드들이 있고 몇몇 오탈자가 보인다.

예제 파일에서도 자잘한 오타들이 발견된다.

책을 읽고 실습할 때는 그 때마다 고쳐서 따로 메모같은거는 해두지 않았는데,

깃허브에 저장된 예제 소스 파일을 아무거나 실행해 봤는데 운이 없게도 오타가 보여서...

이슈로 등록했다.

이미 다른 이슈들도 많이 올라와 있는 상태다.

막 불편한 정도는 아니고 초판이라 그럴 수 있다고 이해를 했다.

다음 개정판에는 다시 조사해서 많이 수정이 될 것 같다!

from http://itchipmunk.tistory.com/419 by ccl(A) rewrite - 2020-03-13 23:54:19

댓글

이 블로그의 인기 게시물

(주)편두리 채용 정보: PYUNDOORI에서 핫한 개발자분들을 모십니다.

(주)편두리 채용 정보: PYUNDOORI에서 핫한 개발자분들을 모십니다. - 좋아요 아래와 같은 업무를 훌륭히 감당하실 분을 모십니다.서비스 관련 DB 모델링, DB 최적화 작업서버 & DB 관리Frontend & Backend 인터페이스의 최적화 작업 화합과 성장을 같이! - Angular JS의 경험 - Node.js - javascript 능숙자 - DRMS 사용 능숙자 더 많은 내용은 더 많은 내용은 더팀스 에서 확인하세요! from http://theteams.tistory.com/742 by ccl(A) rewrite - 2020-03-22 12:20:20

[Angular] Router 라우터 정리

[Angular] Router 라우터 정리 Angular2 버전 이후를 기준으로 정리한 글입니다. 라우터는 URL을 사용하여 특정 영역에 어떤 뷰를 보여 줄지 결정하는 기능을 제공한다. 전통적인 서버사이드 렌더링을 하는 웹 사이트는 주소가 바뀔 때마다 서버에 전체 페이지를 요청하고 전체 페이지를 화면에 렌더링한다. 매 요청시 전체 페이지를 새로 랜더링하는 것은 비효율적이기 때문에 라우터를 이용하여 필요한 부분만 랜더링을 한다면 효율적일 것이다. 라우터는 URL에 해당하는 컴포넌트를 화면에 노출하고 네비게이션을 할 수 있는 기능을 가지고 있다. Router 구성 요소 Router – 라우터를 구현하는 객체이다. Navigate() 함수와 navigateByUrl() 함수를 사용하여 경로를 이동할 수 있다. RouterOulet – 라우터가 컴포넌트를 태그에 렌더링하는 영역을 구현하는 Directive이다. Routes – 특정 URL에 연결되는 컴포넌트를 지정하는 배열이다. RouterLink – HTML의 앵커 태그는 브라우저의 URL 주소를 변경하는 것이다. 앵귤러에서 RouterLink를 사용하면 라우터를 통해 렌더링할 컴포넌트를 변경할 수 있다. ActivatedRoute – 현재 동작하는 라우터 인스턴스 객체이다. Router 설정 라우터를 사용하기 위해서는 먼저 Router 모듈을 import 해야 한다. import { RouterModule, Routes } from '@angular/router'; 라우터에서 컴포넌트는 고유의 URL과 매칭된다. URL과 컴포넌트는 아래와 같이 Routes 객체를 설정하여 지정할 수 있다. 아래의 예에서는 디폴트 path에서는 MainComponent가 노출이 되고 product-list path에서는 ProductListComponent가 노출이 되도록 설정을 한 것을 볼 수 있다. const routes: Routes = [ { pa...