비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있도록 하는 자바스크립트의 표현식이다. 쉽게 말하면 배열 혹은 객체 안의 값을 편하게 꺼내 쓸 수 있도록 해 주는 문법이라는 것이다. 객체의 비구조화 할당 우선 아래의 예시에서부터 시작해 보자.const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨'};const captainAmerica = { name: '스티븐 로저스', actor: '크리스 에반스', alias: '캡틴 아메리카'};function print(hero) { const text = `${hero.alias}(${hero...

보통 서버에 데이터를 전송하기 위해 아래와 같이 HTML5의 을 이용해 구성하여 제출해 본 경험들이 있을 것이다. 아이디 비밀번호 성별 남자 여자 응시분야 영어 수학 이처럼 보통은 HTML5의 을 이용해 input 값을 서버에 전송하지만 자바스크립트에서는 FormData()를 이용해 동일하게 스크립트로도 전송할 수 있다. 즉 FormData란 HTML이 아닌 자바스크립트 영역에서 폼 데이터를 다루는 객체라고 할 수 있다. 그리고 HTML에서의 submit 제출 동작은 Ajax를 통해 서버에 제출하는 것으로 이해할 수 있다.let formData = new FormData(); // new FromData()로 새로운 객..

&& 연산자의 조건문 표현자바스크립트의 AND 연산자(&&)는 양쪽 피연산자가 모두 true일 때 true를 반환하고 그렇지 않을 때에는 false를 반환한다. 이러한 특성을 이용하여 자바스크립트의 if문을 한 줄로 단축시킬 수 있다.if (num !== 0) { console.log('num is not zero');}num !== 0 && console.log('num is not zero'); // if를 없애고 && 연산자로 한 줄로 단축num === 0 || console.log('num is not zero'); // || OR 연산자로도 가능하다. 이 때는 첫 번째 식이 false일 때만 다음 식이 실행됨&& 연산자와 소괄호 표현그런데 console.log()와 같은 함수 호출이 아닌 연산..

클로저에서든 어디서든 자바스크립트를 사용하다 보면 간혹 함수 자체를 반환하는 함수를 보게 되는 경우가 있다. function hello() { return function world() { return 'hello world!'; }}const a = hello(); // function world 아니 뭐 대략 원리는 알겠다. 사용법도 알겠다. 그런데 대체 이러한 기법이 어디에 쓰이는 걸까? 왜 값을 반환하면 되는 걸 굳이 함수 안에 함수를 리턴시키는 건지? 지금부터 return function { ... }에 대한 실용 기법을 알아보자. 일반적인 이벤트 콜백 함수 등록 방법 여기 버튼이 3개 있는 웹 문서가 있다. C1 C2 C3 이제 저 3개의 버튼마다 다음과 같이 이벤..

이번 글에서는 여러 상황에서 자바스크립트 조건문을 보다 더 잘 활용하는 방법에 대해 알아보려 한다. 특정 값이 여러 값 중 하나인지 확인할 때 만약 어떤 값이 여러 값들 중 하나인지 확인해야 하는 상황이 생겼다고 가정해 보자. 그렇다면 우선 아래와 같은 시도를 해 볼 수 있을 것이다. function isAnimal(text) { return ( text === '고양이' || text === '강아지' || text === '거북이' || text === '너구리' );}console.log(isAnimal('강아지')); // trueconsole.log(isAnimal('휴대폰')); // false 이러한 코드는 비교해야 할 값이 많아질수록 길어진다. 이를 간단하게 해결할 수 있는..

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 쉽게 말해서 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 Ajax와 더불어 사용하는 것. 이미 자바스크립트에서는 Fetch API가 있지만 프레임워크에서 Ajax를 구현할 땐 Axios를 쓰는 편이라고 볼 수 있다.    Axios 특징운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용.Promise(ES6) API 사용요청과 응답 데이터의 변형HTTP 요청 취소HTTP 요청과 응답을 JSON 형태로 자동 변경  Axios vs FetchAxiosFetch써드파티 라이브러리로 설치 필요현대 브라우저에 빌트인이라 설치 불필요XSRF 보호해 ..