태고의달인 사이트

# 기술스택 jsp , spring boot , oracle , es6 , jquery , vue js (template)

1. 태고의달인 음원 , 채보 다운로드 , 유저 업로드 사이트

2. 태고의달인 정보 (wiki 백과 ) 편집 , 작성 기능

3. 태고의달인 커뮤니티 기능

4. 태고의달인 수록곡 엑셀 다운로드 기능 (library : poi 사용)

5. 태고의달인 수록곡 크롤링 기능 (library : jsoup 사용)

개요

태고의달인 이라는 게임의 수록곡 정보 , 음원 파일 등을 유저에게 제공하기 위한 사이트를 만들고 싶었으나 해당 정보에대한 rest api 가 없어서 직접 공식 사이트에서 수록곡을 장르별로 크롤링하여 데이터베이스에 저장하고 , 음원을 유저들이 자유롭게 올릴수있고 , 미리들을수 있으며 , 다운로드 할수 있도록 만들었습니다.

또한 태고의달인 이라는 게임을 하는 유저들끼리 자유롭게 영상과 , 댓글을 게시하고 정보등을 올릴수있는 (wiki 백과) 기능을 추가하여 유저들이 자유롭게 정보를 제공하고 생성할수있는 웹사이트를 만들고 싶어서 해당 토이 프로젝트를 진행하게 되었습니다.

초기 버전

초기버전은 미리듣기 기능과 크롤링한 곡을 단순히 데이터를 보여주기 위한 정도의 목적으로 만들어 졌으나 , 커뮤니티에 해당 프로그램을 만들었다고 전시했더니 반응이 괜찮아서 기능을 추가하게 되었습니다.

기능

곡 검색 기능 , 음원 다운로드 , tja 파일 다운로드 기능 , 미리듣기 기능 구현

태고의달인 최신 수록곡 크롤링 기능

태고의달인 최신 수록곡을 공식 홈페이지에서 크롤링하여 데이터베이스에 저장하는 기능입니다.

채보 , 음원 업로드 기능

유저가 자유롭게 비공식 , 공식 등의 태고의달인 음원 , tja 파일 등의 첨부파일을 업로드하고 다운로드 할수있게 구현했습니다. # 태고의달인 위키 기능

태고의달인 곡에 대한 설명 , 위키 문서를 검색할수있는 기능입니다.

위키 검색 결과

데이터베이스에 저장된 곡의 위키 정보를 가져와서 보여주는 기능을 구현했습니다.

위키 문서 생성하기

또한 유저들이 자유롭게 곡에대한 위키 문서를 생성할수 있는 기능을 구현했습니다.

자유게시판 create api 생성

1. 유저들이 자유롭게 익명으로 이미지를 올리고 댓글형식의 게시판을 구현하는것을 중점으로한다.

2) list 불러오는 api 생성 (2022-3-14)

댓글작성

익명으로 댓글을 작성하여 커뮤니케이션을 할수있다. 사진 등을 첨부할수있다. 익명의 유저는 비밀번호를 입력하여 컨텐츠를 생성할수있다. 이때 입력된 비밀번호는 암호화하여 데이터베이스에 저장된다. 암호화 비밀번호 방식은 SHA-512 알고리즘 방식을 사용한다.

자유게시판 댓글 삭제기능

작성한 익명유저의 비밀번호를 조회하여 데이터를 삭제한다.

동영상 첨부 , 재생기능

사진뿐만아니라 영상컨텐츠도 올려서 볼수있도록한다.

게시물에 댓글작성기능

해당 영상이나 사진에 댓글을 달수있도록 한다.

wiki 에 댓글기능 추가

# 댓글 페이지네이션 구현

이전 , 다음 버튼을 누르면 다음 댓글 , 이전댓글을 확인할수있다.

위키작성한 게시물에 대한 댓글 기능을 추가하였다.

wiki 글 편집기능

위키정보를 사용자가 수정할수 있도록 기능을 추가한다. 해당곡의 난이도 , 작가 , 작곡가 , 영상 정보 등 을 수정할수있다.

ckeditor 를 이용한 여러개의 영상 첨부

ckeditor 에서 embeded link 를 이용하여 여러개의 유튜브 링크를 첨부하여 영상을 여러개 올릴수 있도록한다.

wiki 최근 게시물 보이기

태고의달인 수록곡 exceldownload 기능

태고의달인 수록곡을 excel 문서화 하여 사용자한테 제공한다.

wiki , 댓글 , 게시글 생성시 사용자 Ip 주소를 database 에 저장

게시글을 작성하면 사용자의 ip 주소를 데이터베이스에 저장한다.

글을 편집 ,생성할때 ip 주소를 표기한다.

문제 해결 과정

1. 처음에 자유게시판 부분에서 클릭한 게시물에 대한 댓글을 남길때 모든 댓글창이 열려버리는 바람에 댓글작성이 되지않았고 , 이러한 문제를 해결하기위해 button 에 this 를 event 로 감지하여 e.prev()를 이용하여 해당 게시물에대한 댓글창만 열리도록 수정 하였습니다. 그런다음 열린 댓글 창의 입력된 부모 , 자식 엘레멘트를 제이쿼리의 child() , parent() 를 이용하여 값을 바꿨더니 게시글에대한 댓글이 정상적으로 작성되도록 유지보수 하였습니다.

2. 댓글 테이블을 설계할때 공통으로 댓글을 사용할수있도록 댓글에대한 테이블의 타입 컬럼을 추가하였습니다. wiki 게시판에서 사용될 댓글이면 type 은 wiki , 자유 게시판에서 사용될 댓글이면 freeTalkBoard 라는 타입을 설정하였고 , 테이블을 따로 설계할 필요없이 하나의 테이블에서 타입에 따라 데이터를 적재할수 있도록 만들었습니다.

3. 자유게시판에서 댓글을 가져올때 모든 데이터를 list 로 가져와야하기때문에 join 해서 데이터를 가져오기 힘든 상황이었습니다. 이때 저는 , 게시물 list 따로 , 댓글 따로 하여 , 게시물 idx 와 댓글 상위 node idx 가 같은 것끼리 find() 하여 묶어서 데이터를 보여줬습니다. 즉 , 스크립트로 이를 해결하였습니다.