devOhzl

선언과 표현 , 호이스팅 📌 함수 선언문 ( Declaration ) function hello() { } 📌 함수 표현식 ( Expression ) 변수의 이름을 지정하고, 할당 연산자를 통해 function 키워드로 시작하는 함수를 할당한다. const hello = function() { } 📌 호이스팅 ( Hoisting ) 함수의 선언부가 유효한 범위 안에서 제일 꼭대기로 끌어올려서 동작하는 현상 hello()// hello function hello() { console.log('hello') } ⭐ 호이스팅 현상은 함수 선언문에서만 발생하고 함수 표현에서는 발생하지 않는다. hello()// hello is not defined const hello = function() { console...

Nullish 병합 연산자 📌 AND / OR 연산자 1️⃣ && : 제일 먼저 만나는 false를 반환 , 모두가 true 이면 가장 마지막 데이터 반환 2️⃣ || : 제일 먼저 만나는 true를 반환 , 모두가 false 이면 가장 마지막 데이터 반환 console.log('a' && 0)// 0 console.log('a' && 'b' && 'c')// c console.log(0 || 7)// 7 console.log(0 || 8 || 9 )// 8 📌 Nullish 연산자 &&, || 연산자와 동일하게 왼쪽에서 오른쪽으로 해석하지만, null ,undefined 를 제외한 먼저 만나는 데이터를 반환한다. 모두 null 또는 undefined면 가장 마지막 데이터 반환 console.log(0 ..

IntersectionObserver 어떤 요소가 화면의 영역과 교차하는지 관찰한다. ( 어떤 요소가 화면으로 들어오는지, 나가는지 확인 ) Intersection : 교차 / Observer : 관찰 const io = new IntersectionObserver(function (entries){ entries.forEach(function (entry) { if(!entry.isIntersecting){ return } console.log(entry.isIntersecting, entry.target) }) }) const h1Els = document.querySelectorAll('h1'); h1Els.forEach(function (el) { io.observe(el); }) target :..

표기법 📌 dash-case (kebab-case) [ HTML, CSS ] 단어와 단어 사이에 대쉬 '-' 를 사용한다. ex) the-quick-brown-fox 📌 snake_case [ HTML, CSS ] 단어와 단어 사이에 언더바 '_' 를 사용한다. ex) the_quick_brown_fox 📌 camelCase [ js ] 제일 앞의 첫글자는 소문자이며 뒤에 첫글자부터는 대문자로 시작한다. ex) theQuickBrownFox 📌 PascalCAse [ js ] 모든 첫글자는 대문자로 시작한다. ex) TheQuickBrownFox 📌 Zero-based Numbering 0 기반 번호 매기기 👉 특수한 경우를 제외하고 0부터 숫자를 시작합니다. 주석 // 한 줄 /* 여러 줄 */ /**..

배열 안에 객체가 여러 개 들어있는 형태를 자주 사용한다. 그 배열 안의 객체의 특정 키를 선택하여 배열 안의 객체를 정렬하는 방법이다. 📌 정렬하고자 하는 배열 const arr = [ { key: 'out1', value: 0 }, { key: 'out3', value: 1 }, { key: 'out2', value: 4 } ]; 'key' 속성의 문자열을 비교하여 오름차순으로 정렬하고자 한다. 📌 sort 함수 사용 sort() 함수는 기존 배열을 정렬하지 않고, 새로운 배열을 반환한다. a,b 는 비교할 첫번째 변수, 두번째 변수를 나타낸다. const arr = [ { key: 'out1', value: 0 }, { key: 'out3', value: 1 }, { key: 'out2', valu..

💬 개요 현재 진행하는 프로젝트는 main / cc / dev 로 총 3개의 서비스로 구성중인데 main 프로젝트 안에 iframe 으로 cc/dev에서 만든 컴포넌트를 뿌리는 방법이다. 이 때 dev 컴포넌트 안에서 main의 url을 변경했어야 했는데, window.location.href 를 사용하니까 dev 안에서 url 변경이 이루어졌다. ( = iframe의 url 이 변경됨 ) 📌 해결 : window.parent.location.href 사용 main 프로젝트의 (=브라우저) url을 변경할 수 있었다. 새로고침 효과가 적용되었다.

💬 개요보통 나는 객체나 기본 자료형을 복사할 때 나는 = 키워드를 사용하였다.하지만 객체는 = 키워드를 사용했더니 기존의 변수도 같이 수정됐다. 📌 자바스크립트의 원시값 vs 참조값자바스크립트에서의 값은 원시값과 참조값 두 가지 데이터의 타입이 존재한다. - 원시값 기본 자료형(단순한 데이터)를 의미 ( Number,String,Boolean, Null, undefined 등)변수에 원시값을 저장하면, 변수의 메모리 공간에 실제 데이터 값이 저장된다. 할당된 변수를 조작하려고 하면 저장된 실제 값이 조작된다.const a = 1;let b = a;b = 2console.log(a); //1console.log(b); //2원시값은 값을 복사 할 때 복사된 값을 다른 메모리에 할당 하기 때문에 원래의..