웹언어 (191) 썸네일형 리스트형 [ES6강좌] 11강 Template literals - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://youtu.be/0PAXh-6iWQo - Template literals(템플릿 리터럴)은 내장된 표현식을 허용하는 문자열 리터럴입니다. - 여러 줄로 이루어진 문자열과 문자 보간기능을 사용할 수 있습니다. - ES5부터 나왔던 표현식입니다. 1. Template literals 문법소개 - 템플릿 리터럴은 숫자 1 옆의 ~와 같이 있는 기호인 [ ` ]를 사용합니다. - Backtick(백틱), Grave Accent 혹은 Back Accent(역 악센트)라고도 부릅니다. //grave accent `안녕하세요` //apostrophe(작은따옴표) '안녕하세요' - 작은 따옴표와 보기에도 차이가 있다는 것을 알 수 있습니다. - 그럼.. [AJAX강좌] 2강 XMLHttpRequest 객체 - 오쌤의 니가스터디 1. XMLHttpRequest 객체 - AJAX의 핵심은 XMLHttpRequest 객체입니다. 우선적으로 XMLHttpRequest 객체를 생성한 후 콜백 함수를 정의하고 XMLHttpRequest를 열어 서버에 요청을 보냅니다. - 모든 최신 브라우저는 XMLHttpRequest 객체를 지원합니다. 웹서버와 데이터를 교환하는 데 사용하고, 전체 페이지를 다시 로드하지 않고, 웹페이지의 일부를 업데이트할 수 있습니다. ## XMLHttpRequest 객체 생성 구문 variable 변수명 = new XMLHttpRequest(); ## 콜백함수 정의 //xhttp : 변수명 xhttp.onload = function() { //응답이 준비되면 수행할 작업 } - 콜백함수는 다른 함수의 매개변수로 전달.. [AJAX강좌] 1강 AJAX 소개 - 오쌤의 니가스터디 1. AJAX란? - AJAX는 Asynchronous JavaScript And XML의 약자로 비동기 방식의 javascript와 XML을 의미합니다. - Ajax란 자바스크립트처럼 특정 프로그래밍 언어를 지칭하는 것도 아니고, 제이쿼리나 리액트처럼 특정한 프레임워크를 지칭하는 것도 아닌 구현하는 방식입니다. 1) 동기방식이란? - 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작이 수행할 수 있습니다. - 자료를 요청하면 잠시 페이지가 서버 스크립트(Server Script) 페이지로 갱신되어 화면이 깜박거리고 그동안 사용자는 어떤 작업도 할 수 없습니다. 2) 비동기방식이란? - AJAX 사용 후 방식 - 사용자가 서버에 자료를 요청할 때 화면 전환 없이 요청한 자료(XML, HTML, JSON.. [ES6강좌] 10강 JS Promise - 오쌤의 니가스터디 1. JavaScript Promise Object - Promise는 Producing code(생성코드)와 Consuming code(소비코드)를 연결하는 Javascript 객체입니다. - 간단하게 말하자면 비동기 방식을 로딩, 성공, 실패로 나눠서 처리하는 객체입니다. - Producing code(생성코드)는 시간이 걸릴 수 있는 코드입니다. - Consuming code(소비코드) 는 결과를 기다려야 하는 코드입니다. - Promise객체는 Producing code(생성코드) 와 Consuming code(소비코드)에 대한 호출이 모두 포함됩니다. - 이 객체는 ES6에서 도입하기 시작했습니다. ## 문법 let 인스턴스변수명 = new Promise(function(testResolve, .. [ES6강좌] 9강 JS Asynchronous(비동기) - 오쌤의 니가스터디 1. Asynchronous JavaScript - 다른 함수와 병렬로 실행되는 함수를 비동기 함수라고 합니다. - 좋은 예시는 [ setTimeout() ]이 있습니다. - 실제로 콜백함수는 비동기 함수와 함께 자주 사용됩니다. 1) setTimeout을 통한 비동기 처리 ## 주의사항 - 함수를 인수로 전달할 때 괄호를 사용하지 않는다는 것을 기억해 주세요. setTimeout(testFunction,3000); //맞음 setTimeout(testFunction(),3000); //틀림 ## 코드 보기 일반함수 값: setTimeout 값: - [ output02() ]를 먼저 [ setTimeout() ]에 호출하고, [ output01() ]를 나중에 호출하였습니다. - 하지만 [ output0.. [ES6강좌] 8강 JS Callback - 오쌤의 니가스터디 1. Javascript Callback - 콜백 함수는 다른 함수에 인수로 전달되는 함수를 의미합니다. 함수명(function(){}); // 함수명(함수명); - 이 기술을 사용하면 함수가 다른 함수를 호출할 수 있습니다. - 다른 함수가 완료된 후 콜백 함수를 실행할 수 있습니다. 1) 함수의 순서 - JS에서 함수는 호출된 순서대로 실행이 됩니다. - 선언된 순서대로 실행되지 않습니다. ## 코드 보기1 - [ testFirst() ]를 먼저 호출해보겠습니다. ## 결과 보기1 ## 코드 보기2 - [ testSecond() ]를 먼저 호출해보겠습니다. ## 결과 보기2 2) 함수의 순서 제어 - 때때로 함수를 실행할 시점을 제어하고 싶을 때가 있습니다. - 그래서 시점을 제어해보도록 하겠습니다... [JSON강좌] 6강 JSON Server(서버) - 오쌤의 니가스터디 1. 데이터 보내기 - JSON의 일반적인 용도는 웹서버와 데이터를 교환하는 것입니다. - 웹서버에서 데이터를 수신할 때 데이터는 항상 문자열입니다. ## 코드 보기 - 자바스크립트 객체의 데이터를 php 파일에 데이터로 보내는 방법입니다. - 주소표시줄을 통해 파라미터로 php파일에 데이터를 보냅니다. ## 결과 보기 - 주소표시줄에 보면 php파일에 데이터를 보내고 있는 것이 확인됩니다. - 이건 실제 서버도 아니고 현재 php 파일이 없이 때문에 php파일이 없다고 문서에 표시됩니다. - 실제 php 파일과 서버라면 데이터를 보낼 수 있습니다. 2. 서버의 JSON - AJAX의 XMLHttpRequest 객체를 사용하여 서버에서 데이터를 가져올 수 있습니다. - 더 자세한 강좌는 AJAX강좌로 계.. [JSON강좌] 5강 JSON.stringify() 메서드 - 오쌤의 니가스터디 1. JSON.stringify( ) - JSON의 일반적인 사용용도는 웹서버와 데이터를 교환하는 것입니다. - 웹 서버에 데이터를 보낼 때, 역시 데이터는 문자열이어야 합니다. - 자바스크립트 객체 데이터를 JSON.stringify() 를 사용해서 문자열로 변환해야 합니다. 1) JS객체를 JSON 데이터로 변경하기 ## 코드 보기 - [ originData ]에 자바스크립트 객체를 담고, 데이터와 타입을 확인해보겠습니다. - [ changeData ]에는 객체를 JSON데이터로 담고, 데이터와 타입을 확인해보겠습니다. ## 결과 보기 - 첫번째는 오브젝트, 객체로 둘 다 나옵니다. - 두번째는 문자열이라 값 자체가 반환되고, 타입은 string으로 나오게 됩니다. - JSON 데이터는 문자열이라는 .. 이전 1 2 3 4 5 ··· 24 다음
