미리보기

프로젝트 개요

인포마이닝에서 참여한 Vue와 Nuxt를 사용한 커넥닥 프로젝트입니다. 환자의 상태를 실시간으로 모니터링하는 웹 서비스를 개발했습니다.

기술 스택 및 도구

기술스택: Vue2 / Nuxt2 / Pinia(TypeScript)

도구(협업) 및 환경: Git / Confluence / Jira / Slack / VS Code / Jenkins

주요 기여

프로젝트의 레거시 코드를 지속적으로 개선했습니다.

• 기존 코드에 문자열 비교를 위한 switch 문이 많아, 불필요한 비교 연산이 반복되었습니다.

• 하나의 로직에서 너무 많은 작업을 수행해 가독성이 떨어졌습니다.

→ switch 문을 객체 리터럴로 변경하여, 한 번의 검색으로 결과를 도출하도록 개선했습니다.

→ 로직을 관심사별로 분리해 함수화하고 재사용성을 높였습니다. 함수명을 통해 코드 흐름을 파악하기 쉬워졌습니다.

vuex-persistedstate 라이브러리 지원 종료로 인한 대체제 사용 및 WEB Storage 개선

• 상태 관리 도구로 vuex를 사용하였고, vuex-persistedstate 라이브러리를 추가 사용하여 WEB Storage에 데이터를 저장하는 상황에서 vuex-persistedstate 라이브러리 지원 종료로 인해 대체제가 필요했습니다.

• 기존에는 switch 문과 window.localStorage.setItem()으로 데이터를 관리했습니다.

🙋‍♀ 제안 설명

Vuex 대신 Pinia의 사용을 제안했습니다.

Vue의 공식 상태 관리 솔루션으로 채택됨. Vuex와 유사한 구조로 학습 곡선이 낮음. vuex-persistedstate 와 유사한 라이브러리 존재(Vueuse 사용) TypeScript 사용으로 안정성을 올릴 수 있음. 여러 개의 store를 생성 가능하여 관심사마다 분리가 가능함.

위의 이유를 근거로 라이브러리 도입을 제안했고, 채택 후 주도적으로 개선을 수행했습니다. 기존 Vuex 로직을 Pinia에 맞게 재구성하고, 함수로 분리하여 재사용하기 쉽도록 개선했습니다. 또한, TypeScript를 도입하여 안전성을 올렸습니다.

그리고 VueUse 라이브러리를 함께 사용하며, 직렬화 과정없이 WEB Storage에 데이터를 바로 저장하고, 별도의 처리없이 병합할 수 있게 구현했습니다.

이후로, 개선 목적과 제안된 방법의 장단점, 적용 방법을 문서화하여 팀원이 빠르게 적응할 수 있도록 했습니다. 코드 리뷰를 통해 긍정적인 피드백을 받으며 팀원들과 원활히 협업했습니다.

소켓 연결을 통한 실시간 생체 신호를 적용했습니다.

• 소켓 연결로 실시간 생체 신호 데이터를 받아왔지만, 화면의 그래프와 동기화되지 않았습니다.

생체 신호 데이터와 그래프 데이터 구조가 달랐고, 그래프 데이터는 필터를 거쳐 변형되어 화면에 노출되었습니다.

서버에서 데이터 구조를 변경하기보단 프론트엔드에서 데이터 구조를 변경하는 방법을 선택했습니다. 그래프 데이터는 새로고침(갱신)을 통해 최신 데이터를 반영하고 있었기 때문에 실시간 데이터를 변환해 그래프와 동기화 하는 방식으로 개선했습니다.

→ 새로운 객체를 생성하여 실시간 생체 신호 데이터를 구조에 맞게 주입

→ 새로고침 시 그래프의 최신 데이터를 가져오며, 실시간으로 화면에 그려지는 것에 집중

→ 생체 신호만 최신 데이터를 활용하고 나머지 객체는 빈공간으로 두어 가짜 데이터 객체를 통해 실시간인 것처럼 출력

이 작업으로 새로고침 없이도 실시간 데이터가 반영되며 그래프가 안정적으로 동작하게 되었습니다.

유지보수 및 하자보수 작업을 진행했습니다.

JIRA를 통해 작업 현황을 관리하고 팀원들과 공유하며 오류를 수정했습니다.

• 신체 정보 수정, 전동 요청, 퇴원 등 사이드 컴포넌트 작업을 담당했습니다.

• 텍스트 오류 수정 및 기획자와 논의 후 예외 케이스에 대한 알림 기능을 추가했습니다.

• 병동 및 병실 정보를 모달로 작업하여 사용성을 개선했습니다.

느낀 점 및 앞으로의 계획

• 코드 유지보수 용이성의 중요성: 프로젝트가 확장되면서 유지보수의 중요성을 깨달았습니다. 앞으로 코드를 작성할 때, 코드의 가독성과 구조를 신경 써서 유지보수가 쉬운 코드에 집중하겠습니다. 이를 위해, 코드 리뷰와 디자인 패턴을 학습하여 적극적으로 반영할 계획입니다.

• 예외 처리의 중요성: QA 테스트를 통해 예외 처리에 대해 배웠습니다. 다양한 예외 상황을 예측하고, 적용하여 안정적인 시스템을 유지하겠습니다. 다양한 방법을 통해 예외 상황을 지속적으로 검증할 것입니다.

• 협업 프로세스와 소통: 개발팀 내의 다른 팀원들과의 소통 및 일정 관리를 통해 협업 프로세스의 중요성을 배웠습니다. 원활한 협업을 위해 정기적인 회의와 팀원들과의 적극적인 소통을 통해 진행 상황을 공유하겠습니다.

• Git 관리의 중요성: Git 브랜치 전략과 커밋 메시지 규칙을 배웠습니다. 코드 변경 내역을 체계적으로 작성하여 팀원들과 공유하고 리뷰하는 과정을 통해 코드 품질을 높이겠습니다.

설명

GitHub / Site

Next.js를 사용하여 마크다운을 활용한 정적 블로그를 제작하였고, 이후 사용자 입력을 통해 게시글을 업로드하는 방식으로 전향하여 이후로도 학습을 위해 개인 블로그를 만들고자 합니다.

사용 기술

Next, TypeScript, Styled-component, Firebase, Git

주요 기여

Firebase 연동을 통해 블로그의 렌더링 방식 및 데이터 구조를 개선했습니다.

• 기존 SSG 기반 블로그를 Firebase와 연동하여 CSR, SSR 방식으로 개선했습니다.

• 서버에서 데이터를 가져와 클라이언트로 전달하는 SSR 방식을 활용하여 렌더링 최적화를 진행했습니다.

Firebase 기반의 데이터베이스 구조를 설계했습니다.

• Cloud Firestore를 활용한 데이터 저장

  • 사용자 정보 및 블로그 게시물 등 복잡한 데이터 구조 및 쿼리 필터가 필요한 데이터를 저장했습니다.

• Realtime Database를 활용한 실시간 데이터 처리

  • 실시간 채팅, 방명록, 팔로우/언팔로우 등 실시간 동기화가 필요한 기능을 저장했습니다.

  • 사용자 Id를 기준으로 팔로우한 사용자 목록 및 북마크, 방명록을 저장하여 빠른 데이터 조회가 가능하도록 했습니다.

  • 참여한 채팅방 Id를 사용자 정보에 포함시켜 채팅방 Id를 경로로 빠르게 조회할 수 있도록 했습니다.

사용자 경험을 고려한 UI 및 기능을 구현했습니다.

• 게시물의 CRUD 및 데이터 최적화

  • 게시물의 생성, 수정, 삭제, 조회 기능을 구현하여 동적 컨텐츠를 추가했습니다.

  • Firebase와 IndexedDB를 활용하여 임시글 저장 기능을 구현하고, 서버 통신을 최소화하여 성능을 개선했습니다.

• 로그인 및 사용자 정보 관리

  • Firebase Authentication를 사용한 로그인/로그아웃 구현했습니다.

  • Firebase에서 auth 기능 외에 사용자 정보를 저장하기 위해 Cloud FireStore를 사용하여 구체적인 사용자 데이터를 저장했습니다.

느낀 점 및 앞으로의 계획

• API 설계와 데이터 구조의 중요성: 프로젝트 진행 과정에서 사용자 정보 및 메타 데이터의 관리 방법을 결정하면서, 체계적인 API 설계와 효율적인 데이터 구조의 중요성을 깨달았습니다. 앞으로는 상황에 따라 더 빠르고 안정적인 데이터 구조에 대해 고민해볼 생각입니다.

• SSR 전환 및 효율적인 코드 개선: 렌더링 방식의 전환을 통해 코드의 구조를 다시 한 번 고민해볼 기회가 되었고, 이를 통해 기존 코드의 문제점을 단계별로 파악하며 구조를 개선했습니다. 이를 통해 사용자에게 더 빠르고 안정적인 서비스를 제공함과 동시에 유연하고 읽기 쉬운 코드가 서비스 확장에 얼마나 중요한지 느꼈습니다.

• UI 개선과 코드 개선: 고민한 코드는 보기 좋은 코드를 만든다고 생각합니다. 따라서 지속적인 코드 개선과 UI 개선을 통해 사용자의 경험을 더욱 중시하고자 합니다. UI에 스타일을 적용하고, 오류 수정을 통해 사용자 경험을 개선할 계획입니다.

• 파일 구조와 디자인 패턴: 좋은 코드란 것은 수정하기 용이한 코드인 걸 알게 되었습니다. 코드가 다른 코드를 의존하지 않고, 쉬운 변경으로 사용할 수 있는 코드를 작성하기 위해 디자인 패턴에 대해 학습하고 프로젝트에 적용할 계획입니다.

Todo 앱을 JSDoc 문서화 챌린지

• CRUD 요구 사항에 맞춰 Todo 앱을 TypeScript의 Interfase로 설계하고 모델링

TypeScript Exercises 도전

• 1단계 (최소) 9단계까지 도전

• 왜 타입에러가 발생했고, 어떻게 해결할 수 있었는지 문서에 저장

원티드 프리온보딩 챌린지 프론트엔드 코스 사전과제

기술 스택: React, TypeScript, React-Query, Recoil, Styled-Components

• 로그인/회원가입 기능 개발

• Todo List CRUD 기능 개발

• 작성한 코드의 개선