미리보기

뮤딕은 사용자들이 새로운 음악을 발견하고, 추천받으며, 공유할 수 있는 플랫폼입니다. ChatGPT, Karlo를 사용하여 개인화된 음악 추천과 인터렉티브한 경험을 제공하는 서비스입니다. 프론트엔드, 백엔드, 디자이너가 협업한 프로젝트로 백엔드 리더와 프론트엔드 리더와 함께 요구사항 정의서를 작성하고, 기능 구현에 대한 조율을 진행하였습니다. 디자이너와 피그마를 통한 협업으로 와이어 프레임에 기반한 UI를 구현하였습니다.

역할

• 프론트엔드 리더로 기획에 참여해 백엔드와 기능구현을 조율하고 전체 일정을 관리했습니다.
• 와이어프레임을 제작해 디자이너와 UX에 대해 고민하며 UI를 설계했습니다.
• 스크럼과 주간회의를 진행해 기한안에 개발이 진행될 수 있도록 팀을 리드했습니다.
• 기능 개발을 완료하고 vercel로 배포 후 TypeScript로 마이그레이션과 리팩토링을 진행했습니다.
  
  

개발한 페이지

• 메인 페이지, 스플래쉬 페이지, 플리생성 이벤트 페이지, 404 페이지, 팔로워,팔로잉 페이지
  
  

주요 작업

• CRUD를 사용한 Restfull한 개발을 진행했습니다.
• React-Hook-Form을 사용해 입력 필드 갱신 및  리렌더링을 최소화하여 불필요한 작업을 방지하고 빠른 사용자 경험을 제공했습니다.
• 개발 후 유저 피드백을 받아 메인 페이지에서 보여주는 플리의 리스트 상세페이지를 추가로 구현했습니다.
  
  

트러블 슈팅

리액트 쿼리 - Delete 요청 후 기존 캐싱된 쿼리 데이터 제거

• useMutation으로 데이터를 삭제하는 Delete 요청 후 다른 데이터를 불러올 때 오류가 발생했습니다.
• ex) 플레이리스트 상세 페이지의 데이터를 삭제한 후 다른 플레이리스트 상세 페이지로 이동 시 에러 발생
• 원인 : 삭제한 데이터가 리액트 쿼리 데이터에 남아있어 발생하는 오류였습니다.
• 해결 방법 : useMutation Delete 요청 성공 시 쿼리 데이터를 제거하는 queryClient.removeQueries() 적용했습니다.

프로젝트 소개

IT 주니어 개발자를 위한 프로젝트 가이드 도서입니다. 프로젝트 시작부터 마무리까지 어떻게 진행하는 것이 좋은지, 어떤 방법을 사용하면 도움이 되는지, 사용하기 좋은 도구들은 어떤 것들이 있는지를 정리했습니다. 다양한 구성원이 모여 각자의 경험을 토대로 기술했습니다.

집필 챕터

• 2.5 자원 고려 일정 산정
• 4.2 이해관계자간 커뮤니케이션 파트
• 5.2 사용자 피드백 파트
• 5.3 디버깅 및 오류 수정 파트
• 6.5 고도화 전략 파트
  
  

작업 내용

• 해당 파트 산출물 레이아웃 작업
• 깃허브 이슈로 피드백 반영
• 전체 피그마 레이아웃 교정, 교열

만들만들은 원데이 클래스 플랫폼입니다. 프론트엔드 4명이 함께 UI부터 기능구현까지 개발했고 API는 제공받아 사용했습니다.

역할

커뮤니케이션을 담당해 깃허브에서 충돌과 이슈, PR을 관리했습니다.
IA와 와이어프레임을 제작하고 배포용 썸네일을 제작했습니다.
깃플로우전략과 깃헙 프로젝트를 제시해 프로젝트 관리를 수월하게 했습니다.

개발한 페이지

회원가입 페이지, 마이 프로필, 아더 프로필 페이지, 팔로잉, 팔로워 페이지, 프로필 수정 페이지

주요 작업

API에 추가할 수 없어서 강사인지 수강생인지 구분하고 타입에 맞는 예외처리를 진행했습니다.
Recoil을 사용해 상태를 관리하고 recoil-Persist를 사용해 세션 스토리지에서 유저정보를 사용했습니다.
Axios를 사용해 Promise 기반의 API를 제공하여 비동기적인 방식으로 HTTP 요청을 처리하였습니다.
중첩라우트 처리를 위해 route-Outlet을 사용하여 컴포넌트 렌더링을 효율적으로 관리했습니다.

트러블 슈팅

고정된 API 사용 - 유저 정보 관리

• 기능을 추가할 때 유저 정보에 강사와 수강생 타입을 설정했는데 서버로 전송이 안되는 오류가 발생했습니다.
• 유저의 클래스 예약 내역이 새로고침하면 사라지는 오류가 발생했습니다.
• 원인 : API가 고정되어 있어서 데이터를 서버에 저장할 수 없었고 저장되지 않은 데이터는 페이지가 새로고침되면 사라지기 때문에 원래 개발 할 때 백엔드에서 추가해줘야 하지만 프론트엔드단에서만 개발을 진행해서 수정이 안되는 상황이었습니다.
• 해결방법 : 유저의 타입을 원래 API 명세에 있는 다른 항목에 함께 넣고 파싱해서 사용했습니다. 유저의 클래스 예약 내역을 유저의 로컬에서 관리했습니다. 이 부분은 유저가 다른 기기를 사용하면 해당 내역이 사라지는 문제가 있지만 API를 수정할 수 없어서 차선책으로 기능을 개발했습니다.

온라인 학습의 모니터링 업무를 맡아 수강생들의 출결 관리와 병결, 공결 서류 작업을 진행했습니다.
수강생분들의 QnA를 정리해 문서화 했습니다.
프론트엔드 스쿨 5기 종료 후 바로 시작해서 7기 수강생분들에게 필요한 정보들을 바로 제공할 수 있었고, 상황에 대한 이해도가 높아 모니터링 매니저였지만 상담과 학습 방법에 대해 도움을 줄 수 있었습니다.
스쿨이 끝난 이후 같이 책집필 프로젝트를 진행하며 함께 성장할 수 있는 기회가 되었습니다.

패션디자인 샘플을 생산, 관리, 검수하는 업무를 진행했습니다.
디자이너들의 파일을 받아 생산 가능하도록 수정하고 원단과 생산 기법을 확인해 샘플을 제작했습니다.
해외 공장에 자재를 발송하고 결과물 퀄리티 검수하는 업무도 진행했습니다.
알바로 시작해 정직원 제의를 받고 주임으로 근무했습니다.

저학년 등하교 관리하고 방과후 수업을 진행했습니다.
유인물, 교재, 활동 영상을 제작했습니다.
주 1회 현장 체험 학습 보조교사로 학생 인솔과 활동 영상을 촬영, 편집 했습니다.