[EK하나관광 홈페이지 리뉴얼] - 버스 예약 회사 홈페이지 리뉴얼 프로젝트

# 프로젝트 소개

제목 : EK하나관광 홈페이지 리뉴얼

분류 : 개인적인 여름방학 소규모 프로젝트

팀원 : 3명 

기간 : 대략 3주

간략소개 : 실제 서비스중인 홈페이지를 최신 기술을 사용하여 새롭게 리뉴얼 함

기획의도 : 기존 서비스중인 홈페이지는 다음과 같은 문제점들이 있었음

[기존 서비스의 문제점]

해당 사이트는 5년전에 제작되어 (ASP와 MSSQL 사용됨) 현재까지 무리없이 서비스를 제공하고 있었으나, 사이트가 노후된 기술로 제작되어 유지보수가 어렵고 확정성 또한 낮았음. 무엇보다도 트래픽이 적은데 온디멘드 형식이 아닌 방식으로 서버를 호스팅 중이여서 과도한 유지비용이 발생해서 이를 절약하고자 새롭게 리뉴얼 하고자 했음

디자인 또한 구시대적이고 정적 페이지라 SPA를 활용하여 세련되게 바꾸려고 시도함

 

주요기능 :

• 관광버스 대절 정보 제공
• 실시간 견적요청 서비스
• 견적 요청 조회 및 수정
• 관리자페이지 기능 (전반적인 홈페이지 관리 기능)

사용기술 

• 프론트 : 리액트-자바스크립트, MUI
• 백 : 자바-스프링 부트, MySQL, AWS RDS, Spring Data JPA, Thymeleaf

 

# 내 역할

[백엔드 및 프론트 서포트]

백엔드는 관리자페이지를 템플릿 엔진인 타임리프를 활용하여 제작하였음. 백엔드 개발이 먼저 끝나서 프론트(리액트) 개발에 도움을 실어줌

 

# 배운점/성과

[타임리프 템플릿 엔진 첫 프로젝트 적용]

스프링 진영의 대표적인 SSR 템플릿 엔진인 타임리프를 첫 실전 프로젝트에 적용해 볼 수 있었다.

이를 활용하여 관리자페이지를 제작하였다.

 

[리액트 클라이언트와 REST API 통신 경험]

기존엔 모바일 클라이언트(안드로이드)와만 REST 통신한 경험만 있었는데, 이번 기회로 리액트 클라이언트(웹)과 REST 통신하는 방법을 경험해보았다. REST 방식이라 크게 다를건 없었지만, axios를 통해서 데이터를 주고받는거를 조금 익힐 수 있었고 이를 통해 어떤 방식으로 DTO를 내려줘야할지 노하우를 쌓을 수 있었다.

 

[실제 운용되는 서비스에 기여]

해당 프로젝트는 실제로 운용되는 홈페이지를 제작하는 것으로, 그 자체만으로 의미가 있었다고 생각한다. 이를 통해 개발을 끝나고도 유지보수하고 운용하는 경험을 쌓을 수 있을것이라고 생각된다.

 

[자바-엑셀 다운로드 기능 구현(POI)]

사용자 요구사항 중, 견적요청 데이터(DB에 있는 데이터)를 엑셀로 변환해서 저장할 수 있도록 하는 기능이 있어서 이를 자바 라이브러리 (POI)를 통해서 구현했다.

https://mopil.tistory.com/54?category=1000158 

[Spring] 스프링 부트에서 엑셀 다루기 (feat. POI)

 

[MSSQL -> MySQL 데이터 마이그레이션 경험]

기존 홈페이지 디비에 있는 데이터를 새로운 디비로 옮기는 작업을 처음으로 해봤다. 데이터 수가 그렇게 많지 않아서 마이그레이션 전용 프로그램을 사용하지 않고, 기존 데이터를 스프레드시트로 추출한 다음 적절히 데이터를 가공하여 새로운 디비로 옮기는 작업을 진행했다.

 

[스프링 부트 + 리액트 통합 빌드, 배포 경험 (EC2)]

해당 홈페이지를 실제로 서비스하기 위해서 AWS EC2를 활용하여 실제로 서비스를 배포하는 경험을 해봤다. 이 과정에서 리액트와 스프링부트를 jar파일로 통합 빌드하여 공통으로 배포하는 경험을 해봤다. 또한 EC2에 원격으로 접속하고 원격 파일 전송 프로그램(FileZilla)를 통해서 자료를 업로드하는 방법을 경험해 볼 수 있었다.

 

[기본적인 리액트, MUI 사용법]

프론트 작업을 도와주면서 기본적인 리액트의 개념(state, props 등)과 세련된 디자인 작업을 위한 MUI 사용법을 대강 익힐 수 있었다.

# 어려웠던 점과 해결방법

[엑셀 다운로드 기능 구현]

POI 라이브러를 처음 사용해보면서 겪는 최초 시행착오와 러닝커브가 어느정도 있었다. 구글링을 통해 원하는 기능을 만족스럽게 기능구현 했다.

 

 

# 프로젝트 결과물

https://github.com/ek-tour-renewal

ek-tour-renewal

 

실제 서비스 중인 홈페이지

http://ekhanabus.co.kr 

이케이하나관광