기본 콘텐츠로 건너뛰기

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

댓글

이 블로그의 인기 게시물

1. Welcome to React!

1. Welcome to React! 본 포스팅은 리액트를 처음으로 공부하기 시작하는 사람들을 위해 제작되었다. 구글에 영어로 react라고만 쳐봐도 기본적인 개념을 배울만한 블로그는 아주 많지만 막상 처음부터 하나하나 따라할 수 있는 튜토리얼과 같은 게시글이 없는 것 같아 이 부분에 초점을 맞춰 포스팅을 써보려 한다. 자바스크립트의 라이브러리 우선 리액트는 페이스북이 직접 개발한 자바스크립트의 라이브러리이다. 즉, 문법과 기능에 확장이나 변화가 있을 수는 있지만 그 뼈대는 자바스크립트에 있다는 것이다. 따라서 리액트를 공부하기 전에 자바스크립트의 기본적인 변수선언(const, let, var 등) 같은 문법을 알아둔 후 공부하는 것이 좋다. 참고하면 좋을만한 사이트 : https://opentutorials.org/course/743 Virtual Dom 필자가 리액트를 공부하며 처음으로 느낀 장벽은 바로 virtual DOM이라는 개념이다. 이 개념에 대해 구글에 검색해본 결과 다음과 같이 요약할 수 있다. 변한 부분만 다시 그린다. 이는 다시 말하면 리액트가 출시되기 전까지 모든 프레임워크는 변하지 않은 부분도 불필요하게 다시 그리고 렌더링 했다는 것이다. 아래에서 Angular라는 구글의 웹 개발 프레임워크와 React의 차이를 예시를 들어 비교해보자. 출처 - 블로그 : http://blog.naver.com/PostList.nhn?blogId=songc7 위의 두 그림을 차례로 그린다고 가정하자. 우선 누가 어떤 방법으로 그리던 모두 처음 그림은 캔버스에 백지상태부터 그려야 한다. 하지만 두번째 그림을 이어서 그려야 할때 Angular는 새로운 캔버스에 전체 그림을 다시 그려서 우리에게 보여주는 반면 리액트는 처음과 두번째 그림을 비교해서 달라진 부분만 찾아서 그린 후 원래 그림에 덮어서 보여준다. 여기서 "속도"의 차이가 명확하게 발생한다. Angular을 포함한 기존의 프레임워크들은 전체 그림(

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증...

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증... django 는 기능이 참 너무 많다 ^^; 지금은 서버는 django로, 프론트는 angular를 붙여서 간단한 웹을 만들어 보려고 한다. 웹 만들때 항상 회원가입/로그인 기능은 맨 앞에 구현한다. 어떻게 구현하면 좋을까... 찾아보다가 이 기능을 구현할 수 있는 방법이 너무 많아서 정보를 찾기 더 어려웠다. 일단 나는 django에서 django rest framework라는 것을 사용해서 API를 만드려고 한다. 순수 django 튜토리얼에는 바로 template 랑 연결해서 설명하는 부분이 많았다. 나는 그냥 API 만 만들고 싶다고!! 그래서 찾은 것이 django REST framework. https://www.django-rest-framework.org/api-guide/authentication django REST framework 설치 using pip pip install djangorestframework settings.py INSTALLED APPS 에 추가해야함 INSTALLED_APPS = [ ... 'rest_framework', ] django REST framework 에서도 인증 관련해서 제공하는 것이 1개가 아닌 여러 개다. 나는 그중에 TokenAuthentication을 이용해서 로그인을 구현해 보려고 한다. TokenAuthentication Token authentication is appropriate for client-server setups, such as native desktop and mobile clients. 이렇게 나와있어서 내가 하려는 것과 일치해서 이걸로 결정 ~ 솔직히 처음 로그인을 구현하려고 하면 도대체 그 과정이 어떻게 되는지 모를 수 도 있다. 나는 쉽게 정리하면 아래와 같은 과정이라고 생각한다. 로그인 로그아웃

개발자를 위한 React.js 툴 및 리소스

개발자를 위한 React.js 툴 및 리소스 개발자를 위한 React.js 툴 및 리소스 페이스 북이 2013 년에 라이브러리를 처음 공개 한 이후 React.js의 인기는 빠르게 증가하고 있습니다.이 프로젝트는 Github에서 다섯 번째로 가장 많이 출연 한 오픈 소스 프로젝트이며 React 개발자를위한 구인 광고도 크게 증가하고 있습니다. React는 사용자 인터페이스를 구축하기위한 간단한 JavaScript 프레임 워크입니다. 가장 두드러진 예로는 Facebook 및 Instagram이 있습니다. React는보다 간단한 구조와 성능 최적화에 중점을 둔 Angular 또는 Backbone과 같은 MVC 프레임 워크에 대한 대안을 제공합니다. React가 앞으로 몇 년 동안 웹 개발 환경을 확실히 정의 할 것이기 때문에이 기사에서는 React 개발 영역에 발을 딛는 데 도움이되는 개발자 툴킷을 제공하고자합니다. 공식 React.js 문서 Facebook은 개발자에게 React의 주요 개념에 대한 자세한 문서를 제공합니다. 문서 외에도 React를 사용하여 대화 형 틱택 토 게임을 구축하는 방법에 대한 훌륭한 자습서와 React 개발자를위한 토론 포럼을 찾을 수 있습니다. 문서는 오픈 소스이므로 원하는 경우 편집 할 수도 있습니다. 공식 페이스 북 문서 React.js Github Repo React Github Repo에서 필요할 때마다 React의 소스 코드를 확인할 수 있습니다. 현재 개발 상태에 대한 정보를 유지하려면 문제, 중요 시점 및 최신 풀 요청을 살펴볼 수도 있습니다. 문제가 발생하면 문제 해결 가이드를 약간 연구하는 것이 좋습니다. React.js Github Repo 안녕하세요 월드 스타터 코드 빠른 반응을 원한다면 Codepen에서이 "Hello World"대화식 데모로 시작할 수 있습니다. 필요한 모든 자산과 시작 코드도 포함되어 있습니다. Babel도 켜져 있으므로 ECMAScri