Jerry

이벤트 전파(Event Propagation)는 JavaScript에서 이벤트가 DOM 요소 계층을 따라 이동하는 방식을 설명하는 개념으로, 캡처링(Capturing) 단계, 타깃(Target) 단계, 버블링(Bubbling) 단계의 3단계로 진행됩니다.      1. 이벤트 전파의 개념과 3단계- 이벤트가 발생하면 브라우저는 특정한 흐름을 따라 이벤트를 전달 1) 캡쳐링 단계 (Capturing Phase)- 최상위 window 객체에서 시작하여 이벤트 발생 요소까지 DOM 트리를 타고 내려감- addEventListener의 세 번째 인자로 true를 전달하면 이 단계에서 이벤트 핸들러가 실행addEventListener는 이벤트 리스너를 등록하는 메서드이며, 이벤트 핸들러(event handler)..

자바스크립트의 비동기 처리 방식과 이벤트 루프의 동작 원리를 이해하기 위해서는  마이크로태스크 큐(Microtask Queue)와 태스크 큐(Task Queue, 또는 Callback Queue)의 차이를 명확하게 이해하는 것이 중요합니다!       앞서, 아래와 같이 자바스크립트에 대해 표현했습니다.JavaScript는 싱글 스레드(Single-threaded) 기반의 논 블로킹(Non-blocking) 언어로, 이벤트 기반(Event-driven), 비동기 처리(Asynchronous processing), 동시성(Concurrency)을 지원하는 동적 프로그래밍 언어     자바스크립트는 싱글 스레드 기반의 비동기 이벤트 처리 모델을 사용하는데, 이 모델에서 비동기 코드의 실행 순서를 결정하는 핵..

JavaScript는 싱글 스레드(Single-threaded) 기반의 논 블로킹(Non-blocking) 언어로, 이벤트 기반(Event-driven), 비동기 처리(Asynchronous processing), 동시성(Concurrency)을 지원하는 동적 프로그래밍 언어  동적 프로그래밍 언어(Dynamic Programming Language)는 실행 시간(runtime)에 타입을 결정하거나, 변수나 객체의 속성 등을 변경할 수 있는 프로그래밍 언어를 말합니다.   1. 싱글 스레드 기반(Singled-threaded)- JS는 기본적으로 하나의 Call Stack을 사용하여 코드를 실행하는 싱글 스레드 언어- 이 말은 한 번에 하나의 작업만 실행할 수 있음을 의미- CPU를 활용하는 연산이 길어..

오늘은 여러 종류의 브라우저 저장소들을 알아보는 시간을 가지려고 한다.브라우저에서 데이터를 저장하고 관리하는 방법은 여러가지가 존재한다.각 방식은 용도와 동작 방식, 보안 특성 면에서 차이가 존재한다.       LocalStorage- HTML Web Storage API 의 한 부분  > 브라우저에서 키-값 쌍으로 데이터를 저장할 수 있는 API의 한 부분- 동일 출처(same-origin) 내에서 지속적인 데이터 저장소  > 프로토콜(https://), 도메인(www.example.com), 포트(80, 443 등)가 모두 동일한 경우  > https://www.example.com:443/page1와 https://www.example.com:443/page2는 동일 출처  > http://www..

this는 실행 컨텍스트(Excution Context)에 따라 달라지는 값즉, 함수 호출 방법에 따라 달라짐        this의 결정 방식 (4가지 규칙 + 1)1. 기본 호출 규칙 (전역 / 일반 함수 호출)2. 객체 메서드 호출3. 생성자 함수 호출 (new 키워드)4. 명시적 바인드 (call, apply, bind)5. (추가) 화살표 함수 (Lexical this)    Lexical이란"어휘적인", "코드가 작성된 위치에 따라 결정되는" 이라는 뜻즉, Lexical this는 this가 코드가 작성된 위치(상위 스코프)에 의해 결정된다는 의미    1. 기본 호출 규칙 (전역 / 일반 함수 호출)- this가 window or undefined- 일반 함수에서 this를 호출하면 전역 객..

이번 시간에는 SSR과 CSR에 대해서 알아보겠습니다. SSR은 Server-Side Rendering의 약자이며, CSR은 Client-Side Rendering의 약자입니다.이 둘은 웹 애플리케이션을 렌더링하는 두 가지 주요 방식으로 각기 장단점이 존재합니다.이를 이해하기 위해 렌더링 과정, 성능 최적화, SEO, 사용자 경험, 최신 웹 기술과의 관계 고려해야 합니다. 여기서, 웹 애플리케이션(Web Application)이란?인터넷을 통해 웹 브라우저에서 실행되는 소프트웨어를 의미합니다.우리가 아는 일반적인 소프트웨어인 Window 프로그램(Ms Office, 카카오톡 PC 버전 등)과 달리, 웹 어플리케이션은 별도의 설치 없이 브라우저를 통해 접근(=> 유지보수 편리)이 가능합니다. 또한, 클라이..

"자바스크립트를 사용하다 보면 변수와 함수가 예상과 다르게 동작하는 경우를 본 적이 있을 겁니다.예를 들어 변수 선언 전에 console.log(a);를 호출했을 때 오류가 발생하지 않고 undefined가 출력되는 걸 본 적이 있나요?이런 현상이 발생하는 이유는 바로 호이스팅 때문입니다."   오늘은 자바스크립트의 핵심 개념인 호이스팅과 전역 컨텍스트, 클로저에 대해 알아보는 시간을 가지겠습니다.  1. 도입: 왜 중요한 개념인가?JavaScript에서 호이스팅, 전역 컨텍스트, 클로저는 함수 및 변수의 동작을 이해하는 데 핵심적인 개념이다. - 코드 실행 순서 파악- 스코프 관리- 메모리 효율 향상 과 같이 중요한 역할을 한다.이를 잘 활용하면 버그를 줄이고 유지 보수성을 높일 수 있다.   2. 개..

REST API와 GraphQL은 클라이언트(web app)와 서버가 데이터를 주고 받는 방식다.REST API란?REST는 Representational State Transfer의 약자로,웹 어플리케이션에서 리소스를 구조화하고 접근하는 아키텍처 스타일(방식)이다.  이런 방식(아키텍처 스타일)이지만, 단순한 API 규격이 아니라 여러 원칙을 따르는 방식이다- REST의 원칙으로 Uniform Interface, Stateless, Cacheable, Layered System 등이 존재Uniform Interface- 일관된 인터페이스를 통해 클라이언트와 서버 간의 상호작용 단순화- HTTP 메서드를 통한 리소스 조작 방식이 일관적이어야 한다=> RESTful Api는 간단하고 예측 가능한 구조로 설..