224_자바스크립트에서 JSON 변환에 들여쓰기 적용하기 [적용] 자바스크립트 객체를 JSON 문자열로 변환하고 싶을 때 가독성을 위해 JSON에 들여쓰기를 적용하고 싶을 때 [문법] 메소드 의미 반환 JSON.stringify(obj, null, ' ') 들여쓰기를 적용해 객체를 JSON 문자열로 변환 문자열 [내용] JSON.stringify()의 세 번째 인수는 JSON 문자열의 줄바꿈과 들여쓰기 삽입을 위해 사용한다. 들여쓰기 삽입을 위한 문자열을 지정하거나 숫자를 전달하면 숫자만큼의 공백이 삽입된다. 다음 예시를 확인해 보자. JavaScript main.js const data = {a: 1000, b: '여러분 안녕하세요.'}; const str = JSON.stringify(data, nu..

223_자바스크립트에서 객체를 JSON 변환하기 [적용] 자바스크립트의 객체를 JSON 문자열로 변환하고 싶을 때 [문법] 메소드 의미 반환 JSON.stringify(obj) 자바스크립트 객체를 JSON 문자열로 변환 문자열 [내용] JSON.stringify()를 사용해 자바스크립트의 객체를 JSON 문자열로 변환할 수 있으며, 인수에는 객체를 전달한다. JavaScript main.js const data = {a: 1000, b:'여러분 안녕하세요.'}; const str = JSON.stringify(data); console.log(str); // 결과: { "a": 1000, "b": "여러분 안녕하세요." } 참조 : 실무에 바로 적용하는 자바스크립트 코드레시피 278 아케다 야스노부, 카..

222_자바스크립트에서 JSON 문자열 객체로 변환하기 [적용] JSON의 문자열을 자바스크립트의 객체에서 사용하고 싶을 때 네트워크에서 받은 JSON 문자열을 사용하고 싶을 때 [문법] 메소드 의미 반환 JSON.parse(문자열) JSON 형식의 문자열을 JSON 객체로 변환 객체 [내용] JSON.parse()를 사용해 JSON 문자열을 해석하고 자바스크립트의 값과 객체로 변환한다. JSON.parse()로 변환한 문자열은 자바스크립트의 객체로 처리되므로 마침표(.)를 사용해 참조할 수 있다. JavaScript main.js // JSON 문자열 const jsonString = `{ "students": 40, "grade": 4, "name": "C반" }`; // 문자열을 자바스크립트의 객체..

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..