- 타입스크립트로 리액트 앱을 만들어 보기로 하였다.
🍄 npx create-react-app my-app --template typescript- 그리고, 평소에 사용하고 싶었던 카카오 지도 API나 캐러솔 라이브러리인 swiper를 사용하기로 하였다.
- 사용하고 싶은 라이브러리의 기능들을 조합하여 장소를 검색하고, 이를 캐러솔로 보여주며 클릭 시 해당 위치의 지도를 보여주는 컨셉의 사이트를 만들기로 하였다.
- 만들다보니, 더 여러가지 기능을 추가하기로 하였고, 로드뷰 기능과 검색 결과를 카테고리별로 묶어 개수를 파이 차트를 통해 표현하는 기능도 추가적으로 구현하였다.
- 미디어 쿼리를 이용하여 모바일 환경에서도 잘 보이도록 설정하였다.
🍇 ex. PC 환경에서 화면에 캐러솔 카드는 3개가 보이지만, 모바일 환경에서는 1개만 보인다.- 만든 토이 프로젝트는 vercel을 통해 배포를 진행하였다.
사이트 소개
- 처음 사이트에 접근하면 보이는 화면이다.
- 검색창이다. 버튼을 누르거나 Enter를 입력하여 장소를 검색한다.
- 검색 결과를 캐러솔로 확인할 수 있고, 아래에 검색 결과를 카테고리별로 센 파이 차트를 확인할 수 있다.
- 캐러솔 하나를 선택하여 클릭하면, 해당 장소를 지도에서 확인할 수 있다. (해당 위치에 마커가 생겨난다)
- 해당 장소의 로드뷰 역시 확인할 수 있다.
후기
-
차트를 구현하기 위해서 npmjs에서 라이브러리를 찾아보았다. 평소에 내가 라이브러리를 선택하는 기준은 다운로드 횟수(Weekly Downloads)인데, recharts가 해당 기능에서 가장 많은 다운로드 횟수를 자랑하고 있었다.
-
그러나, recharts는 react 18 버전에서는 사용할 수 없었다. (16이나 17에 호환되는 라이브러리였다)
-
대신에 apexcharts를 통해서 차트를 표현하였다.
-
카카오 지도 API를 사용하였는데, 샘플 코드가 매우 잘 나와있어서 생각보다 구현이 어렵지는 않았다.
-
타입스크립트를 사용하면, IDE에서 객체 프로퍼티의 자동완성이나 에러를 미리 알 수 있는 등의 장점이 있지만(유지 보수에 좋다), 초기에 interface와 같은 세팅이 필요하여 초기 세팅에는 시간이 더 필요하였다.
-
타입스크립트가 바로 내장된 모듈이 있고, 별도로 추가적인 설치가 필요한 (@types/ 으로 시작하는 라이브러리) 모듈이 있었다.
🫑 ex. styled-components를 타입스크립트로 사용하기 위해서는 @types/styled-components 역시 설치해야 한다. (둘 다 설치가 필요하다)
-
카카오 SDK를 사용하는데, 스크립트 태그에 API 키가 들어가야 했고, 렌더링된 사이트에 API키가 노출되었다. 문제가 있지 않을까 생각해서 검색을 해봤지만, 카카오 개발자 페이지에서 API가 사용될 URL을 설정하기도 하는 등 크게 문제가 없다는 것을 알았다.
-
크롬 개발자 도구를 통해 모바일 화면을 보며 어색한 부분에 미디어 쿼리를 적용하여 모바일 환경에서도 사이트를 이용할 수 있도록 하였다.
🍓 링크
