2023.08.16(수) 슈퍼코딩 부트캠프 프론트엔드 React 인턴 Day 3 보고

• TO-DO LIST

- 9강 JS(ES6+) Part 5. ~ 12강 JS(ES6+) Part 8. 수강하기

- 17:00 정기 팀 회의

​

• 배운 내용 요약 정리

- 배열

키를 가지고 있지 않다.

순서를 고려한다.

인덱스로 값을 참조한다.

const newArray = [1,2,3];

​

- 오브젝트

키를 가지고 있다.

순서를 고려하지 않는다.

키로 값을 참조한다.

cosnt newObject = { a: 1, b: 2};

​

const birthYearArray = [1990, 1993, 1998];

const agesArray = birthYearArraymap(birthYearValue => 2023 - birthYearValue);

// birthYearArray.map(birthYearValue => { return 2023 - birthYearValue });

console.log(agesArray);

​

const cars = ["hyundai", "bmw", "audi"];

// add element

cars.push("toyota"); // 뒤에 추가

cars.unshift("kia"); // 앞에 추가

​

// remove element

cars.pop();

cars.shift();

​

// 여러 개의 배열 연결

const combinedArray = [...array1, ...array2]

​

- Objects, key-value pair

const profile = {

firstName = "Kevin",

lastName = "Kim",

...

};

​

const combinedObject = {

...obj1,

...obj2,

};

​

- 자바스크립트 언어의 특징

1. 하이 레벨 언어

로우 레벨: 메모리를 직접 관리 (C언어)

메모리 자동 관리

성능이 낮음

​

2. 인터프리터 언어

JS는 인터프리터 언어, 컴파일이 필요 없음

​

3. 가비지 콜렉션

사용하지 않는 객체를 자동으로 제거

​

4. 멀티 패러다임

절차지향 프로그래밍

객체지향 프로그래밍

함수형 프로그래밍

JS는 전부 가능

​

5. 프로토타입 기반

자바스크립트에 있는건 거의 다 객체 (원시타입 제외)

Array.prototype.push

​

6. 일급 함수

함수를 변수처럼 처리

함수를 다른 함수 안으로 처리 가능

​

7. 동적

변수에 데이터 타입 할당하지 않음

런타임에서 타입을 알 수 없음

​

8. 싱글 쓰레드

동시성 모델: 자바스크립트 엔진이 여러 태스크 동시 처리

하나의 쓰레드는 하나의 일만 함

​

9. 논 블로킹

이벤트 루프를 통해 오래 걸리는 작업은 백그라운드 실행

​

- 컴파일러 vs 인터프리터

<컴파일러>

전체 코드가 한 번에 머신 코드로 실행

바이너리 파일로 쓰여짐

컴파일 이후에 실행 가능

​

<인터프리터>

한 줄씩 소스 코드 읽으면서 실행

컴파일러에 비해 속도가 느림

변경 사항을 빠르게 테스트 가능

​

Q. 자바스크립트는 인터프리터 언어인가요?

A. 네 맞습니다. 하지만, 크롬 v8 엔진이 나온 이후로는 컴파일도 같이 진행합니다.

성능 최적화를 해주기 위함입니다.

https://curryyou.tistory.com/237

자바스크립트 코드 실행 동작 원리: 엔진, 가상머신, 인터프리터, AST 기초

 

​실행 컨텍스트: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체

콜 스택

​

- 스코프

어떤 변수가 선언된 공간 또는 환경

어떤 변수의 스코프는 해당 변수가 접근될 수 있는 범위

글로벌 스코프 / 함수 스코프 / 블록 스코프 { }

​

- 스코프 체인

​

- 호이스팅

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

let, const, 함수 표현식 -> 호이스팅 일어나지 않음

​

- this

모든 실행 컨텍스트에 만들어지는 특별한 변수

함수 선언 형태로 쓰는게 좋음. (화살표 함수 지양)

​

- call

함수를 호출하는 함수

첫 번째 인자에 this로 세팅하고 싶은 객체를 넘김

나머지 인자를 입력

​

- apply

함수를 호출하는 함수

첫 번째 인자에 this로 세팅하고 싶은 객체를 넘김

나머지 인자를 '배열'로 입력

​

- bind

함수를 실행하지 않고 리턴

나머지 인자는 call, apply와 동일

​

• 부족한 점

​

• 스스로 시도해본 것들

​

• 해결 내용

​

• 알게된 점

​

• 헷갈리거나 실수한 점

​

• 회고

어휴 어제 놀고나서 하루종일 낮잠자고 강의 제대로 못 들었더니

강의가 바로 밀려버리고 대충대충 듣게 된다..

공부하기로 마음 먹은 이상 이제 노는건 좀 자제해야 할 것 같아 ㅠㅅㅠ

주말 활용해서 주중 강의 밀린거 듣고 복습도 좀 하자