로딩중...
84
84
사용자 중심 디자인, 협업, 프론트엔드 기초 지식을 쌓았습니다. 사용자와의 소통에 대해 중요성을 인지하고, 사용자와의 상호작용을 극대화하는 프로젝트를 개발하기 위해 프론트엔드 개발자로 전향을 결심하게 되었습니다. React, Zustand, Framer-Motion, GSAP 등 다양한 프레임워크와 라이브러리를 도입해 발전할 수 있는 새로운 도전에 나서고 있습니다.
항상 역지사지 마인드로 사용자 중심 개발을 추구합니다. 직관적이고 친숙한 UI 제공과 Chrome Lighthouse를 활용해 성능 최적화에 신경쓰면서, 다양한 사용자들이 편리하게 서비스를 이용 할 수 있도록 기여하고자 합니다.
지속적인 학습을 위해 스터디와 온라인 강의에 적극 참여하고, 낯선 기술에도 포기 하지 않고 메타인지 방식을 활용해 문제 해결 능력을 쌓고 있습니다. 열린 마음으로 피드백을 소중히 여기고,개발 과정에서 항상 개선할 점을 찾기 위해 노력하고 있습니다.
팬덤박스 플랫폼에서 UX/UI 개선 및 API 최적화를 통해 브랜드 아이덴티티와 사용자 경험을 강화하고, 메이즈 공식 홈페이지의 프론트엔드 관리 및 설계를 통해 성능 최적화와 SEO 전략을 적용하여 검색 노출을 개선했습니다.
삼성테마, 카카오톡 테마 등 플랫폼 별 테마를 이용한 캐릭터 디자인 및 아이콘 디자인을 이용해 무료로 제작 또는 유료로 판매하였습니다.
React와 PHP 기초, 알고리즘, GSAP 및 Swiper 등 다양한 라이브러리, 웹 표준 및 SEO에 대한 학습을 진행했으며, 3개의 JavaScript, 2개의 React, 1개의 PHP 프로젝트를 수행했습니다.
클래스명으로 간편하게 HTML을 스타일링할 수 있어 사용했습니다.
라라벨에서 효율적인 HTML 작성을 위해 조건문과 반복문 등을 사용했습니다.
모션을 추가하여 GIF보다 적은 용량으로 최적화된 이미지를 제공하는 데 매력을 느껴 사용했습니다.
다양한 슬라이드 형태를 구현할 수 있어 사용했습니다.
부드러운 스크롤 제어가 간편하여 사용했습니다.
바닐라 자바스크립트를 더 쉽게 사용하고, 애니메이션 구현 시간이 단축되어 사용했습니다.
React의 구조를 이해하고 여러 Hook을 사용하여 개발했습니다.
리덕스의 초기 세팅을 축소하여 빠르게 작업할 수 있었고, 상태 정의와 사용이 간편해 사용했습니다.
간단한 상태 관리와 반응형 기능을 제공하여 사용했습니다.
서버 사이드 렌더링과 정적 사이트 생성 기능을 활용해 사용했습니다.
Dothome을 통해 회원 정보 관리와 게시물 작성 및 삭제를 구현했습니다.
PHP로 작성한 데이터를 Dothome 호스팅을 통해 관리했습니다.
반복 작업을 효율적으로 처리할 수 있도록 컴포넌트를 분리하여 디자인했습니다.
Lottie 모션 작업을 구현하기 위해 사용했습니다.
간단한 이미지 편집 작업에 사용했습니다.
리깅과 퍼펫 작업을 포함한 간단한 모션 및 영상 편집을 했습니다.
이슈 등록 및 의견 작성 등의 기본적인 작업을 수행했습니다.
팀원들과 코드 공유 및 업무 분배를 용이하게 하기 위해 사용했습니다.
팀 내 소통과 협업을 위해 사용했습니다.
이슈 등록 및 댓글 작성과 같은 기본적인 작업을 수행했습니다.
모바일
반응형
사내 서비스
프론트 60%
디자인 100%
Laravel
Vite
Swiper
Bootstrap
반응형
PC
모바일
사내 사이드 프로젝트
프론트 100%
디자인 100%
Next JS
Framer-Motion
Matter JS
Swiper
Zustand
PC
토이 프로젝트
Shazam API
Mongo DB API
Next JS
MongoDB
Zustand
Swiper
PC
토이 프로젝트
Youtube API
React
Vite
개인적으로 공부한 내용들을 제 개인 웹사이트에 정리하였습니다,
각각의 본문은 '보기'를 클릭하시면 이동됩니다!
사실상 면접을 대비한 공부라고 할수도 있고 일상생활에 있다보니 그러려니 하고 쓰다가 명칭을 알게된 경우였는데, 이번 기회에 클로저에 대해 알기쉽게 이해해보고자 작성하게 되었습니다.
리액트로 작업하던 토이 프로젝트가 있었는데 API에서 데이터를 받아오는 동안 빈 화면으로 냅두는건 좀 아니다 싶어 스켈레톤 UI를 구현해보기로 했습니다!
값은 재할당 되었으나 값이 이전과 같아 굳이 다시 렌더링 할 필요가 없는 작업이 있었는데 그 부분을 해결하기 위한 useMemo를 사용해보자!
Portfolio
2024.09.09