공공 API를 활용한 인천 내 도서관 및 서점 정보 검색 Website 구현 1

근래 코딩 테스트 준비 하면서 코딩 문제만 풀다 보니 약간 내 손으로 직접 만드는 무언가를 하고 싶었다. 내 손으로 무언가를 직접 만들면 개발에 대한 재미와 흥미가 더 살아나지 않을까 싶어서 무엇을 할까 곰곰이 생각해보다 API 데이터를 활용한 간단한 웹 사이트를 만들어 봐야겠다 생각했다. 그래서 처음에는 날씨 앱을 만들까 생각하면서 날씨 API를 찾아봤는데 공공 데이터 포털에서 찾은 우리 동네 정보? 그거로 하려다가 결국 무슨 문제가 있는지 데이터가 잘 불러와지지 않아서 포기하고 다른 API를 보던 차에 인천광역시 도서관 및 서점 정보 API는 개인키 따로 발급 받을 필요 없이 쿼리 URL만 있으면 사용이 가능해서 바로 이거다 싶어서 갖다 썼다.

fetch API를 활용해 JSON 데이터를 받아보니 Promise 객체 안에 JSON 데이터가 잘 있는 것을 확인했다. 내가 이 웹 사이트를 구현하길 잘했다고 생각한 이유는 Promise가 무엇인지 잘 알게됐기 떄문이다. 단순히 Promise에 대한 유튜브 강의만 봤을 때는 아 대충 이런 거구나 싶었는데 막상 필요한 데이터가 Promise 객체로 전달되다 보니 본의 아니게 데이터를 브라우저 위에 띄우는 데 삽질을 엄청 했다. Promise는 또 Promise 객체를 return하며, Promise 안에 있는 데이터는 .then() 안에서만 사용이 가능하다. (누군가 이 객체 배열 데이터를 밖으로 꺼내 쓸 줄 아신다면 제발 저 좀 가르쳐 주세요.) 그래서 뭐 어떻게 했냐면 그냥 then 안에서 createElement 생성해서 노출하고 싶은 정보 다 끌어와서 innerHTML로 다 넣은 다음에 appendChild() 해서 부모 노드에 다 붙여서 정보 로딩했다.

Promise로 전달 주고 받고 안 하고 그냥 객체 배열 밖으로 빼서 저장 가능 했으면 비동기로 데이터 불러오는 그 몇 초도 안 기다리고 바로 바로 데이터를 브라우저에 노출하는 게 가능할텐데 일단 나는 then 밖에서 JSON 데이터 쓰는 법을 못 찾아서 MDN 예제 보고 이렇게 쓰는 건가 보다 하고 그렇게 작성했다.

원하는 지역구를 입력하면 해당 지역구 내에 있는 도서관 및 서점 이름만 노출하는 게 심심해서 상세 페이지도 만들어야겠다고 마음을 먹었을 때 아차 싶었던 건, 나는 이걸 js class를 컴포넌트로 만들어 렌더링을 한 게 아니라 그냥 늘 하던 그대로 HTML 마크업해서 만든 거라서 다른 상세 페이지를 만들려면 아예 새로운 HTML 파일을 만들어서 link를 걸어야 하나 싶었다. 그치만 처음부터 상세 페이지까지 만들겠다, 나는 SPA를 구현하겠다!!라고 마음 먹고 시작한 게 아니었기 때문에 약간 갈등을 하던 차에 지난번에 리액트 라우터를 썼던 게 생각나서 바닐라 자바스크립트로도 라우터 구현하면 되지! 라는 생각으로 검색을 해봤더니 역시 가능했다. (마법 같은 JS,, beautiful…awesome…)물론 하면서 왜 사람들이 리액트를 쓰고 뷰를 쓰고 앵귤러를 쓰는지 100% 이해함 ^^… 그래도 너무 좋았던 게 이렇게 해보고 나니까 왜 그런 라이브러리와 프레임워크들이 나왔는지 알게 됐고 약간 감사하면서 쓰겠구나 싶었다.

그래서 기본적으로 만든 html과 css, js 다 놔둔 상태에서 서점 이름을 누르면 a 태그 안에 href에 내부 주소를 써주고 router.js 안에 router 컴포넌트를 만들어 About 컴포넌트에 연결 시켜줬다. about에서는 기존에 서점 이름에 부여했던 id 값을 보고 맞는 가져와서 세부 정보를 렌더링 해줬다. 리액트는 렌더링 할 때 JSX를 쓰는데 사실 이것도 전엔 리액트 클론 코딩 할 때는 왜 쓰나 싶었는데 이번 웹 사이트를 구현하면서 왜 쓰는지 알겠더라… JS 안에서 HTML 요소를 쉽게 표현하려고 하다 보니 그런 아이디어가 나왔겠구나 싶었다. 안 그럼 계속 백틱으로 템플릿 연산자 쓰고 ${변수} 넣고 다 문자열 리터럴로 넣어줘야 되는데 이게 간단한 거 할 때야 그냥 하지만 컴포넌트 요소가 엄청 많아지면 귀찮고 가독성도 떨어지겠구나 싶었다.

그래서 이번 토이 프로젝트를 하면서 뼈저리게 느낀 건, 역시 똑똑한 사람들이 그런 프레임워크를 만들 때는 다 이유가 있는 거다… 뭐 그런 거? ㅋㅋㅋ 그런 교훈을 얻었고, 다음에는 리덕스를 사용해서 간단한 TODO APP를 만들어 보려고 한다.

일단 아직 나의 하소연은 끝나지 않았고 다음 장에서 간단한 코드 리뷰를 같이 해보도록 하겠다. 아듀!

코드가 궁금하다면 여기로 👉 BookApp github