본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다
패스트캠퍼스 환급챌린지란?
(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스
초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!
fastcampus.co.kr
https://fastcampus.info/4n8ztzq
여행을 다녀와도 꾸준하게 강의를 들을 수 있게 해주는 환급챌린지 최공!
5일차 공부 시작!
오늘의 강의 주제는 '웹앱의 구성요소'이다.
(오늘도 마찬가지로 모자이크 처리..)
오늘의 학습 내용
웹앱을 만들 때 기본적으로 필요한 구성 요소는 세 가지다 - HTML, CSS, JavaScript.
이 세 가지는 웹앱 개발에서 필수불가결한 요소다.
HTML은 웹페이지의 구조와 내용을 담당한다. 만약 단순히 웹페이지(정적 페이지)만 만든다면 HTML만으로도 충분하다. 여기에 CSS를 추가하면 시각적 디자인과 레이아웃을 꾸밀 수 있다. 하지만 HTML과 CSS만으로 구성된 페이지는 사용자의 입력에 따라 동적으로 변하지 않기 때문에 '앱'이 아니라 '문서'로 분류된다. 즉, 항상 똑같은 형태만 제공한다.
반면, '앱(애플리케이션)'은 상태(state)를 가지고, 사용자와 상호작용하며 정보를 주고받는다. 이런 동적인 기능을 구현하려면 JavaScript가 반드시 필요하다.
결국, 웹앱을 만들기 위해서는 HTML, CSS, JavaScript 이 세 가지가 모두 필요하다.
* 실행 관점에서의 구성 요소
웹앱이 실행된다는 것은 사용자가 브라우저를 통해 웹사이트에 접속하고, 이때 HTML, CSS, JavaScript 파일이 브라우저로 전송되어 브라우저가 이를 해석하고 실행하는 과정을 의미한다.
- HTML: UI의 기본 구조와 내용을 담당
- CSS: 시각적 스타일과 레이아웃을 담당
- JavaScript: 동적 기능과 프로그래밍적 로직을 담당
여기서 중요한 점은, 웹앱을 실행시키는 환경이 바로 브라우저라는 것이다. 브라우저는 HTML, CSS, JavaScript를 해석하고 실행하는 런타임 환경(runtime environment)이다.
과거에는 브라우저만이 유일한 웹앱 실행 환경이었지만, 최근에는 Node.js와 같이 JavaScript를 브라우저 외부에서도 실행할 수 있는 다양한 런타임 환경이 등장했다. 이를 통해 서버 측에서도 JavaScript를 사용할 수 있게 되었다.
* CSR & SSR
JavaScript를 이용하면 HTML을 동적으로 조작하여 UI를 실시간으로 변경할 수 있다.
여기서 중요한 점은 최종적으로 사용자에게 보여지는 형태가 HTML이라는 점이다.
따라서, HTML을 어디서, 어떻게 생성하느냐가 웹앱 아키텍처에서 매우 중요하다.
- CSR (Client-Side Rendering, 클라이언트 사이드 렌더링)
브라우저가 최초로 받는 HTML은 거의 비어 있고, JavaScript가 실행되면서 동적으로 HTML을 생성하고 UI를 그린다. React, Vue 등 SPA(Single Page Application) 프레임워크가 대표적이다.
- SSR (Server-Side Rendering, 서버 사이드 렌더링)
웹서버에서 미리 HTML을 생성하여 브라우저에 전송한다. 브라우저는 받은 HTML을 바로 렌더링한다. Next.js, Nuxt.js 등이 대표적이다.
앱의 특성, 성능, SEO 등 다양한 요소에 따라 어떤 렌더링 방식을 선택할지 신중하게 결정해야 한다.
* 그래픽 시스템
웹앱은 기본적으로 HTML과 CSS를 통해 다양한 그래픽 요소를 표현할 수 있다.
하지만, 복잡한 차트, 애니메이션, 3D 그래픽 등 고급 그래픽 작업에는 한계가 있다.
이를 보완하기 위해 canvas태그가 제공된다.
canvas는 그래픽을 그릴 수 있는 영역만 제공하며, 실제 그래픽 작업은 JavaScript로 수행한다.
JavaScript에서는 Canvas API, WebGL 등 다양한 그래픽 API를 활용해 2D/3D 그래픽을 그릴 수 있다.
마치며
오늘도 환급 챌린지 5강 공부 완료!!
웹앱의 구성요소에 대해 리마인드 할 수 있는 시간이어서 좋았다. 오늘은 여행을 다녀와서 촉박했지만 수강 완료!!