일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- 스와이퍼시작
- javascript
- 네이밍컨벤션
- I’m an early
- React
- 스와이퍼옵션
- Api Key 숨기기
- 리액트
- swiper
- 중앙값 구하기
- productive-box
- @mixin
- todolist
- large files
- error
- 코드개선
- 슬라이드끝
- @include
- 투두리스트
- 최신 Yarn
- ttf to woff
- github
- exit code 128
- swiper적용
- 스와이퍼끝
- 코딩컨벤션
- woff 변환
- dotenv
- swiper-slide
- 슬라이드시작
Archives
- Today
- Total
그래도 해야지. 어떡해
[React] 환경변수로 API Key 관리하기 본문
2월에 날씨 앱을 만들다 중단된 프로젝트를 진행하면서 깃허브에 당당히 노출된 내 소듕한 Api Key를 숨기려고 한다.
1. dotenv 패키지 설치
// with yarn
yarn add dotenv
// with npm
npm install dotenv
2. .env 파일 생성
💡 프로젝트의 루트 디렉토리에 생성해야한다!
3. 생성한 파일에 API Key 추가
접두사 REACT_APP를 꼭 써줘야 환경 변수가 제대로 인식되니 주의
REACT_APP_API_KEY=your_API_KEY
4. .env 파일을 .gitignore에 추가
.gitignore 파일은 Git 저장소에서 버전관리를 원하지 않는 파일을 명시하는 파일이다. 이 파일에 기록된 파일은 Git으로 관리되지 않으며, 커밋에 포함되지 않는다.
.env 파일을 .gitignore에 추가하면, API 키가 소스 코드와 함께 저장소에 업로드되지 않고, 공개되는 것을 방지할 수 있다.
5. React 컴포넌트에서 API 키 사용하기
export default function SearchLocationWeather() {
... 다른 코드
const API_KEY = process.env.REACT_APP_API_KEY;
... 다른 코드
const handleSubmit = async (e) => {
... 다른 코드
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${API_KEY}&lang=kr`;
};
}
process.env.REACT_APP_API_KEY를 사용하여 .env 파일에서 API 키를 가져올 수 있다. 이렇게 하면 .env 파일의 변수가 자동으로 환경 변수로 설정되고, React 애플리케이션에서 사용할 수 있다.
6. 된다!
이제 당당하게 깃허브에 올리면 되겠다 :)
'개발일지 > React' 카테고리의 다른 글
[React] Todo List 만들기 (#3 로컬 스토리지 저장하기) (0) | 2023.06.19 |
---|---|
[React] Todo List 만들기 (#2 필터링 개선하기) (1) | 2023.06.17 |
[Yarn] 최신 Yarn 설치 및 설정하기 : ERROR 해결하기 / window (0) | 2023.06.14 |
[React] Todo List 만들기 (#1 개선사항 정리) (0) | 2023.05.23 |
Comments