[개인프로젝트] 13일차 - 제이쿼리,자바스크립트

 

제이쿼리를 사용한 모달팝업

 

 

사장님 로그인을 한뒤, 내 가게정보를 등록할때 가게 주소를 입력하면

이력서를 등록한 유저들중 가게 주소와 가까운 유저들만 골라서 리스트로 출력해주는 기능을 만들면서

모달팝업을 사용해서 출력하였다.

즉, 위 화면의 <가게랑 가까워요>버튼 클릭시 아래 리스트가 ajax통신으로 출력되며, 

리스트를 클릭하면 해당하는 유저에 대한 프로필이 팝업형태로 출력된다.

 

 

서버에서 보낸 복잡한 객체를 클라이언트 자바스크립트로 받기

 

 

 

 

해당 기능을 구현하기위해

AJAX로 받아온 데이터를 HTML에서 출력하는것이 아니라,

<script> 안에서 HTML을 출력하게 만들어야했는데, 엄청난 노가다였다..

또한 서버에서 보내온 객체는 형태가 객체의 멤버중 또다른 객체를 가지는 복잡한 형태인데,

해당 객체를 클라이언트에서 받아서 처리하는것은 그나마 괜찮지만, 

자바스크립트 구문으로 가져와 사용할때는 까다로운 작업이다.

 

<script th:inline="javascript">
    $(document).ready(function (){
        var ownerId = [[${ownerId}]];
    $("#loc").on("click",function (){
        console.log(ownerId);
        $.ajax({
            url: '/finduser/loc', // AJAX 요청 보낼 엔드포인트
            type: 'GET', // GET 또는 POST 등 요청 타입 지정
            data: { ownerId: ownerId }, // 요청 시 함께 보낼 데이터
            success: function(response) {
                // 성공적으로 응답을 받았을 때 수행할 작업
                console.log("Success:", response);
                const resumes = response;
<!--                console.log(resumes[0].profile_img);-->

                // 새로운 데이터 중복누적 방지하기위해 비움
                $('#profile-all').empty();

                // 받아온 List를 화면에 출력
                resumes.forEach(function(resume) {
                    var div = $('<div class="list-group-item list-group-item-action py-3 lh-sm"  style="border: 1px solid #eee;">');


                    // 상세내용 보기를위해 임시로 데이터값을 담아두는 공간
                    var profile_img = $('<input type="hidden" name="profile_img" value="'+resume.profile_img+'">');
                    var username = $('<input type="hidden" name="username" value="'+resume.username+'">');
                    var description = $('<input type="hidden" name="description" value="'+resume.description+'">');
                    var liketime = $('<input type="hidden" name="liketime" value="'+resume.liketime+'">');
                    var loc = $('<input type="hidden" name="loc" value="'+resume.loc+'">');
                    var gender = $('<input type="hidden" name="gender" value="'+resume.gender+'">');
                    var birthday = $('<input type="hidden" name="birthday" value="'+resume.birthday+'">');
                    var phone = $('<input type="hidden" name="phone" value="'+resume.phone+'">');
                    var education = $('<input type="hidden" name="education" value="'+resume.education+'">');
                    var degree = $('<input type="hidden" name="degree" value="'+resume.degree+'">');
                    div.append(profile_img).append(username).append(description).append(liketime).append(loc).append(gender)
                        .append(phone).append(birthday).append(education).append(degree);

                    resume.jobs.forEach(function (job){
                        var hiddenInput = $('<input type="hidden" id="j'+job.id+'" name="job" value="'+job.name+'">');
                        div.append(hiddenInput);
                    });
                    resume.personalitys.forEach(function (personality){
                        var hiddenInput2 = $('<input type="hidden" id="personality'+personality.id+'" name="personality" value="'+personality.name+'">');
                        div.append(hiddenInput2);
                    });


                    var listdiv = $('<div class="list d-flex">');
                    div.append(listdiv);
                    var profilediv = $('<div class="profile-img">');
                    listdiv.append(profilediv);
                    var img = "<img src='/main/" + resume.profile_img + "' style='border-radius: 10px;width:90px;height:90px;'>";
                    profilediv.append(img);

                    var profile_text_div = $('<div class="profile-text" style="margin-left: 30px;display: flex; flex-direction: column;">');
                    listdiv.append(profile_text_div);

                    var span1 = $('<span>');
                    span1.text(resume.username).css({"font-weight": "bold","font-size":"20px"});

                    var span2 = $('<span>');
                    var icon =  "<i class='fa-solid fa-location-dot' style='color:green;'></i>";
                    span2.text(resume.loc+" 거주");
                    span2.append(icon);
                    var span3 = $('<span>');
                    span3.text(resume.description);

                    profile_text_div.append(span1);
                    profile_text_div.append(span2);
                    profile_text_div.append(span3);

                    $('#profile-all').append(div);

                });

</script>

 

자바스크립트 코드의 일부분만 발췌하면,

직접 일일이 HTML 태그요소들을 제이쿼리로 만들어 append로 하나하나씩 갖다붙여주었다..

HTML코드상에서 짤때는 감이잡히는데 저렇게 자바스크립트 안에서 하나하나 블럭을 떼서 갖다붙이니 

화면을 보면서 만들수도없고 엄청난 하드코딩을 경험했다.

꼭 이렇게 해야만하나싶어 다른 방법이 있을까 찾아보았는데,

리액트와 같은 프론트엔드 라이브러리는 기존의 타임리프와 같은 서버 사이드 렌더링방식이 아니라,

클라이언트에서 렌더링을 해서 부드러운 화면전환이 가능하다고한다.

 

타임리프를 사용해서 서버에서 렌더링해서 보내지않고 자연스러운 화면출력과 팝업 효과를 위해 

객체를 보낸뒤 자바스크립트에서 손수 직접 렌더링을 해서 보낸게아닌가 하는 생각이들었다.

프론트엔드를 하게된다면 다음번에는 리액트도 사용해봐야겠다.

 

 

 

 

또한 채용공고들을 클릭하면 왼쪽에 현재까지 지원한 지원자수와 마감일, 

가게 주소에 해당하는 지역을 네이버 지도 api를 사용하여 출력해주었다.

 

이제 사장님이 채용공고를 올리고, 사용자가 지원하는 기능을 구현하였으니,

사장님과 지원자간에 채팅 기능을 구현할 예정이다.