맨동이

Type Script C#과 Java 같은 체계적이고 정제된 언어들에서 사용하는 강한 타입 시스템은 높은 가독성과 코드 품질 등을 제공할 수 있고 런타임이 아닌 컴파일 환경에서 에러가 발생해 치명적인 오류들을 더욱더 쉽게 잡아낼 수 있습니다. 반면 자바스크립트는 타입 시스템이 없는 동적 프로그래밍 언어로, 자바스크립트 변수는 문자열, 숫자, 불린 등 여러 타입의 값을 가질 수 있습니다. 이를 약한 타입 언어라고 표현할 수 있으며 비교적 유연하게 개발할 수 있는 환경을 제공하는 한편 런타임 환경에서 쉽게 에러가 발생할 수 있는 단점을 가집니다. 그리고 타입스크립트는 이러한 자바스크립트에 강한 타입 시스템을 적용해 대부분의 에러를 컴파일 환경에서 코드를 입력하는 동안 체크할 수 있습니다. npm 프로젝트로 ..

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) ..