웹 프론트엔드 아키텍처란?

웹 프런트 엔드 아키텍처는 프런트 엔드 코드의 품질을 향상하고 효율적이고 지속 가능한 워크플로를 달성하도록 설계된 도구 및 프로세스 모음입니다. 웹 프런트엔드 아키텍처에는 4가지 핵심이 있습니다: 1. 코드(HTML, CSS, JavaScript) 2. 프로세스, 효율적이고 오류 없는 워크플로를 구축하기 위한 도구 및 프로세스를 사용하는 방법은 중요한 고려 사항입니다. 적용 범위 만들기 광범위한 테스트 프로그램을 통해 이전 코드가 계속 정상적으로 실행될 수 있는지 확인할 수 있습니다. 4. 문서화, 디자인 문서화는 다른 사람과 소통하기 위한 도구입니다.

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

오늘날 웹 프런트엔드 기술의 급격한 변화로 인해 웹 프런트엔드 프로젝트는 점점 더 복잡해지고 있습니다. 프런트엔드 아키텍처 역시 끊임없이 변화하는 반복적 요구와 아키텍처 기술에 맞춰 진화할 것입니다. 이는 아키텍트뿐만 아니라 개발자 각자가 주목해야 할 문제입니다.

1. 웹 프런트엔드 아키텍처의 기원

2014년 10월 13일 CSS 개발자 컨퍼런스에서 뉴올리언스 컨벤션 센터의 혼잡한 방에서 "프론트엔드 아키텍처의 깃발을 올리다"는 주제가 되었습니다. 최전선에서의 투쟁 이것은 모든 개발자의 공통된 매력입니다. 그 후, 자신이 누구인지, 회사에서 어떤 역할을 하는지 알아보려고 노력하는 개발자들은 자신이 프런트엔드 설계자의 역할을 맡아왔지만 직함을 맡은 적이 없거나 그렇게 할 자신감이 부족하다는 사실을 발견했습니다. 이 위치에서 오는 힘.

컨퍼런스가 끝난 후 몇 주 후에 많은 사람들이 트위터에서 자신의 프로필을 "프론트 엔드 아키텍트"로 변경했습니다.

2. 웹 프론트엔드 아키텍처를 무엇으로 이해하시나요?

프론트엔드 아키텍처는 건축 설계와 같습니다. 건설 과정에서 건축 디자이너는 계획을 설계하고 계획하며 건설 프로세스를 추적해야 합니다. 이는 건물이 아닌 웹 사이트를 구축한다는 점을 제외하면 프런트 엔드 아키텍트의 작업과 유사합니다. 건축가는 콘크리트를 붓는 것보다 프로젝트 구성을 설계하는 데 더 많은 노력을 기울입니다. 마찬가지로 프런트 엔드 설계자는 특정 코드를 작성하는 것보다 도구 개발 및 프로세스 최적화에 더 중점을 둡니다.

프런트엔드 아키텍처는 프런트엔드 코드의 품질을 향상하고 효율적이고 지속 가능한 워크플로를 달성하도록 설계된 도구 및 프로세스 모음입니다.不 프론트 엔드 디자인 아키텍처는 처음부터 완벽한 디자인이 아니며 계획이 수립될 수 없습니다.

프런트엔드 아키텍처의 특수성

프런트엔드는 독립적인 하위 시스템이 아니라 전체 시스템에 걸쳐 있습니다.

분산: 프론트엔드 엔지니어링

추상화, 디커플링 및 페이지 조합

제어 가능 : 스캐폴딩, 개발 사양 등

효율성: 프레임워크, 구성 요소 라이브러리, 모의 플랫폼, 빌드 및 배포 도구 등

Abstraction

페이지 UI 추상화: 구성 요소

일반 논리 추상화: 도메인 엔터티, 네트워크 요청 , 예외 처리 등

셋, 웹 프론트 엔드 아키텍처의 원칙

1. 시스템 설계

건물이 명확한 구조 설계가 없고 모든 중요한 사항이 직접 결정된다고 상상해 보세요. 한 벽은 돌, 두 번째 벽은 벽돌, 세 번째 벽은 나무, 네 번째 벽은 패션을 위해 비워 두는 등의 시나리오가 발생할 수 있습니다.

웹사이트의 전체적인 모습과 스타일 톤은 경험이 풍부한 비주얼 디자이너에 의해 완전히 결정되지만 프런트엔드 설계자는 프런트엔드 개발 방법과 그 이면에 있는 시스템 디자인 철학을 제어합니다. 모든 프런트엔드 개발자가 따르는 시스템 사양을 설계함으로써 프런트엔드 설계자는 제품과 코드의 최종 형태에 대한 명확한 그림을 만듭니다.

프론트 엔드 아키텍트가 시스템 설계 사양을 설정하면 프로젝트는 코드 품질을 측정하는 표준을 갖게 됩니다. 그렇지 않으면 코드가 표준을 충족하는지 어떻게 판단할 수 있습니까? 잘 설계된 시스템은 완전한 검사 메커니즘을 갖추고 시스템의 코드가 단순히 쌓이지 않고 실질적인 가치를 갖도록 적절한 절충안을 마련해야 합니다.

2. 작업 계획

명확한 구조 설계를 마친 후 개발 워크플로를 공식화해야 합니다. 개발자가 코드 한 줄을 작성하여 온라인으로 제출하려면 어떤 단계를 거쳐야 합니까? 가장 간단한 예를 들자면 이 프로세스에는 FTP를 사용하여 서버에 로그인하고 파일을 수정하고 저장하는 과정이 포함됩니다. 그러나 대부분의 프로젝트에서 전체 작업 흐름은 버전 컨트롤러, 작업 스케줄러, CSS 프로세서, 문서 도구, 테스트 구성 요소 및 서버 자동화 도구와 같은 여러 도구를 사용할 수 있습니다.

프론트 엔드 아키텍트의 목표는 원활하게 실행되는 시스템을 설계하는 것입니다. 이 시스템은 효율적이고 빠르게 시작할 수 있을 뿐만 아니라 언어 분석, 테스트 케이스, 문서화 및 기타 방법을 통해 지속적으로 효과적인 피드백을 제공하고 반복 작업으로 인한 인적 오류를 크게 줄일 수 있습니다.

3. 감독 및 후속 조치

프론트 엔드 아키텍처 디자인은 결코 일회성 작업이 아닙니다. 처음부터 완벽한 디자인은 없고, 한 단계에서 완벽한 계획도 없습니다. 고객과 개발자의 요구사항은 시간이 지남에 따라 변합니다. 한 단계에서 잘 작동하는 개발 프로세스는 나중에 효율성을 높이고 오류를 줄이기 위해 재구성되어야 할 수도 있습니다.

프론트엔드 아키텍트의 매우 중요한 능력은 워크플로를 지속적으로 최적화하는 능력입니다. 오늘날의 다양한 빌드 도구를 사용하면 작업 방식을 쉽게 변경하고 모든 개발자에게 알릴 수 있습니다.

어떤 사람들은 프런트엔드 아키텍트가 관리 역할과 동일하고 더 이상 비즈니스 코드를 작성할 필요가 없는지 묻습니다. 프론트 엔드 아키텍트는 더 많은 코드를 작성해야 할 뿐만 아니라 여러 프로그래밍 언어를 사용할 수 있어야 하고 많은 도구를 사용할 수 있어야 합니다. 코드의 양은 줄어들지 않았고, 코드를 읽는 사람만 바뀌었습니다. 프런트엔드 개발자는 최종 사용자를 위해 코드를 작성하고, 프런트엔드 설계자는 팀 개발자를 위해 코드를 작성합니다.

4. 웹 프론트엔드 아키텍처의 핵심

1. 코드

최종적으로 분석해 보면, 모든 웹사이트는 HTML, CSS, 자바스크립트. 웹 사이트를 만드는 데 들어가는 코드의 양에 직면하면 코드와 리소스에 대한 기대치를 설정하는 것이 얼마나 중요한지 분명해집니다.

2. 프로세스

도구와 프로세스를 사용하여 효율적이고 오류 없는 워크플로를 구축하는 방법은 중요한 고려 사항입니다. 워크플로는 점점 더 복잡해지고 있으며 이를 구축하는 데 사용되는 도구도 마찬가지입니다. 이러한 도구는 생산성을 높이고 효율성을 높이며 코드 일관성을 유지하는 데 놀라운 결과를 가져오지만 과도한 엔지니어링 및 추상화의 위험도 따릅니다.

3. 테스트

확장 가능하고 지속적으로 최적화된 시스템을 구축하려면 새 코드가 이전 코드와 잘 호환되는지 확인해야 합니다. 코드는 모두 대규모 시스템의 일부입니다. 이전 코드가 여전히 정상적으로 실행될 수 있는지 확인하기 위해 광범위한 적용 범위를 갖춘 테스트 계획입니다.

4. 문서화

디자인 문서화는 다른 사람과 소통하고, 디자인 결정이 무엇인지, 디자인 결정이 무엇인지, 그리고 결정이 좋은 이유를 설명하기 위한 도구입니다. 팀의 핵심 구성원이 떠나지 않는 한 문서화의 중요성을 깨닫는 사람은 거의 없습니다.

이 4개의 코어는 확장 가능하고 지속 가능하게 최적화된 시스템을 구축하기 위한 기반입니다.

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

위 내용은 웹 프론트엔드 아키텍처란?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!