본문 바로가기

Javascript40

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.
[jQuery] 제이쿼리 fadein, fadeout을 이용한 텍스트 문구 자동 롤링 만들기 제이쿼리의 텍스트 문구에 동적인 효과를 주는 fadein과 fadeout 기능이며, 해당 이능을 통해서 여러 문구가 부드럽게 전환되며 사용자에게 시각적인 효과 기능을 제공한다.목차jQuery의 유용한 기능 중 하나인 'fadein'과 'fadeout'을 이용하여 텍스트 문구가 자동으로 롤링되는 효과를 구현하는 방법에 대해 정리해 보려고 한다.많은 웹사이트에서는 텍스트 문구가 일정 간격으로 위아래로 자연스럽게 움직이는 롤링 효과를 자주 볼 수 있다. 이러한 효과는 사용자들의 눈길을 끌고, 웹사이트에 동적인 요소를 추가하는데 매우 효과적이다. jQuery를 활용하면 간단하게 이러한 기능을 구현할 수 있다.fadein과 fadeout의 기능'fadein'과 'fadeout'은 jQuery에서 제공하는 애니메이.. 2024. 1. 21.
Vue3 watch를 이용한 데이터 변경 감지하기 오늘은 Vue3의 watch 기능에 대한 내용을 주제로 포스팅하려고 합니다. Vue 3의 watch는 데이터의 변화를 감지하고, 변화에 반응하여 원하는 동작을 수행하는데 유용한 기능입니다. 데이터 변화를 감시하고 적절한 처리를 할 수 있는 watch를 효과적으로 활용하는 방법에 대해 알아보겠습니다.목차watch란?watch란 Vue 애플리케이션에서 데이터의 변경을 감지하고, 해당 데이터가 변화할 때 특정 로직을 실행할 수 있는 기능입니다. Vue 컴포넌트 내에서 데이터의 상태 변화를 감시하며, 데이터가 변경될 때마다 원하는 동작을 수행하거나 사이드 이펙트를 처리할 수 있습니다.특징1. 데이터 감시watch를 사용하면 정의한 데이터나 데이터의 특정 속성을 지켜보며 변경 여부를 모니터링합니다.2. 리액티브 .. 2023. 10. 2.
자바스크립트 history로 세션 히스토리 관리하기 이번 포스팅에서는 자바스크립트의 History API에 대한 내용을 다뤄보려고 합니다. 웹 개발을 하다 보면 사용자가 뒤로 가기와 앞으로 가기를 누를 때 페이지 전환을 어떻게 다루는지가 중요한 부분이며, 이때 History API는 매우 유용한 도구입니다. 웹 페이지의 브라우저 히스토리를 조작하고 관리하는 방법을 배우며, 사용자 경험을 개선하는 방법을 알아보도록 하겠습니다.목차History API란?자바스크립트의 History API는 웹 브라우저의 히스토리를 관리하고 조작할 수 있는 기능을 제공합니다. 사용자가 뒤로가기 또는 앞으로 가기 버튼을 클릭할 때 발생하는 페이지 전환을 자바스크립트로 제어하는 데 사용됩니다. 이를 통해 단일 페이지 애플리케이션(SPA)에서도 브라우저의 히스토리를 제어하며 사용자.. 2023. 9. 26.
Vue3의 provide와 inject로 효율적인 데이터 전달하기 오늘은 Vue3의 provide와 inject에 대한 내용을 주제로 포스팅하려고 합니다. 이 두 가지 기능은 Vue 애플리케이션에서 컴포넌트 간 데이터를 전달하고 공유하는 데 매우 유용한 방법을 제공합니다. 'provide'는 상위 컴포넌트에서 데이터를 제공하고, 'inject'는 하위 컴포넌트에서 이 데이터를 주입받아 사용하는 메커니즘을 제공합니다. 이를 통해 컴포넌트 간에 유연하게 데이터를 전달하고 상태를 관리할 수 있습니다.목차provide와 inject의 소개provide provide는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 제공하기 위한 기능입니다. 상위 컴포넌트에서 provide 옵션을 사용하여 데이터를 등록하고, 하위 컴포넌트에서 inject 옵션을 사용하여 이 데이터를 주입받습니다.. 2023. 9. 25.

티스토리툴바