분류 전체보기 225

async와 await

async & await 비동기 처리 패턴 중 콜백 함수와 프로미스의 단점을 보완하여 가장 최근에 나온 문법 var user = { id: 1, name: 'Josh' }; if(user.id === 1){ console.log(user.name);// Josh } ▲ 개발자에게 읽기 좋은 코드 user라는 변수에 객체를 할당한 뒤 조건문으로 아이디를 확인하여 콘솔에 사용자 name을 출력하는 코드이다. 이와 같이 위에서부터 한 줄씩 읽으면서 사고할 수 있는 코드가 읽기 좋은 코드라고 할 수 있다. var user = fetchUser('domain.com/users/1'); if(user.id === 1){ console.log(user.name); } fetchUser()라는 메소드를 호출하면 사용자..

Promise

Promise 자바스크립트 비동기 처리에 사용되는 객체를 말하며 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용한다. $get('url 주소/products/1', function(response){ // ... } 위와 같은 API가 실행되면 서버에 데이터를 요청한다. 데이터를 받아오기 전에 화면에 데이터를 표시하려 하면 오류가 발생하거나 빈 화면이 출력된다. 이와 같은 문제점을 해결하기 위해서 Promise를 사용한다. 프로미스 코드 function getData(callbackFunc){ $.get('url주소/products/1', function(response){ callbac..

비동기 처리와 콜백 함수

비동기 처리 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바 스크립트의 특성을 말한다. #1. ajax function getData(){ var tableData; // ajax 통신 부분 $.get('https://domain..com/products/1', function(response) { tableData = response; }); return tableData; } console.log(getData()); // undefined ajax 통신을 통해 서버에서 받아온 데이터를 response 인자에 담은 후 변수 tableData에 저장한다. 이 때 console.log에서는 undefined을 출력한다. $.get()로 데이터를 요청하고 값을 받..

HTTP 통신 라이브러리

Ajax 비동기적인 웹 애플리케이션의 제작을 위해 사용하는 개발 기법 싱 글페이지 애플리케이션을 이용하기 쉬워짐 ex) jQuery.ajax() axios Vue에서 권고하는 HTTP 통신 라이브러리 참고: axios github 자바스크립트의 비동기 처리 패턴 1. callback 2. promise 3. promise + generator 4. async & await 참고: 자바스크립트- https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/ axios 실습 및 this 설명 methods:{ getData: function(){ var vm = this; axios.get('https://j..

FRONT-END/Vue.js 2021.05.31

클래스, 참조타입, String클래스, 필드(Field)선언

클래스: 객체를 만들기 위한 틀을 말한다. 객체 생성하기 - new 연산자는 new 연산자 뒤에 나오는 생성자를 이용하여 메모리에 객체를 만든다. - instance: 인스턴스, 메모리에 만들어진 객체 // CarExam의 c1변수에 Car class 객체를 저장하기 public class CarExam{ public static void main(String[]args){ Car c1 = new Car(); } } public class Car{ } 자바의 변수 타입 - 참조형 타입: 기본형 변수 타입을 제외한 모든 타입을 말한다. String str = new String("Hello"); >> new: 클래스를 메모리에 올린다. > String 객체를 str이 참조한다. - 기본형 타입: 논리형(b..

KH 정보교육원 2020.12.22

jQuery 02_

태그 선택자 #1_ 한 종류의 태그를 선택하고 싶은 경우 $(document).ready(function(){ $("h5").css("color", "red"); }); $(document).ready(function(){ $("p").css("color", "blue"); }); #2_ 여러 종류의 태그 선택자를 동시에 사용하고 싶은 경우 $(document).ready(function(){ $("h5, p").css("backgroundColor", "yellowgreen"); }); 클래스 선택자 특정한 클래스 속성을 가진 문서 객체를 선택하는 선택자이다. jQuery(document).ready(function(){ $(".item").css("color", "orange"); }); $(docu..