[TIL] 2022-03-21 / 1일차

오늘 배운 내용

 

브라우저 동작 원리

 

크게 3 동작으로 분류할 수 있다.

1. 통신
2. 렌더링
3. 스크립트 실행

통신

 

말 그대로 서버와의 통신을 말한다. 브라우저가 서버에 요청을 보내면 서버는 응답을 보내주게 된다. 이 요청은 한 번에 하나씩 요청할 수 있고, 동시에 여러 요청을 보낼 수도 있다.

 

렌더링

 

DOM이란 객체를 화면에 그려주는 것이다. 여기서 DOM은 통신을 통해 받은 HTML을 브라우저가 읽어서 생성되고, 생성된 DOM은 트리구조이다.

 

스크립트 실행

 

말 그대로 Javascript를 실행하는 것을 의미한다. 스크립트 실행으로 동적인 화면을 구성할 수 있다.

 

프론트엔드 개발자의 역할

 

브라우저에 상에서 동작하는 UI를 개발하는 것이다. UI를 개발하는 과정은 복잡하기 때문에 소통 능력을 길러야 한다.

 

변수, 상수, 자료형, 메모리

 

변수, 상수

 

변수 선언 키워드는 var와 let이 있다. ES6이전에 사용하던 키워드가 var이고 이후에 사용이 가능해진 것이 let이다.

변수 선언 시에는 가급적 let을 사용하는 것이 좋다. var를 지양하는 이유는 호이스팅 때문이다.

 

상수 선언 키워드는 const이다. 

 

• 변수 명 = 메모리 상의 주소를 의미
• 값 = 메모리 주소에 해당하는 값을 의미

 

자료형

• Number
• String
• Boolean
• Object
• Array
• Function
• Undefined
• Null

무한을 나타내는 Infinity, NaN(Not a Number)도 Number 타입에 속한다.

 

메모리

Javascript는 메모리를 Garbage Collector를 통해 관리한다. Garbage Collector는 Garbage Collection이란 알고리즘을 통해 만들어진 객체로, 사용하지 않는 메모리를 해제하는 역할을 한다. 변수를 계속해서 선언하고 메모리를 사용하다 초과하게 되면 프로그램이 터지기 때문에 사용하지 않는 메모리를 관리하는 것이 필요하다.

 

 

표현식과 연산자

 

• 표현식 : 결과 값으로 계산되는 식
• 연산자 : 할당 연산자(=), 비교 연산자(부등호), 산술 연산자(덧셈, 뺄셈 등), 비트 연산자(&, |, ^, >>, <<), 논리 연산자(&&, ||, !), 삼항 연산자(조건식 ? true : false), 관계 연산자(in), typeof

 

흐름 제어

 

조건, 반복문을 통해 상태를 제어하는 것을 의미한다.

 

배열과 객체

 

배열 편의성 관련 함수

1. Array.from
2. join
3. reverse
4. concat : 기존 배열의 변경 없이 새로운 배열을 반환(합쳐진 배열)

배열 요소 추가, 삭제 함수

1. push
2. pop

 

배열의 첫 번째 인덱스에서 요소 추가, 삭제 함수

1. shift : 맨 앞 요소를 제거
2. unshift : 맨 앞에 요소를 추가

 

배열 중간을 다루는 함수

1. slice : 중간을 잘라서 값을 파악할 때 사용하는 함수, 원본 배열의 변경이 없음, 새로운 배열 반환
2. splice : 중간을 삭제할 때 사용하는 함수, 기존 요소를 삭제 또는 교체하거나 새로운 요소를 추가해 배열 변경

 

배열의 순회

1. for 문
2. for of 문

let a = [1,2,3,4]
for(let item of a){
	console.log(item);
}

 

배열의 타입은 객체와 동일하여 객체처럼 사용할 수 있다. 

arr["key"] = "value"

객체처럼 사용할 수 있지만, 배열의 길이에는 영향이 없다.

 

객체의 요소 추가, 삭제

1. obj['key'] = 'value' : 요소 추가
2. obj.key = value : 요소 추가
3. delete obj.key : 요소 삭제

 

in 연산자를 통해 객체의 key 값을 확인할 수 있다.

 

객체의 key, value를 구하는 방법

1. Object.keys(obj) : 배열 형태로 key 값의 집합을 구함
2. Object.values(obj) : 배열 형태로 value 값의 집합을 구함

객체의 순회

for key in obj{
 console.log(key, obj[key]);
}

 

스코프와 클로저

 

스코프

 

스코프는 유효 범위를 의미하며, 변수가 어느 범위까지 참조되었는지를 의미한다. 어느 곳에서나 접근이 가능한 것을 전역 스코프(Global Scope), 해당 범위 내에서만 접근이 가능한 것을 지역 스코프(Local Scope)라고 한다.

 

var 키워드를 지양해야 하는 이유가 스코프와 연관되어 있다. 앞서 var를 지양해야 한다고 했는데 그 이유는 다음과 같다. var 키워드를 통해 변수를 선언하면 호이스팅 되어 변수 선언이 최상단으로 이동하게 된다. 그러면 블록이 다른 곳에서 변수를 새롭게 선언하더라도 외부의 변수 값 변하게 되어 의도와는 다르게 작동한다. var는 함수 수준의 스코프이고, const와 let은 블록 수준의 스코프이기 때문이다.

 

클로저

 

클로저는 함수가 생성될 당시의 외부 변수를 기억해두어 생성 이우헤도 계속해서 접근이 가능한 것을 의미한다.

 

function say(){
    let name = "MJ";
    let hello = function () {
        console.log(`Hello, ${name}`);
    };
    return hello;
}

let sayHello = say();
sayHello(); // Hello, MJ

 

say 함수 내에서 내부함수 hello 함수가 선언되고 호출되었다. hello 함수는 say 함수의 name이라는 변수에 접근할 수 있다. hello 함수가 name과 동일하게 say 함수 내부에 선언이 되었기 때문에 접근이 가능하다. hello 함수 내에서 name이라는 변수를 찾지만 없었고, hello 함수가 포함된 say 함수 내부에서 name 변수를 찾을 수 있어 접근이 가능한 것이다.

 

클로저는 함수가 선언되었을 때 환경 스코프를 기억해두고 스코프 밖에서 실행되더라도 기억한 스코프에 접근할 수 있는 문법이다. 자신이 생성될 때의 환경 스코프를 기억하는 함수.

 

부족했던 부분

• 원시타입, 참조타입
• 콜스택, 힙
• 클로저

 

느낀 점

 

첫 수업이라 가벼운 내용들을 다룬 것 같다. 면접 때 질문받았던 호이스팅과 클로저를 접했는데 클로저는 아직까지도 어렵게 느껴진다. 계속해서 이해하려고 붙잡고 늘어지니 조금씩 이해가 되는 것 같다. 아직 완벽하게 이해하지 못했기 때문에 다양한 예제들을 찾아보며 추가적으로 공부를 할 계획이다.

 

참고

프로그래머스 데브코스 강의

MDN 

https://poiemaweb.com/js-closure