DEVLOG

눈으로 보여지는걸 만드는게 좋아서 선택한 길이다보니 이왕 하는거 제대로 만들어보자!하는 생각이 들었다. 그래서 인터렉티브한 웹을 만드는데 기본이 되는 html5 캔버스에 대해서 공부해보려고한다. 사실 빠르게 이미 만들어진 예제의 코드를 분석해고 이것저것 해볼까 했지만........... 그냥 기본부터 차근차근 쌓아나가기로 했다! Canvas API란? JavaScript와 HTML 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다. Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. WebGL API 또한 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그립니다. => 즉..

jQuery의 .append()를 아시나요..? 제가 참 좋아하는데요 ㅠ,ㅠ jQuery가 점점 줄어들고 순수자바스크립트의 중요성이 강해지면서 자바스크립트를 이용하는 방법을 알아볼까나요! 그 전에... append는 요소를 추가하는건데 왜 텍스트변경하는걸 알아보는거지?라고 생각할 수도 있는데 append()는 JS에서 '태그생성+내부텍스트변경+부모요소 밑으로 태그추가' 단계를 한번에 수행할 수 있도록 만들어준 jQuery문법이다. 그렇기 때문에 이를 순수자바스크립트로 구현하려면 이 세단계를 다 알아야한다는 뜻! var a = document.createElement("div"); //1. 태그 생성 /****2. 텍스트추가****/ document.querySelector("부모요소").appendChi..

📖 목차 스크립트를 위쪽에서 불러오면 요소를 찾지 못하는 오류를, 아래쪽에서 불러오면 느린 로딩속도 등의 이유로 우리는 스크립트 내에서 페이지로드 후 불러오는 함수를 사용하곤 한다. 대표적으로 js구문의 window.onload와 jQuery구문의 document.ready를 많이 사용할텐데 이 둘에 대해서 알아보고 이 외에 또 어떤것들을 사용할 수 있는지 알아보자! window.onload() 대표적인 속성인 window.onload는 HTML의 모든 태그를 불러온 후 코드내에 onload가 있을 경우 읽어낸다. 또한 js, css까지 모~~두 읽은 후에 실행이 되기 때문에 매우매우매우 느릴 수 있다는 단점이 있다. 또한 onload를 사용하면 가장 마지막에 실행된 onload함수만 실행하게 되는데 물..

JS의 다양한 메소드를 만나보자 (2편) Array. forEach find findIndex includes indexOf sort join String. replace substring split 배열관련 ● forEach : 주어진 함수를 배열 요소 각각에 대해 실행한다. 내 생각에는 밑에서 다루게 될 모든 메소드의 베이스가 되는 메소드인 것 같다. 배열.forEach(function(현재값[, index]){}); products.forEach(function(product,i){ console.log(product.id); } ● find : 배열 안을 돌면서 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. : 만족하는 요소가 없다면 undefined 반환 배열.find(functi..