JavaScript 썸네일형 리스트형 [React] Nodebird 5.1 백엔드 서버 만들기 정리 강좌 보고 간단하게 정리함. node는 자바스크립트 런타임이다. (서버 아님) 서버 프레임워크 express를 사용할 것이다. 설치할 라이브러리들 express axios bcrypt cookie-parser express-session dotenv cors helmet hpp morgan passport passport-local sequelize sequelize-cli eslint eslint-config-airbnb eslint-plugin-jsx-a11y nodemon 그리고 sciprt는 { "dev": "nodemon" } 으로 설정해주고 nodemon.json 파일을 아래와 같이 작성해준다. { "watch": [ "index.js", "routes", "config", "passport".. 더보기 [You Don`t Know JS] Chapter 1. 타입, Chapter 2. 값 정리 Chapter 1. 타입 '타입' 이란 자바스크립트 엔진, 개발자 모두에게 어떤 값을 다른 값과 분별할 수 있는, 고유한 내부 특성의 집합이다. 거의 모든 자바스크립트 프로그램에서 강제변환이 일어나므로 타입을 확실하게 인지하고 사용하는 것이 중요하다. 값 타입은 typeof 연산자로 알 수 있지만, null은 좀 특별하다. null에 typeof 연산자를 사용할 경우 'object' 라고 나온다. -null이 object인 이유 (링크) 추가로 함수인 경우, typeof 연산자의 결과는 'object'가 아니라 'function' 으로 나온다. 실제로 function은 최상위 타입이 아니라 object의 하위 타입이다. 하지만 배열은 'object'라고 나온다. ('array'라고 나오지 않음) 1.3 .. 더보기 JS 면접 문제 질문과 답변 JS 관련 질문:event delegation에 관해 설명해주세요.https://poiemaweb.com/js-eventhttps://joshua1988.github.io/web-development/javascript/event-propagation-delegation/ 다수의 자식 요소에 각각 이벤트 핸들러를 바인딩하는 대신 하나의 부모요소에 이벤트 핸들러를 바인딩하는 방식. 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소들의 이벤트를 제어하는 방식. this는 JavaScript에서 어떻게 작동하는지 설명해주세요.this는 모든 함수 스코프 내에 자동으로 설정되는 특수한 식별자.this는 함수를 호출하는 방법에 의해 결정된다. 함수를 실행한 주체가 바로 this다. prototype.. 더보기 http 두꺼운 책 읽는법 https://blog.npcode.com/2015/06/07/%EC%9B%B9-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EB%A5%BC-%EC%9C%84%ED%95%9C-http-%EC%99%84%EB%B2%BD-%EA%B0%80%EC%9D%B4%EB%93%9C-%EC%9D%BD%EB%8A%94-%EB%B2%95/ 더보기 process.EventEmitter()가 동작 하지 않는다. process.EventEmitter() 는 deprecated 되었으므로, const EventEmitter = require('events') 를 한 다음, 사용하려고 했던 곳에 new EventEmitter()를 사용하면 된다.(process. 이거 없이) 윤인성의 Node.js 책을 보다가 예제가 안되길래 찾아보니까 이런 내용이 있어서 포스팅 하게 되었다. 더보기 태그의 class가 바뀌는 것을 catch하여 css 나 기타 내용을 변경하는 경우 12345678910 $(window).on("scroll",function() { if ($("#1stS").hasClass("on")===true) { $("#albumCover").css({"background-image": "url(img/happinessalbum.jpg)"}) } else if ($("#2ndS").hasClass("on")===true) { $("#albumCover").css({"background-image": "url(img/benaturalalbum.jpg)"}) } else if ($("#1stM").hasClass("on")===true) { $("#albumCover").css({"background-image": "url(img/icecreamcake1.jpg).. 더보기 jQuery 구문 몇 개 정리 아래 내용은 인터랙티브 웹디자인북 (최성일 저) 에서 나온 내용을 발췌하여 정리한 것이다. 1. $("선택할 요소") 선택하고 싶은 요소를 넣는다. ex) $("ul li").css({"color":"blue"})$(".red").css({"color":"red"}) 2. animate() 구문은 앞에 stop(). 구문이 와야 한다. 필수는 아니지만 stop() 구문이 없으면 모션이 중첩하여 실행되기 때문에 모션 당시의 animate()만 실행하려면 앞에 stop() 구문이 있어야 한다. ex) $("div").on("mouseenter", function() {$("div").stop().animate({"width":"500px", "height":"500px"},800,"easeOutBounce".. 더보기 로컬 스토리지 이용하여 Life 구현하기 (코드 리팩토링) 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 현재 Life Up Down /*현재 리팩토링 중... 일단 긴 문자들을 변수에 할당하여 보기에 깔끔하게 했다.외부의 큰 if문을 switch 문으로 바꿨다. 그렇게 많이 변한 것 같지는 않다.*/ switch (typeof(Storage) !== "undefined") { case true: let gameLife = () => {return localStorage.getItem("life")} let result = () => {return document.getEle.. 더보기 연화인 문제에 대해서 고찰 앞으로 연화인 문제 관련 떠오르는 것들은 여기 적을 예정임 180224 1. F12 버튼을 누르면 script 소스까지 볼 수 있어서 답이 다 보이는 상황이 있었다. 3회까지 출제하고도 이걸 몰랐다니... 엄청난 충격이다. 다른 프로젝트를 하더라도 script는 개별 js 파일을 만들어서 연결 시키는 것으로 해야겠다. 2. 광고 대신 Up 버튼으로 만족했는데, 그 버튼을 광고창으로 바꿔야 한다. 3. 다음 연화인 문제는 로그인 기능 추가하고 그 로그인 자체에서 생명력을 관리하게 해서 브라우저와 pc나 모바일을 가리지 않고 같은 생명력을 가지게 해야한다. 4. 광고 말고도 생명력은 시간이 지나면 자동으로 차오르게 만들어야 한다. 5. 취소버튼 누르면 탈락이라고 나오는 현상 없애야 한다. 더보기 로컬 스토리지 이용하여 Life 구현하기 게임에서 처럼 Life: 3 이고 잘못된 답을 입력하면 생명력 1이 깎이고 광고를 누르면 생명력이 늘어나는 식의 개념을 구현하고 싶었다. 일단 크게 중요한 것은 아니지만 브라우저를 껐다 켜도 내용의 변화가 초기화가 되면 안되니 로컬 스토리지 기능을 이용하여 구현을 해보았다. 코드는 아래와 같다. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 현재 Life Up Down // Check browser supportif (typeof(Storage) !== "undefined") { if (!localStorage) { localStorage.set.. 더보기 이전 1 2 3 4 다음