본문 바로가기

JavaScript

(41)
42. fetch api fetch api - 브라우저 api - Request나 Response와 같은 객체를 이용하여 HTTP 프로토콜을 통해 원격지의 정보를 가져오기 위해 사용하는 api - Promise를 기반으로 동작 fetch api 사용 예제 function fetchAPI() { return fetch('https://www.7timer.info/bin/astro.php?lon=113.2&lat=23.1&ac=0&unit=metric&output=json&tzshift=0') .then((response) => response.json()) .then((data) => data); } fetchAPI().then((datas) => { console.log(datas.dataseries); }); fetch api..
41. JSON(JavaScript Object Notation) JSON(JavaScript Object Notation) - 데이터를 저장하거나 전송할 때 사용하는 경량의 Data 교환 형식 - 사람과 기계 모두 이해하기 쉬우며 용량이 작아서 XML을 대체하여 데이터 전송등에 많이 사용 - 데이터 포멧일 뿐, 통신 방법도 프로그래밍 문법도 아님 JSON의 특징 - 서버와 클라이언트간의 교류에서 일반적으로 많이 사용 - 자바스크립트를 이용하여 JSON 형식의 문서를 자바스크립트 객체로 변환하기 쉬움 - 자바스크립트 문법과 굉장히 유사하지만 텍스트 형식일 뿐 - 특정 언어에 종속되지 않으며, 대부분 프로그래밍 언어에서 JSON 포멧의 데이터를 핸들링 할 수 있는 라이브러리를 제공 자바스크립트 객체와의 차이점 - JSON은 이름과 값으로 구성된 프로퍼티의 정렬되지 않은 ..
40. async / await async / await - callback, Promise 비동기처리를 좀 더 쉽게 처리할 수 있도록 사용됨 - ES7에 추가된 문법 async / await 사용법 // 1. Promise(비동기 처리될 전체 함수)를 만들고자 하는 함수 앞에 async를 붙여줌 async function 함수명(){ ...; // 2. Promise 앞에 awit를 붙여줌 return 값; // 3. resolve() 값과 동일 } async / await 사용 예제 function getBanana() { return new Promise((resolve) =>{ setTimeout(() => { resolve('🍌'); }, 1000); }) } function getApple() { return new Prom..
39. 옵셔널 체이닝(Opthional Chaining) 옵셔널 체이닝(Opthional Chaining) - ECMA Script 11버전에 추가 - null 또는 undefined를 확인할 때 쓰이는 연산자 - ?., ?? 논리 연산자 사용 예제 // 논리 연산자(&&, ||) const obj1 = {name:'김사과'}; const obj2 = {name:'반하나', lover:'이메론'}; const bool1 = false; // obj1과 obj2 둘다 값이 있으므로 if(obj1 || obj2){ console.log("둘 다 또는 둘중에 하나가 True"); } // 객체간의 논리연산자 // and 연산 let result = obj1 && obj2; console.log(result); //{name: '반하나', lover: '이메론'} /..
38. 프로미스(Promise) 프로미스(Promise) - 자바스크립트 비동기 처리에 사용되는 객체 - 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용 프로미스(Promise) 사용 시 장점 - 비동기 처리 시점을 명확하게 표현 - 연속된 비동기 처리 작업을 수정, 삭제, 추가하기 편하고 유연하게 만듬 - 코드의 유지 보수성이 증가 프로미스(Promise) 문법 const 프로미스객체명 = () => new Promise((resolve, reject) => { }); - 비동기 처리가 성공 또는 실패 등의 상태 정보를 갖게됨 - resolve가 호출된 경우: 성공 - reject가 호출된 경우: 실패 프로미스(Promise)를 리턴받은 객체 - .then(정상적으로 프로미스 객체가 리턴되었다면 필요한 일을 수행) - .catc..
37. 예외처리 예외처리 - 오류가 발생되었을 때 별도의 처리를 하거나 무시하고 프로그램을 실행하는 것 - 오류가 발생될 것으로 예상되는 문장을 try 블록에 코딩하고, try 블록에 코딩된 내용을 실행하다가 오류가 발생하면 더이상 try 블록의 내용을 실행하지 않고 해당 오류의 catch블록에 코딩된 내용을 실행 예외처리 문법 try{ 예외가 발생할 것으로 예상되는 문장; ... ... } catch(error 객체){ 예외가 발생했을 때 처리할 문장; ... ... } finally{ 예외와 관계없이 무조건 실행할 문장; } 예외처리 예제 1 function readFile(path) { // throw new Error를 통해 에러를 강제로 발생 시킴 throw new Error('파일 경로를 찾을 수 없음.');..
36. 맵(map) 맵(map) - key, Value로 이루어진 데이터 집합의 자료구조 맵(map) 선언 const 맵이름 = new Map([['키1', '값1'], ['키2', '값2'],...]); 맵(map) 사용 출력 const map = new Map([ ['apple', '🍎'], ['banana', '🍌'] ]); console.log(map); // Map(2) {'apple' => '🍎', 'banana' => '🍌'} size - 맵의 요소의 갯수를 반환 const map = new Map([ ['apple', '🍎'], ['banana', '🍌'] ]); console.log(map.size); // 2 has("key") - 키의 존재를 확인하여, boolean 값을 반환 const map = ne..
35. 세트(Set) 세트(Set) - set 객체는 중복되지 않는 유일한 값들의 집합 - 요소 순서에 의미가 없음 - 인덱스로 요소에 접근할 수 없음 - 교집합, 합집합, 차집합, 여집합 등을 구현 세트(Set) 선언 const 세트명 = new Set([요소1, 요소2, 요소3, ..]); const set = new Set([1,2,3,4,5]); console.log(set); // Set(5) {1, 2, 3, 4, 5} size - set의 길이를 반환 const set = new Set([1,2,3,4,5]); console.log(set.size); // 5 has() - set의 값의 유무를 boolean으로 반환 const set = new Set([1,2,3,4,5]); console.log(set.has..