[클라우딩 어플리케이션 엔지니어링 TIL] 240226 - CSS 라이브러리, 웹 개발 트렌드 살펴보기

Intro

---

React Bootstrap 라이브러리에 대해 공부하기 전에 현재 자주 사용하는 CSS 라이브러리와 웹 개발 트렌드에 살펴보는 강의를 들었다.

 

 

 

오늘 학습한 내용

---

React 핵심 원리

1. State와 Props가 변하면 화면을 렌더링한다.
2. HTML 코드 내에 JS 코드를 삽입할 수 있다.

위의 2가지 원리를 바탕으로 원하는 곳에 원하는 조건으로 스타일링과 기능을 구현한다.

 

 

CSS 라이브러리

• Material UI (MUI)

Material UI: React components that implement Material Design

: Google에서 개발했으며 제일 많이 쓰이는 라이브러리이다. 문서가 잘 작성되어 있다.

 

• Ant Design (Antd)

Ant Design - The world's second most popular React UI framework

: 알리바바에서 개발했으며, MUI 다음으로 많이 쓰이는 라이브러리이다. MUI와 유사하나 디자인패턴과 원칙이 있다.

 

• React Bootstrap

React Bootstrap | React Bootstrap

: 예전(jQuery)부터 사용하던 Bootstrap을 React에 적용하기 쉽게 구축한 라이브러리이며, 반응형 및 모바일 구축에 유리하다.

 

 

 

---

웹 개발 트렌드

웹 개발 트렌드란 많은 사람들이 따르는 패턴이나 방식, 산업의 변화로 인해 나타나는 유행으로 트렌드를 정의한다.

 

요즘 웹 개발 트렌드는 기술의 발전(하드웨어, 소프트웨어)과 산업의 발전(4차 산업시대)으로 단순한 웹 페이지에서 웹 애플리케이션으로 트렌드가 변화하였다.

 

 

20-22년 핵심 키워드

• Metaverse 
  • 웹에서 3D 렌더링 기술을 어떻게 적용할까? ➡️ Three.js, Babylon.js
  • 물리엔진은? ➡️ Ammo.js, bullet.js
  • 네트워킹은? ➡️ Photon engine, WebRTC
  • 디자인, 스타일링은? ➡️ Blender(디자인), Claymorphism(스타일링)
• NFT
• 언택트
• WEB 3.0

 

23년 핵심 키워드 - 'AI'

: ChatGPT의 등장으로 Metaverse가 확 식음

 

 

24년 웹 개발 트렌드는 ??

: AI 유행은 계속될 것

• AI 기술을 활용한 기능이 웹에 접목됨: 챗봇, 가상 비서, 분석 툴, 컨텐츠 생성…
• 우리가 직접 AI를 만들 순 없지만 만들어진 걸 활용할 수 있다.

 

 

 

마무리

---

웹 개발 트렌드에 대해 한 번 더 생각해 볼 수 있어서 앞으로 어떤 기업을 가면 좋을지, 어떤 도메인을 선택할지 고민에 대한 도움이 된 것같다. 아직 확실히 정한 건 없지만 ㅎ