JSP를 이용한 제품 소개 홈페이지 만들기

설 연휴가 있는 이번 일주일 동안 제품을 소개하는 홈페이지를 JSP로 만들어보았다.

처음 배울 땐 내가 어떤 부분을 모르는지 모르는 상태였는데

역시 한번 해보고 나니 내가 어떤 부분을 모르는지를 아는 상태가 되었다.

 

건물도 마찬가지지만 프로젝트를 시작할 때에는

내가 구현하고 싶은 페이지의 뼈대, 그 구조를 잘 잡는 것이 중요했다.

설 연휴에 프로젝트를 빨리 끝내서 마지막에 페이징 기능과 댓글 기능을 추가했더니

기존에 잘 작동되던 기능들의 오류를 발견했다.

실무에 들어가면 기능이 추가되는 일들이 아주 많을 텐데

어떤 부분에 영향을 주는지를 내 머릿속에서 구조를 잘 생각해야 할 것 같다.

 

우선, servlet(controller)를 통한 역할과 로직을 분리하는 MVC model 2방식으로 구조를 잡았다.

패키지와 java 파일이 방대해지긴 했지만 수정할 때 어떤 파일을 수정해야 할지 머릿속에서 바로 떠올릴 수 있었다.

 

또한, 파일 업로드를 도와주는 cos 라이브러리, json과 자바 오브젝트의 변형을 도와주는 json 라이브러리,

jsp 페이지에서 받은 데이터들의 표현을 도와주는 JSTL 라이브러리, DB 모델의 getter, setter의 자동 생성으로 수정하여 추후의 오브젝트의 수정이 기존의 코드에 영향을 주지 않는 lombok 라이브러리, DB로 mysql을 사용할 것이기 때문에 mysql 라이브러리 등을 사용하였다.

 

마지막으로 AWS amazon EC2를 이용하여 배포하였다.

 

 

 

 

 

 

 

 

아래는 실제 화면 구성입니다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

회원가입 화면

 

 

ajax를 통해 중복 확인과 주소를 입력할 수 있게 했다.

주소를 찾는 버튼은 주소 api를 파싱 하여 사용했다.

 

 

 

로그인 화면

 

 

로그인 화면은 DB의 아이디와 비밀번호를 매칭 시켜 확인한다.

매칭이 확인되면 session에 정보를 저장하여준다.

또한 아이디 기억하기 체크박스를 만들어서

체크가 되어있을 때 쿠키에 그 정보를 저장할 수 있게 하였다.

 

 

 

 

회원 수정 화면

로그인을 하면 오른쪽 메뉴바가 달라진다.

문의 글을 남길 수 있는 notice와 회원정보를 수정할 수 있는 modify가 나온다.

회원 수정 화면을 들어가면 세션의 정보를 읽어 각 화면에 뿌려준다.

개인정보보호법이 무서운 서하는 password는 어디에도 저장하지 않았다..

 

 

 

 

사진 삭제

노티스 리스트 화면

문의 글을 남길 수 있는 노티스 화면이다.

원래는 페이징 기능이 없었는데 마지막에 추가되었다.

이로 인해 조금의 보안이 필요하긴 했다..

DB의 SQL 문의 limit을 걸어 10개씩 뿌리기로 하였고

list를 호출할 때 각 페이지 번호를 함께 전달하였다.

페이지 번호가 0일 때는 이전 페이지가 활성화되지 않게

총 글 개수 / 10을 올림 한 수가 넘어가면 다음 페이지가 활성화되지 않게 세팅되었다.

마지막에 해서 조금 아쉽긴 했는데 다음엔 1,2,3 페이지 번호를 매겨보고 싶다.

 

 

 

 

 

노티스 글쓰기 화면

서머 노트 라이브러리를 이용하여

사진도 넣고 글씨에 이쁘게 색도 입힐 수 있다!

친구들이 좋아한 기능..

 

 

 

 

 

 

글 작성자와 세션이 같으면 수정, 삭제, 목록이 전부 활성화되고

글 작성자와 세션이 일치하지 않으면 목록으로만 돌아갈 수 있다.

세션의 admin 권한이 있는 사람은 글을 삭제할 수 있는 버튼만 활성화되었다.

 

추후 욕심을 낸다면 admin 관리자를 위한 페이지를 만들어보고 싶다.

 

사진 삭제

 

 

댓글 기능

 

댓글을 달수 있다.

 

제일 아쉬운 부분이다.

시간이 좀 더 있었더라면 댓글을 수정하고 때 댓글을 달수 있고 프로필 이미지를 지정해서

댓글 옆에 이미지를 달수 있게 해보고 싶다..

이 글을 올리고 난 후 언젠가 이 기능을 추가했다고 블로그를 수정할 지도..?

 

 

 

제품 리스트 화면

제품 리스트 화면은 세션의 admin 권한이 있는 사람만이 제품업 로드 버튼이 활성화되고 이를 업로드할 수 있다.

 

 

 

 

제품 상세 보기 화면

상세 보기 화면도 마찬가지로 admin 권한이 있는 사람만이 제품 수정, 삭제할 수 있다.

 

 

 

 

제품 업로드 화면

admin 권한이 있는 사람은 제품의 이미지와 이름 등의 폼을 작성하여 이를 게시할 수 있다.

cos 라이브러리를 처음 사용해봤는데 이미지의 절대 경로와 상대 경로의 개념이 잡혀있지 않아 애를 먹었지만

좋은 공부가 되었다.

 

 

 

 

 

 

 

 

길고도 짧은 일주일이었다.

더 이상 톰캣과 jsp가 무섭지 않다.

촉박한 시간이 무서울 뿐

 

 

 

이젠 스프링이 무섭지 않게 스프링과 안면 트러 가야겠다.