본문 바로가기

JavaScript27

[Javascript] 스코프 체이닝이란 무엇인가? 1. 스코프 체이닝이란? 스코프 체이닝은 프로그래밍에서 변수나 함수의 유효 범위 즉 스코프를 결정하는 과정을 설명하는 개념이다. 변수나 함수가 참조될 때 해당하는 범위를 찾는 메커니즘을 말한다. 스코프는 일반적으로 중첩된 함수나 블록의 범위를 가리키는데 이렇게 중첩된 스코프에서 변수나 함수를 참조할 때, 현재에 있는 스코프에서 찾지 못하면 외부 스코프로 차례차례 이동하여 탐색하는 과정을 스코프 체이닝이라고 한다. 이때 탐색의 과정은 최상위인 전역스코프부터 시작해서 필요한 변수나 함수가 있는 스코프까지 계속해서 진행되는데 이것이 스코프 체이닝의 과정이다. 대부분의 프로그래밍 언어에서 스코프 체이닝은 정적 스코프와 동적 스코프 두 가지 방식 중 하나를 따른다. 대부분의 언어는 정적 스코프를 사용하는데, 정.. 2024. 3. 5.
[Javascript] 자바스크립트의 실행 컨텍스트 1. 실행 컨텍스트란? 실행컨텍스트는 코드가 실행될 때 생성되는 환경을 의미한다. 실행 컨텍스트는 코드의 실행을 관리하고 변수, 함수, 스코프 등의 코드가 실행되기 위해 필요한 정보를 담고 있는 객체이다. 크게 세 가지 타입으로 구분된다. 실행 컨텍스트는 실행 가능한 코드 블록(전역 코드, 함수 코드, eval 코드 등)이 실행될 때 생성되며, 해당 코드 블록 내에서 사용되는 변수 및 함수 등의 정보를 담고 있는데 변수 객체, 스코프체인, this 등의 정보를 가지고 있다. 변수 객체는 해당 컨텍스트의 변수, 함수 선언, 인자 등을 포함하고 있으며, 스코프 체인은 실행 컨텍스트의 스코프를 구성하는 변수 및 함수에 접근할 때 사용되는 스코프의 집합이다. this는 함수가 호출될 때 설정되는 특별한 값으로,.. 2024. 2. 19.
[Javascript] 콜스택과 이벤트루프 1. 콜스택과 이벤트루프란? Javascript가 어떻게 동작하는지 이해를 잘하면, 효율적이고 안정적인 코드를 작성할 수 있다.  Javascript는 싱글 스레드 기반의 언어이기 때문에 한 번에 하나의 작업만 처리할 수 있다. 따라서 여러 개의 작업을 처리하려면 비동기적으로 처리해야 하는데 이 때 콜스택과 이벤트 루프를 이용하여 비동기 처리를 구현한다. 1) 콜스택 Javascript는 함수 호출 시 콜스택을 사용하여 함수의 실행 순서를 관리한다. 콜스택은 함수 호출을 기록하는 데이터 구조인데, 함수가 호출될 때마다 콜스택에 새로운 프레임(실행 컨텍스트 - 로컬변수, 매개변수 등)이 추가되고, 함수가 종료될 때마다 프레임이 제거된다. 이렇게 스택에 쌓인 함수들은 자료구조 스택 처럼 LIFO(Last .. 2024. 2. 16.
[Javascript] 클로저가 무엇인가? 1. 클로저란? 클로저는 외부 변수를 기억하고, 이 외부 변수에 접근할 수 있는 함수를 의미한다. 자신이 생성될 때의 환경을 기억하는 함수인 것이다. 클로저는 함수와 해당 함수가 선언될 때의 렉시컬 환경을 함께 기억한다. 이는 함수가 선언될 당시의 스코프 체인을 기억하고, 이 함수가 실행될 때에도 그 스코프 체인에 접근할 수 있도록 하는 메커니즘이다. 이는 해당 함수 내부에서 선언된 변수들을 포함하여, 함수가 선언된 위치에 대한 정보를 가지고 있다. 이렇게 클로저가 기억하는 렉시컬 환경은 해당 함수가 실행되는 동안에도 유지된다. 이러한 클로저의 특성을 이용하면, 함수가 선언될 때 생성된 렉시컬 환경에 있는 변수를 계속해서 사용할 수 있다. 예를 들어, 함수 내부에서 선언된 변수를 함수 외부에서 사용하려고.. 2024. 2. 15.
[Vue] Vue의 반응형 시스템 Vue에서 data가 변경될 때 어떻게 그때 그때 반응하고 업데이트해서 DOM을 rerender할까요? 1. getter와 setter는 속성에 접근(get)하거나 수정(set)할 때, Vue가 종속성 추적 또는 변경 알림을 수행할수 있습니다. 2. 모든 컴포넌트 인스턴스에 해당 watcher 인스턴스가 있으며, 이 인스턴스는 컴포넌트가 종속적으로 렌더링 되는 동안 수정된 모든 것을 기록합니다. 3. 나중에 종속적인 setter가 트리거가 되면 watcher에 전달하고 컴포넌트가 리렌더링 됩니다. Vue는 DOM 업데이트를 비동기적으로 처리하는데요, 1. 데이터 변경 발견 -> 큐에 이벤트루프에서 생기는 모든 데이터 변경을 버퍼에 담음 2. 같은 Watcher가 여러번 발생 시 대기열에서 한 번만 푸시됨.. 2021. 5. 7.
[javascript] formdata 전송에 대하여 form이란 뭘까요? form은 사용자에게 입력을 받은 데이터, 양식인데요. 주로 회원가입, 아니면 상품등록, 포스트등록 CRUD가 이루어지는 사용자와 애플리케이션의 중간 관문입니다. 백엔드에 프론트엔드단에서 받은 formdata를 전송해줄때 formdata객체를 만들어서 받아온 정보들을 넘겨주는데요. 이 formdata라는 특별한 객체에 대하여 알아 보겠습니다. 1. Formdata와 content-type formdata객체를 MDN문서에서는 form 필드과 값을 key/value 쌍으로 생성한다고 합니다. 이 formdata에 대해 잘 이해하기 위해서 POST에 대해 잘 알아야하는데요. HTTP POST 요청은 서버로 데이터 전송을 하여 등록을 요청하는 것입니다. CRUD의 Create인 것이죠. .. 2021. 4. 30.