- 객체 리터럴 방식
- 비동기 통신
- 콜백 헬 지옥 개선하기 위한 promise
- asnyc&await
- axios와 fetch API
- node.js common js 모듈시스템
⚠🆗강의 들으며 문법 알게된것들
let person = {}; 객체 리터럴 방식(중괄호)
const person = {} 객체를 상수로 선언해도 프로퍼티 변경가능. 함수자체를 바꾸는건 아니다.
delete person["name"]
const person = {
name: "이정환", //멤버
age: 25,
say: function () {
console.log("안녕");
} //메서드 -> 방법
};
person.say();
console.log(`name: ${"name" in person} ); | name: true //프로퍼티에 있다
const personKeys = Object.keys(person); | ['name', 'age', 'tail']
for(let i = 0; i < arr.length; i++) { console.log(arr[i]) }
arr.forEach((elm) => console.log(elm * 3))
console.log(arr.includes(number)) //요소들 중에 같은 number가 존재하는지?
indexOf가 존재하지 않으면 -1,
arr.findIndex((elm) => {return elm.color === "blue"; }) // 2
arr.find((elm) => {return elm.color === "blue"; }) // { color:'blue' } 요소자체
arr.slice(0번부터 , 4(3번)까지)
//배열 비교
let numbers = [0, 1, 3, 2, 10, 30, 20]
const compare = (a, b) => {
//1. 같다
//2. 크다
//3. 작다
if ( a > b) {
return 1;
}
if ( a < b) {
return -1;
}
return 0;
};
numbers.sort(compare);
비동기 통신을 이해하기 위한 약간의 개념 정리!
웹(web)
인터넷으로 연결된 컴퓨터들 간의 데이터 통신을 할 수 있도록 해주는 소프트웨어
웹에서 통신을 주고받을 때의 방식(프로토콜), HTTP
정보를 제공하는 컴퓨터 (호스트서버) : 요청을 받아서 응답하는 작업을 한다.
정보를 제공받는 컴퓨터 (클라이언트) : 정보를 요청하는 작업을 한다
비동기 통신 : 통신을 이용해 정보를 주고받는 작업을 수행하되, 기존 페이지는 유지한다.
**우리가 수행할 비동기 통신 형태**
우리가 만든 페이지(리액트앱)가 서비스되는 와중에ㅡ
어떤 서버에게 데이터를 달라고 해서 받아온다.
그리고 데이터가 무사히 받아지면, 그때 페이지의 일부분만 업데이트 한다.Promise의 동작 방식
1) Promise 객체를 생성하고 비동기 작업을 정의합니다.
2) 작업이 완료되면 이행 상태로 결과를 반환하거나, 실패 시 거부 상태로 실패 사유를 반환합니다.
3) .then() 메서드를 사용하여 이행 상태 처리 로직을 정의하거나, .catch() 메서드를 사용하여 거부 상태 처리 로직을 정의합니다.
특히 비동기 작업이 연속적으로 이어질 때 코드의 가독성이 떨어지고 유지보수가 어려우므로 이러한 문제를 해결하기 위해 Promise에 대해 공부하게 되었습니다. Promise를 사용하면 비동기 작업을 좀 더 구조적으로 처리할 수 있으며, 미래의 코드 작성을 더욱 예측 가능하게 만들어줍니다.
// 비동기 작업을 시뮬레이션하는 함수
function simulateAsyncWork(success) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (success) {
resolve("작업이 성공적으로 완료되었습니다.");
} else {
reject("작업을 처리하는 중에 오류가 발생했습니다.");
}
}, 1000); // 1초 후 작업 완료 또는 실패
});
}
// Promise 사용 예시
simulateAsyncWork(true)
.then((result) => {
console.log(result); // 작업이 성공적으로 완료되었습니다.
})
.catch((error) => {
console.error(error); // 작업을 처리하는 중에 오류가 발생했습니다.
});
// 연속적인 비동기 작업 처리 예시
simulateAsyncWork(true)
.then((result) => {
console.log(result); // 작업이 성공적으로 완료되었습니다.
return simulateAsyncWork(true); // 다음 비동기 작업을 반환
})
.then((result) => {
console.log(result); // 작업이 성공적으로 완료되었습니다.
})
.catch((error) => {
console.error(error); // 작업을 처리하는 중에 오류가 발생했습니다.
});async 함수란?
async 함수는 비동기적인 동작을 수행하는 함수를 선언할 때 사용됩니다. 함수 앞에 async 키워드를 붙이면 해당 함수는 항상 Promise를 반환합니다. 이 함수 안에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있습니다.
await 키워드
await 키워드는 async 함수 내에서만 사용할 수 있습니다. await 다음에는 Promise를 반환하는 비동기 함수나 작업이 위치하며, 해당 작업이 완료될 때까지 async 함수의 실행이 일시 중지됩니다. 작업이 완료되면 해당 결과가 반환됩니다.
async/await의 장점
가독성 향상: Promise 체인보다 가독성이 좋습니다. 코드가 동기식처럼 읽히기 때문에 비동기 작업 흐름을 이해하기 쉽습니다.
에러 처리 용이: try/catch 구문을 사용하여 비동기 작업 내에서 발생한 에러를 쉽게 처리할 수 있습니다.
코드 구조 개선: 중첩된 콜백 함수를 사용하는 것보다 코드 구조를 더 간결하게 유지할 수 있습니다.
그러면 promise랑 async await이 같은 개념인건가? async가 promise특징을 가지고 있는건가?..
어느정도 맞는 말입니다. async/await은 내부적으로는 Promise를 기반으로 동작합니다. 둘은 비슷한 목적을 가지고 있지만 사용법과 코드 구조에서 차이가 있습니다.
Promise: 성공(resolve)과 실패(reject) 두 가지 상태를 가집니다. .then()과 .catch() 메서드를 사용하여 비동기 작업의 결과를 처리합니다.
async&await: Promise를 더 읽기 쉽게 사용할 수 있도록 도와주는 문법입니다. async 함수 내에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있습니다. 이를 통해 비동기 코드가 동기 코드처럼 읽히게 됩니다.
async & await 예시:
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching data:', error);
throw error;
}
}❗❕ Promise와 async/await은 비동기 작업을 다루는 두 가지 다른 방식입니다. Promise, async/await와 같은 비동기 처리 방식은 개발자가 직접 비동기 처리 로직을 구현하거나 제어할 필요 없이, 보다 간단하게 비동기 작업을 처리할 수 있도록 도와줍니다. Promise는 비동기 작업의 결과를 관리하고, async/await는 비동기 작업의 흐름을 보다 동기식으로 작성하도록 도와줍니다. 이렇게 함으로써 프로그램이 더 직관적이고 가독성 있게 작성될 수 있습니다.
Axios와 Fetch API: 비동기 데이터 요청의 두 얼굴
Axios란?
Axios는 자바스크립트에서 많이 사용되는 HTTP 클라이언트 라이브러리입니다. 브라우저 및 Node.js 환경에서 모두 사용 가능하며, 간편한 API와 다양한 기능으로 널리 알려져 있습니다.
- Promise 기반: Axios는 비동기 작업을 Promise 기반으로 처리합니다. 이를 통해 비동기 코드를 보다 가독성 있게 작성할 수 있습니다.
- 요청과 응답 인터셉터: 요청과 응답을 가로채서 전처리나 후처리를 할 수 있는 인터셉터 기능을 제공합니다.
- CSRF 보호: Axios는 기본적으로 CSRF(Cross-Site Request Forgery) 보호를 제공합니다.
- 요청 취소 및 타임아웃 설정: 요청을 취소하거나 타임아웃을 설정할 수 있습니다.
- 다양한 데이터 포맷 지원: JSON, FormData, ArrayBuffer 등 다양한 데이터 포맷을 지원합니다.
import axios from 'axios';
// GET 요청 예시
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
Fetch API란?
Fetch API는 웹 브라우저 내장 API로서, 네트워크 요청을 처리하는데 사용됩니다. 주로 JSON 데이터를 주고받는 데에 사용되며, Axios와 비교하여 더 간단한 API를 제공합니다. 주요 특징은 다음과 같습니다.
- Promise 기반: Fetch API도 Axios와 마찬가지로 Promise 기반으로 비동기 작업을 처리합니다.
- 간단한 사용법: Axios보다 API가 더 간단하며, 기본적인 요청과 응답을 처리하는 데 충분합니다.
- 브라우저 내장 기능: Fetch API는 브라우저에 내장되어 있어 별도의 라이브러리 설치가 필요하지 않습니다.
- CORS 요청 처리: Cross-Origin Resource Sharing (CORS) 요청을 처리하는데 사용할 수 있습니다.
⭕ 사용성 비교
Axios와 Fetch API는 모두 비동기 데이터 요청을 처리하는 도구이지만+
Axios는 더 많은 기능과 설정 옵션을 제공하며, 좀 더 복잡한 요청 및 응답 처리 시 유용합니다.
Fetch API는 브라우저에 내장되어 있어 별도의 라이브러리 설치가 필요 없으며, 간단한 요청을 처리하기에 편리합니다.
종합적으로, 간단한 요청을 처리하거나 브라우저 환경에서 작업할 때는 Fetch API를 사용하는 것이 좋습니다. 반면에 복잡한 요청 및 응답 처리, 인터셉터 기능 등을 활용하고자 할 때는 Axios를 선택하는 것이 더 유리할 수 있습니다.
Axios와 Fetch API는 프로젝트의 요구 사항에 따라 선택하여 사용하면 됩니다. 비동기 데이터 요청의 중요한 부분을 담당하기 때문에, 각각의 특징과 장단점을 고려하여 적절히 활용하면 좋습니다.
common.js 모듈 ?
Node.js는 CommonJS 모듈 시스템을 사용하여 모듈을 정의하고 재사용하는 방식으로 JavaScript 코드를 구성합니다. 이것은 Node.js에서 모듈을 생성하고 사용하는 데 사용되는 기본적인 방식입니다.
// math.js
function add(a, b) {
return a + b;
}
/*모듈 내보내기 */
module.exports = {
add: add
};// main.js
/* 다른 모듈에서 내보낸 항목을 가져오기 위해서는 require 함수를 사용 */
const mathModule = require('./math.js');
const sum = mathModule.add(5, 3);
console.log(sum); // 출력: 8🔺주의 사항
CommonJS 모듈은 동기적으로 동작합니다. 모듈이 가져와지면 해당 모듈의 코드가 실행되며, 코드 실행이 완료되기 전까지는 다음 코드로 진행되지 않습니다.
Node.js 환경에서만 동작하며, 웹 브라우저 환경에서는 사용할 수 없습니다.
ES6 이후의 자바스크립트에서는 더 많은 기능을 제공하는 ES6 모듈 시스템이 도입되었습니다.
좋은 글 감사합니다. 자주 올게요 :)