식당 추천 사이트 만들기

01 먼저 공공데이터 포털 홈페이지에 접속한 다음 API에서 식당 데이터를 골라보겠습니다. 메인 화면에서 스크롤을 내려 [카테고리]에서 [식품건강]을 누릅니다.

 

공공 데이터 포털 홈페이지

https://www.data.go.kr/index.do

 

02 API 목록에서 검색을 통해 '경기도 부천시_맛집'을 찾아 선택하여 상세 페이지로 이동합니다. 그런 다음 [오픈 API]를 누르고 [활용신청]을 클릭합니다. 활용 목적 등 간단한 신청 양식을 입력하고 [활용신청]을 눌러 마무리합니다.

 

03 API를 활용하려면 요청한 경기도 부천시_맛집의 API에 대한 키를 이용해야 합니다. 서비스 정보에 있는 키 2개를 잘 복사해두었다가 프롬프트에 활용합니다.

 

 

04 그러고 나서 해당 API 문서 페이지에 있는 내용을 Ctril + A나 전체 드래그를 해서 복사합니다. 이 내용을 그대로 커서 채팅방에 붙여 넣기를 하면 커서가 해당 내용을 보고 코드를 작성합니다. 커서에 이 페이지의 링크를 전달도 되지만, 이번에는 내용을 붙여넣기하는 방법을 사용합니다. 내용을 전달하면서 다음과 같이 부탁하여 음식점 데이터를 잘 출력하는지 확인합니다.

<복사한 텍스트>를 참고해서 음식점 데이터 10개만 출력해줄래? API는 <키1>, <키2> 둘 중 하나를 사용하면 돼. 되는 것을 사용해. 음식점 데이터는 HTML, CSS, Javascript를 이용해서 보여줘.

 

05 커서가 요청에 따라 경기도 부천시 맛집의 오픈 API에서 받은 데이터를 웹사이트에 보여주는 코드를 작성하고 파일을 열도록 안내합니다.

 

06 [Run]을 누르거나 커서에게 index.html 파일을 열어 달라고 요청합니다. 화면에 음식점 10개의 목록이 보입니다. 이 데이터는 커서가 임의로 만든 값이 아니라 여러분이 직접 활용 신청한 공공 데이터 오픈 API를 통해 불러온 경기도 부천시 맛집 데이터를 가져온 값입니다. 화면에 나온 맛집 중 하나를 검색하면 실제로 영업 중인 가게인 것을 확인할 수 있습니다.

 

07 반복되는 형식의 데이터는 리액트를 쓰는 것이 매우 효율적인 도구입니다. 맛집 목록처럼 구조는 비숫하지만, 그 안에 담기는 실제 데이터는 매번 달라지기 때문에 리액트를 쓰면 훨씬 효율적으로 만들 수 있습니다. 이번에는 프롬프트도 조금 더 구체적으로 작성하면서 커서에게 리액트를 활용하라고 요청합니다.

이제 리액트 기술을 이용해서 식당 정보가 보이게 해줘. 식당 리스트를 모두 로딩해두고, 죄초에 보이는 식당 리스트는 3열 4행으로 12개만 보이게 해줘, 맨 아래에는 [더 보기] 버튼을 누를 수 있게 해주고, 이 버튼을 누르면 12개씩 추가로 보여지게 해줘.

 

그러면 커서는 폴더를 만들고 컴포넌트를 생성하는 등 다양한 작업을 진행하여 코드를 작성합니다. 진행 중간에 [Run] 버튼이 나타나면 모드 눌러 허용하면서 화면이 나올 때까지 수행합니다.

 

08 마지막 단계에서 npm start를 실행할 때 오류가 발생할 수 있습니다. 리액트는 새 폴더를 만들어 작업을 진행하므로 반드시 생성된 해당 폴더 안에서 명령어를 실행합니다.

 

09 서버를 실행한 다음 localhost:3000에 접속해보면 식당 추천 사이트가 만들어진 것을 확인할 수  있습니다. 

 

10 이제 검색 기능만 추가하면 완성입니다. 커서에서 다음과 같이 부탁해서 검색 기능을 넣어 마무리합니다.

이제 검색 기능만 추가해줘. 식당 이름 또는 주소로 검색했을 때 검색한 식당의 리스트가 보이면 좋겠어. 검색어를 다 입력하고 [검색하기]를 누르면 검색하게 해줘.