프런트엔드가 뭐야?

이번에는 프론트엔드란 무엇인지, 그리고 프론트엔드의 개념에 대해 자세히 살펴보도록 하겠습니다.

설날에 사촌과 대화를 나누었는데, 예전에 html, js, css를 사용해서 웹페이지를 작성했었다고 하더군요. 그때 제가 소개한 프론트엔드와 무엇이 다른가요? 그 때는 그 사람으로 끝나라.

하지만 당시 저는 프론트엔드에 대한 철저한 이해가 없었기 때문에 제 자신에 대한 명확한 소개가 없었다는 느낌이 들었습니다.

나만의 학습이 깊어짐에 따라 프론트 엔드와 웹 페이지 작성의 차이점에 대한 블로그 게시물을 요약할 필요가 있다고 느낍니다. 동시에, 나는 또한 나의 현재 의견과 이해를 기록하고 싶습니다. 잠시 후 되돌아 보면 나 자신의 개선에 대해 많은 통찰력을 얻게 될 것입니다.

저의 지식이 부족해서 틀린 부분이 있으면 댓글로 지적해주시면 감사하겠습니다!

웹 개발 시대

당시 사람들은 html로 웹 페이지를 작성하고 js와 css로 스타일을 조정했습니다.

우리가 다양한 고전 서적 "Head First HTML and CSS", "Mastering CSS: Advanced Web Standard Solutions" 및 "JavaScriptAdvanced 프로그래밍"에서 배운 내용은 기본적으로 이 영역에 관한 것입니다. MOOC의 대부분의 비디오는 이 측면으로 제한됩니다.

웹페이지 템플릿 시대

웹페이지가 복잡해짐에 따라 프로그래머들은 개발의 편의를 위해 다양한 웹페이지 템플릿 언어를 개발하고 있습니다.

예를 들어 언어가 적을수록 CSS 작성이 간편해지고, Coffeejs는 JS 작성이 간편해지고, html과 js가 혼합된 다양한 템플릿이 많이 있습니다.

ajax era

js의 개발과 함께 XHR의 발명으로 프로그래머는 프런트 엔드에서 데이터를 처리하고 일부 백엔드 작업을 공유할 수 있습니다.

좋은 예는 양식 유효성 검사아, 브라우저 슬라이더가 이미지 로드를 시작하기 전에 맨 아래로 미끄러지는 식입니다.

SPA era

SPA=단일 페이지 애플리케이션.

Ajax의 발전으로 사람들은 브라우저 측에서 데이터 처리를 할 수 있게 되었는데, 이는 프런트 엔드가 전체 애플리케이션, 즉 SPA를 작성할 수 있다는 것을 의미합니다.

SPA 시대에는 프로그래머가 전체 프런트 엔드 부분을 처리하기 위해 js를 사용합니다. 사용자는 웹 사이트를 열 때 모든 js를 다운로드합니다. 페이지 열기와 같은 후속 상호 작용에서는 js를 사용하여 브라우저 측에서 직접 처리합니다. 서버에 http 요청을 보냅니다.

이때 매우 중요한 개념은 routing입니다. 페이지를 열 때 http 요청이 전송되지 않기 때문에 브라우저는 URL로 무엇을 해야할지 모릅니다. 이때 브라우저가 어떤 URL에서 어떤 콘텐츠를 열도록 안내하는 메커니즘이 필요합니다.

MVC 시대

SPA 시대가 발전하면서 사람들은 개발의 편의를 위해 프로젝트를 다양한 모듈로 나누는 경우가 많습니다. 가장 대표적인 것이 MVC인데, 이는 모델(Model), 뷰(View), 컨트롤(Control)입니다.

이 시대에는 백본 프레임워크 등 다양한 프레임워크가 등장했습니다.

MVVM 시대

MVC의 제어 모듈은 일반적으로 서버에서 처리되므로 이는 프런트엔드 콘텐츠가 아닙니다. 이 문제를 해결하기 위해 사람들은 제어 대신 뷰 모델을 사용하는 솔루션을 제안했습니다. 이것이 MVVM 프레임워크의 기원입니다. 구현된 기술을 양방향 바인딩이라고 합니다.

이 시대에는 최신 프런트엔드 프레임워크(reactjs, angularjs 등)가 등장했습니다. 현재 프런트 엔드 엔지니어는 모바일 브라우저에서 실행되는 것을 포함하여 브라우저에서 실행되고 애플리케이션 소프트웨어와 동일한 소프트웨어를 이미 개발할 수 있습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 자료:

폭포 흐름 레이아웃을 구현하는 두 가지 방법

브라우저 렌더링 프로세스에 대한 자세한 설명

오버플로 스크롤의 중요성은 무엇인가요

모바일용 레이아웃 솔루션은 무엇인가요? HTML

터미널

위 내용은 프런트엔드가 뭐야?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!