맨동이

Promise란? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다. Promise의 필요성 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 API를 사용합니다. API가 실행되면 서버에다가 데이터를 보내달라는 요청을 보냅니다. 그런데 데이터를 받아오기 전에 데이터를 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜨는데, 이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스입니다. 프로미스 코드 - 기초 그럼 프로미스가 어떻게 동작하는지..

textContent, innerText, innerHTML innerHTML 해당 Element의 HTML, XML을 읽어오거나, 설정할 수 있습니다. div안에 있는 HTML 전체 내용(태그포함)을 가져오는 것을 확인 할 수 있습니다. 문제는, innerHTML이 대표적인 XSS 공격에 취약한 점입니다. HTML5에서는 innerHTML과 함께 삽입된 태그가 실행되지 않도록 지정했지만, 여전히 다른 공격 루트들은 방어하지 못합니다. innerText 해당 Element 내에서 사용자에게 '보여지는' 텍스트 값을 읽어옵니다. 즉, innerText의 값은 원시 텍스트가 최종적으로 (화면에) 렌더링 된 모습, 예를 들어 내용 숨김이나 줄바꿈 같이 의도적인 스타일링이 들어간 후의 모습이 됩니다. textC..

정규표현식 정규표현식은 문자열을 검색하고 대체하는 데 사용 가능한 일종의 형식 언어(패턴)입니다. 정규표현식을 다루는 메소드 메소드 문법 설명 exec 정규식.exec(문자열) 일치하는 하나의 Array 반환 test 정규식.test(문자열) 일치 여부(Boolean) 반환 match 문자열.match(정규식) 일치하는 문자열의 배열(Array) 반환 search 문자열.search(정규식) 일치하는 문자열의 인덱스(Number) 반환 replace 문자열.replace(정규식,대체문자) 일치하는 문자열을 대체하고 대체된 문자열(String) 반환 split 문자열.split(정규식) 일치하는 문자열을 분할하여 배열(Array)로 반환 toString 생성자_정규식.toString() 생성자 함수 방식의..

lodash 더보기 import _ from 'lodash' lodash 를 사용하기 위해 통상적인 방법으로 _(under bar)를 통해 import를 합니다. const usersA = [ { userId: '1', name: 'Dongit' }, { userId: '2', name: 'Nobin' } ] const usersB = [ { userId: '1', name: 'Dongit' }, { userId: '3', name: 'Yesbin' } ] 배열 안의 객체 데이터가 겹치는 배열 데이터를 두개를 이용하겠습니다. const usersC = usersA.concat(usersB) console.log('concat:', usersC) concat 메서드를 사용하여 배열을 합쳐 새 배열을 반환하..

구조 분해 할당 객체데이터는 구조 분해 할당을 할 때 이름으로 구분하여 추출합니다. const user = { name: 'Dongit', age: 25, email: 'abcd1234@gmail.com' } const { name, age, email, address } = user console.log(`이름은 ${name} 입니다.`) console.log(`나이는 ${age} 입니다.`) console.log(`이메일은 ${email} 입니다.`) console.log(`주소는 ${address} 입니다.`) // 이름은 Dongit 입니다. // 나이는 25 입니다. // 이메일은 abcd1234@gmail.com 입니다. // 주소는 undefined 입니다. 변수의 기본값은 할당연산자를 통해..

객체 (Object) Object.assign() Object.assign() 메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다. const target = { a: 1, b: 2 } const source = { b: 4, c: 5 } const returnedTarget = Object.assign(target, source) console.log(target) //{a: 1, b: 4, c: 5} console.log(returnedTarget) //{a: 1, b: 4, c: 5} console.log(target === returnedTarget) //true const a = { k: 123 } const b = { k: 1..

Array find() 메서드 find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다. 구문 arr.find(callback[, thisArg]) const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10); console.log(found); //12 length() 메서드 Array 인스턴스의 length 속성은 배열의 길이를 반환합니다 const name = ['kim', 'park', 'lee'] console.log(name.length) //3 concat() 메서드 concat() 메서드는 인자로 주어진 배열이나 값들을 ..

String String.prototype.indexOf() indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다. 구문 str.indexOf(searchValue[, fromIndex]) 매개변수 searchValue(필수) 찾으려는 문자열. 아무 값도 주어지지 않으면 문자열 "undefined"를 찾으려는 문자열로 사용합니다. fromIndex(선택) 문자열에서 찾기 시작하는 위치를 나타내는 인덱스 값입니다. 어떤 정수값이라도 가능합니다. 기본값은 0이며, 문자열 전자밧체를 대상으로 찾게 됩니다. 만약 fromIndex 값이 음의 정수이면 전체 문자열을 찾게 됩니다. 만약 fromIndex >= str.len..

보간법 const age = 25 console.log("I'm" + age + "years") console.log(`I'm ${age} years`) //I'm25years //I'm 25 years 백틱 기호를 사용하면 간단하게 변수 값을 문자열에 삽입 할 수 있다! this 일반함수는 호출 위치에 따라 this 정의하고 화살표함수는 자신이 선언된 함수 범위에서 this 정의한다. const user = { name: 'Kim', normal: function () { console.log(this.name) }, arrow: () => { console.log(this.name); } } user.normal() //Kim user.arrow() //undefined const user = { n..

함수 함수복습 단일 사용함수면 굳이 변수에 담지 말자. //함수 function sum(x,y) { return x+y } //const a = sum(1,2) console.log(sum(1,2)) return 을 만나면 함수가 종료하므로 return 이하의 코드는 실행되지 않는다. function sum(x,y) { return x+y //함수종료 console.log(x) } 매개변수를 지정하지 않아도 함수안에서 arguments라는 객체 사용 가능 function sum(x,y) { console.log(arguments) return } console.log(sum(1,2)) console.log(sum(4,8)) Arrow 함수(화살표 함수) const double = function (a) ..