본문 바로가기

Frontend/Javascript12

[JS] 이벤트 위임 - 1억개의 자녀요소를 한 번에 통제하기 event delegation CSS에서 부모의 속성이 자녀에게 상속되는 것처럼, 부모의 요소에 특정 이벤트 핸들러를 할당했다면 그것이 자녀에도 그대로 적용되는 것을 이벤트 위임(event delegation)이라고 합니다. event delegation의 활용 API를 통해 사용자의 친구 정보를 불러 온다고 가정해봅시다. 등록된 친구가 5명이라면 데이터 배열안에 다섯 사람 분량의 정보가 담겨 있을 것이고, 100명이라면 100명의 정보가 담겨있을 것입니다. 받아온 정보를 가지고 이름 정보의 태그들을 태그안에 넣어주는 함수를 만들었습니다. 코드를 확인해볼까요? See the Pen Untitled by JO SEOYOUNG (@seoyoung-dev) on CodePen. 사용자에 따라 1명의 친구 등록.. 2022. 3. 6.
[JS] 이벤트 루프 ▷ 동기, 비동기 처리 자바스크립트는 단 하나의 실행 컨텍스트 스택을 가지고 싱글 스레드 방식으로 동작하는데, 이는 한 번에 한가지 일(task)를 처리할 수 있다는 의미이다. 따라서 블로킹(blocking), 즉 특정 태스크를 실행하는 동안 작업이 중단되는 현상이 나타난다. // synchronous function rest(delay) { const delayUntil = Date.now() + delay; while(Date.now() < delayUntil); console.log('finished'); } rest(3*1000) 위 코드를 실행하게 되면 3초 후에 'finished' 라는 메시지를 확인할 수 있다. 이처럼 태스크를 순서대로 하나씩 처리하는 것을 동기(syncronous)처리라고 .. 2022. 1. 27.
[JS] find, findIndex, indexOf, includes 비교 ▷ find( ) : 주어진 판별 함수를 만족하는 첫번째 요소의 값을 반환, 없다면 undefined를 반환 const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10); // 12 ▷ findIndex( ) : 주어진 판별 함수를 만족하는 첫번째 요소의 인덱스을 반환, 없다면 -1을 반환 const array1 = [5, 12, 8, 130, 44]; const isLargeNumber = (element) => element > 13; console.log(array1.findIndex(isLargeNumber)); // 3 ▷ indexOf( ) : 문자열 혹은 배열에서 지정된 요소를 찾을 수 있는 첫번째.. 2021. 12. 27.
[JS] JSON(Javascript Object Notation) ▷ JSON - 데이터 전송을 목적으로 사용 - 문자열 상태로 존재 - parsing: 문자열을 네이티브 객체로 변환 stringfication: 객체를 문자열로 전환(네트워크를 통해 전달 목적) - JSON은 순수한 데이터 포멧으로 구성됨 - 값을 표현할 때 문자열, 숫자, 불 자료형만 사용할 수 있음(함수 등은 사용불가) - JSON에서 문자열을 표현할 때는 오직 큰따옴표("")만 사용가능 - key에도 반드시 따옴표를 붙어야 함 2021. 12. 26.
[JS] map, filter, reduce 함수 # map, filter, reduce 모두 콜백함수를 활용하는 함수라는 공통점이 있다. ▷ map - 콜백 함수에서 리턴한 값들을 기반으로 '새로운 배열'을 만드는 함수 - forEach()와의 차이: forEach()는 배열 내부의 요소를 사용해서 콜백 함수를 호출하는데 그치는 반면, map()은 새로운 배열을 생성함 // 기본문법 array.map(function(value, index, array) { } // 화살표 함수 이용 array.map((value) => value * value) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map Array.prototype.map() - Java.. 2021. 11. 13.
[JS] 함수 선언문과 함수 표현식 ▷ 함수 선언문(function declaration) - 함수의 정의부만 존재하고 별도의 할당 명령이 없는 것 - 반드시 함수명이 정의되어야 함 function a () { } a(); ▷ 함수 표현식(function expression) - 정의한 함수를 별도의 변수에 할당하는 것 - 함수명이 반드시 정의될 필요는 없음 (기명 함수 표현식 / 익명 함수 표현식) // 익명함수 표현식 let b = function () { } b(); // 기명함수 표현식 let c = function d () { } c(); d(); // 에러 발생 ▷ 호이스팅에 따른 차이 - 함수 선언문 : 함수 전체를 호이스팅함, 함수 선언문이 정의되기 전에도 호출할 수 있음 - 함수 표현식 : 함수 선언부만 호이스팅함, 실제 .. 2021. 11. 13.
[JS] \n과 <br>의 차이 ▷ HTML상에서 사용하는 줄바꿈 방법 ▷ \n JS에서 사용하는 줄바꿈 방법 ▷ 템플릿 리터럴(Template literals) escape 문자인 \n 대신에 백틱(`)을 사용하는 방법 백틱 안에 있는 내용이 그대로 표현됨 안녕\n하십니까? 감사합니다. - 웹페이지 출력 결과 - console 창 출력 결과 2021. 11. 3.
[JS] class와 object class와 object의 차이점 class는 붕어빵 틀, object는 붕어빵(팥 붕어빵, 슈크림 붕어빵)에 비유할 수 있다 ▷ class - class는 연관 있는 것들을 모아놓은 집합체 - template (어떤 데이터가 들어올 수 있는지 정의) - declare once (한번 선언함) - no data in ▷ object - instance of a class (class를 이용해 새롭게 생성된 instance를 object라고 함) - created many times - data in - 생성된 object는 메모리에 저장됨 객체지향 프로그래밍이란? 쉽게 말해, 자료와 함수를 함께 사용하는 것을 지향하는 프로그래밍 ▷ 출처 https://www.youtube.com/watch?v=_DLhU.. 2021. 9. 14.
[JS] parameter, argument function printFruit(name, price) { console.log(name+"는 "+ price +"원 입니다."); } printFruit("banana", 2000); 1. 함수를 호출한다 2. 함수를 호출할 때, "banana"와 2000의 데이터를 printFruit함수로 전달한다 3. name과 price 라는 매개변수에 "banana"와 2000이 저장된다 4. 데이터가 채워진 값이 출력된다 ▷ argument(인수) - "banana", 2000 - 데이터를 넘겨준다 - javascript 내에서 사용하는 모든 data type을 다 사용할 수 있음 (array나 object도 가능) ▷ parameter(매개변수) - name, price - 함수를 선언하는 쪽에서, 넘겨.. 2021. 8. 13.
[JS] 윈도우 사이즈 표기 (window.screen / window.outer / window.inner / documentElement.clientWidth) ▷ window.screen - 모니터의 사이즈, 해상도 - 브라우저 바깥에 있는 영역까지 합함 - 콘솔창에 입력하면 다양한 property 값을 가진 object를 보여줌 ▷ window.outer (outerWidth, outerHeight) - 전체적인 브라우저의 사이즈 ▷ window.inner (innerWidth, innerHeight) - 페이지가 표기되는 부분 전체 - 스크롤바가 표기되는 것 포함 ▷ documentElement.clientWidth - 문서 전체를 의미 - 스크롤바를 제외한 순수 document의 크기 // 실사용 예시 documentElement.clientWidth = ${document.documentElement.clientWidth}, ${document.docu.. 2021. 7. 31.

티스토리툴바