Xiaolu는 지난 며칠 동안의 단편화 된 시간을 사용하여 모든 "여자 친구"참석자를 위해 대부분의 개발자에게 적합한 프런트 엔드자가 학습 개발 경로를 구성했습니다.
비 학문 수업이든 학교 대학생이든 다른 분야의 개발자이든이 개발 경로가 프론트 엔드 개발 지식 시스템을 구축하는 데 더 도움이되기를 바랍니다.
이 기사에서는 프런트 엔드의 각 학습 단계에서 어떤 콘텐츠를 배워야하는지, 각 단계에서 마스터해야하는 최소 요구 사항은 무엇이며, 전체 지식 시스템이 주기적으로 그리고 점진적으로 학습하고 계층 구조를 어떻게 습득하는지 알아보기 위해 제로부터의 프런트 엔드자가 학습 경험을 사용합니다. 빅맨들과 공유 ~
진입 단계
입문 단계의 주요 내용은 HTML과 CSS입니다.
초보자의 경우 처음 프런트 엔드와 접촉 할 때 먼저 프런트 엔드에 대해 얕게 이해하고 프런트 엔드의 용도를 알아야합니다. 물론 그것은 웹 페이지입니다. 가장 좋은 방법은 HTML과 CSS를 통해 첫 페이지를 구축하고 프론트 엔드 학습에 대한 자신감과 관심을 높이는 것입니다.
HTML 학습은 다음과 같습니다.
시중에는 VSCode, Hbuilder, SublimeText3, Atom 등과 같은 많은 HTML 편집기가 있습니다. 어쨌든 많은 HTML 편집기가 있으므로 원하는 것을 선택할 수 있습니다.
그런 다음 HTML의 가장 기본적인 요소, 속성, 헤더, 표, 목록, 링크, 이미지, 양식, 단락, 제목 등을 배웁니다. 활기찬 학생들은 시맨틱 태그와 같은 HTML5의 기본 지식을 배울 수 있습니다.
위의 기본 내용을 전반적으로 이해 한 후, 상자 모델, 선택기, 부동, 위치 지정, 글꼴, 텍스트, 기본 속성 및 다양한 레이아웃뿐만 아니라 CSS 구문부터 시작하여 CSS를 배우기 시작했습니다.
추천 웹 사이트 : Cainiao Tutorial, Geek Academy, MOOC 등
위의 내용은 매우 기본적인 내용과 관련이 있으며, 주요 목적은 프런트 엔드 학습에 대한 열정과 자신감을 쌓고 프런트 엔드 웹 페이지에 대한 일반적인 지식과 이해를 갖는 것입니다.
유능한 학생들은 마인드 맵의 CSS 부분의 내용을 배울 수 있습니다. 이 부분은 내가 크고 작은 인터뷰에서 요약 한 가장 빈번한 지식 포인트입니다.
HTML 및 CSS가 웹 사이트 제공과 같이 자격이 있다고 간주되는 수준을 학습하려면 정확히 동일한 레이아웃과 조판을 빠르게 모방 할 수 있습니다.
Xiaolu는 모두를 위해 10 개의 실제 전투 프로젝트를 준비하고 Xiaolu의 공식 계정을 배경으로 "실제 전투 1"~ "실제 전투 10" 이라고 답했습니다 .
이 10 개의 실제 전투 프로젝트가 완전히 완료 될 수 있다면 Xiaobai에서 프런트 엔드 항목까지 축하합니다.
추천 도서 : "CSS World", "CSS Revealed", "Head First HTML and CSS (2nd Edition)" "CSS Authoritative Guide (3rd Edition)"
고급 단계
고급 단계에서는 JS 공격을 시작하십시오 .JS를 처음 접하는 초보자에게는 HTML과 CSS를 배우는 것보다 실제로 어렵지만 열심히 일할 의향이있는 한이 부분은 큰 문제가 아닙니다.
JS 콘텐츠에는 많은 지식 포인트가 포함되어 있습니다. 인터넷에서 많은 사람들이 "JavaScript Advanced Programming"을 처음부터 끝까지 보유 할 것을 제안하는 것을 보았습니다. Xiaolu는이를 권장하지 않습니다. 결국 JS를 처음 접하는 사람은 누구나 읽을 수 있습니다. 나는 할 수없고 그렇게하지 않았다.
이 부분의 학습 기술은 단일 시청의 빈도를 높이고 내용을 줄이는 것입니다. 즉, 처음으로 JS를 배우고, 그것을보고, 그것을보고, 배우기 위해 비디오와 웹 사이트로 가십시오. 책을 직접 읽는 것은 권장되지 않습니다. 읽을 수 없으면 학습에 대한 자신감이 손상되기 때문입니다.
그런 다음 웹 사이트의 작은 예제를 통해 손으로 코드를 타이핑하기 시작했습니다. 우리는 연습하고, 연습하고, 연습해야합니다. 이번에는 JS 구문에 더 익숙해집니다. 지식 포인트를 앞뒤로 쳐다 보지 말고 좋은 눈과 낮은 손을 갖는 것은 좋은 습관이 아닙니다. 나는 여기서 고통을 겪었습니다.
1,
JavaScript 및 ES6
이 과정에서 JS 지식 포인트가 많고이 디자인이 디자인 된 이유와 이러한 디자인의 이점을 더 잘 이해할 수 없다는 것을 알게 될 것입니다. 이로 인해이 단일 지식 포인트의 내용을 모두 배우고 어디서 배울 수 있습니까? 첫째, 책은 당신이 읽는 것을 좋아하지 않는다는 것을 알고 있기 때문에 당신을 위해 준비해야합니다.
JS의 모든 중요한 기본 지식을 정리하여 소책자에 썼는데, Xiaolu 공식 계정의 백 스테이지에있는 "프론트 엔드"에 회신하면 무료로 얻을 수 있습니다. 앞으로도 여러 공장에서 자주 인터뷰하게 될 지식 포인트이기도하고, 제가 많은 인터뷰에 참여한 요약이기도합니다.
사실 JS를 배우는 것만으로는 충분하지 않습니다. 정말로 JS를 배우고 싶다면 여전히 Ruby "JavaScript Advanced Programming"을 피할 수 없습니다. 읽을 때마다 다른 이득이있을 것이라고 믿습니다.
추천 도서 : "JavaScript Advanced Programming", "JavaScript 당신이 모르는", "JavaScript DOM Programming Art (2nd Edition)", "High Performance JavaScript"
ES6 작업을 시작하겠습니다. ES6는 Ruan Yifeng 선생님이 작성한 튜토리얼을 매우 자세하게 권장합니다. ES6의 몇 가지 일반적인 인터뷰 지식 포인트를 위해 모든 사람을 위해 편집했으며 모두 내가 쓴 "프론트 엔드 인터뷰 책자"에 있습니다.
추천 도서 : "ES6 표준 소개 (3 판)" "ES6에 대한 심층 이해"
2 、
데이터 구조 및 알고리즘
많은 사람들이 프론트 엔드가 알고리즘을 배울 필요가없고 배우는 것이 쓸모 없다고 말하는 것을 들었습니다. 당신은 듣지 말아야합니다. 인터뷰에서 고통을 받게 될 것입니다. 알고리즘은 때때로 좋은 회사에 들어갈 수 있는지 여부를 결정합니다.
데이터 구조와 알고리즘을 배우는 것은 정말 고통 스럽지만, 이것은 미래의 인터뷰를위한 걸림돌이기도합니다.이 고통을 경험할 수있는 사람은 누구든지 다른 사람들이 즐길 수없는 치료를 즐길 수 있습니다.
데이터 구조를 배우는 방법에 대해서는 다음 기사에서 저의 학습 방법을 공유합니다.
데이터 구조와 알고리즘을 어떻게 배우나요?
알고리즘 문제 해결을 위해 샤오 루는 분류 된 문제로, 우선 "검지 제안"의 고전적인 문제 유형은 이제 모든 것이 고전적인 문제 유형 인 것처럼 명확하고 분명하게 수행되어야합니다.
그런 다음 leetcode에 대한 질문을 분류하고 브러싱합니다. 예를 들어 이진 트리의 내용을 먼저 브러싱 한 다음 질문을 브러싱하여 이러한 질문 유형의 루틴과 방법을 요약합니다. 그리고 문제에 대한 여러 솔루션과 각 솔루션의 시간 및 공간 복잡성이 있습니다. 모두 많은 질문을 통해 훈련됩니다. 특히 좋은 기술은 없습니다. 브러시! 브러시! 그 당시 저는 약 200 개 정도를 브러시로 썼는데, 이는 많은 알고리즘 전문가들에게는 그리 많지 않지만 다행히도 인터뷰에서 많은 독창적 인 질문을 접하게 될 것입니다.
삼,
네트워크 원리
네트워크 원칙은 인터뷰에서 자주 묻는 것이 아니라 성능 최적화, 프록시, 캐싱, 암호화 알고리즘 등과 같은 일상적인 개발에도 사용됩니다.
콘텐츠의이 부분을 체계적으로 습득하고 싶다면 정말 쉽지 않습니다. 위의 지식 포인트는
충분하지 않습니다. 아직 갈 길이 멀습니다. 인터뷰에서 위 내용을 습득하는
것은 큰 문제 가 아닙니다. 물론 더 많이 습득할수록 더 좋습니다.
4 、
브라우저
프론트 엔드로서 브라우저를 자주 다룰 것입니다. 모르는 척해도 매일 찾아 오므로 브라우저의 구현 원리를 이해하는 것이 좋습니다.
브라우저라고하면 Google V8 엔진의 구현 원리를 공부해 보겠습니다. 큰 이득이있을 거라고 생각합니다. 마인드 맵과 학습 경로의이 부분은 분류되고 있습니다. 분류 후 공개 계정에서 순차적으로 공유됩니다. 나 오세요.
브라우저에도 구덩이가 많아서 잠시 멈출 수있을 정도인데, 최근에는 브라우저를 다루면서 브라우저의 위력을 깊이 체험했습니다.
5、
프런트 엔드 프레임 워크
프런트 엔드 프레임 워크가 너무 많습니다. 정말 배울 수 없습니다. 당황하지 마세요. 실제로 세 개의 프런트 엔드 캐리지 인 Angular, React 및 Vue의 경우 프레임 워크 중 하나를 이해하고 기본 원칙을 구현하는 한 다른 두 가지를 잘 배우지 못할 것입니다. 힘든 일입니다. 또한 미래에 어떤 프레임 워크를 사용 하느냐에 따라 다릅니다. 물론 더 많이할수록 더 좋지만 모든 사람의 시간이 제한되는 경우가 많습니다. 독학 학생이나 취업 면접을 앞둔 학생 , 물론 우리는 깊이 파고들 수있는 틀을 선택해야합니다.
Vue를 예로 들어 다음과 같은 지식 시스템을 구성했습니다.
동영상을 보든 공식 문서를 보든 프레임 워크의 사용과 관련하여 가장 중요한 것은 위 Vue의 구현 원칙입니다. 시스템을 체계적으로 이해하고 탐색해야 전체 프레임 워크의 구현에 대해 더 깊이 이해하고 이해할 수 있습니다. .
6 ,
웹팩
패키징 도구의 경우 주로 Webpack의 지식 시스템을 구성했습니다.
우리의 궁극적 인 목표는 프로젝트 패키지의 크기를 최소화하고 가장 빠른 시공 속도를 달성하는 것입니다. 패키징 도구의 경우 강조 할 내용이 많지 않으며 기본 내용도 모두를 위해 분류되었으며 기사 끝에서 얻을 수 있습니다.
고급 고급
작업을 마치고 나면 대부분의 문제가 코드 아키텍처와 유지 관리 및 확장 성 문제라는 것을 알게되고 디자인 패턴의 중요성을 알게됩니다.
내가 고급 고급이라고 생각하는 이유는 디자인 패턴을 실제로 유연하게 사용할 수 있고 실제로 많은 프로젝트 연습과 사고 요약이 필요하기 때문입니다.
둘째, 컴파일 원칙과 같은 좀 더 낮은 수준의 것들이 있습니다. 나는 너무 많은 접촉이 없기 때문에 여기서는 더 이상 말도 안되는 말을하지 않을 것입니다. 나중에 그것에 관해서는 여러분과 공유 할 것입니다.
마침내
네, 이것이 입문부터 포기까지의 프론트 엔드 학습 시스템입니다. 아직 분류되지 않은 것들이 많이 있습니다. 샤오 루는 학습하면서 분류라고 생각할 수 있으며, 앞으로 점차 개선 될 것입니다. 당분간 배우기에 충분하다고 생각합니다. 하하하 .
위의 지식 시스템에서 많은 지식 포인트가 역사적 기사에서 업데이트되었으며 메뉴 모음을 통해 볼 수 있습니다.
기사에서 디자인 한 마인드 맵과 "프론트 엔드 브로셔"는 모두 샤오 루의 공개 계정 "Fawn Animation Programming"의 뒷부분에있는 "PDF"와 "Mind Map"에 회신하여 기사에 포함 된 사진과 책자를 얻을 수 있습니다.
다음에 만나요!