1. 웹페이지의 동작 원리
1) MPA = (Multi Page Application)
전통적인 웹 어플리케이션 개방 방식에 속한다.
여러개의 페이지로 구성되어 있다는 의미는, 필요한 리소스를 매 request에 담아 응답으로 받아온다는 말이다.
새로운 페이지를 열어야할 경우, 그에 맞는 이미지나 파일들이 전부 다운로드 되고 다시 렌더링 된다.
*렌더링이란?
렌더링이란 HTML, CSS, JavaScript 등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말한다.
*렌더링 과정( http://bit.ly/3137pmh- 자세하게 나와있는 사이트 참조!)
DOM(Document Object Model), CSSOM(CSS Object Model) 생성
- 서버로 부터 받은 HTML, CSS의 텍스트를 연산과 관리가 유리한 Object Model로 만든다.
Render Tree 생성
- 위에서 만든 Object Model에 스타일정보를 추가하고, 실제 화면에 표현되는 노드들로 구성시켜놓은 트리 생성.
Layout 단계
- 위의 Render Tree를 통해 구성된 노드들을 바탕으로 화면에 출력될 부분을 뷰포트에서 계산하는 단계
즉 노드로 구조화 되어 있는 모델을 바탕으로 화면에 표시될 그래픽 부분을 계산하는 단계라고 생각하면된다.
Paint
- 계산, 측정한 값들을 바탕으로 요소들을 브라우저에 표시하는 단계, 각 픽셀값들을 채워넣는단계로 보면된다.
*렌더링 엔진이란?
대부분의 브라우저가 렌더링을 수행하기 위해 가지고 있는 엔진으로써, 파이어폭스의 Gecko, 사파리의 webkit 크롬의 blink가 그 예시이다. 이러한 렌더링 엔진들은 웹 표준에 따라서 각각의 엔진 개발자에 맞춰 만들어졌다.
2) SPA = (Single Page Application)
MPA의 단점을 개선해줄 수 있는 응용 프로그램
한개의 페이지로 구성되어 있다는 의미는, 필요한 모든 정적 리소스를 첫 request의 대한 응답으로 받아온다는 말이다.
이후 새로운 요청에 대해서는 필요한 데이터들만 전달받아 페이지를 reload 한다.
2. 웹 언어와 프레임워크
1) HTML 과 CSS
HTML은 마크업 언어이고, CSS는 스타일 언어라고 불린다. HTML은 페이지가 어떻게 구성되는지를 정하는 언어이고, CSS는 페이지가 화면에 어떻게 보이는지를 정하는 언어라고 생각하면 된다. 서버의 도움 없이 브라우저 안에서 직접 작동된다.
2) JavaScript
HTML과 CSS에서 더 나아가 또다른 프론트엔드 개발언어이다. 드롭다운 메뉴, 슬라이드 효과 그리도 대화창과 같이 다양한 효과를 웹페이지에서 구현가능하게 해주는 웹 개발언어이다. 물론 CSS3에서 추가 기능이 생기기도 했지만, 역동적인 기능을 JavaScript를 당해낼 언어가 없다는 것이 사실이긴 하다.
3) PHP
웹 개발에 필요한 언어들 중 프론트엔드 개발언어를 위에 있는 것들이 담당한다면, php는 백엔드 개발언어이다. 오래된 웹 프로그래밍 언어이면서 웹 개발에 목적을 두고 개발된 언어인 PHP 이것으로 만들어진 프로젝트 들에는 WordPress, Joomla 등이 있다. PHP 말고도 비슷한 기능을 하는 언어들에는 RUBY 그리고 python 이 있다.
4) 자바스크립트 프레임워크
* 프레임워크란?
하나의 어플리케이션을 구출할 때, 모든 어플리케이션의 공통적인 개발 환경을 제공해주는 것, 개발에 필요한 화면구현, DB연동, 개발환경들에 공통적인 부분을 제공함으로써 개발 시간과 리소스 비용을 절감해 생산성을 높여주는 것.
자바스크립트가 처음 개발됐을 때, 사람들은 웹의 동작을 역동적이게 구현해줄 수 있다는 것에 열광했다. 그러나 그 언어 만의 유연함 특징 때문에 코드가 조금씩 복잡해지기 시작했고 이것은 유지보수의 비효율성에 일조하게 되었다. 그렇게 자바스크립트의 인기가 식어가는 도중 이 문제를 해결해줄 수 있는 것으로 '프레임워크'가 나오기 시작했다.
그렇게 현재 사용되고 있는 자바스크립트 프레임워크로 vue js. / React. / Angular. /Ember. / Nust js 등이 있다.
각각의 프레임워크마다 만들어진 환경이 다르기 때문에 장단점이 존재하고, 프로젝트 마다 선호하는 것들이 각각 다르다고 알려져있다. 따라서 만들어진 웹 어플리케이션이나 관리하는데 사용하는 프레임워크가 각각 다르다는 것을 공부할 때 염두해 두면 편하다.