쌍용 국비 과정을 진행하면서 JSP를 활용한 이번 세미프로젝트에 대해 회고록을 작성했습니다. 😊
우리 팀의 웹페이지는 베이커리 쇼핑몰로 나는 장바구니를 제외한 주문과정과 상품 상세페이지 부분을 맡았고
JSP를 활용해서는 처음 진행하는 웹 프로젝트라 처음 상상했던 부분과는 많은 어려움을 겪었다.
특히 어려웠던 부분은
👇
1. JS와 Ajax를 활용해 뷰페이지에서 깔끔한 기능 구현
👇
2. EL태그, JSTL 활용에 미숙해 매번 찾아봤던 점
👇
3. 변수명과 메소드를 깔끔하게 정리하기
이렇게 세 부분이 특히 어려웠다. 물론 중간중간 깃헙이 터지기도 했었지만?
사실 이런건 conflict 해결 방법도 배울 수 있었고 브랜치를 복원하면 대부분 해결이 가능한 지점이라 좋은 경험이었다.
그리고 우테크 지원과정에서 배웠던 기능별로 계속 pr하고 커밋메시지를 작성해서 깃헙이 터져도 pr 내역을 보면서 금방 복구할 수 있었다.
그래서 일단은 우리 프로젝트를 clone 하고 내가 했던 부분을 리팩토링하는 과정을 가져볼려고 한다!!
리팩토링의 기준은 다음과 같다.
1. 메소드는 1가지 기능만 할 것
2. 메소드의 인덴트는 1단계를 목표로 할 것
3. if else 보다는 if문만을 쓸 것
이러한 기준 + 변수명을 깔끔하게 하는 것을 목표로 진행해보고자 한다.
가장 문제가 큰 부분은 여기라고 생각한다.
입력받는 값과 출력되는 부분이 많아 각각의 변수명을 어떻게 체계적으로 정리할지 고민해봐야 했다.
변수명을 마구잡이로 만들면 controller 쪽으로 보낼 때 헷갈리기 때문이다.
그래서 id는 카멜 케이스 class는 하이푼을 활용하며, 형태+의미+상태 를 기준으로 변수명을 바꿔보았다.
✅
<기존 코드>
join의 경우 장바구니 번호의 배열을 join 메소드로 문자열로 바꾼 것을 의미하는데 prefix 부분에 join이라는 형태로 써줬다. 맞는지는 모르겠다..
<변경 코드>
✅✅
<기존 코드>
이 부분도 진짜 심각하다고 느꼈는데 장바구니에서 받아온 정보를 주문서 작성 view로 넘기기 전에
CartVO에 다시 저장해주는 부분이다. 작성하면서도 너무 더럽다고 느꼈지만 시간이 없어서 대충 작성했었다..
기존 join으로 받아온 문자열을 배열로 바꿨기 때문에 카멜케이스를 활용하고 Array 라고 명시해줬다.
<변경 코드>
✅✅✅
<기존 코드>
장바구니를 통해 구매한 경우와 단일 상품를 나눠서 구매 상품의 정보를 가져오게 되는데
결과적으로 input의 값들을 class로 한번에 가져올 수 있게 구현했다.
그래서 class의 name도 id와 다르게 네이밍 하여 가독성을 높이도록 했다.
<변경 코드>
그리고 NHN의 코딩컨벤션을 찾아보다가 table 부분은 오히려 들여쓰지 않는 것을 보고 나도 적용시켜보았다.
✅✅✅✅
<기존 코드>
<변경 코드>
뭔가 들여쓰기를 안하면 불편할 것이라 생각했는데 깔끔해진 코드를 보니 좋은 방법을 배운 것 같다.
✅✅✅✅✅
<기존 코드>
아 벌서부터 머리가 아프다.. 받아야 할 정보가 많다보니 너무 난잡하다..
<변경 코드>
테이블 속성명 때문인 것을 제외하고 자바 네이밍 규칙을 지키고 주석문을 추가하여 좀 더 가독성 있게 수정했다.
🟠 느낀 점
1. 소통을 통해 메소드와 변수명의 규칙을 미리 정했다면 좋았을 것 같다.
2. 시간과 자원은 한정적이다. 오버스펙 하지말자!
3주라는 시간과 팀의 능력을 생각해서 계획을 세운다면 코드의 질이 높아졌을 것 같다.
3. 하지만 2의 경우 성장속도가 느려질 수 있다. 헬스에서 자세만 집중하고 중량을 치지 않으면 근성장은 이루어질 수 없다! 지금은 무리를 해서라도 기능을 구현하는 부분도 필요하다.
🟣 좋았던 점
1. 노션을 통해서 기능 구현을 세분화하고 우선순위를 정했던 점
2. 우선순위에 따라서 스프린트를 진행했고 결국에 안정적으로 프로젝트를 완성할 수 있었던 것 같다!
🟢 앞으로 할 것
세미프로젝트를 끝내면서 아직 미숙한 부분이 많다는 것을 알 수 있었다.
일단 이번 글에서는 깔끔한 코드명에 집중했지만 위에 써놓았듯이 개인적으로 js와 Ajax 그리고 el태그와 jstl에 대해서도 한번 다시 복습할 것이다.
