[ 4주차 기본/심화 과제 ] 🌞수수의 기상예보⛱️ #10
Conversation
| ); | ||
|
|
||
| return data.data; | ||
| } |
There was a problem hiding this comment.
와 내가 딱 이렇게 API만 분리한 파일 만들어보고 싶었는데 이렇게 하면 앞으로 API 폴더 빼서 이렇게 하면 되겠다!!!! 기능 분리 최고
| @@ -0,0 +1,33 @@ | |||
| import React, { useState } from "react"; | |||
| import { getTodayWeather, getWeekWeather } from "../api/getWeather"; | |||
There was a problem hiding this comment.
단순히 훅에서 API 통신 구현하는게 아니라 API 통신 스크립트 따로 빼두고 함수명으로 비동기 호출하니까 훨씬 직관적인 것 같아 너무 깔끔하다!!! 코드리뷰 하는데도 이해하기 넘 좋아
| try { | ||
| setIsLoading(true); | ||
| const response = await getTodayWeather(area); | ||
| setIsLoading(false); | ||
| setTodayData(response); | ||
| } catch (e) { | ||
| setIsError(true); | ||
| } |
There was a problem hiding this comment.
트라이 캐치... 어싱크 어웨이트.. 킹갓지수 언니가 얘기해준거 명심하겠슴니다
| } | ||
| } | ||
|
|
||
| return { fetchTodayWeatherInfo, fetchWeekWeatherInfo, isError, isLoading, todayData, weekDatas }; |
There was a problem hiding this comment.
함수 넘겨주는건 생각도 못했는데!! 함수는 무조건 export import 형태만 생각했었거등 이렇게 넘겨주는게 더 훅스러운건가???_? useState 함수 props로 넘겨주는 것도 언니한테 배워서 유용히 썼었는데 결국 얘도 훅스니까 이렇게 넘겨주면 되겟군아 넘 좋아
There was a problem hiding this comment.
이 경우에는 함수안에서 변경된 변수들(isLoading, weekDatas, isError)도 다 사용이 되어야하니까, 함수 자체로 빼기 보다는 커스텀 훅을 사용하는 게 더 좋다고 판단했어용!! 경우에 따라 유용하게 사용하면 좋을 것 같오요~
| `; | ||
|
|
||
| const Title = styled.h1` | ||
| ${({ theme }) => theme.fonts.header}; |
| return ( | ||
| <WeatherCardWrapper> | ||
| <h1>{title}</h1> | ||
| <img src={weatherImg} alt={title} /> |
There was a problem hiding this comment.
리액트하면서 자꾸 alt 까먹게 되더라 잊지않고 꼬박꼬박 쓰는거 조하욥
| <Title></Title> | ||
| <Img></Img> | ||
| <Text></Text> |
There was a problem hiding this comment.
질문! 요런건 그냥 어차피 InnerHTML 안들어가니까
<Title/>There was a problem hiding this comment.
오 완전 맞아요!! 그렇게 고쳐야징
| if (isError) { | ||
| return <ErrorPage />; | ||
| } | ||
|
|
||
| return <>{isLoading ? <SkeletonTemplate /> : <WeatherCard weatherData={todayData} title={todayData.name} />}</>; | ||
| } |
There was a problem hiding this comment.
오오오 여기 리턴으로 isError 조건까지 한번에 처리해줄 수 잇지 아늘까?!
| if (isError) { | |
| return <ErrorPage />; | |
| } | |
| return <>{isLoading ? <SkeletonTemplate /> : <WeatherCard weatherData={todayData} title={todayData.name} />}</>; | |
| } | |
| return <>{isError? <ErrorPage /> : | |
| isLoading ? <SkeletonTemplate /> : <WeatherCard weatherData={todayData} title={todayData.name} />}</>; | |
| } |
요런 늑낌스로.. 소심한 제안
There was a problem hiding this comment.
이 방법도 죠타! 보통 공식문서들에서
if (isError) {
return <ErrorPage />;
}
이렇게 많이들 쓰길래 이렇게 표현해보았는데, 숭희 제안대로 써보는 것도 좋은 것 같아용!!
| <Input type="text" placeholder="영어로 도시명 ex) Seoul" onChange={getCity} /> | ||
| <Button type="button" onClick={searchWeather}> | ||
| 날씨 검색 | ||
| </Button> |
There was a problem hiding this comment.
질문!! 여기 부분 Search 컴포넌트로 따로 빼둔것 같은데 그 컴포넌트 안쓴 이유가 있을까유?? 내가 그 컴포넌트의 쓰임을 못찾은건가!??!
There was a problem hiding this comment.
헤헤 따로 뺐다가 의존성이 높은 것 같아서 다시 합쵸보림! 눈썰미 짱이다..!!
| &:focus { | ||
| outline: none; | ||
| border: none; | ||
| } |
| <p> | ||
| 최저/최고 | {main?.temp_min}/{main?.temp_max} | ||
| </p> | ||
| <p>구름 | {clouds?.all}</p> |
There was a problem hiding this comment.
| 이거 이런식으로 하는구나!
나는 보통 after: content 처리해서 가상선택자로 만들어주거든!
There was a problem hiding this comment.
오오 이거 좋다!! 오빠는 before after 활용을 참 잘하는 것 같아용!
|
|
||
| if (isError) { | ||
| return <ErrorPage />; | ||
| } |
There was a problem hiding this comment.
뭔가 이렇게 미리 돌리는게 좋은가?!
뭔가 가독성 적으로는 early return 같은 느낌이라 좋은거같네!
나도 한번 이렇게 짜봐야겟다 나는 맨날
isError ? : isLoading ? : 약간 이런식으로 했거든!
There was a problem hiding this comment.
오호! 둘 다 좋은 방법인 것 같긴 해용! 공식 문서들에서 보통 저렇게 미리 돌리길래 따라해봐쎠!
| //오늘 날씨 조회 | ||
| export async function getTodayWeather(area) { | ||
| const data = await axios.get( | ||
| `https://api.openweathermap.org/data/2.5/weather?q=${area}&appid=${import.meta.env.VITE_APP_WEATHER}&units=metric`, |
There was a problem hiding this comment.
나도 다 하고 깨달았는데 weather 과 forecast 만 변수처리해주면 이 api 도 하나로 묶을 수 있을거같아!
✨ 구현 기능 명세
기본 과제
✅
기상 카드✅
일간 / 주간 + 지역(영어)검색✅
Outlet + Route심화 과제
✅
스켈레톤 UI✅
커스텀훅으로 데이터를 받아옵시다!🌼 PR Point
setWeatherImg(WEATHER_TYPE.filter((w) => w.description === weatherData?.weather[0]?.description)[0]?.imgURL);필터링을 통해서 description이 동일한 imgURL을 가져왔어요.
return { fetchTodayWeatherInfo, fetchWeekWeatherInfo, isError, isLoading, todayData, weekDatas };커스텀 훅을 이용해서 데이터 패칭 함수들과 데이터, 에러여부와 로딩여부를 관리했어요.
const { area } = useParams();useParams를 이용해서 도시의 값을 읽어들였어요.
🥺 소요 시간, 어려웠던 점
6h🌈 구현 결과물
2023-05-12.4.38.46.mov