FrontEnd/JavsScript
-
React in JS BinFrontEnd/JavsScript 2022. 3. 2. 21:21
마크업을 간단히 테스트해볼 때 JS Bin을 자주 사용하는데, React를 사용하려면 boilerplate가 약간 필요하다. 리액트 세팅은 리액트 홈페이지에서 제공하는 방식을 따르면 편하다. https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html 위 경로의 HTML 텍스트를 JS Bin의 HTML 부분에 복사 붙여넣기하면 바로 편집이 가능하다. script 태그에서 바로 작성하는 것이 불편하다면 JavaScript 탭을 ES6 / Babel로 변경하고, script 태그 내부의 내용을 옮겨오면 된다. 버전이 크게 중요하지 않다면 JS Bin에서 자체적으로 추가하는 방법도 있다. 상단 Add..
-
비동기 흐름 정리 feat. Element.animate()FrontEnd/JavsScript 2021. 5. 3. 23:03
자바스크립트의 Async Flow에는 여러 가지가 있다. 각 flow는 주어진 작업을 병렬로 처리할 것이냐, 직렬로 처리할 것이냐, 인자는 언제 어떻게 넘길 것이냐 등에서 차이를 보이는데, 추상적인 개념이다보니 바로 와닿지 않아서 직접 시각화해보기로 했다. flow 설명은 understanding-node-js-async-flows-parallel-serial-waterfall-and-queues를 참고했고, node의 async 모듈을 이용했다. (큐와 우선순위 큐는 아직 이해가 부족해서 이번 포스팅에서는 생략한다.) 1. Parallel 독립적인 task 여러 개를 병렬적으로 수행하고, 모든 task가 완료되면 최종 callback을 호출한다. 최종 callback에는 각 task의 결과가 전달된다...
-
Throttle: 함수가 주기적으로 실행되는지 확인하기FrontEnd/JavsScript 2021. 4. 17. 00:21
명시적인 리턴값이 없는 경우, 함수가 의도대로 작동하는지를 어떻게 확인할 수 있을까 하는 의문이 생겼다. throttle은 함수와 delay를 인자로 받고, delay 동안에는 실행 요청이 들어오더라도 1회 이상 실행되지 않는 함수를 리턴해준다. 코드를 작성한 후 인자로 들어온 함수가 정말로 특정 시간 동안 실행되지 않는지 여부를 어떻게 확인할 수 있을까를 고민하다가 인자 함수가 실행되면 로그를 찍어주면 되겠다는 생각이 들었다. 잠깐 짚고 넘어가는 throttle과 debounce의 차이 (JavaScript) 쓰로틀링과 디바운싱 안녕하세요. 이번 시간에는 쓰로틀링(throttling)과 디바운싱(debouncing)에 대해 알아보겠습니다. 원래 예정에 없던 강좌이지만 요청을 받았기 때문에 써봅니다. 프..
-
SVG로 Progress-bar 만들기 with JS로 width 변경FrontEnd/JavsScript 2021. 3. 23. 01:28
남은 시간을 진행바로 표시해줘야 하는 상황이 생겼다. CSS에 -webkit-progress-bar 라는 프로퍼티가 있다고 듣기는 했는데 아직 생소해서 이번에는 최대한 아는 걸로 만들어보기로 했다. 시간이 주어지면 (ex 10초) 남은 시간만큼 타임바가 짧아지다가 사라지는 형태다. 큰 아이디어는 이쪽에서 얻었다: ProgressBar 구현하는 3가지 방법 먼저 직선 모양이 있어야하니 svg 태그를 추가한다. 이미지를 잡기 위해서 우선 기본값을 넣어주었다. (Move to 좌표(0, 0) -> Horizontal 가로 좌표(변수) -> Vertical 세로 좌표 10으로 이동 -> 거기서 0으로 되돌아와서 마저 채우기) 그리고 js를 구성한다. 먼저 상수처리. 셀렉터를 가져오고, 시간 제한을 정해준다. c..