웹 (24)
Paper Block - 이야기가 있는 공간
앵귤러 (Angular)는 정말로 어려울까?
극악의 러닝 커브로 명성을 떨치고 있는 앵귤러! 진정 학습 난이도가 높을까요? 이번 글에서는 앵귤러의 러닝 커브에 대해서 어느정도인지, 간략하게 다루어보도록 하겠습니다. 물론 어디까지나 개인 의견이므로 누구에게나 통용되는 사항은 아닙니다. 1. 통설 (通說) 인터넷에 프론트엔드 프레임워크를 비교하는 Vs. 류의 글을 찾아보면 백이면 백 다음과 같은 말들이 나와있습니다. "앵귤러는 학습 커브가 steep 하다!" 다른 프레임워크나 라이브러리 (Vue, React)를 다뤄보지 않고 Angular만 다뤄본 입장에서 정확하지는 않겠지만, 앵귤러 자체의 절대적 측면에서의 기준으로 어느 정도는 맞다고 할 수 있을 것 같습니다. 난이도는 둘째치고, 기본적으로 공부해야 할 분량이 많거든요. NgModule Compon..
앵귤러(Angular) 란? 특징 및 장단점
앵귤러(Angular)는 클라이언트 (웹) 애플리케이션을 개발을 위해 만들어진 오픈소스 프레임워크입니다. 최근의 프론트엔드 라이브러리 (또는 프레임워크)로 React, Vue와 함께 자주 언급되고 있습니다. 이번 글에서는 앵귤러가 무엇인지, 특징과 장, 단점은 무엇인지에 대해서 살펴보도록 하겠습니다. 1. AngularJS로 시작하다. AngularJS는 단일 페이지 애플리케이션 (SPA, Single Page Application) 방식의 프론트엔드 개발을 위한 자바스크립트 프레임 워크 (또는 라이브러리)입니다. AngularJS는 동적 콘텐츠 작성을 하는 데 있어서 (당시로는) 획기적인 접근 방식으로 유행을 불러일으킬 만큼 많은 수요가 있었습니다. 자바스크립트에서 처리하던 부분의 많은 부분을 HTML..
[ES6] 배열 메소드 : entries(), keys(), values()
이번 글에서는 ES6에서 지원하는 다소 특이한 메소드인 entries(), keys(), values()에 대해서 살펴보도록 하겠습니다. 1. Array.prototype.entries() entries() 메서드는 배열의 각 인덱스에 대한 key-value 쌍을 가지는 새로운 Array Iterator 객체를 반환합니다. [Iterator란?] Iterator는 컬렉션의 항목에 한 번에 하나씩 액세스 하면서 현재 위치를 추적하는 객체입니다. 두 개의 속성 (value, done)을 반환하는 next() 메서드를 지원하며 객체의 Iterator protocol을 구현합니다. 시퀀스의 마지막 값이 산출된 후 done 값은 true를 반환합니다. https://developer.mozilla.org/en-U..
[ES6] 배열 메소드 : copyWithin(), fill()
ES6에서는 배열 복사를 위한 2개의 메소드, copyWithin()과 fill()이 추가되었습니다. 개인적으로는 딱히 필요한 상황이 없었던 것 같지만, 일단 필요에 의해서 추가되었을 테니 나중을 위해서 정리를 해봅니다. 1. Array.prototype.copyWithin() copyWithin() 메소드는 배열의 일부를 복사하여, 지정된 위치에 덮어쓰고 해당 배열을 반환합니다. 배열의 길이는 변경되지 않습니다. copyWithin() 메소드는 원본 배열을 변경시킵니다. [문법] arr.copyWithin(target, start, end); Parameter Description target (필수) 복사한 엘리먼트 붙여 넣을 위치의 인덱스 start (옵션) 복사를 시작할 위치의 인덱스 (defau..
[ES6] 배열 메소드 : find(), findIndex()
ES5에서는 배열 내에 검색을 위해서 indexOf()라는 배열 메소드가 존재했습니다. ES6에서는 좀 더 강력한 배열 검색을 지원하기 위해서 find(), findIndex() 두가지의 새로운 메소드를 지원합니다. 기존의 indexOf가 배열내의 특정 값을 찾는데에 사용되었다면, find, findIndex는 callback 함수를 통해서 좀 더 복잡한 조건의 검색이 가능합니다. 약간은 filter() 메소드와도 비슷한 면이 있어 보입니다. 1. Array.prototype.find() find() 메소드는 주어진 테스트 함수의 조건을 만족하는 첫 번째 요소 값을 반환합니다. 조건에 맞는 요소를 찾을 수 없다면 undefined를 반환합니다. find()는 호출되는 배열을 변경하지 않습니다. [문법] ..
[ES6] 배열 메소드 : from(), of()
ES6에서 새롭게 Array 관련 2개의 정적 메소드(static method) from()과 of()가 추가되었습니다. Static method 이므로 "Array.메소드명"의 형태로 호출합니다. 1. Array.from() Array.from() 메소드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 복사해서 새로운 배열 객체를 생성합니다. from()은 정적 메소드로 배열을 생성하지 않고 바로 사용할 수 있습니다. Array-like object의 조건은 아래와 같습니다. 배열처럼 인덱스로 접근이 가능하고, length 속성이 존재한다. 실제 배열의 네이티브 메소드( push, forEach ...)는 존재하지 않는다. Array-like ob..
[ES5] 배열 메소드 : reduce(), reduceRight()
이번 글에서는 약간은 특이하면서도 활용도는 높을 것 같은데... 막상 쓰려고 하면 왠지 잘 쓰지 않게 되는 reduce와 reduceRight 메소드에 대해서 살펴보도록 하겠습니다. 1. Array.prototype.reduce() Reduce 메소드는 Array를 하나의 단일 값으로 줄입니다. 배열의 각 요소에 대해서 callback 함수 (Reducer)를 실행합니다. 원본 배열 값은 변경하지 않습니다. 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결괏값을 반환합니다. reduce는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행하는데, 콜백 함수는 다음의 네 인수를 받습니다: 콜백의 최초 호출 때 accumulator와 ..
[ES5] 배열 메소드 : indexOf(), lastIndexOf()
이번 글에서는 ES5의 배열 메소드 (Array Method) 중, 배열 내의 특정 요소의 위치를 반환하는 indexOf와 lastIndexOf에 대해서 알아보겠습니다. 두 메소드는 다른 배열 메소드와 마찬가지로 for loop로 구성해야 하는 수고를 덜어줍니다. 1. Array.prototype.indexOf() IndexOf() 메소드는 배열에서 지정된 요소가 존재하는 인덱스를 반환합니다. 시작 인덱스부터 배열의 뒷부분으로 검색합니다. 가장 처음 발견한 요소의 인덱스를 반환합니다. 값을 찾을 수 없으면 -1을 반환합니다. [문법] arr.indexOf(item, startIndex) Parameter Description item (필수) 찾아야 할 엘리먼트 startIndex (옵션) 검색을 시작할..