JavaScript

📌 이벤트 전파자바스크립트의 모든 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다.사용자의 다양한 입력을 통해 동적으로 생성되는 이벤트 객체는 이벤트를 발생시킨 타깃을 중심으로 DOM 트리를 통해 전파된다. 전파되는 방향에 따라서 3단계로 구분할 수 있다. - 캡처링 단계: 이벤트 상위 요소 -> 하위 요소로 전파- 타깃 단계: 이벤트가 이벤트 타깃에 도달- 버블링 단계: 이벤트가 하위 요소 -> 상위 요소로 전파 브라우저는 기본적으로 이벤트 버블링 단계에서 이벤트를 캐치한다. 📌 이벤트 버블링 - Event Bubbling이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다.  아래 콘솔 창은 three cl..

스코프는 유효 범위라는 뜻으로, 식별자(변수)가 유효한 범위를 말한다.자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지 결정한다.따라서 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다. 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있다. var 키워드로 선언한 변수와 let 또는 const 키워드로 선언한 변수의 스코프도 다르게 동작한다.function add(x, y) { //매개변수는 함수 몸체 내부에서만 참조할 수 있다. //즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부이다. console.log(x + y); // 2 5 return x + y;}add(2, 5);//매개변수는 함수 몸체 내부에서만 참조할 수 있다.co..

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 흔히 함수 내에서 함수를 정의하고 사용하면 클로저라고 한다. 클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 기억한다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효 범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. 👇 스코프 먼저 읽어보고 오기! [JavaScript] 스코프(Scope)와 var, let, const 차이점 스코프(Scope)라는 영어 단어 자체는 ‘범위’라는 의미를 가지며 컴퓨터 공학, 그리고 JavaScript 에서도 ‘범위’의 의미를 가지고 있다. JavaScript 에만 국한된 개념은 아니다. - 식별자 접근 규 uiop5809.tistor..

오늘은 OMDb API를 이용하여 영화 데이터를 요청하고 받아서 출력해보고자 한다! OMDb API - The Open Movie Database www.omdbapi.com 아래는 영화 정보를 요청할 수 있는 주소다. 기본적인 사용자 인증을 거쳐야지만 사용할 수 있는 key값이 있으며 이것이 apikey이다. 이메일과 이름을 적고 제출을 했더니 이메일로 apikey를 발급받을 수 있었다. - Query String 문자를 가지고서 검색하는 개념 주소?속성=값&속성=값&속성=값 영화의 제목은 필수로 주소에 적어야 함! 위의 주소를 적고 s 파라미터를 사용해 frozen을 검색해봤다. 📌 axios Promise 객체 기반의 http 요청을 처리해주는 자바스크립트 패키지 GitHub - axios/axio..

- local storage mdn Window.localStorage - Web API | MDN localStorage** **읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데 developer.mozilla.org 📌 localStorage vs sessionStorage localStorage 데이터는 만료되지 않는다. sessionStorage 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라진다. 각각의 장단점이 있지만, 일반적으로 localStorage를 사용한다! Application의 Local..

📌 JSON JavaScript Object Notation 자바스크립트의 데이터를 표현하는 하나의 포맷이며 속성-값 쌍으로 되어있는 객체 데이터와 유사하다. 비동기 브라우저/서버 통신을 위한 것이며 인터넷에서 자료를 주고 받을 때 자료를 표현하는 방법으로 알려져 있다. 대표적인 json 파일로 package.json파일이 있다. 객체 데이터 형식으로 여러가지 속성의 이름들이 명시되어 있으며 Node.js 환경의 프로젝트는 package.json파일을 해석해서 프로젝트를 구성할 수 있다. json은 하나의 데이터처럼 취급할 수 있기 때문에 구성옵션을 json이라는 포맷으로 관리한다. 📌 stringify 문자 데이터화 시켜주는 메서드이다. 📌 parse 실제 자바스크립트에서 쓸 수 있는 형태로 변경해주는..

copyUser객체에 user객체를 바로 할당하게 되면 객체가 가리키는 메모리 주소가 같기 때문에 두 객체의 age가 동일하게 변경되는 것을 볼 수 있다. 얕은 복사와 깊은 복사로 해결하자! 📌 얕은 복사(Shallow copy) 빈 객체를 만들어 user객체를 넣거나, 빈 객체에 전개 연산자를 사용하여 값을 넣어준다. 그러나 여기서 user.emails는 배열 데이터고, 참조형 데이터이다. 따로 복사 처리를 한 적이 없고, 복사 처리한 것은 user 객체 데이터 하나이기 때문에 새로운 참조형 데이터인 user.emails 배열 데이터는 같은 메모리 주소를 공유하고 있다. 이처럼 얕은 복사는 표면만 복사하는 것이기 때문에 내부에 참조형 데이터가 있다면 복사되지 않는 것을 볼 수 있다. 이것을 해결하기 위..

📌 AJAX? Asynchronous Javascript And Xml (비동기식 자바스크립트와 Xml)의 약자이다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도, 페이지의 일부만을 데이터 로드하는 기법이다. Javascript를 사용하여 클라이언트와 서버 사이에서 XML(JSON) 데이터를 주고받는 비동기 통신 기술이다. - XML 데이터를 저장하고 전달할 목적으로 만들어진 마크업 언어 - JSON '키-값' 쌍 형식의 배열 형태를 이루는 데이터 형식 - XMLHttpRequest 브라우저가 가지고 있는 객체 중 하나 📌 동기 VS 비동기 ❗Request 요청이 들어온다면 - 동기 방식 서버에서 요청을 처리하고 응답해야 다음 동작이 이루어진다. 이..

기존의 자바스크립트에서는 prototype을 이용해 유사하게 상속을 구현했다. 그러나 ES6 이후 Class가 나오면서 명료하고 간편하게 객체를 생성하고, 상속을 구현할 수 있게 되었다. + 참고 📌 생성자 함수 생성자 메서드 constructor()는 속성을 설정하며 function 키워드 없이 작성한다. 이 메서드는 this 문맥을 생성하기 때문에 this에 속성을 할당하며 인수를 이용해 인스턴스마다 다른 속성을 부여할 수 있다. 메서드를 정의하려면 생성자 메서드와 마찬가지로 function 키워드 없이 작성한다. this로 현재 클래스 속성에 접근할 수 있다. Classes - JavaScript | MDN Class는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나..

하나의 객체만 있다면 firstName과 lastName을 각각 정의하기 쉬울 것이다. 그러나 여러 객체가 생긴다면 비슷한 객체를 정의하기에 매우 귀찮아지고 힘들어질 것이다. 그렇기 때문에 생성자 함수를 만들고 new 키워드로 객체 데이터를 생성한다. firstName과 lastName 부분은 인스턴스를 생성할 때마다 다른 내용이 들어올 수 있기 때문에 통일해서 메모리를 관리하기 어렵다. 그러나 getFullName 부분은 통일해서 메모리를 효율적으로 관리할 수 있다. 콘솔창을 보면 firstName과 lastName을 제외하고 prototype이 object인 것을 확인할 수 있다. user 함수에 숨어있는 prototype 속성 부분에 getFullName을 할당해줌으로써 몇 개의 인스턴스를 생성하더..