간단한 기능의 게시판이나 웹사이트를 만들 때, React.js를 사용한 정적 페이지로 만드는 방법은 추후에 콘텐츠 수정이나 구조 변경을 해야 할 때 코드에 접근해야 하는 것이 필수적이다. 따라서 이번 시리즈에서는 Firebase를 활용하여 Serverless하고 가벼운 용도에 맞는 웹사이트를 구축해 보는 것이 목적이다.
개인적인 목표로는 복무하면서 만들고 공부했던 지식들과 하나의 웹사이트를 만들어서 호스팅하는 과정 까지 이해가 되질 않았던 부분들을 해결했던 과정에 대한 정리이기도 하다.
세팅 환경은 Mac이지만, Windows도 크게 다르지 않다.
➬Front-end: React.js
사실 Next.js를 사용하는 것이 SEO 측면에서 훨씬 우수하지만, 이번 프로젝트에서는 작년 react-router-dom에서 새롭게 추가된 Suspense라는 SSR 도구를 사용 해 보도록 하겠다.
𝌖Back-end: Firebase
Serverless라서 따로 Back-end구축은 하지 않고, Firebase 서버에서 쿼리만 받는다.
💡Firebase란?
Firebase 사에서 2011년에 개발한 모바일 및 웹 애플리케이션용 서비스로, 현재는 구글에 인수되어 서비스를 제공 하고있다. 가장 대표적인 기능들로 Firestore, Auth, Storage가 있다.
💻WebApplication Server: AWS Cloudfront
Amazon Web Service의 Cloudfront와 S3, 그리고 Github-Action으로 정적 호스팅까지 해본다.
Node.js가 설치되어 있다는 가정 하에, npx를 설치해준다.
npm install npx -g먼저 프로젝트를 만들 위치의 루트 폴더에 터미널을 열고 다음과 같이 create-react-app을 생성 해 준다.
npx create-react-app (프로젝트이름)
그러면 위와 같은 폴더 구조를 갖는 React 프로젝트가 생성된다.
npm start로 React 프로젝트가 정상적으로 3000번 포트에서 구동되고 있는 것을 확인 할 수 있다.
여기까지 React.js 개발 환경의 세팅이 완료되었고, 이제 Firebase를 연동 해 보도록 하겠다.
https://firebase.google.com/?hl=ko
Firebase
Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.
firebase.google.com
먼저 firebase에 Google 아이디로 로그인 해야 한다.
시작하기를 클릭하면 콘솔로 이동하게 된다.
새로운 프로젝트를 생성하면, 본인의 프로젝트 필드가 생성이 되고, 그 안에서 Firestore등 여러가지 빌드들을 사용할 수 있게 된다.
프로젝트 이름을 지정해준다.
구글 Analytics는 유용한 곳이 많으므로 사용 설정 체크한 후에 계속 눌러준다.
프로젝트 만들기까지 누르면 이제 프로젝트가 생성된다.
프로젝트가 생성되고 나면 다음과 같은 화면이 뜨게 될 것인데, 우리는 웹 애플리케이션을 제작 할 것이므로, 웹 버튼을 클릭한다.
웹 앱 이름은 원하는 것으로 자유롭게 한 후에 앱 등록 버튼을 누른다.(프로젝트 안에 하나의 웹 앱을 관리하는 개념이다.)
등록한 앱에 firebase 측에서 발급 해준 SDK를 확인 할 수 있으며, SDK 사용 방법까지 친절하게 나와있다.
다시 로컬 프로젝트로 돌아가서 firebase 패키지를 다운로드 받아 준다.
npm install firebase다운로드가 완료 된후, React 프로젝트 폴더 하위의 src 폴더에 firebase.js 파일을 생성한다.
firebaseConfig는 웹 어플리케이션에 대한 설정값으로, app이라는 변수를 생성한 후에, 설정값으로 초기화 해 주는 것이 코드에 대한 간략한 내용이다.
지금까지가 firebase와 React 프로젝트 연동의 전부이다. 하지만 민감한 apiKey를 github등의 저장소에 그대로 올렸다가는 project가 공중분해 될 수 도 있기 때문에, apiKey등의 firebaseConfig를 환경변수로 설정 해서 관리하는 것이 필수적이다.(공식 문서에서도 추천하는 방법이다.)
firebase.js와 같은 폴더 안에 .env파일을 생성하고 firebaseConfig의 내용을 복사 한 후에 "(따옴표), ,(콤마)를 모두 제거하고 =(등호)로 매칭 시켜준 다음과 같은 포맷으로 변경 해 준다.
다시 firebase.js로 돌아가서
process.env.REACT_APP_의 포맷으로 다시 firebaseConfig를 지정 해 주고, .gitnignore 파일에 .env를 추가 해주면 완성이다.
간혹 .env 파일을 설정 해 주다가 에러가 발생하는 경우가 있는데, 이는 관련 포스트를 참고하길 바란다.
2023.05.27 - [Error] - [FirebaseError] the client is offline. - firestore 데이터 불러오지 못하는 에러 해결
[FirebaseError] the client is offline. - firestore 데이터 불러오지 못하는 에러 해결
Firebase와 React를 연동하는 과정에서, FirebaseError: Failed to get document because the client is offline 이라는 에러를 만났다. 외국 형님들의 StackOverflow를 참고하면 버전을 다운그레이드 하라는 해결법만 제시
kmuhan-study.tistory.com
다음 포스팅에서는 Firestore에서 데이터를 쿼리해서 페이지에 띄우는 과정까지 알아보도록 하겠다.
2023.05.27 - [Web] - [React.js + Firebase] 초간단 사진 게시판 만들기(1) - Firestore 데이터 가져오기
[React.js + Firebase] 초간단 사진 게시판 만들기(1) - Firestore 데이터 가져오기
2023.05.25 - [Web] - React.js + Firebase(Firestore, Storage)로 초간단 사진 게시판 만들기(0) - create-react-app, firebase 연동 React.js + Firebase(Firestore, Storage)로 초간단 사진 게시판 만들기(0) - create-react-app, firebase 연
kmuhan-study.tistory.com