앵귤러 학습을 위한 도우미 웹/앵귤러 (Angular) 2020. 6. 18. 23:59 앵귤러를 사용해보려 하시나요? 이번 글에서는 맨땅에 헤딩하고 온갖 삽질을 하면서 공부한 경험을 기반으로, 앵귤러를 학습하는데 도움이 될만한 사항에 대해서 이야기해볼까 합니다. 물론 기본적으로 HTML과 JavaScript, CSS에 대한 기본 지식이 우선이겠죠? 이번 글의 내용은 절대적인 것은 아니며, 전 영역을 두루 커버하는 것은 아닙니다. 100% 개인적인 경험에 의한 일부에 대한 내용이니 참고만 하시기 바랍니다. 1. 앵귤러를 시작하자! 일단 처음은 무조건 공식 튜토리얼을 이용하는 것이 좋습니다. (물론 문서는 마음에 들지 않습니다...) 오리지널 튜토리얼 : https://angular.io/docs 한글판 튜토리얼: https://angular.kr/docs 솔직히 좀 어렵습니다. 대체적으로 구..
앵귤러 (Angular)는 정말로 어려울까? 웹/앵귤러 (Angular) 2020. 6. 11. 01:59 극악의 러닝 커브로 명성을 떨치고 있는 앵귤러! 진정 학습 난이도가 높을까요? 이번 글에서는 앵귤러의 러닝 커브에 대해서 어느정도인지, 간략하게 다루어보도록 하겠습니다. 물론 어디까지나 개인 의견이므로 누구에게나 통용되는 사항은 아닙니다. 1. 통설 (通說) 인터넷에 프론트엔드 프레임워크를 비교하는 Vs. 류의 글을 찾아보면 백이면 백 다음과 같은 말들이 나와있습니다. "앵귤러는 학습 커브가 steep 하다!" 다른 프레임워크나 라이브러리 (Vue, React)를 다뤄보지 않고 Angular만 다뤄본 입장에서 정확하지는 않겠지만, 앵귤러 자체의 절대적 측면에서의 기준으로 어느 정도는 맞다고 할 수 있을 것 같습니다. 난이도는 둘째치고, 기본적으로 공부해야 할 분량이 많거든요. NgModule Compon..
앵귤러(Angular) 란? 특징 및 장단점 웹/앵귤러 (Angular) 2020. 6. 5. 22:51 앵귤러(Angular)는 클라이언트 (웹) 애플리케이션을 개발을 위해 만들어진 오픈소스 프레임워크입니다. 최근의 프론트엔드 라이브러리 (또는 프레임워크)로 React, Vue와 함께 자주 언급되고 있습니다. 이번 글에서는 앵귤러가 무엇인지, 특징과 장, 단점은 무엇인지에 대해서 살펴보도록 하겠습니다. 1. AngularJS로 시작하다. AngularJS는 단일 페이지 애플리케이션 (SPA, Single Page Application) 방식의 프론트엔드 개발을 위한 자바스크립트 프레임 워크 (또는 라이브러리)입니다. AngularJS는 동적 콘텐츠 작성을 하는 데 있어서 (당시로는) 획기적인 접근 방식으로 유행을 불러일으킬 만큼 많은 수요가 있었습니다. 자바스크립트에서 처리하던 부분의 많은 부분을 HTML..
[ES6] 배열 메소드 : entries(), keys(), values() 웹/JavaScript 2020. 5. 17. 23:24 이번 글에서는 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() 웹/JavaScript 2020. 5. 13. 21:21 ES6에서는 배열 복사를 위한 2개의 메소드, copyWithin()과 fill()이 추가되었습니다. 개인적으로는 딱히 필요한 상황이 없었던 것 같지만, 일단 필요에 의해서 추가되었을 테니 나중을 위해서 정리를 해봅니다. 1. Array.prototype.copyWithin() copyWithin() 메소드는 배열의 일부를 복사하여, 지정된 위치에 덮어쓰고 해당 배열을 반환합니다. 배열의 길이는 변경되지 않습니다. copyWithin() 메소드는 원본 배열을 변경시킵니다. [문법] arr.copyWithin(target, start, end); Parameter Description target (필수) 복사한 엘리먼트 붙여 넣을 위치의 인덱스 start (옵션) 복사를 시작할 위치의 인덱스 (defau..
[ES6] 배열 메소드 : find(), findIndex() 웹/JavaScript 2020. 5. 7. 22:25 ES5에서는 배열 내에 검색을 위해서 indexOf()라는 배열 메소드가 존재했습니다. ES6에서는 좀 더 강력한 배열 검색을 지원하기 위해서 find(), findIndex() 두가지의 새로운 메소드를 지원합니다. 기존의 indexOf가 배열내의 특정 값을 찾는데에 사용되었다면, find, findIndex는 callback 함수를 통해서 좀 더 복잡한 조건의 검색이 가능합니다. 약간은 filter() 메소드와도 비슷한 면이 있어 보입니다. 1. Array.prototype.find() find() 메소드는 주어진 테스트 함수의 조건을 만족하는 첫 번째 요소 값을 반환합니다. 조건에 맞는 요소를 찾을 수 없다면 undefined를 반환합니다. find()는 호출되는 배열을 변경하지 않습니다. [문법] ..
[ES6] 배열 메소드 : from(), of() 웹/JavaScript 2020. 5. 2. 23:21 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() 웹/JavaScript 2020. 4. 13. 23:40 이번 글에서는 약간은 특이하면서도 활용도는 높을 것 같은데... 막상 쓰려고 하면 왠지 잘 쓰지 않게 되는 reduce와 reduceRight 메소드에 대해서 살펴보도록 하겠습니다. 1. Array.prototype.reduce() Reduce 메소드는 Array를 하나의 단일 값으로 줄입니다. 배열의 각 요소에 대해서 callback 함수 (Reducer)를 실행합니다. 원본 배열 값은 변경하지 않습니다. 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결괏값을 반환합니다. reduce는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행하는데, 콜백 함수는 다음의 네 인수를 받습니다: 콜백의 최초 호출 때 accumulator와 ..
[ES5] 배열 메소드 : indexOf(), lastIndexOf() 웹/JavaScript 2020. 4. 8. 23:19 이번 글에서는 ES5의 배열 메소드 (Array Method) 중, 배열 내의 특정 요소의 위치를 반환하는 indexOf와 lastIndexOf에 대해서 알아보겠습니다. 두 메소드는 다른 배열 메소드와 마찬가지로 for loop로 구성해야 하는 수고를 덜어줍니다. 1. Array.prototype.indexOf() IndexOf() 메소드는 배열에서 지정된 요소가 존재하는 인덱스를 반환합니다. 시작 인덱스부터 배열의 뒷부분으로 검색합니다. 가장 처음 발견한 요소의 인덱스를 반환합니다. 값을 찾을 수 없으면 -1을 반환합니다. [문법] arr.indexOf(item, startIndex) Parameter Description item (필수) 찾아야 할 엘리먼트 startIndex (옵션) 검색을 시작할..
[ES5] 배열 메소드 : every(), some() 웹/JavaScript 2020. 4. 3. 22:02 이번 글에서는 ES5에서 지원하는 Array Method 중 비슷한 성격의 every와 some에 대해서 살펴보도록 하겠습니다. 이 두가지 Array Method는 배열의 요소들이 주어진 조건을 만족하는지 여부에 대한 검증을 수행합니다. 1. Array.prototype.every() every()는 배열의 각 엘리먼트에 대해서 테스트 함수의 반환 값이 모두 true인지 확인합니다. 모든 case가 true일때 true를 반환합니다. 하나라도 false이면 반환 값은 false입니다. 기존 배열 값은 변경되지 않습니다. [문법] arr.every(function(currentValue, index, array), thisValue)) Parameter Description function (필수) 배열의..