시베리안 허숙희의 자바스크립트 비기닝 29 (스크립트 게시판 계속...)

자바스크립트

by e7e 2023. 6. 27. 08:49

에서 모달로 상세내용 보기까지 했으닝, CRUD(Create,Read,Update,Delete)로 보면 UD만 남았당.

수정, 삭제 역시 상황과 맥락에 따라 그 어려운 정도가 달라질 것이지만. 여기선 넘 쉽당.

문제는 수정, 삭제를 위해서는 글의 num 속성값을 넘겨 받아야 한다는 것이다.

알(콩알?)만한 사람은 이미 모두 눈치 챘을 것이다. num 속성을 일부러 같은 값이 발생하지 않도록

계속 +1씩 증가하는 시퀀스 형태로 관계형DB의 Primary-Key 형태로 사용하려 한다는 거슬.....

그런데 이 값이 사용자에게는 특별히 의미가 없고, 개발자에게는 필요하당.

요따구 경우(사용자에게 보여 줄 필요는 없는데, 프로그램적으로 필요)에 hidden을 사용한당.

list.html의 대략 78 라인 쯤이 아래 처럼 되도록 input hidden을 추가해 준당.

        <div id="detail">
            <form action="" method="get">
                <input type="hidden" name="n_num" value="">
                <table>

list.html 대략 201 라인 쯤 함수 fmodalOpen 안에도 아래 처럼 되도로 수정한당.

hidden에 num 속성값을 넣는 거당. 그래야 form action시에 값이 넘어간당!.

    event.preventDefault();  // a 태그 링크 이동 막깅
    document.querySelector("[name=n_num]").value = pNum;
    for(let i=0; i<loDatas.length; i++){

수정과 삭제를 처리할 준비가 이제 다 되었당. action으로 설정한 파일을 아래처럼 맹글장.

modify_action.html (수정처리)

<!DOCTYPE html>
<meta charset="UTF-8">
<!--jsp 시뮬레이레 jsp.js 추강 -->
<script src="jsp.js"></script>
<script>
    let num = request.getParameter("n_title");
    let title = request.getParameter("n_title");
//    let writer = request.getParameter("n_writer"); // 수정 불가 
    let cont = request.getParameter("n_cont");
    let cate = request.getParameterValues("n_cate"); 

    const tblName ="E7eBoard";
    // 요기선 편의를 위해 데이타가 1개도 없는 경우는 배제하장
    let gulDatas = JSON.parse(localStorage.getItem(tblName)); //로컬스토리지 읽기(없으면 null)

    // num이 일치하는 것 찾아서 수정
    for(let i=0; i<gulDatas.length; i++){
        if(gulDatas[i].num == num){
            gulDatas[i].title = title;
            gulDatas[i].cont = title;
            gulDatas[i].cate = cate;
            gulDatas[i].date = dateForm(new Date(),"-");
            break;   // 실수로 이런 걸 빼먹으면 꽤나 성능이 저하된당!
        }
    }

    //배열을 문자열화 저장!
    localStorage.setItem(tblName,JSON.stringify(gulDatas));

    alert("글이 잘 수정되었어용");
    location.replace("list.html");
</script>

글쓰니는 수정할 수 없는 것으로 결정했당(내맘!), 수정 후에는 list.html로 돌아간당.

delete_action.html(삭제 처리, 삭제는 정말 쉽고도 쉽당)

<!DOCTYPE html>
<meta charset="UTF-8">
<!--jsp 시뮬레이레 jsp.js 추강 -->
<script src="jsp.js"></script>
<script>
    // num만 있으면 지울 수 있당!
    let num = request.getParameter("n_title");

    const tblName ="E7eBoard";
    // 요기선 편의를 위해 데이타가 1개도 없는 경우는 배제하장
    let gulDatas = JSON.parse(localStorage.getItem(tblName)); //로컬스토리지 읽기(없으면 null)

    // num이 일치하는 것 찾아서 수정
    for(let i=0; i<gulDatas.length; i++){
        if(gulDatas[i].num == num){
            gulDatas.splice(i,1);  // 해당 i 인덱스 1개만 삭제
            break;   // 실수로 이런 걸 빼먹으면 꽤나 성능이 저하된당!
        }
    }

    //배열을 문자열화 저장!
    localStorage.setItem(tblName,JSON.stringify(gulDatas));

    alert("글이 잘 삭제 되었어용");
    location.replace("list.html");
</script>

대략 CRUD가 완성되었당.!

이제 페이지 나누기 할 준비를 하장. 페이지 나누기를 위해서는 리스트 데이타가 쪼메

많아야 하는뎅, 개발자라면 이럴 때 더미데이터 맹글기에 관심을 가지게 될 거당

아래 파일을 다운 받자. 쪼메 있어 보이게 만들려공 애썼당.

맘에 안든다면 역시 본인 맴 가는 대로 고쳐도 아무도 뭐라 안한당!

ranUtil.js

0.06MB

다운 받았다면 아래 처럼 dummy.html 파일을 만들고 localStorage에 데이터가 잘 있는지 확인하장!

아마 잘 안 될 거시당.(Ajax땜시 Cross-Origin Error가 발생 !)

Cross-Origin은 개념이해가 중요하니, 낸 중(Ajax이야기시)에 더 이야기 하도록하장!

<!DOCTYPE html>
<meta charset="UTF-8">
<script src="./ranUtil.js"></script>
<script>

const tblName = "E7eBoard";
var dummyArr = [];

for(let i=1; i<=108; i++){
    let gul = {
        num: i,
        title: RanUtil.ranTitle(),
        writer: RanUtil.ranFullName(),
        cont : RanUtil.ranContent(),
        cate : RanUtil.ranArrLength(["js","java","oracle","html","css"],2,3),
        date : RanUtil.ranDate()
    }
    dummyArr.push(gul);
}

localStorage.setItem(tblName, JSON.stringify(dummyArr));

</script>

구글에서 크롬 웹스토어를 검색해서 들어간 다음에 Cross origin으로 검색하면 여러 플러그인이

검색되는 데 난 그 중에 아래 이미지 처럼 보이는 걸 추가하였당!

추가 하였다면 확장프로그램 관리자에서 위 플러그인을 실행시킨 다음에 아래 그림처럼 ON 해준당.

그리고 dummy.html을 다시 실행시키면 에러 없이 잘 되는 걸 확인할 수 있당.

이제 list.html을 다시 실행해 보면, 아래처럼 더미 데이터로 108개가 출력될 거시당.

(사실 div의 width가 너무 작게 되어 있어서, 몰래 750px정도로 키웠당!~~)

데이터가 많으니, 당연 페이지 나누기(산수)가 하고 싶어진당.

다음 글에서 한번 해 보도록 하장! (뭐든 하고보면 그리 어렵지는 않당!)

IQ :  넌 정말 왜그러니?...
EQ:  뭘? 내가 어쨌는뎅?..

IQ :  어찌 그리 앞뒤 생각이 없어! 논리적으로 행동할 순 없니?
EQ:  흥! 너야 말로 논리에 갇힌 진짜 바보얌!

IQ :  항상 너의 무대포 행동을 변명해야 하는 내 입장도 생각 좀 해줘
제발! 나서지 말라공!, 내가 알아서 할테니깡

EQ: 넌 그게 문제야! 스스로 만든 논리에 스스로 갇혀 그걸 믿는 바보!
너의 논리란게 너가 인식한 것 안에서만 짜 맞춰진 단순한 스토리 아니얌?
난 내가 느끼는 모든 것! 미처 인식하지 못한 미세한 것 까지도 그 느낌의
크기와 방향에 맞춰 섞여지고, 그것들의 자연적 화학반응에  따라
나도 모르는 행동을 하징!, 설명할 순 없지만
그것이 나고, 나의 진실이라고 느껴...... 난 그냥 모든 믹스된 자극에 대한
단순한 반응 일 뿐이얌.  제발 날 설명하지 말아줘

IQ:  음... EQ! 너 또 화났구낭! , 미안해!~~ㅠㅠ

진실한 대화는 누군가 먼저 말을 건네야 한당! 지금 바로 say!

https://www.youtube.com/watch?v=uO_j23R18cM

'자바스크립트' 카테고리의 다른 글

시베리안 허숙희의 자바스크립트 비기닝 31 (3D 움직임 맛보깅...) (0)	2023.06.28
시베리안 허숙희의 자바스크립트 비기닝 30 (스크립트 게시판 페이징...) (0)	2023.06.28
시베리안 허숙희의 자바스크립트 비기닝 28 (모달 modal) (2)	2023.06.23
시베리안 허숙희의 자바스크립트 비기닝 27 ( 스크립트 게시판!) (0)	2023.06.22
시베리안 허숙희의 자바스크립트 비기닝 26 (리팩토링...) (0)	2023.06.21