1. Javascript Re-start! - 기본 꼭 알아야하는 자바스크립트 기본 문법을 짧게 요약했어요.😉 1-1. 변수와 상수 [변수 생성의 3단계] 선언 → 초기화 → 할당 - 선언: 실행 컨텍스트에 변수 객체를 등록 (스코프가 참조하는 대상이 되도록요!) - 초기화: 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보 (여기서 변수는 보통 undefined로 초기화됩니다!) - 할당: undefined로 초기화된 변수에 실제 값을 할당 - var : var는 가급적 사용하지 않는 게 좋아요! 1) var로 선언한 변수는 블록 스코프가 아니라 함수 수준 스포크를 가짐. 2) var는 선언과 초기화를 한 번에 함. 3) 재선언이 가능함. 4) 선언하기도 전에 사용할 수 있음.(호이스팅이 일어남) ..
5-6. 퀴즈 프로젝트에 firestore를 연결하고, 스피너 붙여보기. 그리고 완성된 사이트를 s3로 배포해보기. 너! 나를 얼마나 아니? 사이트에 firestore를 연결하고, 스피너를 붙여봅니다. 완성된 사이트를 s3로 배포해봐요! - 스피너 붙이기. 먼저 react-icons를 이용하여 Spinner component를 만들어 줄 거임. styled-component를 이용하여 Wrap을 만들어주고 아이콘을 정 가운데 배치해줌. import React from "react"; import styled from "styled-components"; import { TfiHeartBroken } from "react-icons/tfi"; const Wrap = styled.div` width: 100..
5-5. AWS S3 버킷 / 도메인 연결 / Firebase로 배포 우리는 AWS S3와 파이어베이스, 이것들을 이용하여 총 두 번의 배포를 해볼 것임. 1. AWS S3 버킷. - S3 버킷이란? : S3(Simple Storage Service)는 단순 스토리지 서비스예요! 이미지나 파일을 저장할 수 있습니다. html, css, js 같은 정적 자원을 올리고, 정적 웹 사이트를 호스팅할 수도 있어요. 우리가 컴퓨터에 폴더 만드는 것처럼 버킷을 만들고 사용할 수 있어요! AWS를 부트캠프에서 사용한 적이 있는데, 그 뒤에 계정을 삭제해서 계정을 새로 만들기 너무 힘들더랬다...ㅋㅋㅋ 계정을 만드는 과정에서 비자 카드를 필요로 하는데 내가 비자 카드가 없다는 게 문제...ㅋㅋㅋㅋ 결국 오빠의 비자 체..
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를 호출하는 현상을 방지하기 위해 페이지를 가리기도 함. (네트워크 속도가 느린 곳에서 사이트를 이용시 하나의 글을 작성하고 그게 등록되어 화면에 보이기까지 시간이 꽤 오래 걸릴 수 있음. 사람들은 그걸 보고 글이 올라가지 않았다고 생각을 하고 글을 여러 번 등록하게 됨.) - 파이어스토어 데이터를 가져오기까지 보이는 화면. 리덕스에 넣어..
5-2. 머테리얼 UI 사용하기 - 부트스트랩처럼 이미 다 만들어진 ui를 가져다 쓰기. 머테리얼 ui는 우리가 styled-components를 쓰던 것처럼 사용할 수 있어요. 공식 문서( https://material-ui.com/ )에서 어떻게 생겼는 지 보고 사용 해봅시다! - 머테리얼 UI 설치하기. yarn add @material-ui/core @material-ui/icons 이런식으로 속성 설정을 통하여 컴포넌트의 스타일을 커스텀할 수 있음. ex) variants를 text로 하냐, contained로 하냐, outlined으로 하냐에 따라 버튼의 생김새가 달라짐. Text Contained Outlined ex) color를 secondary, success, error 등 무엇으로 ..