[개발 일기] 프론트엔드의 꽃, 리액트 4주차 by 스파르타코딩클럽

안녕하세요 건브로입니다!!

 

조금 오랜만에 글을 쓰네요..!

 

요즘... 한이음 프로젝트 준비하느라 블로그 글을 못썼네요.

 

뭔가 새로 배우면 바로바로 블로그 글 정리하면 정말 좋을 텐데,

그게 쉽지 않네요. 

 

새로 배우면 그걸 적용하기에 바쁘고, 정리하는 건 우선순위에서 밀려나가요.

 

이러면 안 되는데, 노력을 좀 더 해봐야겠네요. 

 

일괄 처리하려고 하는 저의 안일함 반성하겠습니다...

 

---

 

이번 4주 차 리액트 강의에서는 리액트에서 소소하게 css 사용하는 법과 firebase 사용 방법을 배웠습니다!

 

1. 4주 차에서 배운 react css, js 잡기술

keyframes, window.scrollTo(), styled-components 패키지를 적용한 태그에 props로 데이터 넘겨주기 등등

이러한 기술들을 배웠어요. 

 

keyframes 같은 경우는 일반 css에서도 볼 수 있습니다.

 

@keyframes blink_effect {
  50%{
  	opacity: 0.5;
  }
}

.LoadingBlock {
  width: 90%;
  height: 15vh;
  background: #eee;
  margin: 1.5vh auto;
  animation: blink_effect 0.8s ease-in-out infinite;
  border-radius: 30px;
}

 

일반 css에서는 이렇게 생겼죠?

 

import styled, {keyframes} from "styled-components";

.
.
.

const blink_effect = keyframes`
  50%{
    opacity: 0.5;
  }
`;

const LoadingBlock = styled.div`
  width: 90%;
  height: 15vh;
  background: #eee;
  margin: 1.5vh auto;
  animation: ${blink_effect} 0.8s ease-in-out infinite;
  border-radius: 30px;
`;

 

react에서는 이렇게 사용합니다!!

 

많은 차이는 없어요!

 

물론 react에서 사용할 때 styled-components 패키지를 사용해야 해요.

 

 

 

window.scrollTo()는 4주 차에서 들은 내용 중 한 번도 사용해본 적이 없는 js 함수였어요.

 

mdn사이트에서는 그냥 해당 위치로 스크롤 옮겨주는 함수라고 합니다.

 

window.scrollTo(x-좌표, y-좌표);

window.scrollTo( 0, 1000 );
//x 좌표는 맨 왼쪽 상단 위에 있으며, y 좌표는 맨 왼쪽에서부터 1000px 떨어진 곳입니다.

window.scroll(0, 1000);
//3번 줄과 같은 내용

window.scroll({top: 0, left: 0, behavior: "smooth"});
//부드럽게 스크롤이 움직이는 옵션을 추가한 scroll
//대신 객체 형태로 3가지 키와 값으로 존재한다.
//behavior(option)자리에는 "auto" or "smooth" 밖에 안들어간다.

 

scrollTo와 scroll은 같은 기능을 하는 함수라고 하네요.

 

의미 상으로는 scrollTo가 나은 것 같아요.

 

이런 기능이 있는지 잘 몰랐던 제가 참...

 

앞으로 있을 토이 프로젝트나 이번에 하고 있는 한이음 프로젝트할 때 적용해봐야겠네요!

 

2. firebase의 firestore 다뤄보기

firebase를 니꼬님 강의 들으면서 했다가 그때는 한참 해야 할 게 있어서 

다 못 듣고 학업에 집중했었어요. 이번 기회야 말로 제 것으로 만들어야겠어요.

 

 firebase는 어떤 기능을 제공하는가?

 

BaaS를 제공합니다!

 

BaaS란 Backend as a Service라고 부릅니다.

 

firebase는 Baas로 데이터베이스 연동, 소셜 서비스 연동, 파일 시스템 등으로 api 형태로 제공해줘요.

 

firebase의 firestore는 realtime-database 기능을 가지고 있어요.

 

즉, 실시간으로 데이터가 삭제되고 추가되고 업데이트된다는 거죠.

 

firestore는 또 다른 특징을 가지고 있어요.

 

바로바로 NoSQL 클라우드 데이터베이스 서비스를 한다는 겁니다.

 

구조는 collection과 document로 나눠지는데,

collection은 document들을 묶는 집합입니다.

 

document는 JSON 형태로 볼 수 있습니다.

 

https://firebase.google.com/

Firebase

firebase 홈페이지에 들어가서 프로젝트 만들기를 누르면 됩니다.

 

프로젝트 만들기를 누르면 아래의 화면처럼 나올 거예요.

 

 

프로젝트 이름은 'my-awesome-prorject-id'처럼 띄어쓰기는 -(대시)를 쓰는 게 좋겠죠?

 

 

다음을 누르면 이 화면이 나와요. 계속 눌러주시면 됩니다.

 

 

프로젝트 만들기!!

 

만약, 나라가 나오시면 아래 화면처럼 하시면 됩니다!!

 

 

나라는 마음에 드는 나라로 하면 된다고 하네요..? 뭐 저는 고향이 좋으니 대한민국으로😊

 

 

 

생성된 프로젝트를 누르면, 대시보드 창으로 이동합니다.

 

그리고 왼쪽에 메뉴바가 있는데, 메뉴 바 중에서 firestore를 찾아서 누르시면 됩니다.

 

데이터베이스 만들기 클릭!

 

저희는 test 모드로 할 겁니다.

 

test모드로 하는 이유는 localhost에서도 돌리기 위해서입니다.

 

나중에는 보안 규칙을 업데이트해줘야 누구나 읽기 쓰기 모두 가능하더라고요.

 

이 접은 글은 보안 규칙이 적용이 잘 안 되는 사람을 위한 겁니다! 넘기셔도 돼요.

저는 보안 규칙을 브라우저에서 억지로 바꾸려다가 애먹었어요...

결국, firebase-tools 패키지를 사용해서 바꿨습니다.

firebase-tools는 전역으로 설치해주세요

 

npm i -g firebase-tools

 

만약 어거지로 보안규칙을 바꾸고 싶다하시면,

root 폴더 바로 아래에 .rules라는 일반 파일 만들어서 보안규칙을 아래처럼 바꿔서 넣었어요.

 

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read; 
      allow write;
    }
  }
}

 

 

여기서 다 끝난 게 아니라 이제 아래의 명령어를 cmd에 입력해야 합니다.

 

 

firebase deploy --only firestore:rules

 

이 명령어를 입력하면 .rules 파일대로 보안 규칙을 수정해줄 겁니다!

 

 

 

여기서 나라를 설정해줍니다. 

 

서울은 asia-northeast3입니다. TMI: aws에서는 asia-northest2가 서울이다.

 

잘 설정했는데, 오류가 나올 수도 있어요. 밑에 사진처럼요..

 

 

저 같은 경우는 알 수 없는 오류가 발생했다고 하더라고요.

 

그래서 사용 설정을 계속 눌렀던 것 같아요.

 

계속 누르고 나니 GCP(Google Cloud Platform)로 넘어가더라고요.

처음엔 정말 당황했는데, 알고 보니 구글에서 새로운 방법을 알려준 거였어요.

 

구글에서 지원해주는 방법이 cloud storage 방식과 fire storage 방식이 있었어요.

 

저는 그냥 native 모드가 있길래 눌렀더니 firestore 형식으로 다시 돌아왔습니다.😂

 

이 사진은 firestore가 gcp에서 적용될 때인데 firebase로 돌아가면 firebase에 firestore를 사용하고 있는 걸로 바뀌어 있을 거예요.

 

이제 firestore에서 컬랙션 시작 눌러서 시작하면 돼 요!

 

이 방식은 이제 mongoDB랑 비슷한 것 같아요. 그러니 이제 어떻게 document를 만들어야 할지는 생략할게요.