Javascript/javascript20 프론트엔드 개발자를 위한 Axios 입문 Axios는 자바스크립트에서 가장 많이 사용하는 HTTP 클라이언트 라이브러리 중 하나다. fetch API가 기본으로 제공되지만, Axios는 여러 면에서 개발자에게 더 직관적이고 편리한 사용 경험을 제공한다. 특히 REST API와 자주 소통하는 프론트엔드 개발자에게 필수 도구로 자리 잡았다. 목차 AxiosAxios는 Promise 기반의 HTTP 클라이언트로, 브라우저와 Node.js 모두에서 작동한다. 네트워크 요청을 보내고, 응답을 처리하며, 요청이나 응답을 가로채거나, 기본 설정을 지정할 수 있는 다양한 기능을 제공한다.# 설치npm install axios 사용법import axios from 'axios';axios.get('https://api.example.com/data') .th.. 2025. 5. 27. fetch API란? JavaScript에서 비동기 HTTP 요청 처리 fetch는 JavaScript에서 비동기적으로 네트워크 리소스를 요청하는 기능을 제공하는 Web API이다.XMLHttpRequest의 복잡함을 대체하기 위해 등장했으며, 간결한 문법, Promise 기반의 처리 방식, 그리고 유연한 옵션 구성이 특징이다.목차fetch의 특징Promise 기반 fetch는 자바스크립트의 Promise 객체를 기반으로 동작한다. 이는 과거 XMLHttpRequest에서 사용되던 콜백 방식보다 훨씬 깔끔하고 직관적인 비동기 흐름 제어가 가능하다는 의미다. 요청 결과는 .then()과 .catch() 체이닝을 통해 순차적으로 처리할 수 있어 코드의 가독성을 높인다. 간결한 문법 fetch는 기존의 XMLHttpRequest보다 훨씬 간단한 문법을 제공한다. .. 2025. 5. 25. 자바스크립트 클로저 closure란? 클로저는 자바스크립트에서 가장 매력적이면서도 때로는 헷갈리기 쉬운 개념 중 하나다. 쉽게 말해, 클로저는 함수가 생성될 때 그 함수가 참조하는 외부 변수 환경까지 함께 기억하는 기능이다. 이 덕분에 함수가 실행되고 난 뒤에도 내부에서 선언된 변수에 계속 접근할 수 있다.목차클로저의 개념 자바스크립트 함수는 자신이 만들어질 당시의 스코프(변수 환경)를 기억한다. 그리고 함수가 실행될 때 이 기억한 변수 환경을 사용할 수 있다.즉, 함수 바깥에 선언된 변수들을 함수 내부에서 그대로 ‘붙들고’ 있는 것과 같다. 왜 클로저가 생기는가? 자바스크립트에서는 함수가 내부에 다른 함수를 포함할 수 있다. 내부 함수가 외부 함수의 변수에 접근할 때, 내부 함수가 외부 함수 실행이 끝난 이후에도 .. 2025. 5. 23. 자바스크립트 history로 세션 히스토리 관리하기 이번 포스팅에서는 자바스크립트의 History API에 대한 내용을 다뤄보려고 합니다. 웹 개발을 하다 보면 사용자가 뒤로 가기와 앞으로 가기를 누를 때 페이지 전환을 어떻게 다루는지가 중요한 부분이며, 이때 History API는 매우 유용한 도구입니다. 웹 페이지의 브라우저 히스토리를 조작하고 관리하는 방법을 배우며, 사용자 경험을 개선하는 방법을 알아보도록 하겠습니다.목차History API란?자바스크립트의 History API는 웹 브라우저의 히스토리를 관리하고 조작할 수 있는 기능을 제공합니다. 사용자가 뒤로가기 또는 앞으로 가기 버튼을 클릭할 때 발생하는 페이지 전환을 자바스크립트로 제어하는 데 사용됩니다. 이를 통해 단일 페이지 애플리케이션(SPA)에서도 브라우저의 히스토리를 제어하며 사용자.. 2023. 9. 26. 자바스크립트 Math.random()으로 난수 생성하기 이번 포스팅에서는 자바스크립트의 Math.random() 함수에 대해 다뤄보려고 합니다. Math.random() 함수는 난수(임의의 숫자)를 생성하는 데 사용되며, 프로그래밍에서 다양한 분야에서 활용되는 중요한 기능 중 하나입니다. 난수 생성은 게임, 암호화, 테스트 데이터 생성 등 다양한 상황에서 필요한 기능으로, 자바스크립트에서는 Math.random() 함수를 통해 이러한 요구를 충족시킬 수 있습니다.포스팅을 통해 Math.random() 함수의 기본 개념부터 활용 사례까지 다양한 내용을 다뤄보겠습니다. 이 함수를 어떻게 사용하며, 어떻게 다양한 난수 시퀀스를 생성하고 원하는 범위 내의 난수를 얻을 수 있는지 알아보겠습니다.목차Math.random() 함수란?자바스크립트의 Math.random().. 2023. 9. 19. 자바스크립트 parseInt() 함수를 활용한 문자열 숫자 변환하기 안녕하세요! 이번 포스팅에서는 자바스크립트의 내장 함수인 parseInt() 함수에 대해 자세히 알아보려고 합니다. 정수로 변환해야 하는 문자열이 있을 때 유용하게 활용할 수 있는 parseInt() 함수에 대한 내용을 다뤄보겠습니다. 문자열을 정수로 변환하는 프로세스와 함께 parseInt() 함수의 활용법에 대해서도 알아보겠습니다. parseInt() 함수의 소개 parseInt() 함수는 자바스크립트에서 제공하는 내장 함수 중 하나로, 문자열을 정수로 변환하는 기능을 수행합니다. 이 함수는 주어진 문자열을 분석하고, 해당 문자열이 숫자로 시작하는 부분을 추출하여 정수로 변환합니다. 문자열의 첫 부분부터 숫자로 변환 가능한 부분까지만 고려하며, 숫자로 변환할 수 없는 부분이 나타나면 변환을 중단합니다.. 2023. 9. 12. 이전 1 2 3 4 다음
