자바스크립트와 타입스크립트 이미지 우선 이것부터 는 JavaScript 기반의 언어 는 클라이언트 측 스크립팅 언어이고, 는 객체 지향 컴파일 언어 JavaScript 이며, 는 는다. 웹 개발에 주로 사용됨 폼 유효성 검사, 애니메이션 적용 및 이벤트 생성을 수행 사용자가 웹 브라우저를 열고 웹 페이지를 요청하면 해당 요청이 웹 서버로 이동함 멀티 스레딩, 멀티 프로세싱 기능이 없음 TypeScript 이며, 지만, 다. JavaScript의 상위 집합으로 JavaScript의 모든 기능이 있음 TypeScript 컴파일러를 사용하여 ts(TypeScript)파일을 js(JavaScript) 파일로 변환과 통합이 쉽다. 클래스 기반 객체를 만들 수 있다. 클래스 기반이므로 객체 지향 프로그래밍 언어로 상속, 캡슐화 및 생성자를 지원할 수 있다. 우선 이것부터 JavaScript TypeScript

가비지 컬렉터란? 자바스크립트는 우리가 사용하지 않는 값들에 대한 메모리 영역을 주기적으로 정리하고 불필요한 메모리 사용이 없도록 이라는 자동 메모리 관리방법을 통하여 관리한다. 성능에 예민한 상황에서 작업하는 경우를 제외하고, 일상반적인 상황에서는 에 대해 크게 신경 쓰는 경우는 없다. 하지만 이런 자동 메모리 관리는 잠재적 혼란의 원인을 일으키는 경우도 있다. 특징 이다. 생성된 함수가 주변 환경에 대한 값을 지속적으로 사용하고 있을 수 있으므로, 참고링크 트리 쉐이킹(Tree Shaking) MDN - 자바스크립트의 메모리 관리 가비지 컬렉션 - 모던 JavaScript 튜토리얼 특징 참고링크

V8 JavaScript engine이란? C++로 작성된 Google의 오픈 소스 고성능 JavaScript 및 WebAssembly 엔진이다. Chrome 및 Node.js 등에서 사용된다. V8과 다른 엔진의 가장 큰 차이점은 V8 엔진의 컴파일러다. JIT-C(Just In Time Compiler) JIT 이미지 일반적인 Compiler 방식에는 과 이 있다. 이 두개의 컴파일 방식을 합친 것으로 실행시점에서 인터프리터 방식으로 바이트 코드를 생성한다. 그 후 바이트 코드를 기계어 코드로 만들고, 그 코드를 캐싱하여, 같은 함수가 여러 번 불릴 때 매번 기계어 코드를 생성하는 것을 방지한다. V8의 컴파일 과정 V8의 컴파일 과정 이미지 Blink에서 를 만나면, Javascript 스트리밍을 시작한다. 스트리밍으로 전달 받은 UTF-16 문자열은 Scanner를 이용해 Token(let, for)을 생성한다. 생성된 Token을 가지고, Parser가 추상 구문 트…

면접을 준비하면서 최근 면접때는 자료구조에 대해서 잘 나오지 않아 생각을 못하고 있었는데, 어제 면접에서 자료구조에 대해서와 장단점 비교에 대한 질문들이 나오게 되었고 나는 당황했다. 그래서 준비가 미비했던걸 인정하고 한번 정리해 보아야겠다. 블로그로 적으면 그래도 한번은 면접때 쭉 볼수 있으니까 말이다. 시간 복잡도에서 대해서 잠깐 알고 아래글을 읽자 아래 글을 읽으면서 시간 복잡도라는 것을 작성했는데, 알고리즘의 로직을 코드로 구현할 때 보통 많이 볼 수 있는데, 시간 복잡도를 고려한다는 말은 ‘입력값의 변화에 따라 연산을 실행할 때, 연산 횟수에 비해 시간이 얼마만큼 걸리는가?’라는 말이다. 효율적인 알고리즘을 구현한다는 것은 시간복잡도를 고려한다는 말이고 다시 말하면 는 이야기이다. 시간 복잡도는 보통 으로 나타낸다. Big-O 표기법은 를 표기하는 방법이다. 자료구조란? 우선 자료구조에 대허서 설명해보려고 한다. 컴퓨터 과학에서 효율적인 접근 및 수정을 가능케 하는 …

오늘 면접을 보았는데, 에 관한 기술질문이 있었고, 이에 대해서 잘 알고있지 않아 글을 정리해보고자 한다. 일반적인 Array (밀집 배열) 일반적으로 배열이라는 자료 구조의 개념은 으로 를 말한다. 배열의 요소는 으므로 인덱스를 통해 단 한번의 연산으로 임의의 요소에 접근(임의 접근(random access), 시간 복잡도 O(1))할 수 있다. 이는 매우 효율적이며 고속으로 동작한다. (하지만 정렬되지 않은 배열에서 특정한 값을 탐색하는 경우, 모든 배열 요소를 처음부터 값을 발견할 때까지 차례대로 탐색(선형 탐색(linear search)을하기 때문에 시간 복잡도는 O(n))이다.) 또한 배열에 요소를 , 배열 요소를 도 있다. 즉, 일반적인 Array는 하나의 타입으로 통일되어 있으며 서로 연속적으로 인접해 있기 때문에 이러한 배열을 이라 한다. 일반적인 Array 이미지 JavaScript의 Array (희소 배열) JavaScript의 Array은 일반적인 Array와는…

EventLoop 이미지 은 Memory Heap / Call Stack로 구성되어 있으며, JS로 작성된 코드를 해석하고 실행하는 인터프리터(프로그래밍 언어의 소스 코드를 바로 샐행하는 컴퓨터 프로그램 또는 환경)다. JS는 단일 스레드(single thread)인데 즉, Call Stack이 한 개(single)라는 뜻이다. (가장 유명한 으로는 구글의 V8 Engine이 있다) Memory Heap 메모리 할당이 일어나는 곳 (변수, 함수 등) Call Stack 코드가 실행될 때 쌓이는 곳. (stack : 자료구조 중 하나, 선입후출) Web API 브라우저에서 제공하는 API (DOM, Ajax, Timeout 등) Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백함수를 Callback Queue 안에 넣는다. Callback Queue 비동기적으로 실행된 콜백함수가 보관되는 곳 (setTimeout, addEventListen…

이벤트 위임이란? 상위 요소에서 하위 요소의 이벤트를 제어하는 방식 을 하면 강력한 이벤트 핸들링 패턴인 을 이벤트 위임을 이용해 요소마다 핸들러를 할당하지 않고, 에 이벤트 핸들러를 공통 조상에 할당한 핸들러에서 하면 사용자의 인터랙션을 통해 추가되는, 아직 만들어지지 않은 요소에 이벤트 핸들러를 할당해야 하는 경우 사용한다. 장점과 단점 장점 많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약된다. 요소를 추가하거나 제거할 때 해당 요소에 할당된 핸들러를 추가하거나 제거할 필요가 없기 때문에 코드가 짧아진다. 이나 유사한 기능을 하는 스크립트로 요소 덩어리를 더하거나 뺄 수 있기 때문에 DOM 수정이 쉬워진다. 단점 이벤트 위임을 사용하려면 이벤트가 반드시 버블링 되어야 합니다. 하지만 몇몇 이벤트는 버블링 되지 않습니다. 그리고 낮은 레벨에 할당한 핸들러엔 를 쓸 수 없다. 컨테이너 수준에 할당된 핸들러가 응답할 필요가 있는 이벤트이든 아니든 …

함수와 함수가 선언된 어휘적 환경의 조합이다. 어휘적 범위 지정(Lexical scoping) 위 코드를 실행하면  함수 내의 문이 부모 함수에서 정의한 변수 의 값을 성공적으로 출력한다. 이 예시를 통해 함수가 에서 파서가 어떻게 변수를 처리하는지 알 수 있다. 이는 어휘적 범위 지정(Lexical Scoping)의 한 예이다. 여기서 이란, 어휘적 범위 지정(Lexical Scoping) 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미한다. 단어 은 이런 사실을 나타낸다. 는 외부 범위(scope)에서 선언한 변수에도 접근할 수 있다. 클로저(Closure) 자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성한다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 는 내부함수가 외부함수의 맥락(context)에 …

리액트의 상태 업데이트는 항상 으로 수행되어야 한다. mutate(돌연변이한)한 값의 대상과 위치에 따라 컴포넌트가 렌더링 되지 않을 수 있다. 데이터가 실제로 업데이트 된 시기와 이유에 대해 혼란을 겪을 수 있다. 불변성이란? Immutability(불변성)는 상태나 값을 변경하지 않는 것이다. JavaScript에서 예를 들자면, JavaScript의 원시 타입의 값들은 을 갖고 있다. 데이터 타입 원시 타입(string, number, bigint, boolean, undefined, ES6 부터 추가된 symbol) 변경이 불가능한 값(읽기전용) 원시 값을 변수에 할당하면 확보된 메모리 공간(주소)에는 실제 값이 저장됨 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시값이 복사되어 전달된다. 참조 타입(Object, Array, Function) 변경이 가능한 값 객체를 변수에 할당하면 확보된 메모리 공간에 참조값이 저장됨 객체를 가르키는 변수를 다른 변수에 할당하면…

Callback 지옥을 유발하는 처리방식보다 비동기 프로그래밍을 동기방식처럼 직관적으로 표현할 수 있다. Async & await란? 를 함수(Function) 앞에 붙이면 항상 promise를 반환한다. (프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 함) 는 평범한 함수를 프라미스를 리턴하는 비동기적인 함수로 만들어주는 키워드고 안에서 는 코드의 순서를 기다리며 자신의 차례가 올때까지 기다렸다가 자신의 차례가 오면 결과를 반환한다. Async & await 이전에 Promise를 사용할 경우 promise는 접근할때 .then()을 사용하고 error처리는 .catch()로 한다. 단어의 의미 약속 ‘미래’ 시점의 데이터를 위한 것이긴 하지만 ‘promise’를 갖고 있기만 하면, 그 데이터가 미래시점에 있는지?, 이미 받았는지? 에 대해서는 상관없다. 프로미스는 일관된 비동기를 강제한다. Pr…

Promise란? “란 비동기 처리를 조금 더 수월하게 처리하게끔 도와주는 추상화된 소프트웨어 개념” 콜백지옥을 해결하기 위해 에서 Promise로 지원하게 되었다. Promise의 핵심은 비동기에서 성공과 실패를 분리해서 메소드를 수행하며, 하다는 점이 있다. Promise는 , 비동기식이 정상적으로 실행된다면 를 비정상적으로 실행된다면 두번째 인수인 를 호출한다. Promise를 호출한 이유 사용할 수 있는 메소드는 then: reslove()를 통한 리턴 값 catch: reject()를 통한 리턴 값 finally: 실행 여부와 상관없이 이후 이벤트 실행 가장 큰 으로는 코드의 가독성이 증가 반복해서 재사용하는 예외처리 작업이 줄어듬 를 사용하면 상황을 쉽게 찾아내 한번에 비동기 처리를 해야되는 경우 Promise.all 프로미스가 담겨 있는 배열 등의 이터러블을 인자로 전달 받는다. 그리고 하고 그 처리 결과를 resolve하는 새로운 프로미스를 반환한다. 전달받은 …

콜백이란? 비동기처리방식에 속하며, 함수가 끝나고 난 뒤에 실행되는 함수 자바스크립트에서 함수는 객체이다. 따라서 함수는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있는데, 인자로 대입되는 함수를 라고 부름 아래의 예시처럼 다른 코드가 특정 코드가 마무리되기 전에 실행되지 않도록, 즉 비동기 처리를 위한 방법 출력 순서는 2 → 1 콜백의 불편사항 비동기 처리에 콜백 함수를 이용하게 되면 코드를 중첩시켜 작성하게 되기 때문에 에러, 예외처리가 어렵고 복잡도가 증가하게 되어 콜백지옥을 맛볼 수 있다. 콜백함수의 중첩은 에러처리가 힘듬다. callback 지옥 이미지 콜백이란? 콜백의 불편사항

깊은복사와 얕은 복사 Shaloow Copy - 얕은 복사란? 복사할 때 원래값과 복사된 값이 같은 참조를 가리키고 있는 것을 말한다. 객체안에 객체가 있을 경우 한개의 객체라도 원본 객체를 참고 하고 있다면 이를 얕은 복사라고 한다. 객체를 가르키는 변수(원본)을 다른 변수(사본)에 할당하면 원본 의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라하며, 얕은 복사이다. 또 얕은 복사는 한다. 결국 얕은 복사란? , 원본 또는 사본 중 어느 한쪽에서 객체를 변경(변수에 새로운 객체를 재할당하는 것이 아니라 객체의 프로퍼티 값을 변경하거나 프로퍼티를 추가, 삭제)하면 얕은 복사를 하는 방법에는 Object.assign() Array.Slice() Spread 연산자 (전개연산자) Deep Copy - 깊은 복사란? 깊은 복사된 객체는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끈헝진 객체를 말한다. 깊은 복사는 하는 경우를 말한다. 깊은 복사를 하는 방법에는 J…

Destructuring(구조 분해 할당)이란? 와 은 자바스크립트에서 가장 많이 쓰이는 자료 구조이다. 키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 땐 객체 컬렉션에 데이터를 순서대로 저장할 땐 배열 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 하는데, 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생긴다. 이때 객체나 배열을 변수로 ‘분해’할 수 있게 해주는 특별한 문법인 을 사용할 수 있다. 그 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 는 그 진가를 발휘한다. 이와 같이 구조 분해를 하게 되면 인덱스를 이용해 배열에 접근하지 않고도 변수로 이름과 성을 사용할 수 있게된다. ‘‘로 나머지 요소 가져오기 배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 이어지는 나머지 값들은 한데 모아서 저장하고 싶을 때가 있습니다. 이럴 때는 점 세 개 를 붙인 매개변수 하나를 추가하면 ‘나머지(rest)’ 요소를 가져…

개요 자바스크립트에는 여덟 가지 자료형이 있다. 이 중 일곱 개는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 ‘원시형(primitive type)’라고 부른다. 그런데 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다. 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있다. 객체를 만들기 위해서는 중괄호 {}를 이용해 만들 수 있는데, 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property)를 여러 개 넣을 수 있는데, 아래와 같이 허용할 수 있으며, 프로퍼티 키는 ‘프로퍼티 이름’ 이라고도 부른다. 그리고 프로퍼티 값엔 모든 자료형이 올 수 있다. 키에는 문자형 값에는 자료형 그래서 객체란? 객체는 몇 가지 특수한 기능을 가진 연관 배열(associative array)이다. 객체는 프로퍼티(키-값 쌍)를 저장한다. 프로퍼티 키는 문자열이나 심볼이여야 한다. (보통은 문자열) 값은 어떤 자료형도 가능하다. 프로…