🥞 오늘 한 일

• 팀 소개 페이지 미니 프로젝트
  • 프로젝트 발표 및 피드백 (내가 발표자였다!) / 발표 진행 류제천 튜터님
  • 미사용 css 및 html 정리
  • 파이어베이스 환경 변수 숨김처리 기능 공부
  • user select 컬러 변경 기능 공유
• WEB 기초 특강 (최원장 튜터님)

🍽️ 문제 해결

파이어베이스 환경 변수 숨기기

문제

이번 프로젝트에서 댓글 기능을 제작할 때 웹종반 인강에서 배웠던, 파이어스토어 데이터베이스를 이용해 입력값을 저장하는 기능을 사용했는데, 각 팀원들의 파이어베이스 환경 변수가 그대로 노출된다는 문제점이 있었다.

해결

우선 팀원분이 매니저님께 여쭈었을 때 .env라는 파일의 개념에 대해 알게 되었고, 그에 대해 팀원들끼리 공부해본 결과 리액트에서 쓰이고 우리의 프로젝트처럼 생 html로 제작한 파일에서는 사용하기 어렵다는 걸 알게 되었다.
그래서 다른 방법을 찾아보다가, .gitignore라는 파일을 알게 되었고, 그 곳에 그냥 파이어베이스 개인정보를 넣은 js 파일을 만들어서 경로를 넣으면 되지 않을까 하는 생각을 했다. 그래서 해당 방법으로 진행했더니 내 로컬 환경에서는 나의 댓글들이 잘 작동했지만, 다른 팀원의 로컬 환경에서는 내 댓글들이 작동하지 않는다는 문제가 있었다.
그래서 고은채 튜터님을 찾아가 이 문제에 대해 여쭤보았다. 여쭤보니 .env 파일을 쓰는 경우에도 이렇게 되는 것이 맞고, 잘 접근하셨다고 하셨다. (오예!!!) 리액트로 배포할 때는 환경 변수들을 따로 지정할 수 있어서 그런 방식으로 배포를 하는 것이라고 하셨다.
따라서 .gitignore에 파이어베이스 환경 변수가 들어간 js 경로를 넣어줌으로써 문제를 해결할 수 있었다. 다만 다른 분들의 페이지에 있는 댓글 기능을 내 로컬에서 볼 수 없다는 점은 아쉬운 점이었다.

해결 못한 문제

• 댓글 기능에서 수정 시 프롬프트 창으로 수정할 내용을 적도록 했는데, 인풋창으로 바꾸는걸 시도하다가 시간이 없어 오늘은 실패했다. 어려워보이지 않는데 막혀서 답답하다. 조만간 꼭 다시 도전해서 해내야겠다.

간단한 문제

• 팀원분이 스크립트 파일 안에 스크립트 태그를 쓰셔서 오류가 나셨다. 스크립트 파일 내에서는 스크립트 태그를 쓰지 않아도 된다는 사실을 알려드리고 간단히 해결되었다.

🍪 새로 알게된 것

• .gitignore : Git의 root 디렉토리에 저장되어, Git Repository나 Staging Area에 추가되지 말아야 하는 폴더나 파일을 정의하는 파일.

🍴 느낀 점

프로젝트가 끝나고 발표를 하는 날이었다. 발표 준비에 시간을 많이 투자했고, 팀원들 앞에서 미리 시연도 해봤다.
다들 칭찬을 많이 해주시고 격려해주셔서 본 발표를 잘 해낼 수 있었다! 첫 프로젝트가 무사히 잘 마무리된 것 같아서 기뻤다. 튜터님의 피드백도 칭찬을 많이 해주셔서 다행이었다.
또한 다른 팀의 발표도 들어보니 조금은 부족했던 부분도 보여서 그런 부분들을 공부하고 싶다는 생각이 들었다. 아직 초반이라 당연하지만, 이렇게 다른 팀의 발표만 봐도 공부할 거리는 정말 산더미처럼 쌓인다.
(프로젝트 회고는 TIL이 아닌 곳에 주말 중 따로 작성할 예정이다. 다른 사람들의 회고를 참고해서 천천히 잘 쓰고 싶다.)

🍳 내일 할 일

• 팀 소개 페이지 미니 프로젝트 회고 작성