4전 4전

자바스크립트 자료형에는 크게 2가지 타입이 있는데 그게 원시타입과 참조타입입니다. | 원시타입(Primitive Type) 1. 종류 원시타입의 종류는 다음과 같습니다. 숫자 문자열 불리언 null undefined 심벌(Symbol) 2. 특성 원시타입의 데이터를 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장이 됩니다. 그래서 원시값이 같은 변수를 다른 변수에 할당하면 원본 원시값이 복사돼서 전달됩니다. let a = 10; let b = a; // a의 원시값 10 복사 a = 11; console.log(a); // 11 출력 console.log(b); // 10 출력 | 참조타입(Reference Type) 1. 종류 참조타입의 종류는 대표적으로 다음과 같습니다. 배열(Array..

자바스크립트에서 slice() 메서드는 기존 배열에 일부분을 추출하고 추출된 요소와 함께 새로운 배열을 반환해 주는 메서드입니다. | 사용 1. 문법 slice() 메서드는 매개변수로 2가지를 집어넣을 수 있습니다. array.slice(start, end) 여기서 start는 내가 추출하고 싶은 부분의 시작 인덱스이고 end는 종료 인덱스입니다. slice()는 start인덱스에서 end인덱스 전까지 부분이 추출되고, 만약 end 매개변수가 주어지지 않으면 시작 인덱스부터 배열 끝까지 요소가 추출됩니다. 2. 사용 let numbers = [1, 2, 3, 4, 5]; let numbers1 = numbers.slice(1, 3); console.log(numbers1); // [2, 3] 출력 이런 ..

css에서 backdrop-filter를 사용하면 요소 뒤에 있는 영역에 시각적 필터를 적용할 수 있습니다. | 사용 1. 사용법 backdrop-filter에 blur() 함수를 사용하면 요소 뒤의 배경에 반투명한 배경을 적용해 줍니다. .blur { backdrop-filter:blur(10px); } 이런 식으로 사용하면 되고 값에 % 나 px 등을 사용하여 투명 강도를 설정해 줄 수 있습니다. 2. 스타일 적용 blur .back-ground { background-image: url("https://picsum.photos/300/300"); width: 300px; height: 300px; display:flex; justify-content: center; align-items: cente..

css에서 사용자 변수를 사용하면 반복적으로 사용되는 값을 변수에 저장하고 이를 여러 곳에서 참조할 수 있습니다. | 사용 1. 변수 선언 CSS에서 변수를 선언할 때는 '--'를 접두사로 사용해서 변수 이름을 정의하면 됩니다. :root { --main-color: red; } 보통 변수를 선언할 때 :root 선택자를 사용합니다. → :root 선택자는 HTML문서에서 최상위 요소를 나타냄 위에 코드에서는 :root 선택자를 사용해서 문서의 루트요소에 '--main-color'라는 변수를 선언하고 변수의 초기값을 빨간색인 red로 지정해 주었습니다. 2. 변수 사용 선언한 css변수를 사용하고 싶으면 var() 함수를 사용해 변수 이름을 참조하면 됩니다. div { background-color: v..

자바스크립트에서 생성자 함수를 사용하면 비슷하게 생긴 객체를 쉽게 만들어줄 수 있습니다. | 사용 1. 생성 생성자 함수는 일반 함수를 만드는 것 같이 만들면 되는데 this키워드를 사용하여 새로 생성할 객체의 값을 디자인하면 됩니다. function Person(name, age){ this.name = name; this.age = age; this.sayHi = function(){ console.log(`저의 이름은 ${name} 입니다`) } } 또한 생성자 함수의 이름의 첫 시작은 보통 대문자로 합니다. 2. 객체 만들기 작성한 생성자 함수로 객체를 만들려면 new키워드를 사용하면 됩니다. let 나 = new Person('Lee', '25'); let 너 = new Person('Kim',..

| ?. (Optional Chaining) ?. 는 자바스크립트 object자료형에서 자료를 꺼내고 싶을 때 마침표를 찍어서 꺼내듯이 ?.도 비슷한 기능을 합니다. let data = { name: "Lee", age: 25 } console.log(data.name); // "Lee" 출력 console.log(data?.name); // "Lee" 출력 하지만 완전히 같은 기능을 하는 건 아니고, ?. 는 왼쪽에 있는 데이터가 null이거나 undefined인 경우 undefined를 남겨줍니다. 보통 중첩돼 있는 object자료에서 에러 없이 데이터를 꺼낼 때 사용합니다. 보통 데이터가 많이 중첩돼 있으면 중첩돼 있는 데이터를 잘못 꺼내는 경우가 생기는데 이럴 때 undefined를 남겨줘서 에러..

| Spread Operator 자바스크립트에서 Spread Operator는 배열이나 객체의 요소를 또 다른 배열이나 객체로 분산하거나 복사할 수 있는 연산자입니다. 점 3개(...)를연달아 쓰면 이게 Spread Operator입니다. 활용 방법은 다음과 같습니다. 1. 배열 복사 spread operator를 사용해서 배열을 복사할 수 있습니다. let arr = [1, 2, 3, 4, 5]; let copy = [...arr] console.log(copy); // [1, 2, 3, 4, 5]; 2. 배열 합치기 spread operator를 사용해서 배열들을 합칠 수 있습니다. let arr1 = [1, 2, 3]; let arr2 = [4, 5]; let arr3 = [...arr1, ...a..

Pseudo-class를 사용하면 상태에 따라서 스타일을 줄 수 있습니다. | 사용 .box { width:200px; height:200px; background-color:#6799FF; } .box:hover { background-color:#A566FF; /* 마우스를 요소에 올리면 동작함 */ } .box:active { background-color : #BCE55C; /* 마우스로 요소를 클릭하면 동작함 */ } HTML 삽입 미리보기할 수 없는 소스 이런 식으로 동작합니다. | 종류 1. :hover - 마우스 커서가 해당 요소위에 올라가 있으면 동작 2. :active - 마우스로 요소를 클릭하고 있으면 동작 3. :visited - 해당 링크에 연결된 페이지를 방문한 상태면 동작 4...