[React] 키록장 프로젝트 🔐 -2

유지연·2024년 1월 1일

👋 2024년 첫 포스팅 :) (TIL 240101)

Router 구축!

routing?

웹 애플리케이션에서 라우팅이란 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다. 라우트 시스템을 구축하기 위해 사용할 수 있는 것 중 가장 대표적인 react router를 사용하겠다.

react router는 client 측 라우팅을 구현하는데 사용되는 라이브러리로, SPA(Single Page Application)를 개발할 때 사용자가 다양한 URL로 이동하거나 페이지를 변경하는 것을 도와준다.

router 생성하기: createBrowserRouter

라우터 v6.4부터 기존의 BrowserRouter 대신 createBrowerRouter 사용을 권장한다고 한다.

(App.tsx)

import { RouterProvider, createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout/>, 
    children: [ //로그인한 사용자만 접근
      {
        path: "",
        element: <Home/>
      }
    ]
  },
  {
    path: "/login",
    element: <Login/>
  },
  {
    path: "/join",
    element: <Join/>
  }
]);

path에 따른 element와, 중첩라우팅을 위한 children을 설정하였다. 전체 프로젝트에 대한 라우터를 완전히 작성하진 않았기 때문에 추후 추가할 계획이다!

GlobalStyle 전역 스타일링

GlobalFont

키록장의 메인 폰트는 "프리텐다드"이다. 프리텐다드 폰트 홈페이지

src 하위폴더로 fonts 폴더를 생성하고 그 안에 사용하고자 하는 폰트를 저장해준다. 폰트 확장자에는 대표적으로 ttf(true type font), otf(open type font), woff(web open font format)이 있는데 woff가 글꼴이 압축되어 있어 로드 속도가 상대적으로 빠르다.

해당 폰드의 weight가 9가지나 있어 globalstyle와 분리하여 따로 globalfont.ts 파일로 작성하였다.

(./src/styles/GlobalFont.ts)
import { createGlobalStyle } from "styled-components"; 

const GlobalFont = createGlobalStyle`
@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url(./woff2/Pretendard-Black.woff2) format('woff2'), url(./woff/Pretendard-Black.woff) format('woff');
}
-생략-
@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url(./woff2/Pretendard-Thin.woff2) format('woff2'), url(./woff/Pretendard-Thin.woff) format('woff');
}
`;

export default GlobalFont;

GlobalStyle

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

const GlobalStyles = createGlobalStyle`
  ${reset};
  :root {
    --main-blue: #5800FF;
    --main-yellow: #FFC600;
    --main-orange: #FD9F28;
  } 
  * {
    box-sizing: border-box;
  }
  body {
    background-color: black;
    color: white;
    font-family: "Pretendard";
    font-weight: 500;
  }
`;

export default GlobalStyles;

styled-reset의 ${reset}을 통해 전체 style을 리셋 시켜주었고, 자주 쓰이는 색은 변수로 선언하여 사용에 용이하게 하였다. box-sizing 기본 값은 border-box로 설정하였다.

App.tsx 정리

firebase 사용을 위한 준비

키록장 프로젝트에서는 BE를 위해 firebase를 사용한다.
오늘은 간단히 firebase가 유저 정보를 보낼 동안 로딩화면을 띄우기 위한 코드를 몇 줄 작성하였다.

useEffect()

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정작업을 수행할 수 있게 해주는 hook이다.

useEffect(()=> {
	console.log("Complete Rendering");
    return () => {
    	consol.log("Clean UP!");
    };
}, [의존 변수명]);

useEffect 함수의 인자로 수행 함수만 있다면 컴포넌트가 렌더링 될 때마다 해당 함수가 수행된다.
만약 컴포넌트가 화면에 맨 처음 렌더링 될 때만 실행하고 싶을 경우 useEffect의 두 번째 인자로 빈 배열을 둔다. 또 특정 변수의 값이 업데이트 될 때 실행하고 싶은 경우 useEffect의 두 번째 인자로 배열 안에 변수명을 넣어 설정하면 된다.

렌더링 될 때마다 실행: useEffect(()=>{수행코드})
맨 처음 렌더링 될 때만 실행: useEffect(()=>{수행코드}, [ ])
특정 변수값이 업데이트 될 때만 실행: useEffect(()=>{수행코드}, [변수명])

컴포넌트가 언마운트 되기 전이나 업데이트 되기 직전에 작업을 수행하고 싶다면 useEffect의 return 값으로 clean up 함수를 작성하면 된다.

function App() {
  const [isLoading, setLoading] = useState(true);
  const init = async() => {
    //firebase가 유저 정보를 보낼 때 보여질 로딩 화면
    setLoading(false);
  };
  useEffect(()=>{
    init();
  },[]); //두 번째 parameter로 빈 배열 -> 처음 마운트될 때만 실행
  return (
    <>
      <GlobalStyles />
      <GlobalFont />
      {isLoading ? <LoadingScreen/> : <RouterProvider router={router}/>}
    </>
  )
}