- 이번의 토이 프로젝트는 동적 라우팅과 grid로 화면을 구성하는 것에 중점을 두었다.
- 공공데이터의 open API를 찾아보는 중, 숲속의 식물에 대한 데이터를 제공하는 산림청 숲에 사는 식물정보를 사용하기로 마음을 먹었다.
- 이 사이트에 사용된 폰트는 마포구의 마포꽃섬이다.
- cors 문제 때문에 프록시 설정이 필요하였고, netlify를 통해서 배포하였다.
사이트 소개
- 초기 화면은 다음과 같다.
- 검색 기능과 홈 버튼, 그리고 식물들의 데이터가 grid layout으로 보여진다.
- 이름을 기준으로 숲속의 식물을 검색할 수 있습니다.
- 마우스를 올려 놓으면, 해당 식물의 짧은 이야기가 나타납니다.
- 그리고 식물을 클릭하면, 자세한 식물에 대한 정보와 더 많은 사진을 볼 수 있습니다.
시행착오
-
grid 레이아웃을 사용하였는데, 모바일 환경에서는 그리 효과적이지 않은 레이아웃인 것 같다.
🍉 따라서, 이 웹사이트는 모바일 환경은 신경쓰지 않고 PC를 기준으로 스타일을 작성했다. -
parameter를 이용하여 동적으로 라우팅을 하였다.
-
parameter를 이용하여 식물의 디테일한 정보를 보여주는 페이지에서 식물의 고유 id number를 받았는데(id number로 동적 라우팅을 하였다), 이 컴포넌트에서 다시 해당 식물의 데이터를 fetch를 하는 것은 트래픽을 증가시킬 것이 우려되었다.
-
하지만, 식물의 디테일 컴포넌트에서 표시할 데이터의 정보가 많기에 이 모두를 parameter로 전달하는 것은 적절하지 않다고 생각되어 redux를 사용해 전역 상태로 데이터를 저장하여 데이터를 불러오는 방법을 생각하였다.
-
그래서, 처음의 목록에서 리스트 식물들의 데이터를 모두 가져온 뒤 데이터를 redux의 전역 상태에 저장하고, 전역 상태에서 id number와 같은 데이터를 filter해 오는 방식을 사용했다.
🍎 open api의 하루 트래픽 제한은 1000 이었다.
-
다만, redux를 사용하면서 API 비동기 호출에 문제가 발생하였고, redux에서 API 비동기 호출을 위해서 미들웨어 라이브러리인 redux-thunk를 추가적으로 사용하였다.
-
open API를 불러오는 과정에서 cors 문제가 발생했다.
-
일부 open API는 보안상의 문제로 클라이언트 앱에서 불러올 수 없는 문제가 있었다.
-
이를 해결하기 위해서, http-proxy-middleware 를 사용하여 프록시 설정을 하였다.
-
XML을 사용하기 위해서 데이터를 파싱하기 위해서 react-xml-parser 라이브러리를 사용했다.
🥛 XMLParser를 통해서 string 형태의 데이터를 파싱하고, children 내부의 데이터에서 내장함수 getElementsByTagName으로 태그 이름을 기준으로하여 데이터를 가져왔다.
- CSS는 styled-components를 사용하여 구성하였다.
링크
🍎 깃허브 : https://github.com/citron03/green-in-the-forest
🍎 배포한 사이트의 링크 : https://green-in-the-forest.netlify.app/
