개발 환경설정
매번 프로젝트를 시작할 때 마다 제일 애를 먹는것이 새로운 개발환경을 설정하는 것이다.
이번에 토이프로젝트를 준비하면서 Firebase를 사용하게 되었는데, 토이프로젝트 용으로 적합하게 느껴져
언제든지 보고 사용할 수 있도록 가이드를 만들고자 한다.
설정한 스택은 React, TS, Eslint / Prettier, Firebase, Github 5가지이다.
특히 Firebase의 Firestore는 프론트엔드 개발자도 손쉽게 다룰 수 있는 데이터베이스여서 아주 적합하다고 생각되며,
그 외 공식 문서를 통해 로그인, 스토라지 등 다양한 기능을 작업해볼 수 있다.
1. Firebase 프로젝트 생성하기
이번 가이드에선 CICD 및 DB를 위해 Hosting과 FireStore를 활성화 할 예정이다.
프로젝트를 생성한 뒤, 우선 Firestore Database로 이동해 해당 기능을 활성화 해야한다.
만약 FireStore를 먼저 활성화 하지 않고 이후 과정을 진행한다면,
앱 생성시 FireStore가 아닌 Realtime Database를 기본으로 설정하게 된다.
FireStore를 활성화 했다면 다음 단계로 넘어가자.
Hosting은 아래 과정에서 설정할 것이다.
2. Github Repo 생성 및 CRA / TS 프로젝트 만들기
우선 아래 명령어를 실행해 TS가 설정되어 있는 React 프로젝트 폴더를 만든다.
npx create-react-app <프로젝트 명 or ./ > --template typescript이 작업은 시간이 걸리므로, 이후 CICD에 필요한 깃헙 리포지토리를 만들어 놓자.
아래 빨간 네모 안에 있는 리포지토리 링크를 복사해놓자.
React 프로젝트가 설치 완료되었다면 해당 폴더 내에서 아래 명령어를 실행해 깃헙 리포지토리에 연결하자.
git remote add origin <repository 링크>3. Firebase tools 설치하기
만약 firebase를 처음 써보는 거라면 아래 명령어로 firebase tools를 설치하자. (Mac 기준)
이를 설치하면 터미널에서 firebase 명령어를 통해 설정을 진행할 수 있다.
curl -sL https://firebase.tools | bash4. 프로젝트에서 Firebase 설정하기
Firebase tools 설치 이후 프로젝트 내에서 아래 명령어를 통해 firebase를 시작하자.
firebase login로그인이 끝나면, 아래 명령어로 firebase init 명령어를 입력해 설정을 시작하자.
firebase init만약 위에서 fireStore를 설정하지 않았다면 에러가 발생하니 미리 해주고 오자.
github action을 이용한 Hosting과 FireStore를 선택한다.
먼저 프로젝트와 FireStore 설정을 진행한다.
프로젝트의 경우 제일 처음 과정에서 생성한 프로젝트로 설정한다.
그 외 FireStore 규칙을 설정할 파일을 생성한다.
다음으로 Hosting 설정을 진행한다.
우리는 React 프로젝트를 만들거기 때문에
빌드시 생성되는 build 폴더를 배포 할 예정이며(What do you want to use as your public directory?)
SPA 옵션을 활성화 한다. (Configure as a single-page app?)
이후 깃헙 설정을 진행하며, 자신의 repo 주소를 적는다.
(For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository))
배포하기 전, build를 실행해야 하므로 github action에서 npm install && npm run bulid를 사용하도록 한다.
Set up the workflow to run a build script before every deploy? Yes
What script should be run before every deploy? npm install && npm run build
이후 main 브랜치를 설정하고 나면, CICD 및 호스팅 설정은 끝이 난다.
이제 main 브랜치를 머지하거나 PR을 진행하면 자동적으로 호스팅을 진행해 준다.
5. Firebase 앱 및 SDK 추가하기
이제 firebase의 기능들을 사용할 수 있도록 도와줄 SDK를 설치하자.
우선 파이어베이스 프로젝트 페이지에서 새로운 앱을 만들어야 한다.
그럼 아래와 같이 앱을 생성한 뒤 SDK를 추가하는데, 만약 처음 FireStore를 미리 설정하지 않았다면
여기서 RealTime Database를 기본값으로 설정하게 되어 차질이 생긴다.
이제 프로젝트 터미널에서 firebase를 설치하고, SDK 파일을 추가하자.
키 노출이 걱정된다면, 아래 블로그를 참고하면 좋다.
🤔 Firebase API Key를 공개하는 것이 안전합니까?
npm install firebase
이제 SDK파일을 추가했으므로 firebase의 기능을 자유롭게 사용할 수 있다.
처음 설정한 Firestore의 경우, 아래처럼 코드를 추가하여 export 한 뒤 사용할 수 있다.
FireStore는 직접 공식문서를 보고 사용해보자.
FireStore 공식문서 링크
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: 'AIzaSyBvtEboUQZ2YV2R3S1FsiMndIb8TsUvFi0',
authDomain: 'fir-setup-afa88.firebaseapp.com',
projectId: 'fir-setup-afa88',
storageBucket: 'fir-setup-afa88.appspot.com',
messagingSenderId: '785258692875',
appId: '1:785258692875:web:288fa6b4333f062749e20e',
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Cloud Firestore and get a reference to the service
export const db = getFirestore(app);이제 지금까지 작업한 내용이 잘 배포되는지 확인해보자.
6. Github에 작업내역 배포하기
Eslint, Prettier를 설정하기 전 먼저 지금까지 작업해온 결과물을 확인해보자!
아래 명령어로 main 브랜치에 배포하고 나면, firebase가 github action을 통해 배포를 진행한다.
링크를 들어가보면, 배포된 사이트를 확인할 수 있다.
git add .
git commit -m "프로젝트 Setup"
git push origin main
7. Prettier 추가하기
우선 prettier 를 설치한 뒤 설정 파일을 생성한다.
그 다음 'npx prettier --check .'를 통해 테스트.
npm install --save-dev --save-exact prettier
// .prettierrc.json
{
"singleQuote": true
}
npx prettier --check .
8. Eslint 추가하기
아래 명령어로 Eslint를 설치하자.
npx eslint --init
그리고 prettier와 Eslint의 충돌 방지를 위해 다음을 설치하고
npm install --save-dev eslint-config-prettier.eslintrc.json 에 다음과 같이 설정한다.
// .eslintrc.json
{
...other-configs
"extends": ["airbnb", "prettier"],
....other-configs
}그리고 위에서 설정한 에어비엔비 TS 스타일을 설치하고
다시 .eslintrc.json에 설정을 추가한다.
npm install eslint-config-airbnb-typescript \
@typescript-eslint/eslint-plugin@^5.13.0 \
@typescript-eslint/parser@^5.0.0 \
--save-dev
// .eslintrc.json
{
...other-configs
"extends": ["airbnb", "airbnb-typescript", "prettier"],
"parserOptions": {
....other-configs,
"project": "./tsconfig.json"
},
....other-configs
}마지막으로 package.json에 CRA가 설정한 ESLint 설정을 제거한다.
package.json
// 아래 설정 삭제하기
{
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
}그리고 eslint를 실행하여 잘 적용되었는지 확인하면 끝!
npx eslint --ext .jsx,.js,.tsx,.ts src/정리
총 8단계를 통해
Firebase, CICD, DB, React TS, EsLint / Prettier를 설정해보았다.
좋은 서비스 덕분에 오래 걸릴 수 있는 개발환경 설정을 아주 간단하게 진행할 수 있었고, 토이프로젝트 혹은 사내에서도 프로토타입 용으로 요긴하게 사용할 수 있을듯 하다.
