[React + Tailwindcss + Axios] 프로젝트 초기설정 하기

이번에 백, 프론트 함께 하는 프로젝트를 처음 해보면서 남이 해주던 "초기 설정" 을 처음으로 제가 해보게 되었습니다.

감사하게도 같은팀에 실력 좋으신 분이 저한테 한번 해보라며 도움을 주셔서 금방 해냈습니다..(울컥)

 

사실 이 초기설정이라는건 그때그때 다르겠지만, 그래도 저같은 왕초보를 위한..? 글..

 

우선, cra / react-router-dom / axios / tailwindcss 이렇게 네가지를 다운받았습니다.

 

1. 프로젝트 생성 및 라우터 설치

-> 먼저 , create-react-app 으로 프로젝트를 생성한 뒤 cd 명령어로 해당 프로젝트로 이동해줬습니다.

그리고 이렇게 라우터 버전6 까지 설치해주면 cra , router 는 해결 !

 

2. tailwind 적용

공식문서 라고 하면 뭔가 무서운 사람들 보기 좋도록 구글링하면 하는방법이 많이나오긴하지만, 오히려 안좋을 수도 있는게 저같은경우에도 왕초보라 공식문서보단 구글링이 더 익숙해서 테일윈드도 검색해서 했습니다 처음에 !

그런데 1번 블로그에서 중간까지 하다가 이해가 안가 2번 블로그 글을 보고, 또 이해가 안가면 3번 블로그를 보고 하다보니 뭔가가 뒤죽박죽 섞여서 적용 자체가 안되더라구요.........

https://tailwindcss.com/docs/guides/create-react-app

Install Tailwind CSS with Create React App - Tailwind CSS

그냥 이 공식문서 보고 따라하는게 가장 좋은 것 같습니다 !

참고로 저건 리액트 전용이고, html+css+js 용은 또 따로 있었습니다.

 

이제 이 두개를 사용해봅시다 !

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import { BrowserRouter } from 'react-router-dom'; // * BrowserRouter 불러오기

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

 

  <BrowserRouter>

    <App />

  </BrowserRouter>

 

);

먼저, index.js 에 이렇게 라우터를 선언해준다. 이렇게 하면 app.js 에서 라우터 사용이 가능하다고 합니다 !

 

import React from "react";

const Home = () => {

  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;

};

export default Home;

그리고 하나의 컴포넌트를 생성해 라우터와 테일윈드가 잘 되는지 확인한다. className 이 테일윈드가 잘 되는지 확인하는 부분입니다.

 

import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./Home";

import axios from "axios";

function App() {

 

  return (

        <Routes>

          <Route path="/" element={<Home />} />

        </Routes>

  );

}

export default App;

이제 App.js 에서 Home 컴포넌트의 경로를 지정해준 후 npm start 로 확인해보면 ~!

밑줄이 그어진걸 보니 잘 적용된걸 볼 수 있다.

 

3. axios 다운

이건 api 를 사용하기 위해 필요하다고 알고있습니다 !

다운은 npm install axios 해줬고, 다운이 잘 되면 package.json 파일에

이렇게 다운되어진 axios 버전이 뜹니다 ! 

 

import axios from "axios";

이렇게 선언만 해주면 준비 끝 ! 

api 는 https://my-json-server.typicode.com/typicode/demo 여기서 아무거나 링크로 가져다 쓰면 되고

function App() {

  axios.get("https://my-json-server.typicode.com/typicode/demo/posts").then(function (response) {

    console.log(response);

  });

 

 

이렇게 콘솔로 api가 잘 나오는지 확인해보면

아주 잘 나온다 !

 

이렇게 해서 사용할 깃 레포지토리에 올려주면 그걸 팀원들이 pull 로 당겨와서 사용하면 된다.