목록자바스크립트/Likelion_JS (14)
코딩하는 김딸기
1. Storage목적: 애플리케이션에서 데이터를 영속적으로 저장하고 불러오는 것은 기본적이고 빈번하게 수행되는 작업입니다.백엔드: 데이터베이스를 통해 데이터를 영속적으로 저장하며, 다양한 데이터베이스(예: Oracle, MySQL, 클라우드 데이터베이스)를 사용할 수 있습니다.프론트엔드: 웹 애플리케이션에서 데이터를 영속적으로 저장할 수 있는 방법을 제공해야 하며, JavaScript에서 Web API를 통해 이를 구현합니다.2. 스토리지 종류로컬스토리지: 동일 오리진의 모든 세션에서 공유되는 스토리지입니다. 데이터는 브라우저가 종료되어도 유지됩니다.세션스토리지: 세션 단위로 이용되는 스토리지로, 특정 브라우저 창에서만 사용되며, 브라우저가 종료되면 데이터가 사라집니다.3. sessionStorage정..
Ajax Ajax는 웹 페이지가 서버와 통신할 때 사용하는 기술로, 사용자가 웹 페이지를 이용하면서 서버와 데이터를 주고받을 수 있게 해줍니다. Ajax는 Asynchronous JavaScript and XML의 약자입니다. 여기서 중요한 점은 Ajax가 비동기 통신을 가능하게 해준다는 것입니다.동기 통신과 비동기 통신의 차이동기 통신:웹 페이지에서 서버에 요청(request)을 보내면, 브라우저는 서버의 응답(response)을 받을 때까지 기다립니다.이 동안 사용자는 웹 페이지에서 아무런 동작도 할 수 없습니다.예를 들어, 링크를 클릭하거나 버튼을 누르면 서버에 요청을 보내는데, 서버에서 응답이 올 때까지 웹 페이지가 멈추게 됩니다.응답이 오면 화면 전체가 새로 고쳐집니다. 즉, 페이지가 한 번 깜..
Web APIAPI(Application Programming Interface) 를 한마디로 정리하면 프로그래밍 언어로 만들어진 데이터와 기능의 모음입니다. • 어떤 기능을 구현할 때 “유튜브 API 를 이용해서” 혹은 “카카오 API 를 이용해서” 구현했다는 용어를 많이씁니다.• 이 의미는 유튜브 혹은 카카오와 애플리케이션에서 연동할 때 연동방법을 추상화 시켜서 제공하는 API 를사용한다는 의미입니다.• API 는 변수, 함수 혹은 클래스로 제공됩니다. • Browser APIs : 브라우저에 내장되어 있는 API• Third-Party APIs : 다른 벤더 혹은 플랫폼에서 제공하는 API호출 스케줄링함수 호출을 미리 예약할 때 사용하는 두 가지 방법이 있습니다. 이걸 “호출 스케줄링”이라고 해요...
클로저 (Closure)정의: 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합을 의미합니다. 즉, 클로저는 특정 함수가 정의된 위치의 변수를 기억하고, 그 변수를 나중에 사용할 수 있게 해주는 기능입니다.중요성: 클로저는 자바스크립트의 중요한 개념으로, 다양한 프로그래밍 언어에서도 사용됩니다. 클로저는 자바스크립트에서 자동으로 제공되며, 개발자가 특별히 코드를 작성할 필요는 없습니다.이해를 위한 선행 지식:실행 컨텍스트: 함수가 실행될 때, 그 함수의 실행 환경을 포함한 객체입니다. 이는 매개변수, 로컬 변수, 그리고 내부 함수 등을 포함합니다.렉시컬 환경: 함수가 선언된 위치를 의미합니다. 이는 코드 작성 시의 위치를 기반으로 하며, 함수 실행 시의 동적인 환경과는 다릅니다.실행 컨텍스트 (Exe..
1. 생성자 함수 vs. 클래스생성자 함수는 JavaScript 초기부터 사용된 전통적인 객체 생성 방법입니다. 이 방법은 객체를 만들기 위해 함수의 형태로 정의되며, new 키워드를 사용하여 생성자를 호출함으로써 객체를 생성합니다. 클래스는 ECMAScript 2015 (ES6)에서 도입된 객체지향 프로그래밍을 지원하는 방법입니다. 클래스 구조를 사용하여 객체를 생성할 수 있으며, 객체 지향 프로그래밍의 원칙을 보다 쉽게 적용할 수 있습니다. 클래스는 class 예약어로 선언되며, 내부에 프로퍼티와 메서드를 포함할 수 있습니다. 이처럼, 클래스는 객체 생성에 있어 더 명확하고 체계적인 방법을 제공합니다.2. 클래스 선언 및 객체 생성클래스를 선언하면, 동일한 구조를 가진 여러 객체를 쉽게 생성할 수 있..
1. typeof vs instanceoftypeof: 자바스크립트의 연산자로 데이터 타입을 확인할 때 사용됩니다. 결과는 문자열로 반환되며, 기본 데이터 타입에 사용됩니다.예시: javascript코드 복사console.log(typeof 42); // "number" console.log(typeof "hello"); // "string"instanceof: 객체가 특정 생성자의 인스턴스인지 확인하는 연산자입니다. 결과는 true 또는 false로 반환됩니다.예시:javascript코드 복사let arr = []; console.log(arr instanceof Array); // true2. 프로퍼티 설명자 (Property Descriptor)객체의 프로퍼티에는 설명자(Descriptor)가 있습..
프로토타입 (Prototype)1. 프로토타입이란?프로토타입이라는 단어는 시제품을 의미하며, 자바스크립트에서는 객체의 시제품 정도로 이해하면 됩니다.자바스크립트에서 함수를 선언하면 자동으로 그 함수의 프로토타입 객체가 생성됩니다.함수가 객체를 생성하기 위한 모형 역할을 하며, 이때 생성된 객체가 프로토타입을 기반으로 만들어집니다. 프로토타입이란? 프로토타입은 객체들이 공통적으로 사용할 수 있는 속성과 메서드를 정의하는 공간입니다. 객체를 만들 때마다 그 객체들은 이 설계도를 보고 공통된 기능을 사용할 수 있습니다. 그래서 프로토타입은 모든 객체가 공유할 수 있는 공통 자원이라고 볼 수 있습니다.2. 프로토타입과 생성자 함수생성자 함수에서 객체를 생성할 때, **프로토타입 객체의 constructor**가..
생성자 함수 (Constructor Function)객체 생성의 필요성동일한 구조의 객체를 여러 개 만들고자 할 때, 객체의 모형을 선언하고 이를 이용해 객체를 쉽게 만드는 방법이 필요합니다.객체를 생성하는 방법에는 주로 두 가지가 있습니다:생성자 함수를 이용한 객체 생성클래스를 이용한 객체 생성생성자생성자는 객체의 모형을 정의하고, 그 모형을 바탕으로 객체를 생성하는 역할을 하는 함수입니다.모든 객체 지향 프로그래밍 언어에서 이 객체를 만드는 작업을 “객체를 생성한다”라고 표현하며, 이 역할을 하는 것을 “생성자”라고 부릅니다.생성자 함수란?생성자 함수는 객체를 만드는 역할을 하는 함수입니다.일반 함수와 문법적인 차이는 없지만, 객체를 생성하기 위해 특별히 정의된 함수입니다.관습적으로 첫 글자를 대문자..