미리보기

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

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

기술 스택

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

역할

• Vue.js를 활용하여 사용자가 코드 없이 RPA 프로세스를 플로우차트 형태로 디자인할 수 있는 기능을 기획, 개발, 테스트하고, 21개월 동안 매월 1~2회 제품 배포

• Cypress를 도입하여 10개의 주요 기능에 대한 E2E 테스트 스크립트를 작성하고 테스트 자동화를 구현함으로써 수동 테스트 시간 단축

• Thymeleaf로 구현된 실시간 DOM 조작이 빈번한 RPA 프로세스 디자인 캔버스 페이지를 Vue2로 마이그레이션하여, 웍 디자이너 솔루션의 프론트엔드 기술 스택을 Vue2로 통합했습니다. 이를 통해 코드 일관성을 확보하여 개발 생산성 향상

• WebSocket을 활용하여 RPA 프로세스 디버깅 기능 2개를 구현하여 디버깅 프로세스를 2단계에서 1단계로 간소화하여 사용자 경험 개선

• CSS Transform 속성 중 Scale 함수를 사용하여 RPA 프로세스를 6단계로 확대 및 축소 기능 구현으로 사용자의 조작 편의성 개선

• Git CLI 기본 명령어와 활용법, Git Flow 전략을 주제로 세미나를 진행하여 Git에 익숙하지 않은 팀원들에게 교육을 제공하고, Git과 Bitbucket을 활용한 프로젝트 관리 체계를 도입

• 목적: 앱 버전으로만 제공되어 오던 오피스너 프로그램을 PC로도 사용하고 싶다는 고객의 니즈를 발견하여 웹 버전으로 추가 구축하여 입주자들의 이용 편의를 더욱 향상하고자 함

• 기술 스택: React, TypeScript, Next.js, React Query, Zustand, shadcn/UI, TailwindCSS

• 팀 구성: 프론트엔드 개발자 5명

• 액션

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

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

  • Next.js를 처음 접하는 팀원들을 대상으로 파일 시스템 라우팅 개념에 관한 세미나를 진행하여, 팀원들이 라우팅 설계를 이해하고 불편사항 접수 페이지 구현에 효과적으로 기여할 수 있도록 지원

  • 노션을 활용해 데일리 스크럼 기록, 라우팅 설계 문서, 프로젝트 결과 보고서 등 문서를 체계적으로 관리하여 팀의 협업 효율성을 향상

  • 프로젝트 관리 도구 Linear를 활용해 데일리 스크럼에서 작업 상황을 공유하며 페이지네이션 작업 지연 문제를 발견. 이후, 담당자와 코드 리뷰를 통해 원인을 파악하고 기한 내에 작업 완료

  • Figma의 댓글 기능을 활용해 디자이너와 소통하며 댓글창 편집 모드의 UI/UX 의도를 명확히 파악하고, 이를 반영하여 댓글 기능 구현

• 성과

  • MSW(Mock Service Worker) 라이브러리를 사용하여 답글 CRUD 기능을 위한 Mocking API를 구현, 백엔드 API 없이도 프론트엔드 개발을 독립적으로 진행할 수 있게 되어 개발 생산성 향상

  • 단일 책임 원칙(SRP)과 컴파운드 컴포넌트 패턴을 적용하여, 답글 작성 및 편집 UI 재사용성을 높이고 코드 유지보수성을 향상

• 목적: 노마드코더 리액트 10주 챌린지 스터디에서 배운 기술(React, Next.js, TypeScript)을 활용하여 미니 SNS 웹 애플리케이션 구현

• 기술 스택: Next.js, TypeScript, React, Tailwind CSS, SWR, Iron-session

• 액션

  • Pinterest에서 SNS UI 디자인을 참고하고 Tailwind CSS를 사용하여 퍼블리싱

  • SWR과 iron-session 라이브러리를 사용하여 로그인 기능 구현

  • API Route를 사용하여 SNS 글 조회, 생성, 좋아요 API와 기능 구현

• 성과

  • 서버 컴포넌트를 활용한 SSR로 SNS 글 목록 조회 시 초기 로딩 속도를 개선

• 기간: 2025년 1월 ~ 현재

• 활동

  • JavaScript 언어를 사용해서 매주 3개의 문제 풀이(LeetCode 문제 2개 + 프로그래머스 문제 1개)

  • 각자 문제를 풀이하고 회고록을 작성하여 코드와 함께 PR 작성

  • 매주 1회 온라인(디스코드) 모임에서 서로의 풀이를 공유하고 토론

• 성과

  • 매주 꾸준히 문제를 풀며 공부하는 습관 형성

  • 다른 사람의 풀이를 통해 다양한 문제 해결 방법을 배우며 문제 해결 능력 향상

• 기간: 2024년 10월 ~ 2024년 11월(4주)

• 활동

  • 4주간 총 4개의 미션 풀이

  • 4주간 20명의 참여자들과 미션 코드 리뷰 진행

• 성과

  • 회고를 통한 자기 반성 과정에서 메타인지를 향상시켜 문제 해결 능력과 학습 효율성을 높일 수 있다는 점을 배움

  • 적당한 난이도의 과제를 설정하고 몰입하는 환경을 만드는 것이 실력 향상에 필수적임을 이해

  • 미션을 통해 TDD(테스트 주도 개발)에 대한 경험과 개념 및 장점에 대해 학습

• 기간: 2024년 6월 ~ 현재

• 활동

  • 개발 블로그에 업로드할 글을 매주 1개 이상 작성

  • 작성한 글을 꾸글 GitHub Discussions을 사용하여 공유

  • 매주 일요일 오후 8시에 온라인 디스코드에서 모여 작성한 글 소개 후 토론 진행

• 성과

  • 매주 1개 이상의 글을 작성하여, 글의 주제를 선정하고 구조를 자연스럽게 구성하는 능력 향상

  • 반 년 이상 꾸준히 글을 작성하면서 문서화 능력 향상

• 기간: 2024년 06월(2주)

• 활동

  • 2주간 8개의 개인 과제와 2개의 단체 과제 수행

  • 각 과제마다 톺아보기 활동 수행

• 성과

  • 네이버 부스트캠프 베이직 과정 2주 수료

  • 10개의 과제를 통해 문제 해결 능력 강화

  • 톺아보기 활동을 통해 회고의 중요성을 배우고, 회고를 통해 메타인지를 향상시켜 자신이 부족한 점을 인식하며, 무엇을 더 공부해야 하는지 알게 됨

• 기간: 2023년 9월 ~ 2023년 11월(3개월)

• 활동

  • 10주 동안 5개의 강의를 듣고 React, TypeScript, Next.js를 학습 후, 4개의 졸업 작품을 구현

  • 10주 동안 10개의 주간 회고록 작성

  • 리액트 10주 챌린지 스터디 중간모임 1회, 모각코 2회 참여

• 성과

  • 스터디에서 학습한 React, TypeScript, Next.js을 사용하여 SNS 'Lutweet' 프로젝트 구현

  • 리액트 10주 챌린지 스터디 수료

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

  • 자신의 커리어 여정에 대해 깊이 고민하는 기회를 가짐

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

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

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

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

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

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

• 2024 WASSUP42 / 24.07

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

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

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

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