일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- mapGetters
- 리액트
- ES6
- App.vue
- vuex
- v-html
- storybook
- Vue transition
- CSS
- react
- 쉬운설명
- Vue
- sass
- jsx
- JavaScript
- express
- 자바스크립트
- State
- Wecode
- scss
- Vue.js
- nodejs
- input
- 댓글달기
- HOC
- TypeScript
- 자료구조
- webpack
- MySQL
- event
- Today
- Total
목록분류 전체보기 (238)
익명의 개발노트
메모리 안의 데이터를 효율적으로 처리하기 위한 자료구조 FILO(First in Last Out), LIFO(Last in First Out) 의 의미. 구현방법은 두가지가 있다. 1. 정적인 1차원 배열 : 구현하기 쉬우며, 사이즈를 미리 알아야한다. 2. Dynamic Array : 리스트이며, 사이즈를 몰라도 되지만, 구현하는데 어렵다. 위 그림이 대표적인 스택의 모습이다. 또한 우리가 살아오면서 스택을 몸소 실천하면서 살아왔다. 맨 아래부터 차곡차곡 엎드리고 사람을 쌓으면, 위에있는 사람먼저 내려와야 안전하다. 더이상 설명은 안해도 이해할 것으로 믿는다. ADT(추상 데이터 타입)은 push, pop, peek, isEmpty가 있다. Pseudo 코드 stack arr[10] 생성 Top = 0..
Linked List는 노드값에 데이터와 헤더값을 기본으로 데이터를 찾아가는 방식임. 데이터(실제 데이터 공간), 헤더(주소 데이터공간)을 의미. 헤더에는 내 앞에 있는 노드의 주소를 저장한다. EX) 선생님이 철수에게 "이 화분 누가 깨뜨렸어?" 라고 묻자. 철수는 영희를 가리키며, "영희가 그랬어요." 영희는 "빡구가 그랬어요" 라며 손가락으로 가리킨다. 이때 손가락 부분이 헤더라고 보면 이해하기 쉽다. 장점으로는 삽입, 삭제가 많은 데이터 리스트에 사용한다. 특징은 데이터 중간에 삽입, 삭제 가능하며, 동적어레이로 크기 조절이 자유롭다. 따라서 메모리 공간을 절약할 수 있음. 하지만, 계속 단서를 찾아가기 때문에 접근 속도가 느리다. 새 Node[DATA, HEAD] 생성 LinkedList 만들기..
컴퓨터 과학에서 효율적인 접근 및 수정을 가능케 하는 자료의 조직, 관리 , 저장을 의미하며, 데이터 값의 모임. 데이터간의 관계, 데이터에 적용할 수 있는 함수나 명령을 의미함. 자료구조에는 여러종류가 있으며, 직접 구현해 보는 것이 가장 중요함. 각 자료구조의 본질과 컨셉을 이해하는 것이 중요하다. 자료구조의 기본적인 구성 1. insert : 데이터를 어떻게 저장할 것인가? 2. Search : 데이터를 어떻게 탐색할 것인가? 3. Delete : 데이터를 어떻게 삭제할 것인가? 일반적으로 자료구조는 단순구조, 파일구조, 선형, 비선형구조로 나뉘며, 선형구조(Linear)와 비선형구조(Non-Linear)를 말한다. 선형구조 : Stack, Que, Linked List, Arrays, Deque ..
작년에 자바공부하면서 만들었던 게임. 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..
//수정창 모달로 만들기 function modifyComments(event){ const mBtn = event.target; //모달창 만들기 const modal = document.createElement('div') const modalOverlay = document.createElement('div'); const modalContent = document.createElement('div'); const cancleBtn = document.createElement('button'); const okBtn = document.createElement('button'); const input = document.createElement('input'); const span = documen..
투표기능을 만들어보자. 기존에 투표기능을 구현하면서 생겼던 문제점은 [에러일지]에 가보면 보실 수 있다. 기존에 댓글을 보여줬던 부분 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;; ..
입력하면 아래에 달리는 꼭 댓글같은.. 아마 댓글도 하는 방법은 비슷 할 것 같다. 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..