미리보기

프론트엔드 개발 환경 구축

프론트엔드 개발 환경 통합, IT 마이그레이션, CI/CD 구축을 통해 개발자 경험을 개선하는 작업을 리드하였습니다.

Situation

• 유지보수 비용 증가

  
  MGRV의 프론트엔드 앱 세 개의 개발 환경이 달라서 유지보수가 제대로 이루어지 않고 관리 비용이 증가하고 있었습니다.
외주로 운영되던 프론트엔드 개발을 내재화하며, 관리 비용을 줄이기 위해 프론트엔드 개발 환경 통합이 필요했습니다.

• 신규 웹 서비스 개발을 위한 SEO 및 성능 최적화
  신규로 개발하는 객실 판매 웹 서비스의 사용자 유치를 위해 SSR을 도입해야 했습니다.

Action

• Turborepo를 활용하여 Polyrepo를 Monorepo로 전환

  • 스크립트 의존성을 분리해 태스크 단위로 관리하고, 빌드 스크립트를 병렬 실행하고, 캐시를 이용해 중복 빌드 작업을 건너뛰었습니다.

  • 공통으로 사용하는 ESLint와 타입스크립트 설정 패키지를 생성하여, 관리 포인트를 줄이고 일관된 개발 경험을 제공했습니다.

• 간편한 인프라 관리를 지원하는 Vercel과 Github Actions를 활용하여 CI/CD 구축

  • Vercel에 모노레포를 연결하다보니 코드를 수정하지 않은 패키지도 트리거되어서, Vercel의 Ignored Build Step을 이용해 코드를 수정한 패키지만 배포되게 설정해주었습니다.

  • Github Actions를 이용하여 빌드에 실패하면 PR을 머지할 수 없게 제한하고, 워크플로를 통해 도메인을 선택하여 원하는 브랜치를 배포할 수 있게 했습니다.

• Next.js로 React.js 프로젝트 세 개 이관

  • 성능, SEO, 개발자 경험을 위한 기능과 최적화를 제공하는 React 프레임워크인 Next.js로 React.js 프로젝트 세 개를 이관했습니다.

• AWS Cognito를 추가하여 Admin 보안 강화

Result

• 프론트엔드 개발 환경 통합으로 개발자 경험 개선

• SSR 도입으로 SEO 개선 및 특정 페이지의 Largest Contentful Paint (LCP) 80% 감소

1. 영어 실력 진단 서비스의 웹뷰 개발

Situation

• 영어 실력 진단 서비스 정식 출시를 위한 베타 서비스 릴리즈

Action

• 영어 실력을 세 가지 메트릭으로 나타내는 인터랙티브 차트 구현


  • 스택형 라인 차트와 막대 차트를 구현했고 PC에서는 호버, 모바일에서는 터치를 통해 상세 정보를 담은 툴팁이 나타나게 했습니다.

• react-datepicker를 도입하고 캘린더를 커스텀하여 기간 설정 팝업 구현

  • 기존에 사용하던 캘린더 패키지에서 사용중인 버전이 더이상 지원되지 않아서, 캘린더 패키지를 비교하여 지속적으로 업데이트되며
localization이 가능하고 커스텀 자유도가 높으며 비교적 문서화가 잘 되어있고 크기가 작은 react-datepicker를 도입했습니다.

• TanStack Query의 useInfiniteQuery를 이용하여 더보기 버튼을 구현하며, 캐싱을 활용해 불필요한 API 호출 감소

• 워딩 시트를 활용하여 국제화(i18n)를 자동화하며 협업 비용 및 개발 비용 절감

Result

• MAU 1,000명 이상

Improvement

• 리팩토링을 통해 불필요한 리렌더링 및 api 호출 감소, 가독성 및 재사용성 향상

2. Rails로 구현된 화면을 React로 이관

Situation

• 문서와 명확한 정책 없이 방치되어있고, 결제 모듈이 포함되어 있으며 Rails로 구현된 화면

Action

• 레거시를 가장 잘 알고 있는 개발자와 디자이너에게 질문하며, 결제 플로우를 다이어그램으로 나타내고 정책 및 기능 문서화

• React.js 이관 과정에서 UX 개선 및 리팩토링이 필요한 지점을 정리하여 팀에 제안 및 반영

3. TanStack Query 및 Next.js 스터디

Situation

• 처음 사용해보는 TanStack Query와 Next.js를 업무에 잘 적용하기 위해 스터디 제안

Action

• 인턴 동기와 주 2-3회 공식 문서를 기반으로 스터디 진행

Result

• 빠른 업무 적응 및 테크 팀을 대상으로 TanStack Query Use Case 세미나 발표

20대 30대 직장인들이 지인들과 함께 만드는 맛집 지도를 통해 손쉬운 식당 선택을 돕는 웹 애플리케이션

프론트엔드 개발의 35%를 담당하였습니다.

• 쿠키, route handler, 미들웨어를 이용해 권한을 관리하여, 기회원 여부, 가입하다가 중간에 이탈한 사용자, 초대를 받아서 진입한 사용자를 모두 고려한 인트로 퍼널을 구현하였습니다.

• UI 컴포넌트 라이브러리들의 소스 코드와 인터페이스를 참고하여, Framer Motion을 이용해 바텀시트와 캐러셀을 직접 구현했습니다.

• TanStack Query의 useQuery처럼 data, error, loading 값을 리턴하고, enabled와 key 값에 따른 캐싱 기능을 제공하는 커스텀 hook을 만들었습니다. 불필요한 API 호출을 제거해 호출 횟수를 50%로 줄였고, 로딩 중일 때는 스켈레톤 UI를 표시하고 에러 발생 시에는 토스트를 띄워서 성능과 사용자 경험을 개선했습니다.

• 팀 구성 - 클라이언트 3명, 백엔드 4명, 디자이너 2명

• https://www.korrk.kr/

• https://github.com/mash-up-kr/VitaminC_Web

반려동물 훈육 보조 모바일 웹 서비스

프론트엔드 개발 50%, ML 100%, 기획 40%, 디자인 20%, 그리고 프로젝트 매니징을 담당하였습니다.

• 프론트엔드 폴더 구조를 설계하고 기술 환경을 구성했으며, 모바일 사용자 경험을 위해 반응형 UI를 구현했습니다.

• 모바일 사용자 경험을 개선하기 위해 PWA를 도입하여, 사용자에게 모바일 애플리케이션과 유사한 경험을 주고자 했습니다.

• 서비스에 재미 요소를 추가하고 싶어서 강아지 감정 분석 기능을 제안하고 구현했습니다. 이미지 분류에 용이하고 가벼운 네트워크인 EfficientNet-B0를 학습시켜 강아지의 감정을 예측하고, FastAPI를 이용해 학습한 모델을 서빙했습니다.

• 배포를 한 프로젝트가 없는 것이 아쉬워서 배포를 담당했고, AWS EC2를 이용해 프론트엔드와 ML 서버를 배포하고 졸업 작품 전시회에서 시연했습니다.

• 팀 구성 - 클라이언트 2명, 백엔드 1명

• https://github.com/2022-2-Graduation-Project

다문화 가정 부모를 위한 가정통신문 번역 및 자녀 일정 관리 모바일 애플리케이션

모바일 애플리케이션 개발의 60%와 프로젝트 매니징을 담당했습니다.

• 코드 품질을 높이기 위해 TypeScript를 사용하고 싶어서, JavaScript로 작성했던 한 프로젝트를 TypeScript로 이관하며 학습하고 이 프로젝트에서 사용해보았습니다.

• 번역 화면 UI를 한 눈에 파악하기 편하고 기능을 손쉽게 사용할 수 있도록 구상하고 구현했습니다.

• UX 멘토링을 바탕으로 화면의 깊이를 줄이고 카피를 수정하고 자주 사용할만한 기능을 홈에 배치하여, 사용자가 더 이해하기 쉽고 접근하기 편한 UI로 개선했습니다.

• 기한 내에 원하는 결과물을 낼 수 있도록 작업을 분담하고 시간을 관리했고, 정기 회의를 주최하고 상시 적극적으로 소통하며 이슈를 빠르게 해결하고 프로젝트를 개선해나갔습니다.

• 팀 구성 - 클라이언트 2명, 백엔드 2명

• https://github.com/dsc-sookmyung/2022-Answer-SolutionChallenge

프론트엔드 개발자들과 함께 공부하고 기술 이야기를 하며 성장하고 싶어서, 웹(프론트엔드) 팀이 있고 직장인 비율이 높은 개발 동아리 Mash-Up에서 활동하게 되었습니다.

• 실무 지식 공유 - 세미나와 플랫폼별 테크톡 참여 (동시성을 주제로 세미나 발표)

• 심화 학습 - CS 스터디와 React 소스 코드를 통한 내부 동작 원리 스터디 (https://velog.io/@hee-suh/series, OS 공부 기록 정리 노션)

• 팀 프로젝트 - 디자이너, 프론트엔드, 백엔드 개발자로 구성된 9인 팀 (https://github.com/mash-up-kr/VitaminC_Web).

GDSC 활동을 통해 개발에 몰입하는 경험을 하고 자신감과 동료 개발자를 얻었습니다. 더 많은 학우들이 함께 성장할 수 있길 바라며 교내 개발자 커뮤니티를 더욱 활성화시키고자 GDSC Sookmyung을 리드했습니다. 코로나가 완화되는 시점이어서 게더타운, ZEP, 화상 미팅을 이용하여 매주 하이브리드로 활동을 진행했으며 좋은 방향으로 커뮤니티를 이끌어나가기 위해 구성원, 운영진, 타대학 리드들과 다양한 플랫폼을 이용해 꾸준히 소통했습니다. 또한 스크럼, 팀 블로그, 세미나를 통해 멤버들이 Solution Challenge에 완성도 높은 프로젝트를 제출할 수 있도록 도왔고, 5개의 팀이 Global Top 100에 이름을 올리며, 전 세계에서 가장 많은 준결승 진출을 이루어냈습니다.

• 22-23 GDSC 우수 리드로 선정 (31 개의 대학 참여)

• 학우들의 기술적 역량 및 커뮤니티 참여 강화 프로그램 운영

  • 기술 세션 및 그룹 스터디 - 관심 분야와 수준별 맞춤형 스터디 개설

  • 네트워킹 이벤트 - 교내 커뮤니티 이벤트 및 9개 대학 연합 해커톤 2023 GDSC KR Winter Cup 주최

• 팀 블로그, Github, 유튜브, 인스타그램, 페이스북 운영을 통해 구성원 경험 향상, 활동 아카이빙, 브랜딩