🔒 .env 파일에서 Key 관리
1. .env 파일 생성
프로젝트 루트 디렉토리에 .env 파일을 생성
VITE_API_KEY=your_api_key_here
VITE_API_URL=https://api.example.com
2. 네이밍 규칙
Vite에서 환경 변수를 클라이언트 코드에서 사용하려면 반드시 VITE_ 접두사를 붙여야 한다.
- VITE_API_KEY=abcdef123456 (O)
- API_KEY=abcdef123456 (X - 클라이언트 코드에서 접근 불가)
3. 환경 별 .env 파일
다양한 환경에 따라 다른 .env 파일을 사용할 수 있다.
- .env - 기본 파일, 모든 환경에서 로드
- .env.local - 로컬 환경 변수, git에서 무시해야 함
- .env.development - 개발 환경
- .env.production - 프로덕션 환경
- .env.test - 테스트 환경
4. 환경 변수 사용하기
React 코드에서는 다음과 같이 환경 변수에 접근할 수 있다.
// Weather.jsx 예시
import React, { useEffect } from 'react'
const Weather = () => {
useEffect(() => {
// 환경 변수 사용
const apiKey = import.meta.env.VITE_API_KEY;
const apiUrl = import.meta.env.VITE_API_URL;
console.log('API Key:', apiKey);
console.log('API URL:', apiUrl);
// API 호출 등의 로직...
}, []);
return <div>날씨 API 활용하기</div>
}
export default Weather
5. 보안 참고사항
- .env.local, .env.*.local 파일은 .gitignore에 추가하여 API 키와 같은 민감한 정보가 저장소에 공개되지 않도록 해야 한다.
- 브라우저 코드에서 사용되는 모든 환경 변수는 최종 빌드에 포함되므로 정말 비밀로 유지해야 하는 값은 서버 측에서만 사용한다.
☀️ Weather Api
Current weather and forecast - OpenWeatherMap
Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations. how to obtain APIs (subscriptions w
openweathermap.org
⬆️ 유로도 있지만 무료로도 사용 가능
위도 경도, 나라 등을 설정해서 원하는 나라의 날씨 값을 호출해 결과값을 표시할 수 있다.
📃 WeatherPage.jsx
🔗 React Router - useSearchParams() 사용
- useSearchParams는 URL의 쿼리스트링을 읽거나 수정할때 사용
- URL이 /weather?city=seoul이면 city=seoul 값을 가져올 수 있다.
import { useSearchParams } from 'react-router-dom'
- setSearchParams를 통해서 버튼 클릭시 URL을 바꿔서 상태 관리할 수 있다.
const [searchParams, setSearchParams] = useSearchParams()
const city = searchParams.get('city')
console.log('city:', city)
🧠 URL이 곧 state역할
☎️ useEffect + aync/await => 비동기 통신
import React, { useEffect, useState } from 'react'
...
useEffect(() => {
const fetchWeatherData = async () => {
try {
let data
if (city) {
data = await getCountryData(city)
} else {
data = await getCurrentData()
}
console.log('날씨 데이터 ---:', data)
setWeatherData(data)
} catch (error) {
console.error('날씨 데이터 가져오기 실패:', error)
}
}
fetchWeatherData()
}, [city])
console.log('날씨 데이터:', weatherData?.cod)
컴포넌트가 렌더링될때 (useEffect), 비동기(async/await) API를 호출해 날씨 데이터를 가져온다.
await getCurrentData() 또는 await getCountryData(city)처럼 서버 요청이 끝날 때까지 기다렸다가 결과를 저장한다.
👉🏻 useEffect안에 직접 async를 못걸기때문에, 함수 하나를 만들어 호출하느 냎턴을 사용한다.
⛓️ 조건부 렌더링
<div className={css.tamperature}>
<p>{weatherData?.main.temp} ℃</p>
<p>
<img
src={`http://openweathermap.org/img/wn/${weatherData?.weather[0].icon}.png`}
alt=""
/>
</p>
</div>
weartherData가 없을때 오류를 막기 위해서 옵셔널 체이닝을 사용한다.
[JS] 옵셔닝 체이닝(?.)은 언제 사용하면 좋을까? (feat. 점표기법)
옵셔닝 체이닝(?.)객체의 속성이나 메서드가 존재하는지 확인 후 접근할 때 사용 만약 속성이 null 또는 undefind라면, 에러를 발생시키지 않고 undefined를 반환=> 안전하게 객체의 속성 접근 const user =
recordoftheday.tistory.com
옵셔널 데이터 호출을 통해 비동기 데이터가 늦게 올 때 에러를 막아준다.
지난주 금요일, 강사님이 내주신 과제에 대해 칭찬을 받았다. 이번 과제는 용돈기입장을 만드는 것이었고, 나는 블로그에 과정을 정리하며 하나하나 개념을 다듬어갔다. 아직 실력은 부족했지만, 노력한 부분을 인정받은 것 같아 후후, 괜히 뿌듯했다. 칭찬을 받으려고 한 건 아니지만, 더 열심히 해야겠다는 마음이 커졌다🐋💟
'💡 URECA > 🗒️ 스터디 노트' 카테고리의 다른 글
[URECA] MogoDB + 회원가입 (1) | 2025.04.30 |
---|---|
[URECA] Day64 React API 공공데이터 (0) | 2025.04.29 |
[URECA] Day 62 React Proj WalletWatcher (2) | 2025.04.25 |
[URECA] Day 60 React Redux (0) | 2025.04.24 |
[URECA] Day59 React 총정리 🐳 (0) | 2025.04.23 |