"나의 일지" 프로젝트(1)_기본 셋팅하기

1. react app 설치

npx create-react-app my-app
cd my-app
code .
npm start

출처: https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html

새로운 React 앱 만들기 – React

---

2. firebase 설치하기

npm install firebase

2-1 firebase 셋팅하기

firebase 코드를 리액트 앱 컴포넌트와 분리 해주기 위해, api폴더를 생성하고 하위에 firesbase.js 를 생성

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

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,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

---

3. tailwind css 설치하기

npm install -D tailwindcss
npx tailwindcss init

3-1 tailwind 셋팅

tailwind.config 파일 content 항목에, js 및 jsx에서 인식하도록 코드 추기

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js, jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3-2 taillwind 셋팅

index.css 최상단에 tailwind.css 추가하기 (전역으로 하기 위해 index.css에 추가)

@tailwind base;
@tailwind components;
@tailwind utilities;

---

4 react router dom 및 react icons 설치

npm install react-router-dom react-icons