====== 드림코딩 by 엘리 ======
<WRAP left notice 80%>
  * description : 드림코딩 by 엘리  
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-01-06
</WRAP>
<WRAP clear></WRAP>


====== 개요 ====== 
[[https://www.youtube.com/c/%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC|드림코딩]]

====== 2021 웹개발 트렌드 (2021.01.05) ======
===== Web FrameWorks =====
     * React.js
     * Angular
     * Vue.js
     * Svelte
\\
===== Web Frameworks state management =====
     * React hooks / React Context API 
     * Redux
\\
===== JavaScript Runtime Environment =====
     - node.js
     - deno
\\
===== No code, Less Code =====
     - Bubble
     - Airtable
\\
===== Serverless Architecture ( Serverless Software Design Pattern ) =====
     - 소프트웨어를 클라우드 프로바이더( Cloud Provider )에게 제공(배포)만 하면 자동으로 서버에서 동작하도록 만드는 것 
     - 어떤 OS에서 동작하든 어떤 VM에서 동작하든, OS업데이트 필요 유무에 관계없다.
     * Cloud Provider : AWS(Amazon Web Services), **Netlify**, Google Cloud Platform, Microsoft Azure, **Vercel**
\\
===== JAM stack =====
     - 서버 없이, 백엔드 지식 없이 풀스택을 구현하도록 도와준다.
     - Javascript + Apis + Markup으로 구성되어 있다.
     - 자바스크립트로 서버사이드 렌더링이 가능한 NextJS, Gastby를 이용
     - Apis는 Headless CMS를 이용해서 구현할 수 있다. 
     - Markup을 이용해서 Front-End를 구현할 수 있다. 
     * [[https://jamstack.org/what-is-jamstack/|What is Jamstack?]]
\\
====== SPA & PWA ======
===== SPA ( Single Page Application ) =====
     * 페이지를 리로딩할 필요없이 한 페이지내에서 어플리케이션을 이용할 수 있다. 
     * Facebook, Pinterest, Gmail
\\
===== PWA ( Progessive Web Apps ) =====
     * 웹기술을 이용해서 만든 웹 어플리케이션을 모바일 프로그래밍을 전혀 필요로 하지 않고, 웹 어플리케이션 자체를 모바일에 다운로드 받아서 모바일에 관련된 다양한 API를 이용할 수 있고, 디바이스가 오프라인일 때도 끊임없이 어플리케이션을 사용할 수 있도록 지원한다.
\\
===== WA ( Web Assembly ) =====
     * 브라우저 위에서 동작하는 자바스크립트 프로그래밍 언어는 조금 느린 편에 속한다.
     * 저수준에 속하는 C, C++, Rust와 같은 프로그래밍 언어로 브라우저위에서 동작하는 어플리케이션을 만들 수 있다. 
     * 네이티브에 가까운 성능을 보장
     * 컴팩트한 바이너리 포맷을 제공하여 성능이 좋은 웹어플리케이션을 만들 수 있다. 
     * 웹어쎔블리를 이용하는 대표적인 어플리케이션 : Figma
     * Figma : 디자인, 프로토타입을 위해서 많은 디자이너들이 이용하고 있는 어플리케이션. C++언어를 이용해서 웹어플리케이션을 구현, 컨텐츠 로딩 속도를 3배 이상 향상
     * 기존의 저수준(Low Level)언어를 이용해서 만든 게임이나 어플리케이션을 웹어쎔블리를 이용하여 웹 브라우저에서 동작하는 어플리케이션으로 간단하게 만들 수 있다. 
\\
===== AI ( Artificial Intelligence ), ML ( Machine Learning )을 활용한 웹어플리케이션 제작이 대세 =====
     * AI 기반 채팅 시스템 도입
     * AI 기반 웹서비스의 유행
\\
===== Voice Search and Navigation =====
===== Material Design --> Motion Design =====
   * Material Design
     * Google이 만든 디자인 시스템으로 Android, iOS, Flutter 그리고 Web에 대한 고품질의 디지털 경험 구축을 도와준다. [[https://material.io/design/introduction|material.io]]
\\
   * Motion
     * UI에 Motion(움직임)을 부여해서 UI에 표현력을 부여하고 사용하기 쉽게 한다.[[https://material.io/design/motion/understanding-motion.html#principles|Understanding motion]]


===== Ref =====
   - Flutter ( 플러터 ) : 하나의 코드베이스로 모바일, 웹, 데스크톱에서 네이티브로 컴파일되는 구굴의 UI 툴킷 [[https://flutter-ko.dev/|Flutter]]
   - CMS ( Contents Management System ) : 서버에 대한 지식이 없어도 간편하게 콘텐츠를 관리할 수 있도록 데이터베이스도 생성
   - Netlify[[https://www.netlify.com/|Netlify]]
{{tag>오션 NCS, 국가직무능력표준}}