3주차 개발 일지

3주차는 jQuery와 Fetch에 대해 학습했다.

jQuery는 자바스크립트를 더 간단한 코드로 구현할 수 있게 해주는 툴같은 느낌이였다. 간단한 코드로 여러가지 기능을 구현할 수 있었다. 하지만 그만큼 옵션이라고 해야 하나? 다양하게 지정할 수 있는 옵션의 양이 꽤 되어 보였다. 물론 웹에서 찾으면 바로바로 사용이 가능하지만 몇개정도는 외울 필요를 느꼈다.

 

3주차엔 잠깐 다른길로 샜었는데, 추억앨범에 jQuery를 적용하는 법을 배울 때 다른 기능도 추가해 보고자 하는 욕심이 생겼다. 나름 앨범이라고 만들어 놓은 사이트인데, 사진을 클릭하면 크게 볼 수 있는 기능 정도는 있어줘야 하지 않을까? 라는 생각이 들었다.

그래서 학습을 진행하다 말고 바로 시도해 보았다. 일단 구현할 것은 사진 카드를 클릭하면 해당 사진과 정보가 큰 창으로 나타나게 하는 것이다.

그러기 위해선 일단 큰 창 div를 만들고, onclick을 이용해 사진을 누르면 큰 창이 뜨는 코드를 실행시키면 되겠다고 생각했다.

onclick은 굳이 버튼이 아니더라도 여러 태그에 넣기만 하면 작동이 된다는 걸 알았다. 처음엔 카드div를 모두 <button>으로 감싸서 버튼처럼 사용하고자 했다. 하지만 원래 카드의 디자인과 조금 달라졌는데, 스타일링으로 테두리를 투명하게 바꿔도 차이가 있었다. 모든 카드를 버튼화시키면 상관이 없겠지만 원형을 유지한 채 버튼처럼 사용하고 싶었기에 다른 방법을 찾아봤다.

스타일링에서 마우스를 해당 div로 가져가면 포인터가 클릭 모양으로 바뀌는 방법을 찾았다.

.col {
            cursor: pointer;
}

위 코드 덕분에 마우스는 카드 위에서 클릭 포인터로 바뀌었지만 클릭을 해보면 작동하지는 않는다. onclick을 이용해 함수를 설정해 줘야만 작동을 하기 때문이다.

 

내가 구현할 클릭시 숨겨진 창이 뜨는 걸 modal이라고 한다고 한다.

modal은 팝업창을 만드는 div를 말하는데, 인터넷을 참고해 코드를 가져왔다.

<div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">닫기</span>
            <p id="modalcontent"></p>
        </div>
</div>

 

이 modal div의 크기를 조절하기 위해 백크라운드를 green으로 설정하며 스타일링했다.

그런데 여기서 이상한 현상이 발생했는데, .modal 안에 크기를 바꿔주는 스타일링을 아무리 적용해도 원하는 결과가 나오지 않았다.

width와 height를 정하고 margin을 이용해 크기와 위치를 조정하려 했는데 이상하게 modal div는 화면 왼쪽에서 떨어지지 않았다.

하지만 신기하게도 class="modal"의 modal을 바꿔주기만 해도 정상적으로 크기 조절이 되는 것이다!

당시엔 잘 몰랐지만 지금 생각해보면 class의 이름이 modal인 것만으로 팝업창의 기능을 가지는 div가 되는것이였다.

이 기능은 jQuery에 포함된 것으로 보이는데, 이 때문에 modal을 처음부터 만드려고 했던 내 코드가 동작을 안한 것으로 추측된다.

실제로 class이름을 modal에서 다른 이름으로 바꾸면 현재 내 코드가 작동을 안한다.

(정확히는 작동은 하지만 팝업창이 뜨진 않는다.)

어쨋든 modal을 완성하기 위해 스타일링을 마쳤다.

.modal {
            background-color: rgba(0, 0, 0, 0.3)
        }


        .modal-content {
            width: 750px;
            margin: 30px auto 0px auto;
            padding: 20px;
            border-radius: 5px;
        }

.modal은 팝업창이 떴을 때 뒤에 보이는 배경을 어둡게 만드는 코드이다. 검은색 배경에 투명도를 조절해 어둡게 보이는 효과를 준 것이다.

.modal-content는 팝업창의 크기를 조절한다. 팝업창은 원래 카드의 디자인을 그대로 사용했다.

 

위에서 작성한 modal div를 보면

<span class="close" onclick="closeModal()">닫기</span>

이 코드는 팝업창을 닫는 버튼을 만들어준다.

 

function closeModal() {
            $('#myModal').hide();
        }

jQuery에 있는 div를 닫는 코드를 넣어 창이 닫히게 만들었다.

 

<p id="modalcontent"></p>

이 태그 안에 카드가 클릭됐을 때 나타날 카드 정보를 담은 div를 append하면 작동한다.

 

사진이 클릭이 가능하게 만드려면, 즉 onclick을 사용해 함수를 불러서 해당 카드의 정보를 얻으려면 카드 div의 코드를 일부 수정해야 했다.

<div onclick="show_modal(this)" class="col">
    <div class="card h-100">
        <img class="cardimg"
            src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
            class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">앨범 제목</h5>
            <p class="card-text">앨범 내용</p>
        </div>
        <div class="card-footer">
            <small class="text-body-secondary">앨범 날짜</small>
        </div>
    </div>
</div>

위 코드는 카드 div에 onclick을 추가했고, 함수의 인자는 this를 넣어 해당 div가 들어가도록 했다.

그리고 각 이미지와 제목, 내용, 날짜에 class이름을 추가해 함수 내에서 사용하기 편하게 만들었다.

 

function show_modal(clicked) {
    $('#modalcontent').empty();
    let image = $(clicked).find('.cardimg').attr('src');
    let title = $(clicked).find('.card-title').text();
    let content = $(clicked).find('.card-text').text();
    let date = $(clicked).find('.text-body-secondary').text();



    let temp_html = `
    <div class="col2">
        <div class="card h-100">
            <img src=${image}
            <div class="card-body">
                <h5 class="card-title">${title}</h5>
                <p class="card-text">${content}</p>
            </div>
            <div class="card-footer">
                <small class="text-body-secondary">${date}</small>
            </div>
        </div>
    </div>`;
    $('#modalcontent').append(temp_html)
    $('#myModal').show();
}

위 코드는 onclick에 들어갈 함수이다. 인자 clicked는 this로 받은 클릭된 카드div이며 image, title, content, date에 각각 class이름을 찾아 해당하는 값들을 받아온다.

받아온 정보를 카드 div에 넣고 modalcontent에 추가해 modal창을 띄우면 완성이다.

(제주도 사진을 추가하고 클릭 시 팝업창이 뜨는 모습)

 

다행이 작동은 잘 됐다. 하지만 이 기능 하나를 추가한다고 인터넷이나 gpt에 물어보고 고치고 하는 시간이 상당히 오래 걸렸다.

기능을 구현하기 위해 어떻게 구성해야 할 지는 머릿속에 있지만 언어 자체가 처음이라 직접 구현하는데 까지가 오래 걸린 이유라고 생각이 든다.

 

그래도 이렇게 알려주지 않았지만 머릿속에서 떠오른 기능을 직접 구현해 보니 복습도 더 잘 되고 흥미도 더욱 생긴 것 같다. 앞으로도 생각나는 기능이 있으면 한번씩 추가해 보고자 한다.