미리보기

Saas 형태의 웹 기반 RPA 솔루션 프론트엔드 개발 및 운영

* RPA 솔루션? 사람이 수행해야 할 반복 작업을 자동으로 처리하여 작업의 효율성을 높이고, 이에 따라 더 중요한 업무에 집중할 수 있도록 도와주는 도구

기술 스택

• Vue.js, Vuex, HTML5, CSS3, Git, Cypress

역할

• 코드 없이 사용자가 쉽게 RPA 프로세스를 디자인할 수 있는 도구 컨셉을 충족시키기 위해 Vue.js를 활용하여 21개월 동안 매월 1~2회 제품 버전 업데이트

• 릴리즈 전 테스트 시간 증가 및 업데이트 후 고객이 먼저 오류를 발견하는 상황을 해결하기 위해, Cypress E2E 테스트 프레임워크를 사용하여 실제 사용 환경에서의 오류를 감지. 릴리즈 전 테스트 시간을 단축하고 기존 기능 오류를 사전에 확인

• 동적 화면 렌더링이 빈번하게 발생하는 RPA 프로세스 디자인 도구의 기술을 Thymeleaf보다 Vue.js가 적합하다고 내부 회의를 통해 결정한 후, 4명의 팀원과 협업하여 기능 목록을 정리하고 일정을 계획하여, 기존 기능을 유지하며 Vue.js로 마이그레이션을 진행

• 고객의 디버깅 기능 부재에 대한 불편을 해결하기 위해, RPA 프로세스 실행 도구인 웍 봇과 통신하는 Web Socket의 메시지 양식을 웍 봇 담당자인 C# 개발자와 협업하여 정의하고, 이를 기반으로 디버깅용 테스트 실행 기능 2개를 구현. 이를 통해 RPA 프로세스를 스크립트 코드로 변환하고, 변환된 코드를 실행하는 과정을 단순화하여 사용자들의 업무 효율성 향상

• 복잡한 RPA 프로세스를 고객이 편리하게 볼 수 있도록 CSS3 Transform 속성 중 Scale 함수를 사용하여 RPA 프로세스가 디자인된 영역을 6단계로 확대, 축소하는 기능을 구현하여 사용자 경험 개선

• 팀원들이 Git에 익숙하지 않은 상황에서, 프로젝트를 효율적으로 관리하기 위해 Git CLI의 기본 명령어와 활용법을 주제로 세미나를 진행하여 Git과 Bitbucket을 사용한 프로젝트 관리 체계를 도입

• 6명의 팀원이 2개의 리포지토리(백엔드, 프론트엔드)를 효과적으로 관리하기 위해 Git Flow 전략을 도입하여 main과 develop 브랜치를 구분하고, 기능 및 에러에 맞는 브랜치명을 사용해 효율적으로 브랜치를 관리

• 프로젝트와 관련된 주제를 발표 및 토론하는 월 1회 세미나를 진행하여 팀원들과 함께 공부하는 환경을 조성했으며, 크롬 확장 프로그램에 대한 주제로 발표한 덕분에 회사에서 개발 및 운영 중인 '웹 레코더'의 버그 수정 업무를 맡을 때 유용하게 활용

기술 스택

• Next.js, React, TypeScript, React Query, Zustand, React Hook Form, Zod, msw, shadcn/UI, TailwindCSS

역할

• Next.js를 처음 접하는 팀원들이 프로젝트에 원활히 참여할 수 있도록, 파일 시스템 라우팅 개념을 주제로 세미나를 제안 및 진행하여 팀원들이 라우팅 설계에 필요한 기본 지식을 갖추고 불편사항 접수 페이지 구현에 기여할 수 있는 환경을 조성

• 백엔드 API가 제공되지 않는 상황에서도 답글 CRUD 기능을 기한 내에 구현하기 위해 MSW(Mock Service Worker)를 활용하여 사용자 경험을 재현

• 답글 작성과 편집 UI의 디자인이 동일한 점을 활용해 단일 책임 원칙(SRP)을 준수하고, 컴파운드 컴포넌트 패턴을 적용하여 재사용성과 유연성을 높인 답글 영역 기능을 구현

• 프로젝트 관리 도구 Linear를 활용한 데일리 스크럼에서 페이지네이션 작업 지연 문제를 발견하고, 담당자와 코드 리뷰를 통해 중복 코드를 정리하고 컴포넌트를 분리하여 기한 내에 기능을 구현

• 인프런 워밍업 클럽 네트워킹 데이 / 24.12

  • 자신의 커리어 여정에 대해 깊이 고민하고, 그 중요성을 깨닫는 기회를 가짐

• 인프랩 INFCON 2024 서포터 활동 / 24.08

  • 강연장 내부에서 참가자 안내와 네트워킹 파티 안내 등의 역할을 수행

  • 네트워킹 파티에서 소통하는 방법과 고민을 공유하는 기술을 배움

• 원티드 하이파이브 프렌즈 대상 커리어 코칭 / 24.07

  • 개발자의 이력서에 문제 해결 능력을 강조해야 함을 알게 됨

  • 꾸준히 글을 쓰는 것의 중요성을 깨닫고, 개발 블로그에 글을 자주 써야겠다는 결심을 함

• 2024 WASSUP42 / 24.07

  • 이력서 작성 시 자신을 효과적으로 어필하는 방법에 대해 배움

• 원티드 하이파이브 2024 컨퍼런스 프렌즈 활동 / 24.05

  • 강의장 외부에서 참가자의 입장권을 확인하고 안내하는 역할을 수행

  • 빠르게 변하는 기술 환경에서 어떻게 공부하면 좋을지에 대한 인사이트를 얻음

• 알고리즘 스터디 / 4인 스터디 리드 / 25.01~

  • 코딩테스트 문제를 시간 내에 풀어낼 수 있는 역량을 기르기 위해 알고리즘 스터디에 참여하여 매주 3개의 문제를 풀이하고, 문제 접근 방식을 회고로 작성하여 메타인지를 향상시키며, 다른 사람에게 내 코드를 설명하는 데 필요한 능력 향상

• 꾸글(개발 블로그 포스팅 스터디) / 4인 스터디 / 24.06~

  • 매주 개발 블로그 글을 작성하며 글쓰기 역량을 키워 실무에서 회의록 및 문서화 작업 시 빠르고 정확하게 작성

  • 기술적 개념을 다른 사람이 쉽게 이해할 수 있도록 정리하는 능력을 배양하여, 프로젝트 문서화나 커뮤니케이션에서 효율적으로 활용

• GitHub 잔디 심기 100일 챌린지 스터디 / 11인 스터디 리드 / 24.08~24.11

  • 꾸준한 학습 습관을 기르기 위해 기획하고 운영한 스터디로, '코딩테스트 합격자되기' 책에 나온 100문제 중 42문제를 풀면서 문제 해결 능력 향상

  • 매일 꾸준히 학습하면서 어려운 문제도 스스로 해결하는 능력 향상

• 알고리즘 스터디 / 3인 스터디 리드 / 24.05~24.12

  • LeetCode에서 3개의 문제를 풀고 코드 리뷰를 통해 다른 사람들이 읽기 쉬운 가독성 좋은 코드를 작성하는 방법 습득

  • GitHub PR을 통한 코드 리뷰 경험으로 팀 내 소통 능력 및 코드 개선 능력 향상

• 기술 서적 9주 스터디 / 3인 스터디 리드 / 24.03~24.05

  • “모던 자바스크립트 Deep Dive”와 “면접을 위한 CS 전공 지식 노트” 책을 읽고 JavaScript와 CS 지식을 이해하여 9월 실무 프로젝트에서 코드 흐름과 CORS 오류 발생 원인을 빠르게 파악할 수 있었음

• 알고리즘 10주 스터디 / 4인 스터디 / 24.02~24.05

  • BFS, DFS 등 알고리즘 10개 유형을 학습하고, 각 유형에 맞는 문제를 풀면서 문제 해결 능력 강화

  • 매주 알고리즘 유형에 맞는 3개의 문제를 풀어가며, 주어진 문제를 해결하는 방법을 논리적으로 정리하고 발표하는 경험을 통해 소통 능력 향상

• 노마드코더 리액트 10주 챌린지 스터디 / 23.09~23.11

  • React, Next.js 를 학습 후 풀스택으로 미니 SNS 웹 애플리케이션 구현