웰시코기 IT개발자

== 개요 ==
[[JavaScript|자바스크립트]]로 개발된 컴포넌트 구조 기반 [[프론트엔드]] 프레임워크. 보통 '''뷰''' 라고 부른다. (view) 최신 버전은 2.6.11이며, 2020년 공개를 목표로 3.0 버전이 개발 중이다.[* 사실 원래는 2019년 내로 공개할 예정이었는데, 개발이 지연되더니 어느 순간 로드맵이 변경되었다.]


=== Vue Router ===
Vue 기반 애플리케이션은 흔히 SPA(Single Page Application, 한 화면으로 구성된 애플리케이션을 말한다)로 구성되는데, 이때 한 페이지 내에서도 다른 페이지로 이동할 필요 없이 마치 여러 개의 페이지가 있는 듯한 방식으로 작동하게 해 주는 것이 바로 Vue Router이다. 이는 보통 사이트의 큰 틀 안에 {{{<router-view>}}} 태그를 삽입하고, 라우터가 보여 줄 컴포넌트를 이 태그 안에 렌더링한다. 라우터가 보여 줄 컴포넌트는 {{{<router-link>}}}의 클릭이나 JS 함수 호출 등으로 변경할 수 있다. 간단한 예를 들어보자면 블로그를 만들 때 {{{MainPage}}} 컴포넌트와 {{{Profile}}} 컴포넌트, {{{Posts}}} 컴포넌트를 만든 후, 각각 컴포넌트로의 링크를 담은 {{{<router-link>}}}를 내비게이션 바에 넣어 놓고, 그 아래에 {{{<router-view>}}}를 놓으면 내비게이션 바에서 링크를 누르는 대로 보여지는 컴포넌트가 바뀌면서 마치 일반적인 여러 페이지로 구성된 블로그와 같이 작동하게 된다. 하지만 실제로는 페이지를 이동하지 않기 때문에 로딩 시간도 훨씬 적고,[* 이러면 초기 로딩이 오래 걸리는 것 아니냐고 할 수도 있는데, Vue Router는 Lazy Load를 지원해서 최초 로딩 시에 로딩하지 않고 컴포넌트가 필요하게 된 시점에 해당 컴포넌트를 로딩해오는 것이 가능하다] 화면이 사라졌다 다시 나타나는 지저분한 효과 없이 즉시 화면이 전환된다. 원한다면 애니메이션을 넣는 것도 가능하다!

== 개요 ==
> 하나의 프레임워크로 웹과 모바일을 동시에

AngularJS는 구글에서 운용, 유지 중인 [[JavaScript]] [[웹 프레임워크]]이다. [[React(라이브러리)|React]], [[Vue.js]]와 함께 [[프론트엔드]] 삼대장으로 불린다. React나 Vue.js가 일반적으로 프레임워크라고 불리지만 실제로는 자바스크립트 라이브러리에 가까운 구성인데 반해, Angular의 경우 프론트 개발에 필요한 모든 요소를 다 갖추고 있는 프레임워크라고 할만하다. 이 점은 장점이면서 단점이기도 한데, 셋 중 가장 러닝 커브가 가파르다는 평가를 얻고 있다. 이 때문인지 인기도 다른 둘에 비해 다소 낮은 편.

버전 1~2 동안 [[jQuery]] 급으로 빠른 속도로 쓰이기 시작했다. 현재는 버전 7까지 등장하였으며 [[Node.js]] 등의 [[npm]] 설치를 지원한다. 버전 1.x를 AngularJS, 버전 2 이상부터 Angular로 지칭한다.[* 그래서 Angular 2라고 부르기도 한다.] Angular는 AngularJS와 달리 [[TypeScript]] 기반이다. React나 Vue.js에서도 TypeScript를 쓸 수 있지만 어디까지나 옵션인 데 반해, Angular는 일단 TypeScript로 쓸 것을 전제로 하고 있다는 점이 차이점.

Angular로 만들어진 앱은 MVVM(Model-View-ViewModel)패턴을 채택한다. 전통적인 MVC 구조에서 컨트롤러가 뷰 모델로 대체된 구조. 컨트롤러와 달리 각 뷰와 뷰 모델이 보다 밀접한 관계로 이루어져 있다.

나무위키 분류 : 라이브러리 | 페이스북

개요:
=== 개요 ===
React의 문법으로 [[안드로이드(운영체제)|안드로이드]]/[[iOS]] 앱을 개발할 수 있는 라이브러리이다. React를 배웠던 개발자라면 몇시간만에 익숙해질 수 있을만큼 React와 거의 유사한 문법을 가지고 있으며, 실제로 차이나는 부분은 브라우저의 HTML Element를 사용하는 것이 아니라 View, Text 등의 자체 태그를 사용하는점과 CSS를 사용하지 않고 오직 {{{CreateStyleSheet}}}를 이용한 스타일만 지원하고, 일부 속성이 가감되었다는 점을 제외하면 ~~너무 많은데~~일치한다고도 볼 수 있다.





React를 사용하는 웹사이트/프로그램
npm, 넷플릭스, 디스코드, 라프텔, 레딧
비발디, 아마존 웹 서비스, 코빗 티스토리,
트위치, 트위터, 페이스북, 인스타그램...

예시:
== 예시 ==
{{{#!syntax javascript
import React from 'react';
import ReactDOM from 'react-dom';

//"Hello, 홍길동!"을 출력하는 코드

const App = ({name}) => <h1>Hello, {name}!</h1> //함수형 문법

class App extends React.Component { //클래스형 문법
render() {
return (
<h1>Hello, {this.props.name}!</h1>
)
}
}

ReactDOM.render(<App name="홍길동" />, document.getElementById('root'));
}}}
해당 코드는 최신 브라우저에서 막 지원하기 시작한 [[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import|import]]문과, JS 표준 문법이 아닌 JSX를 사용했기 때문에 이 코드가 그대로 브라우저상에 작동되는 것은 아니다. Babel을 통해 대부분의 브라우저가 사용할 수 있는 JS 코드로 변환한 후 사용할 수 있다.