분류 전체보기 (135) 썸네일형 리스트형 배열(Arrays) 배열(Arrays)Use the literal syntax for array creation.배열을 작성 할 때는 리터럴 구문을 사용해 주십시오.// bad const items = new Array(); // good const items = [];Use Array#push instead of direct assignment to add items to an array.직접 배열에 항목을 대입하지 말고, Array#push를 이용해 주십시오.const someStack = []; // bad someStack[someStack.length] = 'abracadabra'; // good someStack.push('abracadabra');Use array spreads ... to copy arrays.. 오브젝트(Objects) 오브젝트(Objects)Use the literal syntax for object creation.오브젝트를 작성할때는, 리터럴 구문을 사용하십시오.// bad const item = new Object(); // good const item = {};If your code will be executed in browsers in script context, don't use reserved words as keys. It won't work in IE8. More info. It’s OK to use them in ES6 modules and server-side code.코드가 브라우저상의 스크립트로 실행될때 예약어를 키로 이용하지 마십시오. IE8에서 작동하지 않습니다. More info하지만 E.. 참조(References) 참조(References)모든 참조는 const 를 사용하고, var 를 사용하지 마십시오.Why? This ensures that you can't reassign your references, which can lead to bugs and difficult to comprehend code.왜? 참조를 재할당 할 수 없으므로, 버그로 이어지고 이해하기 어려운 코드가 되는것을 방지합니다.// bad var a = 1; var b = 2; // good const a = 1; const b = 2;If you must reassign references, use let instead of var.참조를 재할당 해야한다면 var 대신 let 을 사용하십시오.Why? let is block-scoped r.. JavaScript 스타일 가이드 - 형(Types) 형(Types)Primitives: primitive type은 그 값을 직접 조작합니다.stringnumberbooleannullundefinedconst foo = 1; let bar = foo; bar = 9; console.log(foo, bar); // => 1, 9 Complex: When you access a complex type you work on a reference to its value.참조형: 참조형(Complex)은 참조를 통해 값을 조작합니다.objectarrayfunctionconst foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 9 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. 가능한 한 자연스러운 문서 흐름.. 이전 1 ··· 12 13 14 15 16 17 다음