기술 스택 설명
🚩기술 스택
🙌FrontEnd : HTML / css / JavaScript
🙌BackEnd :
- OS : Window
- Development Tool : Ecliplse, Apache-Tomcat, Sql Developer
- Framework : Spring,mybatis, bootstrap
- Language/Skills : HTML, CSS, Java Script, JAVA, SQL, JSP & Servlet, jQuery
- DB : Oracle
🙌협업 도구 : Discode / git + gitHub
😎GitHub : [프로젝트 깃허브 주소 연결]
전체적으로 디테일 페이지를 담당하였으며,
담당한 것은 📕로 표시 하였습니다.
📕 Exerd: 팀원 전원 참여
📕 유저 페이지 : 회원가입, 로그인, 로그아웃, 회원정보수정
📘 main(index) : 서평 랜덤 재생
📘 내서재 : 내서평
📕 취향저격 : my취향, 좋아요한 서평, 관심가는 책(북마크)
📘 플레이리스트 : 카테고리 별 폴더 리스팅
📕 플레이리스트 상세페이지 : 서평 추가 및 삭제, 폴더 좋아요 기능, 사이트 전체 서평 검색 및 추가
📘 서평쓰기
📕 책 상세페이지 : 해당 책 데이터 가져오기, 해당 책의 서평 최신순/인기순 리스팅, 서평 수정/삭제, 서평 페이징, 서평 좋아요 기능
📕 Exerd
📕 유저 페이지
📖로그인, 로그아웃
☑️ httpSession 사용
: session에 로그인 정보를 넣어 사용하고, 로그아웃 시에는 session 정보를 삭제한다.
- 로그인
HttpSession.setAttribute("authUser", authUser);- 로그아웃
httpSession.removeAttribute("authUser");
httpSession.invalidate();
4) 세션 값 삭제하기
removeAttribute(String name)
removeAttribute 메서드로 name 값에 해당하는 세션 정보를 삭제할 수 있다.
invalidate()
invalidate로 모든 세션 정보를 한 번에 삭제할 수 있다.
📖회원정보수정
☑️ 화면 로드시 기존 데이터 가지고 오기
읽기 + 수정
: 회원정보수정 버튼 클릭 ---(세션에 있는 유저 고유 번호 전달)----> 화면 로드시 기존의 데이터 가져오기 ----> 데이터 수정 후 수정 요청 -----> update 쿼리로 데이터 수정
📖회원가입 (SignUp)
폼에 있는 데이터 받기 -> 데이터 검증 -> 데이터베이스 insert 저장
📕 책-상세페이지
🔗 페이지로 넘어오는 경로
1. main 서평 컨텐츠
2. 책 제목 
📖 핵심 기능
- 책 데이터 관련 기능
☑️ 관심가는 책 (북마크 기능)
☑️ 해당 책 데이터 가져오기 (제목, 저자, 작성된 서평 누적 개수)- 서평 관련 기능
☑️ 해당 책의 서평 최신순/인기순 리스팅 (R)
☑️ 서평 수정/삭제 (U/D)
☑️ 서평 페이징
☑️ 서평 좋아요 기능
🛠 기능 설명
1. 관심가는 책 (북마크 기능)
- 👉 '로딩'시 이전 북마크 여부 체크
: 로딩시 userno, bookno 데이터를 통해 로그인한 사용자의 이전 북마크 정보를 가져온다
Endpoint url 요청 (get)
http://localhost:8088/bookproject/bookdetail?bookNo=9791166686603&userNo=1
- 👉 '사용자 요청시' 관심가는 책 등록/제거
: 쿼리문 CRUD는 성공시 성공한 수의 카운트를 반환한다 (0 혹은 1)
북마크 활성화 혹은 비활성화는 Delete, Insert로 이루어지기 때문에
성공시 반환되는 카운트값을 통해 데이터 성공 여부를 확인해준다.
Endpoint url 요청 (get)
http://localhost:8088/bookproject/bookdetail?bookNo=9791166686603&userNo=1&markresult=true
북마크 추가 혹은 삭제 :
user고유 번호와 해당 책 번호 현재 북마크 상태를 인자값으로 넘겨 DB에 insert/delete를 해준 뒤,
성공적으로 작용했을 경우 1의 값을 반환 받아
if문을 통해 String에 false값(추가의 경우 화면이 -로 되어야해서) 혹은 true(삭제의 경우 화면이 +로 되어야해서) 값을 반환반은 뒤
js로 화면을 그려줍니다.🖥 화면 설명
- 관심가는 책 등록
: 관심가는 책+ 요청 -> '내서재(취향저격) 관심가는책'에 해당 책 추가
- 관심가는 책 취소
2. 해당 책 데이터 가져오기 (제목, 저자, 작성된 서평 누적 개수)
로딩시 DB(테이블 book_info)에서 해당 bookNo로 데이터를 가지고온다.
-> 책 제목, 작가, 책 커버 url, 알라딘 책 url, 서평 누적수
👉 서평 누적 수
: 서평 테이블과 join(book_no)하여 count(book_no)로 서평 누적 갯수를 가져온다
(Query)
select count(review_no)
from books, review
where books.book_no = review.book_no
and books.book_no = book_no;
3. 서평 최신순 / 인기순 정렬
리스트 출력은 하단의 서평 데이터 리스트만 변경될 수 있도록 ajax로 리스트를 생성해줬습니다.
- 👉 사용자가 버튼 클릭 -> 최신순/인기순 정렬
최신순의 경우 테이블에서 orderBy를 통해 내림차순으로 정렬한뒤 값을 selectList로 응답받도록 하였고, 인기순의 경우 데이터베이스에서 서평에 좋아요를 누른 사용자의 정보를 담고있는 테이블을 조인하여 count를 통해 좋아요 수를 가져오고 마지막에 rownum으로 인기순 정렬을 하여 값을 반환해 줍니다
<<!-- 해당 책 서평 리스트 출력(인기순) -->
<select id="reviewListBest" parameterType="String" resultType="BookdetailVo">
<![CDATA[
select rownum rn,
ot.book_no bookNo,
ot.book_title bookTitle,
ot.review_no reviewNo,
ot.review_content reviewContent,
to_char(ot.review_date, 'yyyy/mm/dd') reviewDate,
ot.style_no styleNo,
ot.emo_name emoName,
ot.user_no userNo,
ot.nickname nickname,
NVL(ot.likecnt,0) likecnt
from (select rt.book_no,
rt.book_title,
rt.review_no,
rt.review_content,
rt.review_date,
rt.style_no,
rt.emo_name,
rt.user_no,
rt.nickname,
rt.likecnt
from (select bt.book_no,
bt.book_title,
bt.review_no,
bt.review_content,
bt.review_date,
bt.style_no,
bt.emo_name,
bt.user_no,
bt.nickname,
lt.likecnt
from(select b.book_no,
b.book_title,
r.review_no,
r.review_content,
r.review_date,
s.style_no,
e.emo_name,
u.user_no,
u.nickname
from books b, review r, style s, emotion e, users u
where b.book_no = r.book_no
and r.style_no = s.style_no
and s.emo_no = e.emo_no
and r.user_no = u.user_no
and b.book_no = #{bookNo}) bt,(select review_no,
count(review_no) likecnt
from review_user
group by review_no) lt
where bt.review_no = lt.review_no(+)) rt
order by rt.likecnt asc) ot
]]>
</select>
🖥 화면 설명
📕 서평-플레이리스트 상세페이지
📖 핵심 기능
- 플레이리스트 관련 기능
☑️ 플레이리스트 좋아요
☑️ 페이징- 모달창 서평 관련 기능
☑️ 키워드 서평 검색
☑️ 플레이리스트 실시간 서평 추가
☑️ 페이징
🛠 기능 설명
1. 플레이리스트 좋아요
: ❗️(본 플레이리스트를 좋아요를해서 가지고 오는 경우 플레이리스트를 그대로 복사하는것이 아닌 원본을 공유하는 것이기 때문에 그안의 서평은 플레이리스트 생성자만 추가, 수정, 삭제가 가능하도록 해야한다.)
- 로딩시 이전 좋아요 여부 확인(해당 플리의 사용자 count를 통해서 0,1) 화면 그리기
- 좋아요 버튼 클릭시 이벤트 발생
- 클래스명을 통해서 [.glyphicon-heart-empty (좋아요 추가), .glyphicon-heart(좋아요 취소)] 요청되는 Endpoint를 달리하여 사용자 번호와 플레이리스트 번호를 user_playlist 테이블에 insert(좋아요 선택) 혹은 delete(좋아요 취소)를 요청 해준다.
2. 키워드 서평 검색(모달창)
- js keydown을 통해 키보드 엔터시 검색한 키워드를 서버에 요청한다
- 해당 검색 결과를 데이터베이스 서평 테이블에 요청하여 %LIKE% 함수를 통해 서평내의 키워드를 검색하면 해당되는 데이터를 응답받는다
if(keyNum.keyCode == 13){
console.log('엔터!');
//검색 내용 요청
getSearch();
}(Query)
select r.review_content reviewContent,
r.review_no reviewNo,
e.emo_name emoName,
b.book_title bookTitle,
b.book_no bookNo,
pr.playlist_no playlistNo
from review r, style s, emotion e, books b, playlist_review pr
where r.style_no = s.style_no
and s.emo_no = e.emo_no
and b.book_no = r.book_no
and r.review_no = pr.review_no
and (r.review_content like '%'||#{param}||'%'
or b.book_title like '%'||#{param}||'%'
or e.emo_name like '%'||#{param}||'%'
)
3. 플레이리스트 실시간 서평 추가(모달창->플리폴더창)
: 추가시 ajax요청 -> 응답 받고 모달창이 닫히기 전에 모든 모달 데이터를 지워준 뒤 모달창을 닫는다.
(모달창은 잠깐 숨겨놓는것이기 때문에)
- 서평 전체 리스트 페이징하여 가져오기 (4. 페이징 참고)
클릭 이벤트를 통해 서평 체크박스의 css 변경을 해준다 (체크박스 선택, 취소 동일)
//.glyphicon-unchecked -> glyphicon-check
$(this).attr('class','glyphicon glyphicon-unchecked btn-check')- 등록 버튼을 누르면 선택한 서평 번호를 리스트에 담고 플레이리스트 고유번호, 사용자 고유번호를 플레이리스트 폴더로 보내준뒤 모달창을 숨기고 이후 모달창에서의 수행 내용을 지워줍니다
$('#review-add').modal('hide');
$('#reviewAll').empty();- ajax를 통해 서버로 등록 요청을 보냅니다(파라미터 : 서평번호 리스트, 사용자 번호, 플레이리스트 번호)
서버
- 사용자 번호와 플레이리스트 번호를 객체로 받는다 (VO)
- service 에서 반복문을 통해 VO에 서평번호를 setter를 통해 주입한 뒤 해당 객체를 데이터베이스에 등록 요청을 한뒤 성공시 return값을 1 반환하여 성공 여부를 체크한 뒤
responsbody에 응답함
- service 에서 반복문을 통해 VO에 서평번호를 setter를 통해 주입한 뒤 해당 객체를 데이터베이스에 등록 요청을 한뒤 성공시 return값을 1 반환하여 성공 여부를 체크한 뒤
- 받은 서평 리스트를 js를 통해 그려준다
4. 페이징
서평 리스트 페이징 구현(모달창, 플레이리스트 폴더 동일)
: 페이징시 응답 받을 데이터
- 해당 페이지 데이터
- 시작 버튼 번호
- 마지막 버튼 번호
- 다음 화살표 유무
- 이전 화살표 유무
- 데이터베이스 쿼리 rownum을 사용하여 정렬
- 페이징에 필요한 값 계산한 뒤 데이터베이스에 selectList 요청 후 응답받은 값을 화면에 requestbody에 넘겨준다 service madalListPage
- js로 모달창에 리스트 그려줌
(Query)
정렬 -> rownum -> select
select se.rn rn,
se.reviewNo reviewNo,
se.userNo userNo,
se.bookNo bookNo,
se.styleNo styleNo,
se.reviewContent reviewContent,
se.reviewDate reviewDate,
se.emoName emoName,
se.bookTitle bookTitle,
se.playlistNo playlistNo
from (select rownum rn,
fr.reviewNo,
fr.userNo,
fr.bookNo,
fr.styleNo,
fr.reviewContent,
fr.reviewDate,
fr.emoName,
fr.bookTitle,
fr.playlistNo
from (select r.review_no reviewNo,
r.user_no userNo,
r.book_no bookNo,
r.style_no styleNo,
r.review_content reviewContent,
r.review_date reviewDate,
e.emo_name emoName,
b.book_title bookTitle,
pr.playlist_no playlistNo
from review r, style s, emotion e, books b, playlist_review pr
where r.style_no = s.style_no
and s.emo_no = e.emo_no
and b.book_no = r.book_no
and r.review_no = pr.review_no
order by review_date desc) fr) se
where rn >= 1
and rn <= 5🖥 화면 설명
👉 사용자 서평 플레이리스트
👉 타인의 서평 플레이리스트
1 플레이리스트 서평 추가
2 좋아요 기능
3 페이징
- 코드가 많은 일을 하지 않도록
- 화면에 출력되어야 하는것은 되도록 내부코드를 통해 그려주는것으로 속도 향상
- model, db, 한곳에서 처리하고 결과를 받아오는 방식
📕 어려웠던 부분과 해결과정
-
공통 사용되는 자원이나 코드의 경우(모달창) 따로 개별적으로 파일화하여 각각 분리시켜주는 것이 좋은지
아니면 한 파일에 정리해서 사용하는 것이 좋은 방법인지 고민해봤다. -
알라딘 api 사용시 CORS CORD 에러
-
데이터베이스에서 계산할 수 있는 로직은 데이터베이스에서 전부해서 가져오는것이 좋은지
데이터베이스에서는 값만 가지고오고 자바에서 계산을 하는것이 좋은지 어떤것이 성능 최적화가 될 수 있는지 고민해봤다. -
깃허브 브랜치
