예전에 카카오맵API를 Vue컴포넌트 기반으로 가져오는 연습을 했었는데.. ( 글 참조 ) 그때 썼던 게 document.createElement() 함수였다. 그리고 이 녀석들과 같이 쓰는 함수들은 아래와 같은데 document.createElement() //요소(태그) 생성 document.createTextNode() // 요소(태그)안에 텍스트 생성 document.[head or body].appendChild() //요소(태그)를 헤더나 바디에 부착 그럼 바로 테스트를 통해서 알아보자. 스크립트 이렇게 하면 정상적으로 body태그 안에 해당 스크립트 태그가 부착이 될 것이다.. 아래는 실행결과 그리고 클릭을 하면 팝업창이 뜨면서 이벤트 리스너도 제대로 들어 간 것을 확인 할 수 있다. 태그에..
기존의 Object에서는 forEach문 대신 for in문을 통해 value값을 순회했었지만 ( for in 글 참조 ) map에서는 for of문과 배열에서 주로 사용하던 forEach문을 활용하여 for문을 돌릴 수 있다. 오늘은 2가지 방법으로 map으로 for문을 돌려보자. 우선 테스트용 map을 생성해보자. ( map 글 참조 ) let newMap = new Map(); newMap.set('name', 'bome'); newMap.set('age', 29); newMap.set('cat', 'mochi'); 1. forEach 메서드 ============================================================================ 위에서 생성한 map..
오늘은 Object를 이용하여 반복문을 사용하는 방법을 알아보자. 기존의 배열은 그냥 배열.forEach를 사용하면 됬는데.. ( 배열의 forEach ) Object는 forEach문을 통해서 반복문을 돌릴 수 없다. 그래서 오늘은 그 방법에 대해 알아보려고 한다. for in문법 활용 ============================================================================ 기본 문법 for(var [인덱스] in [객체명]) { alert('키 값 : ' + [인덱스] + ', 속성 값 : '+[객체명][인덱스]); } 우선 테스트용 객체를 하나 생성해주자. const obj = { 'name' : 'bome', 'age' : '29', 'job' : ..
오늘은 ES6문 문법에 새로 추가 된 Map()이라는 녀석에 대해 알아보려고 한다. Map()은 Object나 Array와 같은 자료구조로써, 특히 Object와 비슷한 점이 많다. 특히 Object와 마찬가지로 key와 value를 가지는 것이 가장 큰 특징인데.. Map에 대해 정리하자면 다음과 같다. Map의 특징 Map() 은 자바스크립트의 key-value 페어(pair) 로 이루어진 컬렉션 key 를 사용해서 value 를 get, set 할 수 있음 key 들은 중복될 수 없음: 하나의 key 에는 하나의 value 만 key 로 사용할 수 있는 데이터형: string, symbol(ES6), object, function >> number 는 사용할 수 없음에 주의! 기본 문법 -- map..
오늘은 javascript 함수인 querySelector, querySelectorAll에 대해 알아보자. 위 두녀석은 Dom Selector에 포함되는 녀석들도 Dom Selector에는 크게 3가지가 있다. 1. CSS방식으로 가져오는 querySelector ( IE8 부터 지원 ) 2. HTML 태그를 가져오는 getElement 3. HTML 태그를 가져오거나 변경하는 Attribue 평소에는 getEelement를 많이 쓰고, 가끔 Attribue를 썼었다.. 왜냐하면 지금까지는 ES6문법을 안썼기 때문.. 즉 querySelector는 ES6문법이 되시겠다. 우선 querySelector문법을 알아보자. querySelector / querySelectorAll ===============..
평소에 배열에 값을 추가할 일이 많아 push()를 많이 사용했는데, 배열에서 값을 제거 할 일은 없어서 pop()을 사용 할 일이 없었다. 거기에 shift()와 unshift()와 같이 배열의 왼쪽에 추가하거나, 제거하는 일은 더더욱 없었다.. 그런 김에 정리해본다. 핵심 배열에 값을 추가하는 함수 .push() : 배열의 오른쪽에 값을 추가 .unshift() : 배열의 왼쪽에 값을 추가 배열에서 값을 제거하는 함수 .pop() : 배열의 오른쪽의 값을 제거 .shift() : 배열의 왼쪽의 값을 제거 그럼 바로 테스를 해보자. testArray라는 배열을 선언하고 초기값으로 [1,2,3,4,5,6]을 줬다. 그리고 push()로 오른쪽에 7을 넣어주고 unshift()로 왼쪽에 0을 넣어준 뒤, ..