하루에 하나씩 개발 공부

XMLHttpRequest : js 가 ajax를 사용할 때에 사용하는 객체 XMLHttpRequest 에 내용을 넣을 때에는 .open()에 open(전송 방식, 경로, 비동기 사용 여부) 경로는 데이터를 보낼 경로이다. 보낼때에는 .send() 로 보낸다. 익스플러어 6에서는 new XMLHttpRequest 로 만들 수 있지만, 그 아래의 버전에서는 불가능 하다. 따라서 아래와 같이 해주어야 한다. js 에서 데이터가 전송 되었는지는 onreadystatechange 이벤트로 알 수 있다. 이때 위의 이벤트에서는 request 객체의 readyState, request.status 속성도 반환된다. eval()은 문자열로 표현된 js 식을 실행시키는 함수이다. 따라서 var json = eval('..

구조분해 할당 : 객체 배열에 다른 객체 배열을 할당하게 된다면 같은 인덱스의 객체 배열의 값이 할당 된다. 이와 같이 객체는 같은 키값끼리 아이템 값이 할당 된다. 여기에 ... 을 붙이게 된다면 남는 값들을 받는 해당 타입으로 받습니다. 객체가 있을때 [키] = 아이템 이렇게 객체를 생성 할 수 있다. .concat 메서드는 배열을 풀어서 합쳐주는 메서드이다. es6 에서는 ... 을 활용하여 이어줄 수 있다. ...은 아이템 들을 배열 객체로 묶어 줄 수도 있지만, 반대로 ... 을 사용해서 풀어줄 수 도 있다. 전개연산자 es5 에서는 .assign 을 이용하여 객체에 아이템들을 할달 할 수 있다. 이때 assign 의 인자로 받을 객체와 넣어줄 객체들을 입력받는데 넣어줄 객체 안에서 이름이 겹친..

js document 객체 document 객체는 웹페이지 그 자체를 의미한다. documnet 객체에서도 다양한 메서드들을 제공하는데 요소 선택, 요소 생성, 이벤트 헨들러 추가, 객체의 선택 등이 있다. LAB1 alert : 경고 문을 띄워 준다 .onchange : 안의 내용이 바뀔때에 이벤트 실행 .onclick : 클릭 이벤트가 발생 했으 때에 이벤트 실행 .write() : html 출력 스트림을 통해서 텍스트 출력 .getElementById : html tag의 id 를 통해서 태그를 선택 .innerHtml : 선택한 태그 안에 html 작성 이러한 자바스크립트 함수들을 html 태크안에 배치 시킬 수 도 있다. LAB2 split(separator, limit) : 문자열을 separ..

자바스크립트의 자료형은 총 6가지이다. string , number, boolean, function, object, undefined 위의 undefined 자료형은 선언은 하였지만 초기화가 안 된 경우를 말한다. 자료형도 바꾸어 줄 수 있는데 String() Number() Boolean() 을 활용한다. 이때 만일 Number() 함수에 잘못된 값이 들어 온다면 NaN 으로 바뀌게 된다. 이는 Not a Number 이라는 의미이다. 다음은 자동 자료형 변환을 알아보자 자동 자료형 변한은 변환 함수를 사용하지 않아도 자동으로 전환된다는 것이다. 예시로는 문자열과 숫자를 더하게 되면 숫자가 문자열로 바뀌게 된다. 불 자료형으로도 자동현 변환이 가능한데 변수앞에 !! 를 붙이게 되면 자동으로 불 자료형..

템플릿 문자열은 문자열 안에 &{}를 활용하여 문자열안에 중괄호안의 결과값을 삽입한다. 이전에 다른 언어에서는 'asd' + a + 'ad' 라고 표현했다면, let word = a 'asd${word}ad' 이렇게 표현 할 수 있다. NaN = '숫자 자료형이지만, 숫자가 아닌 경우' 이에 예시는 let a = Number('word') 이렇게 나타낸다면 a는 NaN이 되는 것이다. 문자열에 대하여 숫자로 + 연산을 하게 되면, 숫자가 문자로 바뀌게 된다. === : 값과 자료형 모두가 같은지 비교 '51' === 51 : false == : 값이 같은지 비교 '51' == 51 : true || 연산자를 변수 초기화에 활용 let a = A || B 이때 A가 참이면 (정의가 되어 값이 들어가 있으면..

Promise js promise 함수는 js의 비동기 처리를 위해 만들어 진 함수이다. 즉 promise 가 생성 될때에는 존재하지 않을 수 있지만 미래에 있을 것을 약속하는 함수이다. 따라서 실행이 잘 되었을 경우와 실패하였을 경우의 함수를 둘 다 정의한다. 성공은 .then 으로 , 실패는 .catch로 잡는다. debounce 어떤 내용을 입력하다가 특정 시간동안 대기하면 마지막 입력 내용을 바탕으로 서버요청을 함. 예를 들면 연관 검색어가 있다. throttle 입력하는 동안에도 이전에 요청한 작업을 주기적으로 실행한다. 스로틀은 일정 시간 내에 한 번만 함수를 호출하도록 하는 기술로, 디바운스와 가장 큰 차이점이라면 정해진 시간 간격 내에 반드시 최대 한 번 함수가 호출된다는 것입니다.

1. forEach ex) string : 'banana=10&apple=20&orange=10' 을 key, value로 나누기 function parse(qs) { const queryString = qs.substr(1); // substr은 문자열 슬라이스를 담당합니다. const chunks = queryString.split('&'); let result = {}; chunks.forEach( (chunk) => { const[key, value] = chunnk.split('='); result[key] = value; }); return result } 여기서 map 함수를 사용하면 더욱 쉽게 분리가 가능하다. map은 반환된 결과값으로 새로운 배열은 만드는 함수이다. function pa..

ES6 class 사용 class Shape { static create(x,y) { return new Shape(x,y); } name = 'Shape'; constructor (x, y) { this.move(x,y); } move(x,y) { this.x = x; this.y= y; } area() { return 0; } } var s = new Shape(0, 0); s.area(); 위의 static create 는 Class 안의 함수 constructor 는 인스턴트 객체를 초기화 할때 초기화 코드를 결정할 수 있습니다. 화살표 함수 보통은 function add(first, second) { return first + second; } 라고 표현하는데, var add = (first,s..