https://github.com/thelight0804/World-weather-React
大学プログラミングサークル（GDSC）React 勉強会 振り返り
$$ \huge\textsf{\textbf{\color{#7caf4c}세계 도시 날씨 제공 서비스}} $$
<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0fb2db70-d069-479e-8cd8-3f44fba669d3/blank.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0fb2db70-d069-479e-8cd8-3f44fba669d3/blank.png" width="40px" /> 대학 개발 동아리 (GDSC DEU) React 초급반 스터디에서 진행한 실습 프로젝트입니다. 전 세계 주요 도시의 날씨를 실시간으로 확인할 수 있습니다.
</aside>
<aside> 👉 日本語はこちらをご覧ください。
</aside>
React를 사용한다면 Single Page Application(SPA) 개발이 한결 쉬워집니다. SPA는 페이지를 새로 고침하지 않고 필요한 데이터만을 업데이트하여 사용자에게 제공할 수 있는 기술입니다. 이를 통해, 사용자가 도시 버튼을 클릭할 때마다 날씨 정보를 바로 제공할 수 있게 됩니다.
코드 예시
<Button
//...
onClick={() => {
setCity(cities[index]);
setSelected(cities[index]);
setEngCity(cityToEnglish(city));
}}
>{city}</Button>
사용자가 버튼 중 하나를 클릭(onClick)할 때, 새로 고침하지 않고도 데이터(state)를 동적으로 업데이트하여 화면에 반영합니다.
프론트엔드를 처음 접하는 스터디 팀원들에게는 아직 CSS에 익숙하지 않아, 스타일을 적용하는데 복잡하고 어렵게 느껴질 수 있습니다. CSS 작업의 부담을 줄이기 위해 React Bootstrap을 선택했습니다.
코드 예시
import Button from 'react-bootstrap/Button';
//...
<Button
variant={`${city === selected ? 'outline-secondary' : 'secondary'}`}
//...
>{city}</Button>
variant props에서 조건부 렌더링을 사용하여, 선택한 도시에 따라 다른 스타일을 적용할 수 있게 했습니다. React Bootstrap을 사용함으로써 디자인 개발에 소요되는 시간을 줄일 수 있었고, 반응형 디자인을 통해 모바일 환경에서도 뛰어난 사용자 경험을 제공합니다.
Axios는 API 요청을 쉽게 처리할 수 있도록 도와주는 라이브러리입니다. OpenWeatherMap API로부터 날씨 데이터를 가져와 실시간으로 날씨 정보를 제공하는 데 Axios를 활용했습니다.
코드 예시
const API_KEY = import.meta.env.VITE_WEATHER_API_KEY; // 환경 변수
//...
useEffect(() => {
axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${engCity}&appid=${API_KEY}&units=metric&lang=ja`)
.then((response) => { // 요청을 성공한 경우
setTempature(response.data.main.temp); // 기온 설정
setWeather(response.data.weather[0].description); // 날씨 설정
})
.catch((error) => {
// 요청 중에 오류가 발생한 경우
})
}, [city]);
선택한 도시(city)값이 바뀔 때마다 새로운 날씨 데이터를 불러오기 위해 useEffect를 사용했습니다. Axios를 이용해 날씨 API에 GET 요청을 할 때는 API_KEY 환경 변수를 통해 실제 API 키가 노출되지 않도록 조치했습니다. 요청이 성공적으로 이루어지면, 응답받은 데이터로부터 온도와 날씨 정보를 업데이트합니다.
React Router를 사용하면, 다른 페이지로 이동할 때 전체 페이지를 새로 고침하지 않고도 필요한 부분만을 업데이트해 보여줄 수 있습니다. 웹사이트의 언어 변경 기능에 React Router를 사용했습니다.
코드 예시
import { Link } from 'react-router-dom';
//...
<div className='lenguage-box'>
<Link to='/World-weather-React'>KR</Link>
<Link to='/World-weather-React/ja'>JP</Link>
</div>
React Router의 Link 컴포넌트를 통해 언어 변경 시 다른 URL로 넘어가는 라우팅 기능을 구현했습니다. 이 방법으로 페이지 전체를 새로 고침하지 않으면서도 URL을 변경할 수 있게 했습니다.