Javascript
-
AxiosJavascript/ECMAScript 2015 (ES6) 2022. 9. 28. 20:02
Axios 서드파티 라이브러리로 CDN 혹은 npm 이나 yarn과 같은 패키지 매니저를 통해 설치하여 프로젝트에 추가할 수 있습니다. Axios는 브라우저 혹은 node.js 환경에서 실행할 수 있습니다. 설치하기 NPM을 사용하여 설치 npm install axios Yarn을 사용하여 설치 yarn add axios 그 후 프로젝트에서 import 해야 합니다. import axios from "axios"; 만약 브라우저에서 Axios를 사용한다면 아래와 같이 CDN을 사용할 수 있습니다. 문법 fetch와 문법은 비슷하나, 다양한 방법으로 요청할 수 있습니다. axios(url, { // 설정 옵션 }); HTTP 메서드를 붙일 수도 있습니다. axios.get(url, { // 설정 옵션 })..
-
2. 모듈패턴으로 기존 코드 개선하기 - 견고한 JS 소프트웨어 만들기 | 김정환Javascript/프로그래밍 기법 2021. 9. 2. 17:43
클릭 카운터 모듈 (ClickCounter) : 카운터 데이터를 다루는 모듈 (전역 공간에 있는 counter 변수를 ClickCounter 안에서 관리하자) 첫번째 스펙 "ClickCounter 모듈의 getValue() 는 카운터 값을 반환한다." > git checkout --force ClickCounter-spec-1 두번째 스펙 "ClickCounter 모듈의 increase() 는 카운터 값을 1만큼 증가한다." > git checkout --force ClickCounter-spec-2 beforEach는 it 함수 호출 직전에 실행되는 자스민 함수. describe(() => { beforeEach(() => {})// 1 afterEach(() => {})// 3 it(() => {})..
-
1. TDD 이론 및 패턴 소개 - 견고한 JS 소프트웨어 만들기 | 김정환Javascript/프로그래밍 기법 2021. 8. 31. 13:19
단위 테스트 (Unit Test) 단위(Unit) : 특정 조건에서 어떻게 작동해야 할지 정의한 것 (인풋에 따라 계산한 결과를 아웃풋으로 내놓는 것) ≒ 함수 - 준비, 실행, 단언(결과 검증) 패턴을 따른다. 테스트주도개발(TDD) 1. 적색(Red) 단계 기능을 테스트할 수 있는 테스트 코드를 만든다 ≒ 단위 테스트 2. 녹색(Green) 단계 함수의 기능 코드를 테스트에 통과할 수준으로 작성 3. 청색(Blue) 단계 (리팩터) 추상화, 확장 가능, 중복되지 않는 소프트웨어 공학 원칙에 준수한 코드 작성 > git clone https://github.com/jeonghwan-kim/lecture-develop-fe-with-tdd.git > git checkout -f install-jasmin..
-
Debounce & Throttle | kellis님Javascript/프로그래밍 기법 2021. 4. 1. 11:30
[출처 : kellis.tistory.com] 디바운스(Debounce)와 스로틀(Throttle)은 이벤트를 제어하는 방법으로, 과도한 이벤트의 발생이 성능 저하를 초래하지 않도록 하기 위해 사용합니다. 대표적으로 디바운스와 스로틀을 이용하여 이벤트 발생을 제어하는 기능은 아래와 같습니다. 스크롤 휠을 이용한 지도 확대/축소 검색어 입력시 자동완성 혹은 연관검색어 노출 피드 방식의 데이터 노출 (스크롤링을 통한 데이터 노출) 이벤트 오버클럭(Overclock - 과도한 이벤트 발생)은 리소스 사용량을 과도하게 증가시키기 때문에 성능 문제를 야기하고 사용자 경험을 떨어뜨립니다. 특히 스크롤 이벤트의 경우 이벤트 오버클럭을 발생시키기 쉬운데, 이는 사용자가 스크롤을 빨리 내리면 3초의 간격 내에 몇 천 번..
-
비동기 처리 - 모던 자바스크립트 | 김민준Javascript/ECMAScript 2015 (ES6) 2020. 6. 25. 23:19
[출처 : https://learnjs.vlpt.us] 비동기 처리 다루기 자바스크립트의 동기적 처리와 비동기 처리에 대해서 알아봅시다. 만약 작업을 동기적으로 처리한다면 작업이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없습니다. 그리고 작업이 끝나야 비로소 그 다음 예정된 작업을 할 수 있죠. 하지만 이를 비동기적으로 처리를 한다면 흐름이 멈추지 않기 때문에 동시에 여러 가지 작업을 처리할 수도 있고, 기다리는 과정에서 다른 함수도 호출할 수 있습니다. 그러면, 한번 코드를 보고 이해해봅시다. 연산량이 많은 작업을 처리하는 함수를 만들어보겠습니다. function work() { const start = Date.now(); for (let i = 0; i < 100000..
-
유용한 JS 문법(2) - 모던 자바스크립트 | 김민준Javascript/ECMAScript 2015 (ES6) 2020. 6. 24. 23:43
[출처 : https://learnjs.vlpt.us] spread 일단 spread 문법부터 알아봅시다. spread 라는 단어가 가지고 있는 의미는 펼치다, 퍼뜨리다 입니다. 이 문법을 사용하면, 객체 혹은 배열을 펼칠수있습니다. 예를 들어서 다음과 같은 객체들이 있다고 가정해봅시다. const slime = { name: '슬라임' }; const cuteSlime = { name: '슬라임', attribute: '귀여운' }; const purpleCuteSlime = { name: '슬라임', attribute: '귀여운', color: '보라' }; console.log(slime); // {name: "슬라임"} console.log(cuteSlime); // {name: "슬라임", at..
-
유용한 JS 문법(1) - 모던 자바스크립트 | 김민준Javascript/ECMAScript 2009 (ES5) 2020. 6. 24. 19:16
[출처 : https://learnjs.vlpt.us] Truthy and Falsy Falsy 한 값은 이 외에도 몇개 더 있습니다. console.log(!undefined) // true console.log(!null) // true console.log(!0) // true console.log(!"") // true console.log(!NaN) // true 여기서 NaN 이란 값은 조금 생소하지요, 이 값은 Not A Number 라는 의미를 가지고 있는데요, 보통 NaN 은 문자열을 숫자로 변환하는 자바스크립트 기본함수 parseInt 라는 함수를 사용하게 될 때 볼 수 있습니다. 그리고, 그 외의 값은 모두! Truthy 한 값입니다. console.log(!3); // false c..
-
JavaScript 입문(3) - 모던 자바스크립트 | 김민준Javascript/ECMAScript 2009 (ES5) 2020. 6. 23. 22:53
[출처 : https://learnjs.vlpt.us] 객체 생성자 프로토타입과 클래스에 대해서 알아보기 전에 우선 객체 생성자라는 것을 알아봅시다. 객체 생성자는 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현 할 수 있게 해줍니다. function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; this.say = function() { console.log(this.sound); }; } const dog = new Animal('개', '멍멍이', '멍멍'); const cat = new Animal('고양이', '야옹이', '야옹'); dog.say(); // 멍멍..