본문 바로가기

Front-End/

 (13)
Clean Code Javascript 함수함수 인자는 2개 이하가 이상적이다안 좋은 예 : function createMenu(title, body, buttonText, cancellable) { // ... } 좋은 예 :function createMenu({ title, body, buttonText, cancellable }) { // ... } createMenu({ title: 'Foo', body: 'Bar', buttonText: 'Baz', cancellable: true }); 인자가 3개 이상이라면 이미 그 함수는 너무 많은 역할을 하고 있는 것이다. 만약, 많은 인자를 사용해야 하는 경우라면 객체를 이용하자. ES6의 비구조화(destructuring) 구문을 사용하자!
ES6 문법 개요 ES6 문법 1. let과 constES6부터 나온 새로운 변수 선언 키워드이다. let과 const는 block scope를 가진다. const는 변경되지 않는 상수를 표현할 때 사용한다.function foo() { if (true) { let a = 'bar'; } console.log(a); } foo(); // Uncaught ReferenceError: a is not defined ES6 문법 2. Arrow function const a = () => { console.log("arrow function"); } a();const print = text => { console.log(text); } // 파라미터가 1개일땐 괄호 생략 가능 const sum = (a, b) => (a + b..
Functions 함수 선언 - 파라미터로 non-primitive value가 넘어오면 원본도 바뀐다. function myFunc(theObject) { theObject.make = 'Toyota'; } var mycar = {make: 'Honda', model: 'Accord', year: 1998}; var x, y; x = mycar.make; // x gets the value "Honda" myFunc(mycar); y = mycar.make; // y gets the value "Toyota" // (the make property was changed by the function)bind, apply, call 이란? Function level scope var로 선언된 변수나, 함수 선언
Web Worker(웹 워커) - 멀티 스레드 쓰고 싶어! 1. 공부하게 된 계기 클라이언트 앱을 개발하는 도중, 서버 쪽에 동작이 오래 걸리는 서비스를 호출하고 싶다. 만약 같은 스레드에서 요청한다면 브라우저는 멈추게 되고 사용자는 기다려야 한다. ( 예를 들어, 서버 데이터를 가져오는 네트워크 작업과 같은 경우 ) '이럴 때 백그라운드 스레드 생성을 어떻게 할 수 있을까?' 라는 고민을 하다 웹어커를 알게 되었다.
Prototype, Object 이해하기 Prototype이란 무엇인가?Java에서와 다르게 Javascript는 프로토타입 기반의 언어라고 한다. 항상 귀동냥으로 자바는 객체지향 언어이고 이는 자바스크립트에서 지원이 되지 않는다고만 알고 있었다. ( ECMA2016에서 class 키워드가 등장하긴 했지만... ) 공부를 하다보니 Object가 무엇인지도 제대로 안 되어 있음 Object란 무엇인가?Object란 객체이다. 객체란 Java에서 배웠던 것 처럼 데이터(주체)와 행동(데어터에 관련된 동작)을 정의하고 있는 것이다. 자바스크립트는 객체 그 자체라고 하는데, 이것이 어떠한 의미인지는 아직 와닿지는 않는다. 위에서 정의한 것처럼 흔히 데이터는 프로퍼티라 칭하고, 행동은 메소드라 칭한다. Property 프로퍼티는 객체의 속성을 나타내는 ..
Closure 12345678910111213function makeAdders(n) { var adders = []; for (var i = 0; i < n; i++) { adders.push(function (x) { return i + x; }); } return adders;} var adders = makeAdders(10);var add5 = adders[5];var r = add5(2);console.log(r);// We expect 7, but 12 is printed. 익명함수 ( i+x )를 만들 때 var i의 주인은 function makeAdders 이다. Javascript에서는 이 변수를 넘길 때 Closure라는 scope를 가지고 넘긴다. 외부함수 makeAdders의 변수 i에 접근할..
Shadow DOM Shadow DOM이란? Document Object Model, 즉 DOM은 HTML과 XML 문서의 내용을 조작할 수 있는 API이다. HTML의 요소 집합(태그) 들이 스타일 캡슐화(Encapsulation) Shadow DOM의 핵심 기능 중에 하나는 shadow boundary이다. 이게 무슨 말이냐 하면, 스타일의 경계가 생긴다는 것이다. 즉, 내가 원하는 경계 내에서만 적용을 할 수 있다는 것이다. Shadow DOM 내의 CSS 스타일들은 Shadow Root로 범위가 지정이 되어, 스타일이 캡슐화된다! 예제를 보면 브라우저가 Shadow DOM을 지원한다면 "Shadow DOM"을 볼 수 있다. 위의 결과를 통해 2가지 사실을 알 수 있다.이 페이지 내에 다른 h3들이 있지만 단 하나만이..
문서 스크립팅 클라이언트 자바스크립트의 주 역할은 정적인 HTML 문서를 동적으로 작용할 수 있게 해주는 것이다. 이렇게 웹 페이지의 내용을 제어하는 것이 주 역할이다. Window객체에는 Document 객체를 참조하는 document 프로퍼티가 존재한다. 이 프로퍼티는 해당 창의 내용 정보를 가지고 있다. 즉, 문서 내용을 나타내고 조작하는 중요한 역할을 하는 객체이다. DOM API의 일부이다.( 이게 뭔 소리여?? ) DOM 개요 Document Object Model, 즉 DOM은 HTML과 XML 문서의 내용을 조작할 수 있는 API이다. HTML의 요소 집합(태그) 들이 DOM에서는 객체의 계증 구조로 표현된다. HTML이 DOM 객체로 된 그림이다. 최상단에는 문서 전체를 나타내는 Document 객체가..
Section 5:Object-Oriented Javascript and Prototypal Inheritance Prototype classical vs prototypal inheritance classical 상속이 내가 알고 있는 java에서 사용하는 것이다. 하지만 prototypal 상속에 비해 복잡하다고 하는데 비교를 해보자. Prototype이란? 예제를 먼저 살펴보자. console에 무엇이 나올까?Default ? John ? 무엇이 나올까? 답을 살펴보기 전에 john object가 메모리에 어떻게 할당되어 있는지 살펴보자 john - property( firstName, lastName ) -> person - property ( firstName, lastName, getFullName() ) 이런 식으로 할당이 되어 있다. ->는 prototype chain을 나타낸다.firstName을 찾..
Section4 : Objects and Functions JSON JSON vs XML? - XML은 prop 열고 닫고 하는 것 때문에 string 낭비 - 보기에도 json이 더 보기 좋음

티스토리툴바