📌웹 앱의 필수 구성요소 - HTML, CSS, JavaScript
HTML
UI를 기본적으로 만듦
CSS
UI의 비주얼적인 요소 담당
JavaScript
동적인 프로그래밍 부분 담당, HTML조작 가능
브라우저
웹앱을 실행시키는 역할, 런타임(실행시간) 환경을 제공하는 환경
(브라우저 외에도 웹앱을 실행시키는 환경 다양하게 존재)
📌HTML을 어디에서 만드냐가 중요
브라우저가 HTML을 로딩할 때는 웹서버라는 소프트웨어가 HTML파일을 브라우저에게 전송.
(전송하기 전에는 웹서버 안에 HTML파일이 존재)
브라우저 안에 HTML이 전송된 후에 HTML을 해석해서 브라우저가 화면에 UI를 그리고 난 뒤,
JS실행.
JS는 HTML을 조작할 수 있고, 이는 브라우저가 웹앱을 실행시킨 다음에도 UI가 조작됨을 뜻함.
JS에 의해 UI가 조작될 수 있음.
클라이언트 사이드 렌더링 : HTML을 주도적으로 만들어서 UI를 표현하는 방법.
브라우저에 최초 전송된 HTML에는 거의 내용이 없고, JS가 실행되면서 필요한 UI를 그때그때마다 JS가 생성해 내는 방식.
서버 사이드 렌더링 : 웹서버 주도적으로 HTML을 만들고 브라우저한테 전송하는 방법.
JS의 실행결과로 HTML만들어 지는 것이 아니라, 웹서버에서 HTML이 만들어져서 브라우저로 전송되는 방식.
어떤 웹앱이든 클라이언트 사이드 렌더링 방식으로 개발할 수도 있고,
서버 사이드 렌더링 방식으로 개발할 수도 있음.
앱의 성격에 따라 좀더 효과적인 방법이 존재할 뿐. 반대로 더 성격에 맞지 않는 렌더링 방식을 선택했을때는 비효율이 발생하므로 개발자 역할 중요.
📌프로그래밍적인 관점에서 구성요소
HTML로 UI만들고 JS가지고 조작하는 것은 똑같지만 그 안에 다양한 부가시스템 존재하고
대표적으로 그래픽 시스템이 있음.
웹앱은 기본적으로 그래픽 시스템을 HTML와 CSS를 가지고 그래픽을 표현할 수 있음.
(원, 사각형, 그라데이션...)
더 적극적인 그래픽시스템 필요한 경우 (차트, 애니메이션, 3D... )-> HTML,CSS가지고는 한계가 있고, JS로 2D,3D 그래픽 표현할 수 있게끔 제공해주는 캔버스라는 테그 있음.
캔버스 테그-> 그래픽 시스템을 표현하기 위한 도화지로,
2D,3D 그래픽을 표현하기 위한 영역만 제공. 실직적으로 그래픽 작업은 JS코드로 이루어짐.
JS코드로 그래픽을 다룰수 있는 다양한 도구를 제공하는 것을 API라고 함.
웹FE개발자는 HTML, CSS만 다루는 것이 아니라, 필요해 의해 2D,3D를 다룰 수 도 있음.
간단한 차트나 그래픽 시스템들은 FE개발자에게 꼭 필요한 지식 중 하나.
웹앱을 이루는 다양한 구성요소들이 존재함.
ex) 미디어 파일 다루기, 웹 워커, 웹 어셈블리..
