국비지원을 하면서 첫 팀프로젝트 과제가 주어졌었습니다.
jsp를 이용한 프로젝트였는데, 저희는 마켓컬리를 대상으로한 클론 코딩을 했습니다.
📖 전체 흐름도
📖 상세내용
이 프로젝트는 식품 쇼핑몰인 마켓컬리를 모방하여 구현한 결과물입니다.
실제 마켓컬리와 비슷한 기능을 가진 웹사이트를 만들었습니다. 사용자는 이 웹사이트를 통해 신선한 식품과 식료품을 쇼핑할 수 있으며, 다양한 제품, 상세 페이지, 장바구니, 결제 시스템 등을 구현했습니다.
마켓컬리를 클론 코딩함으로써 식품 쇼핑몰의 주요 기능과 디자인을 경험하고, 프론트엔드 및 백엔드 개발에 필요한 기술들을 익히는 좋은 기회가 되었습니다.
프로젝트의 자세한 내용과 결과물에 대해서는 아래 유튜브 영상을 통해 확인하실 수 있습니다
📖내가 담당한 기능
- 전체적인 프론트 작업: 마켓컬리 클론 코딩 프로젝트에서는 원본 사이트의 일부 디자인, 기능 등을 재구성했습니다. HTML, CSS 및 JavaScript를 사용하여 페이지 구조를 구성하고, CSS 스타일링을 적용하여 디자인을 구현했습니다.
- 장바구니 기능: 사용자가 제품을 선택하고 장바구니에 추가할 수 있는 기능을 구현했습니다. 이를 위해 버튼 또는 아이콘을 클릭하면 해당 제품이 장바구니에 추가되도록 코드를 작성했습니다. 장바구니에 추가된 제품은 장바구니 페이지에서 확인할 수 있으며, 수량 조절이 가능하고 가격 업데이트도 실시간으로 반영되도록 구현했습니다.
각 상품의 가격와 이름을 db에서 가져오게끔 구현했습니다.
market front controller에서 prod detail view action을 호출하고
prod detail view action 에서 productID값을 호출해서 값을 가져옵니다.
- 찜 기능: 사용자가 원하는 제품을 찜 목록에 추가할 수 있는 기능을 구현했습니다. 사용자가 찜한 제품은 마이페이지 또는 헤더 메뉴에서 확인할 수 있으며, 제품의 상세 페이지에서 찜 버튼을 클릭하여 찜 상태를 변경할 수 있도록 했습니다.
userID값과 productID 값을 비동기식으로 zzim함수를 통해 디비버에 있는 tbl_zzim으로 넘기게 되는데,
!만약 여기서 userid 값이 비어있다면 로그인이 필요하다고 뜨게 되며 리턴하게 됩니다.
로그인이 되어있는 상태에서 빈하트를 누르게 되면 POST메소드를 통해 빈 하트가 색이 채워지게 되고 "찜하기 성공" 메시지가 뜨게 됩니다.
또 한 번 누르게 되면 다시 POST메소드를 통해 찜취소 성공 메시지가 뜨면서
찜 취소가 됩니다.
- 상세페이지와 수량 증가 기능: 제품 목록에서 특정 제품을 클릭하면 해당 제품의 상세 페이지로 이동하는 기능을 구현했습니다. 상세 페이지에서는 제품의 정보, 이미지, 가격 등을 제공하며, 사용자는 수량을 조절할 수 있습니다. 수량을 조절할 때마다 가격이 실시간으로 계산되어 표시되도록 코드를 작성하여 사용자에게 편의성을 제공했습니다.
수량에 따라 가격이 실시간으로 바뀌는 기능을 구현하는 것이 어렵고 힘들었습니다..
init 함수로 초기화를 해줘야 하는 걸 몰라서 찾느라 힘들었습니다..
📖 느낀 점
👉 이 프로젝트를 진행하면서 전체적인 프론트 작업은 수월하게 진행됐지만, 처음 겪어보는 기능들도 많았습니다. 또한, 프로젝트를 진행하면서 새롭게 알게 되는 기능들도 있었습니다.
어려웠던 부분은 수량을 늘리면 가격도 실시간으로 올라가는 것을 구현하는 것이었습니다.
수량과 가격을 동시에 변경하는 기능을 구현하는 것에 어려움을 느끼면서 구글링을 통해 검색하여 다양한 자료와 코드를 찾아보았습니다. 이 과정에서 init() 함수를 처음 알게 되었는데, 이 함수가 초기화 작업을 수행하는 역할을 한다는 걸 알게 되었습니다.
이전에는 수량과 가격 간의 연결을 구현하는 데에 있어서 초기화 단계가 없었기 때문에 구현하는 데 어려움을 겪었습니다.
하지만 구글링을 통해 다양한 자료와 예제를 찾아보는 과정에서 init() 함수를 알게 되었고, 이를 활용하여 초기화 작업을 통해 기능을 수행할 수 있게 되었습니다.
이러한 경험을 통해 새로운 함수나 개념을 습득하고 적용하는 능력을 키울 수 있었습니다. 프로젝트를 통해 계속해서 학습하고 성장하는 과정에서 새로운 기술과 개념을 습득하는 자세를 가지게 되었습니다.
