목차
드림코딩 by 엘리
개요
2021 웹개발 트렌드 (2021.01.05)
Web FrameWorks
Web Frameworks state management
JavaScript Runtime Environment
No code, Less Code
Serverless Architecture ( Serverless Software Design Pattern )
JAM stack
SPA & PWA
SPA ( Single Page Application )
PWA ( Progessive Web Apps )
WA ( Web Assembly )
AI ( Artificial Intelligence ), ML ( Machine Learning )을 활용한 웹어플리케이션 제작이 대세
Voice Search and Navigation
Material Design --> Motion Design
Ref
드림코딩 by 엘리
description : 드림코딩 by 엘리
author : 오션
email : shlim@repia.com
lastupdate : 2021-01-06
개요
드림코딩
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를 구현할 수 있다.
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에 대한 고품질의 디지털 경험 구축을 도와준다.
material.io
Motion
UI에 Motion(움직임)을 부여해서 UI에 표현력을 부여하고 사용하기 쉽게 한다.
Understanding motion
Ref
Flutter ( 플러터 ) : 하나의 코드베이스로 모바일, 웹, 데스크톱에서 네이티브로 컴파일되는 구굴의 UI 툴킷
Flutter
CMS
( Contents Management System ) : 서버에 대한 지식이 없어도 간편하게 콘텐츠를 관리할 수 있도록 데이터베이스도 생성
Netlify
Netlify
오션
,
NCS,
,
국가직무능력표준