미리보기

느린 발달 아동과 양육자를 위한 서비스를 제공합니다. 프로젝트 기간과 요구사항에 따라 적절한 라이브러리/프레임워크를 검토하며 유연한 개발을 진행했습니다.

• 프로젝트 안정성을 위한 테스트 코드 도입

• 2024년 총 13건의 자동화 작업을 통한 업무 생산성 개선

• React Query 도입 및 캐싱을 활용하여 API 호출 최적화

• React, Vue3, Svelte, SvelteKit 등 다양한 라이브러리/프레임워크를 활용한 프로젝트 운영 및 마이그레이션 경험

• 복잡한 프로세스 및 트러블슈팅 과정 Notion 내 문서화

• 유지보수성과 테스트 용이성을 고려한 리팩터링 진행

• React Native, Flutter 사용 경험

• Docker/Podman, AWS S3/CloudFront/Route53/Fargate 사용경험

• 프로젝트 설명 :

  다양한 입력 형태를 지원하는 상담 신청서 폼 개발 및 백오피스 내 신청서 조회·다운로드 기능 구현

• 기술 스택 : React, TypeScript, React-Query, Recoil, Vitest, Testing Library, FastAPI

• 핵심 내용

  • 상담신청서 문항 구조화를 통한 동적 UI 생성

    • 문항이 다양한 입력 요소들과 속성으로 이루어져 구조화에 어려움을 겪음

    • 문항별 필요한 옵션들을 TypeScript의 interface로 정리하고 이에 맞춰 JSON 구성

    • 문항들을 컴포넌트화하고, 옵셔널/그룹문항은 부모-자식 관계를 반영한 ID 네이밍 규칙을 통해 그룹 내 응답을 식별하여 동적 UI 생성

  • 방대한 문항 답변에 대한 사용자 경험 개선

    • multi-step form으로 구성

    • 중간 저장기능을 위해 localstorage 활용

    • validation 검증 시 미응답 문항으로 스크롤 및 하이라이트

  • 캐싱을 이용한 불필요한 API 호출 방지

    • 전체 사용자 정보 API 호출 시 3초 이상 소요,

      해당 화면에 재진입 할 때마다 대기 시간 발생

    • React Query를 도입하여 캐싱 시간을 설정하여, API의 불필요한 재 호출을 방지

• 프로젝트 설명 :

  Google Play의 정책 준수를 위해 스토어 내 삽입할 계정 삭제 페이지를 개발

• 기술 스택 : SvelteKit, TypeScript, Tailwind CSS, Podman

• 핵심 내용

  • 이메일/카카오톡/애플 로그인을 통한 사용자 검증 및 비밀번호 재설정 기능 구현

  • Server-Side Cookie를 통한 보안 강화

    • 계정 삭제 기능은 사용자의 개인정보를 일괄 삭제하기 때문에, 사용자 검증의 정확성과 보안 강화를 우선적으로 고려

    • Server-Side Cookie를 활용하여 토큰을 HttpOnly 쿠키에 저장함으로써 클라이언트 측에서의 쿠키 조작을 방지함

• 프로젝트 설명 : 기존 서비스를 장기적으로 사용함에 따라 유지보수와 확장성을 고려하여 Svelte에서 React로 마이그레이션

• 기술 스택 : React, TypeScript, Recoil, Vitest, Testing Library

• 핵심 내용

  • UI와 비즈니스 로직 분리

    • 마이그레이션 과정에서 프로젝트가 기존과 동일하게 동작하는지 검증하기 위해 테스트 전략을 세움

    • 기존 Svelte 프로젝트에서 UI와 로직이 한 곳에 결합되어 있어 테스터블 하지 않았음

    • React 마이그레이션 과정에서 Custom Hooks를 활용해 UI와 비즈니스 로직을 분리하여, 테스트 용이성을 향상시킴

  • 테스트코드 전략

    • 사람이 직접 확인하기 어려운 복잡도가 높은 로직 위주로 테스트 진행

    • Vitest를 활용해 순수 함수 검증

    • Testing Library를 활용해 Custom Hooks를 검증

• 프로젝트 설명 :

  양육자 및 코치 대상으로 수기 발송하던 카카오 알림톡/슬랙 알림을 자동화

• 사용 채널 : Notion, Slack, ChannelTalk, NCP(네이버 클라우드 플랫폼)

• 기술 스택 : Python, Pandas

• 핵심 내용

  • 운영 단의 반복 업무 자동화를 통한 업무 생산성 증대

    • 운영팀에서 리텐션 관리를 위해 알림톡 발송을 수기로 예약하며 많은 리소스를 소모함

    • 반복작업에 투여되는 리소스를 절감하고자 이를 자동화를 할 수 있는 방법에 대해 논의

    • 초기 2건에서 총 13건으로 점차 늘려나가며 지속적으로 운영팀의 업무 생산성을 증대시킴

  • 프로그램의 안정성을 고려한 개발 과정

    • 10,000건 이상의 Notion DB 활용 시 Filtering 기능을 활용해, 요청 속도를 개선하고 KeyError를 방지

    • 발송 결과에 대한 로그를 슬랙으로 발송하여 발송 실패 시 즉각 대응할 수 있는 환경 구축

    • 다량 데이터 처리/반복적 API 호출로 발생하는 500대 에러를 시간차 재시도 로직으로 해결, 발송 성공률 개선

• 프로젝트 설명 : 아동 발달 현황을 체크리스트로 평가하고, 점수 기반 보고서를 제공하는 서비스와, 양육자가 작성한 자료를 조회 및 다운로드하며 사용자 리스트를 관리할 수 있는 백오피스를 개발

• 기술 스택 : Svelte, TypeScript, Tailwind CSS, Chart.js, FastAPI

• 핵심 내용

  • 웹 접근성 세미나 발표 진행 및 프로젝트 적용

    • 접근성 미준수로 인한 불편 체험과 법적 분쟁 사례를 공유하며 공감대 형성

    • 프로젝트 내 적용할 수 있는 접근성 점검·개선 방안 논의

    • 세미나 이후 양육자가 사용하는 웹 서비스에 대해 ARIA 속성 활용, 키보드 내비게이션 최적화, 색 대비 개선 등의 과정을 거쳐 Lighthouse 접근성 점수를 90점대로 향상함

  • 생산성을 고려한 개발 환경 구축

    • 백엔드 API 개발 전 대기 시간을 줄이기 위해, FastAPI로 임시 API를 구축해 병렬 개발 환경을 조성

    • Figma plugin을 통해 반응형 디자인을 Tailwind CSS 코드로 변환하여 퍼블리싱 생산성 향상

• 프로젝트 설명 : 백오피스 신규 기능 개발 및 유지보수

• 기술 스택 : Vue3, Typescript, Pinia, Quasar

• 핵심 내용

  • 새로운 기술 도입을 통한 개발 안정성 및 생산성 확보

    • Vue2에서 Vue3의 Composition API로 전환하여 최신 버전의 성능과 유지 보수성을 확보함

    • TypeScript를 도입하여 타입 안정성과 예측 가능성을 높여 버그를 줄이고 개발 효율성을 증대

    • 높은 테이블 활용 빈도를 고려해, 테이블 컴포넌트에서 다양한 기능을 제공하는 Quasar를 도입

    • UI 구현을 표준화하고 개발 효율성을 극대화함

  • 기존 권한 관리의 불편 해소

    • 이메일/비밀번호를 매번 발급해야 하는 번거로움, 잦은 비밀번호 분실로 인한 관리단의 어려움 존재

    • 구글 로그인을 도입을 통해 별도의 계정 발급 과정을 없애며 권한 관리 용이성을 높임

    • 구글 OAuth 사용자 유형을 내부로 설정하여 외부 메일 계정의 접근을 차단하고 보안을 강화함

2024.09 ~ 2024.11

[활동 내용]

팀장으로서 Notion을 활용해 팀원들의 일정과 과제 진도를 관리하며 참여도를 높였으며, 자발적인 코드 리뷰를 통해 팀 내 코드 리뷰 문화를 확산했습니다. 모든 과제를 통과하며 프론트엔드 과정 중 대표 수료생으로 마무리했습니다.

• Vanilla JavaScript로 SPA 구현

• Zustand/Jotai, React Query을 활용한 리팩터링

• FSD(Feature-Sliced Design) 아키텍처를 활용한 리팩터링

• Vitest, Testing Library를 이용한 테스트코드 작성 및 테스트전략 작성

• CloudFront를 활용한 캐싱 및 React 성능최적화 진행, Lighthouse를 이용한 성능 측정

[주차별 회고]

클린코드 주차 회고
React Hooks 구현 주차 회고
중간회고

2022.09 ~ 현재, 주 1~2회

[활동 내용]

2~6명 사이의 인원과 프론트엔드로서 익혀야 할 주요 개념이나 프레임워크를 학습했으며 독서, 알고리즘 문제풀이, 툴 학습을 위한 사이드프로젝트 등 다양한 방식으로 스터디를 진행했습니다.

• 프레임워크 학습(Next.js, Svelte), 테스트코드 작성, 모던/코어 JavaScript 독서 모임, TypeScript, Open AI 활용, 알고리즘 등의 주제로 학습 진행

• 실무에 Vitest와 Testing Library를 도입했으며,

  Svelte 기반 개발이 필요할 때 빠르게 적용함

[Github]

GraphQL 스터디 회고
Next.js 모각코 회고

2023.04 ~ 2024.04, 주 1회 JavaScript 주요 메서드/알고리즘 교육 진행

2022.09 ~ 2024.01 항해99 개발자 코스 지원자 면접 진행