굳이굳이 새로고침 없는 글목록 만들기... (유사SPA) > 자유게시판

`이 항목 당 번갈아가면서 나오는 구조더라고요. 예를 들어 ```html ``` 왜 이렇게? 하나 싶어서 바꿀까 했는데 그러면 너무 큰 공사가 될 것 같아서 그냥 이 틀을 유지하여 작업하기로 했습니다. ### 6-3. 받아온 json의 키 개수만큼 돌아가면서 한줄 한줄 렌더링! 우선 한 페이지의 글 목록만큼 for문을 돌려서 차곡차곡 렌더링하기 위해 아래와 같이 코드를 짰습니다. ```javascript // 다음으로 돌아가면서 내용을 그려야 한다. for (i = 0; i < list_json.length; i++) { //list_json의 개수 만큼 반복 (목록의 개수) // 각 행의 뼈대를 먼저 그려야 한다. // 그리고 그 안에 각 열을 넣어야 한다. // 아니면 우선 각 열을 만들고 그것을 행에 조립해야 할까? $('.bl-wrap').append(` `); ``` 먼저 이렇게 bl-wrap이라는 div 안에 비어있는 div를 각각 만들구요 ```javascript for (let head_item of heads) { $('.bl-list').eq(i).append( list_item(head_item, head[head_item][1], list_json[i][head_item], list_json[i]['wr_id'], list_json[i]['wr_name'], list_json[i]['ca_name'], list_json[i]['icon_secret'], list_json[i]['wr_comment'], list_json[i]['is_notice'] ); ); } $('.bl-list').eq(i).append( `` ); $('.bl-mobile').eq(i).append( list_item_mobile( list_json[i]['wr_name'], list_json[i]['wr_datetime'], [list_json[i]['ex_1'], list_json[i]['ex_2']] ) ); } ``` 실제로는 이렇게 다 엔터 치지는 않았습니다. 보기 좋을 것 같아서 이렇게,, 그리고 나서, 이제 위에 보았던 head의 변수에 담긴 내용을 참조해서 html에 뿌려줄 수 있도록 작업했습니다. ...왜 굳이 이렇게 했냐고 물어보신다면,,, 무지함에서 나온 결과라고밖에는 못하겠지요ㅋㅋ 암튼 이렇게 하여 새로고침 없이 글 목록을 전환하는 데에는 성공하게 되었습니다!! 아래는 글 목록 갱신을 위한 전체 자바스크립트 코드 되겠습니다. ```javascript var head = { 'num': ['글 번호', 'bl-item bl-num <?php echo $is_admin?'bl-num-checkbox':'';?>'], 'wr_subject': ['제목', 'bl-subj'], 'wr_name': ['작성자', 'bl-item bl-author'], 'ex_2': ['발주제품군', 'bl-item bl-prod'], 'ex_1': ['배송형태', 'bl-item bl-dil'], 'wr_datetime': ['날짜', 'bl-item text-gray'], 'wr_hit': ['조회수', 'bl-item bl-num text-gray'] }; function draw_list (list_json) { const heads = Object.keys(head); const list_head = (head, content) => { return ` `; }; const list_item = (head, className, content, wr_id=false, author=false, cate=false, lock=false, comment=false, is_notice=false) => { const item_type = { 'num': ` ${author} ${is_notice?'공지':""}  `, 'wr_subject': (lock?``:'') + (cate?`[${cate}]`:'') + ` ${content} ` + (comment != "0" ? ` 댓글 ${comment} 개 `:''), 'wr_name': ` ${content}`, 'etc': `${content?content:''}` } return ` `; }; const list_item_mobile = (author, datetime, params) => { return ` ${author} `; }; // 먼저 설정한 head의 수 만큼 열을 그려야 한다. 하지만 페이지를 전환하는 과정에 있어서 head를 다시 그릴 필요가 있을까? // for (let head_item of heads) { // $('.bl-wrap').append(list_head(head_item, head[head_item])); // } // 기존의 리스트는 PHP로 for 문 돌리면서 받아 오는 형태이다 보니 효율성을 위해 일반 목록과 모바일 목록을 같이 렌더링 하도록 구성된 것 같다. // 이러한 방식을 계속 유지하는 쪽으로 가려면... 딱히 문제는 없을 것 같다. // 기존의 리스트를 삭제하자. (기본과 모바일) $('.bl-list').remove(); $('.bl-mobile').remove(); // 다음으로 돌아가면서 내용을 그려야 한다. for (i = 0; i < list_json.length; i++) { //list_json의 개수 만큼 반복 (목록의 개수) // 각 행의 뼈대를 먼저 그려야 한다. // 그리고 그 안에 각 열을 넣어야 한다. // 아니면 우선 각 열을 만들고 그것을 행에 조립해야 할까? $('.bl-wrap').append(` `); for (let head_item of heads) { $('.bl-list').eq(i).append(list_item(head_item, head[head_item][1], list_json[i][head_item], list_json[i]['wr_id'], list_json[i]['wr_name'], list_json[i]['ca_name'], list_json[i]['icon_secret'], list_json[i]['wr_comment'], list_json[i]['is_notice'])); } $('.bl-list').eq(i).append(``); $('.bl-mobile').eq(i).append(list_item_mobile(list_json[i]['wr_name'], list_json[i]['wr_datetime'], [list_json[i]['ex_1'], list_json[i]['ex_2']])); } //애니메이션은 못참음 $('.bl-list.introfade.disabled').each((index,item)=>{ var that = item; setTimeout(()=>{ $(that).removeClass('disabled'); setTimeout(()=>{ $(that).removeClass('introfade'); },50*index); },50*index) }); document.querySelector('.board-list').scrollIntoView(true); } ``` ## 7\. 프론트\.\.\. 글 목록 바뀐 것까진 좋다\. 근데 현재 페이지가 어딘지 갱신이 안되네? 예. 지금까지는 글 목록만 뿌려주는 부분이었구요, 페이지가 바뀌었으면 응당 현재 페이지 번호가 달라진 것을 표시해야 하는데,,, 와 이것때문에 거진 5시간 쓴 것 같습니다. 일단 기본적으로 아래와 같이 짜서 페이지 번호(링크)를 누르면 글 목록이 바뀌게끔 하는 데 성공했습니다. ```javascript fetch(target.href, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Action-Type': 'pagination' }, body: JSON.stringify({data: {bbs: 'list', type: 'json'}}) }) .then(response => { return response.json(); }) .then(data => { draw_list((data)) ;}) .catch((error) => { console.log('Error: ', error); alert('목록을 받아오지 못했습니다.'); }); ``` 여기서... `.then(data => {})` 부분에서 `draw_list(data)`를 실행하고 난 뒤, 페이지 번호가 바뀌도록 해야 할 필요가 있었습니다. 일단 어... 어디부터 설명해야 할지 모르겠어서 걍 전체 코드 올릴게요ㅋㅋㅋㅋ ```javascript function generate_pagination () { $('.eb-pagination a.active').off('click'); $('.eb-pagination a:not(.active)').off('click'); $('.eb-pagination a.active').on('click', (e)=>{e.preventDefault();}); $('.eb-pagination a:not(.active)').on('click', (event)=>{ const target = event.target.href?event.target:$(event.target).parent()[0]; // console.log(target); const currURL = new URL(window.location.href); const currPage = currURL.searchParams.get('page')??'1'; const hrefURL = new URL(target.href); const hrefPageVal = Number(hrefURL.searchParams.get('page')); // console.log(hrefPageVal); event.preventDefault(); if (Number(currPage) == hrefPageVal) { alert('목록의 처음이거나 끝입니다.'); return false; } if (target.href) fetch(target.href, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Action-Type': 'pagination' }, body: JSON.stringify({data: {bbs: 'list', type: 'json'}}) }) .then(response => { return response.json(); }) .then(data => { // console.log(data); draw_list((data)); if ($(target).hasClass('next') && $('.eb-pagination a').eq($('.eb-pagination a').length - 3).hasClass('active')) { $('.eb-pagination a.active').removeClass('active'); $('.eb-pagination a:not(.start,.end)').each((index, item)=>{ const newPages = new URL(item.href); const newPage = hrefPageVal + index - 1; newPages.searchParams.set('page', newPage); item.href = newPages.href; if (!($(item).hasClass('prev') || $(item).hasClass('next'))) item.innerText = newPage; }); $('.eb-pagination a').eq(2).addClass('active'); } else if ($(target).hasClass('prev') && $('.eb-pagination a').eq(2).hasClass('active')) { $('.eb-pagination a.active').removeClass('active'); $('.eb-pagination a:not(.start,.end)').each((index, item)=>{ const newPages = new URL(item.href); const newPage = hrefPageVal - $('.eb-pagination a:not(.start,.end)').length + index + 2; newPages.searchParams.set('page', newPage); item.href = newPages.href; if (!($(item).hasClass('prev') || $(item).hasClass('next'))) item.innerText = newPage; }); $('.eb-pagination a').eq($('.eb-pagination a:not(.start,.end)').length - 1).addClass('active'); } else { if (hrefPageVal < Number(currPage)) { if ($(target).hasClass('prev')) { $('.eb-pagination li:has(.active)').prev().find('a').addClass('active'); $('.eb-pagination li:has(.active)').eq(1).find('a').removeClass('active'); } else { $(target).addClass('active'); $('.eb-pagination li:has(.active)').eq(1).find('.active').removeClass('active'); } } else { if ($(target).hasClass('next')) { $('.eb-pagination li:has(.active)').next().find('a').addClass('active'); $('.eb-pagination li:has(.active)').eq(0).find('a').removeClass('active'); } else { $(target).addClass('active'); $('.eb-pagination li:has(.active)').eq(0).find('.active').removeClass('active'); } } } currURL.searchParams.set('page', hrefPageVal); window.history.pushState({path: currURL.href}, '', currURL.href); const nextURL = new URL(currURL.href); const prevURL = new URL(currURL.href); const nextNum = Number(currURL.searchParams.get('page')) + 1; const nextPage = nextURL.searchParams.set('page', nextNum); const prevNum = currURL.searchParams.get('page')=="1"?"1":Number(currURL.searchParams.get('page')) - 1; const prevPage = prevURL.searchParams.set('page', prevNum); $('.eb-pagination a.next').attr('href', nextURL.href); $('.eb-pagination a.prev').attr('href', prevURL.href); generate_pagination(); }) .catch((error) => { console.log('Error: ', error); alert('목록을 받아오지 못했습니다.'); }); }); } generate_pagination(); ``` 진짜,,, 별짓 다해놨습니다. 처음에는 그냥 버튼 누르면 해당 링크로 POST 요청하는 것까지는 좋았습니다. 근데 그 버튼을 눌렀으면 해당 페이지 버튼이 active 되어야 하기 때문에, ```javascript $('.eb-pagination a.active').removeClass('active'); $(event.target).addClass('active'); ``` 이렇게 모든 a 태그의 active 클래스를 제거하고, 클릭한 버튼에 active 클래스를 넣어주는 것으로 일단은... 1,2,3,4,5,6,7,8,9,10 버튼 눌렀을 때 active 전환되는 것은 해결했습니다. 아니 해결한 줄 알았습니다. 그런데 페이지 이동을 이걸로만 하나요ㅋㅋ 다음으로, 이전으로 버튼도 있지 않습니까? 그 버튼들은 active 되면 안되기 때문에, 다음으로 버튼의 경우 ```javascript if ($(target).hasClass('next') && $('.eb-pagination a').eq($('.eb-pagination a').length - 3).hasClass('active')) { ... } ``` 이런식으로, 우선 클릭한 버튼이 next 클래스를 가졌는지 조건을 달았습니다. 그리고, 단순하게 생각해서, 다음으로 버튼을 눌렀으니 내 뒤에 있는 a태그에 active 클래스를 달아주고 그러면 active가 두개가 되니, 두개중 첫번째 a태그(다음으로를 누르기 전에 active였던)의 active 클래스를 삭제해주었습니다. ```javascript $('.eb-pagination li:has(.active)').next().find('a').addClass('active'); $('.eb-pagination li:has(.active)').eq(0).find('a').removeClass('active'); ``` 이전으로 버튼도 마찬가지로... 아래처럼 작동되게 했습니다. ```javascript $('.eb-pagination li:has(.active)').prev().find('a').addClass('active'); $('.eb-pagination li:has(.active)').eq(1).find('a').removeClass('active'); ``` 자 이제, 1\~10까지는 대충 잘 작동하는 것 같습니다. 다음으로, 이전으로 버튼을 누를 때에는요... 근데, 페이지가 11페이지까지 있다면? 10페이지에서 다음으로를 눌러 11페이지를 불러와야했습니다. 그 후 1\~10까지의 버튼은 새로운 페이지 번호를 달고 11\~20을 위한 버튼이 되어야 했습니다. 제가 해결한 방법은, 우선 처음으로, 이전으로, 다음으로, 마지막으로 버튼은 항상 고정된 순서로 있는다는 점을 고려해 (1,2번째, 뒤에서 2,1번째) 아래와 같이 조건을 달았습니다. ```javascript if ($(target).hasClass('next') && $('.eb-pagination a').eq($('.eb-pagination a').length - 3).hasClass('active')) { // 마지막 숫자 버튼이 active이고, 다음으로 버튼을 눌렀을 때 (1번 케이스) } else if if ($(target).hasClass('prev') && $('.eb-pagination a').eq(2).hasClass('active')) { /// 처음 숫자 버튼이 active이고, 이전으로 버튼을 눌렀을 때 (2번 케이스) } else { // 숫자 버튼 누를 때 (3번 케이스) } ``` 1번 케이스의 경우, 마지막 숫자 버튼(예: 10번)이 눌려 있는 상태에서 다음 페이지(11페이지)를 불러와야 하므로, 페이지 번호를 11\~20까지 바뀌게끔 해야했습니다. 그리고 11번은 처음 숫자 버튼이 되므로 active 클래스는 첫번재 버튼에 달아야 했죠. 아래와 같이 해결했습니다. ```javascript if ($(target).hasClass('next') && $('.eb-pagination a').eq($('.eb-pagination a').length - 3).hasClass('active')) { $('.eb-pagination a.active').removeClass('active'); $('.eb-pagination a:not(.start,.end)').each((index, item)=>{ const newPages = new URL(item.href); const newPage = hrefPageVal + index - 1; newPages.searchParams.set('page', newPage); item.href = newPages.href; if (!($(item).hasClass('prev') || $(item).hasClass('next'))) item.innerText = newPage; }); $('.eb-pagination a').eq(2).addClass('active'); } ``` 많이 더럽죠? ㅋㅋㅋ 어쩔 수 없었습니다 ㅠ 저기 newPages와 newPage 변수의 경우, 버튼을 클릭하면 처음 변수가 아래와 같이 선언되는 ```javascript const target = event.target.href?event.target:$(event.target).parent()[0]; // console.log(target); const currURL = new URL(window.location.href); const currPage = currURL.searchParams.get('page')??'1'; const hrefURL = new URL(target.href); const hrefPageVal = Number(hrefURL.searchParams.get('page')); ``` 이 부분과 관련이 있습니다. 현재 페이지의 정보(페이지 파라미터)를 파싱하고, 몇번째 페이지인지 판단하기 위함입니다. 그리고 버튼 누른 것의 페이지 번호가 몇번인지도 파악할 필요가 있어서 처음에 이렇게 선언했습니다. 암튼 여차저차. 페이지 번호 다시 다 갱신하고.. 뭐 이런 과정을 이전으로 버튼도 동일하게 거쳐 기능을 완성했습니다. ## 8\. 아직 처음으로 끝으로 버튼은 구현 못했다\.\.\. 일단 여기까진 퇴근 후 여가시간을 5시간 녹여가며 (시간 가는 줄 모르고 하긴 했어요ㅋㅋㅋㅋ) 했는데, 아직도 처음으로 끝으로 버튼은 구현을 못했습니다... 이건 생각 좀 해봐야겠어요. 처음으로 버튼은 그냥 1페이지로 이동하게끔 하면 될 것 같은데, 끝으로 버튼이 좀 애매하네요. 1. 페이지 번호를 보여주는 단위는 PC는 10개, 모바일은 5개로 동일한가? 2. 동일하면 내가 했던 페이지 갱신을 위한 노력들은 뻘짓이 되는 것이다. (그냥 숫자 값으로 하면 될 것이니.. 현재 페이지+10 또는 -10 이런 식으로) 3. 다르다면 그것을 설정하는 부분이 있는가? 관리자 페이지 가보니 없다. 근데 코어 부분 찾기는 귀찮고 너무 시간이 늦었다 4. 다르다면, 마지막 페이지 번호가 몇번째 버튼에 해당하는지는 어떻게 판단해야 하는가? 이런 문제들이 있는데... 이젠 모르겠습니다ㅋㅋㅋ ## 9\. 결론 고작 글 목록 페이지 새로고침 없이 하겠다고, 프론트쪽 코드만 오지게 늘어났습니다. 그도 그럴게... 일단 처음 페이지를 열 때에는 기존처럼 정적인 데이터를 보여줬다가 페이지 번호가 바뀌면 다 날리고 json을 활용해 다시 렌더링 하는 것인데... 뭐 어떻게 보면, 처음 읽어들이는 프론트쪽 코드가 양이 다소 많아졌을지는 몰라도, 페이지 변경 시, 전체 HTML이 아닌 데이터에 해당하는 json만 불러오므로 전송하는 데이터 양 자체는 좀 이득을 보긴 할 것 같네요. 어떻게 보면 상당한 뻘짓을 한 셈인 것이고, 어떻게 보면 공부를 한 셈인 것이고, 어떻게 보면... 쓸 데 없는 공부를 한 셈인 것,,이네요.. 이제 이것을 경험삼아, 글목록 뿐 아니라, 글 읽기, 글 쓰기까지 다 새로고침 없이 불러오게 할 수 있도록 해봐야겠습니다!!! P.S) 지금 다시 생각해보니, 그냥 list.php 부분을 헤더, 푸터 부분 다 똑 떼어놓고 여기에 해당하는 html 부분만 받아오게 한 다음에 html을 통째로 갈아끼워도 비슷한 효과를 보는 것이 아닌가.. 하는 생각이 드네요ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 물론 다소 데이터 전송량이 json에 비해서는 늘어나겠지만...? 상당한 뻘짓을 한 것이 맞는 것 같습니다ㅠ