JS에서 에러를 처리하기 위해 try-catch 문을 이용할 수 있습니다. try 에는 동작시킬 명령들을 입력하고, catch 에는 try에 입력된 명령어 실행 중 에러가 발생했을 때 실행될 명령들을 입력합니다. try { // ReferenceError 발생하도록 작성 testFunc(); } catch (e) { console.log(e); // 에러 메세지 출력 console.log(e.message); // 에러 이름 출력 console.log(e.name); // 에러 타입 확인 console.log(e instanceof ReferenceError); // true } finally { console.log("에러가 발생과 무관하게 동작1"); } console.log("에러가 발생과 무관하게..

안녕하세요, 데브지안 입니다! 오늘은 날씨와 관련된 데이터들을 API를 통해 제공해주는 openweathermap 사이트에 대해 알아볼게요. 사이트 https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations. how to obtain APIs (..

안녕하세요! 데브지안입니다. 오늘은 부트스트랩 프레임워크 기반의 무료 테마들을 제공하는 사이트에 대해서 알아볼게요. https://bootswatch.com/ Bootswatch: Free themes for Bootstrap Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. bootswatch.com 글을 쓰는 지금 시점의 bootstrap 버전이 5.0.1까지 나왔는데 Bootswatch 또한 해당 버전을 이용한 테마들이 존재합니다! 해당 테마들은 MIT 라이센스이기 때문에 출처만 제대로 표기한다면 자유롭게 사용할 수 있습니다...

ES7에 추가된 기능으로 함수 앞에 async 키워드를 붙여 해당 함수가 Promise 객체를 리턴하도록 합니다. 따라서 비동기처리를 좀 더 간결하게 할 수 있습니다. await 키워드는 async 키워드가 붙은 함수 내부에서 Promise 객체 앞에 쓰이며, 해당 Promise 객체가 비동기 작업을 완료할 때 까지 기다립니다. async function myFunc() { const promise = new Promise((resolve, reject) => { setTimeout(() => resolve("Hello"), 1000); }); const error = false; if (!error) { // 해당 promise 객체가 resolve 될 때까지 기다린다. const res = await..

ES6에서 추가된 화살표함수를 이용하면 코드를 좀 더 짧고, 깔끔하게 작성할 수 있습니다. 아래 코드를 참조해 생략 시 주의할 점들을 파악하면 좋을 것 같아요. 또한 화살표함수를 이용하면 this 키워드의 binding이 이루어지지 않기 때문에 this를 사용할 때 주의가 필요합니다. // 기본 함수 const sayHello = function () { console.log("Hello"); } sayHello(); // function 키워드를 화살표로 대체할 수 있다. const sayHelloArrow = () => { console.log("Hello Arrow"); }; sayHelloArrow(); // 함수의 내용이 한 문장이라면 다음과 같이 중괄호를 없앨 수 있다. const sayHel..

XHR을 이용해 HTTP 요청을 보낼 수 있었던 것처럼 Fetch API를 이용해 HTTP 요청을 보낼 수 있습니다. Fetch API는 Promise 객체를 리턴합니다. 따라서 then 메서드를 이용해 비동기 작업을 진행할 수 있습니다. res에 해당하는 인자는 fetch를 이용해 보낸 HTTP 요청결과에 따른 응답객체가 만들어져 전달됩니다. 해당 응답객체의 prototype에 있는 text 메서드를 이용해 해당 응답의 body 내용을 텍스트로 가져올 수 있는데, 해당 메서드의 리턴 결과 또한 Promise 이기 때문에 그에 따른 then 메서드를 이용해야 합니다. document.querySelector("#button1").addEventListener("click", getText); functi..

비동기 작업의 다른 방법으로는 ES6에서 추가된 Promise 객체를 이용하는 방법이 있습니다. Promise라고 붙여진 이름처럼 비동기 처리를 완료한 뒤 특정한 작업을 수행하기로 '약속' 합니다. resolve 인자는 비동기요청이 끝나고 수행할 함수를 전달받기 위함이며, reject 인자는 요청 중 에러가 발생했을 때 수행할 함수를 전달받기 위해 존재합니다. resolve 인자는 Promise 객체의 then 메서드를 통해 비동기 처리완료 시 수행될 함수를 전달받고, reject 인자는 catch 메서드를 통해 함수를 전달받습니다. const posts = [ {title: "Post one", body: "this is post one"}, {title: "Post two", body: "this i..

Content-Type 헤더를 지정해주는 것과 보낼 데이터를 JSON 문자열로 변경하여 보내야 하는 점에 주의하자. // Make an Http POST Request EasyHttp.prototype.post = function (url, data, callback) { this.http.open("POST", url, true); this.http.setRequestHeader("Content-type", "application/json"); let self = this; this.http.onload = function () { callback(null, self.http.responseText); } this.http.send(JSON.stringify(data)); };

1. onload 콜백함수 내부에서 this 사용 ... // onload에 할당된 함수가 callback 함수로 이용되기 때문에 실제 동작시 this가 가리키는 객체가 달라짐에 주의하자. let self = this; this.http.onload = function () { // if (this.http.status === 200)

안녕하세요 데브지안 입니다! 오늘은 테스트 용도로 사용할 수 있는 Fake REST API 제공 사이트인 JSON Placeholder에 대해 알아볼게요 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB As of Dec 2020, serving ~1.8 billion requests each month. jsonplaceholder.typicode.com HTTP 요청을 하고 응답을 받아 원하는 처리를 하는 프론트엔드 작업 시 가상의 데이터가 필요할 때 유..