WantAirpod

1. 네이티브 앱

Native App

네이티브 앱은 우리가 흔히 말하는 '어플리케이션'을 의미합니다. 모바일 기기에 최적화 된 언어로 개발된 앱으로 안드로이드로 개발 된 앱을 안드로이드 SDK를 이용해 Java(자바) 언어로 만드는 앱과 IOS기반 SDK를 이용해 Swift(스위프트)로 만드는 대부분의 앱이 여기에 속함

네이티브 앱의 장점

• 성능이 웹앱, 하이브리드 앱에 비하여 가장 높다.
• 네이티브 API를 호출하여 사용함으로 플랫폼과 밀착되어 있다.
• 해당 언어에 익숙하면 더 쉽게 접근가능.
•  

네이티브 앱의 단점

• 플랫폼에 한정적이다.
• 언어에 제약적이다. 따라서 해당 언어와 플랫폼의 API를 다루는데 익숙해져야한다.

2. 모바일 웹앱

WEB + APP

웹앱은 모바일웹과 네이티브앱을 결합한 형태로 모바일웹의 특징을 가지면서 네이티브앱의 장점을 갖고 있습니다. 모바일 웹 보다는 조금 더 모바일에 최적화 된 앱을 의미 합니다. 웹앱도 모바일 웹 처럼 일반적인 웹기술로 개발되고 모바일 브라우저에서 실행되지만 풀 브라우저 방식이 아닌 단일 페이지 방식으로 화면을 진화해 속도가 빠르다.

모바일 웹 web이란

모바일 웹은 모바일에서 PC용 사이트의 글자폰트와 이미지, 터치 아이콘 플레시 등 데스크탑 브라우저에서 실행되는 기능을 모바일에 맞추어 표현한 사이트를 의미한다. 쉽게말해 PC용 홈페이지를 모바일 스크린의 크기에 맞춰 줄여 놓은 것이라고 생각하면된다.

모바일 웹앱의 장점

• 웹사이트를 보는 것이기 때문에 따로 설치할 필요가 없다.
• 모든 기기와 브라우저에서 접근가능
• 별도 설치 및 승인과정이 필요치 않아 유지보수가 용이하다.

모바일 웹앱의 단점

• 플랫폼 API 카메라등 사용할 수 없고 오로지, 브라우저 API만 사용할 수 있다.
• 친화적인 터치앱을 개발하기가 약간 번거롭다.
• 네이브티, 하이브리드 앱보다 실행이 까다롭다. (브라우저를 열고 검색해 들어가야한다.)

3. 하이브리드 앱

하이브리드 앱은 기본적으로 '네이티브 앱 + 웹앱 ' 이라고 생각하시면 쉽습니다. 일반적으로 네이티브웹에 웹 View를 띄워 웹앱을 실행시키는 것이 보현적이며 양쪽의 API를 모두 사용 가능

하이브리드 APP의 장점

• 네이티브 API와 브라우저 API를 이용한 다양한 개발이 가능
• 웹 개발 기술을 사용해 앱을 개발할 수 있다.
• 한 번의 개발로 다수의 플랫폼 대응

하이브리드 APP의 단점

• 네이티브 기능에 접근하기 위해선 네이티브 개발 지식이 결국 필요함.
• 웹뷰에서 앱을 실행하는 경우이기 때문에 앱의 성능이 곧 브라우저의 성능.
• UI 프레임 워크 도구를 사용하지 않는다면 개발자가 UI를 제작해야함.

2020년 개발자가 사용하는 웹 프레임워크 TOP5

1. Vue.js
2. React.js
   • UI를 구축하는데 널리 사용되는 JavaScript 라이브러리입니다. '구성요서'라고하는 작고 격리된 코드 조각에서 복잡한 UI를 구성할 수 있는 선언적이고 동적이며 유연한 JavaScript 라이브러리입니다. 대화형 UI를 만들고 앱을 각 상태에 대한 간단한 보기를 디자인합니다. 자체 상태 관리하는 캡슐화된 구성요소를 빌드 한 다음이를 구성하여 복잡한 UI를 만든다. 기존코드를 다시 작성하지 않고도 React에서 새로운 기능을 개발할수 있다.
3. Angular
4. Angular.js
5. JQuery

2019년 하이브리드 앱 개발 프레임워크 TOP5

1. React Native
   • 2013년 Facebook에서 출시했으며, 많은 앱 개발자들에게 선택받았습니다. JavaScript 기반의 오픈 소스 크로스 플랫폼 앱 개발 프레임워크로, 개발자는 더욱 짧은 개발 주기와 빠른 개발 속도로 고성능의 모바일 앱을 개발할 수 있게 되었습니다.
   • React Native는 JSX 기반(JavaScript-XML) 프레임워크라는 장점이 있습니다. 모바일 앱 개발을 위해 Swift나 Java와 같은 복잡한 프로그래밍 언어를 학습할 필요가 없지요. 프레임워크에서 React Native 코드를 네이티브 뷰로 변환한 다음 렌더링을 수행하므로 유저에게 네이티브와 같은 환경을 제공합니다.
2. FLUTTER
3. IONIC
4. XAMARIN
5. ADOBE PHONEGAP

프레임워크

현재 가장 주목 받고 있는 프레임워크는 리액트(React), 앵귤러(angular), 뷰JS(vue.js)이며 리액트는 가장 많이 사용하며, 앵귤러는 화면 출력, 형상 관리부터 배포까지 많은 기능을 포함한 완성형 프레임워크이다. vue.js는 가장 나중에 나온 프레임워크이며 다른 프레임워크의 장점은 흡수, 단점은 보완한 프레임워크이다.

리액트

• 리액트는 페이스북을 개발할 때 사용한 기술이며, 공개 SW이다.
• 리액트의 가장 큰 특징은 '화면 출력에 특화된 프레임워크'라는 것이다.
• 리액트는 컴포넌트(Component)라는 작고 독립적인 코드 블록을 조합하여 빠르고 효율적으로 화면을 구성합니다.
  • 컴포넌트는 '레고블럭' 이라고 쉽게 이해가능하다.
• 화면 출력 속도가 빠릅니다.
  • 기존의 자바스크립트에서 화면을 구현하는 제이쿼리나 핸들바 같은 경우는 한 부분을 수정하면 전체가 수정되어 화면의 구현속도가 현저히 느려집니다.
  • 그에반해 리액트는 '게임 엔진 원리'를 도입하여 다음에 나타날 필요할 화면을 미리 구현해뒀습니다. 따라서 다음에 나타날 화면의 일부(노드)를 미리 그려놓고 변경된 화면의 일부(노드)만 수정하는 가상화면(Virtual Dom)기술을 만들었습니다. 

노드 패키지 매니저(npm)

• 자바스크립트 라이브러리는 노드 패키지 매니저라느 프로그램으로 관리합니다. 
• npm은 https://www.npmjs.com에서 서 필요한 라이브러리를 내려받아 설치하고 삭제하는 등의 관리를 해주는 프로그램
• npm은 실제로 node_modules 폴더에 라이브러리를 내려 받아 저장하고 package.json이라는 파일에 설치된 라이브러리의 정보를 적어 저장합니다. 
  • 실제 라이브러리와 라이브러리 명세 파일을 따로 관리하는 것
  • 라이브러리 명세 파일을 따로 관리하는 이유는 node_modules에 저장되는 라이브러리의 용량이 굉장히 크기 때문이다. (경우에 따라 1GB를 넘기도 한다) 
  • A개발자가 B개발자에게 프로젝트를 공유할 때 용량이 큰 라이브러리까지 전송할 필요 없이 라이브러리 명세와 핵심코드만 전다랗면 됩니다. 그러면 개발자 B는 package.json의 모록을 이용하여 손쉽게 라이브러리를 내려받을 수 있습니다.
• yarn : npm의 단점을 보완하여 성능과 속도를 개선한 라이브러리 관리 도구

웹팩(WebPack)

• 웹팩은 프로젝트에 사용된 파일을 분석하여 기존 웹 문서 파일로 변환하는 도구
• 중간에 파일을 해석하는 역할 

Redux : React Native를 개발하는데 좋은 아키텍쳐 패턴

Reactive 

• 리엑티브 (Reactive eXtension) = RX)
• MicroSoft가 창안한 개념으로 데이터의 흐름에 따른 변화를만드는 비동기적 프로그래밍 패러다임.
• 기본 실행 모델이 데이터의 흐름들 통해 자동으로 전파하는 것
• RX패러다임은 다양한 개발언어로 확장됨
  • RxAndroid, RxJava, ReactiveCocoa, React Native...
• Reactive -> (facebook) ->React, Flux design petten
• React -> React native
• Flux design petten -> Redux design petten

Flux