[vue, spring] 이미지 포함한 게시판 만들기

토이프로젝트로 영화 리뷰 웹사이트를 만드는 중이다.

12월은 좀 쉬고싶어서 막 어렵거나 큰 규모의 플젝을 하고 싶진 않고

jpa를 이용해서 게시판 하나를 제대로 만들어보고 싶었기 때문에...만만한 주제로 설정했다.

특히 이미지-글-이미지-글-글-이미지 이런식으로 글과 이미지가 섞여있는 게시판을 만들고 싶었다.

 

데이터베이스는 mysql

이미지 스토리지는 파이어베이스

백엔드는 spring

프론트는 vue

 

이미지는 파이어베이스에 올리고 그 절대 주소를 db에 넣는 방식이다.

 

 

일단 정말 기본적인 crud만 구현했다.

돌아가는거에만 집중해서 개발해서 손볼게 많다.

목록도 최신순 정렬,페이징 처리 해야되고, 조회수랑 공감수 태그 이런것도 개발해야 된다.

회원 부분은 다른 팀원이 하고 있는데 그 부분이 개발되면 작성자 관련해서도 수정해야 하고...

아니 쓰고보니 왤케 할게 많냐,,,

 

이미지 스토리지로 뭘 쓸지 고민이 많았는데 결론적으로 말하면 파이어베이스로 정했다.

공식문서에 정확한 사용 예가 안나와서 인터넷을 뒤졌는데 막 마음에 차는 코드를 못찾았다.

검색 키워드를 잘못 잡았나,,

//파이어베이스 스토리지에 이미지를 업로드
    uploadImg() {
      this.timestamp=new Date();
      var image = this.$refs["image"].files[0];
      const uploadStorage = ref(storage, "board/" + image.name+"_"+this.timestamp);
      uploadBytes(uploadStorage, image)
        .then(() => {
          console.log("Uploaded a blob or file!");
          this.createImg(image);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //이미지 링크를 다운로드하고 태그 삽입
    createImg(image) {
      //그 링크를 저장
      getDownloadURL(ref(storage, "board/" + image.name+"_"+this.timestamp))
        .then((url) => {
          this.makeHtmlImg(url);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //이미지 태그를 생성
    makeHtmlImg(url) {
      let tagArea = document.getElementById("content");
      let new_pTag = document.createElement("img");
      new_pTag.setAttribute("src", url);
      tagArea.appendChild(new_pTag);
    },
    //가장 처음 오는 img를 썸네일로
    selectThumbnail(){
      var imgElements = document.getElementsByTagName('img');
      if(imgElements.length>=1){
        this.thumbnail=imgElements[0].src;
      }
    },

그래서 나름대로 내 주관을 섞어가며 개발한 핵심 이미지 업로드 코드는 이렇다. 

부족한 부분이 많지만 백엔드 개발에 중점을 둔 토이프로젝트라서 백엔드 끝나고 시간 남으면 손볼듯...

 

그리고 jpa를 독학하며 사용해보고 있는데 mybatis보다 좋은 점이 뭔지 모르겠다.

대체 이놈이 왜 이렇게 인기가 많은거지?

현재 일반적인 블로그처럼 태그를 넣는 기능을 개발하고 있는데 이 부분에서 f.k 설정을 해야한다.

직접 작성하면 금방 끝나는 on delete cascade 설정이 jpa에선 상당히.. 귀찮았다.

함수 이름을 보고 jpa가 알아서 쿼리문을 만든다는 것도 참신하긴 한데...

솔직히 이게 더 귀찮지 않나? 익숙해지면 더 편해지나? 흠...

지금은 일단 헤딩하면서 그때그때 찾아보고 있는데 이번 플젝이 끝나면 이론적인 부분을 좀 파봐야 할 필요성을 느낀다.