[인프런x코드캠프] 훈훈한 Javascript_15日, 16日 (완강)

오늘로 [인프런x코드캠프] 훈훈한 Javascript 강의를 완강했다.

입사할 때 시작해서 이제 두달이 되어간다. 시간이 정말 빨리 지나간다.

 

오늘은 구조분해할당을 통해 코드를 보다 간결하게 만들고, localStorage에 값들을 저장해 원하는 경우에만 데이터 통신을 하게 구현했다.

 

기능 구현하기 전에 깊은복사, 얕은 복사에 대해서 학습했다.

이 부분은 조금 졸면서 들어서 간단하게만 작성하겠다 ㅎㅎ

 

얕은 복사 : 복사하는 객체 안에 객체가 있는 경우, 완전하게 분리가 되지 않고 객체안 객체에 대해서 수정을 하게되면 원본 값도 같이 바뀌는 복사다. -> 주소값까지만 복사

얕은 복사의 예시

위 그림은 얕은 복사의 예시이다.

shallowCopyTest의 hobby.one 값을 수정하면 원본인 test의 hobby.one값도 함께 바뀌는 모습을 볼 수 있다.

 

깊은 복사 : 완전하게 분리되어 복사한 객체의 값을 수정해도, 원본 데이터에 영향이 가지 않는 복사다. -> 실제 데이터까지 복사

깊은 복사의 예시

위 그림은 깊은 복사의 예시이다.

먼저 deepCopyTest는 test를 JSON형태로 복사해왔다. 그 후에 deepCopyTest2에 deepCopyTest를 원래 형태로 원복해서 복사했다. 그리고 deepCopyTest의 hobby.one의 값을 수정해도 원본인 test의 hobby.one 값이 수정되지 않는 모습을 볼 수 있었다.

 

중간에 생긴 오류는 JSON.parse(deepCopyTest)를 실행해줘서 string 형태인 deepCopyTest를 보려고 해서 난 오류이다.

 

이 개념들을 적용해서 구조분해할당을 현재 코드에 적용했다.

const accessToGeo = function (position) {
  const positionObj = {
    latitude: position.coords.latitude,
    longitude: position.coords.longitude,
  };
  weatherSearch(positionObj);
};
// 위 쪽이 적용하기 전 코드
// 아래 쪽이 적용해서 보다 간결해진 코드

const accessToGeo = function ({ coords }) {
  const { latitude, longitude } = coords;
  //shorthand property
  const positionObj = {
    latitude,
    longitude,
  };
  weatherSearch(positionObj);
};

드디어 TodoList를 완성시켰다!

사용자의 위치를 받아오고 날씨에 따라서 배경이 바뀐다.

그리고 기본적인 todoList의 기능까지 구현해봤다.

 

이 강의를 통해서 js의 아주 기본적인 기능들을 학습했다. 앞으로는 programmers의 과제나 다양한 형태로 학습할 계획이다.

 

 

[인프런x코드캠프] 훈훈한 Javascript - 인프런 | 강의

원기옥을 모아서 해외여행을 가쟈~~