[2023-09-20] 개발 환경 구축 (vscode 플러그인 설치) 및 JavaScript 기본 개념

강의를 듣고 면접 질문과 관련된 내용, 개념들을 정리 합니다.

 

 

※브라우저 동작 원리

https://d2.naver.com/helloworld/59361

참고: 면접 - 프론트엔드 (1) - 브라우저 동작 원리

1. 서버에서 응답으로 받은 HTML 데이터 파싱

2. HTML을 파싱한 결과로 DOM Tree 생성

3. 파싱하는 중 CSS 파일 링크를 만나면 CSS 파일을 요청해서 받아온다.

4. CSS 파싱, CSSOM(CSS Object Model) 생성

5. DOM Tree와 CSSOM이 만들어지면, 이 둘을 사용해 Render Tree 생성

6. Render Tree에 있는 각각의 노드들이 화면의 어디에 어떻게 위치하는지 계산하는 Layout 과정을 거친다.

7. 화면에 실제 픽셀을 Paint

 

DOM tree + CSSOM tree => Render tree => Layout => Paint

 

※호이스팅

※undefined와 null 차이

※Heap과 Call Stack 차이

const arr=[]; 의 경우 arr는 Heap에? Call Stack에?
arr 변수는 Call Stack에 생성되지만,
Heap의 배열을 참조한다

※객체 정의

여러 값을 키-값 형태로 결합시킨 복합 타입

※배열 메서드 (fill, from, concat, slice, splice)

파이썬과 차이점: 파이썬은 메서드를 사용하지 않고도 가능하다.
자바스크립트는 불가능하기 때문에, 내가 사용하려고 하는 동작의 메서드명을 떠올리기

※배열 순회 (for ... of 와 for ... in 차이)

for ... of: [Symbol.iterator] 속성이 있는 경우에만 사용 가능(즉, 객체는 불가능)

for .. in: 객체의 key에 접근for (const key in obj){ console.log(key, obj[key] }

※클로저

함수와 그 함수가 선언된 렉시컬 환경의 조합

함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근할 수 있게 만드는 문법

※var, let 차이

※NaN

숫자가 아니지만 Number 타입

---

vscode 추천 플러그인 설치

Auto Rename Tag [install]

Bracket Pair Colorizer 2

=> This extension is deprecated as this functionality is now built-in to VS Code

Color Highlight [install]

Prettier [사용중]

GitLens [사용중]

 

https://jsfiddle.net/

---

브라우저의 동작 원리

---

var 호이스팅으로 인해 권장하지 않음

NaN: 숫자가 아니지만 Number 타입에 속한다.

let nan = parseInt('abc')

undefined: 상수가 선언되었지만 아무런 값도 대입되지 않은 경우

null: 해당 변수가 비어있음을 의도적으로 나타냄

---

Garbage Collector: 자동 메모리 관리(사용하지 않는 메모리를 자동으로 해제)

 

메모리

식별자 variable은 메모리 주소를 가리킨다. 따라서, variable2도 variable이 가리키는 메모리 주소를 가리키게 된다.

let variable = 1;
let variable2 = variable;

만약 variable 을 바꾸게 된다면?

variable을 바꾸게 되면, variable2도 바뀔까?

let variable = 1;
let variable2 = variable;
variable = variable +1
console.log(variable, variable2) // 2, 1

아니다. 원시타입은 변경이 불가능하기 때문에 새로운 메모리 주소를 할당한다.

 

Virtual Machine

Heap	Call Stack
참조타입	원시타입

다음 상황에서 Heap과 Call Stack의 변화를 확인해보기

let a = 1;
const b = 2;
const arr = [];
arr.push(7);
arr.push(6);
arr.push(5);

배열의 경우 참조타입이지만, 콜 스택에 생성된 배열 변수는 힙에서 생성된 배열의 메모리 주소를 참조한다.

배열을 상수로 선언했는데 push가 동작하는 이유: 콜스택에 할당된 메모리를 변경하는게 아니라, 힙 메모리를 변경

---

표현식과 연산자

표현식: 결과가 계산되는 식

할당 연산자, 복합 할당 연산자, 비트 연산자, 관계 연산자(in), typeof

---

흐름 제어

Control Flow(일반적으로 아는 조건문, 반복문)

Data Flow(함수형 프로그래밍 방식)

if 조건문에서 NaN, -0도 falsy

let isFalsy = -0;
if(isFalsy){console.log(`${isFalsy}: Not a Falsy`)}
else{console.log(`${isFalsy}: Falsy`)}
// 0: Falsy

let isFalsy = NaN;
if(isFalsy){console.log(`${isFalsy}: Not a Falsy`)}
else{console.log(`${isFalsy}: Falsy`)}
// NaN: Falsy

---

배열과 객체

객체

여러 값을 키-값 형태로 결합시킨 복합 타입

const arr1 = new Array();
const arr2 = [];
const arr3 = [1,2,3];
const arr4 = new Array(3); //배열의 길이를 파라미터로 넣어주면, 해당 길이만큼의 빈 배열을 갖는다.
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);

배열

※ 코딩테스트에서 입력받기
배열 요소가 굉장히 많은 경우, 한번에 초기화하는 방법

(1) fill(): 단일 값으로 초기화

const arr5 = new Array(5).fill(1);
console.log(arr5);

(2) from(): [param1] 초기화 할 배열, [param2] 로직 작성

check: new 키워드를 사용하지 않는다.

check: Array(5)로 배열의 길이를 정한다.

check: Array(5)를 순회하며 value와 index를 받아온다.

→ Array(5)가 길이가 5이며 각 원소는 undefined이기 때문에, Array(5)로 선언한 배열의 모든 원소의 value는 undefined이다. 따라서 1,2,3,4,5 로 원소를 만들고 싶다면 index를 활용한다.

const arr6 = Array.from(Array(5), function(value,index){
    return index + 1;
})
console.log(arr6);

배열의 요소

length를 직접 조작할 수 있지만 권장하지 않는다.

const arr = [1,2,3];
console.log(arr.length); // 3
arr.length = 1;
console.log(arr); // [1] 
arr.length = 3;
console.log(arr); // [1, empty × 2]

배열의 메서드

(1) join

const arr = [1,2,3];
console.log(arr.join(', ')); // 1, 2, 3
console.log(arr.reverse()); // [3, 2, 1]

(2) reverse

(3) concat

const arr1 = [1,2,3];
const arr2 = [7,8,9];
console.log(arr1.concat(arr2));

(4) push

(5) pop

(6) shift

(7) unshift

(8) slice: 원본 배열을 변하게 하지 않는다.

const arr = [1,2,3];
console.log(arr.slice(1,2)); // [2]

(9) splice: 중간에 있는 요소를 삭제하는 방법

const arr = [1,2,3];
arr.splice(1,2);
console.log(arr); // [1]

배열 순회

(1) for

(2) for of

const arr = [1,2,3];
for (const item of arr){
    console.log(item)
}
// 1
// 2
// 3

(3) 배열은 객체와 동일하다. typeof(arr) = object

check: 그렇기 때문에 배열에 key와 value를 할당할 수 있다. 권장하지 않음

check: 하지만, length는 따로 관리된다. 배열의 길이는 내부적으로 관리된다.

const arr = [1,2,3];
arr["key"] = "value";
console.log(arr); // [1, 2, 3, key: 'value']
console.log(arr.length); // 3

그러면, 새로운 요소를 push한 경우 배열이 어떻게 바뀔까?

arr.push(9)
console.log(arr.length); // 4
console.log(arr) // [1, 2, 3, 9, key: 'value']

객체

const obj1 = new Object();
const obj2 = {};
const obj = { first: 'a', second: 'b' };

obj['third'] = 'c';
obj.fuorth = 'd'
console.log(obj)

삭제

delete obj.third;
console.log(obj)

in 연산자

const obj = { first: 'a', second: 'b' };
obj['third'] = 'c';
obj.fuorth = 'd'
delete obj.third;

console.log('first' in obj) // true
console.log('third' in obj) // false

객체 안의 key와 value를 리스트 형태로 반환

Object.keys(obj)

Object.values(obj)

for ... in 객체 순회

const obj = {first: 'a', second:'b'};

for (const key in obj){
    console.log(key, obj[key]);
}
// first a
// second b

---

var: 함수 스코프를 갖는다

let: 블록 스코프를 갖는다.

---

클로저

함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근할 수 있게 만드는 문법

은닉화에 활용: 반환된 함수로만 값을 변경