일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
29 | 30 | 31 |
- jsx
- MySQL
- nodejs
- v-html
- Wecode
- 댓글달기
- Vue
- CSS
- input
- event
- HOC
- 리액트
- sass
- App.vue
- 자바스크립트
- mapGetters
- TypeScript
- Vue.js
- 자료구조
- Vue transition
- 쉬운설명
- storybook
- vuex
- webpack
- JavaScript
- express
- react
- State
- ES6
- scss
- Today
- Total
목록프로그래밍/뭔가 해보기 (7)
익명의 개발노트
1. 요구사항 1) 캐릭, 몹 화면에 뿌리기 2) 몹 2초에 한번씩 생성 및 내려오기 3) 캐릭 좌우 움직임 4) 캐릭과 충돌시 몹 사망 5) 몹이 죽었을 경우 이미지 변경 6) 몹이 죽었을 경우 효과음 2. 구현간 문제점 1) 몬스터 사망을 구현하려면 용사캐릭터와 충돌을 감지해야한다. => 감지로직 작성에 시간을 낭비함.. 머리가 좋지 않음.. 2) 생성자 개념 부족에 따라 캐릭터 위치를 저장하지 못했음. 3. 해결방법 1) 캐릭터 위치정보를 변경된 최신위치의 정보를 생성자에 담아 몬스터 클래쓰쪽으로 인자값을 넘겼음. 2) 캐릭터 위치정보, 몬스터 위치정보 토대로 충돌 로직 감지. * setInterval, clearInterval, css sprite, prototype, ES6문법 변환, 오디오클래..
포스기 간단하게 만들어보기. 구현해야할 기능 1. 버튼 누르면 주문목록에 리스트 뜨기. 2. 주문목록에 뜬 리스트 +나 - 버튼 누르면 수량 증가 및 감소하기. 3. 삭제버튼 누르면 리스트 삭제하기. 4. 2,3번에 맞춰서 총 합계 가격 나타내기. 5. 결제버튼 누르면 주문목록 초기화 하기 6. 결제취소 버튼 누르면 결제전 화면으로 돌아가기. 7. 같은 버튼 누르면 두개 이상안들어가게 하기. => 아직 미구현. 느낀점 1. 간단한 페이지는 제이쿼리로 하는 것이 효과적이지만, 요즘 추세가 제이쿼리를 안쓰는추세라 바닐라 자바스크립트로 코딩해서 그런지 줄이 길어지는 단점이 있음. 2. 시행착오 1) 가격합계를 구할 때, 어떻게 할까 고민하다가, 배열을 하나 만들어서 넣었음. 그리고 넣은 값을 reduce로 합..
작년에 자바공부하면서 만들었던 게임. 1. 작품명 : 야인시대 2. 작품설명 → 드라마 "야인시대" 를 모티브로 만든 RPG게임입니다. 우미관의 최종보스인 하야시를 물리쳐야 끝남. 3. 게임상세내용 1) 우미관 : 적들과 전투를 벌이는 곳으로 이기면, 돈을 얻게 됩니다. 야쿠자-> 시바루(1차 보스) -> 가미소리(2차 보스) -> 하야시(최종보스) 순으로 등장합니다. 2) 잡화점 : 공격용아이템, 방어용아이템,스킬아이템, 체력아이템을 구매할 수 있으며, 낮에만 이용할 수 있습니다. 3) 병원 : 캐릭터를 치료해주는 곳으로 낮에만 이용할 수 있습니다. 4) 체육관 : 캐릭터의 능력치를 향상시키는 곳입니다. 마찬가지로 낮에만 이용할 수 있습니다.(체력 : 줄넘기, 공격력 : 샌드백, 방어력 : 스파링) 5..
수정기능 추가하기. 모달창을 띄워서 수정을 해줄 것이다. 기존 값에 변경을 해줘야한다. 왜? 결국엔 수정을 하려면, 삭제와, 투표버튼 처럼, 크롬이 클릭된 곳의 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, 투표버튼에..
생각보다 바닐라 코딩으로 하려니, 시간이 오래걸렸다. 아직 저 투표기능 구현만 방법을 찾으면 될 것 같군. 구현할 기능은 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;; ..
입력하면 아래에 달리는 꼭 댓글같은.. 아마 댓글도 하는 방법은 비슷 할 것 같다. 1. 입력창에 글쓰면 입력창은 초기화하기 2. 입력된 글은 입력창 밑에 나타나기 3. 삭제하기. 1. HTML 먼저 만들고. 제출하다. 2. JS를 작성해보자. 1) 버튼이벤트 기능부여 + 입력창에 글쓰면 초기화 하기. const button = document.querySelector('button'); // HTML 제출버튼 const elInput = document.querySelector('#input'); //HTML input const elUl = document.querySelector('#list'); //HTML UL function handleClick(){ const currentVal = elIn..