본문 바로가기
일기/항해99

[항해99 6기] 블로그 만들기 [모달을 이용한 기록]

by 고구밍 2022. 3. 22.

 

더보기
  1. 전체 게시글 목록 조회 페이지 -> 제목 / 작성자명 / 작성 날짜를 조회 -> 작성 날짜 기준으로 (내림차순) -> 레파지토리? -> 선택한 게시글을 클릭할 경우 (게시글 조회페이지)로 이동 -> 3번 연동 onclick http = ${키값}
  2. 게시글 작성 페이지 -> 제목, 작성자명, 작성 내용을 입력하기 (input박스를 사용) -> "글쓰기" 버튼을 클릭 -> 전체 게시글 목록 조회 페이지 이동 -> 최신 게시글이 최상단에 위치함을 확인하기(내림차순으로 새로고침 해주기)
  3. 게시글 조회 페이지 -? 제목 / 작성자명 / 작성 날짜 / +a 작성 내용 조회하기

RDS연결 / EC2 배포 (8080 80포트)

요구사항을 모두 지키기 -> 기능 임의로 빼지 마세요

이쁘지 않아도 되니까 -> 동작을 우선으로 해주세요

< spring boot기본으로 CRUD가 가능한 서비스>

SHOW HIDE 기법으로 1개만 해도되요

나머지 기능을 모달로 써도 되요

 

이번 개인 프로젝트 주제는, 

 

  1. Java를 활용하여 필요한 클래스를 구상할 수 있어요.
  2. Lombok과 JPA를 이용하여 원하는 데이터베이스를 만들고 활용할 수 있어요.
  3. Spring Boot를 기반으로 CRUD(Create, Read, Update, Delete) 기능이 포함된 웹서비스를 만들 수 있어요.
  4. AWS에 Spring Boot 서비스를 배포할 수 있어요.

 

라는 목표로 게시글 작성과 조회하는 홈페이지를 만들고, 배포하는 것입니다.

 

아주 기초적인 동작까지 구현을 해보았습니다.

 

 

하는 도중에 가장 어려웠던 부분은 id값(각 div마다 주어지는 번호표)을 다른 함수를 통해서 전달할 때와

 

이를 모달이라는 기능을 통해 temp해주는 기 위해 "GET"으로 사용자가 선택한 ID에 대한 정보를 조회하는 부분이 이해하기가 많이 어려웠습니다.

 

 

과정)

더보기

0. HTML 문서가 로드 할 때 서버 정보를 붙여주고

$(document).ready(function () {
    // HTML 문서를 로드할 때마다 실행합니다.
    getMessages();
})

// 메모를 불러와서 보여줍니다.
function getMessages() {
    // 1. 기존 메모 내용을 지웁니다.
    $('#cards-box').empty();
    // 2. 메모 목록을 불러와서 HTML로 붙입니다.
    $.ajax({
        type: 'GET',
        url: '/api/blog',
        success: function (response) {
            for (let i = 0; i < response.length; i++) {
                let message = response[i];
                let id = message['id'];
                let title = message['title'];
                let username = message['username'];
                let contents = message['contents'];
                let modifiedAt = message['modifiedAt'];
                addHTML(id, title, username, contents, modifiedAt);
            }
        }
    })
}

// 메모 하나를 HTML로 만들어서 body 태그 내 원하는 곳에 붙입니다.
function addHTML(id, title, username, contents, modifiedAt) {
    // 1. HTML 태그를 만듭니다.
    // 메모를 불러와서 보여줍니다.
    // 메모 하나를 HTML로 만들어서 body 태그 내 원하는 곳에 붙입니다.
    // 1. HTML 태그를 만듭니다.
    let tempHtml = `<div class="card" onclick="getMemo('${id}')">
                            <!-- date/username 영역 -->
                            <div class="metadata">
                                <div class="date">
                                    ${modifiedAt}
                                </div>
                                <div id="${id}-username" class="username">
                                    ${username}
                                </div>
                            </div>
                            <!-- 제목-->
                            <div class="contents">
                                <div id="${id}-title" class="text">
                                    ${title}
                                </div>
                                <div id="${id}-editarea" class="edit">
                                    <textarea id="${id}-textarea" class="te-edit" name="" id="" cols="30" rows="5"></textarea>
                                </div>
                            </div>
                            <!-- contents 조회/수정 영역-->
                            <div class="contents">
                                <div id="${id}-contents" class="text">
                                    ${contents}
                                </div>
                                <div id="${id}-editarea" class="edit">
                                    <textarea id="${id}-textarea" class="te-edit" name="" id="" cols="30" rows="5"></textarea>
                                </div>
                            </div>
                            <!-- 버튼 영역-->
                            <div class="footer">
                                <img id="${id}-delete" class="icon-delete" src="images/delete.png" alt="" onclick="deleteOne('${id}')">
                            </div>
                        </div>`;
    // 2. #cards-box 에 HTML을 붙인다.
    $('#warp').append(tempHtml);

 

 

1. 버튼으로 글쓰기 함수를 호출하고

<button onclick="memoModal()">글쓰기</button>

 

 

2.  글쓰기 모달창에 내용을 적고 저장을 한 다음

function memoModal() {
    let tempHtml = ` <div id="modal" class="modal-overlay">
                <div class="modal-window">
                    <div class="title">
                        <h2>글쓰기</h2>
                    </div>
                    <div class="close-area" onclick="hideModal()">X</div>
                    <div class="content">
                        <div id="container" class="popup-container">
                            <!--  제목  -->
                            <div class="area-write">
                <textarea class="field_title" placeholder="제목을 입력해주세요" name="title" id="title" cols="30"
                          rows="10"></textarea>
                            </div>
                            <!--  이름  -->
                            <div class="area-write">
                <textarea class="field_name" placeholder="이름을 입력해주세요" name="username" id="username" cols="30"
                          rows="10"></textarea>
                            </div>
                            <!-- 작성내용 -->
                            <div class="area-write">
                <textarea class="field" placeholder="공유하고 싶은 소식을 입력해주세요" name="contents" id="contents" cols="30"
                          rows="10"></textarea>
                                <!--            <button class="btn btn-danger" onclick="writePost()">작성하기</button>-->
                                <img src="images/send.png" alt="" onclick="writePost()">
                            </div>
                        </div>
                    </div>
                </div>
            </div>`;

 

3. 입력된 정보를 유효성 검사를 한 뒤, POST로 정보를 저장을 합니다.

function writePost() {
    //  작성한 제목를 불러옵니다.
    let title = $('#title').val();
    //  작성한 제목이 올바른지 isValidContents 함수를 통해 확인합니다.
    if (isValidContents(title) == false) {
        return;
    }
    // username을 만듭니다.
    let username = $('#username').val();
    //  작성한 메모가 올바른지 isValidContents 함수를 통해 확인합니다.
    if (isValidContents(username) == false) {
        return;
    }
    //  작성한 메모를 불러옵니다.
    let contents = $('#contents').val();
    //  작성한 메모가 올바른지 isValidContents 함수를 통해 확인합니다.
    if (isValidContents(contents) == false) {
        return;
    }
    // 4. 전달할 data JSON으로 만듭니다.
    let data = {'title': title, 'username': username, 'contents': contents};
    // 5. POST /api/memos 에 data를 전달합니다.
    $.ajax({
        type: "POST",
        url: "/api/blog",
        contentType: "application/json", // JSON 형식으로 전달함을 알리기
        data: JSON.stringify(data),
        success: function (response) {
            alert('메시지가 성공적으로 작성되었습니다.');
            $('#container').removeClass('active');
            window.location.reload();
        }
    });
}

 

4. 메모박스를 클릭을 하면 getMemo함수가 호출되고, 사용자가 선택한 번호를 함수에게 '${id}'값을 전달합니다.

function addHTML(id, title, username, contents, modifiedAt) {
    // 1. HTML 태그를 만듭니다.
    // 메모를 불러와서 보여줍니다.
    // 메모 하나를 HTML로 만들어서 body 태그 내 원하는 곳에 붙입니다.
    // 1. HTML 태그를 만듭니다.
    let tempHtml = `<div class="card" onclick="getMemo('${id}')">

 

5. getMemo가 호출이되면 / 메모에대한 상세페이지 모달이 나옵니다. 이때 사용자가 선택한 정보가 하나이므로 for문으로 response에서 뽑지않았습니다.

 

이 부분이 제가 가장 어렵게 느껴졌던 부분이 2가지가 있는데,

첫째 : 함수한테 ${id}값을 어떻게 전달하는가? ->'${id}'인데, 아마 ${id}값은 문자열로 ''를 씌워주는 것 같다

        + url은 delect와 put방식과 동일하게 백틱 `` 안에 `api/blog/${id}`이런 식으로 넣어 줘야 한다. ''가 아니니 조심

둘째 : 서버쪽에는 어떻게 요청해야 되는가? -> contrllor에서 추가적인 getmapping을 만들어줘야 됨

function getMemo(id) {
    $.ajax({
        type: 'GET',
        url: `/api/blog/${id}`,
        success: function (response) {
                let message = response;
                let id = message['id'];
                let title = message['title'];
                let username = message['username'];
                let contents = message['contents'];
                let modifiedAt = message['modifiedAt'];
            let tempHtml = `<div id="modal" class="modal-overlay">
                <div class="modal-window">
                    <div class="title">
                        <h2>글쓰기</h2>
                    </div>
                    <div class="close-area" onclick="hideModal()">X</div>
                        <div class="card" onclick="getMemo()">
                            <!-- date/username 영역 -->
                            <div class="metadata">
                                <div class="date">
                                    ${modifiedAt}
                                </div>
                                <div id="${id}-username" class="username">
                                    ${username}
                                </div>
                            </div>
                            <!-- 제목-->
                            <div class="contents">
                                <div id="${id}-title" class="text">
                                    ${title}
                                </div>
                                <div id="${id}-editarea" class="edit">
                                    <textarea id="${id}-textarea" class="te-edit" name="" id="" cols="30" rows="5"></textarea>
                                </div>
                            </div>
                            <!-- contents 조회/수정 영역-->
                            <div class="contents">
                                <div id="${id}-contents" class="text">
                                    ${contents}
                                </div>
                                <div id="${id}-editarea" class="edit">
                                    <textarea id="${id}-textarea" class="te-edit" name="" id="" cols="30" rows="5"></textarea>
                                </div>
                            </div>
                            <!-- 버튼 영역-->
                            <div class="footer">
                                <img id="${id}-delete" class="icon-delete" src="images/delete.png" alt="" onclick="deleteOne('${id}')">
                            </div>
                        </div>
                        </div>
                        </div>`;
            $('#warp').append(tempHtml);

            }
    })

}

6. getMapping 추가

@GetMapping("/api/blog/{id}")
public Optional<Blog> getBlog(@PathVariable Long id) {
    return blogRepository.findById(id);
}

 

 

 

 

추가적으로 수정(PUT)기능을 넣어 주고싶다.

 

 

느낀점)

 

여전히 부족한 점이 많다는 것을 깨달았다.

 

브라우저에서 콘솔을 통해서 작동이 잘 되는지 확인하면서 하는 업무의 중요성을 다시 한번 알게 되었고,

 

무엇보다도 기초의 중요성을 실감하게 되는 과제였습니다.

'일기 > 항해99' 카테고리의 다른 글

[항해99 6기] Spring 2주차 - 인가 문제  (0) 2022.03.30
[항해99 3주차] 스프링 회고  (0) 2022.03.27
[항해99 6기] 2주차 개발일지 회고 (객체 지향 프로그래밍과 JVM정리)  (0) 2022.03.20
[항해99 6기] 3주차 주특기교육 시작 spring)  (0) 2022.03.19
[항해99 6기] 2주차 알고리즘 테스트를 하면서 느낀점  (0) 2022.03.18

관련글

티스토리툴바