2022.10.21 부터 2023.01.13까지 3개월간 진행했던 프로젝트가 끝나고, 개발자로 입사한지가 벌써 1년이 넘었네요.
사실 일정관리를 너무 잘해버린 나머지(^__^) 완성하고도 시간이 남아 마지막 1개월정도는
개인 공부 하고, 해보고 싶은 기능 추가하면서 보냈던 기억이 납니다.
다른 팀원이 작업한 부분은 줄이고 제가 맡은 부분 위주로 정리하여 포스팅합니다.
| 개발 환경 | Windows10 | 개발 언어 | Java17, Javascript, HTML5, CSS |
| DB | PostgreSQL 15.1 |
||
| 개발 라이브러리 | SpringBoot2.8, Svelte3.46, SvelteKit0.0.1 | ||
| 개발 도구 | VisualStudio Code, IntelliJ, SVN | ||
프로젝트는 (주)비트컴퓨터 입사 예정인 동기 둘과 함께 진행했습니다.
저는 팀장을 맡아 개발 외적으로 일정관리 / 본사 컨택 / 주간업무보고 등의 업무를 함께했습니다.
프로젝트 종료 후 본사에서 이 프로그램을 상용화 디벨롭할 계획이 있으셨기 때문에
메뉴구조도, WBS 등의 문서 작업이 기존보다 많은 편이었어요.
프로젝트 주제는
COVID-19 환경 극복과 진료의 편의성을 위한 비대면 진료 앱 개발
의료진/병원 가입자는 환자에게 보여질 병원의 정보를 관리하고, 화상 통화를 앱 내에서 진행하고 처방을 보내야 합니다.
환자는 앱에서 예약 후 화상통화를 통해 진료받고, 자동으로 발급된 처방전을 원하는 약국에 보내 배송받습니다.
약국 사용자는 처방전을 전달받으면 조제 - 배송사 위탁 - 발송완료 처리를 해야합니다.
사용할 기술 스택도 정확하게 지정해주셨는데, 최근 각광받는 신규 라이브러리 위주로 고르신 모양이에요.
FE - Svelte 3.46 , SvelteKit 0.0.1 (심지어 스벨트키트는 공식 버전이 나오기도 전이었어요)
BE - Java17, SpringBoot2.8
DB - PostgreSQL 15.1
프로젝트를 완료하기까지 포스팅으로 남겨두고 싶은 저의 업적은 크게 두가지입니다.
1. svelte 라이브러리를 활용해 웹 구조 전체 설계, 틀 제작, JS구현
2. KaKao Open API를 활용한 지도 관련 기능 구현
1. svelte 라이브러리를 활용해 웹 구조 전체 설계, 틀 제작, JS구현
다들 (심지어 강사님까지..) 처음 써보는데다 참고할 자료도 많지 않은 스벨트로 시작하려니 심란한 기색을 숨기기 어려워 보였습니다. 일단 사흘정도는 각자 공부하기로 합의를 보았고, 저는 책 위주로 공부하다가 직접 해보면서 하면 좋겠다 싶어 빌드를 시작했습니다.
..그게 그대로 프로젝트가 되었습니다! ^0^
페이지 디자인이 다 나온 상태라, url 구성과 화면 구조를 잘 얽으면 되었기 때문에 연습으로 시작했던 FE 뼈대 제작을 자연스럽게 제가 맡게 되었어요. 제가 url별 연결되는 화면의 구성을 짜고 디자인이 나와 있는 HTML과 간단한 JS를 구현해 넘기면 페이지별 상세한 완성은 나눠서 하기로 했습니다. '사이트 관리자/ 병원 / 환자 / 약국' 네 버전의 구성을 완성하는 데 5일이 걸렸습니다.
어떤 특별한 기능을 구현했는지보다 이 역할이 저에게는 가장 큰 성취로 느껴졌어요. 사용자가 어떤 페이지에서 출발해 어떤 기능까지 도달하게 될지 다양한 시나리오를 구상하고, 건물을 설계하듯이 쌓아올리는 과정이 눈에 보이니 즐거웠습니다. 자료를 얻기 힘든 스벨트 라이브러리를 정복해가는 재미도 있었던 것 같아요. 이 글을 작성하는 시점은 프로젝트가 종료되고 1년을 재직한 후인데, 이 경험이 근무하면서도 이어져 솔루션의 신규 기능 설계에 많은 도움이 되었어요.
2. Kakao Open API를 활용한 지도 관련 기능 구현
사실 open API를 연동해서 데이터 교환을 했던 것보다도, 이 API를 활용할 수 있도록 제공된 다양한 함수와 코드를 주의 깊게 뜯어서 원하는 대로 고쳐 쓴 경험이 굉장히 유용했습니다. 회사에 들어가면 선임들이 만들어둔 (매우 방대한) 틀과 코드가 있기 때문에 기존 코드의 흐름을 보고 필요한 부분만 '내 것'으로 가져다 쓰는 스킬이 정말 중요했어요. 또 어떤 부분에 제 코드를 넣고 어디서 간섭해야 새 기능이 기존 기능을 방해하지 않으면서 자연스럽게 녹아들지 결정할 일도 많았고요. 항상 신규 코드를 짜는 경험만 해 본 저에게 남이 쓴 코드를 읽고, 분석하고, 또 고쳐서 필요에 맞게 쓰는 연습은 큰 도움이 되었습니다. 아직 부족한 점이 많겠지만 이 경험을 바탕으로 입사 후 조금 더 빨리 기존의 프로그램에 녹아들 수 있었어요.
프로젝트 결과물이 궁금하신 분들은 아래 포스팅을 참고해주세요!
비대면진료 앱 프로젝트 산출물 스크린샷
** 입력된 데이터는 모두 모의데이터이며 실제와 무관합니다 ** 1. 의료진, 병원 관리자용 페이지 2. 약국 사용자 페이지 3. 사이트 관리인 페이지 4. 환자용 페이지(모바일)
zenna9.tistory.com
프로젝트 후기는 여기까지입니다. 수행 중에 남기고 싶었던 여러 기술 포스팅은 아래에 몇가지 첨부해두겠습니다!
포스팅은 구현 후기보다는.. 나중에 재사용 할 수 있는 것들을 공유한 느낌이라 약소합니다.
날짜, 시간 관련 자바스크립트 함수들
프로젝트 하면서 만들어 사용했던 날짜와 시간 관련 자바스크립트 함수들을 공유합니다. 사용법을 함께 적어두니 외부 모듈처럼 사용하세요 ^_^ // 날짜관련 모듈 const days = ['일요일','월요일','
zenna9.tistory.com
[CSS, HTML] 별점 모양
css와 HTML 코드만 사용해 별점 표시 모양을 만들기 점수를 %로 입력하면 너비로 환산해서 표기 HTML 아래 width 부분에 별점을 줄 점수 비율을 입력해주면 된다 CSS .stararea { width: 100px; height: 20px; margin
zenna9.tistory.com
[스벨트] 간단한 팝업창
스벨트의 #if를 사용하면 별도로 css에서 클래스로 display를 설정하고, 클래스 이름을 붙였다 떼었다 할 필요 없이 간편하게 작동하는 팝업창을 만들 수 있다. 팝업을 띄우려면 이 버튼을 클릭하세
zenna9.tistory.com
Spring Boot +프론트엔드 프레임워크
백엔드와 프론트엔드가 서로 다른 프레임워크를 사용하는 경우, 도대체 정보를 어떻게 주고받는지가 의문이었는데 그 해결법을 공유합니다. Spring Boot의 데이터를 프론트엔드 프레임워크에 표
zenna9.tistory.com
'프로젝트' 카테고리의 다른 글
| 비대면진료 앱 프로젝트 산출물 스크린샷 (0) | 2024.02.22 |
|---|---|
| 바닐라 자바스크립트로 오목 만들기 (0) | 2022.09.13 |
| 자바전문가과정 1차 미니프로젝트 (0) | 2022.08.10 |
| BIT교육센터 최종 프로젝트 끝! (0) | 2022.06.20 |
| [Django, MySQL] 비트교육센터 미니프로젝트 2차 (0) | 2022.04.17 |
댓글