Spring 파이널 프로젝트 칼럼게시판 글 작성

 

가계부 프로젝트를 진행 하던 중 커뮤니티에 칼럼 게시판을 맡게 되었다.

 

칼럼 게시판의 글 형식을 이미지와 글을 혼합하여서 나타나게 하고 싶었으나 생각만큼 쉽지는 않았고, 구글링과 팀원들의 조언도 얻으면서 드디어 완성시켰다.

 

 

 

 

먼저 결과물이다.

 

이렇게 이미지와 사진을 번갈아가면서 나타나게 하고 싶었고 많은 고민 끝에 완성할 수 있었다.

 

 

일단 어려웠던 점은 사진은 DB에서 IMG_LEVEL 순서대로 가져와서 넣어주면 되었지만 안에 글 내용은 모두 BOARD_CONTENT 한 컬럼으로 삽입되면서 글 내용을 나누기가 힘들었다.

 

그래서 따로 칼럼 테이블을 만들어야 하나 어쩌나 생각해봤지만 , 가장 효율적인 방법은 따로 더 테이블을 만들지 않고 구분자를 이용하고 사진을 추가할때마다 사진 밑에 사진의 div를 생성하고 거기에 textarea를 또 넣어줘서 그 공간에 사진에 대한 글을 쓸 수 있게 하였다. 

 

 

 

이런 식으로 사진첨부를 누르고 사진을 선택하면 container div안에 img와 그 밑에 textarea를 생성하여 순서대로 넣어줬다.

 

 

 

 

 

파일이 선택되면 == undefined가 아니면, 각 필요한 요소들을 생성하고 class를 입혀주었고

 

 

img 와  그 밑에 위치하는 글을 쓸 수 있는 곳인 textarea를 순서대로 div구역에 넣어줬다.

그리고 마지막으로 가장 큰 div안에 넣어주면 제대로 나오는 모습을 볼 수 있었다.

 

 

그리고 글 내용들이 한개가 아닌 몇개정도 있기 때문에 form태그로 서버에 값을 전달해주기에는 어려움을 느꼈기 때문에 비동기 방식으로 값들을 서버에 건네주었다. 이 과정에서 content 요소 안에 있는 설명 글들을 배열에 담고 구분자를 이용해서 서버에 값을 전달해주었다.

 

 

 

 

설명 글들은 textarea에 담겨있고 class는 content이기 때문에 

 

1) content요소들을 가져온다

 

2) 배열을 생성하고 for문을 이용하여 n번째 textarea안에 담겨있는 글 내용들을 content 변수에 담아둔다.

 

3) 생성해둔 배열에 n번째 글 내용들을 순서대로 push해서 넣어준다

 

4) 마지막으로 join을 이용해서 '^^^' 표시로 글 내용들을 순서대로 구분해줘서 boardContent변수에 담아주고

    formData를 이용해서 서버에 보내준다.

 

** FormData **

 

- 이미지, 파일등을 서버로 보내줄 때 많이 사용 ( 사진들을 서버로 보내줘야 했기 때문에 사용함, 여러가지 글 내용들도 보내기 유용했음)

 

- form 태그를 대신할 수 있는 자바스크립트 객체

- formData.append(name, value) : key 와 value값 추가

 

 

 

** join **

 

arr.join([separator]) : 스크립트로 배열을 다룰 때 배열 안에 있는 값들을 특정 구분자를 기준으로 잘라주는것.

 

separator: 배열의 각 요소를 구분할 문자열을 지정한다. 일명 구분자로 생략 시 기본값은 쉼표(,)이다.

 

- 나의 경우는 '^^^'로 join 해주었는데 DB에 들어간 값의 결과는 이렇다

 

-> 이렇게 각각 내용들을 잘라서 순서대로 가져올 수 있었다.

 

 

 

 

 

 

마지막으로 칼럼게시글 상세보기에서 화면에 이미지와 글을 순서대로 나타내주었다. (board객체에 게시글 조회 내용이 이미지들 포함 다 담겨져 있는 상황)

 

<%-- 현재 게시글 내용의 전체길이를 ('^^^') 기준으로 잘라서 contents 배열에 대입 --%>

                    <c:set var="contents" value="${fn:split(board.boardContent, '^^^')}" />

                    <%-- 게시글의 이미지 개수를 for문 돌려서 인덱스 번호 생성 --%>

                    <c:forEach items="${board.imageList}" var="img" varStatus="imgLoop">

                        <img class="preview" src="${img.imagePath}${img.imageRename}">

                       

                        <%-- contents 배열에 인덱스 번호 주어서 0번째, 1번째... 순서대로 요소 출력 --%>

                        <div class="content">

                            ${contents[imgLoop.index]}

                        </div>

                        <%-- 0번째 요소 출력하고 다시 위로 올라가서 다음번째 이미지 출력 --%>

                    </c:forEach>