일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- ES6
- 자료구조
- storybook
- 쉬운설명
- scss
- HOC
- react
- 댓글달기
- webpack
- v-html
- sass
- event
- JavaScript
- nodejs
- Vue.js
- jsx
- mapGetters
- express
- 자바스크립트
- Vue
- vuex
- State
- TypeScript
- Wecode
- 리액트
- MySQL
- App.vue
- CSS
- Vue transition
- input
- Today
- Total
목록댓글달기 (4)
익명의 개발노트
수정기능 추가하기. 모달창을 띄워서 수정을 해줄 것이다. 기존 값에 변경을 해줘야한다. 왜? 결국엔 수정을 하려면, 삭제와, 투표버튼 처럼, 크롬이 클릭된 곳의 id를 알아야 에러없이 추가할 수 있기 때문. 나는 기존에 만든 배열 안에 있는 객체에다가 inputValue값을 추가해서 id를 관리하기로 했다. function showComment(comment){ //생략 inputValue.id = newId; //추가 //생략 //아이디에 따른 투표수카운트. 배열에 접근해서 수정하는 방식으로 해야함. let IdAccordingToVoteCount ={ "commentId" : newId, "voteUpCount" : 0, "voteDownCount" : 0, "commentValue" : commen..
투표기능을 만들어보자. 기존에 투표기능을 구현하면서 생겼던 문제점은 [에러일지]에 가보면 보실 수 있다. 기존에 댓글을 보여줬던 부분 showComment()에 댓글 수를 관리할 수 있는 id를 부여했다. id를 각각의 투표버튼에 부여해도 되지만, 그렇게 되면 관리할 것이 많이 지기 때문에, 투표버튼의 상위 노드에다가 id를 부여했다. function showComment(comment){ //생략 voteDiv.id = newId; //생략 let IdAccordingToVoteCount ={ "commentId" : newId, "voteUpCount" : 0, "voteDownCount" : 0 } //생략 } 그 아이디를 관리 할 수 있도록 객체에 담고, 객체에는 그 댓글에 대한 id, 투표버튼에..
방법1. 좋아요, 싫어요 버튼의 이벤트리스너에 리스너를 공통으로 하고 거기서 if else로 나눈 점. function numberCount(event){ console.log("5 투료버튼 누름"); //몇번째가 클릭되는지 인식안되는 듯? if(event.target === voteUp){ voteUpCount++; voteUp.innerHTML = "👍"+voteUpCount; return voteUp.innerHTML; }else if(event.target === voteDown){ voteDownCount++; voteDown.innerHTML = "👎"+voteDownCount; return voteDown.innerHTML; } console.log("6 투료버튼 종료?"); } 위와 같이하..
생각보다 바닐라 코딩으로 하려니, 시간이 오래걸렸다. 아직 저 투표기능 구현만 방법을 찾으면 될 것 같군. 구현할 기능은 8가지. 1.입력받으면 입력값 초기화 2. 입력값 댓글로들어가기 3. 댓글 삭제, 수정기능 4. 좋아요 투표기능 5. 타임스템프기능 6. 무작위 아이디 7. 댓글 삭제기능 8. 댓글 수정기능 1. HTML을 만들자. 댓글 0 등록 2.CSS만들기 #form-commentInfo{ width: 100%; } #comment-count{ margin-bottom: 10px; } #comment-input{ width: 50%; height: 3.3em; } #submit{ background-color: rgb(0, 128,255); width: 5.5em; height: 3.3em;; ..