👍 오늘은 특정 프로젝트에서 민감한 정보(Firebase 데이터베이스 설정)를 포함하여 JavaScript 파일을 생성하고, 이 파일을 Git 저장소에 올라가지 않도록 관리하는 방법에 대해 알아봅시다.😊
1) Firebase 프로젝트 설정 정보 가져오기
1. Firebase 프로젝트를 이미 만든 가정하에 Firebase 콘솔에서 프로젝트의 설정정보(예:API키, 인증정보 등)를 찾습니다.
2. Firebase SDK 설정 스크립트를 찾아 복사해줍니다.
3. 프로젝트의 js 폴더 내에 새로운 JavaScript 파일을 만들고, 여기에 Firebase SDK 설정 스크립트를 붙여 넣어줍니다.
2) js 폴더에 스크립트 파일 생성
1. Visual Studio Code를 열고 복사한 Firebase 설정 코드를 붙여넣습니다.
2. 파일을 firebaseConfig.js와 같은 이름으로 저장합니다. (파일을 js 폴더내에 저장하기!!)
✔ 로컬 컴퓨터에서 js 폴더를 찾거나 생성해 준 후 이 폴더 내에 JavaScript 파일을 만들어 Firebase 설정을 포함할 수 있습니다.
3) .gitignore 파일 수정
파일에 방금 만든 스크립트 파일 경로를 넣어줍니다.
(.gitignore 파일을 열고 다음 라인을 추가합니다.)
✔ 이 파일에는 버전 관리 시스템인 Git이 추적하지 않도록 하고 싶은 파일,폴더의 목록을 기록하게 됩니다.
✔ firebaseConfig.js 파일을 .gitignore 파일에 추가하여 GitHub(원격 저장소)에 푸시되지 않도록 설정해주면 민감한 정보가 공개되지 않습니다.
4. 웹 페이지에서 스크립트 파일 사용
웹 페이지에서 firebaseConfig.js 파일을 사용하려면 HTML 파일에 다음과 같이 태그를 추가해줍니다.
✔ 이를 통해 웹 애플리케이션이 Firebase 서비스와 제대로 연동될 수 있습니다. 즉, HTML 파일 내에서 스크립트 태그를 사용하여 이 파일을 로드할 수 있다는 점!!
✔ 이렇게 설정하게 되면 웹 브라우저가 로드 될 때 firebaseConfig.js 파일도 함께 로드되어 Firebase 프로젝트와의 연결이 초기화 됩니다.
👍 Point
이 파일은 Firebase의 다양한 서비스(ex.인증, 데이터베이스, 스토리지 등)를 사용하기 위한 기반을 제공한답니다.
💡 오늘의 느낀점 💡
직접 팀프로젝트를 진행하면서 CRUD 기능 중 댓글 작성시 Firebase의 Firestore Database에 적재가 되는데 git 저장소에 민감한 정보가 노출되지 않도록 .gitinore 파일에 .env를 추가하는 방법을 직접해보니 앞으로 프로젝트에도 활용도가 높아서 중요한 내용을 알아간 시간이였다🥰
