23/12/5 til 환경변수 , 공용화(?)

그동안 환경변수에 대한 얘기를 들었지만 정확히 뭔지 몰랐는데

오늘 팀원에게 많이 배웠다.

<firebase.js>

import {initializeApp} from 'firebase/app';

const firebaseConfig = {

  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,

  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,

  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,

  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,

  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,

  appId: process.env.REACT_APP_FIREBASE_APP_ID,

};

// Initialize Firebase

const app = initializeApp(firebaseConfig);

export default app;

보통 파이어 베이스 컨피그 객체는 벨류에 스트링으로 특정 값을 같는데 process.env. 를 이용해 

 

<env.local>

REACT_APP_FIREBASE_API_KEY=AIzaSyAG9ohQqSM_aH_o_1wxkfmux6FYg9RP7xQ

REACT_APP_FIREBASE_AUTH_DOMAIN=simwha-b8b17.firebaseapp.com

REACT_APP_FIREBASE_PROJECT_ID=simwha-b8b17

REACT_APP_FIREBASE_STORAGE_BUCKET=simwha-b8b17.appspot.com

REACT_APP_FIREBASE_MESSAGING_SENDER_ID=554158426742

REACT_APP_FIREBASE_APP_ID=1:1:749146172998:web:d89bc61edabe8ba133a447

env.local 파일에 따로 할당해놓은 고유키를 불러온다. 이렇게 하면 깃헙에 고유키가 유출되는것을 막고

env 로컬은 push를 해도 영향을 안받는다고 한다. 캬 좋은거 배움

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<Button.jsx> 팀원 한분이 만들어 주신 버튼.js 

import React from 'react';                         

import styled from 'styled-components';

const Btn = styled.button.attrs(props => ({type: props.type}))`   

  background-color: var(--deep-blue);

  border: none;

  padding: 10px;

  border-radius: 10px;

  font-weight: bold;

  font-size: 1rem;

  cursor: pointer;

  &:hover {

    filter: brightness(1.2);     //  &:hover 이방식은 나도 종종 쓰지만  filter: brightness(1.2); 이건 처음봄

  }                                                    //내일 물어봐야지

`;

const CancelButton = styled(Btn)`      //이분 응용력이 좋음 Btn의 css특성을 그대로 받고

  background-color: #6e6e6e;                //여기서만 css를 추가하는방식임

  color: var(--white);

`;

const SubButton = styled(Btn)`

  background-color: var(--beige);            //  var(--beige);  이방식도 듣기만 했을뿐 써본적이 없는데

  color: var(--black);                             //미리 사전에 특정칼라에대한 명칭을 변수선언해놓고 쓰는방식

`;                                               //응용력이 좋으심 

const Button = ({children, onClick, type}) => {     //다른파일에서 Button 사용할때

  return (                                                               // 온클릭 타입 칠드런등을 props로 받으면

    <Btn type={type} onClick={onClick}>            // 그걸 함수안으로 넣어주기 위한 구조분해할당

      {children}                                             //함수를 return을 이용 태그로 바꿔버린다라... 캬 

    </Btn>                                      

  );

};

export {CancelButton, SubButton};   

export default Button;

자주쓰는 동일한 태그를 컴포넌트 한다는것은 느낌으로 알고 있었지만 잘쓰시는 팀원분에게 한수 배움

 

 

근데 왜 함수나 컴포넌트같은것은 export해야만 쓸수 있고 환경변수나 JSON은 export 안해도 쓸수 있는거지?

그냥 그런가보다 하고 일단 ㄱ

import Button from '../components/UI/Button';

팀원이 만든 Button 을 import 해서 써봤음 

 <Button>Fix하러가기</Button>

색상 이쁨 ㅎㅎ