국비학원에서 JSP를 배우고 길었다면 길고 짧았다면 짧았을 3주의 JSP 프로젝트가 끝이 났다.
열심히 배우며 따라가고 있었지만 팀원들과 같이 아무것도 없는 상태에서 무언가를 만들어야한다는 부담감이 있어서 프로젝트를 시작하기 전에 겁을 먹고 있었는데, 다행히도 좋은 팀원분들을 만나서 서로 이끌어주고 협력하면서 좋은 프로젝트 작품이 하나 나온 것 같아서 다행이라고 생각한다.
프로젝트를 통해서 화면을 만들고, 화면에 기능을 부여하면서 작동하는 페이지를 보면서 자신감을 얻게 되었고, 내가 알아야할 개념들, 부족한 부분들을 알게되어서 조금이나마 구체적인 로드맵을 짤 수 있을 것 같아서 여러모로 좋은 경험을 하게 된 것 같다. 프로젝트를 진행하면서 있었던 여러가지 고민들, 해결 과정들을 작성하고자 글을 썼다.
1. 프로젝트 일정
프로젝트는 11월 18일부터 12월 8일까지 진행했으며, 총 4명의 팀원들이 같이 프로젝트를 진행하였다.
주제선정부터 어떻게 할 지 많은 이야기가 오갔다. 우리가 배운 내용을 잘 표현할 수 있고, 너무 어렵지 않은 주제를 선정하여 중도에 포기하는 일이 발생하지 말자는 의견이 있었고, 이를 감안하여 쇼핑몰을 만들기로 결정했다.
프로젝트 주제는 마켓컬리를 클론코딩한 쇼핑몰 사이트 '마켓하니'로 주제를 선정했고, 마켓컬리의 프론트 레이아웃 구조나 서비스로 제공하는 기능 전반적으로 참고하되, 기능 구현은 수업에서 배운 내용을 바탕으로 재구성하기로 하였다.
2. 협업 툴 사용
주제 선정, DB설계, 각자 작업한 내용들을 문서로 정리하기 위해서 Google Document를 사용하였다. 실시간으로 팀원들이 작성한 내용이 반영되기 때문에 협업을 하는데 있어서 크게 문제는 없었던 것 같다. slack과 같은 협업툴을 사용해보자는 의견도 있었지만 사용법을 정확히 알지 못하면 오히려 독이 될 수 있어서 일단 패스.
하루에 한 번씩 각자 작업한 내용들을 이야기하고 병합을 진행하였는데, 병합을 원활히 하기 위해서는 협업 툴 사용이 필수적이었다. 프로젝트 진행 초반에는 수동으로 각자 작업한 내용을 병합하여 작동이 되는 지 확인하고, 구글드라이브를 사용해 파일을 다운받아 사용하였다.
하지만 수동병합은 프로젝트 후반에 작업한 파일 갯수가 많아져 수정한 파일이 어떤 부분인지 찾기 어려워지고, 병합하는 시간이 길어질 것 같아서 팀원들에게 GitHub 사용을 제안하였다.
이전에 JDBC 프로젝트를 통해 어느정도 Git 사용법을 알고 있어서 팀원들에게 가르치는데 큰 어려움은 없었던 것 같다. 결과적으로 병합시간이 줄어들어 프로젝트 진행과정이 원활해졌다.
Git을 세팅하기위해서 이전에 글을 포스팅한 적이 있었는데, 여기에서 볼 수 있다.
3. 기능 구현 중 있었던 여러가지 고민들
자신이 구현해야하는 파트가 정해지고 난 후, 각자의 영역에서 작업을 시작했다. 나는 로그인/회원가입, 장바구니, 주문페이지, 주문 완료페이지를 맡았다.
이번 프로젝트를 진행할 때 프론트 부분은 순수 자바스크립트를 사용하여 기능을 구현해봐야겠다는 생각을 가지고 있었다. 자바스크립트를 배울 때 라이브러리에 의존해서는 안되고, 자바스크립트가 기본적으로 제공하는 문법을 알고 있어야 다른 라이브러리를 배울 때 어떤 방식으로 동작하는 지 알기 쉬울 것 같아서였다.
3-1. 회원가입 부분
회원가입 부분은 정규식을 사용하여 사용자가 데이터를 입력 시 제대로 입력하였는 지를 확인하도록 자바스크립트를 통해 구현하였다. 중복확인의 경우 ajax를 사용하여 서버에 가입하려는 ID가 존재하는지 확인하도록 구현하고, 주소검색은 Daum Postcode API를 사용하여 검색할 수 있도록 작성하였다.
3-2. 사용자가 입력한 비밀번호 암호화
사용자가 비밀번호를 입력하여 회원가입 할 때 입력한 값 그대로 DB에 전달하는 것은 보안 상에 문제가 있지 않을까.. 라는 생각을 하게 되었다. 데이터를 암호화해야할 것 같다는 필요성을 느끼게 되었고, 여러 글들을 찾아서 읽어보았다.
그 중에 'SHA-256'이라는 해시알고리즘을 사용하여 단방향 암호화를 통해 데이터를 암호화하여 사용할 수 있다는 점을 알아냈고, 사용자가 회원가입 시 입력한 값을 암호화하여 저장하도록 기능을 구현하였다. 암호화하는 과정에서 key-stretching, salt를 추가하는 등 여러가지 로직이 작동하여 해커가 쉽게 암호데이터를 해독하기 어렵도록 만들었다.
자바에서 제공하는 MessageDigest, SecureRandom 객체를 사용하여 가장 간단하게 만든 암호화이지만, 나름대로 잘 작동해서 뿌듯한 기분이 들었었다. 암호화를 구현하면서 여러가지 기술들을 접하게 되었는데 SSE, RSA같은 것들이다. 후에 사용할 일이 생길 것 같다는 생각이 들었다.
암호화와 관련된 기본적인 개념들을 이전에 포스팅했던 적이 있다. 여기에서볼 수 있다.
3-3. 모달창 구현하기
이번 프로젝트를 진행하면서 모달이라는 개념을 알게되었는데, 팝업창을 띄우지 않고 기존 페이지에 창을 하나 더 띄워서 데이터를 입력하거나, 사용자에게 메시지를 전달할 수 있는 CSS 개념이다.
장바구니 페이지에서 배송지를 변경하기위해 데이터를 입력하는 폼 페이지를 구현해야했다. 마켓컬리에서는 팝업창을 띄워서 배송지를 입력했는데, 모달을 사용하여 배송지를 입력하게 해보고싶은 생각이 들어서 만들어 보았다. 팝업창이 안 뜨기 때문에 웹페이지 내에서 깔끔한 화면 전환이 가능하여 뭔가 동적이면서 매력적으로 보이게할 수 있는 것 같다.
3-4. 실시간 DB연동(ajax)
이 외에도 웹 페이지를 부분로딩하는 것에 신경을 많이 썼던 것 같다. 동적으로 웹페이지를 만들기 위해서는 ajax의 사용이 필수적인데, 제품을 장바구니에 추가하고, 장바구니 페이지에서 수량을 변경할 때마다 DB에 있는 컬럼값을 수정해야하는데, 값을 변경해야할 때마다 홈페이지를 새로고침할 수는 없는 노릇이기 때문이다.
처음에는 ajax 사용이 익숙하지않아 어디서 오류가 나는 지부터 찾기가 힘들었지만, 사용할 수록 어떤식으로 코드를 작성해서 써야할 지 감이 잡혔던 것 같다.
한 가지 아쉬운 점은, JSP만 사용해서 ajax를 사용하기에는 한계가 있다는 점? 인 것 같았다. 스프링에서는 데이터를 json으로 파싱해서 리턴하는 것이 가능한데, JSP에서는 json으로 데이터를 리턴하려면 라이브러리를 설치해야하고, 사용법을 알아야하는 등, 여러가지로 불편한 점들이 있어서 아쉬웠다.
그렇다고 HTML 태그를 전부 String으로 작성해서 보내기에는 개발자스럽지가 않지만.. 일단 Spring 프로젝트가 아닌 만큼 어쩔 수 없었다고 생각한다.
4. 정리
이번 프로젝트의 아쉬웠던 점이라면 핵심기능과 부가기능(디테일)을 구분하여 구현할 부분의 범위를 확실히 했다면 보다 완성도 있는 프로젝트가 나오지 않았을 까 하는 것이다. 마켓컬리라는 사이트가 하루아침에 나온 것이 아니고, 꾸준한 유지보수를 통해 나오게 된 하나의 서비스이기 때문에 모든것을 다 구현하기에는 무리가 있었다.
프로젝트를 하면서 프론트 쪽에 흥미가 생겼다. 내가 지향하는 목표는 프론트를 다룰 줄 아는 백엔드인데(그냥 풀스택이다), 확실히 화면이 바로바로 렌더링되면서 내가 어떤식으로 구현했는지가 바로바로 피드백이 되기 때문에 개발하는 맛이 있고, 어떻게 레이아웃을 짜야할지 고민하는 재미도 있었다.
물론 기능을 구현하는데도 많은 도움이 되었다. 데이터를 암호화하는 방법을 비롯하여 SQL문을 어떻게 효율적으로 날려서 서버에 무리를 주지 않을 지 고민도 많이 했었던 것 같다. 무분별하게 join문을 사용하지는 않았는지, 하나의 쿼리문을 날려도 되는 걸 두 세개로 날리지는 않았는 지, 테이블의 컬럼들이 각자의 역할을 잘 수행하고 있는 지 한 번쯤 고민하게만들었다.
프로젝트가 끝나고 한 가지 목표가 생겼다면 React를 배워보는 것.
바닐라 자바스크립트만 사용하여 프론트를 구현하는 것은 생각보다 한계가 있었다. Virtural DOM을 사용하는 리액트는 state를 사용하여 데이터가 바뀔 때마다 해당 부분만 재렌더링을 해서 SPA(Single Page Application)을 구현하는데 도움이 되는 프론트엔드 라이브러리라고 들었다.
국비에서 진행하는 파이널 프로젝트 외에 Spring과 React를 사용하여 개인프로젝트를 하나 만들어야할 것 같다. RESTAPI를 통해 데이터를 주고받으면서 보다 깊이있는 프로젝트를 해보고 싶고, 배포까지 해보고싶은 욕심이 생겼다. 잘 할 수 있을지는 모르겠지만 JSP 프로젝트를 통해 얻은 지금의 자신감이라면 해낼 수 있지 않을까.
댓글