티스토리

Kovico lab

검색하기

블로그 홈

Kovico lab

hye-toria.tistory.com/m

코비코 koreanvisionarycoder 님의 블로그입니다.

구독자: 3

방명록 방문하기

주요 글 목록

14. Block (JS style guide) 여러줄의 블록 : {} 사용 eslint: nonblock-statement-body-position Use braces with all multi-line blocks. 복수행의 블록에는 중괄호 ({}) 를 사용해 준다. // bad if (test) return false; // good if (test) return false; // good if (test) { return false; } // bad function foo() { return false; } // good function bar() { return false; } if/else 여러줄 블록 : if 의 닫기 } 와 같은 줄에 else 두기 If you're using multi-line blocks with if and else.. 공감수 0 댓글수 0 2023. 2. 15.
14. Comparison Operators & Equality (JS style guide) ==와 != 대신 ===와 !==를 사용한다. eslint: eqeqeq(===) (!==) > (==) Conditional statements if 와 같은 조건문 : ToBoolean 의 추상 메서드로 강제변환을 사용하여 식을 평가한다. 식을 평가하는 규칙은 다음과 같다. if ([0] && []) { // true // 배열은 객체이다. 빈객체도 객체임 // 객체는 항상 true } Objects -> true Undefined -> false Null -> false Booleans -> true / false Numbers false : +0, -0, NaN otherwise true Strings false : empty string '' otherwise true reference: boo.. 공감수 0 댓글수 0 2023. 2. 7.
13. Hoisting (JS style guide) var, const/let 선언의 호이스팅: var declarations get hoisted to the top of their scope, their assignment does not. const and let declarations are blessed with a new concept called Temporal Dead Zones (TDZ). It's important to know why typeof is no longer safe. var 선언문은 가장 가까운 함수 스코프의 최상단으로 호이스팅 된다. 할당문은 호이스팅 되지 않는다. const/let 선언에는 Temporal Dead Zones (TDZ) 가 존재한다. typeof 는 안전하지 않다. (예시 참고) // 아래 함수는 참조 .. 공감수 0 댓글수 0 2023. 1. 27.
12. Variables (JS style guide) 변수 선언 은 항상 const let eslint: no-undef prefer-const Always use const to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that. 전역 변수가 생성되지 않는다. 전역 변수 공간을 어지럽히지 않는다. // bad superPower = new SuperPower(); // good const superPower = new SuperPower();하나의 변수 선언/할당 : 하나의 const let eslint: one-var Use one const .. 공감수 0 댓글수 0 2023. 1. 26.
11. Properties (JS style guide) 프로퍼티 접근: dot 표기법 사용 Use dot notation when accessing properties. 속성에 접근할 때는 마침표를 사용한다. eslint: dot-notation const luke = { jedi: true, age: 28, }; // bad const isJedi = luke['jedi']; // good const isJedi = luke.jedi; 변수로 프로퍼티 접근 : [] 사용 Use subscript notation [ ] when accessing properties with a variable. 변수를 사용해 프로퍼티에 억세스하는 경우는 대괄호 [ ] 를 사용한다. const luke = { jedi: true, age: 28, }; function getP.. 공감수 0 댓글수 2 2023. 1. 16.
10. terators and Generators (JS style guide) 이터레이터 사용: 고차 함수 > 루프 for-in / for-of Don't use iterators. Prefer JavaScript's higher-order functions like map() and reduce() instead of loops like 이터레이터를 사용하지 마세요. for-in이나 for-of 같은 루프 대신 자바스크립트의 고급함수를 사용한다. 고차 함수 불변 규칙을 강제하기 위함이다. 값을 리턴하는 순수 함수를 다루는 것이 더 쉽기 때문에 사이드 이펙트도 작을 수 있음. 배열 순회 map() every() filter() find() findIndex() reduce() some() / ... 객체 -> 배열 Object.keys() Object.values() Object... 공감수 0 댓글수 0 2023. 1. 9.
9. Modules(JS style guide) import/export > non-standard 모듈 시스템 Always use modules (import/export) over a non-standard module system. You can always transpile to your preferred module system. `import` `export` 를 쓰면 원하는 모듈시스템에 언제라도 옮겨서 트랜디한 스타일링을 할 수 있다. // bad const AirbnbStyleGuide = require('./AirbnbStyleGuide'); module.exports = AirbnbStyleGuide.es6; // ok import AirbnbStyleGuide from './AirbnbStyleGuide'; export defaul.. 공감수 0 댓글수 0 2023. 1. 3.
8. Classes & Constructors(JS style guide) Classes & Constructors 클래스 사용 > 프로토타입 직접조작 Always use class. Avoid manipulating prototype directly. prototype을 직접 조작하는 것보다 class를 활용한다. class 문법은 prototype의 조작보다 더 간결하며, 의미를 알기 쉽기 때문이다. // bad function Queue(contents = []) { this._queue = [...contents]; } Queue.prototype.pop = function() { const value = this._queue[0]; this._queue.splice(0, 1); return value; } // good class Queue { constructor(c.. 공감수 0 댓글수 0 2022. 12. 27.
7. Arrow Functions (JS style guide) prefer-arrow-callback, arrow-spacing : 익명 함수, 화살표함수 사용 When you must use function expressions (as when passing an anonymous function), use arrow function notation. (인라인 콜백을 전달할 때 같이) 익명함수를 사용할 때는 화살표 함수 표현을 사용한다. eslint: prefer-arrow-callback, arrow-spacing. 화살표 함수의 함수의 실행 문맥(this)은 함수를 호출한 곳의 컨텍스트(this) 를 이어받을 수 있다. 만약 function 키워드를 사용한 익명함수를 인라인 콜백에서 썼을 경우의 this 는 실행컨텍스트를 예측하기가 어렵다. 화살표 함수는 간결.. 공감수 0 댓글수 0 2022. 12. 21.
6. Functions (JS style guide) 함수 표현식보다는 함수 선언식을 활용한다. eslint : func-style Use function declarations instead of function expressions 함수 표현식(=함수식)보다는 함수 선언문을 활용한다. 함수 선언문은 파일에서 함수가 정의되기 전에 함수를 참조할 수 있다. 함수 선언문은 함수 본체까지 호이스팅 되지만, 함수 표현식은 참조(함수 이름)만이 호이스팅 된다. 이 룰에 의해 함수식의 부분을 항상 Arrow함수에서 이용하는것이 가능하다. 함수 선언문은 함수의 정의가 파일의 나머지 부분을 이해하기 어려울 만큼 복잡하다면 모듈로 추출할 수 있다. // bad function foo() { // ... } // bad const foo = function () { // .. 공감수 0 댓글수 2 2022. 12. 14.
5. Strings (JS style guide) quotes : 문자열 single quotes '' 일관된 방식으로 정의되는 문자열 사용 // bad const name = "Capt. Janeway"; // bad - template literals: 줄바꿈, interpolation 일때 사용 const name = `Capt. Janeway`; // good const name = 'Capt. Janeway'; 100 자가 넘는 문자열: \,+ 으로 끊지 말것. 끊어진 문자열 : 작업하기가 힘들고 코드를 검색하기 어렵게 만든다. // bad const errorMessage = 'This is a super long error that was thrown because \ of Batman. When you stop to think about .. 공감수 0 댓글수 0 2022. 12. 7.
4. Destructuring (JS style guide) [JS] 구조 분해 할당 (destructing assignment) 구조 분해 할당은 객체나 배열을 변수로 분해할 수 있게 해주는 문법이다. 함수에 객체 또는 배열의 일부만 전달하고자 하는 경우에 사용할 수 있다. 1. 배열 분해 배열을 분해하고 변수에 초기 ingnoh.tistory.com Use object destructuring when accessing and using multiple properties of an object. 단일 오브젝트의 여러 프로퍼티에 접근하는 경우 Destructing을 사용합니다. 이를 통해 프로퍼티를 위한 임시적인 참조를 줄일 수 있습니다. prefer-destructuring 임시 references 생성을 줄여 줍니다. // bad function getFu.. 공감수 0 댓글수 0 2022. 12. 2.
3. Arrays (JS style guide) no-array-constructor " 배열 생성 : 리터럴 문법 [] no-array-constructor 새로운 배열을 구성하기 위해 Array 리터럴 표기법을 선호하지 않는이유 single-argument pitfall : 단일 인수 함정. Array global (array 전역)이 재정의 될 수 있다. 배열 생성자를 사용하는 예외 Array 생성자를 사용하여 생성자에게 단일 숫자 인수를 제공하여 지정된 크기의 배열을 의도적으로 만드는 경우. // eslint no-array-constructor: "error" //never use Array(0, 1, 2) new Array(0, 1, 2) //eslint no-array-constructor: "error" // good code Array.. 공감수 0 댓글수 0 2022. 11. 22.
2. Objects (JS style guide) no-new-object : Object 생성 -> 리터럴 문법 사용 { } 객체 리터럴 구문은 더 간결하며 new Object() 의 성능 차이는 없다. // bad const item = new Object(); // good const item = {}; 계산된 속성명을 obj 안에서 정의해야 한다. bad case 의 경우, 계산된 속성명을 obj 정의시 지원이 안됐던 시절 사용했던 방법이다. 지금은 obj 안에 계산된 속성명이 사용가능하기 때문에 가독성을 위해 obj 에서 계산된 속성명을 한번더 검사해서 값을 할당하는 방식은 불필요 function getKey(k) { return `a key named ${k}`; } // bad const obj = { id: 5, name: "San Fra.. 공감수 0 댓글수 0 2022. 11. 18.
1. References (JS style guide) prefer-const, no-const-assign : 모든 곳에 const 사용 인지 부하 감소 유지 관리성 향상 references 의 재할당 -> bugs, 코드 이해의 어려움 no-var : references 재할당 -> let 함수 스코프 var sandwiches.length; if (enoughFood) { var count = sandwiches.length; // 실수로 count 변수 재정의 console.log("We have " + count + " sandwiches f.. 공감수 0 댓글수 0 2022. 11. 18.
0. Types (JS style guide) Primitives string, number, boolean, null, undefined, symbol, bigint Symbols, BigInts 완전히 polyfilled 되지 않아 브라우저 환경에서 권장하지 않음. Complex object, array, function 공감수 0 댓글수 0 2022. 11. 18.
자바스크립트 활용하기 💡"DOM편 " 프론트엔드 개발자라면 자바스크립트(JavaScript)라는 프로그래밍 언어를 아는 것과 동시에 DOM에 대해서 반드시 알고 있어야만 웹 개발을 제대로 시작 할 수 있다. 웹에 띄울 페이지가 실제로 사용할 수 있는 페이지로 혹은, 우리가 필요한 정보가 모여있는 웹 페이지로 구현하려면 HTML, CSS로도 충분하지 않다. 그 이상의 인터랙티브한 기능을 구현하고자 한다면 자바스크립트와 DOM을 반드시 써야만 하기 때문이다. 그렇다면 DOM이란 무엇이고, 어떻게 자바스크립트와 DOM을 이용해 인터랙티브한 기능을 어떤 매서드를 이용해 조작할 수 있는지 알아보자. * 인터렉티브 사전 뜻: 인터랙티브(Interactive)는 '상호 간'이라는 뜻을 지닌 인터(Inter-)와 '활동적'이라는 뜻을 지닌 액티브(Acti.. 공감수 0 댓글수 0 2022. 11. 3.
좋은 "변수이름" 짓는방법 " Naming 💡 개발자가 되기 위해서 준비하다 보면 중요하게 공부할 것 들이 많다 그 중 빠르게 개발을 배우는 것도 중요하지만, 그것보다 더 본질적으로 '좋은 코드'를 작성하는 것이 결국 우리가 개발하는 실무에서는 핵심 아닐까 💡 변수 이름을 개발자가 작성하기 때문에 Naming을 잘 작성하느냐에 따라 효율적인 코드가 될 수도 있고 개발자 본인의 주관적인 코드가 되어 유지보수 하기 힘든 코드가 될 수 있기 때문이다. 실제로 회사에서 유지보수 할 일이 있거나 다른 사람의 개발 코드를 보고 수정하는 일들을 하다 보면 좋은 코드가 왜 필요한지 피부로 느낄 수 있다. 좋은 코드란 좋은 코드란 가독성이 좋아서 이해하기 쉬우며 변경하기도 편리하고 재사용하기 쉬운것을 효율적인 코드라 이야기한다. 개발을 한 이후 요구사항등 변경이 필.. 공감수 0 댓글수 0 2022. 10. 26.
자바스크립트를 사용하기전 오타와의 싸움이다! 오타에 참으로 민감한 우리 자바스크립트씌........ ^^ 작은 오타로 에러났다는 사실을 알았을때................................................ Chaper 1 자바스크립트를 사용하기전 오타와의 싸움이다! Window 기준으로, Google 크롬브라우저를 설치 한뒤, 메인 페이지에서 'F12' 를 누르면 개발자도구가 나온다. 위 창에 ' consloe' 탭을 클릭한뒤, 오른쪽 빈공간에 > 모양을 확인할 수 있다. 이를 프롬포트(Prompt) 라고 한다. 여기에 코드를 입력하시면 된다. 다음코드를 작성한 후 , [Enter]키를 치면 코드가 실행된다. step 1. 콘솔창에 Hello World가 출력을 해고 응용해서 (' Hello world! ')도 출력해보자... 공감수 5 댓글수 0 2022. 10. 21.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.