map() 설명 💡 콜백 함수의 리턴값으로 이뤄진 새로운 배열을 생성하는 함수 사용법 array.map(callback[, thisArg]) // arr : 원본 배열 // callback (필수) : 원본 배열의 각 요소에 대해 실행할 함수이며 요소, 인덱스, 배열 전체를 매개변수로 받음 // thisArg (선택) : 콜백 함수 내에서 사용할 this 값, 콜백 함수의 this 값 지정 가능 예시 const arr = [1, 2, 3]; const newArr = arr.map((num) => num * 2); console.log(newArr); // map 리턴값 : [2, 4, 6] console.log(arr); // 원본 배열 : [1, 2, 3] flat() 설명 💡 중첩 배열 구조를 평탄..
HTML 이벤트 흐름 FORM DIV P 위 HTML의 경우 onclick 이벤트는 p → div → form 태그 순으로 실행 이벤트 전파(Event Propagation) : 계층적으로 이루어진 엘리먼트들은 계층적 구조 특징 때문에 HTML 요소에 이벤트가 발생할 경우 일어나는 연쇄적 이벤트 흐름 버블링(Bubbling) : 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파 (기본값) 캡쳐링(Capturing) : 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달 이벤트 전파 흐름 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계 타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계 버블링 단계 : 이벤트가 상위 요소로 전파되는 단계 단계별 코드 분석 (2번째 p ..
super 자신이 상속받은 부모를 가리키는 참조 변수 자식과 부모사이의 구분에 사용 class Object{ int a; } class A extends Object{ int a; } public static void main(String args[]){ A ins = new A(); ins.a=2 // 여기서 a는 A의 a. 즉, 자식의 변수이다 // 만약 자식에게 a라는 변수가 없었다면 부모의 a를 가리켰을 것이다. // 여기서 자식 a가 아닌 부모의 a로 접근하고 싶다면? ins.super.a = 20; // 이렇게 super라는 참조 변수를 사용해서 부모의 a에 접근할 수 있다 } // 위와 같은 이유로 자바에서는 다중 상속이 불가능하다 (상속의 모호성) //예제2 class Parent { in..
( … ) 📎 배열 [], 혹은 객체 {} 안의 값을 편하게 꺼내 쓸 수 있는 문법 전개 연산자 비구조화 할당(destructuring assignment) 구문 JavaScript 표현식 배열에서의 적용 [a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(a1); // 1 console.log(a2); // 2 console.log(rest_a); // [3, 4, 5, 6, 7, 8, 9] 좌항이 호출될 변수명 집합, 우항이 할당할 값 좌항의 각 요소에는 같은 index를 가지는 배열값이 할당 전개 연산자( ... )를 사용하여 좌항에서 명시적으로 할당되지 않은 나머지 배열 값들을 사용 가능 ⚠️ 전개 연산자 이후에 변수를 입력하거나, 좌 ..
식별자 객체를 식별하는 역할 $와 _ 는 기호가 아니고 알파벳 문자처럼 취급 둘 다 강요가 아닌 일종의 관례 Dollar Sign($) 설명 document.getElementById() 함수의 바로가기 document.getElementById() : HTML 요소에서 id를 알아내는 함수 템플릿 스트링 전역객체(public) 표시 사용법 document.getElementById() 함수의 바로가기 별도의 $() 함수 정의가 필요 function $(id) { return document.getElementById(id); } const element = $(myDiv); // == document.getElementById('myDiv') Hello World!! 템플릿 스트링 ${} 형태로 사용 ..
동기/비동기 & 블로킹/논블록킹 동기/비동기 : 요청한 작업에 대해 완료 여부를 신경 써서 작업을 순차적으로 수행할지 아닌지에 대한 관점 블로킹/논블록킹 : 현재 작업이 block(차단, 대기) 되느냐 아니냐에 따라 다른 작업을 수행할 수 있는지에 대한 관점 자바스크립트에서 비동기 함수는 비동기 + 논블로킹 함수이다. 동기(Synchronous) / 비동기(Asynchronous) 동기 : 요청한 작업의 완료 여부를 따져 순차대로 처리하는 것 비동기 : 요청한 작업에 대해 완료 여부를 따지지 않고 자신의 다음 작업을 그대로 수행하는 것 성능적 측면 비동기에선 기다리지 않고 다른 작업을 처리하면서 동시에 처리하여 멀티 작업을 진행할 수 있기에 성능이 향상됨 작업 순서 처리 측면 작업을 요청했을 때 응답에서..
비동기 처리 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트 특성 콜백 나중에 호출할 함수를 의미 비동기 동작 스크립트 함수 비동기 동작 처리 예시 콜백함수 추가 전 function loadScript(src) { // 태그를 만들고 페이지에 태그를 추가합니다. // 태그가 페이지에 추가되면 src에 있는 스크립트를 로딩하고 실행합니다. let script = document.createElement('script'); script.src = src; document.head.append(script); } // loadScript(src)는 를 동적으로 만들고 이를 문서에 추가 // 해당 경로에 위치한 스크립트를 불러오고 '비동기적으로' 실행 // 실행은 함수가 ..
Sass (Synthetically Awesome StyleSheets) CSS 전처리기 변수, 상속, 혼합, 중첩 등의 다양한 기능 제공 다만 전처리기로 작성한 코드는 CSS로 컴파일을 거친 뒤 실행 가능 CSS 전처리기(preprocessor) : 자신만의 특별한 문법을 통해 CSS를 생성하는 프로그램 SCSS == Sass SCSS는 Sass의 모든 기능을 지원하는 Superset Sass와 SCSS의 차이점 Sass : 중괄호가 아닌 들여 쓰기를 사용 (like Python) SCSS : CSS처럼 {}와 ;을 사용 (like Javascript) 1. Data Types 다양한 데이터 타입을 정의하고 있기 때문에 이를 변수처럼 활용 가능 Numbers 숫자 1, .82, 20px, 2em… St..
