-
2023 - 06 - 05 댓글 CRUD 기능 1. Create (생성)Today I Learned/TIL 06 2023. 6. 4. 22:11
오늘 할일
댓글 생성 Create 구현
오늘 배운것
댓글 CRUD => 생성 Create 구현
1. Create (댓글 생성) createComment: 새로운 댓글을 생성하여 저장합니다. saveComment: 새로운 댓글을 저장소(로컬 스토리지 또는 서버)에 저장합니다. 2. Read (댓글 조회) getComments: 저장소에서 모든 댓글을 가져옵니다. displayComments: 가져온 댓글을 화면에 표시합니다. 3. Update (댓글 수정) editComment: 선택한 댓글을 수정할 수 있는 입력 필드를 화면에 표시합니다. updateComment: 수정한 내용을 저장소에 업데이트합니다. 4. Delete (댓글 삭제) deleteComment: 선택한 댓글을 저장소에서 삭제합니다.CRUD 연습을 위해 각각 js파일 만들고 html 태그 하단에 다 script태그로 연결.
1. 댓글 생성.
<form id="CRUDprac"> <div>댓글을 남겨주세요</div> <input type="text" class="username" placeholder="아이디를 입력하세요"></input><br> <input type="password" class="password" placeholder="비밀번호를 입력하세요"></input><br> <input type="comment" class="comment" placeholder="댓글을 입력하세요"></input><br> <button type="button" onclick="save()">저장</button> </form><body> 태그안에 위와 같이 만듦.
아이디, 비밀번호, 코멘트는 input 태그로, 그리고 button 태그를 생성하고
onclick="save()" 함수를 만듦. 즉 저장버튼을 클릭하면 함수가 실행될수 있도록 함.
1. 내가 쓰는 코드의 로직을 처음부터 끝까지 이해하는 것이 가장 중요하며,
2. 계속해서 console.log를 찍는 습관을 들인다.
onclick으로 한 save() 함수가 실행되어야 댓글생성이 구현되도록 함.
따라서 create.js의 모든 내용은 function save() {} 함수안에 넣는다.
html에서 입력하는 것이 아이디, 비밀번호, 댓글 이 3가지이므로, 이 3가지를 const로 변수 선언한다.
그리고 그 변수 선언된 것을 querySelector 로 내가 원하는 쿼리값을 가져온다.
querySelector 는 가져오는 태그 전체값을 가져온다. 예를 들어,
<input type="text" class="username" id="user" placeholder="아이디를 입력하세요"></input><br> document.querySelector(".username").value; // class이름인 username로 가져옴 또는 document.querySelector("#user").value; // id이름인 user로 가져옴이렇게 class명이나 id명을 통해 가져오는 querySelector 는 그 해당 태그 전체를 가져오는 것이다.
위의 경우 input태그 전체를 가져옴.
태그중 일부만 가져오고 싶다면 뒤에 .value를 찍어 해당 '값'만 갖고올수 있다.
여기서 '값'이란 save버튼을 눌러 함수가 실현되었을 때 해당 태그에 저장된 값.
즉 위의 경우 유저가 입력한 아이디를 의미한다.
다시 변수선언된 아이디, 비밀번호, 댓글에서 querySelector 로 해당값만 갖고온다.
인터넷 전송이 이뤄질때는 JSON 객체를 사용하므로, obj를 선언한다.
obj는 key:value pair로 이뤄진 객체이고, key값은 임의지정하고
value값에는 아이디, 비밀번호, 댓글 선언된 변수명을 넣는다.
localStorage.setItem(key값, value값) localStorage.getItem(key값) => setItem에 저장된 value값을 가져옴.이를 localStorage.setItem을 이용해 저장한다.
key값은 임의변수를 넣어줘도 좋지만, 입력할때마다 값이 랜덤으로 나오는 값인 아래 고유의 key값을 지정한다.
여기서는 최초생성이기 때문에 랜덤key값을 사용하는 것이지만,
추후 삭제 및 수정시에는 해당 key값을 알아야하므로 랜덤key값은 사용하지 않는다.
localStorage.setItem의 value값에는 아까 만든 객체 obj
(const로 선언된 username, password, comment가 각각의 value값으로 지정되어있고
그것을 id, pw, content로 key값으로 저장함) 를 문자열화 JSON.stringify()해서 저장한다.
마지막으로, 자동으로 업데이트가 되도록 window.location.reload(); 이 reload() 코드를 써야 onload코드가 발현한다.
우리는 CRUD 에서 생성을 하면 바로 조회가 될 수 있도록 해야 하기 때문에 이 함수는 필수다.
아래와 같은 코드로 하면 저장 완료.
function save(){ let key = Date.now()+Math.floor(Math.random()*100); //고유의키값 랜덤생성 const CreateComment = document.querySelector("#CRUDprac"); const username = document.querySelector(".username").value; const password = document.querySelector(".password").value; const comment = document.querySelector(".comment").value; const obj = { id: key, // 여기서의 key값은 위의 let값과 동일하긴 하나, 기본적으로 obj라는 name : username, // 객체의 value값으로 저장된것이다. 따라서 다르게 인식해야 함. pw: password, content: comment }; localStorage.setItem(key, JSON.stringify(obj)) window.location.reload(); //reload하면 자동적으로 onload 실행됨 }'Today I Learned > TIL 06' 카테고리의 다른 글
2023 - 06 - 08 댓글 CRUD 기능 4. Update (수정) (0) 2023.06.06 2023 - 06 - 07 댓글 CRUD 기능 3. Read (조회) (0) 2023.06.06 2023 - 06 - 06 댓글 CRUD 기능 2. Delete (삭제) (0) 2023.06.06 2023 - 06 - 04 자료구조, DOM 제어하기 api 목록 (0) 2023.06.04 2023 - 06 - 03 VS code에서 git에 커밋하기 (0) 2023.06.04