○ Redux
어플리케이션의 상태를 관리하는 라이브러리
○ Webpack
모듈 번들러 각종 로더 및 플러그인등을 통해 프로젝트를 빌드하는 작업을 도와줌
○ Express
node-js환경에서 웹서버 여는 것을 쉽게 해주는 프레임 워크
○ ES6
2015년에 업데이트 된 공식 자바스크립트 문법 => IE 같은 예전브라우저는 ES5를 지원한다. ES6 지원 X
○ MongoDB
no-sql 데이터베이스
○ Mongoose
node-js환경에서 Mongo데이터베이스를 간편하게 사용할 수 있게해 주는 프레임워크
- 프레임워크는 틀이 만들어 져있어 안을 채우는 식 보통 하나만 사용한다.
- 라이브러리는 필요한 부분에 넣어서 쓸 수 있다.
리액트는 유저 인터페이스를 만들기 위한 라이브러리다
1)Virtual DOM(가상 DOM)
DOM을 추상화 시킨거로 그냥 자바스크립트 객체이다. => 데이터가 변동 될때마다 DOM에서 어떤것이 변동 된건지 알 수 있다.
○ 리엑트 js의 장단점
장점
① 리엑트는 컴포넌트만 사용한다.
② 뛰어난 가비지 컬렉션과 메모리 관리, 성능을 가지고 있다.
③ 서버( => 초기 구동 딜레이 & SEO(검색엔진 최적화))와 클라이언트의 렌더링을 둘다 지원한다.
(처음에 초기 렌더링시 서버렌더링을 하여 서버에서 HTML을 미리 생성하고 문자열 형태로 보여주고 다음은 클라이언트 렌더링을 시작한다.)
서버렌더링은 검색엔진을 사용한다. => 서버 컴퓨터의 상태가 좋을때 사용하는 걸 추천
④ UI의 간편한 수정과 컴포넌트화를 통한 재사용성
⑤ 페이스북 개발자가 만들어서 계속 업그레이드 된다.
⑥다른 프레임 워크나 라이브러리와 혼용이 가능하다.
단점
① 뷰만 관여한다.
② IE8 이하 버전은 지원하지 않는다.
리액트
모든 리액트컴포넌트는 render() 메소드를 가진다.
render() - 컴포넌트를 정의하는 것으로 모든
○ 리액트 js
① XML -like syntax (XML 같은 문법)를 native Javascript 문법으로 변경하는 것이다.
② " "로 감싸지 않는다.
③ ( )를 사용하지 않아도 오류 는 발생하지 않지만 가독성을 위해 사용하자
○ JSX - Javascript에서 HTML을 작성하는 것
① ① 모든 JSX 형태의 코드는 contatainer element 안에 포함되어야 한다.
② 매핑할 때 중괄호 { }를 사용한다.
③ Style 사용시 CamelCase인 객체를 사용해야한다. ex) background-color X / backgroundColor O
④ 주석은 /* */를 사용하며 사용시 { } 중괄호 안에 주석이 작성되어야한다.
ex) /*<div></div>*/ => X / {/* Test */} => O