오늘의 CODE

ie8이하 지원 X DOMContentLoaded HTML이 모두 로드되고, DOM 트리가 완성되었지만, 외부 리소스(img, etc.)가 아직 로드되지 않았을 때 실행하는 이벤트로 DOM이 준비 상태이기 때문에 DOM 노드를 제어할 수 있음. jQuery의 ready와 동일하다고 볼 수 있다. load 브라우저의 모든 리소스(img, style, script, etc..)가 로드되었을 때 실행하는 이벤트로 모든 리소스가 로드된 시점이기 때문에, img 사이즈와 같은 값을 얻을 수 있다. beforeunload / unload 페이지를 떠날 때 실행하는 이벤트로 변화에 따른 저장 여부 및 페이지 이탈 여부를 확인할 수 있다. 1. load보다 DOMContentLoaded를 사용하는 이유? load는 모..

CORS란? Cross Origin Resources Sharing의 약자로 도메인 또는 포트가 다른 서버의 자원을 요청하는 메커니즘을 말함. 요청 시에는 cross-origin HTTP에 의해 요청되며, 동일 출처 정책(same-origin policy)에 의해 CORS 같은 상황이 발생하면 외부 서버에 요청한 데이터를 브라우저에서 보안목적으로 차단하게 되어 정상적으로 데이터를 받을 수 없게 됨. * 동일 출처 정책 (same-origin policy) 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호 작용하는 것을 제한하는 중요한 보안 방식으로 잠재적 악성 문서를 격리하여, 공격 경로를 줄이는 데 도움이 됨. 예시) localhost:3000으로 개발을 진행하며 서버는 locahost:80..

콜백함수 일반 함수가 입력(파라미터)과 출력(리턴값)있다라고 생각할 경우, 출력값이 없고 그 대신 콜백 함수를 입력받는 함수들이 있다. 콜백 함수는 다른 함수에 인자로 넘어가서 실행될 로직을 담는다. function userInfo(id, cd) { const user = { id: id, name: 'User' + id, email: id+'@test.com', }; cb(user); } userInfo(1, function(user) { console.log('user: '+user); }); // 결과 // user: {id:1, name:'User1', email: '1@test.com'} userInfo() 함수의 두번째 파라미터로 콜백 함수를 선언 userInfo()가 실행될 때 cb 매개 변..

메서드를 수행하기 위해서는 객체를 통해서 해당 메서드를 수행하여야 하며, 동작을 수행하는 주체는 객체이므로 객체에게 그 동작을 수행하라고 지시해야 함. 함수는 함수 자체가 그 동작을 정의한 함수객체이기 때문에 자기 자신을 수행함. 또한 자바스크립트 객체에서 프로퍼티 값이 함수인 경우, 일반 함수와 구분하여 메서드라고 함. (자바스크립트 객체 - 키 key와 값 value으로 구성된 프로퍼티의 집합) 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 symbol값 프로퍼티 값: 모든 값 let foo = {}; foo.a = 1; foo.b =2; foo.sum=function() {console.log(foo.a+foo.b);}; foo.sum(); // 3 * 프로퍼티 키에 문자열이나 symbol값..

map 함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들때 사용한다. (기존 배열은 변하지 않음) map 함수는 모든 배열의 값에 function을 실행하는 메서드이다. 기존 배열의 값들을 특정값으로 변경하기 위해 map()이 많이 쓰인다.( 단순하게 반복을 위해 사용하기도함) array.map(callbackFunction(currentValue[, index[, array]])[, thisArg]); filter, forEach와 같은 구문임. currentValue: 배열 내 현재 값 index: 배열 내 현재값의 인덱스 array: 현재 배열 thisArg: callbackFunction 내에서 this로 사용될 값 const nums = [1,2,3]; const ..

forEach문은 오직 Array 객체에서만 사용이 가능하다.(ES6부터 Map, Set 지원) 배열의 요소들을 반복하여 작업을 수행할 수 있다. forEach 구문의 인자로 callback함수를 등록할 수 있고, 배열의 각 요소들이 반복될때 이 callback함수가 호출됨. callback 함수에서 배열요소의 인덱스와 값에 접근할 수 있음. 배열의 첫번째부터 마지막까지 반복하면서 item을 꺼낼 수 있다. var arr = ['가', '나', '다', '라']; arr.forEach(function(item, index, arr2) { console.log(item, index, arr2[index+1]); }) // 첫번째 인수는 배열 각각의 item // 두번째 인수는 배열의 index // 세번째..

자바스크립트의 배열[]의 경우, length를 통하여 길이를 간단하고 손쉽게 가져올 수 있다. 하지만 obj의 경우에는 length를 지정하게 되면 undefiend가 나타남 obj의 length의 길이를 구하기 위해서는 Object.kdys를 이용한다. var objs = {name: 'test', age: '24', city: 'seoul'}; console.log(objs.length); console.log(Object.key(objs).length); 속성 나열 var myObj = Object.create({}, { getFoo: { value: function () { return this.foo; } } }); myObj.foo = 1; myObj.foo2 = 2; myObj.foo3 = ..

키워드 키워드는 제어문의 시작과 끝, 특정한 조작 목적 등으로 쓰인다. 이런 기능들이 정의되어있기 때문에 식별자나 프로퍼티의 이름으로 사용할 수 없다. break case catch continue debugger default delete do else finally for function if in instanceof new return switch this throw try typeof var void while with 예약어 예약어는 아직 특별한 쓰임새는 없지만 미래에 키워드로 쓸 가능성이 있어서 예약해둔 것이다. abstract boolean byte char class const debugger double enum export extends final float goto implements..

생성자 함수란? 생성자 함수는 여러 프로그래밍 언어에서는 '클래스'와 동의어이다. 어떤 경우 사람들은 참조타임, 클래스, 데이터 타입, 아니면 간단하게 생성자라고 부른다. 메서드란? 메서드는 자바스크립트에서 객체를 만들기 위한 템플릿으로 생성자 함수 안에서 속성에 함수를 할당하면서 정의되며 생성자 함수와 함께 class를 사용한다. hi 속성은 할당된 함수이다. Person 객체가 호출될때 this 키워드는 새로 생성된 Person 객체에 응답할 것이다. ** 메서드 사이엔 쉽표가 없음!! class Person(name) { this.name = name; this.hi = function() { console.log(`Hi, My name is ${this.name}`) } } const kim = ..

* 함수의 매개변수 - 함수의 바디 안에서 사용할 이름을 정해줌 * 함수의 리턴 - 함수의 결과를 얻어줌(실행 시 결과값) 선언적 함수 생성 function 함수이름(매개변수) { 로직 } 함수도 객체의 한 종류임(표준 내장 객체) function Hello1() { console.log("hello"); } console.log(hello1, typeof hello1); // [Function: hello1] function function Hello2(name) { console.log("hello2", name); } hello2("Mark"); // hello2 Mark function hello3(name) { return `hello3 ${name}`; } console.log(hello3("..