[URECA] Day63 React Weather API

🔒 .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

https://openweathermap.org/

Current weather and forecast - OpenWeatherMap

⬆️ 유로도 있지만 무료로도 사용 가능

 

 

위도 경도, 나라 등을 설정해서 원하는 나라의 날씨 값을 호출해 결과값을 표시할 수 있다.

---

📃 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} &#8451;</p>
          <p>
            <img
              src={`http://openweathermap.org/img/wn/${weatherData?.weather[0].icon}.png`}
              alt=""
            />
          </p>
        </div>

weartherData가 없을때 오류를 막기 위해서 옵셔널 체이닝을 사용한다.

https://recordoftheday.tistory.com/entry/JS-%EC%98%B5%EC%85%94%EB%8B%9D-%EC%B2%B4%EC%9D%B4%EB%8B%9D%EC%9D%80-%EC%96%B8%EC%A0%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%A9%B4-%EC%A2%8B%EC%9D%84%EA%B9%8C

[JS] 옵셔닝 체이닝(?.)은 언제 사용하면 좋을까? (feat. 점표기법)

 

옵셔널 데이터 호출을 통해 비동기 데이터가 늦게 올 때 에러를 막아준다.

 

지난주 금요일, 강사님이 내주신 과제에 대해 칭찬을 받았다. 이번 과제는 용돈기입장을 만드는 것이었고, 나는 블로그에 과정을 정리하며 하나하나 개념을 다듬어갔다. 아직 실력은 부족했지만, 노력한 부분을 인정받은 것 같아 후후, 괜히 뿌듯했다. 칭찬을 받으려고 한 건 아니지만, 더 열심히 해야겠다는 마음이 커졌다🐋💟