Javascript
-
Web Component 에 대하여 간략하게 알아봅시다.Javascript 2019. 4. 24. 23:57
Web Component 는 복잡해진 마크업 요소들을 코드의 충돌없이 재사용 가능하고, 캡슐 화 시키기 위한 목적으로 만들어 졌습니다. WebComponent 의 장점으로는 아무래도 웹표준을 따르는 만큼 어떤 FE 프레임워크나 라이브러리를 사용하더라도 공유, 조합이 가능하다는 것 입니다. 캡슐화 되어있는 Web Component 는 현재 사용중인 테마, 프레임워크로 부터컨텐츠를 보호 할 수 있으며, 잘 만들어진 디자인 시스템으로 무장된 Web Component 는 재사용 할 기회가 굉장히 많아 집니다. 최근 발표된 Apple Music Web 의 Beta 버전에는 ember 와 함께 stencil 을 활용한 Web component 가 적절하게 사용 되었습니다. 기존 웹보다 앱에 치중하던 애플이 이제는 ..
-
ES6 기초와 함수형 자바스크립트 코드 예제Javascript 2017. 3. 19. 20:17
ES 6 의 새로운 문법과 함수형 자바스크립트에 대한 코드 예제 함수형 자바스크립트를 작성하는 법에 대해서 일반적으로 쓰는 OOP 개념의 코드와 다른 점을 예제 코드로 적어보겠습니다. * 본 글은 유튜브 https://youtu.be/HvMemAgOw6I 를 바탕으로 작성되었습니다. > ES6 의 배열인자 const array = (...elements) => { return elements; }; array(1,2,3); // [1, 2, 3] const log = (...args) => { console.log(...args); } log('hello', 'Seoul'); // hello Seoul * const : es6 의 새로운 문법으로 const 로 선언된 값은 외부에서 직접적으로 변경할 수 ..
-
ES6 2부 - Arrow function, 객체 리터럴 , 2진수, 8진수Javascript 2016. 8. 18. 00:47
> Arrow function ES6 부터 Arrow function 이 추가 되었다 . 백문이 불여일견 . 어떤놈인지 바로 코드를 보자. //ES5 var Test1 = function(a,b) { return a+b; } console.log(Test1(1,2)); //3 //ES6 let Test2 = (a,b) => { let result = a+b; return result; } console.log(Test2(1,2)); //3 //ES6 let Test3 = (a,b) => (a+b); console.log(Test3(1,2)); //3 코드를 보면 알 수 있듯이 함수를 간결하게 표현할 수 있도록 바뀌었다. 함수의 return 문이 하나인 경우에 3번째 예제처럼 한줄로 만들 수도 있다. Ar..
-
ES6 1부 - let , const , 배열과 객체Javascript 2016. 8. 17. 00:37
최근(도 아니구나..글 적은지 오래됬네유...ㅜ) Meanstack 글을 올리면서 새로운 정보를 찾던 중, Facebook 에서 만든 React 를 접하게 되었다. 원래라면 Meanstack 후에 Angular.js2 를 적용한 Meanstack2 에 대한 글을 적으려 했지만 , 아무래도 현재 Javascript 프레임워크의 대세는 React 가 되고 있기 때문에 React를 먼저 정리하려 한다. (React는 라이브러리지만 어쨌든..) 솔직히 말하자면 Angular.js 2 는 Typescript 를 사용하기에 굳이 Typescript 를 새로 익힐 바엔 ES6 문법을 적극적으로 사용하는 React 를 알아보는게 더 이득이라 생각하였다. 더 솔직히 말하면 React가 Angular 보다는 배우기 쉬운 ..
-
Angular.js 의 작동원리Javascript 2016. 6. 27. 23:13
Angular.js 는 MVC 아키텍처로 단일 페이지 어플리케이션(SPA) 를 구축하기 위해 설계된 프론트엔드 Javascript Framework 이다. Angular.js 의 가장 큰 특징은 클라이언트 쪽 템플릿과 모델과 뷰 사이의 빈틈없는 동기화를 위한 양방향 데이터 결합 이다. 또한 Angular.js 는 MVC 와 의존성 주입을 사용해 애플리케이션 코드 구조와 테스트성을 개선한다. 모든 angular.js 애플리케이션은 최소한 한개의 모듈이 필요하며 , 이 모듈을 애플리케이션 모듈이라고 지칭한다. angular.js 모듈은 angular.module(name, [requires], [configFN]) 메소드를 사용해 생성하고 인출 할 수 있다. 이 3개의 인수에 대해서 말하자면 name : 모..
-
javascript 에서 for loop 를 사용할 때Javascript 2016. 6. 26. 14:53
Javasciprt 코드 작성 중 for loop 문을 작성할 때 일반적인 패턴은 다음과 같다. for ( var i = 0; i < myarray.length; i++) { // myarray[i] 를 구현하는 함수 } 여기서 문제점은 loop 를 순회할 때 마다 배열의 length 에 접근 한다는 것 이다. myarray 가 배열이 아니라 HTMLcollection 이라면 더욱 문제가 된다. 예를 들어 document.images , document.links, dociment.forms, document.form[0].element 등을 for loop 문에 사용한다면 HTML 페이지에 실시간으로 질의를 요청하는데 , DOM 접근은 일반적으로 비용이 크다. 따라서 for loop 를 최적화 하기 위..
-
프로토타입 (Prototype) 1부Javascript 2016. 6. 13. 23:05
이번엔 Closure 와 함께 Javascript 의 또 다른 중요 특성인 Prototype 에 대하여 알아보자. 명세에 따르면 자바스크립트 객체는 Prototype 이라는 내부 속성이 있고 이는 다른 객체를 참조하는 단순 레퍼런스로 사용한다. var myObject = { a: 2 } myObject.a; //2 위 코드에서 myobject.a 가 호출 될 때 GET 이 호출된다. GET 은 기본적으로 그 객체 자체에 해당 속성이 존재하는지 찾아보고 존재하면 그 속성을 사용한다.하지만 myobject에 a란 속성이 없으면 다음 관심사는 이 객체의 prototype 링크를 찾아가며 수색을 한다. var anotherProject = { a : 2 }; var myObject = Object.create ..