2023_10_27 TIL

Team Project 4일차

 

어제, 그제 전반적인 기능들을 구현하고 오늘은 css구현 및 추가적인 기능들을 구현하기로 한 날이었다.

 

우선 내가 오늘 한 일은 다음과 같다.

① 유효성 검사 (ID,PW 입력할 때 조건 미충족시 조건 미충족부분에 대한 div를 띄우기) + 조건 미충족시 local stroage에        데이터 들어가지 않게 하기.

② 전체적으로 CSS 구성하기

③ 댓글기능 수정/삭제 버튼 추가하기

 

 

오늘 공부한 내용에 대해 조금 더 자세하게 설명해보려고 한다.

 

① 유효성 검사 부분에는 문자열검사(한글,숫자만 입력가능하도록), 글자 수 검사를 넣어주었다.

     ID와 PW의 값이 조건을 충족하지 않는다면 ID input과 PW input 아래에 조건이 성립되지 않았다는 div를 띄웠다.

     별로 어려운 점은 없었지만 조건 중 한글이나 영문, 숫자를 체크해주는 기능을 넣는 부분이 조금 특이했기 때문에 적어       두려고 한다.

     

function checkNumAndKor(idValue) {
    let checkKor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
    let checkNum = /[0-9]/;
    let checkEng = /[a-zA-Z]/;
    return checkKor.test(idValue) || (checkNum.test(idValue) && !checkEng.test(idValue));
}

위와 같은 코드로 글자 유효성 검사를 할 수 있다.

 

 

② css는 이미 만들어 둔 기능들의 위치를 잡아주고 전체적인 색감을 잡는 부분이 좀 컸던 것 같다.

     딱히 css부분에 대해 적어둘 것은 없지만 체크박스의 색을 바꾸는 부분은 조금 특이했다.

     체크박스 부분의 css를 accent-color : 원하는 색 으로 넣게되면 원하는 색으로 체크박스를 바꿀 수 있다.

 

 

 

 

③ 댓글 기능 수정/ 삭제하는 부분은 local storage로 하다보니 조금 까다로웠다.

     어제 영화 별로 댓글들을 달기 위해 local stroage에 key값과 value 값들을 담아줬었는데 key값에 영화 id를 담아줬기           때문에 한 영화당 한 개의 댓글만 달 수 있는 문제가 있었다.(key값이 같으면 새로운 key-value로 들어가는 것이 아니라       기존의 value값만 바뀌기 때문)

      그렇기 때문에 한 영화에 여러 댓글을 달기 위해서 key값에 key1, key2와 같이 구분할 수 있는 값들을 추가적으로 넣어        줘야했다. (...중략...10/26일 TIL 참고) 결국 key 값에 같은 값을 가질 수 없게 현재 시간(시,분,초)을 붙여줬었다.

       

       그런데 이렇게 한 방식으로 인해 오늘 수정/삭제 버튼을 넣는데 어려움이 생겼다. key값에 영화의 id값과 작성한 시간         을 넣었기 때문에 local storage에서 데이터를 꺼내올 때에도 작성한 시간을 알아야 하는 번거로움이 생겼다.

       

       key 값에 들어있는 시간을 어떤 식으로 꺼내올지 생각하다가 기존 detail page에 들어있는 텍스트에 저장한 시간이 적         혀있기 때문에 그것을 이용해 key값을 꺼내주었다. 그 후 아래와 같은 방식으로 코드를 작성했다.

 

function deleteLocalStorage(event) {
    const target = event.target.parentElement
    
    const checkPW = prompt("저장했던 비밀번호를 입력해주세요");
    const localKey = localStorage.getItem(`${id},${target.children[0].innerText}`);

    if (checkPW === JSON.parse(localKey).pw) {
        localStorage.removeItem(`${id},${target.children[0].innerText}`);
        target.remove();
    } else {
        alert("비밀번호가 일치하지 않습니다.");
    }
}

 

 이벤트가 동작하는 태그는 버튼 태그이기 때문에 버튼 태그의 상위 태그를 불러오기 위해 event.target.parentElement를 사용해주었다. (상위 태그를 불러온 이유는 버튼이 div안에 있고 그 div 안에 텍스트가 있었기 때문이었다.)

상위 태그를 불러와 그 div 안에 있는 하위 div의 텍스트를 불러오기 위해 target.children[0] (div안의 첫 번째 div 태그)를 사용해 주었다.

 

 

댓글 수정은 방금 전의 과정보다 살짝 더 까다로웠다. 

key값을 불러오는 것까지는 동일했지만 사용자의 비밀번호가 맞는지 체크해줘야했고, 그 비밀번호를 체크하는 과정은 이전의 삭제버튼을 만드는 것과 비슷하게 할 수 있었다. 

약간의 추가적인 과정이 있었다면 local storage를 "수정" 해주었다는 것이다.

 

처음에는 어떻게 local storage를 "수정"해야할까 생각해보았다. 그런데 local stroage의 메서드인 get, set, delete 밖에 없기 때문에 기존의 local storage를 삭제하고 다시 만드는 방법으로 만들어봤다. 

 

하지만 여기에는 두 가지 문제점이 있었다. 

1. 삭제 후 새로 local storage를 만들게 되면 기존의 자리에 새로운 내용이 담긴 div를 넣어주기 힘들다는 점.

    (local storage 삭제시 해당 게시글도 함께 없어지기 때문에)

2. 만약 새로운 div에 넣는다고 해도 불필요한 과정이 너무 많이 들어가 있다는 점.

 

이와 같은 문제점들 때문에 새로운 과정을 생각해봤다. 조금만 더 생각해보니 local storage의 특성상 똑같은 key값으로 set메서드를 사용할 경우 key값은 바뀌지 않고 value값만 바꿀 수 있었다. 따라서 굳이 local storage의 value를 삭제하고 다시 넣을 필요가 없었다.

 

set 메서드를 이용해서 코딩을 해주고 나서 데이터에 접근을 하려고 하는데 아까와는 다르게 접근하는 방법이 조금 어려웠다. 수정한 부분만을 다시 텍스트에 넣어주어야 했는데 div안에 텍스트만 가져오는 부분이 힘들었다. 

그러던 와중에 div 내의 text만을 가져오는 방법을 찾게 되었다.

 

 

target.childNodes[0].nodeValue

 

이와 같이 작성하게 되면 div 내의 텍스트에 직접적으로 접근할 수 있다. 
이 방법을 사용하지 않았을 때는 div내의 텍스트와 버튼 내의 텍스트, 모든 텍스트 들이 나왔었다.(innerHTML을 사용하지 않고 innerText를 사용했는데도 이런 결과가 나왔었다)

 

 

function modifyLocalStorage(event) {
    const target = event.target.parentElement
    
    const checkPW = prompt("저장했던 비밀번호를 입력해주세요");
    const localKey = localStorage.getItem(`${id},${target.children[0].innerText}`);

    if (checkPW === JSON.parse(localKey).pw) {
        const modifyComment = prompt("수정할 내용을 입력해주세요")
        const parsedLocalKey = JSON.parse(localKey);
        parsedLocalKey.comment = modifyComment;
        const stringfiedLocalKey = JSON.stringify(parsedLocalKey)
        localStorage.setItem(`${id},${target.children[0].innerText}`,stringfiedLocalKey)

        target.childNodes[0].nodeValue =`${parsedLocalKey.id} : ${modifyComment}`
    } else {
        alert("비밀번호가 일치하지 않습니다.");
    }
}

 

수정 버튼의 결과물은 이러하다.

(사실 html에서 div 하나만 더 추가하면  금방 해결할 수 있는 일이었는데 js만 가지고 해결할 수 있나 오기생겨서 해봤다..)