728x90 반응형 javascript/javascript 고급문법10 [javascript] Promise & Async/Await Promise 비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트 정해진 기간의 기능을 수행하고나면 정상적으로 기능이 수행되면 성공의 메시지와 결과값을 전달하고기능을 수행하다가 예상치 못한 결과가 생겼다면 에러를 전달한다 자바스크립트의 클래스이다 state(상태) promise가 수행중이면 pending 상태임 promise가 수행이 종료되면 fullfilled가됨 promise가 수행중 오류가 발생하면 reject 2가지로 나눠짐 프로듀서 : 프로미스를 만들어서 제공하는 쪽 컨슈머 : 프로미스의 결과를 사용하는 쪽 구문) const promise = new Promise((resolve, reject)=>{ //생성자 resolve() //성공수행 reject() //성공실패수행 }); new 라는 .. 2023. 1. 24. [javascript] Fetch API Fetch API 도 XMLHttpRequest와 비슷하게 서버로부터 데이터를 받아오고 전송하지만 가장 큰 차이점은 Fetch API는 Promise방식으로 구성되어있다 그리고!!!! XMLHttpRequest보다 훨~~~씬 더 간결하다!!!!!! 구문) fetch("https://jsonplaceholder.typicode.com/posts/1") .then(Response=>Response.json()) //요청받은걸 제이슨데이터로 변환 .then(json=>console.log(json)); //변환받은걸 then으로 받음 에러 핸들링 사용 했을 때 2023.01.24 - [javascript 고급문법] - [javascript] try...catch(에러 핸들링) 방법 1 fetch("http:/.. 2023. 1. 24. [javascript] try...catch(에러 핸들링) 자바스크립트에서 오류는 try...catch문을 통해서 관리함 구문) try{ //code(코드에서 에러가 발생했다!!!) } catch(err){ //발생한 에러를 캐치에서 잡아줌 } 코드실행이 멈추지 않고 계속 진행하면서 에러를 잡아줌 콘솔을 잘 이용해야할거같당...후후 try 선언의 구성은 하나 이상의 try블록을 반드시 포함하며 catch블록과 finally블록 중 최소한 하나 혹은 둘다 포함하여 이루어짐 try...catch try...finally try...catch...finally try{ console.log("try 블럭 시작") throw new SyntaxError("구문이 틀렸어요: 다시작성") //SyntaxError 의도적으로 에러를 만들어줌 console.log("try 블.. 2023. 1. 24. [javascript] XMLHttpRequest ● XMLHttpRequest(XHR) 서버와 통신을 하도록 하는 객체 1. 객체는 서버와 상호작용하기 위해 사용 2. 전체 페이지를 새로고침하지 않아도 URL을 통해 데이터를 전송하거나 받아 올수 있음 3. XML데이터 통신 x, 모든 종류의 데이터 받아올 수 있음 4. 객체는 브라우저에서 제공하는 API임 node.js환경x ● ajax(Asynchronous javascript and xml) 동적으로 서버에서 데이터를 주고받는 기술 ● XML - 마크업 언어 ● JSON(javascript object notation) 오브젝트를 보고 만든 데이터포멧 텍스트를 기반으로 하여 파일이 가벼움 데이터를 직렬화하여 전송할때 쓰이는 파일 프로그램 언어와 플랫폼에 상관 없이 사용가능함 모바일에서도 서버와 전.. 2023. 1. 23. [javascript] this키워드 this 키워드는 사용되는 위치에 따라 this키워드에 바인드 된 객체가 달라짐! 콘솔에 this를 입력하면 console.log(this) 출력값 함수 안에 넣었을 때 function a() { console.log(this) } a() 출력값 this는 기본적으로 window를 가리킴!!!!!!!!! 객체 메서드 var obj = { a: function () { console.log(this) }} obj.a() 출력값 객체 메소드 a안의 this는 객체를 가리킴 이유는 객체의 메소드를 호출할 때 this를 내부적으로 바꿔주기 때문임 밑에 자료와 같이 바꿔주면 결과값 달라짐 명시적으로 this를 바꾸는 함수 메소드는 bind, call, apply를 사용하면 this가 객체를 가리킵니다 생성자일 경.. 2023. 1. 23. [javascript] Modules 자바스크립트 모듈 1. Module은 코드를 관리하는 작은 단위 2. Module을 이용하면 코드관리와 재활용이 편리해짐 3. 자바스크립트 파일을 분리하고 사용하는 기술 *es6부터 import문과 export문이 추가됨 export 내보내기!!!! 지시자를 변수나 함수앞에 붙이면 다른 외부 모듈에서 해당 변수나 함수를 import해서 사용할 수 있음 선언부 앞에 export 변수, 함수, 클래스 앞에 export 붙일 수 있음 //함수 export function ss() { 실행 구문 } //변수 export let ss = 5; //클래스 export class user { constructor(name) { this.name = name } } 선언부와 떨어진 곳 //함수 function ss().. 2023. 1. 11. [javascript]구조분해할당과 spread,rest 1. 배열의 요소를 직접 변수에 할당하는 것보다 코드를 줄일 수 있습니다. 2. , 를 사용하면 필요하지 않는 배열 요소는 제외시킬 수 있습니다 3. 할당할 값이 없을 때 기본값을 설정할 수 있음. 1. 배열구조분해할당 구문 let [new변수1, new변수2, new변수3] = 배열명 let fruits = ["🤦♂️", "🤦", "😁", "😢", "😎",] let [fruit1, fruit2, ...fruit3] = fruits; console.log(fruit1); //0번째 새로운 변수 출력 console.log(fruit2); //1번째 새로운 변수 출력 console.log(fruit3); //3번째 끝까지 새로운 변수 출력 let str1 = "green"; let str2 = "blue".. 2023. 1. 5. [javascript]정규표현식 정규표현식 (regular expression) 정규표현식 문자열에서 특정문자를 찾아내는 도구 하나의 언어 자바스크립트 뿐 아니라 다른 언어에서도 다양하게 활용됨 문자열을 검색하고 대체하는데 사용하는 형식 언어패턴 정규표현식 문법 1. 그룹과 범위 문자 의미 | 또는 () 그룹 [] 문자셋 [^] 부정문자셋, 괄호안의 문자가 아닐때 2.빈도수 문자 의미 ? 0또는 1 * 0또는 1이상 + 1이상 {n} n번 반복 {min, } 최소 {min, max} 최소, 최대 3. 문자 문자 의미 . 어떤글자(줄바꿈 문자 제외) \d 숫자 \D 숫자아님 \w 문자 \W 문자아님 \s 공백 \S 공백아님 4. 경계영역 문자 의미 \b 단어경계 \B 단어경계가 아님 ^ 문장의 시작 $ 문장의 끝 5. 추가 문자 의미 g.. 2022. 12. 23. [javascript]BOM(Browser Object Model) 1. navigator ▶ 사용자의 브라우져와 운영체제 정보를 제공하는 객체 종류 설명 navigator.appCodeName 방문자 브라우져 코드명을 반환 navigator.appName 방문자의 브라우져 이름을 반환 navigator.appVersion 방문자의 브라우져 버전 정보를 반환 navigator.language 방문자의 브라우져 사용언어를 반환 navigator.userAgent 방문자의 브라우져와 운영체제 종합 정보를 제공 navigator.platform 방문자의 브라우져를 실행하는 운영체제를 반환 navigator.product 방문자의 브라우져 사용 엔진 이름 반환 2. history ▶ 사용자가 방문한 사이트와 다음 방문한 사이트로 다시 돌아 갈 수 있는 속성과 메소드를 제공 종류.. 2022. 12. 14. [javascript] class class는 객체를 만들기 위한 도구, 템플릿 변수와 메소드를 정의하는 일종의 틀이다 객체를 정의하기위한 상태(멤버변수)와 메소드(함수)로 구성된다 예시 구문) class Person { constructor(name, age, hasJob) { this.name = name; this.age = age; this.hasJob = hasJob; } speak() { console.log("hello"); } eat() { console.log("먹는다"); } } let person3 = new Person("aaa", 30, false); 1. new 키워드를 사용하여 생성자 호출/생성 2. 호출을 하면 constructor() 생성자 함수를 찾아서 값들을 초기화 및 할당 (공장에서 같거나 다른 기계들.. 2022. 11. 30. 이전 1 다음 728x90 반응형
