💊

척척약사

기술스택

Java

SpringBoot

JPA

Vue.js

Docker

Jenkins

SpringSecurity

Jira

기간

2024.02 ~ 2024.03

1 more property

프로젝트 진행 기간

2024.02.22 ~ 2024.04.04 (6주)

총 인원

6명 (Full-Stack)

프로젝트 소개

● 약 봉투를 잃어버려도 자신이 가진 약의 효능과 부작용을 사진 한 장으로 확인할 수 있도록 지원

● 진단서 및 처방전을 디지털화하고, 복용 중인 약을 기록 및 관리할 수 있는 맞춤형 건강 관리 서비스 제공

“내가 복용 중인 약의 정보를 쉽게 확인하고 기록하고 싶어요!”

“약국 위치를 빠르게 찾고 싶어요!”

🗸 주요 기술

Backend

•

Spring Boot, Spring Security, OAuth2, JWT

•

Jsoup, JPA, MySQL

•

Flask (YOLO 모델 연동)

Frontend

•

Vue.js, PWA, Debounce, IntersectionObserver API

Infra

•

AWS EC2, Docker, Jenkins, Nginx

🗸 담당 역할

Backend

•

OAuth2 기반 소셜 로그인 및 JWT 인증 구현

•

Jsoup을 활용한 특정 약국 정보 크롤링 및 데이터 가공

•

약효 기록 API

Frontend

•

Kakao Map API를 활용한 약국 위치 검색 페이지 구현

•

Debounce와 IntersectionObserver를 활용한 검색 최적화

•

PWA 적용을 통한 모바일 웹앱 지원

Etc

•

프로젝트 중간 발표

🗸 ERD

🗸 시스템 아키텍쳐

🗸 트러블 슈팅 및 고민

문제 1: PWA 캐시로 인해 기존 버전 유지 문제

•

문제
: 프론트엔드 코드를 수정하고 배포했음에도, 사용자 화면에 변경 사항이 반영되지 않고 이전 버전이 계속 유지되는 문제가 발생했습니다.

•

원인
: 구글링과 공식 문서를 참고하며 서비스 워커(Service Worker)의 캐시 동작 원리를 조사했습니다. 서비스 워커가 기존 캐시를 삭제하지 않고 계속 참조하고 있었고, 서비스 워커의 버전 관리 및 라이프사이클 관리가 제대로 이루어지지 않은 것이 원인이었습니다.

•

해결
: 서비스 워커에 버전 관리를 위한 로직과 이전 캐시를 삭제하는 코드를 추가했습니다. 이를 통해 새로운 배포 시마다 최신 버전이 적용되고, 기존 캐시가 자동으로 삭제되도록 수정했습니다. 이후 배포 과정에서 변경 사항이 정상 반영되는 안정적인 환경을 구축할 수 있었습니다.

🗸 프로젝트 리뷰

배운점

이번 프로젝트에서는 JWT 기반 사용자 인증과 OAuth2 소셜 로그인을 처음으로 직접 구현해보며 인증 흐름 전반을 학습할 수 있었습니다. JWT의 발급과 검증 과정을 이해하고, Spring Security를 활용해 사용자 세션을 관리하는 방법을 경험했습니다. 또한 OAuth2 라이브러리를 적용해 자체 리다이렉트 및 인증 과정을 구성하며 인증 시스템에 대한 실질적인 이해를 높였습니다.

프론트엔드 측면에서는 Debounce를 적용해 실시간 검색 과정에서 빈번한 API 호출을 제어하고, IntersectionObserver API를 활용해 무한 스크롤 기능을 구현했습니다. 이를 통해 페이지 로딩 속도를 개선하고 서버 부하를 줄이며 성능 최적화의 중요성을 체감할 수 있었습니다.

이러한 과정을 통해 성능을 고려한 개발의 재미를 느꼈고, 다양한 최적화 기술과 라이브러리, 문제 접근 방식을 계속해서 학습하고 적용하는 개발자가 되어야겠다는 목표를 갖게 되었습니다.

아쉬웠던 점

약국 정보를 크롤링하는 과정에서 시간이 부족하여 수집한 데이터를 주기적으로 관리하지 못하고, 하드코딩된 데이터로 API를 구현한 점이 아쉬움으로 남았습니다. 발표 일정을 맞추기 위해 후순위로 미루었지만, 결국 유연성과 확장성을 고려하지 못한 상태로 남긴 것이 아쉬웠습니다.

이번 경험을 통해 개발 일정 관리의 중요성과 함께, 초기 설계 단계부터 데이터 관리 전략을 수립하고 남은 작업량을 주기적으로 점검하는 습관의 필요성을 절감했습니다. 앞으로는 이러한 부분까지 고려하여, 완성도 높은 프로젝트를 만들 수 있도록 준비하고 싶습니다.