전체 글
-
[Java Script] ?. 와 ?? 연산자 알아보기Java Script 2023. 3. 15. 14:16
| ?. (Optional Chaining) ?. 는 자바스크립트 object자료형에서 자료를 꺼내고 싶을 때 마침표를 찍어서 꺼내듯이 ?.도 비슷한 기능을 합니다. let data = { name: "Lee", age: 25 } console.log(data.name); // "Lee" 출력 console.log(data?.name); // "Lee" 출력 하지만 완전히 같은 기능을 하는 건 아니고, ?. 는 왼쪽에 있는 데이터가 null이거나 undefined인 경우 undefined를 남겨줍니다. 보통 중첩돼 있는 object자료에서 에러 없이 데이터를 꺼낼 때 사용합니다. 보통 데이터가 많이 중첩돼 있으면 중첩돼 있는 데이터를 잘못 꺼내는 경우가 생기는데 이럴 때 undefined를 남겨줘서 에러..
-
[Java Script] Spread Operator, Rest 파라미터 알아보기Java Script 2023. 3. 13. 16:47
| 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..
-
[CSS] Pseudo-class 알아보기HTML & CSS 2023. 3. 10. 19:37
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...
-
[Java Script] shift(), unshift(), pop(), push() 알아보기Java Script 2023. 3. 9. 16:04
자바스크립트에서 shift(), unshift(), pop(), push() 은 배열의 값을 빼내거나 집어넣어 주는 메서드들입니다. | shift() shift() 메서드는 배열의 첫 번째 요소를 제거해 주고 그 값을 반환해 주는 메서드입니다. let arr = [1, 2, 3, 4, 5]; let firstElement = arr.shift(); console.log(arr); // [2, 3, 4, 5] 출력 console.log(firstElement); // 1출력 | unshift() unshift() 메서드는 배열의 앞부분부터 차례로 값을 추가해 주는 메서드입니다. let arr = [2, 3, 4, 5]; arr.unshift(1); console.log(arr); // [1, 2, 3, 4..
-
[Java Script] 유사 배열 객체 알아보기Java Script 2023. 3. 8. 18:24
| 유사 배열 객체(Array-like Objects) 자바스크립트에서 유사 배열 객체는 실제로 배열은 아니지만 index로 값에 접근할 수 있고, length속성을 가지고 있어 배열과 유사한 객체입니다. let arrayLikeObj = {0: 'A', 1: 'B', 2: 'C', length: 3}; console.log(arrayLikeObj[0]); // 'A' console.log(arrayLikeObj.length); // 3 console.log(Array.isArray(arrayLikeObj)); // false for (let i = 0; i < arrayLikeObj.length; i++) { console.log(arrayLikeObj[i]); } // "A" // "B" // "C"..
-
[Java Script] Array.from()알아보기Java Script 2023. 3. 7. 16:28
Array.from()은 자바스크립트에서 이터러블(iterable)한 객체나 문자열 같은 유사 배열 객체를 배열로 만들어주는 기능을 하는 메서드입니다. | 구조 매개변수로는 배열로 변환하고 싶은 유사 배열 객체와 배열의 모든 요소에 대해 적용하고 싶은 맵핑함수를 넣을 수 있습니다. let arr = Array.from(유사 배열 객체, 맵핑함수); | 예시 1. 원하는 배열 생성 let arr = Array.from({length: 5}, (v ,i)=> i ); // [0, 1, 2, 3, 4] 생성 let arr1 = Array.from({length: 5}, (v ,i)=> 0 ); // [0, 0, 0, 0, 0] 생성 console.log(arr); // [0, 1, 2, 3, 4] 출력 con..
-
[CSS] em, rem 알아보기HTML & CSS 2023. 3. 6. 17:24
rem, em 은 요소의 크기를 결정해 주는 단위들입니다. | rem rem 은 최상위 요소의 폰트 크기를 기준으로 요소의 폰트크기를 정해줍니다. html { font-size: 16px; } div { font-size: 1rem; /* 16px */ } div { font-size: 2rem; /* 32px */ } | em em은 부모요소의 폰트 크기를 기준으로 요소의 폰트크기를 정해줍니다. div { font-size: 30px; } div span { font-size: 1em; /* 30px */ } div span { font-size: 2em; /* 60px */ }
-
[CSS] overflow 알아보기HTML & CSS 2023. 2. 28. 17:08
overflow는 요소의 내용물이 해당요소를 감싸고 있는 컨테이너의 크기를 넘어가면 어떤 식으로 처리를 할지 정해줄 수 있습니다. | 속성값 1. visible 이 속성은 기본값으로 컨테이너를 넘어가는 내용물을 컨테이너 외부에 그대로 표시돼서 다른 콘텐츠를 가릴 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 2. hidden 이 속성은 컨테이너를 넘아가는 내용물을 자르고 안 보이게 숨겨줍니다. HTML 삽입 미리보기할 수 없는 소스 3. scroll 이 속성은 스크롤 막대가 컨테이너에 추가돼서 내용물을 스크롤하면서 볼 수 있습니다. 하지만 내용물이 컨테이너를 넘지 않아도 항상 스크롤이 표시됩니다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 4. auto 이 속성..