사용자 도구

사이트 도구


wiki:youtube:드림코딩_by_엘리

드림코딩 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

  1. node.js
  2. deno


No code, Less Code

  1. Bubble
  2. Airtable


Serverless Architecture ( Serverless Software Design Pattern )

  1. 소프트웨어를 클라우드 프로바이더( Cloud Provider )에게 제공(배포)만 하면 자동으로 서버에서 동작하도록 만드는 것
  2. 어떤 OS에서 동작하든 어떤 VM에서 동작하든, OS업데이트 필요 유무에 관계없다.
  • Cloud Provider : AWS(Amazon Web Services), Netlify, Google Cloud Platform, Microsoft Azure, Vercel


JAM stack

  1. 서버 없이, 백엔드 지식 없이 풀스택을 구현하도록 도와준다.
  2. Javascript + Apis + Markup으로 구성되어 있다.
  3. 자바스크립트로 서버사이드 렌더링이 가능한 NextJS, Gastby를 이용
  4. Apis는 Headless CMS를 이용해서 구현할 수 있다.
  5. Markup을 이용해서 Front-End를 구현할 수 있다.


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

  1. Flutter ( 플러터 ) : 하나의 코드베이스로 모바일, 웹, 데스크톱에서 네이티브로 컴파일되는 구굴의 UI 툴킷 Flutter
  2. CMS ( Contents Management System ) : 서버에 대한 지식이 없어도 간편하게 콘텐츠를 관리할 수 있도록 데이터베이스도 생성
  3. NetlifyNetlify
/volume1/web/dokuwiki/data/pages/wiki/youtube/드림코딩_by_엘리.txt · 마지막으로 수정됨: 2023/01/20 13:53 저자 dhan