자바스크립트에서 랜덤 컬러값을 가져오는 함수를 만들어보자. 색상값은 rgb 혹은 hash값을 주로 사용하는데 내가 작성한 함수는 해쉬값을 랜덤으로 가져오는 함수이다. // 랜덤 컬러 생성 const setRandomColor = () => { const randomColor = Math.floor(Math.random()*16777215).toString(16); setPreview('bg-color', '#' + randomColor) } Math.random()은 0 이상 1 미만의 난수를 생성 hex 컬러의 FFFFFF에 해당하는 숫자 16777215를 곱한다. Math.floor()를 사용 소수점 이하를 제거하고 정수로 만든다. 0부터 16777214 사이의 랜덤한 숫자를 만들고나면 이걸 .toS..

자바스크립트에서 부정적인? 네거티브한 늬앙스를 풍기는 값으로 null과 undefined가 있다. 사실 깊게 설명하면 자바스크립트 '값'이란 무엇인지 부터 설명해야하지만 ( 모던자바스크립트 딥다이브 발행글 참고) 간단하게 개념만 설명해보자면 다음과 같다. " 초오오오 심플 그냥 내가 이해한대로 설명하는 JavaScript 개념!! " Null 아무 것도 없는 상태 즉, 변수에 아무 값도 할당되지 않은 상태 Null은 저절로 생겨나지 않는다.. 빈 박스에.. 정성껏 박스테이프를 발라서.. 튼튼하게 포장을하고 텅빈박스라고 적는게.. 굳이굳이 텅빈박스라고 명시하기위해 만드는거 아니면 할 필요가 없지 않을까...? Null은 명시적으로 비어있는 상태를 표기하기 위함!! Undefined 아직 결정을 내리지 않은..

1666-0000 이렇게 작성된 버튼을 두고 클릭할 경우 전화번호로 연결되도록 한 상황에서 배포하고 모바일 환경에서 확인해보니 왠걸 IOS 크롬 브라우저에서 어이없는 밑줄이 나타났다. (너무 얼탱 없어서 캡처도 헐었네..) 여러 기기로 확인해보니 안드로이드 기기와 사파리에서는 괜찮고 IOS 크롬 브라우저에만 밑줄이 나타나고 있었다. ios에서는 사용자를 위해서 웹 페이지에 전화번호, 이메일, 주소 형태가 있으면 밑줄을 추가해준다. → 사용자 편의성 때문에 전화번호나 이메일 주소 텍스트를 발견하게 되면 클릭할 수 있는 링크정보임을 명확히 하기 위해 언더라인이 추가 된다는데.. 해당 정보를 알게 되었음에도 사파리는 괜찮은데 chrome 브라우저만 문제가 나타나길래 다른 원인이라고 생각했다. 계속 검색 중에 ..

Less란 무엇인가? (공식 문서에 따르면) Less(Leaner Style Sheets의 약어)는 이전 버전과 호환되는 CSS용 언어 확장입니다. 이것은 언어인 Less와 Less 스타일을 CSS 스타일로 변환하는 JavaScript 도구인 Less.js에 대한 공식 문서입니다. css의 불편함을 보안해서 변수를 사용함으로서 유지보수 편리, 중첩 선언으로 반복되는 코드 감소, 선언된 스타일을 재사용하는 등등등.. 의 역할을 해주는 확장된 언어이다. .less 확장자를 사용하지만 브라우저는 .less를 인식할 수 없으므로 Less 문법에 따라 작성한 .less를 .css로 변환해주거나 (전처리기 사용), 혹은 자바스크립트 소스단에서 바로 .less를 링크로 연결해서 사용할 수 있다. https://les..

this와 아이들 (apply, call, bind) apply, call, bind는 지난 자바스크립트 실행컨텍스트 글 this bind에서 다루었다. 그럼에도 다시 글을 쓰는 이유는 call과 apply는 기본적으로 Function.prototype의 메서드이며 this를 바인딩하는 기능이 있지만 기본적으로 함수를 호출하는 메서드 이기 때문이다. Function.prototype.apply/ Function.prototype.call this로 사용할 객체와 함께 호출할 함수의 인수를 전달한다. /** * apply * @param {} this로 사용하고자 하는 객체 * @param [arg1, arg2, ...] 함수에게 전달할 인수 목록 */ /** * call * @param {} this로 ..

자바스크립트 this 보통 객체지향언어에서 this는 클래스를 정의한 인스턴스 그 잡채를 의미한다! 그런데 자바스크립트의 this는 그때그때 상황별로 의미하는 바가 달라진다. (엉뚱한 JS엔진이다!) 우리.. this 는요.. 실행컨텍스트가 생성(Create)될 때 결정(bind)된다. 기본적으로 전역공간에서는 런타임환경에 맞는 전역객체를 가르킨다. 함수와 메서드의 비교 자바스크립트의 this는 상황별로 달라지게 되는데 이를 이해하기 위해서 함수와 메서드를 구분해서 이해할 필요가 있다. 공통점 : 기능을 수행한다. 차이점 : 함수는 독립적이지만 메서드는 반드시 객체에 종속되어 동작한다. 함수와 메서드의 this바인딩 비교 function logThis (lineNum){ console.log("call ..