차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:youtube:드림코딩_by_엘리 [2021/01/06 09:40]
emblim98 만듦
+++ wiki:youtube:드림코딩_by_엘리 [2023/01/20 13:53] (현재)
dhan
@@ 줄 7: / 줄 7: @@
 </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
+===== Web FrameWorks =====
-     - React.js
+     * React.js
-     - Angular
+     * Angular
-     - Vue.js
+     * Vue.js
-     - Svelte
+     * Svelte
 \\
-   * Web Frameworks state management
+===== Web Frameworks state management =====
-     - React hooks / React Context API
+     * React hooks / React Context API
-     - Redux
+     * Redux
 \\
-   * JavaScript Runtime Environment
+===== JavaScript Runtime Environment =====
      - node.js
      - deno
 \\
-   * No code, Less Code
+===== No code, Less Code =====
      - Bubble
      - Airtable
 \\
-   * Serverless Architecture ( Serverless Software Design Pattern )
+===== 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
+===== JAM stack =====
      - 서버 없이, 백엔드 지식 없이 풀스택을 구현하도록 도와준다.
      - Javascript + Apis + Markup으로 구성되어 있다.
@@ 줄 38: / 줄 42: @@
      - Apis는 Headless CMS를 이용해서 구현할 수 있다.
      - Markup을 이용해서 Front-End를 구현할 수 있다.
-     * CMS ( Contents Management System )
+     * [[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, 국가직무능력표준}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구