js21 [JS] async와 await async와 await ES2017에 도입된 문법으로서, Promise 로직을 더 쉽고 간결하게 사용할 수 있게 해줍니다. 유의해야 할 점이 async/await가 Promise를 대체하기 위한 기능이 아니라는 것입니다. 내부적으로는 여전히 Promise를 사용해서 비동기를 처리하고, 단지 코드 작성 부분을 프로그래머가 유지보수하게 편하게 보이는 문법만 다르게 해줄 뿐이라는 것입니다. 🏷️ async와 await 기본 사용법 async 와 await 는 절차적 언어에서 작성하는 코드와 같이 사용법도 간단하고 이해하기도 쉽습니다. function 키워드 앞에 async 만 붙여주면 되고, 비동기로 처리되는 부분 앞에 await 만 붙여주면 됩니다. // 기존 Promise.then() 형식 function.. 2023. 12. 9. [React] React Context React Context 리액트 context는 앱에서 컴포넌트에게 props를 사용하지 않고 필요한 데이터를 넘겨주며 사용할 수 있게 해 줍니다. 다시 말해, 리액트 context는 컴포넌트들이 데이터(state)를 더 쉽게 공유할 수 있도록 해줍니다. 🏷️ 사용해야 할 때 리액트 context는 앱의 모든 컴포넌트에서 사용할 수 있는 데이터를 전달할 때 유용합니다. ✅ 데이터 종류 ▪️ 테마 데이터 (다크 모드 혹은 라이트 모드) ▪️ 사용자 데이터 (현재 인증된 사용자) ▪️ 로케일 데이터 (언어 혹은 지역) 데이터는 자주 업데이트할 필요가 없는 리액트 context에 위치해야 합니다. 왜냐하면 context는 전체적인 상태 관리를 위해 만들어진 시스템이 아니기 때문입니다. context는 데이터를.. 2023. 11. 29. [JS] Axios Axios Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다. 브라우저 호환성 Axios 특징 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용 Promise(ES6) API 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변경 HTTP란? HTML과 같은 하이퍼미디어 문서를 전송하기위한 애플리케이션 레이어 프로토콜입니다. Axios GET방식 GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도입니다. 주소에 있는 쿼리스트링을 활용해서 정보를 .. 2022. 12. 11. [JS] Fetch Fetch JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다. XMLHttpRequest와 비슷하지만 fetch는 Promise를 기반으로 구성되어 있어서 더 간편하게 사용할 수 있다는 차이점이 있습니다. XMLHttpRequest란? XMLHttpRequest를 이용하면 웹 페이지를 전부 로딩하고도 서버로부터 데이터를 요청하거나 전송받을 수 있으며, 웹 페이지를 전부 로딩하지 않고도 일부만을 갱신하는 게 가능해진다. 따라서, AJAX는 JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술이라고 할 수 있다. 기본 구조 fetch(url) .then(res => { console.log(res) }) .catch(er.. 2022. 12. 10. [JS] Promise Promise 프로미스는 자바스크립트 비동기 처리에 사용되는 객체로 비동기 함수 호출 또는 비동기 연산이 완료되었을 때, 이후에 처리할 함수나 에러를 처리하기 위한 함수를 설정하는 모듈입니다. 자바스크립트의 비동기 처리란? ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다. Promise가 필요한 이유 자바스크립트는 비동기 처리를 위해 콜백함수를 사용합니다. 하지만 콜백을 너무 남용하게 되면 우리가 흔히 부르는 콜백 지옥에 빠질 수가 있습니다. 또한 에러처리도 힘들 뿐더러 여러 개의 비동기 처리를 한번에 하는데 한계가 있습니다. 이런 콜백 함수의 단점을 보완하며 비동기 처리에 사용되는 객체를 프로미스(Promise)라 합니다. 콜백 함수란? 함.. 2022. 11. 30. [JS] AJAX AJAX (Asynchronous Javascript And XML) 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능으로, 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고 페이지의 일부분의 데이터만을 갱신하는 기법입니다. 비동기 방식이란? 웹페이지를 리로드하지 않고 데이터를 불러오는 방식으로 필요한 부분만 불러와 사용할 수 있는 것이 매우 큰 장점입니다. XMLHttpRequest 란? XMLHttpRequest 객체는 Ajax 의 핵심이며, 클라이언트와 서버 간의 통신을 담당하는 객체입니다. 또한 클라이언트와 서버 간에 통신할 때 가장 먼저 생성해야 하는 객체입니다. AJAX라는 기술은 여러가지 기술이 혼합적으로.. 2022. 11. 27. 이전 1 2 3 4 다음
