soonitoon / momentom

Cloning google chrome extension 'momentum'

Hi there 👋 I'm hyuno Choi

• 🔭 I’m currently enrolled in Chungbuk National University
• 🌱 I’m currently learning
• 💬 Ask me anything!
• 📫 How to reach me: [email protected]

My major is psycologyΨ and Brain-Cognitive Engineering⚙🧠 I also interested in Programming! My first programming language is . I'm currently learing FrontEnd stack📚

Try my mobile Apps📱

Visite my...

• TIL📝 : https://soonitoon.github.io/TIL

• Blog📖 : https://velog.io/@soonitoon

• NPM : https://www.npmjs.com/~soonitoon

Status Bar

Language&Framework

Laptop

momentom's Issues

자바스크립트 리펙토링

바닐라 자바스크립트에서 웹팩으로 리펙토링하는 과정에서 나뉘어 있던 js 파일들을 index.js 파일에 잠시 모아놓았습니다. 기능별로 모듈화 작업을 진행합니다.

API Key 노출로 인한 보안 이슈

어떤 이슈인가요?

그동안 API 키들을 레포지토리 상에 그대로 노출한 상태로 페이지 호스팅을 진행했습니다. 비용과 관련된 민감한 API는 아니지만, 레포지토리 보안 강화를 위해 API키를 비공개 처리하겠습니다.

어떻게 해결하죠?

1. 로컬에서는 .env 파일로 API KEY들을 관리하고, 공개 저장소에서는 GitHub secrets를 사용해 키를 관리합니다.
2. dotenv 등의 모듈 사용을 위해 webpack 프로젝트로 리펙토링 합니다.
3. .env 파일을 통해 키를 관리해도 빌드 단계에서 키들이 하드코딩되므로, GitHub pages에서 Firebase hosting으로 호스팅 서비스를 변경합니다(빌드된 파일을 비공개로 저장합니다.).
4. 저장소 push & PR => ENV setting => webpack build => Firebase hosting 과정을 GitHub actions으로 자동화합니다.
5. 공개 저장소에 저장된 키들을 제거하기 위해 저장소 커밋 기록을 모두 삭제합니다.