본문 바로가기

유블로그

 (9)
[JS] 이벤트 루프 싱글 스레드 언어인 자바스크립트가 비동기가 가능한 이유 이벤트 루프와 같은 비동기 코드 실행 원리를 알고 개발을 해야 한다. 효율적이고 전문적인 코드 작성을 가능하게 한다. 어떻게 코드가 실행되는지를 너머서 어떤 왜 비동기 방식이 필요한지, 어떤 상황에서 비동기 코드가 우선되어야 하는지를 구분할 수 있다. 싱글 스레드란? 한번에 하나의 작업만 수행할 수 있는 프로그래밍 언어이다. 해당 언어의 실행 환경이 단일 실행 흐름을 사용한다는 것을 뜻한다. JS는 대표적인 싱글 스레드 언어이다. 싱글 스레드 모델에서는 코드가 순차적으로 실행이 되는데, 한 작업이 완료된 후에 다른 작업이 시작된다. 이 모델의 주요 이점은 프로그램의 흐름을 이해하고 디버깅하기가 쉽다는 것이다. 한 작업이 많은 시간을 소요할 경우, 다..
[JS] 비동기 동기 (Synchronous) 순차적으로 실행되는 것을 의미한다. 한 작업이 완료 되어야 다음 작업이 시작되는 것이다. 작성하는 코드는 대부분 동기식으로 작동한다. 한 작업이 완료되기 전까지 다음 작업으로 넘어가지 않는다. 장점은 프로그램 흐름을 이해하기 쉽고 예측하기 쉽다. 단점은 작업이 끝나기를 기다리는 동안 다른 작업을 수행할 수 없어 효율성이 떨어진다. 비동기 (Asynchronous) 작업들이 독립적으로 실행이 되고, 완료를 기다리지 않고 다른 작업을 시작한다. 장점은 여러 작업을 동시에 처리 가능하여 효율적으로 작동한다. 단점은 프로그램의 흐름을 추적하고 관리하기가 힘들다. 비동기 코드가 어려운 이유는 일반적으로 작성하는 코드는 동기식이다. 이는 명령이 순차적으로 실행되는 것을 의미한다. 비동..
[JS] 이벤트 버블링과 캡처링 웹 브라우저는 사용자와 상호작용이나 브라우저 자체 상태 변화 감지를 위해 다양한 이벤트를 제공한다. 키보드에서 글자 입력, 페이지 스크롤 이러한 이벤트 들은 웹페이지에 사용자 동작을 감지하여 적절한 반응을 생성한다, 웹 브라우저에서는 이벤트를 효율적으로 처리하기 위해 이벤트 버블링과 캡처링 2가지 메커니즘을 사용한다. 두 개념의 정의와 작동 원리에 대해 알아본다. 웹 브라우저에서 이벤트 처리는 웹앱의 ui와 상호작용을 관리하는 데 있어 아주 중요하다. 이벤트 버블링과 캡처링 두 가지 이벤트 전파 메커니즘이 존재한다. 이들 메커니즘은 개발자가 이벤트를 효과적으로 처리하고 관리하는데 중요하다. 여러 자식 요소들을 거처 발생하는 이벤트를 효율적으로 처리할 수 있다. 예를 들어 하나의 부모 요소에서 자식 요소들..
[JS] 호이스팅 호이스팅 자바스크립트 엔진이 실행 컨텍스트를 생성할 때 변수나 함수 선언을 먼저 읽고 처리하는 특성, 물리적으로 끌어 올려지는 것은 아님. 끌어 올려지는 것처럼 작동 코드 실행 전에 실행 컨텍스트 구성 과정에서 호이스팅이 발생한다. 변수나 함수의 값이 선언되기 이전에 참조하면 예기치 않는 결과나 오류가 발생할 수 있다.같은 이름의 함수를 재선언하면 이전 함수를 덮어쓰는 문제가 발생할 수 있다. 이를 방지하기 위해 호이스팅 매커니즘을 이해하여야 안정적인 코드 작성이 가능하다. 함수 선언문과 함수 표현식의 호이스팅 처리 방식이 다르다. 함수 선언문은 전체 함수 구조가 호이스팅, 함수 표현식은 변수 선언 부분만 호이스팅 된다. 함수 본문이 호이스팅 되지는 않는다. 함수 표현식을 사용할 때는 해당 함수가 실행 ..
[JS] 기본형 데이터와 참조형 데이터 기본형 데이터 메모리 할당 기본형은 불변성 특징을 가진다. 한번 생성된 데이터는 변경될 수 없다. 기본형 - string, number, boolean, null, undefined, symbol, BigInt 변수에 값을 직접 저장하고 데이터 복사할 때는 값 자체가 복사된다. cf. 참조형 메모리에 저장될 때 참조를 통해 접근하며, 데이터 타입은 크기가 가변적이고 불변적이지 않다. 참조형 - object, array, function, RegExp 메모리에 객체가 저장되고 변수는 그 메모리 주소를 참조한다. 복사를 할 때에는 메모리 주소 즉, 참조 값이 복사가 된다. 따라서 참조형 데이터가 복사된 변수들이 동일한 메모리 주소를 가리키게 함으로써 한 변수에서 객체를 수정하면 다른 변수에도 영향을 미친다...
[JS] JavaScript 프로젝트에서 스타일 설정 방법 3가지 코드 예시 1. 인라인 스타일 app.style.background = '#000'; app.style.setProperty('background', '#f00'); cssText는 기존에 설정된 inline이 날아감 app.style.cssText = ` background: #fff; max-width: 500px; width: 100%; margin: 100px auto; padding: 20px; border-radius: 6px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); `; app.style.removeProperty('box-shadow'); 2. 스타일 시트 document.styleSheets[0].insertRule(` #app { background: #f..
[JS] 실행 컨텍스트 실행 컨텍스트란? 자바스크립트 엔진이 코드를 실행하는데 사용하는 내부 매커니즘이다. 이 컨텍스트는 실행되는 코드에 대한 환경 정보를 포함한다. 변수, 함수 선언, this의 값 등의 스코프 값 정보가 포함된다. 실행 컨텍스트가 활성화 되는 시점에 호이스팅, 외부환경, this값 등을 설정한다. 전역 실행 컨텍스트 js 코드가 실행될 때 생성되는 가장 기본적인 실행 컨텍스트로 전역 함수와 변수를 포함한다. 글로벌 실행 컨텍스트에 대한 예시 코드이다. let globalLet = 'Hello World'; // 전역 변수 function globalFunction() { // 전역 함 return 'Hello Global Function'; } 객체 형식으로 글로벌 실행 컨텍스트 구조를 표현해 보면 다음과 ..
[JS] 클로저 클로저는? 정의) A closure is the combination of a function bundled together (enclosed) with references to its surrouding state (the lexical environment). 함수가 선언될 당시의 Lexical Environment의 상호 관계에 따른 현상. 비공개 변수를 가질 수 있는 환경에 있는 함수가 클로저이다. 외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수이다. 클로저는 열린 변수식을 닫힌 변수식으로 변환해준다. 외부 스코프의 변수에 접근해서 그 변수가 가비지 컬렉션의 대상에서 제외 되도록 한다. 즉, 함수의 실행 컨텍스트가 종료되어도 해당 변수를 계속 참조할 수 있게 해준다. 클로저는 내부 함수..

티스토리툴바