청담글로벌(IPO) - 자회사
기술스택 : React, Redux, Material-UI, Jest, React Testing Library, TypeScript, Javascript(es6 ~), git, Jquery, Html, Css
정리 : notion
프로젝트명 : 쇼핑몰 V2 리뉴얼
기간 : 2023.03 ~ 2023.11
인원수 : 4명
역할 : wms 입고 / 출고 아키텍처 정리(프로세스 흐름도, ERD 테이블 상세, 결제 흐름도), QA 리스트 작성
비고 : 프론트엔드 개발 프로세스 정리, 개발팀 프론트 엔드 엔지니어링 위키 정립
프론트엔드 개발 프로세스 정리
프로젝트 설정
- Create React App을 사용하여 기본 리액트 앱을 설정, 추가로 필요한 라이브러리 서치 및 설치
메인페이지 설정
- 헤더, 푸터 등 공용 페이지와 메인에 표출시킬 상품 리스트 선정
제품 목록 페이지 생성
- 각 제품은 이름, 이미지, 가격 등의 정보 설계. 백엔드 API 연동전, JSON 형태의 더미 데이터 파일을 만들어 사용
제품 상세 페이지 생성
- 선택한 제품의 상세 정보 표출
쿠폰 기능
- 백엔드 api 도입전 json 파일을 임시로 만들어 장바구니에 적용
장바구니 기능
- Context API를 활용하여 전역 상태 관리
로그인/회원가입 기능
- Firebase Authentication과 같은 서비스를 활용하여 백엔드 개발 없이 인증 기능을 구현
결제 처리
- Stripe나 PayPal과 같은 외부 결제 서비스를 통해 실제 결제 처리가 가능합니다.
상세 기능 구현 v0.1
장바구니 기능 추가
- Cart.js 컴포넌트에서 각 항목 옆에 "삭제" 버튼을 추가하고, 이 버튼이 클릭되면 해당 항목이 장바구니에서 제거
수량 조절
- 장바구니의 각 항목에 대해 사용자가 원하는 수량을 선택 기능 추가. 이를 위해 각 상품의 현재 수량 정보를 저장하고 업데이트
총합 계산
- 장바구니 페이지 하단에 현재 선택된 모든 상품들의 가격 총합을 보여주는 기능 구현
결제 프로세스
- 실제 결제 프로세스를 구현하는 것은 추후 진행 PG 연동전 가상 결제 프로세스를 구현
장바구니 데이터 유지
- 로컬 스토리지나 세션 스토리지 등 웹 스토리지 API를 활용하여 기능 구현
유닛 테스트 및 통합 테스트 작성
- 애플리케이션의 주요 부분들이 예상대로 동작하는 것을 확인하기 위해 테스트 코드를 작성
상세 기능 구현 : v0.2
사용자 인터페이스 개선
- Material-UI를 통해 디자인 개선
상태 관리 리팩토링
- 상태 관리 라이브러리(Redux)를 도입하여 코드의 가독성과 유지보수성 향상
유닛 테스트 작성
- 코드가 올바르게 동작하는지 확인하기 위해 유닛 테스트(unit test) 작성 Jest와 React Testing Library 등의 도구 활용
타입 체크 도입
- JavaScript는 동적 타입 언어라서 실행 시간에 타입 오류가 발생. TypeScript를 도입하여 문제 최소화
반응형 디자인 적용
- 다양한 크기의 스크린에서 잘 보여지도록 반응형 디자인 적용
상세 기능 구현 수정 v0.2.1
서버와의 통신
- 현재 쿠폰 데이터는 JSON 파일에 저장. 이후 서버에서 쿠폰 데이터를 받아오거나 할인 적용 결과를 서버에 전송. 이를 위해 fetch 함수나 axios 같은 HTTP 클라이언트 라이브러리 사용
=≫ localStorage로 구현
개발팀 프론트 엔드 엔지니어링 위키 정립
- Notion을 통한 티켓 관리
- 트러블슈팅
- 엔지니어링 가이드라인 기재
프로젝트명 : 쇼핑몰 V1 운영
url:https://www.bysuco.com/
기간 : 2023.03 ~ 2023.11
인원수 : 4명
역할 : 프론트엔드 환경 운영, 인플루언서 예약 오픈 | 클로징, 기능, 구글 애널리틱스4 연동, 메인페이지 리뉴얼
메인 페이지 고도화 프로세스
- 페이지 별 배너 표출 프로세스 고도화
기존 : if문으로 분기 처리
1단계 var image_2 = `{{$사용자이미지39}}`;
2단계 image_2 = "≪div≫" +image_2+"≪/div≫";
3단계 if else if …
개선 : 함수로 분기 처리 및 직관적으로 구현
1단계 appendBanner(4342, {{$사용자이미지121}});
개선 효과
경량화(4배 개선)
기존 코드 340줄 → 약 80줄
지연율 n+ → 1+
기존 if else … ⇒ n+지연율 → cno1 처리 ⇒ 1+지연율
2차 개선 : 1차 개선시 1(카테고리) : 1(배너) 관계 였던 기능을 N : N 매칭 될 수 있도록 개선
개선 효과
다수의 카테고리에 다수의 배너 표출
코드 중첩 제거
퇴사(예정)사유 : 회사 경영상의 어려움
더보기