#2 Setup

강의의 환경과 본인 실습의 환경을 약간 변경하여 진행하였다.

Vite 대신 cra, TS 대신 JS를 사용했다. 

평소에 cra를 사용해왔기 때문에 cra를 사용하였고, 이전 포스팅에서 언급했듯이 지금 당장 TS를 배우기에는 너무 이르다고 판단해 JS를 사용했다. 

 

Installation (Project configure)

create-react-app 을 통해 react 프로젝트를 생성하고, src 디렉토리 내부의 필요없는 파일들을 전부 제거한다. 

이 과정에서 public 디렉토리의 index.html의 수정으로 <title> 태그, 로고를 변경할 수 있다는 사실을 알았다. 

src 디렉토리의 index.js에서 #root.render()로 'id가 root인 태그에 App.js를 렌더링 하는구나' 하고 어렴풋이 알고있었다. 

여기서 id가 root인 태그는 public/index.html의 <div id="root"> 였다. 

결국 index.html이 사용자에게 보이게 되는 화면이므로 이곳의 태그들을 조정하여 브라우저 탭의 정보들(title 등)을 조작할 수 있는 것이다. 

 

다시 돌아와서, 프로젝트에 필요한 라이브러리들을 설치한다. 

강의에서 사용하는 버전을 그대로 사용했다. 

라이브러리의 목록은 다음과 같다. 

firebase는 나중에 설치하도록 한다. 

 

react-router-dom@6.14.2

styled-reset

styled-components@6.0.7

참고로 특정 라이브러리의 원하는 버전을 설치하려면 npm install (libraryName)@(version)을 사용하면 된다.
이미 설치한 라이브러리를 삭제하려면 npm uninstall (libraryName) 으로 삭제가 가능하다. 

 

위 라이브러리 중 styled-reset은 처음 사용하는 라이브러리였다. 

프로젝트의 기본 스타일을 초기화하는데 사용된다. 

 

Routing

App.js에서 createBrowserRouter()로 라우팅을 시작하자. 

이 함수는 객체의 배열을 인자로 받는다. 

그리고 이 배열에 포함된 객체들은 라우팅 경로를 나타낸다. 

 

path는 라우팅 경로, element는 그 경로에서 보여줄 페이지를 의미한다. 

위 코드를 보면 "/" 의 children으로 또다른 객체들의 배열이 오는 것을 볼 수 있다. 

이를 이해하기 위해 Layout.js를 보자. 

 

react-router-dom에서 Outlet을 import해 사용하였다. 

이 Outlet은 URL 경로에 따라 children 컴포넌트들을 보여주는 역할을 한다. 

현재 Layout의 경로는 "/" 이고, 

children으로 

Home (""), Profile("profile") 이 있다. 

즉, url이 "/" 일 때는("/" + "" = "/") Home 이 보여지고, "/profile"일 때는("/" + "profile" = "/profile") Profile이 보여지는 것이다. 

 

Layout은 Home, Profile 모두에서 보여지는 페이지이므로, 나중에 네비게이션 바로 사용할 수 있다. 

또한, Layout의 children으로 Home, Profile이 있고 Login, CreateAccount는 외부에 위치하면서 로그인이 된 사용자들만 Layout과 그 하위 페이지들을 볼 수 있게 하는 식으로 활용할 수 있다. 

 

위의 Home, Profile, Login, CreateAccount 컴포넌트를 routing 디렉토리 내부에 생성하고 간단하게 작성한다. 

components 디렉토리에는 Layout 컴포넌트를 작성한다. 

routing 디렉토리에는 routing과 관련된 컴포넌트들을, 

components 디렉토리에는 routing과 관련없는 컴포넌트들을 작성한다. 

 

Default style

styled-reset 라이브러리를 활용해서 기본 스타일을 적용해보자. 

크롬, 파이어폭스, 엣지 등의 브라우저들은 각자 기본적인 초기 스타일이 다르다. 

그래서 모든 브라우저에서 같은 스타일을 적용하기 위해 styled-reset 라이브러리를 사용한다. 

아래의 코드를 작성하고 App.js에서 import해 사용한다. 

 

createGlobalStyle로 글로벌 스타일을 작성한다. 

styled-reset에서 reset을 import해서 스타일을 초기화해준다. 

모든 태그들에 대해 box-sizing을 border-box로 적용하고, 

body 태그에 색을 지정한다. 

 

여기서 스타일이 적용되지 않아 한참을 헤맸는데, 자세한 내용은 아래의 포스팅을 참고하자..

createGlobalStyle을 import 할 때는 꼭 중괄호로 감싸줘야한다!!

https://aeyong-dev.tistory.com/50

2023.12.27

 

Loading screen

firebase는 기본적으로 firebase SDK, firease server가 필요하다. 

이들을 활용하기 위해 데이터를 가져오는 로딩시간이 잠시 필요한데, 

이 로딩 중에 보여질 화면인 Loading page를 만들어보자. 

App.js에 다음과 같이 작성한다. 

 

로딩중인지를 나타내는 상태 isLoading을 useState로 정의한다. 기본값은 true이다. 

init 함수를 비동기 함수로 작성하는데, firebase 로딩 시간을 임의로 가정해서(2s) 이 시간이 지나면 로딩 상태를 false로 변경한다. 

useEffect를 사용하여 처음 렌더링 될 때 init 함수를 작동하게 한다. 

마지막으로 isLoading의 상태에 따라 LoadingScreen을 보여줄지 routing에 맞는 화면을 보여줄지 삼항연산자로 작성한다. 

결과는 다음과 같다. 

 

Firebase project

이제 본격적으로 firebase를 사용해보자. 

firebase에 로그인 하고 프로젝트를 생성한다. 

크게 어렵거나 설정할 것은 없으니 생략하도록 하겠다. 

이 과정이 끝나면 아래와 같은 화면이 나올 것이다. 

 

콘솔에 npm install firebase를 입력해도 되지만, 

강의에서 사용하는 버전에 맞추기 위해 10.1.0 버전을 지정하여 설치했다. 

설치가 완료되면 src 디렉토리에 firebase.js를 생성하여 SDK의 코드를 작성한다. 

이렇게 해서 firebase와 react 프로젝트의 연동이 되었고, 다음 포스팅에서는 인증을 위한 작업들을 해보자!