자바스크립트 7

자바스크립트 프레임워크 동작 원리 - 모듈 번들러(Webpack, Vite), 트랜스파일러/컴파일러(Babel, Polyfill), Typescript

자바스크립트 라이브러리를 종합해서 제공하는 프레임워크는 많은 수의 자바스크립트 파일을 가집니다한 자바스크립트 프레임워크 내에 워낙 다양한 기능을 제공하는 파일들이 많기 때문입니다 여기서 해결해야 하는 문제는,이 많은 모듈들의 순서는 어떻게 처리할 것인가?모듈이 많아질수록 늘어나는 HTTP 요청으로 인한 오버헤드는 어떻게 해결할 것인가?등이 있습니다 유저가 웹 브라우저에서 하나의 웹 페이지를 볼 때 마다  수많은 파일들의 전체를 다 다운 받는다면컴퓨터는 과부하가 오게 되는데, 이럴때 번들러를 사용하면 됩니다  번들러: Bundle - 묶다번들러는 다수의 JS 파일을 하나의 JS 파일로 압축해 줍니다번들러를 사용하면 웹 페이지를 보여줄 때 다수의 JS 라이브러리 파일들을 하나의 JS 파일로 압축해서 보여줄 ..

자바스크립트 2024.05.03

자바스크립트 런타임과 엔진 구성, 자바스크립트 엔진의 비동기 처리

자바스크립트 런타임 = 자바스크립트 엔진 + API 및 기타 라이브러리/바이너리자바스크립트는 웹 브라우저 뿐만이 아니라 다양한 환경에서 실행 될 수 있는데,이때 코드가 실행되는 환경을 런타임이라고 합니다 자바스크립트 런타임은 자바스크립트 엔진에 API 및 기타 라이브러리를 더한 것입니다자바스크립트로는 웹 브라우저, 웹 서버 둘 다 개발이 가능한데, 각각웹 브라우저(ex. Chrome) = 자바스크립트 엔진(V8) + Web APIs웹 서버(ex. Node.js) = 자바스크립트 엔진(V8) + Node APIs + LIBUV(비동기I/O)로 이루어져 있습니다자바스크립트 엔진의 종류V8(Chrome)SpiderMonkey(Mozilla Firefox)JavascriptCore(Apple Safari)Cha..

자바스크립트 2024.05.02

자바스크립트 - 기본자료형, 참조자료형, 깊은 복사, 얕은 복사, Object.assign()

기본자료형 & 참조자료형 기본 자료형 (Primitive Value) 문자열(String) immutable 숫자형(Number) 논리형(Boolean) undefined null BigInt Symbol 참조 자료형 (Referenct Value) 객체 mutable 기본자료형과 참조자료형이 어떻게 복사되는 지 알아봅시다 기본자료형의 복사 기본 자료형(문자열 ,숫자, 불린 값 등)은 변수에 데이터를 할당할 때 데이터 값이 할당이 됩니다 따라서 다른 변수에 이 변수를 할당하면 새 변수에 데이터 값을 복사해서 할당합니다 let flower = 'Rose'; let copy = flower; // 변수 flower의 데이터 "Rose"를 할당 > 이 상태에서 원래 변수의 값을 바꾸면 어떻게 될까요? flow..

자바스크립트 2024.04.16

자바스크립트 - 객체, 프로퍼티, key, value, 메서드

객체(Object)란? 자바스크립트에서는 원시 타입을 제외한 나머지 모두가 객체입니다(함수나 배열도 객체입니다) JavaScript 내장 객체: 자바스크립트 엔진이 구동되는 시점에 바로 제공되고 어디에서나 사용이 가능(ex. Date, Number) 브러우저 내장 객체: Javascript가 구동되는 시점에 바로 사용이 가능한 객체(ex. BOM, DOM) 사용자 정의 객체: 사용자가 생성자 함수 또는 객체 리터럴로 생성한 객체 객체는 키(key)와 값(value) 한 쌍으로 구성된 속성(property)의 집합입니다 객체에는 하나 이상의 다양한 값들을 담을 수 있는데 이들 사이에 쉼표(,)로 구분을 해줍니다 Property(프로퍼티) var student = { firstName : "Judy", //..

자바스크립트 2024.04.04

자바스크립트 - 실행 컨텍스트, This, 바인딩

실행 컨텍스트(Execution Context) 실행 컨텍스트란 코드가 실행 될 때 환경 정보들을 모아둔 객체입니다 실행 컨텍스트는 Last-In-First-Out인 Call Stack에 쌓아 올려지며 실행이 완료되면 빠지게 됩니다 코드의 환경과 순서를 보장합니다 Active Context: 전역 -> A 함수 -> B 함수 -> A 함수 Acitve한 컨텍스트는 콜스택 맨 위의 컨텍스트 입니다 현재 실행 컨텍스트에서 필요한 값을 찾고 없으면 하위 컨텍스트로 이동하며 전역 실행 컨텍스트까지도 찾지 못하면 에러를 발생시킵니다 실행 컨텍스트는 스택에서 제거되도 메모리에서 바로 제거되지 않는데, 추후에 참고해야 할 수도 있기 때문입니다 Garbage Collector가 지켜보다가 더 이상 사용되지 않으면 자동..

자바스크립트 2024.03.29

자바스크립트 - 함수, 순수함수, 일급함수, 호이스팅, var 호이스팅

앞선 글에서 변수에 대해서 알아보았습니다 이번에는 좀 더 많은 일을 할 수 있게 해주는 함수에 대해 알아보도록 하겠습니다 함수란? 어떤 목적을 위한 일을 수행하는 코드의 집합입니다 함수를 쓰는 이유 코드의 재사용성: 동일한 함수를 여러 곳에서 호출하여 사용할 수 있습니다 모듈화: 프로그램을 더 작은 단위로 나눠서 복잡성을 줄일 수 있습니다 유지보수성: 유지보수를 하기 용이합니다 코드의 가독성: 함수의 이름을 보고 기능을 직관적으로 이해할 수 있습니다 테스트 용이성: 개별 테스트를 하기 용이합니다 함수 작성 방법 함수는 외부에서 변수를 넘겨받아 함수 내부에서 수행되는 연산에 사용할 수 있습니다 이때 넘겨 받는 변수를 매개 변수, 혹은 인자라고 합니다 더하기 함수라면 두개의 숫자를 인자로 넘겨받아 더하기 연..

자바스크립트 2024.03.29

자바스크립트 - 변수, var, const, let, 선언, 할당, 초기화, 렉시컬 스코프, 스코프 체인

앞서 여러 프로젝트를 진행한 결과 프론트엔드 웹 개발자로 진로를 정했고, 나에게 없는 기초를 튼튼히 다져야겠다는 생각이 들어 [SK플래닛] 웹 풀스택 개발자 과정 ASAC과 함께 자바스크립트, 리액트, 스프링부트 공부과정을 블로그에 작성하기로 결심했다. 풀스택이지만, 어느 한쪽을 얕게 공부하지 않는 빡센 커리큘럼이라고 한다. 4개월 동안 교육을 듣고 블로그에 작성하는 이 시간들을 통해 유의미한 결과가 도출되기를!!😎 자바스크립트란? 자바스크립트는 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어 자바스크립트의 역할은 웹페이지에서 다양한 기능을 구현하는 것입니다 예시로 애니메이션 동작, 팝업 띄우기, 사용자에게 문자 입력을 받기 등이 있습니다 *자바와는 아무런 연관이 없습니다^^ 자바스크립트는 미..

자바스크립트 2024.03.28