🍞 Front-End/JavaScript

브라우저는 아마도 가장 많이 사용하는 소프트웨어일 것이다. 이 글을 통해 브라우저가 어떻게 동작하는지 설명하려고 한다. 이 글을 읽고 나면, 어떤 과정을 거쳐 페이지가 화면에 보이게 되는지 알게 될 것이다. 브라우저의 주요 기능브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만, PDF나 이미지 또는 다른 형태일 수 있고, 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.예) 최근 종료된 인터넷 익스플로러부터 파이어폭스, 사파리, 크롬, 오페라 등 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Conso..

클로저란?클로저는 자신이 선언될 당시의 환경을 기억하는 함수다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 해당 함수의 생명 주기가 종료되더라도 함수의 반환된 값이 변수에 의해 참조되고 있다면 생명 주기가 종료되더라도 (실행 컨텍스트 스택에서 제거되어 pop 되더라도) 렉시컬 환경에 남아 참조가 가능하다. 클로저를 사용하면 뭐가 좋은 거지?클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다.다시 말해, 상태가 의도치 않게 변경되지 않도록 상태를 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다. 클로저를 어떻게 생성하나요?1. 내부(중첩) 함수가 익명 함수로 되어 외부 함수의 반환값으로 사용될 때2. 내부(중첩) 함수가 외부 함수의 스코프에서 실행될 때3. 내부 함수에서..

📌 이벤트 전파자바스크립트의 모든 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 요청이 들어온다면 - 동기 방식 서버에서 요청을 처리하고 응답해야 다음 동작이 이루어진다. 이..