GABOJOK 개린D

spread operator ... 이렇게 쓰는데, 안에있는거 펼쳐서 늘어놓아 주는 친구다. spread syntax. 즉 전개문법 이라고도 함. 배열, 혹은 이터러블 객체(for...of 반복문 적용이 가능한)에 사용 가능하다. for..of 와 같은 방식으로 내부에서 iterator(반복자)를 사용해 요소를 수집한다. 문자열에 spread operator 사용하는 경우 array 처럼 인덱싱을 해서 요소 하나하나를 가져올 수 있다. 배열에 spread operator 사용하는 경우. 대괄호를 제거하고 요소들을 다 나열해준다. 배열을 합치거나 깊은 복사를 할 수 있다. 배열 합치기 let a = [1,2,3]; let b = [4,5]; let c = [...a, ...b] // (5) [1, 2, 3..

템플릿 리터럴 문자열을 백틱 `` 으로 표현하는 거. (backtick = backquote) 같은말. ES6에서 바뀌면서 생김. 기능 : 1. 엔터키를 사용해도 문자열이 깨지지 않는다. 기능 : 2. 중간에 변수 넣기가 좋다. ${변수명} 백틱 안에서만 가능. + 기호를 사용할 필요 없음 기능 : 3. append 템플릿 하거나 할때 유용. 기능 : 4. tagged literal. 함수를 실행시킬 때 소괄호가 아니라 문자를 이용해서 함수를 실행시킬 수 있다. 함수(안녕) 이걸 함수`안녕` 이렇게. 4번 기능은 좀 생소하니 자세히 살펴보자. 4. tagged literal 단어의 순서를 변경하거나, 단어를 제거하거나, ${변수} 위치를 옮기거나, 중괄호를 기준으로 `문자`를 해체 분석 할 수 있다. v..

전역변수. 전역에서 쓰이는 변수라는 말. let name = '홍길동' ; var age = 30; 보통 이런식으로 많이 사용한다. 그런데 이런 방법도 있다. window.name = '홍길동'; window.age = 30; window.으로 선언하는 방법이 더 권장된다. 이유는 변수가 정말 많아졌을때 한눈에 이건 전역변수구나 라고 알 수 있기 때문이다. 추가로 일반적인 변수 선언 방법으로 변수를 만들때에 var 키워드를 쓰면 해당 변수가 window 에도 보관이 된다. let 키워드를 쓰면 window에 해당 변수 보관되지 않음. 추가로 var는 전역변수 이기 때문에 for 반복문 안에서 변수 설정을 var 키워드로 하게 되면 이런 문제가 생긴다. for(var i = 1; i

이게 뭐냐면, 변수의 선언을 변수 범위 맨 위로 끌고오는 현상이다. (함수 또한 마찬가지.) 변수를 만나게 되면, 선언한 부분만 떼어내 강제로 맨 위로 끌어올린다. function 함수(){ console.log('hello') var 이름 = 'kim'; } 이런 코드가 있을때, 아래와 같이 동작한다. function 함수(){ var 이름; console.log('hello') 이름 = 'kim'; } 그래서 이런 현상이 나타난다. function 함수(){ console.log(이름); // 결과값은 undefined 출력. var 이름 = 'kim'; console.log(이름); // 'kim' 출력. } 아직 변수 선언을 안했는데 먼저 출력한다고 인식하기 때문 인가 싶을 수 있지만, 그런 경우..

//만약 object의 값을 변경 하려면 const 오브젝트이름 = { name: 'lee' }; 오브젝트이름.name = 'park' console.log(오브젝트이름) //만약 object의 값을 변경 불가능 하게 하려면 Object.freeze(오브젝트이름); 그냥 하면 에러는 안나고, 엄격모드 실행하면 에러남. (use stritc 사용하면) 자바스크립트 기본함수. 그러나 오브젝트 안의 오브젝트 까지 freeze 해주지는 않는다.

화살표 함수는 ES6 문법 중 하나이다. 일반 함수와 달리 내부에 this 값을 재정의 하지 않고, 밖의 this 값을 물려받는다. 일반 함수와 용도가 다르다는 점을 명심할것.

this 는 상황에 따라서 의미가 바뀐다. 1. 그냥 쓰거나 일반 함수 안에서 쓴다면 window 라는 의미로 쓰인다. 그런데 만약 엄격모드, 즉 use strict 모드에서 일반함수 내에 this를 사용하면 this는 undefined 이 된다. --- window 란? --- window 란 자바스크립트 기본 함수들을 가지고 있는 object 이다. 자바스크립트 에서는 { window} 라는 기본 오브젝트가 있고, 그 안에 함수나 변수를 보관한다. 이거를 global object 라고 한다. (전역변수 보관소) 또한, window는 자바스크립트 기본 함수모음. HTML DOM 이라는 것도 맞는말이다. 그래서 함수() 이렇게 호출하는 것과, window.함수() 이렇게 호출하는 것이 같다. 2. 오브젝..

프로토콜://도메인/경로 ☑️ 프로토콜(protocol): 웹 브라우저와 웹 서버 간의 통신 방식을 지정합니다. 가장 일반적으로 사용되는 프로토콜은 "http://"와 "https://"입니다. ☑️ 도메인(domain): 인터넷 상에서 고유한 식별자로 사용되는 웹 사이트의 주소입니다. 도메인은 일반적으로 사이트의 이름과 최상위 도메인(Top-Level Domain, 예: .com, .org)으로 구성됩니다. ☑️ 경로(path): 웹 사이트 내에서 특정 페이지나 파일의 위치를 지정합니다. 경로는 슬래시("/")로 구분된 디렉토리 경로와 파일명으로 구성됩니다.

데이터 베이스란? 데이터를 저장하고, 관리하고, 꺼내사용할 수 있는 데이터의 모음. 장점 _ 정보를 빠르게 찾고, 업데이트 할 수 있다. _ 많은 양의 정보를 효율적으로 관리할 수 있다. 관계형(SQL)과 비관계형(NoSQL)이 있고, 비관계형은 좀더 자유롭다. 파이어스토어 (Firestore) 란? 구글의 클라우드 기반 NoSQL 데이터베이스. 데이터저장소. 컬렉션(Collection): 서랍장 그룹. 특정한 주제 또는 유형으로 문서들이 그룹화되어 있다. 문서(Document): 서랍 안에 들어있는 작은 종이. 하나의 종이는 여러 개의 필드(Field)로 구성. 필드(Field): 종이 안에 있는 데이터의 작은 부분. key, value 형태. 파이어스토어 데이터베이스 시작해보기 빌드에서 Firesto..

dragstar, dragover, drop 이벤트 리스너 사용해서 하면 되는데, 여기서 제일 중요한건, 내가 누른 그것에 해당하는 object를 가져올 수 있는가 이다. 제일 간편하게 할 수 있는 방법은 내가 누른 그것에 상품 id값을 부여해 주는것. 그러면 형제요소 부모요소 이런거 찾을 필요 없음 어떻게 하냐면 data- 이름 기능을 사용해서 .dataset.이름 으로 정보 불러오는 거다. 그래서 불러온 그 아이디 값을 몰래 저장할 수 있다. 바로 .dataTransfer.setData('이름', 저장하려는 데이터) 이렇게. 근데 드래그 앤 드롭 이벤트 에서 이거 사용하려면 e.originalEvent 뒤에 써야함 ㅋㅋㅋ 그래야 원본 객체 가져와서 정보 활용함. 무튼 이렇게 셋팅 한 뒤에 넣을 데이터..