[JS] 유사 배열, 연관 배열에 관해서
·
Reference/용어 사이트
자바스크립트 - 유사 배열, 연관 배열 이란? 자바스크립트 객체란? 자바 스크립트의 객체의 프로퍼티 명을 키, 프로퍼티의 값을 값이라고 합니다. 객체 리터럴이 다중값 데이터 표현으로써의 객체라고 할 수 있습니다. 자바스크립트의 연관배열 일반적으로 숫.. jw910911.tistory.com
[JS] 모듈 패턴
·
Reference/용어 사이트
객체 리터럴 방식이 싱글톤 패턴이라고 해서 다른 패턴이 되지 말라는 법은 없다. 즉 동일한 코드를 어떤 관점에서 보는가에 따라 다양한 패턴이 될 수 있다. 객체 리터럴이 하나의 객체라는 점에서 싱글톤 패턴이라고 할 수도 있고, 독립된 모듈이라는 점에서 모듈 패턴의 하나라고도 할 수 있다. module pattern (모듈패턴) #1 Module Pattern 모듈 패턴을 알아보기 전에 네임스페이스란 용어부터 짚고 넘어가 보겠습니다. 네임스페이스란 수많은 함수, 객체, 변수들로 이루어진 코드가 전역 유효범위를 어지럽히지 않고, 애플리케이션이나.. webclub.tistory.com
[JS] Scope와 Closer에 대해서 쉽게 잘 설명한 곳
·
Reference/용어 사이트
어렵게 받아들이지 말고 쉽게 쉽게 생각하자.. Scope: 유효범위 Closer: 외부함수가 파기되었음에도 불구하고 내부함수에서 외부함수에 접근할 수 있는 것 Lexical Scoping: 내부함수가 외부함수에 접근 하려고 하는 것 [번역] 자바스크립트 스코프와 클로저(JavaScript Scope and Closures) 본 글은 JavaScript Scope and Closures by Zell Liew의 번역 글입니다. medium.com
[JS] 자바스크립트 메모리 관리에 관한 글
·
Reference/유용한 사이트
더보기 https://engineering.huiseoul.com/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%98%EB%8A%94%EA%B0%80-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EA%B4%80%EB%A6%AC-4%EA%B0%80%EC%A7%80-%ED%9D%94%ED%95%9C-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%88%84%EC%88%98-%EB%8C%80%EC%B2%98%EB%B2%95-5b0d217d788d 자바스크립트는 어떻게 작동하는가: 메모리 관리 + 4가지 흔한 메모리 누수 대처법 How..
Slider & Drag N Drop
·
활동/개인 프로젝트
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.13.에 작성된 글입니다. View 위의 작품들은 전부 Grid를 이용해서 만들어 봤다. 그냥 이런것들을 구현하는데 굳이 jQuery를 사용해야 되나 궁금해서 만들어 봤다. jQuery는 구현을 쉽게 할 수 있도록 도와주지만 나는 개인적으로 Vanilla JS를 지양하기 때문에 조금 거부감이 든다. 그래서 아직 jQuery를 공부함에 있어서 조금 망설임이 있다. 물론 Ajax와 같이 복잡한 기능을 구현하기 위해서는 생산성이 좋은 jQuery가 좋겠지만.. 아직은 잘 모르겠다. Drag N Drop은 drag 이벤트에 대한 지식이 없어서 조금 공부를 했어야 했다. 다음엔 drag 이벤트를 이용해서 옷 입히기 같은걸 만들어 봐도 재밌겠다는 생각이 들었다. l..
Cartoon Bubble + ect.
·
활동/개인 프로젝트
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.10.에 작성된 글입니다. View 디자인은 흰색바탕에 검은색 테두리를 주면 카툰느낌이 나길래 한 번 해봤다. 이번 작품을 만들어 보면서 자바스크립트로 Canvas를 사용할 때 함수들을 어떻게 관리해야 하는지, 브라우저와의 충돌판정은 어떻게 구현할 수 있는지 등 다양한 방법을 알게 된 것 같다. link Cartoon Bubble jeongwoo903.github.io 알게 된 것 HTML5 Canvas Tutorial for Beginners 필기 HTML5 Canvas Tutorial for Beginners - Chris CoursesYoutube에 있는 HTML5Canvas 강의 인... blog.naver.com ect.
Snake Game
·
활동/개인 프로젝트
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.5.에 작성된 글입니다. View Canvas를 이용해서 처음으로 게임을 한 번 만들어 봤다. 이번 작품을 만들면서 가장 크게 느낀것은 Canvas는 Javascript의 사용이 뛰어나야 한다는 것이랑 멋진 걸 만들고 싶다면 수학을 잘해야 한다는 것이였따.. (특히 삼각함수) 또 사람들이 ES6가 나왔음에도 ES5 문법을 자주쓰는 이유를 안 것 같다. 바로 this랑 scope chain 때문이 아닐까 싶다. var 유효범위가 함수지만, const랑 let은 블록({ })기준이기 때문에 좀 더 까다로운 맛이 있는거 같다. 빨리 ES6를 연습해야 하는데.. 날잡고 해야겠다. link Snake Game jeongwoo903.github.io 알게 된 것​ ..
Window
·
활동/개인 프로젝트
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.4.에 작성된 글입니다. View HTML5 Canvas 연습작으로 만들어 보았다. 아직 Canvas로 인터렉션을 구현하는건 조금 어려운 것 같다..;; 아직은 어떻게 사용해야 할지 이게 맞게 한건지 잘 모르겠지만 계속 공부해 봐야겠다. PixiJS 라는 신박한 것도 있던데 한 번 공부해 보고 싶다. Link Window jeongwoo903.github.io 알게 된 것 ​ 1. 브라우저의 Width나 Height 값을 알고 싶다면 다음 코드를 이용하자. window.innerWidth; window.innerHeight; 2. Canvas Gradation 사용법 const grd = context.createLinearGradient(startX, ..