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)는 를 동적으로 만들고 이를 문서에 추가 // 해당 경로에 위치한 스크립트를 불러오고 '비동기적으로' 실행 // 실행은 함수가 ..
쿠키 : 빠르고 위험 설명 클라이언트 로컬에 저장되는 Key-Value쌍의 작은 데이터 파일 쿠키값은 암호화 되지 않기에 암호화 권장 (탈취, 변조 가능) 쿠키의 기한이 정해져 있지 않고 명시적으로 지우지 않는다면 반 영구적으로 쿠키가 남아있게 됨. 구성요소 쿠키의 이름(name) 쿠키의 값(value) 쿠키의 만료시간(Expires) 쿠키를 전송할 도메인 이름(Domain) 쿠키를 전송할 경로(Path) 보안 연결 여부(Secure) HttpOnly 여부(HttpOnly) 동작 방식 클라이언트가 서버에 로그인 요청 서버는 클라이언트의 로그인 요청의 유효성을 확인하고(아이디와 비밀번호 검사) 응답헤더에 set-cookie: user=chrisjune 를 추가하여 응답 클라이언트는 이후 서버에 요청할 때 ..
