웹에서 작동하는 검색기능 만들기
개발 비전공자의 ERP시스템 제작기
앞선 개발 진행 과정에서 프론트화면에서의 전체적인 틀은 어느 정도 완성이 되었습니다. ERP기능 중 제품을 선택하는 화면에서 직원들이 편하게 제품을 등록할 수 있도록 검색기능이 필요했습니다.
검색기능을 GPT코딩으로 만들기 전에 다른 웹사이트에서 이와 유사한 기능이 있는지 리서치를 합니다.
그림1) 해외 웹사이트 나라 선택 필드해외 쇼핑몰등에서 배송지를 선택할 때 검색기능이 있으며 검색된 결과를 비동기 방식¹으로 노출시켜 주는 검색필드를 찾았습니다.
이를 웹브라우저의 개발자도구를 통해 소스를 가져옵니다.
이제 어느 정도 짐작이 되시나요?
네 우리는 GPT에게 가져온 소스를 던지고 우리 서비스에 맞게 고쳐달라는 요청을 해야 됩니다.
그림2) 해외 웹사이트 나라 선택 필드 HTML이번엔 조금 다르게, 코드를 던져주고 먼저 구조를 분석해 달라고 요청을 해보았습니다.
"내가 지금 주는 HTML코드는 웹에서 검색하고 입력할 수 있는 필드야 해당 필드를 먼저 분석해 줘"
GPT는 이렇게 응답합니다.
그림3) 해외 웹사이트 나라 선택 필드 코드 해석본GPT로 단순하게 '이걸 고쳐서 우리 서비스에 맞게 만들어줘!' 보다는 해석을 통해 코드의 구성이 어떻게 되어 있는지 이해하는 것도 중요합니다. 최종적인 결과물은 나의 것이며 어떠한 부분에서 어떻게 작동하는지 알아야 추후 유지보수하기도 편합니다.
자, 어느 정도 이해했습니다. 해당 폼을 기반으로 이제 우리 상품들을 넣어줘야 합니다.
상품의 이름을 단순하게 텍스트로 넣으면 추후 유지보수하거나 DB에 적재할 수 있는 데이터를 만들 수 없습니다. 일단 DB와 백엔드개발자가 알아보기 쉽도록 상품의 이름을 a, b, c, d, e로 바꾸어 보겠습니다.
직접 바꿔도 되지만, 우리는 시간을 절약하기 위해 하단과 같이 질문을 할 수 있습니다.
그림4) 시간을 절약할 수 있다.제품 A부터 F까지 상품 목록이 바뀌어져 있습니다. 이제 이를 DB와 연결하면 됩니다. DB에 있는 제품의 정보를 위의 코드에 넣기 위해서 우리는 먼저 DB와 테이블의 구조를 알아야 합니다.
그림5) 그림 엑셀과 유사한 데이터 구조입니다.우리는 검색필드의 필드를 동적으로 데이터베이스와 연결하기 위해서 테이블의 제품명을 웹사이트 내에 넣어야 하는데요, 여기서 제품명을 변수라고 합니다. 변수란 쉽게 설명하자면 빈 그릇입니다. 빈 그릇 안에 라면을 넣으면 라면이 되고 밥을 넣으면 밥이 됩니다. 여기서 우리는 제품명을 검색필드 화면에 넣어야 하지만 단순하게 제품명이라는 빈 그릇을 제품 A에 넣게 된다면 리스트형태로 만들 수 없습니다.
그림6) 검색필드우리는 제품명을 검색해서도 써야 하지만 드롭다운 메뉴로 만들기도 해야 합니다. 그렇다면 변수의 총 개수(상품명)만큼 드롭다운에 표시가 자동적으로 되어야 합니다.
이는 자바스크립트코드를 보고 고칠 수 있습니다. 첫 장에서 설명드렸 듯 자바스크립트 코드는 웹의 사용자화면에서 기능을 만들어주는 언어입니다. 자바스크립트에 대해 모른다고요? 걱정하지 마세요 우리는 앞서 제작한 화면과 같이 자바스크립트를 레퍼런스웹에서 가져올 수 있습니다.
그 레퍼런스 자바스크립트를 바탕으로 GPT를 통해 해석하고, 우리가 만든 변수와 데이터베이스를 연결시켜 넣으면 됩니다.
추후, 레퍼런스 웹사이트 소스 가져오기에 대한 방법을 상세히 기술 하여 공개할 수 있도록 하겠습니다.
어렵게 느껴질 수 있지만 마찬가지로 GPT에게 하나하나 물어가 봐가면서 제작할 수 있습니다.
다만, 모든 프로젝트는 혼자 하기보다는 특정 파트를 나누어 진행하는 것이 좋습니다. 만약 내가 혼자 다 할 수 있다고 하더라도 분야를 나누어 진행하지 않는다면 혼자서 해야 할 범위는 기하급수적으로 늘어나게 됩니다.
챗 GPT는 선생님이자, 조수이자, 훌륭한 말동무입니다.
¹비동기방식이란 예를 들어, 소셜 미디어에서 새로운 댓글이나 좋아요를 불러오는 경우, 페이지를 새로 고침 하지 않고도 실시간으로 업데이트시켜 보여주는 방식입니다. 동기화 방식은 댓글을 보기 위해 새로고침이라는 버튼을 눌러 동기화시키는 것을 뜻합니다.
