728x90 javaScript17 javaScript - html의 event, this 활용하기 html 태그에서 해당 태그의 정보나 이벤트를 추출하여 js에서 사용할 수 있게 하려면, html에서 태그의 정보나 이벤트를 넘겨주어여합니다. input 태그의 이벤트와 태그 정보를 넘기기 위해 바인딩된 함수에 event와 this 키워드를 사용합니다. function testEvent($event, $element) { var strLength = $event.target.value.length; if(strLength > 40) { $event.target.value = $event.target.value.substring(0, 40); } if($event.keyCode == 13 || $event.code == "Enter") { ... } } event와 this를 각각 $even와 $this로.. 2021. 12. 13. javaScript - 객체의 병합(깊은 복사, 얕은 복사) 객체 복사는 기본적으로 원본 객체의 주소값을 참조합니다. 복사된 객체와 원본 객체 간의 연결고리 계속이어지며, 한쪽을 바꾸면 복사된 객체와 원본 객체의 값 전부가 바뀌게 됩니다. 이러한 복사된 객체와 원본 객체 간의 연결고리를 끊으려면 어떻게 해야할까요? 또한 1뎁스 객체의 연결고리를 끊더라도 2뎁스는 원본 객체를 참조하는 경우, 이를 얕은 복사라고 합니다. 반면 모든 뎁스의 연결고리를 끊는 것을 깊은 복사라고 합니다. 깊은 복사 const sourceObject = { traits: { value: 'Bob', source_id: 1, updated_at: 1623238587468 }, emails_opend_last_30_days: { value: 33, source_id: 2, updated_at:.. 2021. 8. 5. javaScript - 프로세싱 코드모음 Object.entries와 구조분해 할당 연습 const cartItems = [ { id: 1, item: '핸드밀', price: 40000, discount: 0 }, { id: 2, item: 'A4용지', price: 4000, discount: 0 }, { id: 3, item: '수영복', price: 120000, discount: 0 }, { id: 4, item: '색연필72색', price: 150000, discount: 0 }, ]; const extractValueInObject = (obj) => Object .entries(obj) .map(([, value]) => String(value));// 구조분해 할당 기법 const cartItemsString = cartIte.. 2021. 8. 4. javaScript - closure 기법 closure 기법이란 자바스크립트에서 사용하는 정보은닉의 한 방식입니다. 자바스크립트이 변수는 어디에서나 접근 가능하고 쉽게 변경할 수 있습니다. 하지만 외부에서 접근을 막고 변수 값이 변경되는 것을 막아야하는 때가 있습니다. 그럴 때 데이터 보호차원에서 클로저(closure) 방식을 사용하는 것입니다. function increment() { let saveNumber = 1; return function() { return saveNumber++; } } let value = increment(); console.log(value());// 1 console.log(value());// 2 console.log(value());// 3 함수 안에 사용할 변수를 선언하고, 선언한 변수는 외부에서 접근.. 2021. 7. 28. javaScript - context 문법 최근에 알게된 context 문법에 관해서 간략하게 다루보겠습니다. 흔히 자바스크립트의 this를 많이 사용하고는 했는데, 이것이 무엇을 지칭하는지는 그때 그때 달라져서 좀 더 자세히 알아볼 필요가 있습니다. 그래서 이번 기회에 this 개념을 알아볼까 합니다. 기본적으로 this가 가르키는 것은 window입니다. 전역 변수 개념으로 this는 window인 셈이죠. 반면 매서드 내부에서 this는 매서드를 지칭하게 됩니다. new 연산자로 인스턴스 객체 생성 시에는 this는 생성 대상 객체가 됩니다. 객체 내에서 문맥(context)가 달라지면 this를 어떻게 인식하는지 살펴봅시다. const person = { name: "hong gil dong", age : 30, getAge() { ret.. 2021. 7. 27. javaScript - 배열2 배열 연산 배열 함수 2편으로 이번에는 배열 함수를 통해서 연산 위주로 살펴보겠습니다. 1. map 함수 let books = ['book1', 'book2', 'book3', 'book4', 'book5']; const bookset1 = books.map( (item) => { return { title: item, author: undefined } }); console.log(bookset1); map은 객체를 리턴해서 각 객체들을 모아서 배열로 만들어줍니다. 또한 문자열로 구성된 배열을 객체로 구성된 배열로 변환한 것 처럼, 배열을 다른 형태로 변화할 때 map함수가 많이 씁니다. 2. 이중 map 구조 let books = ['햄릿', '리어왕', '오셀로', '맥베스', '로미오와 줄리엣', '말괄량이.. 2021. 7. 22. javaScript - 배열1 배열 메소드 자바스크립트의 대표적인 배열 메소드에 대해서 알아봅시다. push, slice, splice, pop, shift, unshift, join, split, concat 등 여러 배열 메소드가 있지만 중요한 것 위주로 살펴 보겠습니다. push는 배열의 요소를 뒤에서 부터 넣는다는 것을 알고 계실겁니다. 1. slice const book = ['book1', 'book2', 'book3', 'book4', 'book5', 'book6']; let bookset1 = book.slice(1, 2); console.log(bookset1);// ["book2"] slice는 배열의 데이터를 지정한 인덱스 앞까지 가져오는 함수입니다. 첫번째 인자는 시작 위치이고 두번째 인자는 가져올 인덱스의 바로 다음 인덱스.. 2021. 7. 22. javaScript - 객체2 프로그래밍 도구로서의 객체 객체가 데이터를 담는 것 외에도, 어떤 대상을 객체화하려 그 대상을 표현하는 경우도 많습니다. 행위동작 요소까지 객체에 담는 것이죠. class Circle { _radius; constructor(radius) { this._radius = radius; } get radius() { return this._radius; } area = () => this._radius * this._radius * Math.PI; } class Rect { _width; _height; constructor(width, height) { this._width = width; this._height = height; } get width() { return this._width; } get height() { retu.. 2021. 7. 22. javaScript - 레이어 팝업 history.back 감지 웹 모바일 개발하면서 레이어팝업에서 뒤로가기는 누르게 되면 비정상적인 움직임을 하는 것 알게되었습니다. 레이어팝업에서 뒤로가기를 하게 되면 부모화면이 닫히거나 history.back()이 됩니다. 단지, 레이어팝업을 닫하고 싶을 때는 어떻게 구현해야할지 찾던 중에 좋은 코드가 떠올라서 공유할겸 포스트해봅니다. 1. 사용할 메소드 history.pushState(data, title, url) window.addEventListener(이벤트명, 함수) window.removeEventListener(이벤트명, 함수) addEventListener와 removeEventListener에 바인딩할 함수 위와 같이 4가지 정도 준비물이 필요합니다. 해당 메소드들의 역할은 이 글에서는 다루지 않겠습니다. 바로 .. 2021. 7. 20. javaScript - 함수 1. 자바스크립트의 함수 호출 3가지 방식 함수명으로 호출 function myFn() { return 100; } const result = myFn(); myFn 함수를 myFn() 과 같이 함수명으로 호출합니다. 특이한 점은 자바스크립트는 함수를 변수로 취급한다는 것입니다. 그래서 const result = myFn(); 와 같이 호출하면 result 변수에 함수값이 저장됩니다. 즉, 변수에 함수를 넣는 것입니다. 뒤에 살펴볼 익명함수는 반드시 변수에 넣어야지 사용할 수 있습니다. 위의 코드는 함수 정의문으로 함수를 구현했습니다. 반면 const myFn2 = function () { return 100; } myFn2(); 위의 함수는 함수 정의식으로 함수를 구현했습니다. 함수 정의문과 함수 정의.. 2021. 7. 16. javaScript - fetch ajax 호출 ES6에서 지원해주는 fetch API는 ES6의 Promise와 함께 AJAX를 쉽게 사용하게 해주는 방식입니다. fetch는 반환값으로 Promise를 가집니다. 아래는 기본적인 fetch의 구조입니다. fetch(resource, [, init]) .then( callback ) .catch( callback ) resource : 요청 주소, URL, 경로 init (optional) : 설정 객체 const init = { method: "POST", body: JSON.stringify(data), headers: { "Content-Type": "application/json" }, credentials : "same-origin" } fetch api 호출 예제 url = 'https://.. 2021. 7. 13. javaScript - 비동기 함수 동기식으로 실행하기(Promise와 async) 1. promise function test() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('성공'); }, 2000); //reject('error'); }); }; test().then((response) => { console.log(response);// 성공 }); promise 기본형으로 프로미스 객체를 리턴합니다. test().then(...) 과 같이 함수 호출 후 then() 절에 호출 이후의 행위를 기술하면 됩니다. then(response)에서 response 파라미터로 test 함수의 반환 값(response)을 받을 수 있습니다. test 함수의 success 반환 값은 resolve로 error .. 2021. 7. 12. javaScript - 스프레드 오퍼레이터(Spread Operator) 스프레드 오퍼레이터를 이용해서 구현할 수 있는 몇가지 유용한 것들을 소개해보겠습니다. 스프레드 오퍼레이터는 ES6에 추가된 문법입니다. 1. 배열 복사 let arr1 = [1,2,3]; let arr2 = [...arr1, 4, 5]; console.log(arr1);// [1, 2, 3] console.log(arr2);// [1, 2, 3, 4, 5] 2. 배열 합치기 let arr1 = [1,2,3]; let arr2 = [4, 5]; let arr3 = [1,2,3]; let arr4 = [-1, 0]; arr1.push(...arr2); arr3.unshift(...arr4); console.log(arr1);// 1, 2, 3, 4, 5 console.log(arr3);// -1, 0, 1,.. 2021. 7. 12. javaScript - 유용한 메소드 모음 배열 중복 값 없애기 var array = [1, 4, 6, 6 ,7 ,1]; // Object.filter 메소드로 구현 function solution1(arr) { return arr.filter((elem, idx, elems) => elems.indexOf(elem) == idx); } console.log(solution1(array)); // Object.reduce 메소드로 구현 function solution2(arr) { return arr.reduce((acc, cur, idx) => { acc.indexOf(cur) > -1 ? acc : acc.push(cur); return acc; }, []); } console.log(solution2(array)); 카카오 코딩테스트 htt.. 2021. 7. 7. javaScript - 객체 생성 class 안녕하세요. 이번에도 자바스크립트 객체 생성을 다루어 보려고합니다. 객체 생성 파트는 이번이 마지막이 될 것 같습니다. ES6에서 추가된 새로운 문법 중에 class를 통해서 객체를 생성하는 기능이 추가되었습니다. 새로운 객체 생성 방식을 살펴보고 Object.create() 방식과 비교해보겠습니다. 1. class 객체 생성 기본형태 class test1 { a; b = 2; constructor(paramB) { this.a = 1; this.b = paramB; } // 사용할 메소드 선언 getA() { return this.a; } getB() { return this.b; } ... } let t1 = new test1(); console.log(t1);// 아래 이미지 참조 let t2 = .. 2021. 7. 5. 이전 1 2 다음 728x90
