웹 프론트엔드에 관심이 많은
서비스에
경력
인디제이는 사용자 맞춤 상황,감정 AI 스트리밍 라디오 서비스입니다.
CES 2023,2024 혁신상을 수상 하였으며, AI 솔루션을 통한 외주도 맡고 있습니다.
2022.08 ~ 2024.07
인디제이 웹 버전 프론트엔드를 개발 및 유지보수 하였습니다.
Redux를 활용한 사용자 정보 및 음악 관리
API 통신을 통해 AI 음악추천 챗봇 UI 및 UX 개발
반응형 웹 개발
프로모션 웹 및 모바일 웹뷰 페이지 개발
2022.08 ~ 2024.07
인디제이 어드민 페이지를 개발 및 유지보수 하였습니다.
대쉬보드 데이터 시각화(차트) 작업
랜드마크(GPS) CRUD 구현 및 퍼블리싱 작업
음악 CRUD 구현 및 퍼블리싱 작업
푸시알림 전송 및 예약 전송 개발
회사 관련 기사 보도자료 CRUD 구현 및 퍼블리싱 작업
음성광고 CRUD 구현 및 퍼블리싱 작업
DAU, MAU 데이터 시각화(차트) 작업
2024.05 ~ 2024.06
반응형 웹으로 인디제이 회사소개 페이지 개발
yarn berry 및 Zero install 세팅
Eslint & Prettier 적용
메인페이지 폭죽 애니메이션 css 구현
Infinite Carousel 구현
문의뱃지 Animation 및 퍼블리싱, 문의 api 연결
전체 UI & UX 개발
게임,소프트웨어 등등 CS, QA, 마케팅, 모니터링을 대신 해주는 서비스이다.
내부상담원을 통한 문의 및 환불 처리를 대신 해주는 작업을하고 일일,주간,월간 보고서를 제공해준다.
2022.08 ~ 2024.07
기업관리자와 상담원관리자에서 필요한 기능 및 퍼블리싱 작업을 했습니다.
Chart.js 를 활용한 데이터 시각화 작업
Atomic 디자인 패턴을 활용한 컴포넌트 분리 및 재사용성 극대화
Axios instace를 사용하여 반복되는 코드를 개선 하였습니다.
Redux-toolkit 으로 사용자 정보 및 모달 상태를 분리하여 관리
TanStack Query(React Query)를 사용하여 캐싱관리 하여 문의(QnA) 데이터 처리 속도 향상
테이블안에 데이터를 react-export-excel로 엑셀파일로 변환하는 기능 구현
다국어 기능 구현
웹 안에서 유저에게 위치를 알려주기 위하여 BreadCrumbs 기능 구현
tailwind를 사용하여 퍼블리싱 작업
사이드
모노레포 커스터마이징
core에서의 package.json 수정
Seo컴포넌트 meta태그 수정
GitAction으로 CI/CD 구축
node js.yml 파일 생성이후 github.io page 레포에 연결
main Branch Commit시에만 deploy
도메인 생성 및 연결
도메인 구매 이후 DNS 설정 및 연결
deploy 할 때 마다 domain 변경방지로 static 파일 CNAME 도메인 추가
반응형 웹페이지 제작
rem, media screen으로 반응형 웹 개발
서브도메인 설정 및 적용
bobcost.kr 현재 블로그페이지 도메인을 활용한 서브도메인 사용으로 프로젝트 배포
Zustand 상태관리
책의 열림, 카테고리 상태를 관리
persist를 사용함으로 LocalStorage에도 상태를 저장한다.
카카오톡 API 를 사용하여 공유 기능 구현
다크모드 구현
NextTheme 및 Global Css 를 통한 다크모드 구현
Google Analytics 적용
DAU,MAU 확인을 위하여 @next/third-parties/google 사용해서 적용
기술
Semantic Markup을 최대한 활용하여 구현할 수 있습니다.
HTML이 길어질 경우 Semantic Markup이 더욱 중요해지므로 최대한 활용하려고 노력하고 있습니다.
CSS를 통해서 여러 애니메이션을 구현할 수 있습니다.
Carousel Slide, Hover Animation 등등 필요한 애니메이션이 구현가능합니다.
CSS-in-JS 라이브러리를 사용할 수 있습니다.
Emotion 및 Styled Component를 활용한 프로젝트를 설계 할 수 있고, 구현이 가능합니다.
favicon, SEO 등의 적용 경험이 있습니다.
네이버, 구글등 Robot.txt를 통해 검색되도록 경험이 있습니다.
TypeScript를 이용한 개발에 익숙합니다.
다양한 프로젝트 경험으로 React 코드 리딩 및 작성이 가능합니다.
ES2015 이후의 JavaScript 문법에 익숙합니다.
JavaScript ES2015 이상의 문법을 수월하게 작성하거나 해석 할 수 있습니다.
Reduce, Map, Filter와 같은 고차함수를 적극적으로 사용합니다.
비동기 작업을 하는데 익숙합니다. (promise, async await)
크거나 작은 규모의 웹 페이지를 개발할 수 있습니다.
모바일 웹앱, PC(반응형 웹), 관리자페이지 등 다양한 프로젝트를 리딩하고 개발한 경험이 있습니다.
Redux, Zustand와 같은 상태 관리 라이브러리를 사용할 수 있습니다.
상태관리는 큰 규모의 프로젝트에 갈 경우 복잡해져 파일 및 폴더를 잘 정리하며 코드를 최적화 합니다.
Atomic Design으로 컴포넌트 분할을 하거나 프로젝트에 맞게 구조를 작성한 경험이 있습니다.
axios 라이브러리를 활용하여 비동기 작업을 할 수 있습니다.
React18,Next13이상을 활용하여 페이지를 개발할 수 있습니다.
Git Action으로 CI/CD 구축을 경험이 있습니다..
현재 이력서,블로그는 Git Action으로 CI/CD 구축을 통해 자동화 배포가 적용되어 있습니다.
AWS EC2, S3 등의 인프라 요소를 사용해본 경험이 있습니다.
EC2 인스턴스에 연결되어 있던 Nginx를 활용하여 웹페이지를 배포하며, S3를 통한 이미지, 음악 파일등을 저장하며 불러와서 사용했습니다.
Nginx를 통한 웹 서버를 배포한 경험이 있습니다.
Telegram bot 등의 경험이 있습니다.
깃 커밋,푸쉬 등의 메세지 와 Error 메세지를 확인하는 봇을 만들었습니다.
Git을 능숙하게 다룰 수 있습니다.
git flow, github flow 를 회사에서 적용해본 경험이 있습니다.
취미
평소에도 글을 적는 것을 좋아하고 정리하는 것을 좋아해서
회고록, 개발, 트러블슈팅 등등 현재블로그, velog에 같이 정리하려고 합니다.
위의 제목을 누르면 제 블로그로 가실 수 있습니다!
알고리즘의 약한부분을 채워주는 느낌으로 풀고있다.
모르던 문제를 찾아보고 생각하면서 힘들게 풀면 성취감이 있다.
헬스로 스트레스를 풀고 있습니다.
유산소 운동으로 좋은 체력을 유지하려고 하고있습니다.
축구(풋살)와 농구, 탁구, 배드민턴 등으로 좋아하는 운동을하며 스트레스를 풀고있습니다.
좋아하는 구기종목을 시청함으로써 또한 힐링을 하고있습니다.