프론트엔드 지식 시스템 마인드맵

대부분의 분류 방법과 전문 용어는 "JavaScript Advanced 프로그래밍(4판)", "JavaScript Definitive Guide(7판)", "CSS Definitive Guide(4판)", "HTML5 Authoritative" 가이드 등 전문 서적에서 따왔습니다. ", "컴퓨터 네트워크(5판)", "데이터 구조 및 알고리즘 분석 - C 언어 설명" 등 독서를 좋아하는 친구들과 함께 토론해보세요!

마인드 매핑

중요하고 어려운 기사의 개요 및 링크

1. 자바스크립트

• 언어 핵심

  • 구문, 유형, 명령문, 키워드, 예약어, 연산자, 전역 객체

• 브라우저와 상호작용

  • DOM: 문서 ​​객체 모델

    • 이벤트

  • BOM: 브라우저 개체 모델

• JS의 가장 강력한 기능인 함수 표현식을 살펴보세요.

  • 함수형 프로그래밍

• 객체 지향 프로그래밍

  • 객체, 클래스, 상속

• 디자인 패턴

• JS 실행 메커니즘: 이벤트 루프 원리

  • 콜백을 사용한 비동기 프로그래밍

• 가비지 수집 및 메모리 관리

• 언어 표준: ECMAScript

  • JS의 개발 역사를 이해한다
  • ES6, ES7의 새로운 언어 표준에 익숙하신 분

• node.js

  • 모듈 메커니즘

  • 异步 I/O

  • 비동기 프로그래밍

    • 이벤트 기반 비차단 I/O 모델

  • 메모리 제어

  • 네트워크 프로그래밍

• 유형 시스템: Typescript

2. HTML

• HTML 요소

  • 웹페이지를 집에 비유한다면 HTML은 벽돌이고 CSS는 장식입니다.

  • 분류

    • 문서 및 메타데이터 요소, 텍스트 요소, 조직 콘텐츠 요소, 문서 섹션 요소, 표 요소, 양식 요소, 포함된 콘텐츠

• SEO 원칙 및 최적화

  • 검색 엔진에서는 어떤 종류의 HTML 문서를 더 쉽게 인식합니까?

• HTML5

  • 프로그래밍 가능한 콘텐츠

    • 캔버스

  • 기본 멀티미디어 지원

    • 비디오 오디오...

  • 의미론적

• 요소 좌표 얻기

  • Element.getBoundingClientRect()

  • 마우스 클릭 위치

    • const { screenX, screenY, clientX, clientY, offsetX, offsetY } = e

  • 요소 자체의 속성

• 페이지 수명 주기

  • DOMContentLoaded、로드、언로드 전、언로드

• 가상 목록

  • 원칙: 페이지에 동시에 표시되는 DOM 노드 수를 줄여 메모리 소비를 줄이고 페이지 성능을 향상시킵니다.

3. CSS

• 브라우저 렌더링 프로세스에서 CSS 이해

  • 리플로우 및 다시 그리기

• 특이성과 계단식

  • CSS의 경우 "계단식"이 가장 기본적인 개념입니다. 이 과정에서 충돌하는 선언을 특정 순서로 배열하여 문서의 최종 표현을 결정합니다. 이 프로세스에는 선택기 및 관련 선언의 특수성뿐만 아니라 상속 메커니즘도 포함됩니다.

• 박스 모델 및 레이아웃

  • 레이아웃 개발 이력 : float(float)부터 유연한 박스 모델(flex, 1차원에 적합), 그리드 레이아웃(grid, 2차원에 적합)까지
  • 위치 지정: 상대 위치 지정(relative), 절대 위치 지정(absolute), 고정 위치 지정(fixed), 고정 위치 지정(sticky)
  • 박스 모델: 패딩, 테두리, 윤곽선, 여백

• 시각적 서식

• 반응형 디자인

4. 프론트엔드 프레임워크

• 프레임워크 비교, 요약

  • MVC、MVP、MVVM

• 반응하다

  • 학습..

• 뷰

  • 기본 사용

    • vue2, vue3, vue-router, vuex, pinia

  • 심층적인 원칙

    • 반응 원리
    • 템플릿 컴파일 원리
    • 가상 DOM
    • 비교 알고리즘

• 모난

  • 아직 없음

• 날씬한

  • 사용자 인터페이스를 구축하는 완전히 새로운 방법입니다. React 및 Vue와 같은 기존 프레임워크는 브라우저에서 많은 작업이 필요하지만 Svelte는 애플리케이션 구축의 컴파일 단계에서 이 작업을 처리합니다.

5. 컴퓨터 네트워크

• 5층 모델

  • 애플리케이션 레이어

    • DNS 확인
    • HTTP / HTTPS

  • 전송 계층

    • TCP 연결

  • 네트워크 계층

    • IP 프로토콜
    • 라우팅 프로토콜

  • 데이터링크 계층

  • 물리층

• URL 입력부터 페이지 렌더링까지 웹은 어떻게 작동하나요? (5층 모델의 이해)

• 웹 개발 시 HTTP에 대해 알아야 할 사항

  • 강력한 캐싱 및 협상된 캐싱

  • CORS 도메인 간 리소스 공유(HTTP 헤더 기반 메커니즘)

  • HTTP 버전 간의 주요 차이점: HTTP1.0 HTTP1.1 HTTP2 HTTP3

  • 일반적인 HTTP 상태 코드

  • HTTPS 프로토콜

  • 범위 요청

    • 대용량 파일을 전송하거나 중단점에서 전송을 재개하는 데 사용됩니다.

6. 데이터 구조 및 알고리즘

• 데이터 구조

  • 테이블, 스택, 큐

  • 연결리스트

  • 이진 트리

    • 깊이 우선 탐색
    • 너비 우선 탐색

  • 해시 테이블(해시 테이블)

  • 우선순위 큐(힙)

  • 서로소 집합(결합 검색 집합)

  • 그림

• 연산

  • 정렬 알고리즘

    • 선택 정렬, 버블 정렬, 퀵 정렬, 힙 정렬, 버킷 정렬

  • 그리디 알고리즘

  • 분할 정복 알고리즘

  • 동적 프로그래밍

    • 배낭문제, 주식거래, 도둑문제

  • 역추적 알고리즘

  • 이분법

  • 복잡성 분석

7. 프론트엔드 엔지니어링

• 체계화, 표준화, 모듈화

• 프런트엔드 모듈성

• 컴파일 및 빌드 도구

  • vite, 꿀꺽, 웹팩, 터보팩
  • 뿌리에서 벗어나지 않으면서 모든 것이 변합니다: 심층적인 컴파일 원칙

• 코드 품질 및 사양

  • 코드 사양: eslint, prettier
  • git 브랜치 관리 사양 및 git 커밋 사양
  • 프로젝트 사양: 파일 구성 및 이름 지정 방법

• 시험

  • 단위 테스트
  • 엔드 투 엔드 테스트

• CI/CD

• 감시 장치

  • 성능 모니터링, 오류 모니터링, 사용자 정보 수집

• 성능 최적화

  • 회로망

  • 메모리 최적화

    • 메모리 누수 문제 해결

  • 주행 속도

8. 프런트엔드 아키텍처

• 앞부분과 뒷부분 분리

  • 다중 페이지 애플리케이션

  • 단일 페이지 애플리케이션

    • 프런트엔드 라우팅

• 마이크로 프런트엔드

  • 샌드박스 격리

9. 웹 보안

• CSRF 공격

• XSS 공격

• 동일 원산지 정책

  • 도메인 간 리소스 공유 CORS
  • 일반 요청과 실행 전 요청의 구체적인 프로세스

10. 기타 주제

• WebGL

• 캔버스

• 사용하기 쉬운 웹 API!

  • 관찰자 API: 교차점 관찰자, 돌연변이 관찰자, 크기 조정 관찰자, 성능 관찰자

• 웹소켓

선택된 프로젝트 소스 코드 250세트 제공

소스 코드 스크린샷

소스 코드 획득: 공개 계정 "Coder Park"을 팔로우하고 [소스 코드]에 답장하여 전체 소스 코드 다운로드 링크 세트를 받으세요.