익명의 개발노트

방법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..

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에서 서버를..

콜백 함수 : 함수를 인자로 넘기는 함수. ex) function executableCode(){ } function otherCode(callback){callback();} 위 결과에서 1. otherCode(executableCode); 입력하면?? //undefinded 2. otherCode(executableCode()); 입력하면?? //typeEr ror 2번째는 클로져로 실행하면 됨.

비동기 호출이라고도 한다. 동기 호출과 비동기 호출의 차이점을 먼저 보면, 예) 식당에 간다. 식당에 왔다.메뉴판을 본다.김밥을 주문한다.테이블을 셋팅한다.김밥을 먹었다.계산한다. 위와 같은 흐름으로 진행한다 하면, 동기식은 순서대로 진행한다. 그렇기때문에 김밥을 주문하고 김밥이 나올때까지 암것도 못한다. 하지만 비동기식은 김밥주문하고 테이블 세팅하고 김밥나오면 먹으면 된다. 먼저 요청하고 응답받을때까지 기다리는게 아니라, 다른거 하면서 기다리는 거다. 통상 서버와의 요청시에 비동기식을 사용한다. 비동기식 사용 유형은 크게 3가지 1. 이벤트 핸들러2. 타이머에서 콜백(애니메이션)3. 서버에 자원요청(fetch이용) 대표적인 비동기식 함수는 setTimeout함수가 있다. 특징이 시간에 0을 넣어도 동기..

자바스크립트에서 Arguments 는 모든 function() 안에서 사용할 수 있는 지역변수이다. 자바스크립트 프로그래밍에서 중요하다고 하며, 자바스크립트 라이브러리는 arguments 객체를 사용하기 때문에 자바스크립트 개발자라면 사용법에 익숙해야한다. 특징을 살펴보자. 1. argument는 함수 내에서 변수를 통해 접근할 수 있다. 2. 호출된 arguments 는 함수에 전달된 인수(arguments)를 배열 형태의 object로 표현한 것이다.. 하지만, 실제 배열은 아님. 유사배열?! 그래서, Array의 메소드를 .length 빼고 사용할 수 없음. ※ arguments.length는 실제 함수에 사용자가 넣은 인자(파라미터) 의 갯 수임. ex) function one(arg1){......

Immediately Invoked Function Expression 번역하면 즉시 실행함수 이다. 사용목적은 스코프 문제 때문에 사용한다. 이름이 없는 함수이기 때문에 argument나 value값을 넘겨줄때도 쓴다. 가독성도 많이 떨어지기는 단점이 있다. IIFE에 변수를 할당하면 IIFE 자체에 저장이 되지 않고 함수가 실행된 결과만 저장된다. (function () { var aName = "Barry"; })();이런식으로 function 의 시작과 끝을 아기를 포대기에 감싸듯 ( ) 를 사용하여 감싸준다. IIFE 안에서 포문을 돌릴 경우 var i 이런식으로 주는경우도 있는데, let i로 사용하면 IIFE를 굳이 사용하지 않아도 된다. 또는 .bind를 사용해도 IIFE를 굳이 사용하지 ..

execution contexts (실행컨텍스트) 1) 정의 : 프로그램이 실행될때, 빌드업 하는 과정에서 메모리 안에 스코프 구조들을 excution context라고 부른다. 2) 어떤 함수가 호출되면 실행 컨텍스트 execution context가 만들어진다.(call stack에 push, 함수 벗어나면 pop됨)함수가 실행되면 실행컨텍스트가 생성되고 => 매개변수의 정보를 가지는 활성객체를 생성(arguments, 유사배열)하고, 함수가 생성될 때 상용된 인자(parameter)를 넣는다. => 활성객체 안에 실행 컨텍스트의 스코프 체인을생성 => 함수가 가지고 있는 변수 및 객체 정보를 담을변수객체 생성한다. 이때의 값은 아직 할당하지 않았으므로, undefined이다. => this에 대한 ..

클로져란? 1) 외부함수의 변수에 접근할 수 있는 내부 함수( 외부함수가 실행 종료되어 소멸했음에도 불구하고 내부함수는 외부함수의 변수에 접근가능) 2) scope chain으로 표현되기도 함 3) 보통함수를 return 하여 사용 4) return 하는 내부함수를 클로져 함수라고 지칭 function outer() { console.log('outer fn invoked'); function inner() { console.log('inner fn invoked'); } return inner;} outer(); // → outer fn invoked, ƒ inner() { console.log('inner fn invoked'); }outer()(); // → outer fn invoked, inne..