이상학의 개발블로그

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

세미나

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

학학이 2016.08.29 23:55

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

Seminar Contents

오늘 배울것
  • Express
  • ES6
  • Redux
  • Webpack
  • MongoDB


React ?

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

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

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


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

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



React Core


JS 라이브러리 추가
  • react : 콤퍼넌트
  • rect-dom : 렌더링

  • 아직 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

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



Redux ?

Redux



Conclusion
후반으로 갈수록 멘붕에 빠져 노트에 내용을 많이 못 적었다. 분명 인프런을 통해 어느 정도 강의를 들었지만, 어렵게 느껴졌다. React 가 나랑 좀 안 맞는 것 같기도 하다.
그러나 Angular.js 를 처음 접할 때처럼 매우 신기한 라이브러리였다. Angular는 방대한 느낌이 있는데 React는 view 만을 담당하니 다른 프레임워크와 시너지를 발휘할 수 있을 거 같다.
부족한 내용은 링크로 대신한다.


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


0 Comments
댓글쓰기 폼