github의 가장 포괄적인 리소스 튜토리얼 - 프론트엔드와 관련된 모든 지식 시스템
- WBOY원래의
- 2016-09-20 03:30:002836검색
프런트엔드는 의심할 여지 없이 2016년 가장 인기 있는 기술입니다.
Angular js, Vue, React 등 다양한 프론트엔드 MVC 프레임워크가 끝없이 등장하며, 프론트엔드 컴포넌트 개발의 개념은 사람들의 마음속에 깊이 뿌리내렸습니다. 프론트엔드 급여는 이미 모바일 개발보다 높습니다.
개인 웹마스터로서 프론트엔드 디자인을 배우는 것도 필요합니다. 먼저, 몇 가지 작은 디자인 문제를 스스로 해결할 수 있으며 동시에 자신의 미적 감각을 향상시키고 UI 디자인 수준을 향상시킬 수 있습니다. 웹사이트.
필수 기본 스킬
프론트엔드 기술 요약 이 프로젝트는
프론트엔드 엔지니어와 관련된 지식의 모든 측면을 자세히 기록합니다. 기본적인 실력을 갖춘 후에는 학습 방향을 찾고
실력과 지식을 향상시킬 수 있습니다.
frontend-dev-bookmarks는 외국인들이 정리한 프론트엔드 개발 리소스입니다. 적용 범위가 매우 넓습니다. 여기에는 다양한 지식 포인트, 도구 및 기술이 포함되어 있으며 매우 포괄적입니다.
개인적으로 입문 단계에서 마스터해야 한다고 생각하는 기본 기술은 다음과 같습니다.
- HTML4, HTML5 구문, 태그, 의미
- CSS2.1, CSS3 사양을 HTML과 결합하여 다양한 레이아웃과 효과 구현
- Ecma-262가 정의한 자바스크립트의 언어 핵심, 네이티브 클라이언트 자바스크립트, DOM 연산, HTML5의 새로운 기능
- 성숙한 클라이언트 측 자바스크립트 라이브러리인 jquery를 권장합니다
- 서버측 언어: 서버측 개발 경험이 있는 경우 이미 알고 있는 언어를 사용할 수 있습니다. 서버측 개발 경험이 없는 경우 Java에 익숙하다면 서블릿을 선택하면 됩니다. 익숙하지 않은 경우 간단한 로그인 및 등록 기능을 구현할 수 있는 PHP를 선택하면 됩니다. 프론트 엔드 개발을 지원하기에 충분합니다. 가장 기본적인 요구 사항은 간단한 기능 시뮬레이션을 구현하는 것입니다. ,
- HTTP
위의 기본 기술을 익히면 업무에 필요한 기술을 빠르게 익힐 수 있습니다.
기본 개발 도구
적절한 도구는 학습 효율성을 효과적으로 높이고, 지식 자체에 집중하며,
문제 발생 시 문제를 빠르게 찾아 해결할 수 있습니다. 개인적으로 필요하다고 생각하는 프론트엔드 개발 도구는 다음과 같습니다.
- 텍스트 편집기: Sublime Text를 권장하며 다양한 플러그인과 테마, 설정을 지원하며 사용하기 쉽습니다
- 브라우저: Google Chrome을 권장합니다. 빠르게 업데이트되며 다양한 프런트엔드 표준을 매우 훌륭하게 지원합니다
- 디버깅 도구: Chrome에 기본 제공되는 Chrome 개발 도구를 사용하는 것이 좋습니다. DOM 구조 및 스타일을 쉽게 확인하고, 콘솔을 통해 디버깅 정보를 출력하고, 자바스크립트를 디버그하고, 네트워크를 확인하고, 등등
- 보조 도구: 사진 편집, 색상 선택, Fireworks로 크기 측정, AlloyDesigner로 크기 비교를 위한 PhotoShop 및 앞서 언급한 Chrome 개발 도구
- FQ 도구: 랜턴, 도마뱀붙이 산책
학습 방법 및 학습 목표
방법:
- 입문 단계에서 반복해서 읽고중국어 고전 고전, 책에 있는 모든 예를 구현하고 브라우저에서 효과 확인
- 어떤 기초를 다진 후에는 온라인에서 다양한 튜토리얼과 데모를 검색하여 다양한 기능의 실제 사용법과 공통 기능 구현 방법을 알아볼 수 있습니다
- HTML, CSS 및 Javascript 표준에 대한 포괄적이고 완벽한 지식을 읽어보세요
- 프론트엔드 전문가의 블로그와 기사를 읽어 지식에 대한 이해도를 높이세요
- 검색엔진을 잘 활용하세요
대상:
- 이전 지식포인트에서 중요한 개념을 암기하고 학습 경험을 바탕으로 스스로 이해해 보세요
- 일반적인 CSS 레이아웃, 탭 컨트롤 등 일반적인 기능의 구현 방법을 숙지하세요.
시작하기
다음은 입문단계에 좋은 책과 자료입니다
- HTML의 경우 먼저 'HTML 및 CSS: 웹사이트 디자인 및 구축'의 1~9장을 읽은 다음 'HTML5: 누락된 매뉴얼'의 1~4장을 읽어보세요.
- CSS는 "CSS: The Missing Manual"을 먼저 읽은 다음 "CSS Definitive Guide"를 읽습니다.
- Javascript의 경우 "Javascript 고급 프로그래밍"을 먼저 읽은 다음 "Javascript 최종 가이드"를 읽어보세요
- HTTPHTTP에 대한 최종 가이드 보기
- 전체 학습 과정에서 HTML, CSS, JavaScript는 여러 곳에서 서로 결합되어야 합니다. 이는 실제 작업에서도 마찬가지입니다.
- 실습은 학습의 중요한 부분입니다. 책은 지식 포인트를 설명하는 데 중점을 두고 있으며, 예제가 충분하지 않을 수 있으므로 검색 엔진을 사용하여 간단한 튜토리얼을 찾고 튜토리얼을 따라 기능을 구현해야 합니다. 더 나은 튜토리얼 URL은 다음과 같습니다.
- 메이저 기업의 프론트엔드 캠퍼스 채용 필기시험 면접 질문을 연습문제로 검색하거나, 남들이 요약한 프론트엔드 면접 질문과 개인적으로 요약한 면접 질문(참고 답변 포함)을 검색할 수 있습니다
- http://code.tutsplus.com에는 다양한 튜토리얼이 있습니다
- MDN에는 많은 튜토리얼이 있으며, 더 중요한 것은 특정 기능을 찾으려면 Google에서 검색하세요.
xxx site:https://developer.mozilla.org - http://www.html5rocks.com/zh/에도 고품질 튜토리얼이 많이 있습니다
- http://www.sitepoint.com/
- http://alistapart.com/
- 네이티브 자바스크립트는 마스터해야 하는 기술입니다. 네이티브 자바스크립트를 마스터한 것을 바탕으로 실제 업무에 매우 유용한 jQuery에 능숙해지는 것이 좋습니다. jQuery 공식 홈페이지
- https://github.com/에 계정을 만들어 평소 공부하는 다양한 코드와 프로젝트를 저장해보세요.
- 어떤 기초를 다진 후에는 개인 블로그를 설정하여 학습 과정에서 직면하는 문제와 해결 방법을 기록하여 쉽게 검토하고 다른 사람에게 도움을 줄 수도 있습니다. http://www.cnblogs.com/ 또는 http://www.csdn.net/에 접속하여 계정을 등록할 수도 있습니다. 이는 편리하고 실용적입니다.
- Google을 자주 사용하여 영어 정보를 검색하면 http://stackoverflow.com/에서 고품질 답변을 찾을 수 있습니다. 궁금한 점이 있으면 여기에서 직접 검색하여 계정을 등록하세요. 다른 사람의 질문에 대답하는 것도 개인 능력을 향상시키는 데 큰 도움이 될 수 있습니다.
- 고전 도서에 익숙해진 후 이전 필수 기본 기술 섹션에 대한 링크를 열 수 있습니다. 해당 표준을 주의 깊게 읽고 지식을 완전히 습득하세요
계속 개선하세요
이전 기초를 다지고 나면 기본적으로 프론트엔드가 시작되는 단계입니다. 이때는 다들 학습 방향을 염두에 두고 있을 수도 있습니다.
이전 필수 기술 섹션에서 언급한 두 가지 프로젝트를 참고하여 그중 일부를 선택하여 개발 및 학습할 수 있습니다. 다음은 몇 가지 좋은 측면입니다.
- Grunt: 작업 효율성을 향상시키는 프런트엔드 자동화 도구
- CSS가 적음: 탁월한 CSS 전처리기
- 부트스트랩: 우수한 CSS 프레임워크로 디자이너가 없는 팀에 매우 적합하며 적은 리소스와 결합하면 완벽합니다.
- requirejs: 프런트엔드 모듈화 추세에 필수적인 도구인 AMD 표준 모듈 로더
- Node.js: JavaScript를 백엔드로 사용할 수도 있으며, 프론트엔드 엔지니어의 지위가 향상됩니다.
- AngularJS: 단일 페이지 애플리케이션을 위한 좋은 도구
- 모바일 웹 개발: 스마트폰의 대중화로 모바일 트래픽이 점차 PC 트래픽을 따라잡고 있습니다
- 자바스크립트 메모리 관리: SPA를 장시간 실행할 경우 메모리 누수에 주의해야 합니다
- 고성능 JavaScript(보다 빠른 웹 애플리케이션 인터페이스 구축)
- 웹 사이트 속도 향상을 위한 모범 사례: 중요한 기술
개인적인 경험
LingyuCoder의 학습 경험
위 마스터들이 대충 정리해놨으니 여기서는 헛소리만 할게요
####도구
- Chrome 개발 도구: 프런트엔드 개발 및 디버깅을 위한 강력한 도구로, 여러 기능에 중점을 둡니다.
- 콘솔(말도 안되는 소리)
- 요소: 요소 스타일 조정, 매우 일반적으로 사용됨
- 소스: 코드에 중단점을 추가하고, 단일 단계 디버깅을 수행하고, 단일 단계 디버깅 중에 메모리의 개체를 봅니다.
- watch 표현식: 표현식을 통해 현재 메모리에 있는 값을 봅니다
- 호출 스택: 호출 스택을 보고 비동기를 켜면 비동기 호출 스택을 볼 수 있습니다(특히 Ajax를 디버깅할 때 매우 유용합니다)
- 범위 변수: 범위 체인의 변수, 매우 유용함
- 네트워크: 프런트엔드 및 백엔드 공동 디버깅에 필요한 매우 중요하며 각 요청을 보기 위해 패킷을 캡처합니다
- 타임라인: 성능 최적화를 위한 강력한 도구인 렌더링, js 실행 및 기타 단계 분석
- 에뮬레이션: 모바일 페이지 개발에 필수적인 모바일 환경 시뮬레이션
- 일부 플러그인:
- 라이브로드: 페이지 수정 후 자동으로 새로 고침, F5 키를 누를 필요 없음
- 크기: 페이지에서 직접 측정할 수 있는 강력한 도구
- 라이브스타일: CSS 스타일은 수정 후 자동으로 적용되므로 새로 고칠 필요가 없으며 수정 후 요소를 코드와 동기화할 수도 있습니다.
- 이미지 도구: 측정, 색상 선택
- UC QR 코드: 모바일 단말기 디버깅 및 스캔에 필수
- pagespeed, YSlow: 페이지 성능 분석 및 최적화 플러그인
- Mark Feixiang: 뛰어난 온라인 마크다운 편집자, 빠르게 주간 보고서를 작성하고 메모를 작성합니다
- sublime text2: 편리한 코딩, 다양한 플러그인, 빠른 속도 및 우수한 성능
- emmet: HTML 인코딩 속도를 향상시키는 데 필수
- 다양한 언어의 sublimelinter + lint 및 힌트: 코드 수정
- 일부 스니펫: 개발 효율성 향상을 위한 자동 완성
- Intellij IDEA와 WebStorm: 통합 개발 환경, 다양한 기능 통합, 개발은 Sublime보다 편리하지만 성능은 더 비쌉니다
- Mark Men: 측정, 색상 선택 및 마킹을 위한 강력한 도구로 시각적 초안을 받은 후 열리는 첫 번째 소프트웨어
- GFW Fucker: 저는 가능하면 가상서버를 사서 사다리로 사용합니다
- iHosts: 매우 뛰어난 호스트 관리 소프트웨어, 호스트 수정이 쉽고 개발 및 디버깅에 필수적입니다.
- Charles: Mac 플랫폼 최고의 패킷 캡처 및 분석 도구
- Rythem: AlloyTeam에서 제작한 프록시 패킷 캡처 소프트웨어는 매우 가볍고 설치가 쉬우며 모바일 단말기(실제 머신) 개발 및 디버깅에 사용하기 쉽습니다
- Wunderlist: 아주 좋은 Todo List로, 작업이나 요구사항이 많을 때 관리하기 매우 편리합니다
####SKILLS
사실 JavaScript(NodeJS 포함), HTML, CSS 외에도 프런트엔드 기술이 많이 있습니다. 사실 프론트엔드 스킬 트리는 매우 방대합니다.
##### 언어 기본
JavaScript:
- 스코프 체인, 클로저, 런타임 컨텍스트, 이
- 프로토타입 체인, 상속
- NodeJS 기본 및 공통 API
CSS:
- 선택기
- 브라우저 호환성 및 일반적인 해킹
- CSS 레이아웃 방법 및 원리(박스 모델, BFC, IFC 등)
- 애니메이션, 그라데이션 등 CSS 3
HTML:
- 의미 태그
#####고급
자바스크립트:
- 비동기 제어(Promise, ES6 Generator, Async)
- 모듈형 개발 방식(AMD, CMD, KMD 등)
- JavaScript 인터프리터에 대한 일부 관련 지식
- 비동기 IO 구현
- 쓰레기 수거
- 이벤트 대기열
- 자주 사용되는 프레임워크와 그 원리
- jQuery: 선택자 기반 프레임워크이지만 개인적으로 프레임워크라고 부를 수는 없다고 생각합니다. 모듈 로딩 메커니즘이 없기 때문에 소스 코드를 읽고 공부하는 데 매우 적합합니다.
- AngularJS/Avalon과 같은 MVVM 프레임워크: MVVM 패턴 자체의 개념과 양방향 바인딩 구현 및 분리 방법에 대한 이해에 중점을 둡니다
- 밑줄: 뛰어난 도구 라이브러리, 일반적으로 사용되는 도구 코드 조각의 구현을 쉽게 이해할 수 있음
- 폴리머/리액트: 컴포넌트 개발, 미래를 향한, 컴포넌트 개발 원리의 이해
CSS 및 HTML: 주로 CSS3 및 HTML5의 기능과 브라우저 처리 과정 및 그리기 원리
- DOM 트리, CSSOM 트리, 렌더링 트리 구성 과정과 페이지 렌더링 과정
- HTML, CSS, JavaScript를 구문 분석할 때 발생하는 차단
- HTML5 관련
- SVG 및 벡터 그래픽 원리
- 캔버스 개발 및 애니메이션 원리(프레임 애니메이션)
- 비디오 및 오디오
- 플렉스박스 레이아웃 방법
- 아이콘 폰트 활용
일반적으로 사용되는 NodeJs 패키지:
- 코아
- 익스프레스
- 밑줄
- 비동기
- 꿀꺽
- 끙끙
- 연결
- 요청
몇 가지 아이디어:
- 반응형 웹
- 우아한 저하, 점진적인 향상
- 돈
t make me think
- 웹페이지 사용성, 접근성 및 의미
- SEO 검색엔진 최적화, 검색엔진의 원리를 이해하세요
- SPA의 장점과 문제점
성능 최적화:
- 요청 횟수 줄이기(스프라이트, 콤보)
- 캐시를 잘 활용하세요(어플리케이션 캐시, http 캐시, CDN, 로컬스토리지, 세션스토리지, 메모모드)
- 선택기 소비 감소(오른쪽에서 왼쪽으로), DOM 작업 감소(DOM과 JavaScript 인터프리터 분리)
- CSS 리플로우 및 다시 그리기
#####프로젝트
- 버전 관리: Git을 먼저 사용하는 것이 좋습니다. Git을 사용해 본 적이 있다면 SVN을 다시는 사용하고 싶지 않을 것입니다.
- Git: 로컬 버전 관리 메커니즘
- SVN: 원격 센터 버전 관리 메커니즘
- 자동 구축: 주로 Less, 템플릿, 커피 등의 전처리와 코드 압축 및 병합
- Gulp: 흐름을 기반으로 구축되었으며 빠르고 우수한 모듈 품질
- 그런트: 독립적인 작업 구성, 느린 속도, 고통스러운 구성, 높은 유연성
- 전처리 및 템플릿 엔진
- 적음: 간단한 구문이지만 기능이 제한됨
- jade, ejs, Velocity 및 기타 템플릿 엔진은 각각 고유한 장점을 가지고 있습니다
- 커피: Python 엔지니어들이 가장 좋아하는 커피, 한 번도 사용해 본 적이 없습니다
- 환경 구축: 주로 온라인 코드를 로컬에 매핑하고 로컬에서 데모 서버를 시작합니다. 시뮬레이션된 데이터를 조롱하는 것에 대해서는 사람들마다 의견이 다릅니다.
- 로컬 프록시: ihosts
- 자동화된 테스트: 비즈니스가 상대적으로 안정적인 경우 자동화된 테스트를 사용하여 테스트 사고를 줄일 수 있습니다. 그러나 수요가 높을 경우 테스트 사례를 유지하는 데 드는 비용이 높아지고 자동화된 테스트는 반대 효과를 가져올 수 있습니다.
- 자스민
- 모카
- 생태계
- npm
- 정자
- 스피엠
- 나만의 블로그 만들기
- git 페이지
- 헥소
- 지킬
#####미래
- 웹 컴포넌트: 미래 지향적인 컴포넌트 개발 접근 방식
- HTML 템플릿
- 섀도우 DOM
- 맞춤 요소
- HTML 가져오기
- 모바일 단말기 네이티브 개발: 이것도 이해해야 할 부분입니다. 앞으로 프론트엔드 엔지니어들이 웹뷰를 다루는 일이 많을 텐데, 네이티브 개발도 이해해야 합니다.
#####기타
인턴십에 참가하면서 느낀 점과 제가 잘 못했다고 느낀 점은 코드만 입력하면 해결되지 않는 부분입니다.
- 비즈니스에 대한 생각: 저는 개인적으로 이런 부분이 많이 부족해서 맨 위에 올려놓고 비즈니스에 대해 좀 더 생각한 뒤 글을 씁니다
- 커뮤니케이션 및 의사소통 기술: 이는 매우 중요합니다. 프런트엔드는 프로젝트 관리자, 제품, 상호 작용 및 백엔드를 동시에 처리해야 합니다. 의사소통이 제대로 이루어지지 않으면 많은 노력이 낭비되고 프로젝트가 지연됩니다.
- 지식 관리, 시간 관리: 입력과 출력의 균형, 출력이 최고의 입력입니다. 공유를 잘하고, 커뮤니티에 참여하고, 소통을 잘하고, 기록을 잘 남기는 방법
- 새로운 기술에 대한 열망과 도전하는 용기
####입문서
책을 읽으면 시작할 수 있지만, 책에 담긴 내용은 시대에 뒤떨어진 부분도 많지만, 새로운 기술 발전에도 계속해서 관심을 기울여야 합니다. 제가 좋다고 생각하는 몇 권의 책은 다음과 같습니다.
- "고급 JavaScript 프로그래밍": 입문용 책으로도 사용할 수 있지만, 기본 사항을 빠르게 흡수하고 실력이 향상되면 다시 읽을 수 있는 고급 책이기도 합니다.
- "JavaScript에 대한 최종 가이드": 시작하기에 적합하지는 않지만 필요합니다. 이해가 안 되는 부분이 있으면 확인해 보세요. 매우 도움이 됩니다.
- 유지보수 가능한 JavaScript 작성:
- "Node.js 개발 가이드": Nodejs를 소개하는 좋은 책
- "간단한 언어로 된 Node.js 소개": 꼭 소장해야 할 고급 Nodejs 책
- "JavaScript 비동기 프로그래밍": JS 비동기 프로그래밍의 개념 이해
- "자바스크립트 패턴"과 "자바스크립트 디자인 패턴": 자바스크립트 코드 패턴과 디자인 패턴, 개발 사고를 자바스크립트로 전환하는 아주 좋은 책
- "JavaScript Framework Design": 휠을 사용하면서 휠이 어떻게 돌아가는지 알아야 합니다. 프레임워크의 각 부분의 구현을 소스 코드 수준에서 설명하고 있어 많은 것을 배울 수 있습니다. 기존 프레임워크로 읽는 중
-
《Don생각하지 마세요》: 웹 디자인의 개념과 사용자 행동에 대한 이해가 매우 좋습니다 - "CSS Zen Garden": 웹 디자인의 개념과 디자인에서 주목해야 할 문제를 전달하는 지속적인 작품
- "고성능 JavaScript" 및 "고성능 HTML5": 성능을 강조하는 책으로 성능 최적화뿐만 아니라 학습할 가치가 있는 원리 수준의 내용도 많이 있습니다
- "HTML5 캔버스 핵심 기술": 제가 읽고 있는 책은 캔버스 활용, 애니메이션 구현, 애니메이션 프레임워크 개발에 많은 도움이 됩니다
- "HTTP 권위 있는 가이드": 프런트엔드 개발 및 디버깅에 자주 사용되는 HTTP 프로토콜과 관련된 필수 지식
- "반응형 웹 디자인": 기술 자체는 어렵지 않습니다. 중요한 것은 반응형 웹 페이지의 디자인 컨셉과 모바일 우선 아이디어입니다
- "JavaScript 언어의 본질": 노련한 책이자 JavaScript 개발 사고를 대중화하는 데 좋은 책이며 시작하기에 매우 적합합니다
####좋은 웹사이트
- github: 할 말이 없습니다. 다른 사람의 소스 코드를 더 읽고, 자신의 소스 코드를 더 많이 업로드하고, 전 세계 전문가로부터 배우세요.
- codepen: 프론트엔드의 아름다움을 경험하기 위해 꼭 선택해야 할 곳, 수많은 멋진 효과와 뛰어난 플러그인이 있습니다
- echojs: 새로운 js 정보를 빠르게 배울 수 있는 웹사이트
- Stackoverflow 및 Segmentfault: 기본적으로 모든 종류의 질문에 대한 답을 얻을 수 있습니다
- Google 웹 기본 사항: 모든 기사는 주의 깊게 읽는 데 적합합니다
- 정적 파일: 개방형 CDN, 사용하기 쉬움
- iconfont: Alibaba의 벡터 아이콘 라이브러리는 매우 우수하며 CDN 및 프로젝트를 지원합니다
- html5 Rocks: 좋은 웹사이트에서 다양한 새로운 브라우저 기능과 최첨단 기술에 대한 기사를 찾을 수 있습니다
- CSS 요령: CSS를 최대한 활용하고 CSS의 새로운 기능을 배우는 방법을 여기서 만족하실 수 있습니다.
- JavaScript Secret Garden JavaScript 초보자를 위한 필독서, 매우 좋음
- w3cplus: 프론트엔드 학습을 위한 웹사이트, 기사의 질이 꽤 좋습니다
- 노드 스쿨: 좋은 노드 학습 사이트
- git 브랜치 배우기: 훌륭한 상호작용이 가능한 Git 학습 웹사이트
- 프런트엔드 스튜(Front-end Stew): 좋은 글이 많은 프론트엔드 글을 공유하는 커뮤니티
- 정규식: 정규식 입문 튜토리얼, 시청할 가치가 있음
- Ruan Yifeng의 블로그 및 Zhang Xinxu의 블로그: 특정 지식을 빠르게 이해하는 지름길이지만 더 깊이 파고들려면 다른 리소스가 필요합니다
- 다양한 전문가들의 블로그: 너무 많아서 여기에는 올리지 않겠습니다
- 규정을 읽는 방법을 모르는 경우 다양한 규정이 있는 공식 웹사이트
####프로세스
저는 Java SSH를 하다가 중도에 프론트엔드 개발자가 되었기 때문에 상대적으로 실력이 약하고 문제가 더 많았습니다. 기본적으로 W3C School의 책과 튜토리얼은 물론 Uncle Tom의 블로그와 같은 일부 프런트엔드 블로그를 읽어서 시작할 수 있습니다. 예전에는 jQuery만 사용하고 네이티브 js에 대한 공부는 별로 하지 않았습니다. 나중에는 경험 많은 사람들이 쓴 언어의 본질 등 동물 관련 서적을 많이 읽었습니다. 나는 이 책들을 통해 언어 수준의 지식을 많이 배웠습니다. 하지만 이것만으로는 충분하지 않기 때문에 커뮤니티에 자주 가서 모두가 무슨 이야기를 하는지 살펴보고, 관심이 있으면 더 많은 정보를 찾거나 데모를 작성하겠습니다. 이것이 CSS를 배우는 주요 방법입니다. 나중에는 다양한 전문가들의 블로그와 상대적으로 깊이 있는 책들, 그리고 새로운 지식과 프레임워크에 더 관심을 갖기 시작했고, 계속해서 github에 코드를 제출하는 연습을 하면서 많은 지식도 배웠습니다. 인턴 과정을 거치면서 실제 프로젝트 개발에 직접 참여하면서 학교에서 배울 수 없는 많은 개념과 생각을 배울 수 있었던 것도 큰 도움이 되었습니다. 더 이상 얘기하지 말고 벽돌을 옮기고 제안을 요청할 것입니다...
MrRaindrop의 학습 경험
Qiu God의 초대로 저는 프론트엔드 학습 경험을 공유하고 싶습니다. 여기서는 프론트엔드 지식 시스템 아키텍처를 요약하지 않겠습니다. 개인적으로 모든 사람이 공부하는 데 유용하다고 생각하는 몇 가지 링크만 조사한 다음 주로 프런트 엔드 학습 과정에서 직면한 문제와 배운 교훈을 시작하려는 FE 초보자에게 도움이 될 수 있는지 공유합니다. 나는 이것이 이 기사의 청중 유형이라고 가정할 것입니다), 그들이 우회하는 횟수를 줄이고 그들이 내딛는 모든 단계에서 다음 방향을 아는 것이 가장 좋을 것입니다. 명인의 요약 및 공유는 Qiu God이 주최하는 FE-learning을 참조하세요.
프론트엔드를 배우는 방법은 누구나 자신만의 방식이 있을 수 있다는 점부터 말씀드리고 싶습니다. 이 글은 참고용이므로 그냥 읽어도 됩니다.
원산지
저는 우연히 프론트엔드에 입문했습니다. 저는 항상 게임 웹사이트를 만들고, 유니티, 언리얼 엔진 등의 게임 엔진을 가지고 놀았고, 여러 게임 프로토타입을 만져봤습니다. .하지만 연구원으로 실험실에 들어가자마자 튜터가 직접 js를 작성하라고 보냈습니다. 튜터는 저에게 Baidu Map API를 기반으로 한 데이터 표시 페이지를 작성하도록 반달을 주었습니다. 관대하지만 이전에는 js를 많이 작성하지 않았고 map api를 어떻게 사용하는지 모르기 때문에 선배들이 남긴 "코드"를 참고하면서 "Javascript Authoritative Guide"(Rhinoceros Book)를 읽었습니다. 실험실에서 마침내 모든 기능을 작성했습니다. 그 페이지는 나의 js 입문 페이지로 간주되며, 프론트엔드 학습 경로의 시작이기도 합니다.
지금 생각해보면 프론트엔드를 맡게 되었지만 계속해서 잘하려면 흥미에 의지해야 합니다. 물론 프론트엔드는 흥미로운 기술 분야이고, 커뮤니티는 매일 매우 "바쁘다".
프로젝트, 다음 프로젝트
개인적으로는 프론트엔드 학습 초기에는 책에서 완전히 벗어나 프로젝트 중심을 할 수 있다고 생각합니다. 저는 개인적으로 코뿔소 책부터 읽기 시작했지만, 시간이 부족하거나 큰 책을 읽는 것이 지루하다고 느끼신다면 저처럼 되지 마세요. 물론, 책을 읽기로 결정했다면 책에 나오는 모든 예를 따르는 것이 가장 좋습니다. 저는 대학원에 가기 전까지 js를 접한 적이 없었는데, 개학하기 전인 4월에 선생님께서 Baidu Map API 프로젝트에 대해 직접 알려주셨고, 그 후 다양한 ERP와 지도 데이터 표시가 나타났습니다. , 같지는 않았지만 기본적으로는 모두 프론트엔드 작업이었습니다. SSH 및 Android 개발도 했습니다. 전체 연구실에서 프론트엔드를 작성하는 사람이 저뿐이라는 것이 믿어지시나요? 리치 클라이언트 SPA 시대의 백엔드는 편안한 인터페이스이고 기본적으로 코드의 양이 프론트엔드에 있는데 어떻게 이렇게 잘 쓸 수 있지... 이 기간 동안 멘토를 따라 창업을 경험하게 되었고, 매일 오후 7시부터 10시까지 작업을 했다는 점에서 급격한 성장을 이룬 것으로 볼 수 있다.
기술을 익히려면 먼저 일반적인 프레임워크를 숙지하고, 구현할 수 있는 아이디어를 생각하고, 실행할 수 있는 데모를 만든 다음, 세부 사항을 개선해야 합니다. 데모가 완료되면 이에 대한 지각적인 이해가 있게 됩니다. 기술을 이해하고 책을 다시 읽으면 훨씬 더 많은 것을 얻을 수 있습니다. Native js에서 jquery로, 그 다음에는 extjs로, 그리고 강사가 지정한 기술부터 나만의 기술 선택까지, 마치 몬스터와 싸우고 업그레이드하듯 프로젝트를 하나씩 연습해 나갔습니다. 물론, 프로젝트가 없다면 나만의 프로젝트를 만들고 나만의 아이디어를 실현하는 것이 재미있고 뿌듯합니다.
중독수집과 지식관리
프런트엔드 학습은 많은 것들이 파편화되고 흩어져 있다는 특징이 있으며, 이를 스스로 정리하고 요약해야 합니다. Weibo와 Zhihu에서 많은 위대한 스승을 따르는 것은 단지 가십을 듣기 위한 것이 아닙니다. 때때로 위대한 스승의 말씀은 무심코 언급된 단어가 다음 학습 목표가 될 가능성이 높습니다. 이러한 정보를 수집하고, Google을 잘 활용하고, 질문하고, 생각해보세요. 게임 속 수집요소와 마찬가지로 프론트엔드 학습도 수집요소가 가득한 '게임'이지만, 인벤토리와 창고 역할을 하려면 지식관리 도구가 필요합니다. 제가 아는 전문가들은 모두 지식관리자입니다. 도구를 많이 사용하는 사용자입니다. 이전에는 oneNote를 사용했는데, 당시에는 클라우드 저장공간에 묶여 있지 않았습니다. 지금은 기본적으로 Evernote를 사용하고 있는데, 누적된 노트가 1,200개가 넘습니다. Delicious는 태그를 기반으로 관리되기 때문에 즐겨찾기로 사용할 계획은 있었지만 한 번도 사용한 적이 없습니다. 물론 이러한 도구에 초점을 맞추는 것은 아니지만 편리한 도구를 사용하면 학습 효율성을 높일 수 있습니다. 물론 가장 중요한 것은 항상 배우고자 하는 강한 열망을 유지하는 것입니다. 당신의 목표는 프런트 엔드에 대한 모든 것을 이해하는 것입니다(물론 전부는 아닙니다. 왜냐하면 결국 에너지는 제한되어 있기 때문입니다. 현실적으로 말하면 그럴 가능성은 거의 없습니다.)
하나님을 따르라
이건 별로 통제할 수 없을 것 같습니다... 보스에 대해서는 어느 정도 운에 따라 자세히 설명하지 않겠습니다. 하지만 그렇다고 해도 주변의 전문가들과 더 많이 소통하는 것이 왕이다. 이 전문가는 반드시 수준이 높을 필요는 없지만 기술에 대한 열정이 있어야 한다. 대학원 1학년 때 매일 7시에 연구실 문에 들어갔는데 나보다 먼저 도착한 남자가 있었다. 나중에 알고 보니 이 사람은 아침에 갔다가 오후에 돌아왔고, 강사님도 익숙해지셨고, 알고 보니 이 사람은 밤새도록 코드를 작성하다가 아침에 다시 잠이 들었습니다. 나중에 나는 이 신과 자주 문제를 논의했고, 그때마다 내 경험치가 꾸준히 오르는 것을 느꼈다. 그리고 연구실에는 또 다른 신이 있는데, 그 앞에 있는 밤새도록 신이 "먼 초에 불과하고 항상 쫓고 결코 따라잡지 못한다"고 묘사한 두 신의 특징은 조금씩 알고 있다는 점이다. 자, c/c++부터 vc/mfc, 그리고 유닉스 네트워크 프로그래밍까지 잠시 읽기 계획을 세웠습니다. 결국에는 Java 핵심 기술과 C# 프로그래밍 가이드를 봤습니다. MSDN에서 신들과 이야기를 나눌 수 있었습니다.
요컨대 이 두 신은 나를 구덩이에 끌어들이거나 한 구덩이에서 다른 구덩이로 뛰어오르기도 했습니다. 두 신 모두 프론트엔드에 종사하지는 않지만 기술에는 항상 유사점이 있습니다.
독서
읽고, 더 읽고, 좋은 책을 읽어보세요. Liu Weipeng의 블로그에서 공식을 봤습니다. 첫 달 월급은 이전에 구입(읽은) 기술 서적 가격의 합계와 같습니다. (여기서 언급된 기술 서적은 고전적이고 인정받는 기술 서적을 의미합니다. 좋은 책 책). 이 공식의 정확성을 논의하는 것은 무의미해 보이지만 그 합리성은 의심의 여지가 없습니다. 즉, 더 많은 고전 기술 서적을 읽으십시오. 가장 극단적인 예는 Google의 Xu You라는 사람이 우리 대학교에서 도서관의 TP312 책장 전체를 휩쓸었다고 하더군요... 프론트엔드 고전 서적의 경우 제가 수집한 프론트엔드 도서 목록이 있습니다. 프론트엔드 클래식, 괜찮습니다) 책은 메시지를 남겨서 알려주세요.) 가능하다면 이 책을 읽어볼 수도 있습니다. 앞에서 언급한 것처럼 프런트엔드 지식 포인트는 느슨하고, 흩어져 있는 지식 포인트를 수집하고, 블로그를 통해 빠르게 학습하는 등의 방법이 있습니다. 이는 지식 시스템을 깊이 이해하고 싶다면 그 내용을 이해하는 것의 한 측면일 뿐입니다. , 그리고 그것에 대한 체계적인 이해를 확립하기 위해서는 여전히 고전을 읽는 것이 필수적입니다.
처음부터 Rhinoceros 책을 다 읽었고, 프론트엔드와 거의 관련이 없는 다른 고전적인 기술 서적을 계속 읽었습니다. 나중에 실험실 프로젝트와 제가 했던 몇 가지 작은 프로젝트를 통해 저는 점차 실력이 향상되었습니다. 프론트엔드 필드에 대해 더 잘 알고 "Javascript Mode", "Javascript Design Pattern" 및 "Writing Maintenanceable Javascript"를 읽었습니다. 나중에 node에 대해 배우고 이를 사용하여 몇 가지 가젯을 만들기 시작했습니다. up and run', 'Mongodb', 'The Authoritative Guide' 등이 있지만 전자가 약간 함정에 빠진 것 같습니다. 그 당시에는 푸링의 책 '심층적이고 간단한 설명'이 아직 출판되지 않았는데, 나왔을 때 도서관에 가서 빌려서 읽었는데 기분이 꽤 좋았습니다. 아직 책을 너무 적게 읽었다는 생각이 들었습니다. 아직 계속 읽어야 할 것 같습니다(위 도서 목록 참조).
프런트엔드 포지셔닝
프론트엔드의 포지셔닝은 어떤 지식과 기술을 흡수해야 하는지와 관련이 있으며, 기술 세계에서 특히 민감해야 할 것이 무엇인지 결정합니다. 프런트엔드가 단지 페이지를 자르고 상호작용과 시각적 요구사항을 실현하는 데만 그친다고 생각한다면 프런트엔드에 대한 이해는 아직 초기 단계에 있는 것입니다. Alibaba와의 최종 인터뷰에서 저는 심사관에게 다음과 같은 질문을 했습니다. 프런트엔드 기술은 날이 갈수록 변하고 있으며, 범위는 점점 더 넓어지고 있으며, 표준은 점점 더 풍부해지고 있습니다. 어떤 촉수라도 멀리까지 도달할 수 있는 것 같습니다. . 프런트 엔드에 적절한 위치를 부여하는 방법은 무엇입니까? 심사관이 나를 위해 오랫동안 분석해 주었고 한 문장으로 요약했다. 사용자와 웹사이트 사이의 연결자, 사용자 경험의 창조자(원래는 아니지만 일반적인 의미이다)이다. 즉, 프론트엔드의 궁극적인 목표는 사실상 사용자 경험을 중심으로 사용자 경험을 창출하고 사용자 경험을 향상시키는 것입니다. 인터랙션 디자인부터 성능 최적화까지, 워크플로우 효율성을 높이기 위한 워크플로우 개선까지, 결국에는 사용자 경험을 창출하고 개선하는 일이며, 궁극적으로는 사용자 경험에 반영되어야 합니다. 이 요약은 매우 타당하다고 생각합니다. (물론 "사용자 경험"이라는 용어는 너무 광범위하고 단순히 프론트엔드 엔지니어만의 범주는 아닙니다. 예를 들어 백엔드를 개발할 때 데이터 처리 프로세스를 최적화하면 전반적인 성능이 향상됩니다. , 이는 사용자 경험에도 좋습니다.
오늘날 프런트엔드 엔지니어는 페이지 자르기, 시각적 요구사항 구현, 특정 단계에서의 상호작용 구현(예: 프런트엔드 자동화, 이미지 프로그래밍, 성능 최적화 등)보다 훨씬 더 심층적인 문제에 필연적으로 직면하게 됩니다. ., 조금 더 뒤로 밀면 됩니다. 과거에는 백엔드 템플릿이 일반적으로 백엔드 범주에 속했습니다. 이제 프런트엔드 아키텍처가 발전하면서 이러한 질문을 받을 수도 있습니다. 백엔드 언어(PHP/Java/C# 등)를 사용해야 하는 백엔드 템플릿 코드를 작성하는 것을 소위 빅 프론트엔드라고 합니다(단, 큰 프런트 엔드는 여전히 사용자와 접촉하는 부분을 처리하고 사용자 경험을 최적화합니다. 아마도 가장 일반적이거나 이야기되는 것은 노드일 것입니다. 실제로 이러한 기술 중 하나를 선택할 수 있습니다. BAT 3개 회사 중에서는 바이두가 PHP를 더 많이 사용하고 알리바바가 노드를 더 많이 사용한다고 합니다.
유 삼촌은 자신의 블로그에서 소위 풀엔드가 수평이고 풀스택이 수직이라고 언급했습니다. 풀엔드 즉, 모든 단말은 사용자 경험과 관련되어 있고 사용자와 직접적으로 접촉하기 때문에 프런트엔드입니다. 멀티터미널 개발에 적응하려면 웹 프론트엔드를 기반으로 안드로이드 개발과 iOS 개발에 대한 지식을 확장해야 합니다. 다행히 하이브리드 개발 방식이 인기를 끌면서 네이티브 언어 개발을 활용하는 능력은 그렇지 못할 것입니다. -깊이.
풀스택은 스타트업 기업에게 가장 적합한 개발 형태라고 할 수 있습니다. 크게 보면 프론트엔드부터 백엔드까지, 개발부터 운영, 유지관리까지를 통칭합니다. 나는 이런 종류의 이야기를 하지 않을 것입니다. 대부분의 사람들은 아마도 이 방향으로 발전하고 싶지 않을 것입니다. 좁은 의미의 풀스택은 구체적으로 NodeJ를 기반으로 구축된 백엔드에서 js 언어를 사용하여 작성하는 것을 의미하며, 프론트엔드와 백엔드는 통일된 언어, 통일된 프로그래밍 모델을 가지며 심지어 동일한 것을 공유합니다. 코드 세트. 전체 스택 개발에 대해 자세히 알아보려면 전체 스택 엔지니어에 대한 Yu Bo의 기사를 읽어보세요.
위 내용은 프론트엔드와 파생된 기술 경로에 대한 저의 피상적인 이해입니다. 해당 분야를 배우고 해당 분야의 전반적인 동향을 파악하는 것은 매우 중요합니다. 또한 프론트엔드 학습 방향과 경력 성장 경로에 대한 전반적인 이해를 갖고 싶다면 Ba Chi가 요약한 이 프론트엔드 개발 토크를 읽어보는 것이 좋습니다.
드디어
프런트엔드 학습 및 인터뷰를 위한 몇 가지 유용한 링크를 제공하세요.
- 프런트엔드-개발자-인터뷰-질문 모음
- 프론트엔드 스킬 요약(JacksonTian)
- 또 다른 프론트엔드 스킬 요약 차트
- 프론트엔드(도서목록)에 관한 사항
byr 포럼의 yiyizym 제안
grunt에 비해 gulp 학습이 더 쉽습니다
SPA의 경우 backbone.js와 backbone.marionette.js를 권장합니다
FQ 고민하지 마세요. 10위안만 써도 한 달치 붉은 살구를 사실 수 있어요.
이런 것들은 기초를 탄탄히 다지고 익히는 데에는 문제가 없습니다.
html 별로 할말은 없고 시간나면 html5도 배워보겠습니다.
Css 문서를 최대한 많이 읽으십시오. 많은 중국어 자료를 너무 많이 읽으면 혼란스러울 수 있습니다.
다양한 브라우저의 html/css 태그 및 속성 지원 상태를 확인할 수 있는 웹사이트가 있어 매우 유용합니다.
javascript JavaScript 고급 프로그래밍을 살펴보세요. 하지만 이렇게 두꺼운 책을 읽고 나면 잊어버리게 됩니다. 다음은 JavaScript의 핵심 개념을 설명하는 좋은 기사입니다: 객체/프로토타입 체인/생성자/실행 컨텍스트/범위 체인/클로저/this.
시간이 되시면 내년 6월 출시 예정인 ECMAScript 6도 살펴보실 수 있습니다. Ruan Yifeng의 웹사이트에는 소개 정보가 있습니다.
jquery에는 이 웹사이트에서 쉽게 찾을 수 있는 많은 API가 있습니다. jquery deferred의 사용법을 알아보는 시간을 가져보세요.
코드 오류 확인, 새 디렉터리 파일 생성, 코드 정리 등 sublimetext용 플러그인을 추가로 설치하세요.
종합 카테고리
| 综合类 | 地址 |
|---|---|
| 前端知识体系 | http://www.cnblogs.com/sb19871023/p/3894452.html |
| 前端知识结构 | https://github.com/JacksonTian/fks |
| Web前端开发大系概览 | https://github.com/unruledboy/WebFrontEndStack |
| Web前端开发大系概览-中文版 | http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html |
| Web Front-end Stack v2.2 | Web Front-end Stack v2.2 |
| 免费的编程中文书籍索引 | https://github.com/justjavac/free-programming-books-zh_CN |
| 前端书籍 | https://github.com/dypsilon/frontend-dev-bookmarks |
| 前端免费书籍大全 | https://github.com/vhf/free-programming-books |
| 前端知识体系 | http://www.cnblogs.com/sb19871023/p/3894452.html |
| 免费的编程中文书籍索引 | https://github.com/justjavac/free-programming-books-zh_CN |
| 智能社 - 精通JavaScript开发 | http://study.163.com/course/introduction/224014.htm |
| 重新介绍 JavaScript（JS 教程） | https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript |
| 麻省理工学院公开课：计算机科学及编程导论 | http://v.163.com/special/opencourse/bianchengdaolun.html |
| JavaScript中的this陷阱的最全收集--没有之一 | http://segmentfault.com/a/1190000002640298 |
| JS函数式编程指南 | https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html |
| JavaScript Promise迷你书（中文版） | http://liubin.github.io/promises-book |
| 腾讯移动Web前端知识库 | https://github.com/AlloyTeam/Mars |
| Front-End-Develop-Guide 前端开发指南 | https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide |
| 前端开发笔记本 | https://li-xinyang.gitbooks.io/frontend-notebook/content |
| 大前端工具集 - 聂微东 | https://github.com/nieweidong/fetool |
| 前端开发者手册 | https://dwqs.gitbooks.io/frontenddevhandbook/content |
입문반
| 入门类 | 地址 |
|---|---|
| 前端入门教程 | http://www.cnblogs.com/jikey/p/3613082.html |
| 瘳雪峰的Javascript教程 | http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000 |
| jQuery基础教程 | http://www.imooc.com/view/11 |
| 前端工程师必备的PS技能——切图篇 | http://www.imooc.com/view/506 |
| 结合个人经历总结的前端入门方法 | https://github.com/qiu-deqing/FE-learning |
도구
| 工具类 | 地址 |
|---|---|
| 前端人的俱乐部 | http://f2er.club/ 真可以解放你的收藏夹 |
| 如何优雅地使用Sublime Text | http://www.jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/# |
| 新编码神器Atom使用纪要 | http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/ |
| css sprite 雪碧图制作 | http://www.imooc.com/learn/93 |
| 版本控制入门 – 搬进 Github | http://www.imooc.com/learn/390 |
| Grunt-beginner前端自动化工具 | http://www.imooc.com/learn/30 |
| IntelliJ IDEA 简体中文专题教程 | https://github.com/judasn/IntelliJ-IDEA-Tutorial |
| Webstorm,InterllIdea,Phpstorm | http://t.cn/8kZZ1Uy |
| SublimeText | https://github.com/jikeytang/sublime-text |
| Atom | https://atom.io |
| visual studio code | https://code.visualstudio.com |
| 综合效果搜索平台 | 地址 |
|---|---|
| JavaScript 资源大全中文版 | https://github.com/jobbole/awesome-javascript-cn |
| 100+ 超全的web开发工具和资源 | https://xituqu.com/170.html |
| zoommyapp.com | http://zoommyapp.com/ 高质量图库 |
| unsplash.com | https://unsplash.com/ 高质量图库 |
| www.pinterest.com | https://www.pinterest.com/ 图库 |
| New Old Stock | http://nos.twnsnd.co 复古风图库 |
| 效果网 | http://www.jq22.com |
| 花瓣网 | http://huaban.com/ |
| 优美图 | http://www.topit.me/ |
| codepen | http://codepen.io/ |
| 摄图网 | http://699pic.com/ |
| 常用的JavaScript代码片段 | http://microjs.com |
JavaScript 리소스 컬렉션 중국어 버전
| 周报类 | 地址 |
|---|---|
| 奇舞周刊 | http://old.75team.com/weekly/ |
| 码农周刊 | http://weekly.manong.io |
| WEB前端开发 | http://www.css88.com |
| A JS tip per day! | http://www.jstips.co |
| 腾讯全端 AlloyTeam | http://www.alloyteam.com/webdevelop/ |
| 平安科技移动开发二队技术周报 | https://github.com/PaicHyperionDev/MobileDevWeekly |
개발센터
| 开发中心 | 地址 |
|---|---|
| mozilla js参考 | https://developer.mozilla.org/zh-CN/docs/Web/JavaScript |
| chrome开发中心（chrome的内核已转向blink） | https://developer.chrome.com/extensions/api_index.html |
| safari开发中心 | https://developer.apple.com/library/safari/navigation |
| microsoft js参考 | https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94.aspx |
| js秘密花园 | http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html |
| js秘密花园 | http://bonsaiden.github.io/JavaScript-Garden/zh |
| w3help | http://www.w3help.org 综合Bug集合网站 |
Nodejs
| Nodejs | 地址 |
|---|---|
| nodejs 篇幅比较巨大 | http://liuqing.pw |
| Node.js 包教不包会 | https://github.com/alsotang/node-lessons |
| 篇幅比较少 | http://www.rainweb.cn/article/category/Nodejs |
| node express 入门教程 | http://www.w3cfuns.com/article-5598538-1-1.html |
| nodejs定时任务 | http://my.oschina.net/u/568264/blog/193773 |
| 一个nodejs博客 | http://60sky.com |
| 【NodeJS 学习笔记04】新闻发布系统 | http://www.cnblogs.com/yexiaochai/p/3536547.html |
| 过年7天乐，学nodejs 也快乐 | http://www.cnblogs.com/qqloving/p/3541099.html |
| 七天学会NodeJS | https://github.com/nqdeng/7-days-nodejs |
| Nodejs学习笔记（二）--- 事件模块 | http://www.cnblogs.com/zhongweiv/p/nodejs_events.html |
| nodejs入门 | http://www.cnblogs.com/liusuqi/p/3735491.html |
| angularjs nodejs | https://github.com/zensh/jsgen |
| 从零开始nodejs系列文章 | http://blog.fens.me/series-nodejs |
| 理解nodejs | http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb |
| nodejs事件轮询 | http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop |
| node入门 | http://www.nodebeginner.org/index-zh-cn.html |
| nodejs cms | http://ourjs.com/detail/53e1f281c5910a9806000001 |
| Node初学者入门，一本全面的NodeJS教程 | http://ourjs.com/detail/529ca5950cb6498814000005 |
| NodeJS的代码调试和性能调优 | http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line |
종합 API
| 综合API | 地址 |
|---|---|
| javascripting | http://www.javascripting.com |
| 各种流行库搜索 | http://microjs.com |
| runoob.com-包含各种API集合 | http://www.runoob.com |
| 开源中国在线API文档合集 | http://tool.oschina.net/apidocs |
| devdocs | http://devdocs.io 英文综合API网站 |
에크마스크립트
| Ecmascript | 地址 |
|---|---|
| Understanding ECMAScript 6 - Nicholas C. Zakas | https://leanpub.com/understandinges6/read |
| exploring-es6 | https://leanpub.com/exploring-es6/read |
| exploring-es6翻译 | https://github.com/es6-org/exploring-es6 |
| exploring-es6翻译后预览 | http://es6-org.github.io/exploring-es6 |
| 阮一峰 es6 | http://es6.ruanyifeng.com |
| 阮一峰 Javascript | http://javascript.ruanyifeng.com |
| ECMA-262，第 5 版 | http://yanhaijing.com/es5 |
| es5 | http://es5.github.io |
Js 템플릿
| Js template | 地址 |
|---|---|
| template-chooser | http://garann.github.io/template-chooser |
| artTemplate | https://github.com/aui/artTemplate |
| tomdjs | https://github.com/aui/tmodjs/blob/master/README.md |
| 淘宝模板juicer模板 | http://juicer.name/docs/docs_zh_cn.html |
| Fxtpl v1.0 繁星前端模板引擎 | http://koen301.github.io/fxtpl |
| laytpl | http://laytpl.layui.com |
| mozilla - nunjucks | https://github.com/mozilla/nunjucks |
| Juicer | https://github.com/PaulGuo/Juicer |
| dustjs | http://akdubya.github.io/dustjs |
| etpl | http://ecomfe.github.io/etpl |
HTML5(HTML)
| HTML(HTML5) | 地址 |
|---|---|
| 深入理解HTML5标签 | https://segmentfault.com/a/1190000002695791 |
| 如何写出高效率的HTML | https://segmentfault.com/a/1190000002680822 |
| HTML meta标签总结与属性使用介绍 | https://segmentfault.com/a/1190000004279791 |
| 戏说HTML5 | http://www.cnblogs.com/dojo-lzz/p/5059316.html |
CSS3(CSS)
| CSS | 地址 |
|---|---|
| CSS 语法参考 | http://tympanus.net/codrops/css_reference |
| 如何编写可维护的CSS | https://github.com/chadluo/CSS-Guidelines/blob/master/README.md |
| CSS3动画手册 | http://isux.tencent.com/css3/index.html |
| 腾讯css3动画制作工具 | http://isux.tencent.com/css3/tools.html |
| 志爷css小工具集合 | http://linxz.github.io/tianyizone |
| css3 js 移动大杂烩 | http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb |
| bouncejs 触摸库 | http://bouncejs.com |
| css3 按钮动画 | http://fian.my.id/Waves |
| animate.css | http://daneden.github.io/animate.css |
| 全局CSS的终结(狗带 [译] | http://www.alloyteam.com/2015/10/8536 |
| browserhacks | http://browserhacks.com |
Angularjs
| Angularjs | 地址 |
|---|---|
| Angular.js 的一些学习资源 | https://github.com/dolymood/AngularLearning |
| angularjs中文社区 | http://angularjs.cn |
| Angularjs源码学习 | http://www.cnblogs.com/xuwenmin888/p/3739096.html |
| Angularjs源码学习 | http://www.ifeenan.com/?c=AngularJS |
| angular对bootstrap的封装 | http://angular-ui.github.io/bootstrap |
| angularjs + nodejs | https://cnodejs.org/topic/51404e0f069911196d2e3923 |
| 吕大豹 Angularjs | http://www.cnblogs.com/lvdabao/tag/AngularJs |
| AngularJS 最佳实践 | http://www.infoq.com/cn/news/2013/02/angular-web-app |
| Angular的一些扩展指令 | http://www.lovelucy.info/angularjs-best-practices.html |
| Angular数据绑定原理 | https://github.com/Pasvaz/bindonce |
| 一些扩展Angular UI组件 | https://github.com/angular-ui |
| Ember和AngularJS的性能测试 | http://voidcanvas.com/emberjs-vs-angularjs-performance-testing |
| 带你走近AngularJS - 基本功能介绍 | http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html |
| Angularjs开发指南 | http://angular.duapp.com/docs/guide |
| Angularjs学习 | http://www.cnblogs.com/amosli/p/3710648.html |
| 不要带着jQuery的思维去学习AngularJS | http://www.rainweb.cn/article/angularjs-jquery.html |
| angularjs 学习笔记 | http://wangjiatao.diandian.com/?tag=angularjs |
| angularjs 开发指南 | http://www.angularjs.cn/T008 |
| angularjs 英文资料 | https://github.com/jmcunningham/AngularJS-Learning |
| angular bootstrap | http://angular-ui.github.io/bootstrap |
| angular jq mobile | https://github.com/opitzconsulting/jquery-mobile-angular-adapter |
| angular ui | http://mgcrea.github.io/angular-strap |
| 整合jQuery Mobile+AngularJS经验谈 | http://www.tuicool.com/articles/7ZZVr2 |
| 有jQuery背景，该如何用AngularJS编程思想 | http://blog.jobbole.com/46589/ |
| AngularJS在线教程 | http://each.sinaapp.com/angular |
| angular学习笔记 | http://www.zouyesheng.com/angular.html |
반응
| React | 地址 |
|---|---|
| react.js 中文论坛 | http://www.react-china.org |
| react.js 官方网址 | https://facebook.github.io/react/index.html |
| react.js 官方文档 | https://facebook.github.io/react/docs/getting-started.html |
| react.js material UI | http://material-ui.com/# |
| react.js TouchstoneJS UI | http://touchstonejs.io |
| react.js amazeui UI | http://amazeui.org/react |
| React 入门实例教程 - 阮一峰 | http://www.ruanyifeng.com/blog/2015/03/react.html |
| React Native 中文版 | http://wiki.jikexueyuan.com/project/react-native |
| Webpack 和 React 小书 - 前端乱炖 | http://www.html-js.com/article/Fakefish%203053 |
| Webpack 和 React 小书 - gitbook | https://fakefish.github.io/react-webpack-cookbook |
| webpack | https://github.com/webpack/webpack |
| Webpack，101入门体验 | http://html-js.com/article/3009 |
| webpack入门教程 | http://html-js.com/article/3113 |
| 基于webpack搭建前端工程解决方案探索 | http://segmentfault.com/a/1190000003499526 |
| React原创实战视频教程 | http://www.piliyu.com |
뷰
| vue | 地址 |
|---|---|
| Vue | http://cn.vuejs.org |
| Vue 论坛 | http://forum.vuejs.org |
| Vue 入门指南 | http://www.cnblogs.com/aaronjs/p/3660102.html |
| Vue 的一些资源索引 | http://segmentfault.com/a/1190000000411057 |
| awesome-vue | https://github.com/vuejs/awesome-vue |
모바일 API
| 移动端API | 地址 |
|---|---|
| 99移动端知识集合 | https://github.com/jtyjty99999/mobileTech |
| 移动端前端开发知识库 | https://github.com/AlloyTeam/Mars |
| 移动前端的一些坑和解决方法（外观表现） | http://caibaojian.com/mobile-web-bug.html |
| 【原】移动web资源整理 | http://www.cnblogs.com/PeunZhang/p/3407453.html |
| zepto 1.0 中文手册 | http://mweb.baidu.com/zeptoapi |
| zepto 1.0 中文手册 | http://www.html-5.cn/Manual/Zepto |
| zepto 1.1.2 | http://www.css88.com/doc/zeptojs_api |
| zepto 中文注释 | http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html |
| jqmobile 手册 | http://app-framework-software.intel.com/api.php |
| 移动浏览器开发集合 | https://github.com/maxzhang/maxzhang.github.com/issues |
| 移动开发大杂烩 | https://github.com/hoosin/mobile-web-favorites |
jQuery
| jQuery | 地址 |
|---|---|
| jQuery API 中文文档 | http://www.jquery123.com |
| hemin 在线版 | http://hemin.cn/jq |
| css88 jq api | http://www.css88.com/jqapi-1.9/on |
| css88 jqui api | http://www.css88.com/jquery-ui-api |
| 学习jquery | http://learn.jquery.com |
| jquery 源码查找 | http://james.padolsey.com/jquery |
| Web前端资源汇总(jQuery,Js,Css3等) | http://www.cnblogs.com/jihua/p/webfront.html |
D3
| D3 | 地址 |
|---|---|
| d3 Tutorials | https://github.com/mbostock/d3/wiki/Tutorials |
| Gallery | https://github.com/mbostock/d3/wiki/Gallery |
| lofter | http://datavisual.lofter.com/post/40cf3a_188e535 |
| iteye | http://alanland.iteye.com/blog/1878595 |
| ruanyifeng | http://javascript.ruanyifeng.com/library/d3.html |
요구사항
| Requriejs | 地址 |
|---|---|
| Javascript模块化编程（一）：模块的写法 | http://www.ruanyifeng.com/blog/2012/10/javascript_module.html |
| Javascript模块化编程（二）：AMD规范 | http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html |
| Javascript模块化编程（三）：require.js的用法 | http://www.ruanyifeng.com/blog/2012/11/require_js.html |
| RequireJS入门（一） | http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html |
| RequireJS入门（二） | http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html |
| RequireJS进阶（三） | http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html |
| requrie源码学习 | http://www.cnblogs.com/yexiaochai/p/3632580.html |
| requrie 入门指南 | http://www.oschina.net/translate/getting-started-with-the-requirejs-library |
| requrieJS 学习笔记 | http://www.cnblogs.com/yexiaochai/p/3214926.html |
| requriejs 其一 | http://cyj.me/why-seajs/requirejs/ |
| require backbone结合 | http://www.cnblogs.com/yexiaochai/p/3221081.html |
세즈
| Seajs | 地址 |
|---|---|
| seajs | http://seajs.org |
| seajs 中文手册 | http://cyj.me/why-seajs/zh |
덜, 엉뚱하게
| Less,sass | 地址 |
|---|---|
| sass | http://www.w3cplus.com/sassguide |
| sass教程-sass中国 | http://www.sass.hk |
| Sass 中文文档 | http://sass.bootcss.com |
| less | http://less.bootcss.com |
마크다운
| Markdown | 地址 |
|---|---|
| Markdown 语法说明 (简体中文版 | http://wowubuntu.com/markdown |
| markdown入门参考 | https://github.com/LearnShare/Learning-Markdown/blob/master/README.md |
| gitbook | https://www.gitbook.com 国外的在线markdown可编辑成书 |
| mdeditor | https://www.zybuluo.com/mdeditor 一款国内的在线markdown编辑器 |
| stackedit | https://stackedit.io 国外的在线markdown编辑器，功能强大，同步云盘 |
| mditor | http://bh-lay.github.io/mditor 一款轻量级的markdown编辑器 |
| lepture-editor | https://github.com/lepture/editor |
| markdown-editor | https://github.com/jbt/markdown-editor |
| 作业部落 | https://www.zybuluo.com 功能强大，速度流畅，全平台同步 |
호환성
| 호환성 | 주소 |
|---|---|
| esma 호환성 목록 | http://kangax.github.io/compat-table/es6 |
| W3C CSS 검증 서비스 | http://jigsaw.w3.org/css-validator/validator.html.zh-cn |
| 카니우스 | http://caniuse.com/#index |
| csscreator | http://csscreator.com/properties |
| 마이크로소프트 |