[패스트캠퍼스] React 강의 7주차 학습후기

React& Redux로 시작하는 웹 프로그래밍 : [패스트캠퍼스] 프론트엔드 강의

[국비지원교육] 7주차는 React에 관한 내용을 배우게 되는데 앞서 배운 자바스크립트에 익숙하다면 
리액트를 쉽게 익힐수 있을것이라 생각한다. 이번 강의의 강사님은 변경용의성의 초점을 맞춰 학습할 수 
있도록 도와준다. 소프트웨어를 만들때 빠르고 쉽게 변경적용 대응할 수 있도록 계속적으로 연구하고 생각해야 한다고 한다.

app.js

 

리액트란

리액트는 UI 자바스크립트 라이브러리로써 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리입니다. 리액트는 자바스크립트에 HTML을 포함하는 JSX(JavaScript XML)이라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있습니다. 그리고 가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리입니다.

리액트는 싱글 페이지 애플리케이션에서 UI를 만드는 자바스크립트 라이브러리이다보니, 싱글 페이지 애플리케이션 제작을 하는 다른 프레임워크에 비해 부족한 부분이 있습니다. 예를 들어 리액트는 페이지 전환 기능을 제공하지 않기 때문에, 리액트를 사용하여 페이지 전환을 해야한다면, react-router와 같은 추가적인 라이브러리를 사용해야 합니다.

리액트의 특징

리액트는 가상 돔, 단방향 데이터 바인딩 등 여러 특징을 가지고 있습니다. 여기서는 이런 특징들에 관해 자세히 살펴보도록 합시다.

참고 -  https://dev-yakuza.posstree.com/ko/react/create-react-app/react/

React란

 

Dom API는 다루기가 굉장히 까다롭다. 많은기능이 있고 모든것을 할수 있게 해주지만 웹 어프리케이션 최적화되어 있지않다.  
HTML은 문서이다. link를 통해서 또다른 HTML 문서로 이동하면, 기존 HTML문서는 사라지고 새로운 HTML문서를 불러온다. 그 과정에서 화면이 깜박인다.
=> 사용성이 떨어진다.

개선하기위해  Ajax 와 Spa 가 등장한다. 

Ajax -   비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다. 표현 정보를 위한 HTML 과 CSS 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트 위키백과

spa - Single-page application 
싱글 페이지 애플리케이션은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다. 위키백과

React - Dom을 없애서 문제를 해결했다.

변경하지 않고 확대하기 -  크롬브라우저와 크롬익스텐션과 같은 관계  본 기능은 변하지 않고 확장되어 사용가능한 플러그인 느낌,  미들웨어도 플러그인과 비슷한 개념으로 이해를 하면 될 듯

웹팩 (Webpack) - 굳이 알필요는 없지만 빌더로써 이것을 사용한다.

웹팩은 오픈 소스 자바스크립트 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다. 위키백과