Professional experience

한국딥러닝(주)

2023.11 ~ 2024.06

Pov-3d npm 라이브러리 배포 [ 참여 인원 : FE 1 ]

npm: pov-3d

POLYGROUND 서비스 페이지 개발 [ 참여 인원 : FE 2, BE 2, PM 1 ]

POLYGROUND

• API를 요청하는 **API Function** 정의
• Swagger를 참고하여 **Entity**라는 이름으로 API Function의 Return Type지정 

Domain 레이어 • 컴포넌트에서 필요로하는 데이터 Interface를 Model이라는 이름으로 생성 • Entity를 Model로 변환하는 Mapper Function ****정의 Application 레이어 • 컴포넌트 및 Hook, router, 상태관리 정의 • 컴포넌트에서 API Function 호출 후 응답값을 Mapper를 통해 Model을 만들어 사용 성과 (기여도 50%) • 서버에서 내려주는 데이터가 변경되어도 Entity, Mapper 수정작업만 하면 컴포넌트 코드 수정없이 유지보수 가능 (기존대비 15분 이상 단축) | | | Frond-end 페이지 문서화 | 이슈 및 목표 • 본회사에 입사 후 FE 인원이 2명으로 늘어남 • 온보딩 및 인수인계를 받으면서 초기 입사자 관점에서 문서 작성 • FE 협업을 위한 노션 문서화 전략 • 브랜치 관리, 배포방법, Node 버전, PR문서 작성법, Css style 컨벤션 문서화 • 화면 정책 생성 및 업데이트시, 실무진 협의시 항상 문서화 하도록 함 성과 (기여도 80%) • 신규 입사자 온보딩시 불필요한 리소스 감소 • 언제든 히스토리를 파악할 수 있어 협업자 간의 소통 이슈가 없어짐 | | | 마이 페이지 구현 | 이슈 및 목표 • 구매한 3D 모델을 확인 및 다운로드 받을 수 있는 페이지 개발 • 사내 디자이너 퇴사 • 3D 모델 파일 다운로드 API 보안 이슈 전략 • 사내 요구사항과 경쟁사 사이트 마이페이지 레퍼런스 참고하여 직접 디자인 기획 후 UI 구현 • 3D 모델 파일 다운로드 API URL에 일회성 데이터를 삽입하도록 함 • 일회성 데이터를 API를 통해 구매여부 판단 후 전달 받음 • *document*.createElement 를 통해 가상 a태그 생성 • link.herf 에 완성된 3D 모델 파일 다운로드 API URL 삽입 후 link.click() 실행 성과 (기여도 100%) • 사용자 고용량의 3D 모델 파일을 다운받을 수 있다. • 일회성 다운로드 URL을 사용하므로 보안성 확보 | | | 신규 리뉴얼 디자인 적용 | 이슈 및 목표 • 외주 디자이너와 협업을 통해 모든 페이지 신규 디자인으로 적용 • 모바일, 테블릿, PC 를 기준으로 서비스 모든 페이지 반응형 디자인 적용 전략 • FE 작업자(총 2명) 협업시 코드 충돌을 방지하기 위해 Atomic 디자인 패턴 적용 • 페이지별 필요한 atoms, molecules, organism, template를 사전 협의 후 문서 작성 문제 발생 • 3달의 작업시간이 6주로 변경 (사내 이슈로 협의 불가능한 기간) 문제 해결 (기여도 50%) • 기존 비즈니스 로직을 최대한 살리고, 페이지를 나눠 작업하는 방향을 전략 수정 • 페이지 컴포넌트 먼저 생성 후 두번이상 사용되는 공용컴포넌트만 Atomic 디자인 패턴에 맞춰 적용 • 페이지 UI 구현시 최대한 반응형과 동시에 작업 성과 • 6주의 시간안에 모든 페이지 신규디자인 및 반응형 다자인 구현 완료 |

POLYGROUND 백오피스 개발 [ 참여 인원 : FE 2, BE 2 ]

• React-Query 함수 정의
• Zustand Store 정의

Business 레이어 • React의 hook 기능을 사용하여 ViewModel 생성 ****• React-Query를 호출하고 Zustand Store에 업데이트하는 방식 • Zustand Store에 저장된 데이터를 반환 Component 레이어 • ****Business 레이어의 ViewModel을 사용하여 UI 컴포넌트에 데이터를 전달 ex) const { tagId, generalList, onSubmit} = useAssetEditVM(); • React-Hook-Form을 사용하여 공용 컴포넌트 구현 및 적용 • MUI의 DataGrid를 사용하여 리스트 공용 컴포넌트 구현 및 적용 성과 (기여도 50%) • 공용컴포넌트 개발로 신규 개발 속도 향상 • React-Query로 불필요한 API 요청 감소 및 렌더링 속도 향상 • UI 컴포넌트와 비즈니스 로직 코드 분리로 가독성 향상 |

(ex) Professional experience

주식회사 엔코드

2022.03 ~ 2023.09

디코드 - 편리한 명품 쇼핑·해외직구 서비스

디코드 모바일/PC 웹 서비스 페이지 개발 및 유지보수

[ 참여 인원 : FE 5, BE 8, QA 2, PM 2, UI/UX 디자이너 1 ]

디코드 백오피스 시스템 개발 및 유지보수

[ 참여 인원 : FE 5, BE 8, QA 2, PM 2 ]

우노솔루션