[JavaScript] Chapter 29. Array map
값을 여러개 가지고 있는 배열에서 모든 값을 꺼내고자 할 때, 꺼내는 방법은 정말 다양하게 알려져 있다. 이러한 배열에서 값 꺼내는 방법 중 map( ) 을 다뤄보도록 하자. map 정의 Array.prototype.map ( callbackfn [ , thisArg ] ) 주로 주어진 배열의 값을 재정의 할 때, 사용하는 방법으로 ECMA에는 "주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 새로운 값을 정의하고 신규 배열을 만들어 반환한다"라고 정의되어있다. const numbers = [1, 2, 3, 4, 5]; const result = numbers.map(number => number * number); console.log(numbers); // [1, 2, 3, 4, ..
2023. 1. 10.
[JavaScript] Chapter 28. Array forEach
forEach는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용한다. 하지만 for문처럼 index와 조건식, increase를 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있다. [].forEach(callback, thisArg) const arr = [0,1,2,3,4,5,6,7,8,9,10]; arr.forEach(function(element){ console.log(element); // 0 1 2 3 4 5 6 7 8 9 10 }); // 혹은 arrow 함수 가능 arr.forEach(element => console.log(element)); arr 객체의 요소들이 callback 함수에 순서대로 호출되는 모습을 볼 수 있다. for문에 비해 좀 더 깔끔하고, 직관..
2023. 1. 10.
[JavaScript] Chapter 27. {...} [...] 문법 (비구조화 할당/구조분해 할당)
자바스크립트의 문법에 대한 글을 검색하면 대부분 let, const 혹은 화살 함수(arrow function)에 대한 이야기가 주를 이룬다. 이번 시간에는 흔히 알려지지 않았지만 유용한 비구조화 할당 문법을 본다. 정의 모질라 문서에 의하면 '비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)' 이다. 간단하게 정리하면 배열 [], 혹은 객체 {} 안의 값을 편하게 꺼내 쓸 수 있는 문법이다. 기본 문법(배열) 배열에서의 적용은 아래와 같다 [a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(a1); // 1 co..
2023. 1. 10.
[CSS] Chapter 12. Position(static, relative, absolute, fixed, sticky), z-index, overflow
position 요소를 어떻게 배치할지 결정하는 CSS 속성 우선 Normal Flow 개념을 이해하는 것이 중요함 Normal Flow란? 요소의 레이아웃을 전혀 제어하지 않았을 때, 브라우저에서 기본적으로 요소가 배치되는 흐름 Remind) 인라인 요소, 블록 레벨 요소 등 특성에 따라 기본적으로 요소가 배치되는 방식이 있음 즉 요소의 특성에 따라 Normal Flow가 정해져 있는 것 코드에 작성된 순서에 맞게 차곡차곡 HTML 요소가 표시된다. positon 속성을 통해 Normal Flow에서 벗어나, 개발자가 원하는 대로 제어하여 배치할 수 있음 position 속성은 top, bottom, left, right 속성과 함께 사용함 position의 종류에 따라 top, bottom, left..
2023. 1. 6.
