프론트엔드 심화 1주차

zero_0·2021년 8월 2일

FE 학습

목록 보기

6/22

TDZ(Temporal Dead Zone) = 일시적 사각지대

var과 let, const의 차이점 중 하나는 변수가 선언되기 전에 호출하면 ReferenceError가 난다는 점이다.

Q. 왜 에러가 날까? 호이스팅이 안 된 걸까?
A. 호이스팅(=선언 끌어 올리기)은 됩니다! 다만, 선언한 후, 
초기화 단계에서 메모리에 공간을 확보하는데, 선언을 호이스팅해도 초기화 전까지 메모리에 공간이 없죠! 
그래서 변수를 참조할 수 없기 때문입니다.
이걸 TDZ라고 해요!

면접에 자주나오는 질문👀
-let과 const도 호이스팅이 된다!
-그런데 왜 오류가 나는가? TDZ 때문이다.
스코프에 진입할 때 변수를 만들고, TDZ가 생성되지만 코드 실행이(=실행 컨텍스트가) 변수가 있는 실제 위치에 도달할 때까지 엑세스를 못할 뿐!

자료형

자바스크립트는 8가지 기본 자료형을 지원합니다!
객체를 제외한 나머지 7가지를 원시형(primitive type)이라고 불러요.
typeof 연산자로 자료형을 알아낼 수 있어요. 🙂

정수, 부동 소수점을 저장하는 숫자형: -(2^53-1) ~ (2^53-1)까지 지원
아주 큰 숫자를 저장하는 BigInt형
문자열을 저장하는 문자형
논리 값 (true/false. boolean형)
값이 할당되지 않음을 나타내는 독립 자료형 undefined
값이 존재하지 않음을 나타내는 독립 자료형 null
복잡한 자료구조를 저장하는 데 쓰는 객체형(다음 강의에서 조금 더 알아봅니다!)
고유 식별자를 만들 때 쓰는 심볼형

심볼형 설명

let cat = Symbol("cat");
let cat2 = Symbol("cat");
console.log(cat == cat2);

//false가 나온다.  고유 식별자임 
//서로 같은 게 아니다.

객체형

오직 한 타입의 데이터만 담을 수 있는 원시형과 달리, 다양한 데이터를 담을 수 있다.

key로 구분된 데이터 집합, 복잡한 개체를 저장할 수 있다.

{...} ← 중괄호 안에 여러 쌍의 프로퍼티를 넣을 수 있다.

프로퍼티는 key : value로 구성

key에는 문자형, value에는 모든 자료형이 들어갈 수 있음

배열도 객체다

<객체 생성하는 법>

// 객체 생성자로 만들기
let cat = new Object();

// 객체 리터럴로 만들기
// 중괄호로 객체를 선언하는 걸 리터럴이라고 하는데, 
// 객체 선언할 때 주로 씁니다!
let cat = {};

const 프로퍼티

const로 선언된 객체는 객체에 대한 참조를 변경하지 못한다는 것을 의미합니다! 즉, 객체의 프로퍼티(=값)는 보호되지 않아요!
-> const(상수)는 재할당이 안되지만,
const로 선언된 객체는 수정될 수 있다.
프로퍼티는 변경이 되지만, 객체 자체를 재할당할 수 는 없기 때문에 위와 같은 오류가 뜬다.

함수형

자바스크립트는 함수를 특별한 값 취급을 해요.
자바스크립트는 ()가 있으면 함수를 실행하고 ()가 없으면 함수를 문자형으로 바꿔 출력하기도 서슴치 않거든요. (함수를 값으로 취급하는거죠!)
이걸 응용하면, 함수를 복사할 수 있고, 또 매개변수처럼 전달할 수 있어요.

함수 선언문

// 이렇게 생긴 게 함수 선언문 방식으로 함수를 만든 거예요.
function cat() {
	console.log('perl');
}

함수 표현식

// 이렇게 생긴 게 함수 표현식을 사용해 함수를 만든 거예요.
let cat = function() {
	console.log('perl');	
}

// 물논 화살표 함수로 써도 됩니다.
// 다만 주의하실 점! 화살표 함수는 함수 표현식의 단축형이라는 거! 주의하세요! :) 
let cat2 = () => {
	console.log('perl2');
}

내부 변수가 외부 변수보다 사용하는 우선순위가 더 높다.
같은 이름으로 되어있을 때, 내부 변수를 가져다 씁니다.

콜백함수 : 함수를 값처럼 전달할 때, 인수로 넘겨주는 함수를 콜백함수라고 한다.

함수는 값을 넘겨 받을 때 일단 복사를 해버린다.
-매개변수(parameter): 인수를 복사한 값, 원본값 손상없음..
-인수(argument)와 엄밀히 따지면 다르다.

Prototype

: 원본 객체가 있으면 얘를 복사해서 새로운 거를 만든다.
<기억할 2가지>
1. 객체는 함수를 사용해서 만들어지는데, 함수의 프로토타입 객체를 복사해서 생성이 된다.
2. 객체는 자기가 어디에서 복제가 됐는지 알고 있다.

자바스크립트는 동적 언어이고 클래스가 없는 언어예요.
그럼 자바스크립트는 정확히 뭐지?
자바스크립트는 프로토타입 기반 동적 언어입니다

프로토타입이란?

자바스크립트의 모든 객체는 자신의 부모 객체와 연결되어 있어요.
좀 더 정확히는 부모 객체의 원형하고요!(부모 객체의 프로토타입)
마치 객체 지향에서의 상속 개념처럼 부모 객체의 프로퍼티나 메소드를 상속받아 쓸 수 있고요.
(실제로는 상속보다 위임에 가깝다고 하지만, 통상적으로 상속한다고 표현해요.)
이런 부모 객체를 프로토타입 객체, 혹은 그냥 프로토타입이라고 부릅니다. 🙂
그리고 부모 객체를 참조하는 걸 두고 프로토타입 링크라고 해요.


[클래스 기반] ex) java, c++, ...
객체 생성 전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성

[자바스크립트]
클래스 없이 객체를 생성(리터럴과 생성자, 기억하시죠!)
ex. let cat = {}; // 리터럴
	let cat = new Object(); //생성자

프로토타입 용어

프로토타입 체인 : 상속이 쭉쭉 내려가는거
프로토타입 링크 : _proto__

[프로토타입 객체와 프로토타입 링크]
위 예제에서 우리는 두 가지 프로토타입을 배웠어요. 
하나는 프로토타입 객체, 또 하나는 프로토타입 링크(`[[Prototype]]`(숨김 프로퍼티)가 참조하는 값과 `__proto__` )예요.

아직까지 면접 질문에 자주 출몰하고, 프로토타입 링크를 이야기할 때 `__proto__` 를 써서 이야기 하지만,
`__proto__` 를 사용하는 방식은 구식이에요. 😖  (deprecated되었거든요.
([링크→](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)))

면접을 대비한다면 위 예제처럼 `__proto__` 로 직접 접근하는 방식을 알아두는 편이 좋지만, 
그게 아니라면 가급적 `Object.getPrototypeOf()`를 이용해 참조하고,
프로토타입 체인에 연결할 때는 `Object.create()` 를 이용해 연결합시다!

프로토타입 툴

제플린, XD, 피그마

컴포넌트 = 레고 블럭
별모양 블럭 컴포넌트는 모양새가 너무 독특해도 쓰기 힘들다.
컴포넌트는 쓰기 편해야 된다.
너무 커도 안되고 너무 작아도 안됨
경험이 많이 필요하다.
필수로 받아야 하는게 많으면 못쓴다.

프로젝트 세팅하기 - 프로젝트 생성

1) CRA로 프로젝트 생성
- nvm 설치 - 사전과제를 참고하세요!
- node install과 use [node version]
```
nvm install [node version]
nvm use [node version]
```
- yarn 설치
```
npm install -g yarn
```
- creact-react-app 설치
```
yarn add global create-react-app
```
- CRA로 프로젝트 생성
```
yarn create react-app image-community
```
2) 크롬 익스텐션 설치하기
- Redux devTools : 리덕스를 사용할 때, 리덕스의 액션에 따른 데이터 변화를 편히 볼 수 있게 해줘요!
- React developer Tools : 리액트를 디버깅하기 편하게 해줍니다.
3) VSCode 확장 프로그램 설치
- react extension pack 설치
- prettier - code formatter