2023.08.17(목) 슈퍼코딩 부트캠프 프론트엔드 React 인턴 Day 4 보고

• TO-DO LIST

- 13강 JS(ES6+) Part 9. ~ 17강 리액트 기본 - 1 - 컴포넌트 수강하기

- 17:00 정기 팀 회의

​

• 배운 내용 요약 정리

원시 타입은 값을 콜 스택에,

객체 타입은 값을 힙에 저장

​

Object.assign({}, profile2); // 얕은 복사

깊은 복사는 lodash 사용

​

비구조화 할당

​

스프레드(...) 연산자

스프레드 연산자는 이터러블 객체에서만 가능

이터러블: 순회 가능한 객체. For...of 반복문 사용이 가능

(배열, 문자열, Map, Set...)

​

(예시)

const [a, b, ...others] = [1,2,3,4,5];

console.log(others); // [3, 4, 5]

​

const add = function (...numbers) {

let sum = 0;

for(let i = 0; i < numbers.length; i++) {

sum += numbers[i];

}

return sum;

};

console.log(add(2, 3, 5, 6));

​

- 객체 리터럴

ES6 버전에서 객체를 표현하는 방식에 변화

1. 변수명과 객체 프로퍼티 같은 경우 중복 표현 생략
2. 객체 메서드 함수표현식 function 키워드 생략

const es6ObjectMethods = {

method() { // function 키워드 생략

console.log('this is method es6');

}

}

​

3. 오브젝트 프로퍼티 명 안에 연산 가능

const arr = ['a', 'b', 'c'];

const objectWithOperation = {

[arr[0]]: 'this is a',

[`${1+3+'ha'}`]: 'this is 4ha'

}

​

- 옵셔널 체이닝(.?)

에러 나는 상황 방지

console.log(weekdays.wed?.open);

// wed 요 값이 있으면 open을 참조해서 출력하고, 요 값이 없으면 undefined 출력

// error가 나지 않도록!

​

const thisIsNull = null;

console.log(thisIsNull?.a); // undefined

​

// method가 없는 경우

objectMethods.method2?.() ?? console.log('no method');

​

- Map

Key-Value 타입의 집합

Key는 중복해서 들어갈 수 없다.

const thisIsMap = new Map();

thisIsMap.set(1, 'this is 1');

thisIsMap.set(true, 'this is boolean');

console.log(thisIsMap.get(true)); // this is boolean

​

for (const element of thisIsMap) {

console.log(element);

}

​

thisIsMap.delete(1);

​

- Set

집합 객체

순회가 가능하고 값이 중복해서 들어갈 수 없음

const thisIsSet = new Set();

thisIsSet.add('pizza');

thisIsSet.add('pasta');

console.log(thisIsSet);

console.log(thisIsSet.has('pizza')); // true

console.log(thisIsSet.has('pizza2')); // false

​

for (const element of thisIsSet) {

console.log(element);

}

​

- 일급 함수

자바스크립트 함수의 특징

1. 자바스크립트는 함수를 일급 시민으로 다룸
2. 이 말은 곧, 함수를 단순한 값으로 본다는 뜻
3. 함수는 객체(Object) 타입 중 하나

​

고차 함수: 함수를 받거나, 함수를 리턴하는 함수

​

- 클로저

모든 함수는 그 함수가 만들어지는 시점의 실행 컨텍스트를 기억하여,

(해당 실행 컨텍스트가 없더라도) 그 변수 환경에 접근할 수 있다.

​

const passengerBooking = function () {

let passengerCount = 0;

​

return function () {

passengerCount++;

console.log('passengerCount', passengerCount);

}

}

​

const booker = passengerBooking(); // 이 시점의 실행 컨텍스트 기억

booker();

​

클로저는 함수가 만들어지는 시점의 변수들 간 연결을 끊어지지 않게 해주는 장치

​

<리액트>

리액트의 모든 UI는 컴포넌트로 이루어져 있다.

-> 재사용성, 관심사 분리

​

HTML + CSS + JS -> 컴포넌트

​

• 부족한 점

​

• 스스로 시도해본 것들

​

• 해결 내용

​

• 알게된 점

​

• 헷갈리거나 실수한 점

​

• 회고

옴맘마.. 이제는 새로운 개념들의 향연...

무조건 이건 복습 필요하다...