I'm a Fig, Not a Pig

innerHTML, innerText, textContent 이 셋의 차이점 찾아보다가 innerHTML의 위험성이라는 글을 보게 되었고.. innerHTML만 써왔던 사람으로서 insertAdjacentHTML의 필요성을 몰랐기 때문에 정리 해보려 한다. 따라서 이번 포스팅에서는 innerHTML의 위험성과 더불어 HTML 요소를 추가할 수 있는 또 다른 방법인 insertAdjacentHTML메서드에 대해 다룰 것이다.   1. innerHTMLinnerHTML 프로퍼티는 HTML에 새로운 HTML 요소를 추가하거나 특정 HTML 요소 내부에 작성된 내용(HTML 요소를 포함)을 가져오는 데 사용한다.  구문element.innerHTML( text )  예시아래는 간단한 HTML 마크업이다. ca..

JavaScript에서 값을 비교하기 위해 == 연산자와 === 연산자를 사용합니다.두 연산자는 값이 일치하면 true를 반환하며, 값이 일치하지 않으면 false를 반환합니다. 1. == 연산자 == 연산자는 두 피연산자의 값의 타입이 다를 경우 자동으로 일부 피연산자의 타입을 변환 후 값을 비교합니다. 따라서 타입을 비교하지 않으므로 === 연산자에 비해 느슨하다고 할 수 있습니다. 예제) 10 == 10 // true 10 == '10' // true true == 1 // true true == '1' // true true == 'true' // false null == undefined // true 2. === 연산자 == 연산자는 값을 비교하기 전에 타입이 다를 경우 타입을 변환 후 값을 ..

기초 2강 1. 태그에 class를 주고 싶으면? class 대신 className 작성하기 2. 리액트가 HTML 코딩보다 편리한 이유 1) 데이터 바인딩이 쉬움(데이터 바인딩이 쉬운 React, Vue, Angular) { posts } // {변수명} - 렌더링 시켜주면 됨 - scr, id, href 등의 속성에서도 {변수명, 함수} 등 넣어주면 됨 3. JSX 에서 style 속성 집어넣을 때 style = {object 자료형으로 만든 스타일} 개발 Blog // camelCase로 작성하기 기초 3강 - 데이터 보관법: 1. 변수에 넣거나 2. state에 넣거나 - ES6 destructuring - state: 1) 변수 대신 쓰는 데이터 저장공간 2) useState()를 이용해 만들어..

.join() join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다. 구문 arr.join([separator]) 예제 let a = ['바람', '비', '불']; let mylet1 = a.join(); // mylet1에 '바람,비,불'을 대입 let mylet2 = a.join(', '); // mylet2에 '바람, 비, 불'을 대입 let mylet3 = a.join(' + '); // mylet3에 '바람 + 비 + 불'을 대입 let mylet4 = a.join(''); // mylet4에 '바람비불'을 대입 .slice() slice() 함수는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용한다. 첫번째 인자로 시작 인덱스(index), 두..

.entries() entries() 메서드는 배열의 각 인덱스에 대한 키/값 쌍을 가지는 새로운 Array Iterator 객체를 반환합니다. -MDN 자바스크립트의 타입 중 객체는 배열처럼 하나가 아닌 여러 개의 값을 키, 밸류 형태로 가지고 있다. 만약 객체가 가진 모든 키와 값을 확인하길 원하는 경우라면 entries()를 사용하면 편리하다. entries()는 객체가 가지고 있는 모든 프로퍼티를 키와 값 쌍으로 배열 형태로 반환하여 주기 때문에 어떤 프로퍼티와 값으로 이루어졌는지 한 눈에 확인할 수 있다. 구문 Object.entries() // 모든 프로퍼티와 값을 배열로 반환함 예제 let a = ['a', 'b', 'c']; let iterator = a.entries(); for (let..

▷ 자바스크립트 타입 변환 (X to string) 숫자나 불리언을 문자열로 형변환 하는 방법은 3가지 정도입니다. 1. (숫자 or 불리언).toString() 2. String(숫자 or 불리언) 3. "" + (숫자 or 불리언) 1. 숫자를 문자열로 변환 (number to string) 1. (숫자).toString() : Object.prototype.toString 메서드를 활용하는 방법 (111).toString() // "111" (NaN).toString() // "NaN" (Infinity).toString() // "Infinity" 2. String(숫자) : String 생성자 함수를 new 없이 활용하는 방법 String(111) // "111" String(NaN) // "N..

목차 1. 배열(array)에서의 구조 분해 할당 2. 객체(object)에서의 구조 분해 할당 구조 분해 할당 문법은 배열 혹은 객체에서 각각 값(value)이나 프로퍼티(property) 를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해준다. 1. 배열(array)에서의 구조 분해 할당 구조 분해 할당은 할당받을 변수를 왼쪽에, 분해할 대상을 오른쪽에 해서 대입하는 형식으로 작성하면 된다. const [i, ,j] = [2, 4, [5, 6]]; console.log(i,j); // 2 [5, 6] 아래와 같이 미리 저장해 둔 배열로부터 구조 분해 할당하는 형태도 가능다. const nested = [2, 4, [5, 6]]; const [i, ,j] = nested; console.log(i,j..

목차 1. 단축평가 2. 옵셔널 체이닝 연산자 3.nullish 병합 연산자 '??' 1. 단축평가 단축 평가란 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것이다. 단축 평가의 논리곱과 논리합 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다. 1. 논리곱(&&) 연산자 논리곱(&&) 연산자는 두개의 피연산자가 모두 true 로 평가될 때 true 를 반환한다. 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다. ( false가 우선 나와버리면 AND 뒤에 나오는 연산은 생략 ) 2. 논리합(||) 연산자 논리합(||) 연산자는 두개의 피연산자 중 하나만 true 로 평가되어도 true 를 반환한다. 논리합 연산자 또한 좌항에서 우항으..

Set - Set 객체는중복을 허용하지 않는 값들의 집합입니다. - Set 객체의 특징 동일한 값을 중복하여 포함할 수 없음 요소 순서에 의미가 없음 인덱스로 요소에 접근할 수 없음 * 여러개의 값들을 나열할 수 있는 것은 Array, 중복을 제거한 집합은 Set 임. 또한 조회에 있어서 Set이 Array에 비해 훨씬 빠름. 1.set객체의 생성 - set객체는 set 생성자 함수로 생성합니다. - 인수를 전달하지 않으면 빈 set객체가 생성됩니다. - set 생성자 함수는 이터러블을 인수로 받아 set객체를 생성합니다. - 이때 이터러블의 중복된 값은 아래의 예시처럼 set객체에 요소로 저장되지 않습니다. const set = new Set(); console.log(set); // Set(0) {}..

목차 1. 배열에서의 Spread Operator 2. 객체에서의 Spread Operator 3. Destructuring 4. 함수에서의 Spread Operator 스프레드 연산자는 ES6에서 추가된 문법이다. 점 세개가 연달아 있는 '...'로 표시되며 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용한다. 1. 배열에서의 스프레드 연산자 - 배열병합 ES6의 Spread 연산자를 사용하면 배열병합이 가능하다. let arr1 = [1,2,3]; let arr2 = [4,5,6]; let arr = [...arr1, ...arr2]; console.log(arr); // [ 1, 2, 3, 4, 5, 6 ] - 배열복사 ES6의 Spread 연산자를 사용하면 다음과 같이 새..