반응형 Javascript11 JavaScript - 비동기 / 콜백함수 비동기 처리란? JavaScript의 비동기 처리는 특정 로직의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 먼저 실행하는것을 비동기 처리 ajax 비동기 처리 방식 function getAfunc() { var data; $.get('https://xxxx.com/xxxx/1', function(res) { data = res; }); return data; } console.log(getAfunc()); // undefined HTTP GET 요청을 날리고 응답으로 res에 응답데이터가 담기고, 그리고 선언한 data 에 데이터를 저장합니다. 여기서 getAfunc 를 실행시켰을 때 undefined 가 뜹니다. 이유는 데이터를 요청하고 받아올 때까지 기다려주지 않고 다음 코드를 실행하기 때문입니.. 2023. 11. 6. Throttling & Debouncing(메모리 누수 관리) Throttling과 Debouncing은 JavaScript 및 웹 개발에서 이벤트 핸들링과 비동기 작업 관리에 사용되는 중요한 개념입니다. 이 두 기술은 메모리 누수 및 성능 개선을 위해 사용됩니다. 1. Throttling (쓰로틀링): Throttling은 이벤트 핸들러가 일정한 간격으로만 호출되도록 하는 기술입니다. 예를 들어, 스크롤 이벤트나 리사이즈 이벤트와 같이 빈번하게 발생하는 이벤트에 대한 핸들러에서 Throttling을 사용하면 이벤트 핸들러가 과도하게 호출되지 않고, 일정한 간격으로 제한됩니다. 이로써 성능을 개선하고 메모리 누수를 방지할 수 있습니다. 2.Debouncing (디바운싱): Debouncing은 연속적으로 발생하는 이벤트 중 마지막 이벤트를 기준으로 일정 시간이 지난.. 2023. 9. 22. 상속(Javascript) 상속 C++나 Java처럼 클래스를 이용하는 객체 지향 언어이지만 자바스트립트는 클래스가 아닌 객체를 상속 프로토타입 체인(상속)이라고 부르는 객체의 자료구조로 구현되어 있다. 이미 정의된 프로퍼티와 메서드의 코드를 재사용 가능하고 새로운 기능을 추가해 확장된 객체를 만들 수 있다. 중복 코드를 작성하지 않아도 되서 유지보수에 좋은 프로그램을 구현한다. 프로토타입 체인 모든 객체는 내부 프로퍼티를 가지고 있다. ECMA 6 에선 __proto__프로퍼티에 [[prototype]]의 값이 저장된다. 객체의 __proto__는 그 객체에 상속해준 부모 객체를 가르킨다. var A = { name: "Min", sayHello : function() { console.log("Hello! " + this.na.. 2022. 7. 28. 창 제어하기(Javascript) 창 제어하기 창 여닫기 새로운 창 또는 탭을 열 때는 open 메서드를 사용합니다. open 메서드의 사용법은 다음과 같습니다. var w = open(url, 창의 이름, 옵션); url : 생략하면 빈 페이지가 표시된다. 창의 이름 : 생략하면 이름이 없는 창을 연다. 이름이 같은 창이 있다면 새로 열지 않고 그 창에 표시 옵션 : 창의 설정 값(창의 크기 등) 생략하면 기본 크기로 표시 open 메서드는 새로운 창이 Window 객체를 반환합니다. 열린 창을 닫을 때는 close 메서드를 사용 w.close(); 세 번째 인수의 옵션은 옵션의 이름=값을 쉽표로 연결한 문자열이며, 사용할 수 있는 옵션의 목록은 다음과 같습니다. 옵션의이름설명 width 창 너비 height 창 높이 location .. 2022. 7. 24. 유사배열객체(Javascript 유사 배열 객체 함수의 인수를 저장한 Arguments 객체 DOM의 document.getElementsByTagName 메서드, document.getElementsByName 메서드 등이 반환하는 NodeList 객체 유사 배열 객체는 Array.prototype의 메서드를 사용할 수 없습니다. 그러나 배열로 참조하거나 대입할 수 있으며 for 문이나 for/in 문으로 반복 처리를 할 수 있습니다. 따라서 많은 자바스크립트 프로그램에서 배열로 다룰 수 있습니다. 그러나 요소의 추가와 삭제 또는 length 프로퍼티값을 요소의 개수와 연계하는 등의 처리는 배열처럼 동작하지 않습니다. 유사 배열 객체는 Array.prototype의 메서드를 직접 사용할 수 없습니다. 그러나 Function.proto.. 2022. 7. 19. 배열(Javascript) 배열 자바스크립트의 배열은 Array 객체 배열의 기능을 가상으로 흉내 낸 것 Array 객체는 배열의 인덱스를 문자열로 변환해서 그것을 프로퍼티로 이용 배열의 요소 번호로 숫자 값 대신 문자열을 사용가능 Array 타입 객체이며 Array.prototype ( Array.prototype 메서드 참고자료 ) 프로퍼티를 상속받음 배열 리터럴은 쉼표로 구분한 값을 대괄호([])로 묶어서 표현 var nums = [1, 2, 3, 4]; [...] 부분이 배열 리터럴이며 배열 값 하나를 배열 요소] 자바스크립트의 배열은 객체 타입 변수에 대입하면 배열의 참조가 변수에 저장 배열 리터럴 안에 어떠한 요소도 작성하지 않으면 빈 배열 var nums = []; console.log(nums); // -> [] 요.. 2022. 7. 19. 객체(Javascript) 객체 객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다)의 집합 객체를 생성하는 방법 2가지 : 객체 리터럴 사용, 생성자 함수 사용 객체 리터럴로 객체 생성하기 { ... } 부분이 객체 리터럴 프로퍼티 값은 suit : “하트” 처럼 콜론(:)을 사용 중괄호({})안에 있는 프로퍼티들은 쉼표(,)로 구분 변수에 대입된 객체 안의 프로퍼티 값을 읽거나 쓸 때에는 마침표(.) 연산자 또는 대괄호 ([]) 연산자를 사용 객체 리터럴 안에 어떠한 프로퍼티도 작성하지 않으면 빈 객체가 생성됨 var student = { name : "민재", age : "25" }; undefined student; {name: '민재', ag.. 2022. 7. 13. 변수의 유효범위 , let , const(Javascript) 변수의 유효범위 전역 유효 범위와 지역 유효범위 전역변수 함수 바깥에서 선언된 변수 유효 범위는 전체 프로그램 지역변수 함수 안에서 선언된 변수 함수 인자 유효범위는 변수가 선언된 함수 내부 let let 명령문은 블록 스코프의 범위를 가지는 지역 변수 let a = 1; if (a === 1) { let a = 2; console.log(a); -> 2 } console.log(a); -> 1 const const 선언은 블록 범위의 상수를 선언 상수의 값은 재할당 X 재선언 X const num = 25; try { num = 50; } catch (err) { console.log(err); } console.log(num); -> 25 // TypeError: Assignment to consta.. 2022. 7. 13. 함수(Javascript) 함수 function 함수명 (인수) { 처리 로직 return 출력 반환값 } function square(x) { var result = x * x; return result; } * 1일차 참조) 함수명 캐멀 표기법 인수 function add(a, b) { var c = a + b; return c; } 인수가 여러개면 쉼표로 구분 인수를 받지 않는 함수 function animal() { console.log(”동물”); }; animal(); // 멍멍 console.log(animal()); // undefined - 반환값이 없음 즉시 실행 함수 (function() { .. })(); //인수 넘길 수 있고 반환 값 받을 수 있음 참조에 의한 호출과 값에 의한 호출 원시값 -> 함수 인수.. 2022. 7. 13. 생성자(Javascript) 생성자 생성자는 이름이 같은 인스턴스를 만들 수 있다 (단, 프로퍼티 값을 달라야함) 생성자는 객체를 생성하고 초기화 하는 역할 new 연산자로 생성한 객체 -> 생성자의 인스턴스 생성자는 파스칼 표기법을 따른다. function student(name,age){ this.name=name; this.age=age; } var student = new student("민재", 15); console.log(student); 메서드를 가진 객체를 생성하는 생성자 function score(engscore, mathscore) { this.engscore = engscore; this.mathscore = mathscore; this.age = function() { return this.engscore +.. 2022. 7. 13. 이전 1 2 다음 LIST
