221_자바스크립트 JSON 알아보기 [적용] 네트워크로 데이터를 송수신하고 싶을 때 데이터를 정의하고 싶을 때 [내용] JSON은 범용적인 데이터 형식이다. 서버와의 통신이나 데이터의 외부 파일 저장 등에 사용한다. JSON은 자바스크립트뿐만 아니라 PHP나 자바(Java) 등 다른 언어에서도 사용된다. JSON은 텍스트 에디터로 편집이 가능하며, 자바스크립트로 불러오기가 쉽고 다양한 구조의 데이터도 유연하게 사용할 수 있는게 장점이다. JSON 파일의 구조를 확인하기 위해 다음과 같이 각 학급 정보를 JSON 데이터로 정의한다고 가정해 보자. 학생이 40명인 4학년 C반의 정보는 다음과 같이 정의한다. JSON JSON의 구조와 데이터의 예 { "students": 40, "grade": 4, "na..

220_자바스크립트에서 Promise 동적 직렬 처리하기 [적용] 비동기 처리를 순서대로 시작 후 모든 처리가 완료될 때까지 대기하고 싶을 때 [내용] 코드를 작성하면서 Promise 의 실행 여부를 미리 알 수 있으면 아래 링크와 같은 방식으로 코드를 사용할 수 있다. https://stonefree.tistory.com/310 [JavaScript] 자바스크립트 이벤트 작동 설정하기 125_자바스크립트 이벤트 작동 설정하기 [적용] 비동기 처리 타이밍을 표시하고 싶을 때 [문법] 메소드 의미 반환 이벤트타겟.dispatchEnvent(이벤트) 이벤트 발생 처리 진리값 new Event('이벤트', [{detail stonefree.tistory.com 하지만 동적으로 Promise의 수가 변하는 경우..

219_자바스크립트에서 Promise 직렬 처리하기 [적용] 외부 데이터를 가져와 후속 처리 작업에 사용하고 싶을 때 [내용] 처리가 끝난 데이터를 다음 작업에 이어서 사용하는 방법을 알아보자. 외부 데이터를 가져와 다음 처리에 연결할 때 유용하다. Promise를 사용하는 방법과 await나 async를 사용해 처리하는 방법을 알아보자. 직렬 처리는 await와 async를 사용하는 것이 더 간단하다. Promise를 사용하는 방법 JavaScript main.js Promise.resolve() .then( () => new Promise((resolve) => { setTImeout(() => { console.log('첫 번째 Promise', new Date().toLocaleTimeString..

218_자바스크립트에서 Promise 병렬 처리하기 [적용] 비동기 처리 일괄 시작 후 모든 처리가 끝나면 다음 작업을 시작하고 싶을 때 [문법] 메소드 의미 반환 Promise.all(배열) 다수의 Promise 병렬 실행 Promise [내용] Promise.all()을 사용하면 동시에 실행한 처리를 모두 끝내고 다음 작업을 시작하도록 지정할 수 있다. Promise 인스턴스를 포함한 배열을 생성하여 Promise.all()의 인수로 전달한다. 모든 처리가 끝난 뒤 then()으로 지정한 함수를 호출한다. 병렬 처리는 배열의 순서대로 작업이 완료되지 않는다. JavaScript main.js // 배열 작성 const arrFunc = []; for (let i = 0; i < 5; i ++) { c..

217_자바스크립트에서 Promise 성공/실패 처리하기 [적용] 실패할 가능성이 있는 비동기 작업을 처리하고 싶을 때 [문법] 메소드 의미 반환 Promise인스턴스.catch(함수) 실패 시 콜백 함수 호출 Promise [내용] Promise로 실패한 작업을 처리하고 싶은 경우 생성자 인수에 reject를 포함하는 함수를 지정한다. reject는 처리의 실패를 나타내는 작업을 할당하며, reject가 실행되면 catch()가 호출된다. JavaScript main.js const promise = new Promise((resolve, reject) => { if (flag === true) { resolve('orange'); } else { reject('apple'); } }); promise..

216_자바스크립트에서 비동가화 Promise 사용하기 [적용] 비동기 처리를 다루고 싶을 때 [문법] 메소드 의미 반환 new Promise(함수) Promise 생성 Promise 인스턴스 Promise인스턴스.then(함수) 성공 시 콜백 함수 호출 Promise [내용] 비동기 처리 작업 기능을 하는 Promise 객체를 사용하면 작업이 용이해질 뿐만 아니라 코드의 가독성도 좋아진다. fetch()를 시작으로 브라우저의 표준 기능에도 Promise 사용이 증가하고 있으며, await나 async와 같은 기능도 기본적으로 알아두면 좋다. Promise 생성자의 인수는 비동기 처리 작업을 하는 함수를 지정하며, 함수 내부에서 비동기 처리 완료 메소드인 resolve()를 호출한다. Promise 인스..

215_자바스크립트에서 시간 주기 작업 해제하기 [적용] setInterval() 처리를 해제하고 싶을 때 [문법] 메소드 의미 반환 clearInterval(IntervalID) setInterval() 호출 해제 없음 [내용] clearInterval()을 사용해 setInterval()로 지정한 함수의 실행을 취소할 수 있다.setInterval()의 숫자 타입 반환값을 보관한 뒤 해제하고 싶은 타이밍에 맞춰 clearInterval()의 인수로 전달한다. JavaScript main.js const intervalId = setInterval(timer1, 1000); // 1000밀리초 간경으로 실행 function timer1() { // 처리 작업 } clearInterval(interval..

214_자바스크립트에서 시간 주기 작업하기 [적용] 주기적으로 작업을 처리하고 싶을 때 애니메이션 관련 함수를 호출하고 싶을 때 [문법] 메소드 의미 반환 setInterval( 함수, 밀리초) 지정 시간 간격으로 연속 함수 호출 숫자 [내용] setInterval()을 사용해 지정 밀리초 간격으로 함수를 실행할 수 있다. setTimeout()은 함수를 한 번만 호출하지만, setInterval()은 지정 시간 간격으로 연속 실행한다. JavaScript main.js setInterval(timer1, 1000); // 1000밀리초 간격으로 실행 function timer1() { // 처리 작업 } 첫 번째 인수는 함수, 두 번째 인수는 반복 간격(밀리초 단위)을 전달하며, 함수는 익명 함수(An..

213_자바스크립트에서 지정 시간 후 작업 실행 해제하기 [적용] setTimeout() 처리를 해제하고 싶을 때 [문법] 메소드 의미 반환 clearTimeout(타이머ID) setTimeout() 호출 해제 없음 [내용] clearTimeout()을 사용해 setTimeout()으로 지정한 함수의 실행을 취소할 수 있다. 해제하고 싶은 타이밍에 맞춰 setTimeout()의 반환값인 타이머 ID(숫자 타입)를 clearTimeout()의 인수로 전달하면 지정한 함수의 호출이 해제된다. JavaScript main.js const timerId = setTimeout(timer1, 1000); // 1000밀리초 후 실행 function timer1() { // 처리 작업 } clearTimeout(t..

212_자바스크립트에서 지정 시간 후 작업 실행하기 [적용] 작업의 처리를 지연시키고 싶을 때 비표시 요소를 지정 시간 경과 후 표시하고 싶을 때 [문법] 메소드 의미 반환 setTimeout(함수, 밀리초) 지정 시간에 함수 호출 숫자 [내용] setTimeout()을 사용해 지정 시간(밀리초 단위) 후 함수를 실행할 수 있다. 자바스크립트는 스크립트의 코드를 위에서부터 순서대로 실행하지만, setTimeout()을 사용해 실행 타이밍과 순서의 지정이 가능하다. setTimeout()은 한 번만 호출되며, 첫 번째 인수는 함수, 두번째 인수는 지연 시간을 밀리초(1/1000초) 단위로 전달한다. JavaScript main.js setTimeout(timer1, 1000); // 1000밀리초 후 실행..