본문 바로가기

What would life be If we had no courage to attemp anything?

Language/JavaScript28

[JavaScript] AJAX & JSON AJAX Asynchronous JavaScript And XML (비동기식 JavaScript와 XML) 서버와 통신하기 위해 XMLHttpRequest 객체를 활용 JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음 [참고] AJAX의 X가 XML을 의미하긴 하지만, 요즘은 더 가벼운 용량과 JavaScript의 일부라 는 장점 때문에 JSON을 더 많이 사용함 |특징 페이지 전체를 reload(새로 고침)를 하지 않고서도 수행되는 “비동기성” 서버의 응답에 따라 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음 AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줌 페이지 새로 고침 없이 서버에 요청 서버로부터 데이터를 받고 작업을 수행 |X.. 2023. 1. 15.

[FE/JavaScript] 구조 분해 할당(디스트럭처링 할당) 구조 분해 할당 💡 구조 분해 할당이 뭔가요? 💡구조 분해 할당은 크게 어떤 종류가 있나요? Q.구조 분해 할당 (디스트럭처링 할당) 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 - MDN 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것 🧐 iterable? 반복 가능한 객체(iterable object) 혹은 줄여서 iterable 내장된 생성자 중 iterable 객체를 만들어내는 생성자 String Array TypedArray Map Set Q.구조 분해 할당 왜 쓰이죠? 배열과 같은 이터러블 또는 객체 이터럴에서 필요한 값만 추출하여 변수에 할당 시 유.. 2022. 7. 6.

[FE/JavaScript] strict mode 💡 strict mode가 뭔가요? 💡strict mode를 통해 무엇을 예방할 수 있죠? 🎈strict mode란? 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시키는 것 ES5(ECMA Script 5)에 추가된 키워드 🎈 strict mode를 통해 무엇을 예방할 수 있나요? use strict는 자바스크립트의 의도치 않은 여러 잠재적인 오류를 막아주는데 많은 도움을 준다. 잘못 사용하면 없던 오류를 새로 만들어내는 경우도 있다. 반대로 공식용어는 아니지만, 가끔 엄격하지 않은 기본 값을 sloppy mode(느슨한 모드) 라고 부르기도 한다. sloppy mode의 예제 실행 결과는 어떨까? function foo(){ x.. 2022. 6. 27.

[FE/JavaScript]this like this yo like this Q.this가 뭔가요? this는 자기참조변수 자신이 속한 객체나 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable) 😲q**.왜 사용하는데?** 동작을 나타내는 메서드는 자신이 속한 객체의 상태(프로퍼티)를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 하기 때문! +)this의 특징 this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조 가능! 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달 this가 가리키는 값, 즉 this binding은 함수 호출 방식.. 2022. 6. 23.

[FE/JavaScript] 생성자 함수에 의한 객체 생성 생성자 함수에 의한 객체 생성 Q.생성자 함수가 뭔가요? A. 생성자(constructor)함수는 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수! 생성자 함수에 의해 생성된 객체를 **인스턴스(instance)**라고 함. Q.객체 리터럴로 만들 때와는 무슨 차이가 있죠? 왜 생성자 함수를 사용하나요? ▶객체 리터럴에 의한 객체 생성 방식의 문제점 객체 리터럴 방식으로 생성된 객체는 같은 형태의 객체를 재생성 불가! 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 할 경우 매번 같은 프로퍼티를 기술 해야함(비효율적) ▶생성자 함수를 사용한 객체 생성 방식 생성자 함수에 의한 객체 생성 방식은 마치 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용해 프로퍼티 구조가 동.. 2022. 6. 13.

JavaScript - Event *️⃣ Event |Event (이벤트) 개념 네트워크 활동이나 사용자와의 상호작용 같은 사건의 발생을 알리기 위한 객체 이벤트 발생 마우스를 클릭하거나 키보드를 누르는 등 사용자 행동으로 발생할 수도 있음 특정 메서드를 호출(Element.click())하여 프로그래밍적으로도 만들어낼 수 있음 |Event 기반 인터페이스 AnimationEvent, ClipboardEvent, DragEvent 등 UIEvent 간단한 사용자 인터페이스 이벤트 Event의 상속을 받음 MouseEvent, KeyboardEvent, InputEvent, FocusEvent 등의 부모 객체 역할을 함 |Event의 역할 “~하면 ~한다.” “클릭하면, 경고창을 띄운다.” “특정 이벤트가 발생하면, 할 일을 등록한다.” .. 2022. 5. 3.

JavaScript - DOM(Document Object Model) |DOM 조작 - 개념 Document는 문서 한장(HTML)에 해당하고 이를 조작 DOM 조작 순서 선택(Select) 변경(Mainpulation) |DOM 관련 객체의 상속 구조 Event Target Event Listner를 가질 수 있는 객체가 구현하는 DOM 인터페이스 Node 여러 가지 DOM 타입들이 상속하는 인터페이스 Element Document 안의 모든 객체가 상속하는 가장 범용적인 인터페이스 부모인 Node와 그 부모인 EventTarget의 속성을 상속 Document 브라우저가 불러온 웹 페이지를 나타냄 DOM 트리의 진입점(entry point) 역할을 수행 HTMLElement 모든 종류의 HTML 요소 부모 element의 속성 상속 |DOM 선택 – 선택 관련 메서드 .. 2022. 5. 3.

JavaScript - Asynchronous JavaScript(콜백함수, Async callbacks,Promise), Axios *️⃣ Callback Function - 인자로 넘기는 함수 다른 함수에 인자로 전달된 함수 외부 함수 내에서 호출되어 일종의 루틴 또는 작업을 완료함 동기식, 비동기식 모두 사용됨 그러나 비동기 작업이 완료된 후 코드 실행을 계속하는 데 주로 사용됨 비동기 작업이 완료된 후 코드 실행을 계속하는 데 사용되는 경우를 비동기 콜백(asynchronous callback)이라고 함 |JavaScript의 함수 === “일급 객체(First Class Object)” 일급 객체 (일급 함수) 다른 객체들에 적용할 수 있는 연산을 모두 지원하는 객체(함수) 일급 객체의 조건 인자로 넘길 수 있어야 함 함수의 반환 값으로 사용할 수 있어야 함 변수에 할당할 수 있어야 함 |Async callbacks 함수 ⇒ .. 2022. 5. 3.

JavaScript - AJAX, Asynchronous (비동기) *️⃣AJAX Asynchronous JavaScript And XML (비동기식 JavaScript와 XML) 서버와 통신하기 위해 XMLHttpRequest 객체를 활용 JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음 [참고] AJAX의 X가 XML을 의미하긴 하지만, 요즘은 더 가벼운 용량과 JavaScript의 일부라 는 장점 때문에 JSON을 더 많이 사용함 |특징 페이지 전체를 reload(새로 고침)를 하지 않고서도 수행되는 “비동기성” 서버의 응답에 따라 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음 AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줌 페이지 새로 고침 없이 서버에 요청 서버로부터 데이터를 받고 작업을 수행.. 2022. 5. 3.

JavaScript - 프로토타입(prototype), 클래스(class) 🤍프로토타입(prototype) |JS의 상속과 객체 JS는 객체지향 프로그래밍 언어 JS의 객체는 key-value 구조의 자료구조 Python과 같은 클래스기반의 객체지향 프로그래밍 언어의 객체와 다름 JS는 클래스개념이 존재하지 않고, 프로토타입이라는 개념을 활용해 상속을 구현 ES5 까지는 이러한 방식으로 원하는 객체를 생성하였으나, ES6+ 부터는 class 키워드로 대체 function Rectangle(width, height) { this.width = width this.height = height } Rectangle.prototype.getArea = function () { return this.width * this.height } function Square(length) { R.. 2022. 5. 3.

이전 1 2 3 다음

티스토리툴바