이안의 평일코딩

async & await 어싱크 어웨이트는 자바스크립트 비동기 처리 패턴의 최신 문법으로 Promise, Callback의 단점을 해결하고 동기적(절차적)으로 코드를 작성할 수 있게 도와준다. async 함수는 함수의 앞에 async를 붙여주고 함수의 내부 로직 중 비동기 처리 로직 앞에 await를 붙여주면 된다. 자바스크립트 비동기 처리 function fetchData() { var user = $.ajax('users/1'); console.log(user); } 위와 같은 코드에서 ajax의 시간 지체로 다음 줄이 실행이 되지 않아 화면이 멈추거나 다른 동작을 할 수 없는 문제점 때문에 데이터를 받아왔을 때 코드를 실행할 수 있게 비동기 처리를 해줘야한다. 예전 비동기 처리 (callback) ..

디스트럭처링이란? 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의한다. 배열 구조 분해 var foo = ["one", "two", "three"]; var [one, two, three] = foo; console.log(one); // "one" console.log(two); // "two" console.log(three); // "three" 객체 구조 분해 var o = {p: 42, q: true}; var {p, q} = o; console.log(p); // 42 console.log(q); // true 디스트럭처링 예제 코드 functio..

ES6 이전의 함수 // ES5 - 함수 선언문 function sum(a, b) { return a + b; } // ES5 - 함수 표현식 var sum = function(a, b){ return a + b; } ES6+ 화살표 함수 function을 없애고 =>를 추가해서 코드가 더 간결해졌다. 그리고 간단한 연산 표현식은 { }와 return을 없애서 쓸 수 있다. // ES6+ - 함수 표현식(화살표 함수) var sum = (a, b) => { return a + b; } var sum = (a, b) => a + b; 타입스크립트의 화살표 함수 // TS - 화살표 함수 var sum = (a: number, b: number): number => { return a + b; }

타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한 언어로, 자바스크립트의 확장된 언어이다. 타입스크립트는 왜 쓸까? 타입스크립트는 에러의 사전 방지 및 코드의 자동 완성이 가능해 개발의 생산성을 향상시켜주기 때문이다. (미리 타입을 정해두면 실행 전에 오류가 뜨기 때문에 에러가 사전에 방지되고, 예를 들어, number라고 미리 타입을 정해두면 .만 찍어도 number와 관련된 코드의 자동완성(intellisense)이 가능해진다.) 기본 타입(문자열, 숫자, 배열, 튜플, 객체, 진위값) // 문자열 let str: string = 'hello'; // 숫자 let num: number = 10; // 배열 let arr: Array = [1,2,3]; let items: number[] = ..

자바스크립트란? HTML은 구조, CSS는 디자인, 그리고 자바스크립트(JavaScript)는 동작을 담당한다고 생각하면 쉽다. 자바스크립트 프레임워크인 리액트(React), 뷰(Vue.js), 앵귤러(Angular)를 제대로 활용하기 위해서 자바스크립트의 이해는 필수이며 프론트엔드 뿐만 아니라 백엔드 개발자에게도 중요하다고 말하기에 입아픈 언어라고 할 수 있다. HTML 외부에 자바스크립트를 기술하고 싶을 때는 하기와 같이 불러옵니다. 변수 let과 상수 const let은 데이터 값 변경이 가능한 변수이며, const는 데이터 값의 수정이 불가능한 상수이다. 둘 다 데이터 값에 이름을 지정하여 사용하고 싶고 데이터 값을 반복해서 사용하기 위해서 사용한다. // 변수 초기화는 변수 let만 가능하며 상..

2020.10.26(월) JavaScript => 태그를 추가, 데이터 변경, 화면 이동 => 이벤트 (프로그래머마다 처리 기능이 틀리다, 통일화) JQuery (DOM프로그램(문서 객체 모델 Document Object Model, 트리형태)) => JavaScript의 라이브러리 exam1.jsp Java Oracle JSP Spring JavaScript exam2.jsp 이름 성별 나이 홍길동 남자 30 심청이 여자 20 박문수 남자 35 exam3.jsp 이름: exam4.jsp

2020.10.15(목) 사용자 요청 ==> 서버를 거쳐서 처리 (Controller) ==> 자바 ==> 사용자 컴퓨터에서 처리 ==> 자바스크립트 ***1) 자바 : 데이터베이스 연결 ==> 데이터를 전송 (프로그래언어 => C/C++,C#,Java) ***2) HTML : 정적 = 브라우저 출력하는 언어 수정)==3) CSS : 시각화 = 보는거다 = 외국(인터넷 => 정보를 공유) 4) 자바스크립트 : 이벤트 처리 (이벤트 구동 방식) ========== ***ajax nodejs vuejs ***reactjs ======= ***jquery ==> 자바스크립트 (ES5) ==> ES8 1) 변수 var : 자동 지정변수 var i=10 ==> 정수 인식 (int) var i="aaa" ==> S..