공부 || 정리/JavaScript
[JavaScript] 자바스크립트 동작 원리와 Call Stack, Event Loop
[JavaScript] 자바스크립트 동작 원리와 Call Stack, Event Loop
2021.08.14자바스크립트 동작 원리 이벤트 루프를 공부하면서 자바스크립트 동작 원리 안에 이벤트 루프 개념이 포함된다는 것을 깨달았습니다. 그래서 이벤트 루프와 자바스크립트 동작원리를 같이 포스팅하고자 합니다. 자바스크립트는 단일 스레드 기반 언어입니다. 이 말은 JS 엔진(자바스크립트 엔진)이 단일 호출 스택을 사용한다는 의미입니다. 쉽게 말해서, 한 순간에 하나의 작업만을 처리할 수 있습니다. 하지만 여러 웹 페이지의 자바스크립트 환경을 보면 많은 작업이 동시에 처리되고 있음을 알 수 있습니다. 대표적인 예로는, 애플 공식 사이트와 같이 애니메이션은 지속적으로 송출되면서 키보드 혹은 마우스 입력을 동시에 처리되는 경우가 있습니다. 자바스크립트는 단일 스레드 기반인 동기적인 언어라는 것을 알 수 있습니다. 그렇다면..
[JavaScript] 깊은 복사, 얕은 복사
[JavaScript] 깊은 복사, 얕은 복사
2021.07.12깊은 복사, 얕은 복사 결론부터 말하자면 얕은 복사는 객체의 참조값(주소 값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사합니다. 먼저, 자바스크립트에서 값은 원시값과 참조값 두 가지 데이터 타입의 값이 존재합니다. 원시값은 기본 자료형(단순한 데이터)을 의미합니다. Number, String, Boolean, Null, Undefined 등이 해당합니다. 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장됩니다. 할당된 변수를 조작하려고 하면 저장된 실제 값이 조작됩니다. 참조값은 여러 자료형으로 구성되는 메모리에 저장된 객체입니다. Object, Symbol 등이 해당합니다. 변수에 객체를 저장하면 독립적인 메모리 공간에 값을 저장하고, 변수에 저장된 메모리 공간의 참조(위치 값..
[JavaScript] for of / in
[JavaScript] for of / in
2021.07.07for...of, for...in 둘 의 차이점은 배열 내부를 탐색하느냐, 객체 내부를 탐색하느냐에 대한 차이라고 할 수 있습니다. for of - 배열 내부에 접근합니다. - 이터러블한 객체에 모두 사용 가능합니다. - 헷갈리기 쉬운 문법입니다. 헷갈린다면 자바 처럼 일반 for문을 사용하는 것도 괜찮습니다. const numbers = [10, 20, 30, 40, 50]; for (let number of numbers) { console.log(number); } for (let i=0; i < numbers.length; i++) { console.log(numbers[i]); } // 둘이 같음. 10 20 30 40 50 출력. for in - 객체 내부에 접근합니다. - 모든 프로퍼티에 사..
[JavaScript] 배열(Array) , 대표적인 Array 내장함수
[JavaScript] 배열(Array) , 대표적인 Array 내장함수
2021.07.06배열(Array) - 배열은 여러 개의 항목들이 들어있는 리스트와 같습니다. - 배열은 [대괄호]를 이용하여 선언합니다. 배열 안에는 "문자열", 숫자, {객체} 등을 넣을 수 있습니다. 섞어서 넣는 것도 가능합니다. - 배열의 인덱스는 0부터 시작합니다. 이 인덱스를 활용하여 값을 조회, 수정, 추가 ,삭제 등을 할 수 있습니다. 대표적인 Array 내장함수 push() - 배열의 마지막에 새로운 요소를 추가한 후, 변경된 배열의 길이를 반환합니다. push()는 기존의 배열을 수정합니다. pop() - 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환합니다. pop()은 기존의 배열을 수정합니다. - 맨 뒤에 원소를 바닥날 때까지 하나씩 추출합니다. 다 추출했으면 빈 배열을 반환합니다. unshi..
[JavaScript] 접근자 프로퍼티 (Getter / Setter)
[JavaScript] 접근자 프로퍼티 (Getter / Setter)
2021.07.05Getter / Setter 접근자 프로퍼티 접근자란 객체 지향 프로그래밍에서 객체가 가진 프로퍼티 값을 바깥에서 읽거나 쓸 수 있도록 제공하는 메서드를 말합니다. 객체의 프로퍼티를 객체 바깥에서 직접 조작하는 행위는 데이터의 유지 보수성을 해치는 주요한 원인입니다. 접근자 프로퍼티의 본질은 함수인데, 이 함수는 값을 획득(Get)하고 설정(Set) 하는 역할을 합니다. 접근자 프로퍼티는 'getter(획득자)'와 ‘setter(설정자)’ 메서드로 표현됩니다. 객체 리터럴 안에서 getter와 setter 메서드는 get과 set으로 나타낼 수 있습니다. Getter : 인수가 없는 함수로, 특정 값을 조회하고자 할 때 사용합니다. Setter : 인수가 하나인 함수로, 특정 값을 설정하고자 할 때 사용..
[JavaScript] 실습 - 카운터 만들기 / 모달 만들기
[JavaScript] 실습 - 카운터 만들기 / 모달 만들기
2021.03.21카운터 만들기 "간단한 카운터 만들기" 실습을 해보겠습니다. 왼쪽 +1 버튼을 누르면 위에 있는 숫자가 올라가고, 오른쪽 -1 버튼을 누르면 숫자가 내려가는 실습입니다. 숫자의 초기 값은 0으로 설정해뒀습니다. 코딩은 CodeSandbox에서 진행했습니다. 어떻게 이걸 만들 수 있을까요? 우선 중요한 것은 HTML5과 JS를 연동시켜야 합니다. 어떻게 연동 시킬 수 있을까요? 코드를 보면서 설명해 드리겠습니다. 먼저 html 코드입니다. 0 +1 -1 HTML 파일에서 JS파일을 연동 시키는 방법은 태그 안에 여기서 알아야 할 점은 div 태그 안에서 style은 줄 수 있다는 것과 display: none을 줌으로서 초기 설정은 안보이게 만든다는 것입니다. 당연합니다. 모달은 버튼을 클릭해야 보이는 것..
[JavaScript] 비동기 처리의 이해 - promise, async / await, promise.all, promise.race
[JavaScript] 비동기 처리의 이해 - promise, async / await, promise.all, promise.race
2021.03.15비동기 처리의 이해 - 동기적 (Synchronous) 작업이 끝날 때까지 기다린 후 다음 작업을 처리합니다. 다음 작업은 이전 작업이 끝날 때까지 멈추고 기다려야 합니다. - 비동기적 (Asynchronous) 작업의 흐름이 멈추는 일 없이 동시에 모든 작업을 처리할 수 있습니다. 기다리는 과정에서도 다른 함수를 호출할 수 있습니다. 간단하게 사진으로 비교해 보겠습니다. (벨로 퍼트님 강의에서 캡처했습니다.) 동기적인 코드 예시입니다. function work() { const start = Date.now(); for(let i=0; i { const start = Date.now(); for(let i=0; i {}, 0) 함수를 통해 비동기적으로 코드를 구현할 수 있습니다. setTimeout 함..
[JavaScript] scope, hoisting
[JavaScript] scope, hoisting
2021.03.09scope 이해하기 Scope란? 변수 혹은 함수를 선언하게 될 때, 해당 변수 혹은 함수가 어디까지 유효한 지 범위를 나타내는 개념입니다. scope의 범위에는 Global, function, block이 있습니다. Global은 모든 범위(전역)에서 사용 가능한 것을 의미합니다. Function은 특정 함수 내부에서만 사용 가능한 것을 의미합니다. Block은 if문, switch문, for문을 작성하게 될 때, 중괄호로 코드를 작성하게 되는데 중괄호로 감싸진 블록 내부에서만 사용 가능한 것을 의미합니다. scope는 자바스크립트의 문법이라기 보단 작동 원리라고 이해하는 것이 좋습니다. Global, function scope의 예입니다. const value = 'hello!'; // global ..
[JavaScript] spread, rest
[JavaScript] spread, rest
2021.03.08spread 연산자 기존의 객체 혹은 배열을 참조해서 새로운 객체 혹은 배열 등을 만들고 싶을 때 사용하는 연산자입니다. 또한, 함수의 인자에서도 사용가능합니다. const slime = { name : '슬라임' }; const cuteSlime = { ...slime, // slime 객체가 가지고 있는 정보를 다 가져옴 attribute: 'cute' }; const purpleCuteSlime = { ...cuteSlime, // cuteSlime 객체가 가지고 있는 정보를 다 가져옴 color: 'purple' }; const greenCuteSlime = { ...purpleCuteSlime, // 덮어쓰기도 가능하다. color: 'green' }; console.log(purpleCuteS..