Insta-ReactJS. setUp

1. 들어가기

-apollo graphql prism등으로 만든 insta-backend server와 연동할 web-frontend를
reactJS로 만듬.

공식문서

https://www.apollographql.com/docs/react/get-started
https://fontawesome.com/docs/web/use-with/react/
https://reactrouter.com/docs/en/v6/getting-started/installation
https://reactrouter.com/docs/en/v6/api
https://www.apollographql.com/docs/react/local-state/reactive-variables/

2. setUp list

1. npm i styled-components
2. npm i react-hook-form
3. npm i react-router-dom
4. npm i @apollo/client graphql
5. npm i react-helmet-async
6. npm i styled-reset
7. npm i @fortawesome/fontawesome-svg-core
   @fortawesome/free-brands-svg-icons
   @fortawesome/free-regular-svg-icons
   @fortawesome/free-solid-svg-icons

3. react-router-dom

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
///Router, Routes, Route, 사용위해서 BrowserRouter를 불러온다.

import { darkModeVar, isLoggedInVar } from './apollo'
import Home from './screens/Home'
import Login from './screens/Login'
import { useReactiveVar } from '@apollo/client'
import Nomad from './screens/Nomad'
import { ThemeProvider } from 'styled-components'
import { darkTheme, GlobalStyles, lightTheme } from './styles'

function App() {
  const isLoggedIn = useReactiveVar(isLoggedInVar)
  const darkMode = useReactiveVar(darkModeVar)

  return (
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
      <GlobalStyles />
      <Router>
        <Routes>
          <Route path="/" element={isLoggedIn ? <Login /> : <Home />} />
          <Route path="/nomad" element={<Nomad />} />
        </Routes>
      </Router>
      //Router, Routes, Route 순서로 구조화한다.
      //Route는 반드시 <Route />로 한칸에 다 담아준다.
      //이동할 path를 코딩한 다음, element에 이동할 page의 component를 넣어준다.
      
    </ThemeProvider>
  )
}

export default App

Router는 여러가지가 있으나, BrowserRouter를 사용하면 됨.
가벼운 마음으로 첫post completed.