기본 콘텐츠로 건너뛰기

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

[020] 파동함수를 쓰기

[020] 파동함수를 쓰기 [020] 파동함수를 쓰기 [020] 파동함수를 알면 우리가 원하는 뭔가를 알 수 있다고 했는데, 정작 파동을 함수로 쓰는 것은 아직 다루지 않았고, 양자역학 내용을 좀 더 진행하려면 왜 파동이 삼각함수로 써 지는지를 한번은 정리를 해야겠다. 수학이 많이 나올 예정이다. 앞에서 파동함수를 아래 형태로 쓸 수 있다고 했었는데, 왜 이런 형태가 되는지 알아보자. [020-01] 파동함수 사인파의 일반형은 코사인 (cos) 을 이용해 쓰지만, 사인 (sin) 과 코사인은 위상차이만 있는 함수들이고, 우리는 앞으로 사인을 이용해 문제를 풀 예정이라 사인을 이용하기로 한다. 파동함수는 양자역학에서 갑자기 나온 말이 아니고, 원래 파동을 함수의 형태로 쓴 것을 파동함수라고 부른다. 파동-입자 이중성을 가지니까 기존에 파동을 함수의 형태로 쓰던 그 모양을 가져다 쓴 것. 주교재의 16장에 있는 내용이다. [020-02] 펄스 - Pulse 아래와 같이 하나의 진동이 왼쪽에서 오른쪽으로 진행하는 상황을 생각해보자. 시간 t 일 때, 위치 x 의 밧줄의 높이를 y 라 하고, 셋의 관계를 기호로 쓰면, 그러면 아래의 관계가 성립한다. 이게 무슨말이냐면, 시간 t 일 때 위치 x 의 밧줄의 높이 와 시간 0 일 때 위치 x-vt 의 밧줄의 높이가 같다 는 말인데, 그림으로 보면, 왼쪽은 시간 0, 오른쪽은 시간 t 이고, t 일 때 P 의 높이와 0 일 때 높이가 같다는 것. [020-03] 파동을 식으로 써보자. 아래의 파동을 보자. 지금 내용부터는 사인이든 코사인이든 상관없는데, 위 그림이 사인이니까 아래의 식 으로 쓸 수 있다. A는 진폭이고, 주기, 진동수, 파장 같은 값을 아직 모르니까 a 는 아직 정해지지 않은 값 이다. 일반적으로 알고있는 삼각함수는 가로축이 각도 이지만, 우리는 공간을 진행하고 있는 파동을 다루니까 위의 형태로 써진다고 생각하자. x=0 에서 진폭이 ...

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기 angular project를 빌드한다 ng build --prod 그러면 dist 폴더가 생긴다. dist 폴더 안에 있는 아이들을 사용한다. 아마존 s3 콘솔로 이동 https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2 새로운 Bucket 을 생성한다(Create bucket). 버킷 이름은 고유하게 짓는다. 버킷 생성후 properties tab > static website hosting을 클릭한다. index document는 index.html은 쓴다. properties > static website hosting Permission tab 에서 권한을 수정한다. overview tab 에서 필요한 파일 업로드 dist 폴더 안에 있는 파일들을 업로드 한다. bucket policy 설정 properties > static website hosting > endpoint 클릭하면 서버에 올라간 앱을 확인 할 수 있다 일단 angular 앱을 올리긴 했는데.. 이걸로는 아무것도 할 수 었다. django로 만든 서버를 올리고 database를 연결하고 그것을 지금 이 angular 앱과 연결해야한다. 아직 어떻게 해야 할지는 모르겠음 계속 삽질 중. 그래도 angular app 하나 올라갔는데 재밌네 from http://paigeblog.tistory.com/18 by ccl(A) rewrite - 2020-03-25 16:20:22