하나씩 배워나가는 개발일지

웹 프론트엔드 기술 면접 준비 대비를 위한 JS 개념을 정리하고자 한다.  Javascript란웹페이지에서 복잡한 기능을 구현할 수 있도록 하는 인터프리터 언어본래 브라우저를 제어하는 언어였으나 Node.js라는 새로운 실행환경과 구글 V8 엔진의 등장으로 인해 자체 어플리케이션을 만들 수 있게 된 언어 싱글 스레드 기반의 프로그래밍 언어 -> 하나의 스레드에서 모든 작업을 처리하기 때문에 한 번에 하나의 작업만 처리가 가능함이러한 동기 방식은 작업이 완료될 때 까지 다른 작업을 처리할 수 없음따라서 이러한 문제를 해결하기 위해 자바스크립트에서는 비동기 처리가 필요함  Javascript의 동작 방식자바스크립트는 싱글 스레드 기반의 언어이며 V8 엔진을 사용V8 엔진의 경우 크게 Memory Heap과 ..

JS의 얕은 복사, 깊은 복사를 이해하기 위해선 우선 자바스크립트의 값에 대해 알아야한다.자바스크립트에서 값은 원시값과 참조값으로 나뉜다. 원시값NumberStringBooleanNullUndefined 원시값은 값을 복사할 때 복사된 값을 다른 메모리에 할당하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다const a = 1;let b = a;b = 2console.log(a); //1console.log(b); //2  참조값ObjectSymbol 참조값은 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킨다const a = {number: 1};let b = a;b.number = 2console.log(a); // {number: 2}console...

Event Loop란? 단일 스레드에서 실행되는 비동기 작업을 처리하는 메커니즘이벤트 루프는 Call stack, Micro task queue, Macro task queue로 구성  JS Engine자바스크립트 엔진은 Memory Heap 과 Call Stack 으로 구성되어 있다.(그림의 왼쪽 영역)가장 유명한 것이 구글의 V8 Engine이다.자바스크립트는 단일 스레드 프로그래밍 언어인데, 이는 Call Stack이 하나 라는 의미이다.(멀티가 되지 않고, 하나씩 하나씩 처리한다는 의미!)Memory Heap : 메모리 할당이 일어나는 곳(ex, 우리가 프로그램에 선언한 변수, 함수 등이 담겨져 있음)Call Stack : 코드가 실행될 때 쌓이는 곳. stack 형태로 쌓임Stack(스택) : ..

원시타입과 객체타입원시타입숫자타입(number): 숫자. 정수와 실수 구분없이 하나의 숫자타입만 존재문자열타입(string): 문자열불리언타입(boolean): 논리적 참, 거짓undefined타입: var키워드로 선언된 변수에 암묵적으로 할당되는 값null타입: 값이 없다는 것을 의도적으로 명시할 때 사용하는 값심벌타입(symbol): ES6에서 추가된 7번째 타입(다른 값과 중복되지 않는 유일무이한 값)객체타입: 원시타입을 제외한 모든 것  Symbol타입주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용심벌은 Symbol 함수를 호출해 생성한다.이 때 생성된 심벌 값은 외부에 노출되지 않는다.또한, 다른 값과 절대 중복되지 않는 유일무이한 값var key = Symbol(..

변수란?하나의 값을 저장하기 위해 확보한 메모리 공간 자체 or 그 메모리 공간을 식별하기 위해 붙인 이름 (= 값의 위치를 가리키는 상징적인 이름) // 예제 : 10 + 20 은 30을 result 라는 변수에 대입한 것var result = 10 + 20;여기서 result 는 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 = 변수이름변수에 저장된 값(위 예제에서 30) = 변수값변수에 값을 저장하는 행위 = 할당(Assignment, 대입, 저장)변수에 저장된 값을 읽어 들이는 것 = 참조(Reference)[ 💡 Note ]사람이 이해할 수 있는 언어로 명명한 변수 이름을 통해 변수에 저장된 값의 의미를 명확히 할 수 있다.즉, "변수에 저장된 값의 의미를 파악할 수 있는 변수 이름은..

클로저를 배우기 전에 스코프에 대한 개념부터 알아야 한다. Scope스코프는 사전적 의미로 ‘범위’를 뜻한다.JavaScript로 함수 작성 시, 중괄호 {}를 이용하여 함수의 범위를 작성한다.즉 여기서 말하는 스코프는 ‘코드가 영향을 미치는 범위’, ‘변수의 유효 범위’ 등으로 정의할 수 있다. 1. 스코프의 개념선언된 변수에 대해서 접근할 수 있는 유효한 범위를 의미한다. 만약, 변수가 해당 스코프에 존재하지 않다면 사용할 수 없다.계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만, 상위 스코프는 하위 스코프에 접근할 수 없다. 2. 스코프의 동작에 따른 구분스코프의 동작 별 구분은 스코프를 결정하는 방식에 따라서, 정적 스코프(혹은 렉시컬 스코프), 동적 스코프로 나뉜다..

이벤트 버블링(Event Bubbling)이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말한다.즉, 한 요소에 이벤트가 발생되면 그 요소의 부모 요소의 이벤트도 같이 발생되는 이벤트 전파방식 버블링 예제 코드를 보자. DIV1 DIV2 DIV3 const divs = document.querySelectorAll("div");const clickEvent = (e) => { console.log(e.currentTarget.className);};divs.forEach((div) => {..

var & letJavaScript는 es6 문법 도입 이전까지 var 키워드만을 이용하여 변수를 선언했다. 그렇기 때문에 코드 실행 중 예기치 못한 문제들이 자주 발생하게 되었다. 예를 들면 다음과 같은 문제들이다.var a = "a"console.log(a) // "a"var a = "b"console.log(a) // "b" 같은 변수에 다른 값을 두 번 할당하였는데도 에러가 나지 않고 멀쩡히 다른 값이 출력되는 것을 볼 수 있다.var는 변수의 재선언, 재할당 모두가 가능하기 때문에 유연한 변수 선언 면에서는 장점일 수 있으나, 코드양이 많아질수록 유지 관리가 힘들며 에러를 찾기도 힘들어진다.또한 var는 Hoisting과도 연관이 있다. 호이스팅이란?인터프리터가 변수와 함수의 메모리 공간을 선언..

자바스크립트 비동기 처리 3가지 방식자바스크립트는 싱글 스레드 프로그래밍 언어기 때문에 멀티 작업을 하기 위해선 비동기 처리 방식이 자주 쓰인다.비동기 처리는 백그라운드로 동작되기 때문에 그 결과가 언제 반환될지 알수 없어, 완료되면 결과를 받아 처리하기 위해 사용되는 대표적인 방법으로 콜백 함수(Callback) 와 이를 개선한 프로미스 객체(Promise)가 있다.하지만 서비스 규모가 커질 수록 코드가 복잡해짐에 따라 코드를 중첩해서 사용하다가 가독성이 떨어지고 유지보수가 어려워지는 상황이 발생되게 되는데, 이를 Callback Hell, Promise Hell 이라고 불리운다.  자바스크립트 async / awaitasync/await는 ES2017에 도입된 문법으로, Promise 로직을 더 쉽고..

콜백 지옥을 탈출하는 새로운 문법자바스크립트에서 '비동기 처리' 란 현재 실행중인 작업과는 별도로 다른 작업을 수행하는 것을 말한다.예를 들어 서버에서 데이터를 받아오는 작업은 시간이 걸리기 때문에 자바스크립트의 서버 호출 함수는 비동기 함수(링크)로 이루어져 있다.비동기는 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 방식이기 때문에, 만일 비동기 작업의 결과에 따라 다른 작업을 수행해야 할 때는 전통적으로 콜백 함수를 사용했다. 콜백 함수란 비동기 작업이 완료되면 호출되는 함수의 의미로서, 비동기 함수의 매개변수로 함수 객체를 넘기는 기법을 말한다. 그래서 함수 내부에서 함수 호출을 통해 비동기 작업의 결과를 받아서 인자로 주면 이를 통해 후속 처리 작업을 수행할 수 있다..