- hygen 활용한 초기 보일러플레이트 도입 2024.06 - 2024.07 디자인 시스템 개발 단계에 초기세팅을 쉽고 간편하게 하기 위해 hygen 보일러플레이트 작성 - 디자인 시스템 개발 2024.05 - 2024.07 기존 제품 UI/UX를 통일화하기 위한 디자인 시스템을 StoryBook을 활용하여 개발 - monorepo 운영 2023.01 - 2024.07 자사 제품을 프로젝트 관리를 위해 monorepo 운영 - G.Motor / G.Substation / G.Turbo 신규기능 및 유지보수 2022.07 - 2024.07 https://motor.guardione.ai https://turbo.guardione.ai/ https://substation.guardione.ai/ 자사 도메인 기반으로 대시보드 형태의 프로젝트 진행 ------------------------------------------------------------------------------------ G.Motor, G.Substation, G.Turbo 프로젝트에서 신규 기능 개발 및 유지보수를 주도했습니다. 이 프로젝트들은 자사 도메인 기반으로 대시보드 형태의 프로젝트로, 다양한 팀과 협업하며 사용자 요구사항을 반영하고, 시스템의 안정성을 유지하는 데 중점을 두었습니다. 추후 디자인 시스템을 적용하여 위 세 제품을 통일화 하기위해 StoryBook, Vanilla Extract, 디자인시스템 토큰을 활용하여 디자인 시스템을 개발한 경험이 있습니다. 이 프로젝트에서는 디자이너와 협업하여 디자인 원칙을 정의하고, 컴포넌트 라이브러리를 구축하여 UI/UX의 일관성을 높였습니다. 또한, Hygen 보일러플레이트를 도입하여 초기 세팅을 자동화함으로써 팀원들이 빠르게 작업을 시작할 수 있도록 했습니다. 다양한 기술 스택을 활용하여 프론트엔드 개발을 수행했습니다. 주요 기술 스택은 다음과 같습니다. 프론트엔드: React, Vite, JavaScript, TypeScript, Recoil(메인 개발자 이탈 및 메모리 Leak 이슈 등 지속적으로 관리가 어려울것 같아 마이그레이션 진행), Zotai, Zustand, EChart, Stroybook, Vanilla Extract(Zero runtime stylesheets), 프로젝트 관리: Monorepo 구조 운영 공통으로 사용되는 hook, 디자인시스템 컴포넌트를 도메인 프로젝트에 적용

더보기

1. M.AD.E 1) 소개 - https://blog.naver.com/made_platforms - https://www.facebook.com/madeplatforms - https://www.instagram.com/m.ad.e_/?hl=ko 2) 프론트 기술스택 - React, Hooks, React-Router, Redux, axios, Material-UI, ApexCharts(데이터 시각화), OpenAPI(사업자등록증확인), 아임포트(휴대폰인증, 결제), Social Login(페이스북,구글), 반응형, etc... 3) 개발인원 - 프론트 : 1명 - 백엔드 : 3명 4) 프로젝트 시연영상 - 마케터 : https://youtu.be/QQHGYuqkgc8 - 광고주 : https://youtu.be/OeByrX1qGRY 5) 홈페이지 - https://app.madeplatforms.com/Advertiser/SignIn - https://app.madeplatforms.com/Marketer/SignIn - M.AD.E 기획 수정 중에 있어 서버 중단 상태입니다. 6) 프로젝트 회고 - 혼자 프론트 개발을 총괄하여 제작하였으며, 5번의 기획 수정으로 인해 프로젝트 기간이 길어졌지만 처음부터 끝까지 배포해 본 첫 프로젝트이며, 여전히 기획 수정 중에 있는 프로젝트 입니다. Redux, ApexChart, 아임포트 등 처음 접하는 많은 기술들을 찾아보면서 성장하게 된 계기가 된 프로젝트 였던 것 같습니다. ------------------------------------------------------------------------------------ 2. SmartMind 홈페이지 개편 1) 소개 - 홈페이지 Layout 구성은 2주만에 제작 되었지만, 컨텐츠 부분을 제작중에 있어, 컨텐츠를 채워나가고 있는 중입니다. 2) 프로젝트 기간 - 2021.12 ~ 제작진행중 3) 프론트 기술스택 - React, Hooks, React-Router, Material-UI, emailJS, i18nextLng(언어변경), 반응형 4) 개발인원 - 프론트 : 1명 5) 홈페이지 - https://smartmind.team/ ------------------------------------------------------------------------------------ 3. M.AD.E 홈페이지 1) 소개 - M.AD.E를 소개하는 페이지 2) 프로젝트 기간 - 2022.01(1주) 3) 프론트 기술스택 - React, Hooks, React-Router, Material-UI, i18nextLng(언어변경), 반응형 4) 개발인원 - 프론트 : 1명 5) 프로젝트 시연연상 - https://www.youtube.com/watch?v=gZwiRtoidhU&ab_channel=FashionScanner 6) 홈페이지 - https://madeplatforms.com/ - M.AD.E 기획 수정 중에 있어 서버 중단 상태입니다. ------------------------------------------------------------------------------------ 4. AI Adaptive Learning 1) 소개 - React-Flow를 사용한 노드를 구현한 페이지 입니다. 2) 프로젝트 기간 - 2022.02 - 2022.03(1달) 3) 프론트 기술스택 - React, Hooks, React-Router, Material-UI, React-Flow 4) 개발인원 - 프론트 : 1명 - 백엔드 : 1명 5) 프로젝트 시연영상 - https://youtu.be/gxnyRfrbTrM 6) 홈페이지 - https://mlsv.madeplatforms.com/ ------------------------------------------------------------------------------------ 5. P2PDC 데이터바우처 사업 1) 소개 - 공공 커뮤니티내 블록체인 기반 EV-신재생 ​연계 DC 전력 거래 플랫폼 시스템 개발 2) 프로젝트 기간 - 2022.03 - 진행중 3) 프론트 기술스택 - React, Typescript, Webpack, Babel, Sass, etc... 4) 개발인원 - 프론트 : 1명 - 백엔드 : 1명

더보기

1) 메인 페이지 - Nav, Main, Footer 구현 - 재사용가능한 컴포넌트로 제작하여 셀럽카드 구현 - 셀럽별 카테고리별 정리를 위한 subNavigation 구현 - 검색기능을 통하여 특정셀럽 검색 2) 셀럽 카테고리별 페이지 - 셀럽카드 컴포넌트를 재사용하여 카테고리별 노출 - 서버와 연동하여 셀럽 리스트 카테고리별 페이지 노출 3) 셀럽 디테일 페이지 - 서버와 연동하여 셀럽 디테일, 셀럽정보, 유저 별점 및 상품평 노출 - BrightCove에서 업로드 된 영상을 받아와 슬라이더 라이브러리를 활용하여 노출 - Custom Hooks(CircleProgressBar)를 활용하여 재사용 가능한 Animation 셀럽 이미지 이펙트 구현 4) 셀럽 영상 요청 구매 모달 - BootStrap 모달창을 활용하여 구매창 구현 - 구매시 필요한 정보를 vaildation를 적용하여 빈값 또는 다른 값을 입력시, 조건에 맞게 입력하게 유도

더보기

Frond-End Developer로 HTML5, CSS, JS, React, Hooks, Redux, React-Router, Scss, GitHub 배워 기업협업(인턴) 경험이 있습니다.

더보기