비바이빙 - 빠르게 개발하기
새로운 프로젝트를 시작해보려고 합니다!
AI 시대에 맞추어 2주에 한 프로덕트를 만들어내는, 작지만 빠른 개발을 지향하는 프로젝트입니다.
왜 토익 사이트는 고사장 찾기가 어려울까?
토익을 한 번이라도 지원해본 학생이라면 공감할 것이다.
바로 내 근처 시험장 찾기가 몹시 어렵다는 것!
날짜와 도단위의 장소를 선택하면.. 이렇게 리스트로 사이트가 나오지만
단순히 도로명 주소만 보고는 어디가 내 위치랑 가까운 곳인지는 알기 어렵다.
하나씩 클릭하면서 보는 것도 일이라는 것이 수험생의 아쉬웠던 경험이었다.
이러한 작은 문제를 해결하는 프로젝트가 바로 비바이빙 프로젝트!
무엇이 필요할까 (기획 단계)
문제점
토익 고사장 리스트에서, 내 근처의 고사장을 쉽게 찾기 어려워 위치를 하나씩 검색해보며 찾아야했다.
해결방안
위치를 한눈에 볼 수 있는 토익 고사장 지도를 제공한다면, 근처 고사장을 쉽게 파악할 수 있을 것이다.
구체화
- 지도에 마커 표시로 토익 고사장의 위치를 보여주자.
- 현재 내 위치도 지도에 표시해주자.
- 현재 내 위치와 각 토익 고사장 간의 직선 거리를 계산하여 보여주자.
- 직선거리가 작은 순으로 오름차순으로 리스트를 정렬하자.
어떻게 만들까? (설계 단계)
원래대로면 디자인 단계가 포함되었겠지만, 이번 기획은 원 페이지로 개발 가능한 단순한 기획이었기 때문에 디자인은 생략하였다.
-
리액트 / 타입스크립트로 제작한다.
원래는 자바를 공부해서 리액트는 입문 강의 하나 정도 초보다..ㅎㅎ
리액트에 대해 공부할 필요성을 느껴 공부할 겸 리액트를 사용하기로 하였다. -
최소한의 비용으로 개발한다.
이건 그냥 학생이라 돈이 없어서 그렇다. -
커서 AI를 사용하여 개발한다.
AI는 요즘 필수! 그러나 도저히 안 풀리는 오류를 물어보는 잘 설명하는 검색 엔진 정도로 사용해보았지 AI 페어프로그래밍을 해본 적은 없다. 친숙해질 필요성을 느껴 사용해보기로 결심하였다.
처음 써보는 거라 아직 무료 체험 남아있어 2번에 모순되지 않는다! (50번 안에 개발할 수 있길...)
- 배포는 깃허브 Pages로, DB가 필요하다면 Firebase를 사용해야겠다!
만들어보자! (개발 단계)
초기 디자인 단계
우선 리액트 프로젝트를 만들어주고, 필요한 요소들을 추가했다.
처음에는 엄청 원시적인 디자인으로 시작했고, 버튼과 드롭다운에 대한 세세한 지침을 내려주니 내가 머릿속으로 그리고 있던 디자인으로 완성해주었다.
AI가 이렇게까지 개발을 잘해주었다니..!
컬쳐쇼크 받았다..
여튼 현재 위치를 받아오는 버튼과 시험 종류, 일정, 위치를 선택하는 드롭다운을 추가했다.
시험 종류는 나중에 시험을 토익 말고도 추가해볼까 싶어서 만들었다.
종류와 일정을 활성화해야 위치를 선택할 수 있게 만들었다!
기능 달아주기
현재 위치 받아오기까지는 제가 개발했다고 말하기 무안할 정도로 커서가 완벽하게 구현해주었다.
시험 일정과 위치 리스트, 시험장 리스트를 받아오기 위해 토익 홈페이지를 다시 한 번 분석했다.
xhr 타입 요청을 확인해보니,
요러한 요청으로 토익 일정을 확인한다는 것을 알 수 있었다.
지역 가져오는 방식은 요런 식입니다.
특이하게 같은 URL로 요청하는데 proc 요소에 메소드 이름?으로 가져오는 것 같다.
시험장 리스트도 비슷한 방식이었다.
여튼 데이터 양이 많고, 드롭다운으로 JSON을 받아오는 것 같으니 크롤링 방식보다는 직접 요청하는 방식으로 접근하는 것이 좋겠다!
좀더 이쁘게 응답을 보기 위해서 포스트맨으로도 확인했다.
요런 느낌이군요.
흠.. 그런데 지역 리스트는, 항상 고정인 것 같다.
시험 날짜에 따라서 시험이 없는 지역이 생기는 경우는 없으니까!
매번 같은 값을 받는 요청을 위해 API 요청을 기다려야 한다면 비효율적일 것이다.
이건 사용자 경험을 위해 하드코딩으로 넣어야겠다.
시험장 데이터는 이런 느낌!
좌표가 나오진 않는다.
마커로 표시하려면, 주소를 좌표로 변환하는 API를 찾아봐야 할 것 같다.
찾아보니 구글 MAP API에서 이러한 작업을 할 수 있는 것 같아서, 이용해봐야겠다.
자 이제 프롬프트를 잘 짜서 API 요청을 개발해 진행해보겠다.
맙소사! CORS 오류가 떴다.
단순히 요청만 하면 된다고 생각했는데 아니었던 것 같다ㅠ
원래 서버 개발을 공부했기 때문에, 이러한 문제는 BFF로 해결할 수 있다는 것을 알고 있었다.
깃헙 페이지로 배포하면서까지 돈을 아낄 생각이었는데, ec2로 서버까지 배포하면 이 한 페이지 프로젝트 치고는 너무 비용이 커지는 것 같다..!
찾아보니 갓-파이어베이스에서는 function이라는 기능을 제공하고 있었다.
AWS Lambda 같이 요청-응답을 처리하는 코드만 올리면, 쉽게 백엔드를 구성해준다.
사용량에 따라 과금될 수 있어 조심해야겠다...
이런 식으로 가볍게 작성해서 배포하면, CORS를 피하기 위한 서버 뚝딱 완성! 리액트에서 해당 서버로 요청을 바꾸니 성공하였다.
이제 리스트를 지도에 마커로 보여주기 위해, 구글 MAP API를 사용해보겠다.
요것도 마찬가지로 사용량에 따라 유료로 전환된다. 최대한 덜 써야겠습니다!!
지금 구상하고 있는 방식은 다음과 같다.
사용자 드롭다운 메뉴 선택 -> 해당 조건에 해당하는 시험장 리스트 요청 & 반환 -> 각 시험장 위치 정보를 좌표로 변환하는 API 비동기 실행 -> 표현
그런데 이 방식은 사용자가 접근할 때마다, 각 드롭다운을 선택할 때마다 요청을 보내게 되니, 전체 시험장이 180개가 넘는 이 상황에서 파산하는 것은 시간문제였다.
아무래도 각 시험장 정보를 DB로 저장해야할 것 같다.
우리의 무료 DB 갓-파이어베이스를 사용하겠다.
사용자 드롭다운 메뉴 선택 -> 해당 조건에 해당하는 시험장 리스트 요청 & 반환 -> 각 시험장 코드에 해당하는 좌표 DB에 일괄 요청 API -> 표현
이 방식을 사용하면 그래도 비용 측면에서 부담을 좀 덜 것이다.
이를 위해선 먼저 DB에 정보를 채워두어야 할 것 같다.
"사이트 운영"의 관점에서 생각했을 때, DB의 업데이트를 하는 것이 어려우면 안될 것 같다. 그래서 Host용 페이지를 만들어야겠다고 생각했다!
Host 페이지
- 버튼 한 번에 모든 시험장의 좌표를 조회할 수 있어야 한다.
- 버튼 한 번에 모든 시험장의 좌표를 DB에 일괄 업로드해야 한다.
- 내가 사용할 거니까 배포는 따로 안 할 예정.
역시 커서로 페이지를 구성해보았다.
파이어베이스 설정도 잘 넣어주고,,
시험 날짜를 선택하면..
서울부터 모든 지역의 위치 정보를 받아온다.
이제 전체 좌표 반환 버튼을 누르면..
변환이 잘 되었다!
DB 업데이트 버튼을 눌러주면..
시험장 코드를 id로 필드에 위도 경도 값이 잘 들어가 있는 것을 확인했다.
이제 요 정보를 원래 프로젝트에서 불러오면 되겠다!
여기에도 파이어베이스 설정을 잘 넣어주면..
짜잔 생각보다 짧은 시간 내에 요청을 처리한다.!
직선 거리는 현 위치 ~ 시험장 좌표 사이를 Haversine 방식으로 계산했다.
가장 가까운 시험장 위치부터 오름차순도 잘 구현되었다.
그런데,
시험장 좌표는 고정값, 시험장은 종류는 어차피 관리자 수동 업데이트 방식으로 할 거라면...
굳이 매번 DB에 요청해야하나? 파이어베이스도 마냥 꽁짜는 아니니...
아차, 이거 그냥 정보 뽑아서 csv로 바꾸면 되겠구나 생각했다.
진짜_최종
사용자 드롭다운 메뉴 선택 -> 해당 조건에 해당하는 시험장 리스트 요청 & 반환 -> 각 시험장 코드에 해당하는 좌표 csv에서 일괄 Load -> 표현
Host에서 추출하는 내용을 DB에 업로드 하는 것이 아닌 CSV 추출 버튼으로 바꾸어 저장했다.
이제 장소 정보 추가가 필요한 경우 CSV 파일을 업데이트하는 것으로 충분하다.
(앱이 아닌 웹이니까 가능한 방식이겠네요..!)
내 위치도 주황색으로 잘 보이게 만들어주면 완성
이제 깃허브 페이지로 배포하고 글 마무리!
후기
작은 프로젝트 하나 만드는 데에도 고민할 점이 참 많은 것 같습니다. 실제 운영을 위한 프로젝트이기도 하니 비용이라는 제한이 생겨 특히 더 느껴지네요!
AI 이제 바보 아닙니다.
프론트 개발에 이제 막 공부를 시작한 저도, 화면 구성에 어려움이 없었습니다.그러나 AI도 부족한 점이 많은 것 같습니다.
글 내용에는 희망편만 썼지만 Lint 에러나 갑자기 이상하게 동작하는 경우도 많고,
"이렇게 만들어줘"에서 '이렇게' 부분이 틀린 경우에는 방향을 잘못 잡아버리는 것 같습니다.
제가 리액트 초보 수준이라 유연한 개발을 하지 못한 아쉬웠던 점도 있네요.
개발에 대한 여러 경험과 지식이 중요해짐을 느꼈습니다.
좀더 생산성 높은 개발은 위해서 열심히 공부해야할 것 같습니다!!
