사용 기술
JSP, MariaDB, JDBC, JQuery, Ajax, Gson, Bootstrap
개발 환경
Eclipse, Tomcat 9.0
개발 기간
3일
버전 관리
Github -> 링크
특징 및 설명
평범한 동영상 관리 게시판이지만 조금의 반응형(?)을 곁들였습니다. 모든 페이지에서 가로 길이가 최소 400px 까지 줄어들어서 모바일 친화적입니다. 미디어 쿼리를 사용한 정도까지는 아니고, css의 calc 함수와 %를 주로 이용했습니다.
주요 기능
목록 조회(index.jsp)
목록 조회 페이지는 display의 flex 속성과 flex-wrap의 wrap 속성을 이용해서 열거형으로 동영상들을 나열했습니다. 각각의 동영상들은 div 로 감싸져 있는데, 이 div 전체에 링크를 걸기 위해서 div 자체에 cursor 와 onclick 속성을 주었습니다.
각각의 동영상 에서는 썸네일과 작성자, 작성 일자를 확인할 수 있습니다.
동영상 검색(index.jsp)
검색 기능은 동영상의 제목 혹은 동영상 내용(설명) 을 통해 검색할 수 있습니다. 따로 search.jsp 등을 만든건 아니고, index.jsp의 쿼리로 keyword와 mode 를 주면 알맞는 동영상들만 DB에서 불러옵니다.
(예: ../index.jsp?keyword=커피&mode=제목)
동영상 업로드(write.jsp)
동영상 목록에서 우측 상단의 + 모양을 누르면 나오는 비디오 업로드 화면입니다. 제목과 설명을 작성하고 썸네일과 동영상을 업로드할 수 있습니다.
작성자를 구분하기 위해 작성 시 작성자의 닉네임과 비밀번호를 입력합니다. 비밀번호는 이후에 해당 동영상을 수정하거나 삭제할 때 사용됩니다. 비밀번호는 DB에 password 함수를 통해 SHA-1 방식으로 단방향 암호화되어 저장됩니다.
썸네일을 등록하면 미리보기 이미지를 통해 볼 수 있습니다. 이는 javascript 에서 해당 input 태그에 change 이벤트 리스너를 통해서 구현했습니다.
필수적으로 입력해야 하는 항목들의 유효성 검사는 그냥 클라이언트에서 자바스크립트로만 확인했습다. 좀 더 확실히 하고 싶다면 jsp 단에서도 확인해야 하지만 그렇게까지 하지는 않았습니다.
작성,수정 확인(submit_do.jsp)
비디오를 업로드하거나, 수정하면 submit_do.jsp를 통해 파일이 업로드되고 DB에 반영됩니다.
작성인지 수정인지는 id값이 넘어왔는지를 통해 구분합니다.
비디오 조회(view.jsp)
동영상 조회를 위한 view.jsp 입니다. 브라우저의 width 값에 따라서 동영상은 자동으로 16:9 비율을 유지합니다. css 지식이 얕아서 이것을 구현하는게 가장 함들었던 것 같습니다.
동영상 제목, 작성자, 작성(수정) 일자 그리고 동영상 설명 등을 확인할 수 있습니다. 작성시 입력한 비밀번호를 통해 수정하거나 삭제할 수 있습니다.
또한 댓글 기능이 있는데, 댓글을 작성할 때마다 페이지가 새로고침되면 불편할 것 같아서 Ajax를 통해 비동기 방식으로 구현했습니다. 댓글 작성과 삭제 모두 비동기 방식으로 처리합니다.
댓글 작성
댓글 삭제
동영상 수정(update.jsp)
동영상 수정은 비밀번호를 정확히 입력하면 수정 페이지로 넘어갑니다. 보안을 철저히 하려면 수정시 토큰 등을 부여해서 잘못된 접근을 막아야 하지만, 여기선 그렇게까지 하지는 않았습니다.
수정시에는 다른 것들은 모두 수정할 수 있지만, 작성자 닉네임과 비밀번호는 수정하지 못하게 하였습니다.
동영상 삭제(delete_do.jsp)
동영상 삭제는 비밀번호를 확인하고 삭제합니다. 별다른 기능은 없습니다. 동영상과 썸네일 파일이 서버에서 삭제되고, 해당 비디오의 댓글도 모두 DB에서 삭제됩니다.
DB 구조
DB에는 2개의 테이블이 있습니다. 비디오 정보를 저장하는 video 와 댓글 정보를 저장하는 comment
- id : 비디오 고유 id (기본키, auto_increment)
- title : 비디오 제목
- video : 비디오명
- thumbnail : 썸네일 이미지명
- description : 비디오 설명
- author : 작성자
- date : 작성(수정) 날짜. 기본값에 currnet_timestamp를 적용해서 자동으로 작성(수정) 날짜를 저장합니다.
- password : 비밀번호(암호화)
- id : 댓글의 고유 id (기본키, auto_increment)
- video_id : 해당 댓글이 존재하는 비디오의 id
- author : 댓글 작성자
- description : 댓글 내용
- password : 댓글 비밀번호(암호화)
후기
좀 급하게 개발한 감이 있어서, 코드가 스파게티인 경향이 있습니다. 그래도 구현하고 싶은 기능은 다 구현했고, 기능도 문제없이 잘 작동해서 만족스럽습니다. JSP와 JQuery라는 좀 오래된 친구들이지만(...) 체험해볼 수 있어서 좋았던 것 같습니다.
그러나 하나 아쉬운 점은 굳이 jsp파일로 만들지 말고 서블릿 객체로 만들어도 되는 것들을 의미 없이 jsp 로 만들었다는 것입니다. 다 만들고 보니 이런 것들이 보이네요..
댓글