JavaScript this

JavaScript에서 this는 다른 언어와 다르게 동작함 다른 언어에서는 일반적으로 this는 자신을 가리키는 참조 변수로 사용됨 JavaScript에서는 this에 바인딩되는 객체는 한가지가 아니라 함수 호출 방식에 따라 달라짐 대부분의 경우, this의 값은 함수를 호출하는 방법에 의해 결정됨 -> this가 사용된 함수가 어디서 어떻게 실행되었는지가 중요!! 누가 this를 불렀는지를 알면 조금 쉬울지도..? 브라우저의 콘솔 창에 this를 호출하면 이런 실행 결과가 나온다 window 객체가 브라우저의 전역 객체이기 때문! - this 바인딩 규칙 함수 실행 시 전역객체(window) 할당 메소드 호출 시 메소드를 소유하고 있는 해당 객체 할당 객체 생성 시 생성된 객체 할당 • 전역에서 사용..

• format_list_bulleted JavaScript
• · 2023. 5. 28.
• textsms

JavaScript 동작원리

자바스크립트에 대해 깊게 공부하기 위해서는 자바스크립트의 동작원리를 알아야한다. 기본적으로 단일 스레드여서 비동기 작업이 불가능할 것 같지만 전혀 아니다! 그 이유에 대해 알아보자. • JavaScript 엔진 JavaScript 파일은 컴퓨터가 해석할 수 없으므로 브라우저의 JavaScript 엔진이 해석해준다. 이 때, memory heap과 call stack을 사용해서 JavaScript를 기계어로 변환해준다. - Memory Heap? 메모리 할당이 일어나는 곳 변수, 함수, 객체 등 모든 메모리 할당은 여기서 발생함 - Call Stack? call = function 호출 stack = 쌓이는 곳(Last In First Out) 즉, 함수 호출이 쌓이는 곳으로 call stack을 통해 어..

• format_list_bulleted JavaScript
• · 2023. 5. 27.
• textsms

JavaScript DOM

단순 정보 전달만이 목적인 정적인 웹을 개발하려면 HTML, CSS로 충분하겠지만 동적인 웹을 개발하기 위해서는 자바스크립트와 DOM은 필수이다. • DOM이란? Document Object Model의 약자로 해석하면 문서 객체 모델 (Document = 웹 페이지 자체) HTML 요소에 접근할 수 있도록 API를 제공하는 일종의 인터페이스 DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있음 계층 구조로 표현됨 (트리 자료 구조로 구축) HTML 문서는 하나의 최상위 노드(root 노드)에서 시작해서 자식 노드들을 가짐 (노드? -> root 노드를 포함한 하나하나 요소를 뜻함) • JavaScript와 DOM의 관계 DOM = JavaScript 라고 오해할 수 있지만 아..

• format_list_bulleted JavaScript
• · 2023. 5. 16.
• textsms

JavaScript Hoisting(호이스팅)

• JavaScript의 변수 생성 단계 JavaScript에서는 3단계에 걸쳐서 변수를 생성함 선언(Declaration) 변수 객체를 생성하고 변수를 등록 스코프가 변수 객체를 참조 초기화(Initialization) 변수 객체 값을 위한 공간을 메모리에 할당 이 때, 할당되는 값은 undefined 할당(Assignment) undefined로 초기화된 변수에 실제 값을 할당 • Hoisting(호이스팅)이란? 코드를 실행하기 전, 변수/함수 선언을 해당 스코프의 최상단으로 끌어올려진 것 같은 현상 JavaScript의 독특한 특징 중 하나 컴파일 단계에서 코드 실행 전, 함수와 변수 선언을 스캔하고, 모든 함수와 변수 선언들은 스코프에 등록(메모리에 저장) JavaScript에서는 나중에 선언되는..

• format_list_bulleted JavaScript
• · 2023. 5. 15.
• textsms

PWA란?

PWA란? Progressive Web App의 약자 HTML, CSS, JavaScript와 같은 웹 기술로 구현 앱 스토어에서 설치하는 것 뿐만 아니라, 웹 기술만으로 앱과 같은 기능을 갖춤 웹이지만 모바일 환경에서 설치가 가능하고, 앱과 유사한 사용자 경험을 제공해주는 웹 앱 가장 대표적인 예시 - twitter.com 보안상의 이유로 브라우저에서 접근하지 못하는 시스템 하드웨어와 소프트웨어에도 접근 가능 네이티브 앱 vs PWA 실행 네이티브 앱은 설치를 해야 실행을 할 수 있지만 PWA는 설치없이 브라우저에서 실행이 가능(설치도 가능) 작성 방법 네이티브 앱은 각 기기의 OS에 맞는 프로그래밍 언어로 개발(iOS - 스위프트, 안드로이드 - 자바) PWA는 HTML, CSS, JavaScript..

• format_list_bulleted WEB
• · 2023. 5. 14.
• textsms

CORS? 어떻게 해결하지?

웹 개발 시, 다른 도메인 서버에 있는 자원을 가져다 쓰거나 제공해주는 경우가 많음 웹 브라우저는 HTTP 요청에 대해 각기 다른 특징을 가지기 때문에 CORS ERROR가 생김 CORS란? Cross-Origin Resource Sharing 교차 출처 리소스 공유 (교차 출처 = 다른 출처) 다른 출처의 리소스 공유에 대한 허용/비허용 정책 • 출처(Origin)? Origin = scheme + host + port - scheme(protocol) : http, https - host : 사이트 도메인 - port : 포트 번호 https://www.google.com/maps 라는 주소에서 protocol = https, host = www.google.com, port = :443 • 동일출처..

• format_list_bulleted WEB
• · 2023. 5. 10.
• textsms