7강 권상현 과제제출 #3
7강 권상현 과제제출 #3
Conversation
|
시간을 현시간 기준 12시간인지, 0시부터 12시간인지 몰라서 우선은 0시 시작으로 해놓았습니다 |
|
프사가 너무 웃겨요 .. |
|
감사합니다 하하 |
greetings1012
left a comment
greetings1012
left a comment
There was a problem hiding this comment.
수고하셨습니다! 코드를 잘 작성해주셔서 이전보다 리뷰 달 내용이 많지 않네요!
몇 개 생각할 거리를 적어 놨으니, 확인 후 Reply 부탁드립니다!
| const CurrentWeather = ({ weatherData, isLoading }) => { | ||
| if (isLoading) { | ||
| return <div>채워주세요</div>; | ||
| return <div>Loading...</div>; |
There was a problem hiding this comment.
Loading 대신 스피너나 간단한 스켈레톤 UI를 추가해보는 것도 좋을 것 같아요!
https://blog.makerjun.com/2f7a9818-df45-4eab-9768-b79d61b4d0ec
There was a problem hiding this comment.
네 보내주신 링크 확인해봤는데 유저입장에서 생각해보면 글로 대충 Loading... 써있으면 저라도 도중에 웹사이트 나갔을 것 같습니다.
사소하지만 중요한 부분인 것 같아요! 바꿔볼게요
| <div> | ||
| <DailyForecastWrapper> | ||
| {dailyData.map((item, index) => ( | ||
| <> | ||
| <DailyItem key={index}> | ||
| <div>{splitTime(item.time)}</div> | ||
| <div>{getWeatherDescription(item.code)}</div> | ||
| <div> | ||
| {Math.round(item.temperature)} | ||
| {degree} | ||
| </div> | ||
| </DailyItem> | ||
| </> | ||
| ))} | ||
| </DailyForecastWrapper> | ||
| </div> |
There was a problem hiding this comment.
크게 신경 안 썼던 부분이었습니다. 가독성을 낮추는 요소라고 분명히 생각들지만, 다른 문제점이 혹시 있을지 여쭤봅니다..
| export const GlobalStyle = createGlobalStyle` | ||
| html, body { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| `; |
There was a problem hiding this comment.
크롬 default 스타일 살짝의 여백을 없애려고 검색 후 한 스타일링 입니다
혹시 더 좋은 방법이 있다면 알려주시면 감사하겠습니다
| <CurrentWeather weatherData={weatherData} isLoading={isLoading} /> | ||
| {!isLoading && weatherData && ( | ||
| <> | ||
| <HourlyForecast weatherData={weatherData} /> | ||
| <DailyForecast weatherData={weatherData} /> | ||
| </> | ||
| )} |
There was a problem hiding this comment.
이 세 가지 컴포넌트가 모두 같은 props를 전달받고 있어요!
다시 말하면, 세 컴포넌트는 생긴 모양은 전부 다르지만 필요한 데이터의 형식은 같다고 말할 수 있겠네요.
weatherData와 type를 받아 type에 따라 data를 필요한 형태로 가공하는 hook(util) 함수를 만들고, 이를 각 컴포넌트에서 불러와 스타일만 다르게 적용시키는 방식을 사용하면 코드가 훨씬 깔끔해질 것 같아요!
| const splitTime = (timeString) => { | ||
| if (!timeString) return "time Error"; | ||
|
|
||
| const date = new Date(timeString); | ||
| const days = ["일", "월", "화", "수", "목", "금", "토"]; | ||
| const dayOfWeek = days[date.getDay()]; | ||
|
|
||
| const month = date.getMonth() + 1; | ||
| const day = date.getDate(); | ||
|
|
||
| return `${month}월 ${day}일 (${dayOfWeek})`; | ||
| }; |
There was a problem hiding this comment.
util에 포매팅 함수를 정의하는 파일을 만들어 정리해두면 좋을 것 같아요!
| time: dailyData.time[i], // 얘도 슬라이싱 | ||
| temperature: dailyData.temperature_2m_max[i], | ||
| code: dailyData.weather_code[i], |
| time: weatherData.hourly.time[i], // "2025-05-18T01:00" 슬라이싱? | ||
| temperature: weatherData.hourly.temperature_2m[i], | ||
| code: weatherData.hourly.weather_code[i], | ||
| }; |
| if (!timeString) return "time Error"; | ||
|
|
||
| const date = new Date(timeString); | ||
| const days = ["일", "월", "화", "수", "목", "금", "토"]; |
There was a problem hiding this comment.
각 요일을 상수화해서 별도 파일에 보관하면 좋을 것 같아요!
There was a problem hiding this comment.
const sunday = "일";
const monday = "월";
이런식으로 하라는 말씀이신가요?????
| const month = date.getMonth() + 1; | ||
| const day = date.getDate(); | ||
|
|
||
| return `${month}월 ${day}일 (${dayOfWeek})`; |
| const degree = weatherData.daily_units.temperature_2m_max; | ||
|
|
||
| const splitTime = (timeString) => { | ||
| if (!timeString) return "time Error"; |
There was a problem hiding this comment.
만약 데이터가 불완전하다면 에러를 사용자에게 보여주는 로직 아주 좋습니다 👍
3 participants
스크린샷입니다!