개인 프로젝트

>> JQuery없이 document.ready()
https://euntori7.tistory.com/356

API 사용법 구글링 한 키워드

• TMDB popular 리스트 불러오기
• api key 사용법
• api 언어 코드

달리기반

참조형 타입

우선 JS는 C처럼 직접 메모리에 접근하는 일은 없는데 (브라우저용 언어로 개발되었기 때문) 그래도 참조형 데이터 타입이 메모리를 참조하기 때문에 알아두어야 한다. 그래서 아래의 노션 노트로 대체한다ㅎㅎ

얕은 복사: 껍데기 주소는 다르지만 속성 주소가 같음
^ 객체가 복잡하지 않다면 문제가 없지만 객체 안에 참조형 데이터 타입이 있는 경우 문제가 생김

깊은 복사: 껍데기도 속성도 서로 다른 주소 (완전히 남남)
^ 원본에 영향을 끼치지 않는 복사법

• 재귀적 복사

추가노트) 전에 강의 요약에서 JSON stringify를 얕은 복사의 개념으로 이해했는데 정정이 필요한 것 같다.

JSON stringify를 이용한 복사는 깊은 복사의 함수 대신에 사용해본 방법이라고 한다. 그리고 실제로 다른 사본을 만들기 때문에 엄연히 따지면 얕은 복사가 아닌 것이다.

하지만!
null, 함수, undefined를 복사하지 못한다는 점에서 완벽한 깊은 복사는 아닌 것이다. 굳이 레벨을 나누자면

얕은 복사 < JSON stringify < 깊은 복사

이와 같은 느낌의 복사가 되는 것이다.

실전에서 사용하는 깊은 복사는 lodash의 cloneDeep 메서드이다. 사용방법은 아래의 코드와 같다

const _ = require('lodash');

let originalArray = [
  ['Apple', 'Banana'],
  { fruit: 'Cherry', color: 'Red' },
  42,
];

// Lodash cloneDeep을 이용한 깊은 복사
let deepCopiedArray = _.cloneDeep(originalArray);

// 복사본에서 값을 변경
deepCopiedArray[0][1] = 'Blueberry';
deepCopiedArray[1].fruit = 'Blueberry';

console.log('원본 배열:', originalArray);
console.log('깊은 복사 배열:', deepCopiedArray);

tip

브라우저 console에서 배열과 객체 구분은 typeof가 아닌 Array.isArray()를 사용해서 구분

key를 변수화 시키고 싶을 때 computed property
객체의 키는 symbol key

dot.notation / bracket[notation]

복사 사용은 얕은 복사로 끝낼 수 있다면 얕은 복사로 사용하는 것이 빠른 연산이 가능하다. 피치 못할 경우에만 깊은 복사를 사용하는 것이 좋다. 아무래도 재귀적 복사는 효율적인 측면에서는 성능이 떨어진다.

for랑 forEach의 가장 큰 차이
forEach는 중간에 break, continue 같은 중간 점검이 안되며, 한 번 돌기 시작하면 끝까지 돌게된다.

객체 동결은 freeze / seal

마치며...

오늘은 개인 프로젝트 하며 css/html과 거의 싸우다가 이제는 얼추 구조를 잡아서 JS와 싸우고 있다. 남은 주동안 이길 수 있기를