웹 프런트엔드와 프런트엔드의 차이점은 무엇인가요?

프런트엔드는 더 넓은 범위를 가진 일반적인 용어입니다. 웹 개발의 프런트엔드에 속하며, 프런트엔드 개발 방향은 모바일 프런트엔드 개발을 포함하는 것이 더 명확합니다. 웹 프론트엔드 개발에는 PC 측 개발과 모바일 개발이 포함되며, 웹 프론트엔드 개발은 주로 전통적인 PC 측 웹 개발을 의미합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터.

프론트엔드는 더 넓은 범위를 가진 일반적인 용어입니다. 웹 개발의 프론트엔드에 속하며, 범위가 명확하고 방향이 더 명확합니다. 제품 디자인/UI를 기반으로 사용자 측 애플리케이션 코딩을 구현하는 프런트엔드 작업은 프런트엔드 개발 범주에 속합니다(웹, 앱, 소규모 프로그램, 데스크톱 등 다양한 애플리케이션 형태 포함). 사용자 지향 인터페이스, 일반적으로 프런트 엔드에는 웹 프런트 엔드가 포함됩니다.

쉽게 말하면 프론트엔드 개발에는 모바일 프론트엔드 개발과 웹 프론트엔드 개발이 포함되는데, 여기에는 PC사이드 개발과 모바일사이드 분야의 개발이 주로 전통적인 PC사이드 웹을 의미합니다. 그 중 가장 큰 차이점은 페이지 개발입니다.

모바일 프론트엔드 개발과 웹 프론트엔드 개발은 모두 프론트엔드 개발에 속하며 다음과 같은 차이점이 있습니다.

1. 비즈니스 애플리케이션 시나리오

웹 프론트 엔드 개발은 주로 전통적인 PC 측 웹 페이지 개발을 의미하며, 페이지는 주로 PC 측 브라우저에서 실행되고, 모바일 프론트 엔드에서 개발된 페이지는 주로 모바일에서 실행됩니다. 전화기.

직관적으로는 PC페이지가 더 크고, 모바일 페이지가 더 작다는 느낌을 받으시겠지만, 개발 경험에 따르면 페이지가 크다고 해서 작성된 코드가 복잡하다는 의미는 아니며, 페이지가 작다고 해서 개발이 어렵다는 의미는 아닙니다. 간단합니다. 난이도와 용이성은 주로 특정 비즈니스 요구 사항에 따라 다릅니다.

2. 신기술의 활용

모바일 단말기는 주로 웹킷 커널을 기반으로 하기 때문에 HTML5와 같은 신기술을 더 잘 지원하므로 신기술을 더 폭넓게 사용할 수 있지만, PC 개발에는 많은 시나리오가 필요합니다. . IE 등 이전 버전의 브라우저와 호환됩니다. 브라우저 호환성 문제로 인해 일부 경우에는 새로운 기술의 사용이 제한됩니다.

3. 페이지 적응성

기존의 PC 측 페이지 개발에서는 일반적으로 페이지의 너비를 고정하고 양쪽에 공백을 두는 방식을 선택합니다. 그러나 모바일 측 페이지는 일반적으로 휴대폰 화면 때문에 PC보다 화면 크기가 더 작습니다. PC에 비해 훨씬 작습니다. 휴대폰 화면에 최대한 많은 콘텐츠를 표시하려면 모바일 페이지가 다양한 화면 크기의 휴대폰에 완벽하게 적응하고 최대한 활용할 수 있어야 합니다.

이러한 관점에서 모바일 페이지의 적응이 더 어렵습니다.

4. 페이지 성능

PC측의 네트워크 상황은 일반적으로 비교적 안정적이며, 네트워크 케이블이나 Wi-Fi를 통해 네트워크가 연결되어 있지만, 모바일측에서는 Wi-Fi 외에도 더 복잡한 경우가 있습니다. 또한 2G, 3G, 4G 및 여러 다른 네트워크 연결을 번갈아 사용하는 경우도 자주 발생합니다.

불안정한 네트워크 연결로 인해 페이지 성능이 저하되는 문제는 모바일 측의 페이지 리소스가 너무 클 수 없다는 것입니다. 그렇지 않으면 열악한 네트워크 조건에서 페이지에 액세스할 수 없어 사용자 경험에 심각한 영향을 미칠 수 있습니다.

5. 프레임 선택

모바일 페이지 프레임워크를 선택할 때 일반적으로 작고 아름다운 프레임만 고려합니다. 예를 들어 zepto.js와 같은 프레임워크는 압축 후 9.6K만 만날 수 있습니다. 보다 복잡한 단일 페이지 애플리케이션을 구축하려는 경우 vue.js와 같은 프레임워크를 선택할 수 있습니다. 이는 강력하지만 압축 크기가 20K를 넘습니다.

웹 측의 선택 범위는 비교적 크며 프로젝트 요구 사항에 따라 일부 더 무거운 프레임워크도 고려할 수 있습니다. 예를 들어, 오래되었지만 거대한 ext.js는 일부 기업의 백엔드 관리 시스템 프로젝트에서 여전히 활동하고 있습니다. 많은 UI 구성 요소가 있습니다.

추가 정보

웹 프론트엔드 개발에 필요한 기술:

1. 프론트엔드 개발 기술(HTML5, JS, JSON, XHTML, CSS3)에 능숙하고 각 기술의 관련 표준을 이해합니다.

2. Ajax 비동기 프로그래밍을 마스터하고 재사용 가능한 고성능 프런트 엔드 구성 요소를 작성할 수 있습니다.

3. 프로그래밍 아이디어와 OO, MVC, MVVM 등의 프런트엔드 프레임워크에 대한 깊은 이해가 있으며, 프런트엔드 프레임워크(공통 프런트엔드 프레임워크인 Vuejs, AngularJS, React, Bootstrap, QUICK UI, 모바일 단말기에는 Frozen UI, weUI, SUI, MUI, AUI가 포함됩니다. 해당 원칙을 이해합니다(프레임워크가 많으므로 2~3개의 주류 프레임워크를 선택하고 이에 능숙하며 깊이 이해해야 합니다).

4. 웹 성능 최적화, 접근성, SEO 경험 등을 잘 이해합니다. 프리젠테이션 레이어와 데이터 레이어의 분리 개념과 웹 의미론을 이해합니다(이것들은 일자리를 찾을 때에도 매우 유용한 보너스 포인트입니다).

5. 프런트엔드 보안 메커니즘을 이해하고 HTTP 프로토콜과 브라우저 캐싱 전략을 숙지하세요.

6. 일반적인 JS 개발 프레임워크(예: 프로토타입, jQuery, Mootools, Ext, Dojo, 밑줄, YUI, Kissy)의 소스 코드 구현에 대해 잘 알고 있어야 합니다. 사람들이 거의 사용하지 않는 일부 프레임워크를 선택하십시오.) 큰 프로젝트는 팀에 의해 수행되며 스스로 수행할 수 없다는 점을 이해해야 합니다.

7. 코드 작성 및 디자인 문서 작성에 대한 경험이 풍부하고 Git 및 기타 버전 제어 도구를 능숙하게 사용할 수 있습니다.

8. 일반적인 브라우저 호환성 문제를 명확하게 이해하고 IE6/7/8/9, Firefox, Safari 및 Chrome과 같은 안정적인 솔루션을 보유하세요.

9. 높은 심미성을 가지세요(이것이 매우 중요합니다. 더 많은 템플릿과 고급 프로젝트를 보면 큰 격차를 느낄 수 있습니다).

(동영상 공유 학습: 웹 프론트엔드 시작하기)

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