대한민국 이곳저곳

리액트로 제작을하고 한국관광공사 TourAPI를 사용하여 전국 여행정보를 가져오는 사이트를 제작 하려고합니다.

1인 기획이며 한 달 프로젝트로 진행을 합니다.

라이브러리 사용

react-router-dom

npm i react-router-dom

페이지 이동을 해야하기 때문에 사용했습니다.

axios

npm i axios

외부 API를 받아오기 위해 axios를 사용했습니다.

tailwind CSS

https://tailwindcss.com/docs/installation/using-postcss

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init // tailwind.config.js 파일 생성

tailwind.config.js

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

postcss.config.js

module.exports = {
    plugins: {
      tailwindcss: { config: "./tailwind.config.js" },
      autoprefixer: {},
    },
  };

index.css

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

디자인하는 시간을 단축시키기 위해 tailwind를 사용했습니다.

firebase

https://firebase.google.com/?hl=ko
로그인 -> 시작하기 -> 프로젝트 추가 -> 이름 설정 후 계속 -> 국적 설정
을 하면 프로젝트가 생성이 됩니다.
웹 버튼 클릭하여 웹 이름 작성하면 아래 화면처럼 나오게 됩니다.

npm install firebase

.env로 apikey 가려주기

firebase.js 생성

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId
};

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

로그인, 댓글, 좋아요 기능을 넣으려면 서버가 필요한데
파이어베이스를 사용하면 서버쪽 기능을 쉽게 사용이 가능하기 때문에 사용했습니다.