[4주차 기본과제] 날씨 페이지 만들기

[eastlaw80]

✨ 구현 기능 명세

• 기본과제

✅ 기상 카드

1. 날씨에 따른 이미지
2. 온도
3. 체감온도
4. 최저,최고
5. 구름 %

✅ 일간 / 주간 + 지역(영어)검색

1. 날씨 검색 타입
   1. 오늘 → 하루
   2. 주간 → 5일 예보
2. 검색 기능
   1. /day/:area or /week/:area 와 같이 params로 검색한 지역을 넘겨줍니다. :: hint) useParams
   2. 이를 가져와 오늘/ 주간 날씨를 렌더링

✅ Outlet + Route

1. Outlet과 Route를 활용하여 페이지 내의 컴포넌트를 변경해주세요!
   1. 헤더는 고정
   2. 기상 정보 카드들만 경로에 따라 변경됩니다.
2. 에러페이지 처리도 필수!

🌼 PR Point

• Search컴포넌트에서 주간/일간 정보, 검색 지역에 관한 정보를 받은 뒤, 해당 정보를 이용해 navigate 합니다.
• WeatherCard 컴포넌트에서 useParams를 이용하여 주간/일간에 관한 정보 & 지역에 대한 정보를 가져와 API URL을 수정합니다.
• 가져온 데이터를 오늘이냐 주간이냐에 따라 다르게 처리하여 weatherData에 저장합니다.
• 해당 데이터를 이용하여 화면에 날씨 카드를 띄워줍니다.

🥺 소요 시간, 어려웠던 점

• 16h
• 초반에 route와 navigate를 사용하지 않고 api만 연결해서 그냥 일단 데이터 받아오는 걸 먼저 해보고 나서 괜찮은 줄 알았는데, route와 params를 이용해서 하려니깐 원래는 search에서 전부 처리한 뒤에 카드에 넘겨줘서 카드를 만들었는데, Params로 search에서 card로는 검색하고 싶은 타입과 정보만 넘겨준 뒤에 card에서 api를 연결하고 데이터를 받아서 카드 만드는 것까지 처리하는 형태로 변경하다 보니, 물론 api 연결을 연습하는 시간이라고 했을 수도 있지만 사실상 초반에 3시간은 날린거나 마찬가지였습니다...
• 무엇보다, 주간을 만들 때, 받아온 데이터를 오늘부터 5일에 맞게 적절하게 가공하여서 저장하는 것에서 많이 해멨습니다,,전에도 그랬지만 항상 데이터에 적절한 경로로 접근해서 원하는 것만 Id나 Index를 이용해서 가져오는 것이 가장 시간이 많이 드는 것 같습니다.
• 마지막으로, button type이 submit인데, 왜 검색을 누르면 입력했던 도시이름이 사라지는지...? 여러번 이것저것 해보다가 포기했습니다...

🌈 구현 결과물

2023-05-15.10.12.06.mov

[Dangpy]

그 검색 창에 적은 게 사라진다고 했던게 원래 input요소는 value 속성에 값이 바인딩되면 사용자가 입력한 값이 변경되어도 해당 값이 살아있는데 form안에서는 초기화 된다네!! 글서 만약 남아있게 하려면 useState로 값을 searchText 값을 저장해서 사용해야하지 않을까.... 생각헤,........!!

[Dangpy]

와웅ㅇ!! 바쁜데 완전나게 열심히 했고만!!!! 쪠고야!!!!!!!!! 너 이러다가 구글 스카웃 당해';;;동허나;;;

[yesongoget]

넘 깔끔헌디?!! 굿 최고다 아

[yesongoget]

오 이렇게 아예 한 컴포넌트에 switch문으로 case 나눠서 전달해줬구나,,,! 완전 새로운 방법인데?!

[yesongoget]

title 바꿔준 거 넘 센스굿~!!