<With My Pet> With My Pet 웹사이트 프로젝트 회고록

🔥 프로젝트 소개

▶ 애완동물을 컨텐츠로 커뮤니티를 운영하는 사이트를 기반으로 한 기능 구현 프로젝트

▶ 개발기간
2021년 2월 1일 ~ 2021년 3월 31일

▶ 팀 구성
Front-End & Back -End: 5명 (성진희, 차지현, 임연지, 이수진, 최우재)

▶ 개발 스케줄 관리와 소통을 위해 사용한 프로그램
스케줄 관리 프로그램: Trello
소통 프로그램: Slack

🧐 구현 영상

구현영상

🎆 내가 맡은 역할

Front-End & Back -End

메인 페이지
1. Nav, Footer 공통으로 사용하는 Component 구현
2. 스크롤 위치에 따라 변화하는 Nav
3. 콘텐츠에 대한 Scroll Event
4. 클릭한 콘텐츠와 맞는 데이터 송출

상품 페이지
1. Nav 드롭다운을 통한 목록생성
2. 상품별 목록 구성에 따른 연결된 웹 페이지별 기능 구현
3. 관리자 계정일 경우 드롭다운을 통한 상품등록 탭 생성
4. 리뷰 게시글 생성에 따른 리스팅 구현
5. 로그인이 안되었으면 로그인 창/ 회원가입창으로 이동 선택
6. 쇼핑카트에 물건을 담을 때 페이지이동/ 기존 창 유지

결제 페이지
1. 결제에 따른 로그인된 회원의 세션정보 결제화면으로 불러오기
2. Kakao Postcode API를 통한 주소값 가져오기
3. iamport API를 통한 테스트결제 구현
4. 결제 정보 관리자 페이지로 넘김

💬 잘한 점 / 아쉬운 점 / 해결 or 개선 방법

🎇 잘한 점

팀원과의 소통

우리 팀은 전반적으로 모든 팀원과 소통이 잘되었다. 아침마다 5분 회의를 통해 서로 계획을 공유하며 하루를 시작하였다. 이 덕분에 서로 어떤 개발을 진행 중이고 어떤 어려움에 처해있는지까지 다 알고 있었다. 피드백 또한 서로 바로 전달할 수 있어서 실수를 빠르게 발견했고 덕분에 처음부터 방향을 잘 잡을 수 있었다. 정말 잘한 부분이 많지만, 우리 팀이 성공적으로 프로젝트를 마칠 수 있었던 이유 중 가장 큰 부분이 소통이라고 생각하기 때문에 제일 처음으로 적었다. 물론 각자의 역할이 있었지만, 팀원들의 지혜가 합쳐졌기에 자신의 역할을 충분히 해낼 수 있었다고 생각한다.

백엔드와 프론트 업무의 통합

백엔드업무와 프론트 업무를 나누지 않은 것은 우리 모두 같은 업무를 통해 처음부터 끝까지 각자 맡은 바를 다하는 것에 대한 목표가 있었기 때문이었다. 프론트업무를 통한 웹사이트 구성과 그에 따른 기능을 불어넣는 백엔드의 작업은 정말 많은 시간이 들었지만 그만큼 뜻깊었다.

첫 번째로 프론트업무를 하며 사용자 편의에 따른 구성에 대해 생각하는 시간을 통해 구성도에 대한 중요성을 배웠다. 어느 위치에 따라 보이는 이미지, 위치에 따라 받아들이는 느낌이 달라 이것을 조정하는데 많은 공을 들였다.

두 번째로 세심한 테이블의 짜임이 중요하다는 것을 배웠다. 처음 DB 모델링을 짤 때 고민을 하고 회의를 통해 짜임새 있는 테이블구성도를 만들려고 노력하였지만, 프로젝트의 진행될수록 계속 수정해야 하는 부분이 생겼고 깔끔하지 못한 부분이 나타났다. 정말 너무 아쉬운 부분이었다. 이 부분에서 팀원들과 얘기도 많이 하고 수정도 많이 하여 그 과정을 다시 정리하고자 많이 노력한 것 같다.

🎇 아쉬운 점

리펙토링

아직 숙련되지 못한 주니어개발자이기 때문에 생기는 부분이긴 하지만 처음으로 프로젝트를 구성할 때에는 많은 아이디어와 무언가를 이루고 싶은 욕구가 많이 있었다.
1주 단위로 구현 목표를 잡았는데 처음에는 계획한 대로 기능구현을 하는 완벽한 프로젝트가 될 수 있을 것 같은 생각이 들었었다. 하지만 막상 프론트엔드/ 백엔드 순으로 프로젝트를 진행하며 처음부터 쉽지 않다는 것을 느꼈다. 웹페이지를 구성하는 첫 부분부터 보이는 것이 다가 아니라는 것을 깨달았다. 계속해서 사용자 입장에서 생각하려고 애썼다.

또한 첫 기능을 구현하며 팀원들한테 코드를 보여줬을 때 생각보다 내가 아는 것이 다른 사람으로서는 어렵고 복잡하고 길다고 느껴진다는 것을 알게 되었다. 우당탕 작동은 하지만 보는 사람이 힘든 코드였다. 그 후 코드를 짜고 기능을 구현할 때 주석을 깔끔히 쓰고 보기 쉬운 코드를 만들기 위해 노력하였다. 어떤 코드이고 어떤 기능을 구현할 때 이것이 실행되는지 누구나 보기 쉽게 하고자 하는 마음이 정말 중요한 것이다. 아직도 부족하지만, 코드에 주석을 꼭 달고 보기 쉽게 작성하고자 항상 신경을 써야겠다고 느꼈던 경험이 되었다.

🎇 해결 or 개선 방법

천천히 확실한 것만큼 중요한 게 없다.

잘하고 싶은 마음에 많은 기능구현을 하고자 달려가다 보니 나에게 남는 게 없다는 생각이 강하게 들었다. 중요한 기능구현을 다 하고 뒤돌아보니 기본이 탄탄하지 못한 것에 대한 후회가 많이 들었다. 더 많은 기능을 빠르게 구현하고 싶은 욕심이 생기는 것은 당연하지만 기본을 깊게 공부해서 코드를 파는 것이 더 중요한 것이다. 경험이 쌓이면서 자연스럽게 구현 속도는 빨라지고 할 수 있는 것도 늘어나겠지만, 기초부터 쑥쑥 천천히 할 때 더 힘이 있을 것이다. 항상 이것을 명심해야겠다.

앞으로도 내 코드를 돌아보며 공부를 하고 계속 발전해 나아갈때 그 폭이 클것이다. 기능구현에 만족하는 것이 아니라, 내가 어떻게 구현하였는지 점검하며 개발해 나가야겠다.

🌝 기록하고 싶은 코드 / 함수 / 로직

if(login != ''){//로그인 체크후 장바구니이동.
                              $.ajax({
                              	url: "cart",
                              	type: 'POST',
                              	data:{
                              		login2 : '${login.member_name}',
                              		product_name2 : '${login.member_name}',
                              		product_code2 : '${productDes.product_code}',
                              		product_price2 : '${productDes.product_price}',
                              		product_content2 : '${productDes.product_content}',
                              		product_image2 : 'assets/images/${productDes.product_image}',
                              		product_amount2 : $("#product_amount").val(),
                              		product_size2 : $("#product_size").val()
                              	},
                              	success: function(result){
                              		if(confirm("장바구니에 담겼습니다.이동하시겠습니까?")){
                              			location.href="cart?catgo_code=9";
                              		}else{
                              			location.href="productDes?catgo_code=${productDes.catgo_code}&review_number=${productDes.review_number}&product_code=${productDes.product_code}";
                              		}
                              	}
                              });
                              } else {
                              var msg = '장바구니에 담지 못하였습니다.';
	                              Swal.fire({
	                              icon: 'error',
	                              title: '로그인이 필요합니다!',
	                              text: '장바구니는 회원 서비스 입니다. 로그인을 먼저 해주세요.',
	                              footer: '<a href="/member/login.do">로그인</a> &nbsp;&nbsp;<b>/</b>&nbsp;&nbsp; <a href="/member/agree.do">회원가입</a>'
	                              })
	                              }
	                              }); 
                           </script>

코드설명

Ajax를 통한 비동기 통신이 가능하도록 하여 로그인 유무에 따라 분개->
1. 로그인 했을경우 로그인된 회원의 token, 선택한 상품값이 가져와질 수 있도록 하였다.
2. 로그인을 안했을 경우 회원가입/ 로그인 화면을 선택할 수 있도록 SweetAlert library를 사용하여 팝업창을 띄웠다.

• Ajax : 서버가 클라이언트 간에 비동기 통신을 가능하게 해주는 javascript library