미리보기

• JSP, j-query(js)를 활용해 코어프로젝트 유지보수 및 고도화 작업수행
  전자결재, 게시판 데이터 ajax 중복호출 제거(5~10건의 중복호출을 1건으로 개선)
• 고객사(약8곳)의 요청(커스터마이징, 리팩토링 등) 업무를 수행
• 그룹웨어에 칸반보드 기능을 아이디어를 제시하여 제작
• 기존 워드파일로 존재하던 메뉴얼을 mkdocs 를 이용하여 웹페이지화 및 gitlab ci-cd

• 스마트스토어 - 전자제품 위주의 해외구매대행 위탁판매
• 인스타마케팅 - 인스타그램 인기게시물 노출, 팔로워 등 판매 - 랜딩페이지, 구매페이지 직접제작 및 외부 api 연동
• 크라우드펀딩 - 멸종위기 동물을 주제로 티셔츠 제작.판매

• 자사 쇼핑몰 및 랜딩페이지 관리 및 유지보수
• 상세페이지, 배너등 운영하는 쇼핑몰과 랜딩페이지 커스터마이징 및 유지보수 업무 담당

사용 기술스택 - React, TypeScript, Styled-components, Mui-v5, Axios, React-Query, Recoil, ReactQuill, Netlify

상품, 공지, 문의 CRUD 및 카트, 위시 기능구현 (Axios, ReactQuery)

• useQuery - queryKey를 사용한 특정상태값 변경에 따른 자동 재조회
• CUD API mutate 응답 완료 후, useQueryClient의 invalidateQueries를 이용한 쿼리 무효화 및 재조회

인피니티 스크롤 형식의 상품 목록 페이지 개발 (React-Infinite-scroll)

• useInfiniteQuery Hook을 이용해 인피니티 스크롤을 구현하였으며, 다음 페이지 데이터 호출될 시점을 확인할 IntersectionObserver가 필요하여 호환성이 좋은 라이브러리 채택

상품 등록 및 수정 페이지 개발 (ReactQuill)

• React와의 호환성이 좋으며, 편집 기능이 풍부하고 커스터마이징 이 가능, 무엇보다 멀티 브라우저 플랫폼을 지원하여 브라우저 호환성이 높아서 채택

상품 필터 및 항목별 정렬 기능 구현

• 어드민 - ApexChart 사용하여 매출현황 데이터 시각화
• PORTONE을 이용한 결제 시스템 구현(사전·사후 검증, 결제, 결제 취소)

Netlify를 통한 배포 자동화

• 초기에는 gh-pages로 배포 브랜치를 따로 사용하였으나, 정적 페이지만 지원되는 단점을 해결하기 위해 동적 배포 + 자동화가 지원되는 Netlify 채택

스마트 택배 API - 배송조회 POP-UP 구현

JWT 인증 + Oauth2 인증 (네이버, 카카오) 로그인 구현

사용 기술스택 - TypeScript, React, Axios, Recoil, Styled-Components, TailwindCSS, Amazon EC2

Axios Interceptor를 통한 API 요청 공통 헤더 설정 및 토큰 만료 시, 자동 reissue 구현

로그인, 회원가입 유효성 검증 로직 구현

JWT 인증 + Oauth2인증 (구글 로그인) 구현

전체적인 에러 핸들링을 위한 Modal 컴포넌트 개발

유튜브 모듈 인피니티 캐러셀 기능, 주식, 뉴스, 투두리스트 및 UI 구현