팀장으로서의 앞으로 회의 주제들.
1. 스타일 관련.
스타일드 컴포넌트를 쓸 것인지? 아닌지에 대한 토론이 먼저 필요할 듯 하다.
그 이후, 만약 스타일드 컴포넌트를 쓴다고 가정했을 경우, 글로벌 스타일을 좀 정해야할 듯 하다. 지금까지의 팀과제와는 달리, 웹페이지의 통일성을 위해서라도, 각종 양식들을 통일할 필요가 있어 보인다.
예를 들어, h1태그, p태그 라든가. 버튼의 생김새라든가... 그 외 등등.
2. 발제될 과제의 기능
발제될 과제의 기능을 어디까지 구현할 것인가에 대한 문제 역시 토론해볼 만 하다. 필수 구현 사항은 웬만하면 다 끝내놓고 싶으니, 이를 대비해 어디까지 구현할 것인지, 최적화는 할 것인지 등등에 대해 얘기해볼 필요가 있을 듯 하다.
3. 각자의 역할 배분.
역할의 배분 역시 신경 써야 할 부분이다. 발제될 과제의 어떤 부분을 어떤 사람이 맡을 지, 공용 스타일은 누가 작성할 것인지 등에 대한 논의가 필요해보인다.
개인 프로젝트 프로세스
import { useEffect, useState } from "react";
const useWeatherData = () => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [geoData, setGeoData] = useState(null);
useEffect(() => {
const getGeoData = async () => {
navigator.geolocation.getCurrentPosition((res) => {
setGeoData(res);
});
};
getGeoData();
}, []);
useEffect(() => {
if (!geoData) return;
const API_KEY = "092f098a38964e7400dacffa2b6caf6f";
const { latitude, longitude } = geoData.coords;
const fetchData = async () => {
try {
const response = await fetch(fetchUrl);
if (!response.ok) {
throw new Error("네트워크 반응이 좋지 않음.");
}
const data = await response.json();
setData(data);
} catch (error) {
setError(error.message);
console.error("Error fetching weather data:", error);
}
};
fetchData();
}, [geoData]);
return { data, error };
};
export default useWeatherData;
날씨를 openweather 로부터 가져오는 데 성공하였다. 이건 훅으로 따로 날씨를 받아온 걸 빼서, Home 페이지를 조금 정리해두었다.
const Home = () => {
const { data: weatherData, error } = useWeatherData();
const weatherNow = [];
if (error) {
console.log("Error:", error);
} else if (weatherData) {
weatherNow.push(weatherData.weather[0].main);
} else {
console.log("Loading...");
}
return (
이런 식으로. 제대로 날씨 데이터를 받아왔을 때만, weatherNow에 이것이 반영되게끔 코드를 짰다. 아니면 새로고침 무한 지옥에 빠지기 때문에...
이 로직을 짜는데 사흘이나 걸렸다. 비동기, 동기에 대한 이해가 아직 부족한 탓이었을까.
이제 남은 건, 날씨 데이터를 받아와서 날씨의 여부에 따라 각기 다른 아이콘을 화면에 표시해주는 로직을 만들어서, 사이트에 삽입하면 될 듯 하다.