열정 실천

JSON :: JavaScript Object Notation JSON은 범용적인 데이터 형식으로 문자 기반으며 구조화된 데이터 형식이다. JSON이나 XML같은 데이터 형식은 공식 포맷이기 때문에 개발자들 사이에 데이터 통신을 가능하게 한다. ✔️ 서버와의 데이터 교환에 사용된다. ✔️ 데이터의 외부 파일 저장에 사용된다. ✔️ xml에보다 용량이 가볍다. ✔️ 특정 언어에 종속되지 않으며 구조 정의가 용이하다. 📌JSON의 기본 구조 키와 값을 조합하여 정의한다. 키는 문자열만 가능하며 큰따옴표("")로 표기한다. let myJson{ "name" : "Tom", "grade" : 1, "age" : 20 } ✔ 마지막 요소에 , 를 허용하지 않는다. ✔ 키에 큰따옴표("")가 없거나 작은따옴표(''..

비동기 처리 작업 기능을 하는 Promise 객체를 사용하면 작업이 용이해질 뿐만 아니라 코드의 가독성도 좋아진다. when? 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 🎇Promise의 장점 - 비동기 처리 시점을 명확하게 표현할 수 있다. - 연속된 비동기 처리 작업의 수정, 삭제 추가가 편하다. - 비동기 작업 상태를 쉽게 확인할 수 있다. - 코드의 유지 보수성이 증가한다 Promise 생성자의 인수는 비동기 처리 작업을 하는 함수를 지정하며, 함수 내부에서 비동기 처리 완료 메소드인 resolve()와 reject()를 호출한다. 📌 객체 생성 const promise = new Promise(function (resolve, reject) { }); 이렇게 생성된 p..

CALLBACK FUNCTION : 함수의 매개변수에 함수를 넘겨주는 것 파라미터로 콜백함수를 전달받고 나중에 필요할 때 실행되는 함수이다. //더하기 함수 function add(a,b){ return a+b } //출력 함수 function printFunc(value){ console.log(value); } printFunc(add(3,4)); 이 코드는 add 함수에 a와 b 를 매개변수 값으로 넣어서 나온 결과값을 출력 함수의 매개변수로 전달해서 최종적으로 콘솔에 출력한다. 이 코드를 콜백함수로 구현하면 다음과 같다. function add(a, b, print){ print(a+b); } function printFunc(value){ console.log(value); } add(3, 4,..

동기와 비동기 📌 개념 🟢 동기식(Synchronous) 프로그램 ◽ 데이터의 요청 후 결과가 나올 때까지 기다리는 방식 (blocking : 답변을 기다리는 상태) ◽ 순차적으로 일을 수행한다. ◽ 현재 작업이 수행 중이면 뒤의 작업은 대기한다. 🟢 비동기식(Asynchronous) 프로그램 ◽ 데이터 요청 후 결과를 기다리지 않고 다른 일을 시작한다. (non-blocking : 답변을 기다리지 않음) ◽ 병렬적으로 일을 수행한다. ◽ 현재 작업과 무관하게 뒤의 작업이 실행된다. 비동기 방식은 결과를 기다리지 않기 때문에 잘 수행됐는지 결과를 확인할 수가 없다. 📌 장단점 동기 방식의 장단점 😄 설계가 간단하고 직관적이다. 🤔 결과가 주어질 때까지 다른 일을 못하고 기다려야한다. (작업 중단) 비동기..

현재 시간을 15:34:26 (시/분/초) 이렇게 디지털 형식으로 표시하기 위해서 다음과 같은 Date 객체의 메소드를 사용하면 된다. ⏰ getHours() // 시간(Hour) ⏰ getMinutes() // 분(Minute) ⏰ getSeconds() // 초(Second) ⏰ getMilliseconds() // 밀리초(Milliseconds) 더보기 Date 객체를 먼저 선언한 후 이 메소드를 실행하기만 시간을 가져올 수 있다. 이렇게 가져온 시간을 화면에 출력하게 되면 Date 객체를 선언했을 때의 시간이 출력이 되고 바뀌지 않는다. 진짜 디지털 시계처럼 매초마다 시간을 변경해주기 위해서 정해진 시간마다 실행되는 setInterval() 함수를 이용하자! 🎈 setInterval( ) 함수 사..

이벤트의 함수는 매개변수를 통해 이벤트 정보를 가져올 수 있다. button.addEventListenter('click', (event) => { console.log(event); }); ✔ 이벤트 객체는 이벤트가 발생한 요소와 참조 정보, 입력된 키 등의 정보를 포함한다. ✔ 발생한 요소는 target 속성을 이용해 확인할 수 있다. ✔ 보통 이벤트객체매개변수는 [event] 혹은 [e]라고 많이 쓴다. --수정중---