포트폴리오를 만드는 중, 페이지 이동을 위한 탭 메뉴에서 현재 경로에 맞는 메뉴에만 다른 스타일을 적용하려고 했습니다.처음에는 location.pathname을 사용해 각 경로에 맞춰 active 클래스를 추가하려 했었습니다.그러나 이렇게 하면 경로를 추가하거나 변경할 때마다 해당 경로가 맞는지 일일이 확인해야 하는 번거로움이 있었습니다.예를 들어 /home 경로로 이동할 때는 pathname에 'home'이 포함되어 있는지를 확인하는 조건문을 넣고, 또 다른 경로가 추가되면 그에 맞춰 코드를 수정해야 했습니다.그러다가  React Router에서 제공하는 NavLink 컴포넌트를 알게 되었습니다.이 컴포넌트를 사용하면 현재 경로에 맞는 메뉴에 자동으로 스타일을 적용할 수 있었습니다.NavLink는 내..

↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓https://github.com/GangHyun95/weather GitHub - GangHyun95/weather: OpenWeather ApiOpenWeather Api. Contribute to GangHyun95/weather development by creating an account on GitHub.github.com 저번 포스팅에서 프로젝트를 마무리하려 했지만, Vercel로 배포한 후 이미지 관련 문제가 발생해서 이번에 추가로 작성하게 되었습니다.프로젝트를 Vercel로 배포한 후, 데스크탑에서는 아이콘이 정상적으로 보였지만, 모바일 기기에서는 아이콘이 뜨지 않고 alt 텍스트만 출력되는 문제가 발생했습니다..

프로젝트를 진행하면서 가장 고민했던 부분 중 하나는 검색어 입력을 어떻게 처리할지였습니다.OpenWeatherMap API에는 도시 이름과 국가 코드를 함께 입력하거나, 위도와 경도 좌표, 도시 ID, 우편번호로 검색할 수 있는 방법이 있지만, 사용자는 이런 복잡한 방법으로 검색을 하지 않기 때문입니다.그러다가 OpenWeatherMap의 Direct Geocoding API를 찾았고, 이 API에선 검색어가 포함된 여러 도시와 그 좌표가 함께 반환되었습니다.이를 활용해 검색어에 맞는 도시 리스트를 보여주고, 선택된 도시의 위도와 경도로 Recoil에 저장된 location 값을 변경하는 방식으로 구현했습니다.그리고 시간대별 날씨를 보여주는 HourlyForecast 컴포넌트를 추가했고, 기존에는 단일 ..

우선 이전 포스팅에서 사용자가 위치 동의를 거부하거나, 위도와 경도를 제대로 받아오지 못했을 때를 대비해서 recoil 기본값으로 서울 강남 좌표를 설정했었는데요.// 개선 전 코드import { atom } from "recoil";export const locationState = atom({ key: "locationState", default: { lat: 37.5145, lon: 127.0495 },});이렇게 하니 처음 페이지가 열릴 때 무조건 서울 강남 정보가 렌더링됐다가, 나중에 현재 위치로 바뀌는 상황이 있었습니다.위도와 경도를 성공적으로 받아왔을 때도, 서울 강남이 먼저 표시되고 나서야 현재 위치로 변경되는 부분이 조금 부자연스러웠습니다.그래서 이 부분을 위도와 경도를 먼저 ..

이번 프로젝트에서는 OpenWeatherMap API를 활용하여 날씨 정보를 확인할 수 있는 웹을 만들어보려고 합니다.기본적으로 사용자의 현재 위치를 기반으로 해당 지역의 날씨 정보를 제공할 계획입니다. 날씨 정보를 얻기 위해서는 위도와 경도가 필요해서 Geolocation Web Api를 사용하여 위도와 경도를 받아왔고, 위도와 경도 정보는 프로젝트 내 여러 곳에서 활용될 거 같아서 Recoil을 사용해 전역으로 상태를 관리했습니다.사실 Context API가 아닌 다른 상태 관리 라이브러리를 사용해 보고 싶어서 한 번 사용해 봤지만, 위도와 경도 저장은 너무 간단한 작업이라 그냥 Context API로 교체할지 고민 중입니다.😅 또 OpenWeatherMap API에서 한국 도시명이 제공되지 않았었..

↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓https://github.com/GangHyun95/youtube GitHub - GangHyun95/youtube: with typescriptwith typescript. Contribute to GangHyun95/youtube development by creating an account on GitHub.github.com 프로젝트에서 VideoDetail 페이지로 이동할 때 useNavigate를 통해 데이터를 전달하는 방식을 사용했었는데요.VideoCard와 RelatedVideoList에서 사용하는 데이터의 출처가 다르다 보니 문제가 발생했습니다.이번 포스팅에서는 이 문제를 해결하는 과정과 VideoCard에..