본문 바로가기

IT/javascript71

자바스크립트 콜백 함수(Callback Function) 자바스크립트에서 콜백(callback) 함수란, 다른 함수의 인자로 전달되어 특정 이벤트가 발생했거나 특정 작업이 끝났을 때 호출되는 함수를 의미합니다. 즉, 콜백 함수는 비동기적으로 처리되는 작업이 완료될 때까지 기다리지 않고, 미리 등록해둔 함수를 호출해주는 역할을 합니다. 이러한 특징 때문에 콜백 함수는 비동기 프로그래밍에서 핵심적인 역할을 하며, 이벤트 처리, HTTP 요청 등 다양한 분야에서 활용됩니다. 사용법 콜백 함수를 사용하면, 비동기적으로 처리되는 작업에서 발생하는 결과 값을 처리할 수 있습니다. 예를 들어, setTimeout 함수를 이용해 일정 시간이 지난 후에 특정 작업을 실행하도록 할 때, 콜백 함수를 이용해 이후에 실행될 작업을 지정할 수 있습니다. setTimeout(funct.. 2023. 4. 19.
자바스크립트 프로토타입 이란? 자바스크립트에서 모든 객체는 프로토타입을 가집니다. 프로토타입은 객체를 만들기 위한 기본 틀이라고 할 수 있으며, 객체의 메서드나 프로퍼티를 상속받는 데 사용됩니다. 프로토타입 체인 프로토타입 체인(Prototype Chain)은 객체에서 특정 프로퍼티나 메서드에 접근할 때, 해당 객체에 해당하는 프로퍼티나 메서드가 없으면 상위 객체의 프로토타입에서 해당 프로퍼티나 메서드를 찾는 과정을 말합니다. 이 과정은 해당 객체의 프로토타입이 다시 다른 프로토타입을 가지고 있을 경우 계속해서 반복됩니다. 이렇게 상위 프로토타입으로 올라가면서 프로퍼티나 메서드를 찾는 과정을 "프로토타입 체인을 따라 올라가기"라고 합니다. 프로토타입 객체 생성 프로토타입 객체는 함수 객체에서 생성됩니다. 함수 객체를 생성한 후, pr.. 2023. 4. 18.
JSON 이란? JSON은 JavaScript Object Notation의 약어로, 데이터 교환을 위해 사용되는 경량 데이터 형식입니다. 이는 사람이 읽을 수 있으며, 기계가 쉽게 처리할 수 있는 형식으로 이루어져 있습니다. JSON은 객체와 배열을 기본적인 데이터 타입으로 사용합니다. 객체는 중괄호({})로 표현되며, 키-값 쌍으로 이루어져 있습니다. 예를 들어, {"name": "John", "age": 30}와 같은 형태입니다. 배열은 대괄호([])로 표현되며, 순서대로 값을 나열합니다. 예를 들어, [1, 2, 3]과 같은 형태입니다. JSON은 일반적으로 서버와 클라이언트 간의 데이터 교환에 사용됩니다. 서버에서 데이터를 JSON 형식으로 보내면 클라이언트에서 JavaScript를 사용하여 이를 쉽게 처리할 .. 2023. 4. 18.
자바스크립트 promise 사용법 자바스크립트에서 Promise는 비동기적인 작업을 처리할 때 사용하는 객체입니다. Promise는 주어진 작업이 완료되었을 때 결과를 반환하거나, 작업이 실패했을 때 에러를 반환하는 역할을 합니다. Promise를 사용하면 콜백 함수를 사용하지 않고도 비동기 작업의 결과를 처리할 수 있습니다. 사용법 Promise 객체는 대기(pending), 이행(fulfilled), 거부(rejected)의 3가지 상태를 가집니다. Promise 객체가 생성될 때는 대기 상태(pending)이며, 이행 또는 거부 상태가 되면 그 이후에는 상태가 변경되지 않습니다. Promise 객체는 다음과 같은 형식으로 생성됩니다. const promise = new Promise((resolve, reject) => { // 비.. 2023. 4. 18.
자바스크립트 콜백 지옥(CallBackHell) 자바스크립트에서 비동기 작업을 처리할 때 콜백 함수(callback function)를 사용하는데, 콜백 함수를 중첩해서 사용하면 코드의 가독성이 나빠지고 유지보수도 어려워지는 문제가 발생할 수 있습니다. 이러한 문제를 일컬어 "콜백 지옥(callback hell)"이라고 합니다. 콜백 지옥은 콜백 함수를 여러 겹 중첩해서 사용하면서 코드의 흐름이 꼬이고 가독성이 나빠지는 문제를 의미합니다. 예를 들어, 서버로부터 데이터를 가져와서 화면에 출력하는 코드를 작성한다고 가정해보겠습니다. 이 경우에는 다음과 같은 순서로 작업을 수행해야 합니다. 콜백 지옥 예시 1. 서버로부터 데이터를 가져옵니다. 2. 가져온 데이터를 처리합니다. 3. 처리된 데이터를 화면에 출력합니다. 이 작업을 콜백 함수를 사용하여 구현하.. 2023. 4. 17.
자바스크립트 WebAPI와 단일 스레드 JavaScript는 단일 스레드 언어입니다. 이는 JavaScript 엔진이 한 번에 하나의 작업만 수행할 수 있음을 의미합니다. 그러나 이러한 제한으로 인해 JavaScript가 UI 블로킹 문제와 같은 문제를 해결하는 방법이 필요합니다. 이를 해결하기 위해 JavaScript는 Web API를 사용합니다. Web API는 브라우저에서 제공되는 비동기 함수들의 집합입니다. Web API를 통해 브라우저는 JavaScript의 단일 스레드 제한을 우회하여 동시성 작업을 처리할 수 있습니다. Web API는 대부분 비동기 함수들로 구성되어 있으며, 이러한 함수들은 백그라운드 스레드에서 실행됩니다. 예를 들어, setTimeout() 함수는 Web API에 속해 있으며, JavaScript에서 실행되면 W.. 2023. 4. 17.
자바스크립트 콜 스택(Call Stack) 자바스크립트의 콜 스택(Call Stack)은 함수 호출의 실행 컨텍스트(context)를 저장하는 자료구조로서, 함수 호출 시 함수의 실행 컨텍스트를 콜 스택에 저장하고, 함수가 실행을 완료하면 해당 실행 컨텍스트를 스택에서 제거하는 방식으로 동작합니다. 자바스크립트는 함수를 호출할 때마다 실행 컨텍스트를 생성하고, 이 실행 컨텍스트에는 함수의 변수, 매개변수, 내부 함수 등의 정보가 저장됩니다. 이러한 실행 컨텍스트들은 콜 스택에 쌓이게 되며, 함수 실행이 완료되면 해당 실행 컨텍스트는 스택에서 제거됩니다. 사용법 예를 들어, 다음과 같은 코드가 있다고 가정해봅시다. function foo() { console.log('foo'); } function bar() { console.log('bar');.. 2023. 4. 17.
자바스크립트 폼 이벤트(Form Events)와 PreventDefault 자바스크립트에서 폼(Form)은 웹 사이트에서 사용자 입력을 받는 가장 일반적인 방법 중 하나입니다. 폼은 일반적으로 텍스트 상자, 비밀번호 상자, 라디오 버튼, 체크 박스 등의 입력 필드로 구성되며, 사용자는 이러한 필드를 작성하여 웹 페이지의 서버로 데이터를 제출할 수 있습니다. 폼에서 발생하는 이벤트는 대부분 HTML 이벤트와 유사하지만, 몇 가지 독특한 이벤트가 있습니다. 이번 글에서는 자바스크립트에서 폼 이벤트를 어떻게 처리할 수 있는지 알아보고, 이벤트 객체의 preventDefault() 메서드가 무엇이고 어떻게 사용하는지 살펴보겠습니다. 폼 이벤트 종류 자바스크립트에서는 다양한 폼 이벤트를 다룰 수 있습니다. 이 중 가장 일반적인 이벤트는 다음과 같습니다. submit: 폼이 제출될 때 발.. 2023. 4. 17.

티스토리툴바