미리보기

웹 개발

• Vue.js를 활용한 2개의 CSR 웹개발, JSP와 Thymeleaf를 활용한 4개의 SSR 웹개발 참여

  • SPA 개발을 통해 웹앱의 형태로 변경

  • TypeScript 도입으로 정적 분석과 타입 추론 활용

  • 퍼블리셔와 협업하여 UI/UX 개선

  • 지도 웹앱, 게시판, Admin 페이지, GS 인증 등 프로젝트 참여

지도 라이브러리 개발

• Kakao, Naver 지도 등 배경 지도와 OpenLayers 인터랙션 지도를 활용한 라이브러리 개발

  • 다양한 지도 기능을 포함한 라이브러리 개발로 생산성 75% 상승

  • 개발자 경험(DX) 향상을 위한 문서화

유지보수 및 운영 업무

• 클라이언트와의 소통을 통해 유지보수, 설치 및 개발 가이드 참여

  • 새로운 퍼블리싱 및 기능 개선을 위한 유지보수 작업에 2번 참여

  • 개발 가이드 제작 및 클라이언트와 직접 소통하며 사용법 전달

기술 스택: Typescript, Vue, Vite, Java, Spring, MyBatis, PostgreSQL, Apache poi

프로젝트 설명

JSP, jQuery 로 만들어진 기존의 애플리케이션을 Vue로 마이그레이션, 추가적인 요구사항에 대한 고도화 프로젝트

주요 업무 및 성과

• JSP, jQuery로 작성한 명령형 코드들을 Vue를 통해 선언적으로 변경

• 기존에 작성된 지도관련 코드들을 새로 개발한 지도 라이브러리로 전환 및 지도 기능 고도화

• 서버에서 화면을 그려주던 Controller들을 모두 RestController로 변경

• apache poi를 통해, 서비스별 엑셀 다운로드 기능 개발

• iffe방식으로 작성된 코드들을 es6 스펙에 맞춰 모듈 및 클래스 형식으로 변경

인사이트

• 기존의 명령형 방식에서 선언형 프로그래밍으로 전환하면서 코드 가독성 및 유지보수성의 중요성을 깨닫게 됩니다. vue의 반응형 시스템을 통해 데이터 변경에 따라 자동으로 UI가 업데이트되는 방식이 코드의 복잡성을 줄이고 오류를 줄이는 효율성에 대해 배움

• 프론트엔드와 백엔드의 분리로 인해 API 설계의 중요성을 깨닫고, API는 클라이언트와 서버 간의 커뮤니케이션을 담당하므로, 이를 설계하는 과정에서 데이터 구조, 보안, 성능 등을 고려해야 한다는 점을 학습을 경험

기술 스택: typescript, OpenLayers, vite

프로젝트 설명

사내 프로젝트에서 비효율성을 해결하기 위해 통합 지도 라이브러리를 개발

주요 업무 및 성과

• npm(최대 weekly 153downloads) 및 사내 nexus 배포를 통해 개발자들의 접근성 향상

• 사용자가 복잡한 지도 기능을 손쉽게 사용할 수 있도록 설계 및 개발, 생산성 75%증가

• kakao, naver, vWorld 와 openlayers 지도 동기화, 지도 관련 공통 기능 등 기능 구현

인사이트

• 추상화를 잘한다는 것은 무엇일까? 에 대한 깊은 고민

• 이 프로젝트를 통해 개발 효율성과 재사용성 향상

기술 스택: Vue, TypeScript, Pinia(store), OpenLayers, vite

프로젝트 설명

이 프로젝트는 지역 개발 및 성장 가능성 탐색에 초점을 맞추고 있으며, 특히 지역 재개발 및 재사용 가능성 평가에 중점된 개발

주요 업무 및 성과

• typescript 도입을 통해 정적분석 및 타입 추론 , vue 도입을 통한 SPA개발

• vue의 keep-alive를 통해 동시에 3개의 지도가 동작하도록 관리

• 공통 컴포넌트, 유틸함수 개발을 통해 dx 향상

• openlayers를 통해 전반적인 지도 개발에 참여, 지도 렌더링부터 거리, 면적 측정, 지도 분할 및 스와이프 기능, 프린팅, 이미지 캡처 기능 구현

• 20mb이하의 커스텀 지도 파일 0.1s이내 지도 렌더링

인사이트

• 확장을 통한 기획 변경을 고려한 개발을 늘 신경써야 함을 느낌

• jsp에서 vue로의 변경 과정에서 동작과정의 이해를 신경쓰고 개발해야함을 배움

기술 스택: Java, Spring, MyBatis, PostgreSQL, JavaScript, HTML, CSS, Thymeleaf, jQuery, Gradle
사이트: 춘천시 도시재생 사이트

프로젝트 설명

춘천시의 도시재생 웹사이트의 퍼블리싱 변경을 통해 사용자 친화적인 디자인과 기능으로 고도화하여, 방문자에게 보다 나은 정보 제공과 사용 경험을 제공하기 위한 프로젝트

주요 업무 및 성과 (해당 서비스는 대부분 BE 의 서비스를 포함하여 구현하였습니다.)

• 3뎁스 탭의 게시판 형태의 웹 사이트 개발
• swiper, aos 라이브러리를 통해 자연스러운 ui 구현
• OpenWAX score 최대점수 100점 달성

인사이트

• 라이브러리를 썼을때 생기는 다양한 이점이 있지만, 라이브러리의 동작에 대한 이해도가 떨어질때 비용이 더 클 수 있음을 배움
• 급격한 팀 변화속에서 유지보수를 진행하며 의사소통의 중요성을 학습

기술 스택: Java, Spring, MyBatis, PostgreSQL, JSP, JavaScript, jQuery, ax5uigrid, apache poi

프로젝트 설명

김포시 웹사이트 개발 및 유지보수를 통해 지역 커뮤니티와 시민들에게 다양한 공원녹지 정보를 제공하는 프로젝트

주요 업무 및 성과

• 김포시의 요구사항에 기반하여 웹사이트를 개발, 지속적인 유지보수를 담당, 지역 커뮤니티의 정보 접근성을 향상
• Apache POI를 활용하여 excel 출력 기능을 전면적으로 수정 및 개선을 통한 사용자의 데이터 관리 효율성을 증가
• 공원현황, 시설현황, 가로수현황 등 다양한 데이터 페이지를 구현하고 개선,을 통한 사용자의 정보 접근성과 이해도를 향상

인사이트

• 개발 과정에서의 명명 규칙의 중요성 및 일관된 명명 규칙은 팀 내 커뮤니케이션과 작업의 흐름을 원활하게 하며 dx에 큰 영향을 끼침을 배움. 또한, 코드의 가독성 및 장기적인 프로젝트 관리에 큰 도움을 줄 수 있음을 학습
• 라이브러리 선택에서 고민해야 되는 부분들, 사용되는 라이브러리에 대한 충분한 이해없이 사용했을때의 문제점 경험