Vue Mobile Service SK 행복 DATA 플랫폼
행복앱 kong
Vue 모바일 서비스 장기 운영·고도화
일상을 기록하고 공유하는 모바일 서비스입니다.
- 기간
- 2022.02–2024.12
- 역할
- Frontend Developer · 프론트엔드 1인 담당
행복앱 kongVue Mobile Service
At a glance
프로젝트 요약
화면 개발부터 운영 오류 수정까지 프론트엔드 업무를 혼자 맡았습니다. 기존 Vue 코드와 데이터를 확인하며 기능을 추가했습니다.
- 클라이언트
- SK 행복 DATA 플랫폼
- 기간
- 2022.02–2024.12
- 담당
- Frontend Developer · 프론트엔드 1인 담당
- 기술
- Vue 2, Vuex, Vuetify, REST API
Problem
필요했던 작업
서비스를 계속 운영하면서 기존 화면을 수정하고 새 기능을 추가해야 했습니다.
Ownership
맡은 일
프론트엔드를 혼자 맡아 화면을 추가하고 기존 기능을 수정했습니다. 운영 중 발견된 오류도 확인해 고쳤습니다.
Decision
구현 방법
화면에서 쓰는 Vuex 상태와 API 응답을 먼저 확인했습니다. 수정이 다른 기능에 미치는 영향을 살피고 기능별로 나눠 반영했습니다.
Outcome
작업 결과
2022.02–2024.12 동안 Vue 서비스를 운영하며 신규 화면을 추가하고 기존 기능과 오류를 수정했습니다.
01 · Problem
프로젝트 배경
2022.02–2024.12 동안 운영 중인 Vue 모바일 서비스의 프론트엔드를 혼자 맡았습니다. 기존 화면을 수정하고 새 화면을 만들었으며 운영 오류에도 대응했습니다.
코드를 수정하기 전에 화면에서 쓰는 Vuex 상태와 API 데이터를 확인했습니다. 기존 기능에 미치는 영향을 살피면서 작은 단위로 나눠 반영했습니다.
02 · Ownership
맡은 역할
Frontend Developer · 프론트엔드 1인 담당
- 2022.02–2024.12 Vue 서비스 운영
- 기존 화면에서 쓰는 Vuex 상태와 API 데이터 확인
- 기존 화면·기능 수정과 신규 화면 개발
- 운영 오류 확인과 수정
- 반복되는 화면 요소를 공통 컴포넌트로 분리
03 · Decisions
구현 방식
수정이 다른 기능에 미치는 영향 확인
화면이나 Vuex 상태를 바꿀 때 기존 기능이 그대로 동작하는지 확인했습니다. 변경 사항은 기능별로 나눠 반영했습니다.
Vuex 상태와 API 응답으로 오류 원인 확인
오류가 난 화면에서 어떤 Vuex 상태와 API 응답을 쓰는지 확인했습니다. 이 데이터를 따라가며 수정할 코드를 찾았습니다.
여러 화면에서 공통 UI 사용
운영 중 반복해서 쓰는 화면 요소를 공통 UI로 만들었습니다. 새 화면을 추가하거나 기존 화면을 고칠 때 함께 사용했습니다.
04 · Evidence
작업 내역
이 프로젝트에서 수정하거나 새로 만든 기능입니다.
주요 작업
- 기존 Vue 코드, Vuex 상태와 API 응답 확인
- 운영 화면 수정과 오류 대응
- 신규 화면 개발과 기존 기능 개선
- REST API 연결과 응답 데이터 표시
- 여러 화면에서 쓸 공통 UI 개발
05 · Outcome
작업 결과
- 프론트엔드 1인 담당으로 신규 화면 개발과 기존 기능 수정
- Vuex 상태와 API 응답을 확인해 운영 오류 수정
- 반복되는 화면 요소를 공통 UI로 만들어 재사용
06 · Screens
주요 화면
화면을 누르면 크게 볼 수 있습니다.
07 · Workflow
작업 순서
보통 다음 순서로 작업합니다.
요청 내용 확인
기획서와 디자인을 읽고 바꿀 내용을 확인합니다. 운영 중인 서비스는 기존 코드도 함께 살펴봅니다.
화면과 데이터 확인
여러 화면에서 쓸 컴포넌트와 페이지별 상태를 구분합니다. 필요한 API와 예외 처리도 이때 확인합니다.
기능 개발
프로젝트의 코드 작성 방식과 API 규격에 맞춰 화면과 기능을 만듭니다.
동작 확인
화면 크기와 입력 상태를 바꾸며 동작을 확인합니다. QA에서 발견한 문제와 운영 중 받은 피드백을 반영합니다.