미리보기

📚 학교 특화 탭 및 내 책장 개편

• SVG 기반 동적 렌더링 책 컴포넌트 개발

  • S3 저장소 내 이미지 증가에 따른 성능 저하를 해결하기 위해, SVG를 활용한 동적 렌더링 책 컴포넌트를 구현

  • 이를 통해 이미지 로딩 속도를 개선하고, 다양한 해상도에서도 유연한 렌더링이 가능하도록 최적화

• 앱 UI 리뉴얼 및 UX 개선

  • 앱 전체적인 UI 리뉴얼을 담당하여 일관된 디자인 시스템을 구축

  • 기획자와 협업하여 더 나은 UX Writing을 제안하고, 불필요하게 분산된 컴포넌트들을 통합하여 유지보수성을 높임

📖 새로운 영어 콘텐츠 시리즈 개발

• 드래그 앤 드롭 기반 메모 기능 구현

  • 메모 좌표를 백분율로 저장하여 디바이스 해상도에 상관없이 일관된 위치에 표시

  • 메모 삭제, 읽기 기능을 추가하며 데이터 저장 방식 최적화

  • 특히 안드로이드 환경에서의 View 계산 문제를 해결하며 다양한 디바이스 대응 경험 축적

• 무한 스크롤 내 다중 선택 기능 개발

  • 사용자가 전체 선택, 북마크 단어 선택, 학습 미완료 단어 선택 등의 필터링이 가능하도록 기능 추가

  • 백엔드 개발자와 협업하여 대량 데이터 처리 최적화 및 API 응답 속도 개선

🛠 React & TypeScript 기반 공통 컴포넌트 개발 경험

• 버튼 배치 로직 중앙화 및 UI 일관성 개선

  • 메타데이터 기반 JSON 편집기에서 버튼 위치, 색상 등의 UI 속성을 관리하는 구조

  • 다양한 컨테이너(HStack, VStack, ModalContainer, TableContainer) 내 버튼 배치 로직이 모노레포 내 분산되어 불일치한 UI 문제 발생

  • 공통 버튼 컴포넌트를 개발하여 UI의 일관성을 확보하고, 코드 중복을 줄여 가독성과 유지보수성을 향상

• Context API를 활용한 동적 UI 관리

  • 중첩된 컨테이너 내 Select 컴포넌트를 탐색할 수 있도록 로직 개선

  • list 타입의 모든 Select 컴포넌트가 올바르게 참조되도록 수정하여 옵션을 동적으로 가져오는 기능 추가

📌 사용자 경험을 고려한 상태 관리 및 UI 개선

• 브레드크럼 컴포넌트 개발

  • 디자이너 요구사항 및 플랫폼 특성을 고려하여 클라이언트 상태 관리 최적화

  • URL Search Parameter에 이전 페이지 정보를 객체 배열로 저장하여 렌더링하는 브레드크럼 컴포넌트 개발

• 메타데이터 처리 및 타입 안전성 확보

  • YAML을 활용해 새로운 API 스펙을 정의하고,

  • Zod를 사용하여 네트워크 응답을 런타임에서 안전하게 파싱

  • ts-pattern을 활용한 패턴 매칭을 통한 선언적인 TypeScript 코드 작성

🤝 협업 및 코드 품질 개선 활동

• 토스 현업 개발자 & 디자이너와 협업 경험

  • Framer를 활용한 디자인 & 스토리라인 기반 UI 개발 및 의견 조율

  • 플랫폼 내 개발 이슈를 공유하며 실현 가능한 UI/UX 개선 방안 논의

• 코드 리뷰 및 기술 공유 활동

  • PR마다 코드 리뷰 진행, 유지보수성을 높이기 위해 일관된 코드 스타일 공유

  • hasOwnProperty 지양해야 하는 이유 등 기술적 지식 공유 및 Best Practice 논의

• 애자일 프로세스 적용 (Jira & 스프린트 관리)

  • Jira를 활용하여 이슈 등록, 스프린트 관리 및 진행 상황 공유

  • 매주 FE 개발자들과 새로운 기술 튜토리얼 진행 및 엔지니어링 위클리에서 기술 지식 공유

💻 AWS 콘솔 페이지 벤치마킹 및 사내 콘솔 페이지 개발

• Next.js & Redux-toolkit을 활용한 사내 콘솔 페이지 구현

  • AWS 콘솔 페이지를 벤치마킹하여 자사 홈페이지의 콘솔 페이지를 개발

  • 상태 관리를 위해 Redux-toolkit을 사용하여 비즈니스 로직을 UI와 분리

• 드래그 앤 드롭 기반 카드 리스트 관리

  • 라이브러리 없이 카드의 드래그 앤 드롭 기능을 직접 구현

  • 카드의 동적 생성, 리스트 추가/제거/리셋 기능을 Redux-toolkit으로 관리하여 상태 변경을 일관되게 유지

• Next.js 페이지 기반 라우팅을 활용한 UI 컴포넌트 개발

  • 사이드바 메뉴 아코디언 UI 구현

  • 브레드크럼 UI 개발

  • 옵션이 동적으로 적용되는 공통 카드 UI 개발

  • 검색 기능, 페이지네이션, 라디오 테이블 UI 등을

  • 옵셔널하게 조합 가능하도록 설계,

    동적으로 렌더링되는 구조로 구현

🚀 프로젝트 세팅 및 기존 시스템 React 마이그레이션

• 새 프로젝트 세팅 및 퍼블리싱 (Next.js, TypeScript, Recoil)

  • Next.js 기반으로 새 프로젝트를 세팅하고 초기 퍼블리싱 작업을 진행

  • Recoil을 활용한 클라이언트 상태 관리

• 기존 jQuery + PHP 기반 오픈소스의 React 마이그레이션

  • 레거시 코드를 점진적으로 React로 이관하는 프로젝트 세팅 및 구조 설계

  • 모든 기능을 React로 옮기기 어려운 경우,

    iframe을 활용하여 기존 오픈소스를 Docker 컨테이너에서 실행,

    window.addEventListener를 이용해 React와 기존 오픈소스 간 통신 구현