본문 바로가기

자바스크립트

 (52)
axios로 서버에 요청할 때 생기는 에러 처리 방법 axios.get은 프로미스를 리턴하고 await를 앞에 붙여주면일반적인 프로미스에서 .then을 한 것과 같이 요청이 끝날 때까지 기다렸다가 결과 값을 리턴한다. 만약 try 문 안의 서버 요청 과정에서 상태 코드가 200이 아닌 에러가 발생했을 경우 catch로 넘어가게 되는데catch가 받는 ex 객체에는 request와 response가 있고이를 이용해서 어떤 경우의 오류인지를 파악해각 오류에 대한 대처를 할 수 있다. try { const response = await axios.get("https://jsonplaceholder.typicodef.com/posts");} catch (ex) { // ex.request 서버에 성공적으로 요청했을 때 설정됨 // ex.response 서버에 성공..
자바스크립트 객체의 속성을 확인하는 팁 객체에 뭐가 들어 있는지를 손쉽게 확인하려면 크롬의 개발자 도구 콘솔을 쓰면 된다. 그러나 이런 툴을 쓸 수 없을 때에는 다음과 같은 방법을 써보자. const obj = { value: 1, func: function() { } }; // obj에서 함수가 아닌 속성을 조회하고 싶을 때 for(let key in obj) { if(typeof obj[key] !== 'function') { console.log(key, obj[key]); } } // obj의 속성을 배열로 가져오고 싶을 때 const keys = Object.keys(obj); console.log(keys); // obj에 value 속성이 있는지 확인하고 싶을 때 if('value' in obj) { console.log('obj..
자바스크립트의 try, catch try { } catch(err) { console.log(error); } try 안에서 오류가 발생하면 각 오류에 해당하는 객체가 생성되고 곧바로 catch로 넘어가 인자로 error 객체를 조회할 수 있게 된다. 다음과 같은 오류 객체가 생성된 것과 같다. let error = new Error(message); let error = new SyntaxError(message); let error = new ReferenceError(message); let error = new TypeError(message); error.name에는 생성자과 이름과 동일한 값이 들어 있고 (Error, SyntaxError) error.message에는 생성자에 넣은 인자 값이 들어 있다. let error =..
async 함수와 await에 관한 팁 1. 함수 앞에 async를 붙이면 무조건 Promise를 리턴한다. 일반적인 값을 리턴하려해도 자동으로 Promise가 이를 감싼 뒤에 리턴한다. async function func() { return 1; } 2. async 함수 안에서 Promise.all을 쓰려면 다음과 같이 한다. let results = await Promise.all([ fetch(url1), fetch(url2), ... ]); Promise.all을 쓰면 각 배열에서 리턴하는 Promise를 기다린 다음에 진행한다. 자세한 내용은 다음 링크에 아주 잘 설명 돼 있다. https://javascript.info/async-await
Promise 이해하기 function getData(data) { return new Promise((resolve, reject) => { // 새로 생성된 Promise는 pending(대기) 상태가 된다. // .. resolve(data); // 여러 작업이 이뤄진 후 resolve나 reject를 만나면 각각 fulfilled(성공)이나 rejected(실패) 상태가 된다. }); } getData(1) // resolve나 reject로 settled 상태가 되면 then으로 넘어간다. // data로 resolve된 데이터를 받을 수 있다. .then(data => { // then에서 새로운 Promise를 자동을 생성하게 되고 return 값이 곧 위의 resolve와 같다. return data; }) //..
fetch를 이용해 서버의 데이터를 가져오는 방법 const server = 'https://koreanjson.com/posts/1'; fetch(server) .then(response => response.json()) .then(json => console.log(json)) .catch(error => console.log(error)); // 각 메소드는 Promise 객체를 리턴한다. // 1줄에서 가져온 것을 // 2줄에서 받아 json 형태로 바꾸고 // 3줄에서 json을 콘솔에 보여준다. // error가 발생하면 콘솔에 error를 표시한다. 참고 : https://koreanjson.com/
다른 파일에 들어 있는 클래스 불러오는 방법 class를 만들다보면 하나의 파일로 묶어둘 필요가 있다. 여러 클래스를 한 데 모아 놓은 js 파일을 모듈이라고 부른다. 대신 모듈을 불러다 쓰려면 모듈에서 export를 해주고 받는 쪽에서 import를 해줘야 한다. // Human 클래스를 export export class Human { constructor() { } } // person 파일에 들어 있는 Human 클래스를 import import { Human } from './person'; class Student extends Human { }
Spread Operator의 활용법 1. 둘 이상의 배열을 합칠 때 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; 2. 배열을 깊은 복사할 때 const arr4 = [...arr1]; 3. 둘 이상의 객체를 합칠 때 const obj1 = { prop1: 1 }; const obj2 = { prop2: 2 }; const obj3 = { ...obj1, ...obj2 }; 4. 객체를 깊은 복사할 때 const obj4 = [...obj1];

티스토리툴바