이벤트루프는 자바스크립트가 비동기로 작동할 수 있게 만들어주는 도구입니다. (저는 도구(: 어떤 일을 할 때 이용하는 장치)라고 생각합니다.) 자바스크립트는 싱글 스레드 언어이지만 ajax 요청이나 setTimeout같은 비동기 처리가 가능합니다. 여기서 싱글 스레드란 하나의 콜 스텍을 가지고 하나의 프로그램이 동시에 하나의 코드만 실행할 수 있다는 뜻입니다. 왜냐하면 자바스크립트 런타임 환경인 브라우저에서 webAPI가 비동기 함수를 처리하기 때문입니다. webAPI는 각 API 마다 스레드들이 할당되어있고 이들이 모여 멀티 스레드로 이루어져 있습니다. webAPI가 비동기 함수를 처리하고 여기서 바로 이벤트 루프가 처리된 비동기 함수를 콜 스택에 전달해주어 콜 스택에서 처리된 비동기 함수가 실행됩니다..
이 글은 전적으로 아래 영상을 따릅니다. https://youtu.be/7RiMu2DQrb4?si=h744LMvNaWwIUTs6 This 바인딩 일반적으로 객체 지향 언어에서 this 라는 예약어는 함수가 속해 있는 객체 자기 자신과 관련이 깊습니다. 하지만 일급 객체인 자바스크립트 함수는 const foo = function foo2(){} 1. 변수나 데이터에 할당 할 수 있고 function foo1(foo2){} 2. 다른함수의 인수 function foo1() { ... return foo1 } 3. 반환값으로 사용할 수가 있습니다. 이러한 특징으로 인해 자바스크립트 함수는 다양한 환경에서 호출 될 수 있습니다. 단독호출 특정 객체의 매서드로써 호출 동일한 함수가 서로 다른 객체에 의해서 호출 ..
가장 알고싶고도 모르고싶은 주제인 실행컨텍스트에 대해서 알아보겠습니다. 오늘의 블로깅도 모자딥다와 우테코 영상을 전적으로 따릅니다. 실행 컨텍스트 : 코드를 실행하는데 필요한 환경을 제공하는 객체 스코프, 호이스팅, 클로저의 개념과 개념만 알고 있는 상태입니다. (스코프는 유효범위 .. 호이스팅은 선언을 끌어올린것처럼 동작하는 특징.. 클로저는 함수와 그 함수의 렉시컬환경의 조합..어쩌고.. 저쩌고..) 실행 컨텍스트를 이해하게 되면 자바스크립트의 주요한 동작들을 이해할 수 있습니다. 실행 컨텍스트의 구성 실행 컨텍스트는 직접 접근해서 확인하기 어렵고 그 구성이 매우 복잡합니다. 따라서 실행 컨텍스트의 Lexical Enviroment 안에 있는 환경 Record로 호이스팅을 Outer로 스코프체이닝에 ..
요약 모듈이란 특정 기능을 갖는 작은 코드 단위이며 이러한 코드를 파일로 나누어서 관리하는 것을 모듈화라고 합니다. 모듈 번들러란 여러개의 어플리케이션을 구성하는 JS,CSS, 이미지 등의 파일을 하나의 파일로 합쳐주는 도구 입니다. 설명 👩🏻💻 왜 모듈을 하나로 합칠까요? 자바스크립트를 여러개의 파일로 분리해서 script 태그로 로드해도 결국 하나의 자바스크립트 파일처럼 동작합니다. 분리된 파일간의 스코프 구분이 없어 로드 순서를 정하는데 많은 시간을 소모했습니다. 그래서 등장한 CommonJS와 AMD 하지만.. commonJS 코드 예시 // 다른 모듈에서 함수 가져오기 const math = require('./math.js'); // 가져온 함수 사용하기 const sum = math.add..
요약 내부 함수가 생명주기를 마감한 외부 함수의 지역변수를 참조할 수 있는 내부함수 설명 1. inner함수가 outer함수 내부에서 정의되고 2. 그 inner함수가 outer함수의 변수 outerVar에 접근할 수 있는 상황을 클로저 라고 합니다. 클로저의 원리 자바스크립트에서 함수는 정의될때 자신의 내부슬롯에 상위 스코프의 참조를 저장합니다. 따라서, outer함수가 생명주기를 마감하면서 실행컨텍스트에서는 제거되었지만 inner함수는 내부 슬롯에 상위 스코프의 참조를 저장하고 있기 때문에 생명주기가 끝난 outer함수의 변수에 접근이 가능합니다. function outer() { const outerVar = 'I am from outer'; function inner() { console.log(..
요약 1. 스코프는 변와 함수의 유효범위이다. 2. 코드 내에서 변수와 함수의 이름이 충돌하지 않도록 도와준다. 3. 스코프에는 프로그램 전체에서 접근 가능한 전역 스코프와 해당 코드블록이나 함수 내부에서만 접근가능한 지역스코프 두가지 유형이 있다. 설명 스코프란? 식별자의 유효 범위입니다. 모든 변수, 함수, 클래스 등의 이름을 의미하는 식별자는 자신이 선언된 위치에 의해 다른 코드가 자신을 참조할 수 있는지에 대한 범위가 결정됩니다. 왜 필요한가요? 식별자는 어떤 값을 식별할 수 있는 고유한 이름으로 하나의 값은 유일한 식별자와 연결되어야 합니다. 스코프가 없다면, 즉 유효범위가 없다면 매번 새로운 식별자를 만들어야하는 번거로움이 있고 까먹고 앞서 사용한 식별자를 사용시 충돌이 일어날 수 있습니다. ..
호이스팅이란? 자바스크립트에서 변수 선언과 함수 선언문을 해당 스코프의 최상단으로 끌어올리는 것 코드 실행전에 실행되며, 변수와 함수를 선언하기 전에도 참조할 수 있도록 한다. 변수 호이스팅? var 변수를 선언한 위치와 상관없이 해당 스코프의 최상단으로 끌어올려지며, 이때 변수에는 undefined가 할당된다. 따라서 변수를 선언하기 전에 참조해도 오류가 발생하지 않는다. let, const 호이스팅이 발생하지만 변수가 선언되기 전에는 일시적 사각지대(TDZ)에 빠져서 참조 할 수 없다. 따라서 변수를 선언하기 전에 참조하면 ReferenceError가 발생한다. const키워드로 선언된 변수는 선언과 동시에 값을 할당해야하기 때문에, 변수에 undefined를 할당 할 수 없다. console.log..
1. UI UX가 무엇일까? UI(User Interface) 사람들이 컴퓨터와 상호 작용하는 시스템 화면상의 그래픽 요소들 외에도 컴퓨터와 상호작용을 위한 시스템인 키보드, 마우스등의 물리적 요소도 포함 핸드폰을 예시로 들었을때 과거에는 번호키 등 물리적 요소가 중요했지만 터치폰이 대중화되면서 화면 터치를 통한 상호작용이 중요해짐 👉🏻 그래픽 UI 중요도 높아짐 컴퓨터 마우스의 등장 이후로 👉🏻 그래픽 UI 중요 CLI와 키보드를 이용해 텍스트로 상호작용하는것보다 화면에서의 상호작용이 더 직관적, 간편함 이 둘 뿐만 아니라 스마트워치, 키오스트, 터치스크린 안내판 등 상호작용하는 기기들 👉🏻 GUI 굉장히 중요함 UX(User Experience) 사용자가 어떤 시스템, 제품, 서비스를 직 간접적으로 ..
API서버는 프론트엔드도 다룰 수 있었야 한다. 왜냐하면 필요한 데이터를 저장하거나 불러오는 API서버를 구축할 수 있어야 동적활동을 할 수 있는 클라이언트를 구현할 수 있기 때문에 SOP에 대해 이해할 수 있다. CORS에 대해 이해할 수 있다. CORS 동작 방식에 대해 이해할 수 있다. CORS 설정 방법을 이해한다. SOP (Same-Origin-Policy) 동일 출처 정책 : 같은 출처의 리소스만 공유가 가능하다. 출처(Origin) 프로토콜 호스트 포트 https:// www.hahahah.com :433 /course 출처는 프로토콜, 호스트, 포트의 조합이며 이 중 하나라도 다르면 동일한 출처가 아니다. SOP는 왜 탄생했을까? 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 ..
REST API에 대해 이해할 수 있다. REST 성숙도 모델에 대해 이해할 수 있다. REST API 문서를 읽을 수 있다. REST API에 맞춰 디자인할 수 있다. Open API와 API Key에 대해 이해할 수 있다. 웹 에플리케이션에서는 HTTP 메서드를 이용해 서버와 통신한다. GET을 통해 웹페이지나 데이터를 요청하고 POST로 새로운 글이나 데이터를 전송하고 DELETE로 저장된 글이나 데이터를 삭제할 수 있다. 👉🏻 클라이언트와 서버가 HTTP 통신할때 어떤 요청을 주고 받느냐에 따라 메서드의 사용이 달라진다. 👉🏻 요청과 응답을 할 때 지정된 형식으로 주고받을 수 있는 수단을 API라고하며 👉🏻 이걸 "어떻게" 주고 받아야 하느냐? => REST API 를 알아보자 REST API는 ..
