헷갈리는 것들만 따로 정리할 예정. deep dive 책을 함께 공부함. 12. 구조 분해 할당 구조 분해 할당 Destructuring Assignment 데이터 뭉치(그룹화)를 쉽게 만들 수 있음. const fruits = ["🍓", "🍑", "🍉", "🍒"]; const [first, second, ...others] = fruits; console.log(fruits[0]); // 🍓 console.log(first); // 🍓 console.log(second); // 🍑 console.log(others); // [ '🍉', '🍒' ] const point = [1, 2, 8]; const [x, y, z] = point; console.log(x); // 1 console.log(y); /..

헷갈리는 것들만 따로 정리할 예정. deep dive 책을 함께 공부함. 11. spread 연산자 spread 연산자, 전개구문 모든 Iterable은 spread 될 수 있음 순회가 가능한 모든 것들은 촤르륵 펼쳐질 수 있음 func(...iterable) { ...obj } EcmaScript 2018 function add(a, b, c) { return a + b + c; } const nums = [ 1, 2, 3 ]; console.log(add(...nums)); // 이렇게 한 번에 펼쳐주는 방식이 훨씬 간편함. // 6 // Rest parameters function sum(first, second, ...nums) { console.log(nums); } sum(1, 2, 0, 1,..

1. Javascript Re-start! - 기본 꼭 알아야하는 자바스크립트 기본 문법을 짧게 요약했어요.😉 1-1. 변수와 상수 [변수 생성의 3단계] 선언 → 초기화 → 할당 - 선언: 실행 컨텍스트에 변수 객체를 등록 (스코프가 참조하는 대상이 되도록요!) - 초기화: 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보 (여기서 변수는 보통 undefined로 초기화됩니다!) - 할당: undefined로 초기화된 변수에 실제 값을 할당 - var : var는 가급적 사용하지 않는 게 좋아요! 1) var로 선언한 변수는 블록 스코프가 아니라 함수 수준 스포크를 가짐. 2) var는 선언과 초기화를 한 번에 함. 3) 재선언이 가능함. 4) 선언하기도 전에 사용할 수 있음.(호이스팅이 일어남) ..

5-4. Quiz - 버킷리스트 생성시 Spinner 띄우기. - Firestore에 데이터 추가하면 스피너를 띄워보기. 추가하기 버튼을 누르면 → 로딩 스피너를 띄우고 → 추가가 끝나면 → 페이지를 보여줍시다! 힌트: is_loaded를 false로 바꿔주면 스피너가 뜨겠죠? is_loaded를 바꿔주는 액션을 만들고, [추가하기]를 누르면 액션을 디스패치 해봅시다. 그리고 addBucketFB()에서 추가가 끝나면 다시 is_loaded를 false로 바꿔줍시다.🙂 앞서 만들었던 스피너를 조금 다르게 이용해보겠음. 버킷리스트를 생성하는 버튼을 클릭시 스피너가 떴다가 사라지게끔 해줄 거임. 그렇게 하기 위해서 action value와 action creator를 하나 더 만들어줄 거임. => Loade..

5-3. 페이지 의도적으로 가리기 1. 페이지를 왜 가려야 하는가? 버킷리스트 앱을 새로고침해보면 redux에 넣어둔 데이터 때문에 자꾸만 가짜 데이터 1개가 먼저 보임. 파이어스토어의 데이터만 제대로 보여주고 싶을 때 어떻게 하면 좋을까? => 파이어스토어에서 데이터를 가져올 때까지 페이지를 가려버리면 됨. 이 외에도 수정이나 추가하기 버튼을 눌렀을 대 여러 번 API를 호출하는 현상을 방지하기 위해 페이지를 가리기도 함. (네트워크 속도가 느린 곳에서 사이트를 이용시 하나의 글을 작성하고 그게 등록되어 화면에 보이기까지 시간이 꽤 오래 걸릴 수 있음. 사람들은 그걸 보고 글이 올라가지 않았다고 생각을 하고 글을 여러 번 등록하게 됨.) - 파이어스토어 데이터를 가져오기까지 보이는 화면. 리덕스에 넣어..