익명의 개발노트

자바스크립트를 공부하면서 for문 안에 onclick 같은 이벤트 핸들러를 넣으면 그 수에 맞게 작동을 할 것같다. 하지만, 스코프 문제 때문에 그렇치 않음을 알 수있다. 흔히 볼 수 있는 예제를 보자. 출처 : https://stackoverflow.com/questions/6487366/how-to-generate-event-handlers-with-loop-in-javascript b1 b2 b3 b4 b5 b6 b7 b8 b9 b10 for(i=1; i

작년에 자바공부하면서 만들었던 게임. 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..

NPM이란 무엇인가?? Node Package Manager 라고 부른다. 한마디로 node 로 개발에 필요한 모든 것을 NPM이라는 창고에서 보관을 하고 있다. 사용자는 개발에 필요한 부분들을 창고에서 꺼내서 내 컴에 설치해서 쓰는 식이다. 예를 들면, 서버를 만들어야한다. 좀 더 쉽게 만들고 싶다면 Express를 가져다 쓰면 되고. 추가적인 메소드같은 것을 쓰고 싶으면 underscore를 가져다 쓰면된다. 별거 없다. 조낸 큰 생태계라고 보면 좋을 듯.

1. express : npm 모듈중에 하나이며, Node Js 에서 서버 프로그래밍에 필요한 기능을 훨씬더 편하게 해주는 기능이 있다. 1) 일반적인 nodeJS 에서 서버 여는 방법. const http = require('http'); const hostName = '127.0.0.1';const port = 80; http.createServer((req, res) => { res.writeHead(200,{'Content-Type' : 'text/plain'}); res.end('Welcome');}).listen(port, hostName,()=>{ console.log(`Server running at http://${hostName}:${port}/`);}); 2) Express에서 서버를..

Node JS란 무엇인가? 자바스크립트로 만들어진 노드 JS는 크롬 V8 엔진으로 빌드 된 자바스크립트 런타임이다. 기본적으로 웹 브라우져에서 자바스크립트를 많이 썼지만, 노드 JS를 통해서 서버쪽에서도 자바스크립트로 프로그래밍이 가능해졌다. 그동안 웹에서만 실행가능했던 자바스크립트가 서버에서도 실행가는 하게 된 것. 서버를 알기 위해서는 먼저 인터넷의 동작방법에 대해 알 필요가 있다. 클라이언트 -----> 인터넷 -------> 서버 1) 기본적인 원리 => 클라이언트(사용자 , 갑)이 인터넷에 어떤 자료를 요청하면, 서버(주다, 을)는 원하는 정보를 찾아서 제공해준다. 2) 특징 인터넷은 지구라고 비유하면, 각각의 주소들은 나라, 집이 될 것이다. 주소는 HTTP를 이용해서 찾아갈 수가 있다. HT..

리액트 JS는 프레임워크가 아닌 자바스크립트 라이브러리이다. 하는 일 : 유저인터페이스를 위해서 사용하는 라이브러리임. 나온 배경 : 기존 js, html, css를 활용해서 구성해도 되지만, 웹 자체가 페이지가 아닌 웹 어플리케이션으로 발전함에 따라서 많은 컴포넌트들을 관리해야하는데, 그런 부분들을 react에서 가상 DOM을 사용하여, 사용자로 하여금, 개발에 집중할 수 있게 해준 라이브러리이다. 일일이 DOM을 만져서 변경하기엔 해야할 일이 너무 많다. 설치는 https://github.com/facebook/create-react-app 페이스북 리액트 깃헙 참고. npx create-react-app my-app cd my-app npm start //yarn을 설치한 사람은 yarn start..