Set up - installation, routing, loading screen, first project

 

1. Installation

매우 사용하기 쉬운 개발 환경을 제공하는 Vite를 사용할 것이다.

https://vitejs.dev/

Vite

 

$ npm create vite@latest

입력해서 vite 프로젝트를 만든다.

최신 버전으로 설치할거냐는 물음을 받을텐데, y를 누른다.

 

다음엔 프로젝트 이름을 적는다.

나는 glee_paw라고 정했다.

 

다음엔 js 라이브러리는 선택하는데, 나는 당연 react를 선택!

그리고 typescript를 사용할지, javascript를 사용할지 선택한다.

나는 typescript + SWC를 선택했다.

이제 프로젝트가 만들어 졌고, code glee_paw를 입력해서 vscode를 연다.

 

해당 프로젝트를 연 후 npm i 를 실행하고, npm run dev를 입력해서 프로젝트가 잘 동작하는지 확인한다.

$ npm i
$ npm run dev

 

필요없는 파일들을 모두 정리한 후 git저장소를 initialize 하자.

깃헙에 레포지토리를 만든 후 git remote add origin 깃헙 레포 주소 를 입력해서 연결하자.

$ git init .
$ git remote add origin https://github.com/eee0930/glee_paw

 

react-router-dom, styled-components 등을 설치해준다.

$ npm i react-router-dom@6.14.2
$ npm i styled-reset
$ npm i styled-components@6.0.7
$ npm i @types/styled-components -D

 

 

참고로 아직 firebase 연결 안해줬음!

 

 

 

2. Routing

src 디렉토리에 routes, components 디렉토리를 만들었다.

기본 레이아웃으로 사용할 layout.tsx와 로그인, 회원가입 화면으로 사용할 authLayout.tsx를 만들었다,

layout.tsx는 로그인 한 사용자만 보여질 화면으로 쓸 예정이다.

// layout.tsx

import { Outlet } from 'react-router-dom';

export default function Layout() {
  return (
    <>
      <h2>layout</h2>
      <Outlet />
    </>
  );
}

 

레이아웃을 기본 틀로 하고 그 안에 route로 불러올 화면들이 들어갈 것이라 Outlet을 넣어주었다.

routes는 url 변경에 따른 화면들인데, 일단 기본적으로 이렇게 만들었다.

로그인 한 사용자에게는 layout.tsx를 사용할 home, profile 컴포넌트가 보여질 예정이다.

 

라우팅을 하기 위해 Router.tsx를 만든다.

// Router.tsx

import { createBrowserRouter } from 'react-router-dom';
import Layout from './components/layout/layout';
import AuthLayout from './components/layout/authLayout';
import Home from './routes/home';
import Profile from './routes/profile';
import Login from './routes/auth/login';
import CreateAccount from './routes/auth/createAccount';

export const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: '',
        element: <Home />,
      },
      {
        path: 'profile',
        element: <Profile />,
      },
    ],
  },
  {
    path: '/auth',
    element: <AuthLayout />,
    children: [
      {
        path: 'login',
        element: <Login />,
      },
      {
        path: 'create-account',
        element: <CreateAccount />,
      },
    ],
  },
]);

 

전체적으로 사용할 style을 정의하기 위해 globalStyles.ts 파일도 만든다.

// globalStyles.ts

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

export const GlobalStyles = createGlobalStyle`
  ${reset};
  * {
    box-sizing: border-box;
  }
  body {
    background-color: #fff;
    color: #000;
    font-family: -apple-system, 'Nanum Square', BlinkMacSystemFont, "Segoe UI", 
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  }
`;

 

Router.tsx와 globalStyles.ts 파일을 App.tsx에 import 하자

// App.tsx

import { RouterProvider } from 'react-router-dom';
import { router } from './Router';
import { GlobalStyles } from './globalStyles';

function App() {
  return (
    <>
      <GlobalStyles />
      <RouterProvider router={router} />
    </>
  );
}

export default App;

 

 

 

 

3. Loading Screen

파이어베이스 authentication에 필요한 아주 간단한 로직을 구현해 볼거다.

firebase authentication을 작동시키는 것은 기본적으로 firebase SDK와 firebase server이다.

얘네들이 authentication에 필요한 쿠키, 토큰 등을 다 담당한다.

 

사용자가 우리 앱에 들어오면 잠시동안 firebase SDK는 사용자의 로그인 여부를 확인해주기 위해 쿠키와 토큰을 가져와서 서버와 함께 확인해야한다. 아주 잠시동안만 기다려주면 된다!

 

따라서 우리가 필요한 것은 사용자가 로그인했는지 여부를 firebase가 체크하는 동안 로딩화면을 보여주는 것이다.

 

App.tsx에 isLoading이라는 state를 만들어주자.

// App.tsx

function App() {
  const [isLoading, setIsLoading] = useState(true);
  const init = async () => {
    // wait for firebase
    setIsLoading(false);
  }
  useEffect(() => {
    init();
  }, []);
  return (
    <>
      <GlobalStyles />
      <GridStyles />
      <RouterProvider router={router} />
    </>
  );
}

 

isLoading을 일단 true로 만들고 init이란 함수를 실행시킨 다음 firebase가 사용자 로그인여부 체크를 마치면 isLoading을 false로 만들어준다.

 

components 폴더에 들어가서 loadingScreen.tsx라는 파일을 만들어주자.

loading하는 화면이 나타나도록 component를 만들어준다. 그리고 App.tsx를 이렇게 바꿔주자.

 

// App.tsx

function App() {
  const [isLoading, setIsLoading] = useState(true);
  const init = async () => {
    // wait for firebase
    setIsLoading(false);
  };
  useEffect(() => {
    init();
  }, []);
  return (
    <>
      <GlobalStyles />
      <GridStyles />
      {isLoading ? <LoadingScreen /> : <RouterProvider router={router} />}
    </>
  );
}

export default App;

 

 

 

 

 

4. Firebase Project

https://console.firebase.google.com/?hl=ko&pli=1

로그인 - Google 계정

 

파이어베이스 로그인을 한 후 프로젝트 만들기를 클릭한다.

프로젝트 이름을 입력한 후 next! 

 

이렇게 프로젝트가 만들어졌다.

지금부터 작업을 시작하기 위해 app을 추가할 것이다.

웹을 의미하는 </> 아이콘을 클릭한다.

 

앱 닉네임은 그냥 web으로 해줄거다.

앱 등록을 클릭해주면 이제 firebase 설치를 위해 우리가 해야할 일을 알려준다.

 

npm으로 firebase를 설치해준다.

그리고 아래 코드를 복사하여 우리 application에 붙여넣기한다.

 

src 폴더에 firebase.ts 파일을 만들어 붙여넣기 한다.

이걸로 firebase 설정이 끝났다.

 

그 다음으로 할 것은 authentication(인증) 작업이다.

 

계정생성 페이지와 로그인 페이지를 만들어볼 거다.

 

 

 

 

---

 

출처

노마드코더

https://nomadcoders.co/nwitter/

All Courses – 노마드 코더 Nomad Coders