주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

Javascript VS jQuery Javscript API에 비해 jQuery는 선택자를 사용하여 DOM(Document Object Model) 요소에 쉽고 편리하게 접근할 수 있다. // Javascript document.getElementById('container'); document.querySelector('#container'); // jQuery $('#container') 아래는 기초적인 선택자만 작성하였으므로 모든 선택자를 확인하려면 jQuery 사이트 참조 직접 선택자 아이디 (#) id는 페이지내에서 유일해야한다. // Html // jQuery $('#container') 클래스 (.) 동일한 클래스를 가진 복수의 요소가 될 수 있다. // Html // jQuery $('...

Load 이벤트 DOM(Document Object Model)의 Standard 이벤트 화면에 필요한 모든 요소화면에 필요한 모든 요소(*Html, Css, Js, Image, Iframe등)가 브라우저 메모리에 올라간 경우 실행된다. 요소에 문제가 생길 경우 딜레이가 발생할 수 있다. 중복 선언 시 하나만 실행되므로 주의해야한다. $(window).load(function(){ // 코드 작성 }); Ready 이벤트 리소스 상관없이 브라우저가 DOM Tree를 생성한 직후에 실행된다. load 이벤트보다 빨리 실행되며 중복 선언이 가능하며 선언 순서에 따라 실행된다. $(document).ready(function(){ // 코드 작성 }); Load VS Ready 두 이벤트의 차이를 이해하기 위..

몇일 전에 크레인인형뽑기 문제를 풀고 난 후에 다른 사람의 코드에서 reduce 메서드를 사용하는 것을 확인했고 궁금해져서 메서드에 대해 공부해봤습니다. reduce reduce 구문 arr.reduce(callback(acc, cur, curIndex, arr), initVal]); reduce 인자 누적 값(acc) 현재 값(cur) 현재 인덱스 (curIndex) 원본 배열(arr) 그리고 initialValue라는 callback의 최초 acc에 제공하는 누적 값의 초기 값. 만약 초기 값이 없다면 자동으로 누적 값은 원본배열(arr)의 0번째 인덱스 값으로 지정됩니다. 간단한 예제를 보겠습니다. // 초기 값이 없을때 [1,2,3,4,5].reduce((acc, cur, curIndex, arr..

require const React = require('react'); const Example; = () => {}; module.export = Example; import import React from'react'; const Example; = () => {}; export default Example; require는 노드 문법이고 import는 ES6문법이다. 두개를 섞어쓰면 당연히 에러가난다.