javascript 썸네일형 리스트형 Throttle 과 Debounce Throttle 과 Debounce Throttle과 Debounce는 이벤트 핸들러가 많은 연산을 수행하는 경우에 대해 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키기 위해 사용 된다. Throttle은 이벤트를 일정한 주기마다 발생하도록 하며 Debounce는 마지막으로 함수가 호출된 시점에서 특정 시간이 지난 후 한번의 이벤트만 발생하도록 하는 것 위 내용은 구글에 찾아보면 그림으로 친절하게 설명해둔 글이 많으니 참고 const throttleAndDebounce = () => { // (1) let throttleCheck, debounceCheck; return { // (2) throttle(callback, millisecond) { return () => { if (!throttl.. 더보기 리펙토링 [code smell] 리펙토링 마틴파울러 - 소프트웨어에 겉보기 동작은 그대로 유지한채 코드를 이해하고 수정하기 쉽도록 내부구조를 변경하는 기법 3의 법칙 처음에는 그냥 실행해본다 비슷한일을 두번째로 한다면 (중복) 그래도 일단 진행한다. 비슷한일을 세번째 할때 그때가 바로 리펙토링을 할때다. 어떤걸 리펙토링 해야하는가?[code smell] 너무 큰 함수나 클래스 이름이 명확하지 않는 함수나 변수명 지나치게 짧은것보단 명확하게 조금 긴게 더 좋다 중복코드(같은 일을 하는 코드가 여저기저 있으면) 전역변수 과도한 콜백과 중첩된 조건문 과도하게 긴 식별자(너무 긴것도 문제다.) 리펙토링의 방법 함수를 추출하거나 혹은 옮기는 방법 const logPost = (post) => { console.log(post); }; const.. 더보기 자바스크립트 스코프와 클로저 스코프와 클로저 자바스크립트에서 스코프와 클로저는 빠질 수 없는 부분이다.(물론 어떤것도 뺄 순 없지만…) 다른 언어를 접하던 프로그래머들이 다르게 작동하는 자바스크립트의 스코프와 접하기 어려운 클로저 때문에 고생이다. 자바스크립트에서 클로저는 상당히 어려운 부분에 속한다 하지만 이해만하고 익숙해진다면 객체지향 언어보다 유연함을 느낄 수 있을것이다. 스코프(scope) 스코프란 현재 접근할 수 있는 변수들의 범위를 뜻한다 어떠한 변수가 스코프 안에 선언되었으면 해당 스코프 안에서는 변수에 접근해서 읽거나 쓸 수 있고, 스코프 밖에서는 해당 변수에 접근할 수 없다. 스코프에는 크게 두 종류의 종류가 있다. 전역 스코프(global scope) 지역 스코프(local scope) 전역 스코프 (global .. 더보기 [ES2020]Optional Chaining - ?. ES2020에 추가된 문법 Optional Chaining을 공부해보자 optional chaining이 필요해! let user = { name: { first: "jo", last: "seungjin" } } user.name.first // "jo" user.address.street //Uncaught TypeError: Cannot read property 'street' of undefined //&& 연산자로 해결 user.address && user.address.street; //lodash 유틸리티 라이브러리 사용 import { get } from "lodash"; get(user, "address.street"); 위와 같이 자바스크립트에서 . 는 참조가 nullish (null 또.. 더보기 자바스크립트 객체 객체 자바스크립트에서 단순한 데이터 타입은 (숫자, 문자열, 블리언(true/false), null, undefined)가 있다. 이들을 제외한 다른값은 모두 객체이다. 하지만 이들은 값이 정해지면 변경할 수 없다. 자바스크립트의 객체는 변형 가능한 속성들의 집합이다. 자바스크립트에서는 배열, 함수, 정규 표현식, 객체 등 모두 객체이다. 객체는 이름과 값이 있는 속성들을 포함하는 컨테이너 라고 할 수 있다. 속성의 이름은 문자열이면 모두 가능하다. (빈 문자열도 포함) 속성의 값은 undefined를 제외한 자바스크립트의 모든 값이 사용 될 수 있다. 자바스크립트의 객체는 클래스가 필요 없고, 새로운 속성의 이름이나 값이 어떠한 제약 사항이 없다. 객체는 데이터를 한 곳에 모으고 구조화 하는데 유용하다.. 더보기 리엑트로 구구단게임 만들기 React - Zerocho (webGame) 2.구구단 리액트로 구구단 게임을 만들어보자! 아래 내용은 zeroCho님의 강좌를 기본으로 합니다. 리액트에서는 바뀌는 부분을 state로 한다. 바뀌는 부분을 이해한다는건 리액트에서 굉장히 중요하다. 구구단 게임에서 바뀌는것을 생각해보자 문제 부분( 5 곱하기 4 는?) 에서 5부분 과 4부분 사용자가 답을 입력할 인풋 그리고 문제 결과를 알려줄 '정답' 과 '땡' 부분 (1)5 곱하기 4 는? (2) 입력 (3)"땡","정답" 바뀌는 부분을 state에 넣어보자 constructor(props) { super(props); this.state = { first: Math.ceil(Math.random() * 9), second: Math.ceil(Mat.. 더보기 05 - Flex Panels image gallery 5번째 강의시간에는 CSS의 Flex를 통해서 이미지 갤러리를 만들어보는 시간이다. CSS에 Flex는 한국에서는 거의 사용하기 힘든 속성이다. 왜냐면... 익스플로러 상위버전에 사용 가능하기 때문에사용하기 쉽지 않다.그래도 알아두어야 나중에나 응용을 할 수 있기때문에 안쓴다고 해서 넘어가지 말자.https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90 MDN에서 css flex를 찾아본 결과이다. 자세히 나와있으니 모르시는 분들은 한번씩 읽어보면 좋을꺼 같다.자바스크립트의 토글을 이용해서 클라스를 추가하고 제거하고를 이용해서 효과를 주고 .. 더보기 checked를 사용하여 ckeckbox 조건걸기 checked를 사용하여 ckeckbox 조건걸기1234567891011121314151617 $(".last_btn").on("click", function (e) { if ( document.getElementById("check_box_01").checked != true ) { alert("1번 체크를 해주세요."); return false; }; if ( document.getElementById("check_box_02").checked != true ) { alert("2번 체크를 해주세요."); return false; }; if ( document.getElementById("check_box_03").checked != true ) { alert("3번 체크를 해주세요."); retur.. 더보기 이전 1 2 다음
