Front-End(기타자료) (6) 썸네일형 리스트형 2018 년 최고의 자바 스크립트 라이브러리 및 기술 배우기 작년에, 나는 2017 년에 배울 최고 기술을 반올림하는 기사를 썼다 . 올해에는 몇 가지 놀라운 일이 있습니다.우리는 "학습 주제를 통해 투자를 배우는 시간에 가장 높은 수익을 얻을 수있는 기회를 얻게 될 것입니다"라고 답했습니다.자바 스크립트는 산사태로 인해 가장 많은 패키지를 가지고 있습니다.첫째로, 소프트웨어는 세계를 먹고, 웹은 소프트웨어를, 자바 스크립트는 웹을 찾았다. 2018 년 React - 자바 스크립트를 먹고 있습니다.2018 년 : 반응의 해React는 2017 년에 인기 전투에서 승리했습니다.Angular 코드 기반에서 작업하는 개발자가 여전히 많습니다. Google Base에 표시됩니다.그러나 React가 고객 만족도 조사에서 계속 우위를 차지함에 따라 React 성장으로 인해 .. React/JSX Style Guide Airbnb React/JSX Style GuideReact와 JSX에 대한 가장 합리적인 접근방법목차기본규칙Class vs React.createClass vs stateless믹스인명명규칙선언정렬따옴표띄어쓰기속성참조괄호태그메소드순서isMounted기본규칙파일당 하나의 컴포넌트 파일만 포함한다.하지만, 다수의 Stateless, or Pure, Components 들은 파일에 존재해도 된다. eslint: react/no-multi-comp.항상 JSX 구문을 사용한다.만약 JSX를 이용해 앱을 개발 중이라면 React.createElement 구문을 사용하지 않는다.Class vs React.createClass vs stateless만약 소스 안에 state나 refs가 있으면, React.crea.. Sass Style Guide Sass문법항상 .sass가 아닌 .scss 문법을 사용해주세요.일반적인 CSS와 @include 선언은 논리적으로 순서를 정리해주세요. (아래 예시를 참조)속성 선언 순서속성 선언우선 표준 속성 선언을 먼저 작성합니다. @include 혹은 중첩 선택자는 아직 적지 않습니다..btn-green { background: green; font-weight: bold; // ... }@include 선언@include를 마지막에 모아놓으면 전체 선택자를 쉽게 독해할 수 있습니다..btn-green { background: green; font-weight: bold; @include transition(background 0.5s ease); // ... }중첩 선택자중첩 선택자는 마지막에 위치합니다. 그리.. Airbnb CSS Style Guide CSS에 대한 합리적인 접근법 규칙 선언부"규칙 선언부(Rule declaration)"는 선택자와 그에 동반되는 속성들을 일컫는 이름입니다. 다음 예시를 참조해주세요:.listing { font-size: 18px; line-height: 1.2; }선택자규칙 선언부에서, "선택자(Selectors)"는 DOM 트리의 어떤 요소들이 정의된 속성(Properties)으로 꾸며질지 결정하는 부분들입니다. 선택자는 HTML 요소들, 뿐만 아니라 한 요소의 클래스, ID, 또는 해당 요소의 어느 속성(attributes)들과도 연결될 수 있습니다. 다음은 선택자에 대한 예시들입니다:.my-element-class { /* ... */ } [aria-hidden] { /* ... */ }속성마지막으로, "속성(.. 프론트엔드 가이드 라인 (Frontend-guidelines) - CSS 편 CSS세미콜론(Semicolons) 세미콜론은 기술적으로 CSS의 구분 기호로 항상 마지막에 처리한다. / * bad * / div { color : red } / * good * / div { color : red ; } 박스모델(Box model)Box model은 전체 문서에 대해 이상적으로 동일해야합니다. 전역 * { box-sizing: border-box; }은 괜찮지만 특정 요소에 대한 기본 상자 모델을 변경하면 안된다. /* bad */ div { width: 100%; padding: 10px; box-sizing: border-box; } /* good */ div { padding: 10px; } 흐름(Flow)element의 기본 동작을 변경하면 X. 가능한 한 자연스러운 문서 흐름.. 프론트 엔드 가이드 라인 (Frontend-guidelines) - HTML 편 프론트 엔드 가이드 라인HTML시멘틱(Semantics)HTML5는 콘텐츠를 정확하게 설명하기 위한 많은 의미론적 요소를 제공. Blog post Published: 21st Feb, 2018 … Blog post Published: 21st Feb, 2018 … 사용중인 요소의 의미를 이해했는지 확인해보자..시맨틱 요소를 중립적으로 사용하는 것보다 잘못된 방법으로 사용하는 것이 더 안좋은 예이다. 간결하게..Brevity코드를 간결하게하십시오. 오래된 XHTML 습관을 잊어 버려라. Contact Contact me Email address: Contact Contact me Email address: 접근성(Accessibility)접근성은 사전에 미리 확인하자.. 웹 사이트를 개선하기 위해 WCAG.. 이전 1 다음