✨ Front-End/JavaScript

스코프(Scope)라는 영어 단어 자체는 ‘범위’라는 의미를 가진다. 컴퓨터 공학, 그리고 JavaScript 에서도 ‘범위’의 의미를 가지고 있으며 JavaScript 에만 국한된 개념은 아니다. - 식별자 접근 규칙에 따른 유효 범위 스코프의 정의는 “식별자 접근 규칙에 따른 유효 범위”이며 식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다. 범위는 중괄호(블록) 또는 함수에 의해 나눠지며 그 범위를 스코프라고 부른다. 그래서 각각을 Block Scope와 Function Scope라고 부른다. 📌 스코프의 주요 규칙 1. 안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있지만 반대는 불가능하다. 바깥쪽 스코프에서 선언한 식별자는 안쪽 스코프에서 사용 가능하다. 반면, 안쪽에서 선언한 식별자..

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

📌 이벤트 버블링 - Event Bubbling 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. 아래 콘솔 창은 three className을 가지는 div 태그를 클릭한 결과이다. 브라우저가 이벤트를 감지하는 방식 때문에 div 태그 한 개만 클릭해도 3개의 이벤트가 발생된다. 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다. 따라서, 클래스 명 three -> two -> one 순서로 div 태그에 등록된 이벤트들이 실행된다. 마찬가지로 two 클래스를 갖는 두 번째 태그를 클릭했다면 two -> one 순으로 클릭 이벤트가 동작한다. 여기서 주의해야 할 ..

오늘은 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는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나..

일반 함수와 화살표 함수는 헷갈리지만 그만큼 매우 중요한 개념이다! 📌 일반(Normal) 함수는 호출 위치에서 따라 this 정의 📌 화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this 정의 일반 함수는 normal이 호출되는 부분에서 this가 정의된다. YeJin이 곧 this이고 name 부분을 꺼내서 쓴다. 이와 다르게 화살표 함수는 호출 위치와 전혀 상관없이 선언될 때 this가 무엇인지 알 수 있다. 현재 선언된 코드에선 this를 정확하게 알 수 없는데 name이라는 속성을 찾으려고 하기 때문에 undefined가 출력된다. YeJin의 noraml 함수 자체가 amy의 normal 함수에 할당된다. 그러므로 호출된 위치에 있는 name이 Amy로 바뀌어 출력되는 것을 볼 수 ..