미리보기
기본 정보
3년차 프론트엔드로 SI에서 매번 새로운 기획 및 디자인에 맞춰 개발,운영하였습니다. 주로 vue를 사용하여 프로젝트를 개발하였고 react 프로젝트 참여한 경험이 있습니다. 기획자 , 디자이너, 백엔드 개발자, 고객사와 함께 서로 만족할 수 있는 결과물을 만들기 위해 적극적으로 소통합니다. 이러한 협업과정에서 고객사의 신뢰를 얻어 추가 개발, 다른 프로젝트를 의뢰한 사례도 있습니다. 더 나은 서비스를 만들고 함께 성장하기 좋은 동료이자 개발자가 되고 싶습니다. 현재 next.js , typescript 학습하며 도구에 국한되지 않는 개발자로 성장하고자 합니다.
기술 스택
Vue.js, Vuex, pinia, scss, vitejs, JavaScript, HTML/CSS, GitHub, jQuery, React, zustand
경력
주식회사케이스랩
사원 | 개발팀
2022.03. ~ 2024.11. (2년 9개월)
고객의 비즈니스에 맞춰 설계된 기획과 디자인에 따라 프론트/퍼블리싱 담당, 고객서비스 운영 및 리뉴얼 참여
환경세팅부터 QA 마무리까지 전체적인 프론트엔드 업무 수행 및 프로젝트 진행
프로젝트 아키텍처 구성하여 새로운 프로젝트 시작시 시간 비용 감소
SCSS 로 매 프로젝트 사용될 common.scss , mixin 생성
header,footer,navi의 class 와 뼈대를 만들어 여러 프로젝트에 재사용 하도록 구성
서비스에 따른 정규식, 유효성, 위치좌표 및 주소등 공통 함수 개발
jwt 토큰 사용하고 refresh token 발급, 예외처리를 위한 interceptor 개발
웹뷰를 통해 웹 서비스 노출 및 공유하기 , 다운로드, 카메라 등 앱소스 연동
이니시스 , 토스 페이먼츠, 페이팔 결제연동
sns (네이버,구글,애플) 로그인 연동
점유인증 , 본인 인증 연동
프로젝트
아이큐비타민
케이스랩
2024.10. ~ 진행 중
어린이 동화책을 기반으로 어린이 심리검사 및 어린이 심리상담 기능을 제공하는 서비스
Skill : React, zustand , styled-components
[주요 내용]
styled-components를 이용하여 header , badge , tab 공통 컴포넌트 생성
zustand를 이용해 유저 정보 저장 및 공통 컴포넌트 tab에 맞춰 api 로 받아온 데이터 name,value 로 변환 사용
네이버, 구글 , 애플 회원 가입 및 로그인 연동 및 hook을 이용하여 중복 코드를 제거하고 공통 함수 처리
hook 을 사용하여 1:1 문의 , FAQ , 공지사항, 결제 내역 , 검사 리스트 게시판 리스트 및 무한 스크롤 구현
axios interceptor 를 통해 토큰 갱신 , 토큰 만료 , 로그인 처리 및 api 응답,요청 공통화
데이페이
케이스랩
2024.05. ~ 2024.10.
촬영장비 대여/판매 쇼핑몰 - 1차 개발 완료/ 2차 추가 개발 진행 예정 , 2차 개발 이후 서비스 예정
Skill : vue3, pinia, scss
[주요 내용]
전체 UI작업 및 구축을 진행하였으며 생산성 향상을 위해 '다이빙 버디' 프로젝트 구조및 공통 컴포넌트를 기반으로 고도화하여 개발속도 개선 및 유지보수성 강화
토큰 만료 7일 전 접속시 refresh token 발급을 axios interceptor에서 개발
대여 , 대여 연장시에 날짜 유효성 체크 개발
이니시스 결제창을 백에서 열고 프론트에서 form 과 iframe 을 통해 사용자단에 노출
푸시 , 파일 다운로드 앱 소스 연동
[추가내용]
10월에 개발 이후 고객사의 높은 만족도를 얻어, 고도화된 쇼핑/대여 쇼핑몰을 구축하기 위한 기획 단계에 있으며 2차 개발 이후 서비스 오픈을 목표로 진행 중. 현재 구체적인 개발 기간은 미정
다이빙버디
케이스랩
2024.02. ~ 2024.04.
코오롱3종
케이스랩
2023.05. ~ 2023.06.
뉴땡큐마켓
케이스랩
2023.03. ~ 2023.08.
Skill : vue3, vuex, scss
[주요 내용]
프론트엔드 개발자와 소통하여 컴포넌트, 스타일가이드 구성 논의 및 협업
장바구니 옵션 및 수량 , 선택상품에 따른 calculator API 요청하여 실시간 금액 반영
아이디, 비밀번호 찾기 정규식과 점유인증을 통해 3분 타이머 인증 개발
포트폴리오
교육
연세IT미래교육원
사설 교육 | 웹디자인&웹퍼블리셔 과정
2021.10. ~ 2022.02. | 졸업
공주대학교
대학교(학사) | 특수동물학과
2015.03. ~ 2021.08. | 졸업
자기소개
저는 첫 직장에서 퍼블리셔로 입사해 좋은 기회를 얻어 vue를 시작했습니다. 이후 프론트엔드를 책임지며 재사용성 높은 코드와 최적화, 협업에서 중요한 요소들이 무엇인지 늘 고민했습니다.
'다이빙 버디'는 제가 프로젝트 전체를 전담 , 관리하게 되는 첫 프로젝트였습니다. 이전 프로젝트들에서 보이던 아키텍처, 공통화 문제를 하기 위해 vite를 이용하여 초기 세팅부터 시작한 프로젝트입니다. 이 프로젝트는 추후 진행될 프로젝트들의 기반이므로 사소한 아이콘의 네이밍부터 프로젝트 세팅, 아키텍처 설계, 공통 함수 생성까지 세세하게 심혈을 기울였습니다.
파일 네이밍 : icon-컬러-이름(예: icon-blue-search), 기능-이름 (예: navi-cart) 와 같은 직관적인 네이밍으로 유지보수에 유리하도록 구성했습니다.
아키텍처 설계 : 폴더 구조는 대 메뉴(예: product, board, mypage )를 기준으로 views,store,api 하위 폴더에 위치하고 파일명은 대 메뉴의 단어가 포함하도록 모듈화했습니다.
공통함수 : 정규식 검증 , 유효성 체크 통해 공통 메시지 알럿 노출 , 위치 좌표 및 주소 ,인터셉터에서 토큰 및 예외 처리 등 공통 함수 개발하여 생산성을 향상시켰습니다.
vite 번들러를 dev, production 과 나누어 설정하고 , SCSS 로 common.scss , mixin을 생성하는 등 장기적인 프로젝트의 기반이 될 수 있도록 설계했습니다. 결과적으로 '다이빙 버디' 이후 여러 vue 프로젝트에서 활용하며 고도화되었으며 react 프로젝트에서도 일부 차용되었습니다. 이를 통해 효율적인 협업과 유지보수가 가능해졌으며 프로젝트의 안정적인 기반을 마련하는데 기여했습니다.
사소한 아이콘의 네이밍부터 아키텍처 설계까지 고민하여 쌓아온 경험이 지금의 저를 만들어 준 중요한 밑거름이 되었다고 믿습니다.어제의 고민이 오늘의 저를 만들었듯이 앞으로 고민하고 성장하는 개발자가 되겠습니다.