프런트엔드가 뭐야?-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

프런트엔드가 뭐야?

php中世界最好的语言

Feb 26, 2018 am 09:58 AM

무엇프런트 엔드

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

설날에 사촌과 대화를 나누었는데, 예전에 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의 미래 : 웹 디자인의 진화 및 트렌드Apr 17, 2025 am 12:12 AM

HTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.

HTML vs. CSS vs. JavaScript : 비교 개요Apr 16, 2025 am 12:04 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. HTML은 컨텐츠 구조를 담당하고 CSS는 스타일을 담당하며 JavaScript는 동적 동작을 담당합니다. 1. HTML은 태그를 통해 웹 페이지 구조와 컨텐츠를 정의하여 의미를 보장합니다. 2. CSS는 선택기와 속성을 통해 웹 페이지 스타일을 제어하여 아름답고 읽기 쉽게 만듭니다. 3. JavaScript는 스크립트를 통해 웹 페이지 동작을 제어하여 동적 및 대화식 기능을 달성합니다.

HTML : 프로그래밍 언어입니까 아니면 다른 것입니까?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworksporstylingandjavaScriptOfforIncincivity, WebDevelopment 향상.

HTML : 웹 페이지 구조 구축Apr 14, 2025 am 12:14 AM

HTML은 웹 페이지 구조를 구축하는 초석입니다. 1. HTML은 컨텐츠 구조와 의미론 및 사용 등을 정의합니다. 태그. 2. SEO 효과를 향상시키기 위해 시맨틱 마커 등을 제공합니다. 3. 태그를 통한 사용자 상호 작용을 실현하려면 형식 검증에주의를 기울이십시오. 4. 자바 스크립트와 결합하여 동적 효과를 달성하기 위해 고급 요소를 사용하십시오. 5. 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함되며 검증 도구가 필요합니다. 6. 최적화 전략에는 HTTP 요청 감소, HTML 압축, 시맨틱 태그 사용 등이 포함됩니다.

텍스트에서 웹 사이트로 : HTML의 힘Apr 13, 2025 am 12:07 AM

HTML은 웹 페이지를 작성하는 데 사용되는 언어로, 태그 및 속성을 통해 웹 페이지 구조 및 컨텐츠를 정의합니다. 1) HTML과 같은 태그를 통해 문서 구조를 구성합니다. 2) 브라우저는 HTML을 구문 분석하여 DOM을 빌드하고 웹 페이지를 렌더링합니다. 3) 멀티미디어 기능을 향상시키는 HTML5의 새로운 기능. 4) 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함됩니다. 5) 최적화 제안에는 시맨틱 태그 사용 및 파일 크기 감소가 포함됩니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.