미리보기

사용기술: Next.js, TypeScript, Tanstack Query, PNPM, TailwindCSS, GraphQL, StackFlow, Jira

Ringle은 아이비리그 출신의 원어민 튜터와의 1:1 화상 영어 수업을 제공하는 플랫폼으로, 시리즈 A 투자를 유치하며 기업가치 1,000억원을 달성하였습니다.

프론트엔드 팀 인턴

4개월동안 링글의 프론트엔드팀 인턴으로 근무하였으며, 팀원들과 기술적인 고민이나 질문들을 활발하게 공유하였습니다. 인턴 기간동안 한번도 써보지 않았던 기술스택들과 마주할 일이 많았고, 짧은 시간동안 최대한 빠르게 습득하고 활용 및 적용하는데 집중하였습니다. 새롭게 알게된 사실이나 팀원들에게 공유하고 싶은 내용들을 학습하고 문서를 작성해 활발하게 공유하였습니다.

• 신입 Web 온보딩 문서 리뉴얼
  Problem

  • 기존 작성돼 있던 Web 온보딩 문서에는 과거에 작성됐던 레거시 사항들이 많이 존재했습니다.

  Solution

  • 제가 온보딩을 진행하며 겪었던 여러 트러블슈팅 과정과 기존 레거시 정보들을 제거하고 필요한 정보들을 추가해 온보딩 문서를 작성하였습니다.

• Tanstack(React) Query 관련 사용 컨벤션 정의 및 도입
  Problem

  • 팀에서는 코드 내 API를 컴포넌트 혹은 페이지 내 Axios로 단독 호출하는 경우와 Tanstack Query를 사용하는 경우를 혼용하여 사용하고 있었습니다.

  • 링글 웹/앱 전면 개편을 진행하며 새롭게 만들어지는 페이지들이 많았고, 이 때 팀원들의 서버 통신 수단을 하나로 통일하여 코드의 통일성을 높이고자 했습니다.

    
    

  Solution

  • 기존 작성되어 있던 Tanstack Query 코드들과 사용 예시들을 참고하여, 더욱 코드의 응집성이 높게끔 사용 컨벤션을 정의하였습니다.

  • Tanstack Query 사용 컨벤션에 대한 문서를 팀원들에게 발표하고 피드백을 수렴해 서버와의 통신 방법을 하나로 통일하였고, 코드의 통일성과 응집성 향상에 기여하였습니다.

• 개편되는 프로덕트의 로딩 UI/UX 개선
  Problem

  • 기존 링글의 컴포넌트에서는 API Response가 오기 전, 로딩 관련 UI가 없어서 사용자가 페이지에 초기 진입할 때 UX적으로 부자연스러운 느낌을 받았습니다.

  • 더불어, Webview를 기반으로 App을 개발하였기에, 모바일 뷰에서는 부자연스러운 느낌이 더욱 크게 느껴졌습니다.

  Solution

  • 먼저 제가 속해있던 Study 스쿼드에서 로딩 스켈레톤을 도입하여 UI/UX적으로 개선되었는지에 대해 UX Design 팀원과 지속적으로 소통하며 의견을 나누었습니다.

  • 이후, FE팀에 개선된 로딩 UI/UX에 대한 제안을 하여 링글 전체 프로덕트에 로딩 UI/UX를 도입하게 되었습니다.

Description

Packit(패킷)은 구글 크롬 익스텐션 기반의 웹클리퍼 서비스입니다.

Links

• Packit Google Extension Store

• Packit Home Page

• 디스콰이엇 프로덕트 소개

Description

링글의 웹/앱 프로덕트 개편 작업 중, 신기능인 Study를 출시하기 위해 결성된 스쿼드였고, 스쿼드 인원 중 프론트엔드 부분을 담당하며 Study 기능을 출시하였습니다. 기존 유저들이 수업이 없는 날에도 플랫폼에 접속할 수 있는 자연스러운 데일리 학습을 제공하고자 이 기능을 제작하게 되었습니다.

Development

• 서비스에 필요한 모든 API 설계 및 네이밍 논의
  Problem

  • 새로운 서비스의 API의 설계할 당시, 백엔드 API 설계 패러다임을 REST에서 GraphQL로 전환하는 방안이 논의되었습니다. 하지만, 배포 기한의 제약으로 인해 GraphQL로의 즉각적인 전환보다는 REST API로 먼저 개발한 뒤, 추후 GraphQL로 Migration하는 계획이 수립되었습니다.

  • 이 과정에서 BE 팀원과의 논의 끝에 Backend for Frontend(BFF) 패턴을 채택하여 설계하기로 결정하였습니다.

  Solution

  • 비록 BFF 패턴이 Rest API 디자인 원칙에서 다소 벗어나긴 하지만, 제한된 시간 내에 Web과 App을 모두 개발해야하는 저의 생산성과 추후 GraphQL로의 마이그레이션을 고려하여 BFF 패턴을 도입하기로 하였습니다.

  • BFF 패턴을 도입하여 API를 설계한 결과, API 스펙을 맞출때의 커뮤니케이션 비용이 감소하였고 프론트엔드 생산성이 크게 향상되었습니다.

• 모바일 App 내에서 Webview를 이용해 모든 페이지 구성.
  Problem - Native Microphone Permission Issue

  • 웹뷰에서 마이크 기능에 대한 권한을 요청할 때, iOS와 AOS에서의 권한 요청이 정상 작동 하지 않음을 확인했습니다.

  • 또한 기존 Native로 개발되었던 App을 Webview 기반 App으로 개편하였기에 Webview를 통한 권한요청 Flow에 대한 사례를 기존 서비스에서 찾을 수 없었습니다.

  Solution

  • 기존 링글의 앱 서비스에서 마이크 권한을 사용하지 않는 점을 찾아냈고 info.plist와 AndroidManifest 파일에 사용 권한을 추가함으로 문제를 해결했습니다.

  • 또한, Webview <> Native 간 권한 요청 Flow 로직이 존재하지 않았기에, Webview를 기반으로 권한요청을 진행할 때 사용할 수 있는 공용 훅을 만들어 문제를 해결했습니다.

  • 위의 해결 과정, 공용 훅 그리고 권한요청 Flow에 대한 문서를 정리하고, 팀내에 전파 및 공유하여 추후 Permission 처리를 할 동료들에게 가이드라인을 제공했습니다.

Description

동네를 기준으로 중고 물품을 올리고 거래할 수 있는 중고 거래 서비스 클론 프로젝트입니다.

Development

• 컴포넌트, 폴더구조 및 UI 테스트 체계화
  • 아토믹 디자인 패턴을 도입하여 개발 생산성 및 협업 효율 향상
  • atoms, molecules 컴포넌트에 대한 UI 테스트를 작성하여 단위 테스트 효율 상승
• 페이지 이동 시 화면 깜빡임 개선
  • 스켈레톤 UI를 적용하여 화면 깜빡임 개선
• 프론트 mock server 구축을 통한 백엔드 API 개발 의존도 개선
  • BE의 API 개발 속도에 맞춰 필요한 API만 선택적으로 Mocking하여 계획 대비 개발 속도 향상
• Kakao Open API를 활용한 사용자의 실제 위치를 Map에 표시하는 기능 구현
• 메인 페이지 무한 스크롤 적용

Tech Stack

TypeScript, React, Tanstack Query, styled-components, Storybook, Express

Members

FE 2명 | BE 2명 | iOS 2명

Links

• Github
• Team Notion

Description

태그 및 마일스톤 단위의 이슈들로 프로젝트를 관리할 수 있는 Github 이슈 탭 클론 프로젝트입니다.

Development

• iOS, BE 멤버들과 함께 API 명세서 및 전체 프로젝트의 Backlog 작성
  • iOS, FE 개발 단계에서 공통적으로 필요한 API 협의
• 아침마다 데일리 스크럼을 진행함으로 팀원간 개발 상황, 서로의 컨디션을 공유
  • 스크럼 마스터를 담당하여 매일 팀 스크럼 회의를 리딩
  • 서로의 상황을 공유함으로써 스프린트 진행 상황 컨트롤
  • 스크럼 진행 방식 확립 및 팀원간의 역할 부여를 주도적으로 진행
• BE와의 협업 과정에서 API 개발이 지연되는 상황에 대처하기 위해 개발단계 초기에 MSW 도입
  • 실제로, BE의 API 개발이 지연되어 Mock Server를 사용하여 마지막 시연 진행
  • 모든 BE의 API를 Mocking하여 모든 기능이 동작하게끔 개발
• FE 팀원과 상태관리 로직 개발을 일주일동안 Pair Promgramming으로 진행
  • 팀원과의 의견 충돌이 있을때, 의견 통합 및 작업 방식 결정 과정에서의 소통 능력 증진

Tech Stack

React, styled-components, Storybook, MSW, Vercel

Members

FE 2명 | BE 2명 | iOS 2명

Links

• Github
• Team Notion

Description

네이버 메인페이지의 뉴스스탠드 탭 클론 프로젝트입니다.

Development

• 뉴스스탠드를 구현하기 위해 실제 데이터를 직접 Crawling하여 데이터 수집
  • Crawling을 진행할 때, Vanilla JS를 활용한 Crawling 코드를 작성한 뒤, 동료들이 활용할 수 있도록 문서를 작성하고 동료들에게 제공
• *Flux 패턴을 Vanilla JS로 구현*
  • 초기에 Flux 패턴을 이해하고, 구현하는데 어려움을 겪었지만 꾸준한 원리 학습을 통해 Flux 패턴의 동작원리를 학습한 뒤, 직접 구현하고 활용하는데 성공
  • store, dispatch, subscribe 함수를 JavaScript로 구현

Tech Stack

Vanila JavaScript, SCSS

Links

• Github

지속가능한 서비스를 만드는 IT 커뮤니티

• FE 파트원으로 참여

• Packit Service 개발

코드스쿼드에서 진행한 웹 FE 개발자 교육

• 문제 기반 학습(PBL)을 통한 다양한 해결책과 문제해결능력 증진
• 데일리 스크럼 및 코드 리뷰 중심의 과제 해결
• Flux 패턴을 직접 구현하고, 이용한 Vanilla Js로 SPA기반 상태관리
• 개인 프로젝트(3회)를 통한 웹 FE 개발 역량 증진
• BE, iOS 팀원들과 함께하는 팀 프로젝트를 통한 협업 경험
  • 4주 팀 프로젝트 (Issue Tracker), 4주 팀 프로젝트 (Second Hand)

코드스쿼드에서 진행한 웹 FE 개발자 예비 교육

• 소프트웨어 공학 지식을 요구하는 문제를 매일 정해진 시간 내에 JavaScript ES6 기반 코드로 해결
• 비동기, 객체지향, FP, 자료구조, 네트워크, 운영체제 등 Computer Science 이론을 기반으로 코드 작성
• 팀원들과 데일리 스크럼, 그룹 스터디, 그룹 리뷰, 한주 회고 등을 진행하며 상대방을 배려하는 소프트한 커뮤니케이션 능력 증진