&& 연산자의 조건문 표현자바스크립트의 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 보호해 ..

innerHTML, innerText, textContent는 DOM 요소의 콘텐츠를 읽어오고 설정할 수 있다는 점에서 비슷해 보이지만 조금씩 차이가 있다. 속성HTML 태그 처리숨겨진 요소의 텍스트보안(XSS)innerHTMLHTML 태그로 렌더링가져올 수 있음설정할 수 있음위험 가능성 큼innerText단순 텍스트로 변환하여 렌더링가져올 수 있음설정할 수 있음상대적으로 안전textContent단순 텍스트로 변환하여 렌더링가져올 수 없음설정할 수 있음상대적으로 안전    innerHTMLinnerHTML은 element의 속성으로 element 내에 포함된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다. 즉, innerHTML을 사용하면 내부 HTML 코드를..

지난 포스트에서 이벤트 버블링(bubbling)에 대해 소개한 바 있다. [Javascript] 이벤트 버블링버블링(bubbling)의 원리는 간단하다. 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작한다. 이러한 과정이 가장 최상단의 조상 요소를 만날developing-move.tistory.com   이벤트에는 버블링 외에도 캡처링(capturing)이라는 흐름이 존재한다. 실제 코드에서는 자주 쓰이지 않지만 종종 유용한 경우가 있으니 알아보도록 하자. cf) 캡처링 단계를 이용해야 하는 경우는 흔치 않기 때문에, 캡처링에 관한 코드를 발견하는 일은 거의 없을지도 모른다. 표준 DOM 이벤트에서 정의한 이벤트 흐름에는 아래의 3가지 단계가 있다. 캡처..