본문 바로가기

전체 글

(85)
2023.12.29 기록 (Javascript 환경에서 API key를 github으로 유출하지 않는 방법) 실패는 반드시 학습의 교본이 된다. 라는 말은 아마 이번같은 상황에 사용하는 것 같다. firebase의 storage 기능을 통해 자료를 업로드던 도중 갑자기 모든 파일들이 갑작스레 불러오기가 실패된 것을 확인했다. console창을 살펴보니 오류코드는 402 결제가 요구된다는 내용이었다. 서둘러 storage의 사용량을 체크했고 다음과 같았다. 순간적으로 대역폭이 치솟아서 무료로 사용 할 수 있는 부분의 할당량을 넘어섰다. 물론 적은 하루 1GB 의 제한량을 뚫는 것도 어렵지만, 거기서 조금 더 사용한다고 하더라도 크게 요금은 부과되지 않는다 (결제 세팅을 해놓지 않았으면 기본적으로는 무료 사용량 초과시 결제하지 않으면 기능을 정지하게 된다.) 프로젝트의 마무리 작업중 일어난 작은 사건으로 생각했으나..
firebase API key 재생성 관련 팀 프로젝트 작업을 진행할 때 보통은 github를 통해 협업을 진행하게 되는데 firebase의 API key를 비공개 하지 않은 채로 업로드를 할 경우 다음과 같은 email을 받게 된다. 당신의 API key가 유출된 상태로 특정 URL에서 발견되었습니다. 이미 유출된 Key를 감추는 건 별다른 효과가 없을 것 같기에 API key 를 재발급 받는 방법을 알아보고자 합니다. 받은 메일의 내 콘솔로 이동 항목을 클릭합니다. 좌 상단에 ≡ (탐색메뉴) 를 클릭하면 탭이 열리는데, 고정된 제품 카테고리 의 API 및 서비스 항목에서 사용자 인증 정보 탭을 클릭합니다. 작업 탭 밑의 아이콘를 누르면 API 키 수정 항목을 클릭하면 들어가는 페이지에서 키 재생성을 누르면 고유 API key를 재발급받는다. ..
내일배움캠프 첫번째 미니프로젝트를 마치며. 조 이름은 stage, 프로젝트명은 Our_stage 4일이라는 짧았던 시간동안 준비한 과제였다. 우리에겐 경력자는 존재하지 않았고 수업 내용들을 곱씹을 시간이 제법 부족했다. 2조에 배정되었고 나는 자연스레 팀장이 되었다. 우리중엔 notion을 사용할 줄 아는 사람도, figma를 사용 할 줄 아는 사람도 firebase를 사용 할 줄 아는 사람도 없었다. 오히려 좋았다. 지금이 가장 저점이니 지금부터 우리는 배워나가면 된다. 라는 마음으로 시작했다. 고집을 조금 더 부렸다. 나를 포함한 5명의 팀원들에게 firebase를 담당하게 해달라 부탁했다. 팀원들은 흔쾌히 수락해주었다. 이유인 즉 확실하게 역할을 분담하면 시간이 단축되리라 생각했기 때문이다. 이러한 업무분배 과정을 S.A( Starting ..
2023.12.28 기록 (firebase db의 CRUD) 일주일, 아니 4일동안 프로젝트를 마무리하며 많은 일들이 있었다. 처음 써보는 Firebase와 익숙해지기 위한 몸부림부터, 수많은 undefined와의 싸움들이 그와 같다. 어제 그러니까 27일은 거의 잠을 자지 않았다. 아니 못했다는 게 맞는 표현일 것 같다. Firebase의 DB를 이용한 CRUD 기능중 Update기능과 Delete기능과의 싸움이 계속됐다. deleteDoc 이 최우선이었다. 등록된 Comment를 삭제하는 방식만 제대로 구현해낸다면 수정 즉 update하는 기능은 따라오는 것이기 때문이었다. 오류의 중심에 있는것은 무작위로 생성되는 ID였다. 처음 addDoc을 진행 할 때, 특정한 ID를 기입하지 않았기 때문에 이 부분은 Firebase자체에서 무작위 ID를 등록하게된다. 저..
2023.12.27 기록 (foreach와 map, 그리고 firebase) 어제에 이어서 오늘은 firebase의 데이터 수정관련 옵션을 사용해보도록 했다. 가장 먼저 파이어 베이스의 CDN기능을 사용해서 진행했는데, 공식문서에서 존재하는 대부분의 기능은 npm으로 진행했기 때문에 그 부분에 있어서 이해하는 데 가장 큰 어려움이 있었다. 고민한 시간이 아까울 정도로 해결방법은 굉장히 간단했다. 예를 들어 공식문서 Cloud Firestore의 데이터 읽기 항목에 있는 예제는 다음과 같다 이 부분에서 CDN을 사용하는 유저들은 어떻게 적용해야할까 막막한데 그냥 이 부분을 다음과 같이 수정해주면 된다. import { doc, setDoc, Timestamp } from 'https://www.gstatic.com/firebasejs/10.4.0/firebase-firestore...
2023.12.26 기록 (firebase hosting) 파이어 베이스 DB를 만져보며 이것 저것 다루던 도중, 호스팅 기능을 살펴보게 되었다. 가장 먼저, 이번에 맡게 된 프로젝트는 총 6개의 페이지를 가진 프로젝트이기에 각 페이지간의 유기적인 활용이 가능하면 싶었다. 로컬환경에서는 무리없이 실행되었기에, 가장 먼저 생각한 것은 프로필 사진 등이 담겨있는 스토리지에 html 파일을 넣어두고 실행하는 방법이었는데, 이 방법을 실행하기 전 호스팅 기능의 권유로 살펴보게 되었다. 생각보다 엉뚱한데서 일이 터졌는데, 캐시가 꽉차서 브라우저를 받아오지 못하는 환경과, 경로를 잘못 설정해서 불러오지 못하는 상황이 번갈아가면서 터져서 생각보다 까다로운 설정이었다. hosting 기능을 설치 후, 겹쳐지는 index파일의 이름을 피하기 위해 e를 하나 더 붙였더니, 이후 ..
2023.12.25 기록 ( callback, promise, async, await) 서버와 통신을 배우며, 비동기 과정을 학습하여 javascript가 동작하는 순서를 익히는 것도 필요해졌다. 가장먼저 callback 함수라는 것의 이론정리가 필요했다. JS엔진은 기본적으로 함수를 호이스팅, 출력, 호이스팅 된 함수 출력, 서버요청, 출력 이런방식으로 진행된다. console.log('1'); //setTimeout(function(){ //console.log(2); // }, 1000) setTimeout(()=>console.log('2'), 1000); console.log('3'); *화살표 함수는 원칙적으로 호이스팅 되지않는다. setTimeout이 비동기적으로 작동하기 때문에 event queue에서 대기하게 되는데 이 부분이 화살표 함수가 호이스팅 된 탓인지 착각할 수 있..
2023.12.23 기록 (JS 객체와 배열 1. 생성자 함수) 26일 Firebase의 구현을 위해서는 for문과 배열내의 for문, 그리고 객체에 관해서 조금 더 깊은 이해가 필요했다. 학습 중 가장 먼저 생성자 함수에 대한 정보를 정리해봤다. 생성자 함수의 함수명은 항상 대문자로 작성하고, 호출시에는 new를 붙여서 진행한다. function Reverse1999(name, role) { this.name = name; this.role = role; this.introduce = function () { return `캐릭터 ${this.name}은 ${this.role}의 역할을 수행합니다!`; } } const question1 = new Reverse1999('void', 'support'); const question2 = new Reverse1999(..