[React / 코드랩] ReactJS와 NodeJS-Express를 이용한 웹 서비스 개발하기

Introduction

React.js 는 페이스북이 React Native 를 발표 했을 때 처음 알게 되었다. 무엇인지 해보려고 하다가 가상 Dom, JSX 등등 알아들을 수 없는 용어 때문에 블로그 1개 읽고 접은 기억이 있다. 그러다 View만을 담당하는 프레임워크가 필요했고 React를 찾았다.

사실 인프런의 React 강의가 이 프레임워크를 다시 배우게 만들었다. 그러던 중 http://webframeworks.kr/  를 통해 React Offline Codelab을 신청했고, 인프런의 강사님이 해당 코드랩의 강사님이라는 사실을 뒤늦게 알았다.

이 내용은 2016.08.27 코드랩 세미나의 내용이고 대부분의 세미나 내용은 https://www.inflearn.com/course/react-%EA%B0%95%EC%A2%8C-velopert/  이곳에 동영상 강의로 제공되고 있다.

React 를 처음 배우는 분들은 이곳의 강의를 들으면 큰 도움이 될것이다. 강사님이 굉장히 설명을 잘 해주신다. 분명 강사님은 React 가 쉽다고 하는데 몇번을 봐도 어렵긴 하다.

Prerequisites

• 개발환경 : https://velopert.com/1980 

Seminar Contents

오늘 배울것

• Express
• ES6
• Redux
• Webpack
• MongoDB

React ?

React 는 프레임워크가 아닌 라이브러리 !

Angular는 React와 비교 대상이 아니다. 제공하는 범위가 너무 다르다. 

https://youtu.be/muc2ZF0QIO4 React를 설명하는 재미난 강의

React 장점

• 배우기 간단하다. ( angular는 배워야 할 것이 너무 많다 )
• GC, 메모리 관리, 성능
  • https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/ 
• 서버 사이트 렌더링
  • SEO 
    • 구글은 자체적으로 JS 엔진이 있어서 서버사이들 렌더링 필요없지만, 네이버, 빙 등등은 안된다.
  • 초기 구동 딜레이가 있다.
  • 서버 자원 사용은 감안해야 한다.
  • 서버 컴퓨터의 성능이 좋을 때 사용!
• 간편한  UI 수정 및 재사용
• 페이스북이 밀어줌!!
  • CodeIgniter 의 몰락… ( 밀어주는 곳이 없어서 더디다. 언젠간 없어질 수도 )
• 다른 프레임워크 및 라이브러리와 혼용 가능

React 단점

•  Only View
  • 라우팅, Ajax 등 지원 하지 않는다.
• IE8 이하 X
  • 방법은 있다.

React Core

Codepen http://codepen.io/pen/ 

JS 라이브러리 추가

• react : 콤퍼넌트
• rect-dom : 렌더링

ES6 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes 

• 아직 class 내부에서 변수선언 불가! constructor 안에서 선언해야 함!

JSX

• Xml -> JS 문법으로 변경
• “” 필요 없음
• ( ) 필요 없음

If - else 사용불가 => 삼항 연산으로

CSS

camelCase

style 을 객체로 만들어서 객체를 JSX에 넣어줌

props

state

Let’s Code !

nitrous http://nitrous.io/  Cloud IDE

cmder http://cmder.net/  Windows Console

webpack 

• 브라우저에서 require, import를 할 수 있게 해준다.
• js 파일을 합쳐준다. minify

webapck-dev-server 

• 별도 서버없이 static 파일 다루는 웹서버
• hot-loader 로 자동 새로고침 가능

Component LifeCycle API

1. componentWillMount
2. componentDidMount
3. componentWillReceiveProps
4. shouldComponentUpdate
5. componentWillUpdate
6. componentDidUpdate
7. componentWillUnmount

localStorage http://www.w3schools.com/html/html5_webstorage.asp 

• 5mb
• 로컬 스토리지 값은 서버로 전달되지 않는다.
• 쿠키와 비슷한 개념

Redux ?

Redux

• 컴포넌트 간의 데이터 교환
• Flux
  • 추상적 개념
  • 페이스북의 읽지 않은 메세지 표시 lable
  • http://bestalign.github.io/2015/10/06/cartoon-guide-to-flux/ 
• Redux 는 Flux의 구현체
• http://bestalign.github.io/2015/10/26/cartoon-intro-to-redux/ 

Conclusion

후반으로 갈수록 멘붕에 빠져 노트에 내용을 많이 못 적었다. 분명 인프런을 통해 어느 정도 강의를 들었지만, 어렵게 느껴졌다. React 가 나랑 좀 안 맞는 것 같기도 하다.

그러나 Angular.js 를 처음 접할 때처럼 매우 신기한 라이브러리였다. Angular는 방대한 느낌이 있는데 React는 view 만을 담당하니 다른 프레임워크와 시너지를 발휘할 수 있을 거 같다.

부족한 내용은 링크로 대신한다.

• velopert 님 동영상 강좌 : https://www.inflearn.com/course/react-%EA%B0%95%EC%A2%8C-velopert/ 
• velopert 님 블로그 : https://velopert.com/1921 
• 초보자는 벨로퍼트님을 따라하십다!!

**블로그 내용 문제시 글 삭제하겠습니다.