devOhzl

숫자 📌 .toFixed() 숫자를 지정된 고정 소수점 표기(자릿수)까지 표현하는 문자로 반환한다. 숫자로 활용하기 위해서는 숫자로 변환해야한다. (ex. parseFloat) const num = 3.1415926535 console.log( num.toFixed(2) )// '3.14' console.log( parseFloat(num.toFixed(2)) )// 3.14 📌 .toLocaleString() 숫자를 현지 언어 형식의 문자로 반환한다. 👉 숫자에 쉼표 붙이는 작업할 때 많이 사용 const num = 1000000 console.log( num.toLocaleString() )// '1,000,000' console.log( `${num.toLocaleString()}원` )// '1,..

📌 .includes() 대상 문자에 주어진 문자가 포함되어 있는지(불린) 확인한다. 대소문자를 구분한다. const str = "Hello world!" console.log(str.includes('Hello'))// true 두번째 매개변수에 숫자로 몇 번째 인덱스 번호부터 문자가 들어있는지 확인한다. const str = "Hello world!" console.log(str.includes('Hello',1))// false 📌 .indexOf() 대상 문자에 주어진 문자와 일치하는 첫 번째 인덱스(숫자)를 반환한다. 일치하는 문자가 없으면 '-1'을 반환한다. const str = "Hello world!" console.log( str.indexOf('world'))// 6 console.l..

Vue2는 인스턴스화된 애플리케이션을 지원하지 않았다. 따라서 Vue 2의 전역 API들은 생성된 모든 Vue 인스턴스들에 상태를 공유했다. 전역 컴포넌트를 만들거나, Vue.component('button-counter', { data: () => ({ count: 0 }), template: 'Clicked {{ count }} times.' }) 전역 디렉티브를 만들었다. Vue.directive('focus', { inserted: el => el.focus() }) 👉 동일한 Vue 생성자에서 생성된 모든 루트 인스턴스는 동일한 전역 구성을 공유한다. createApp createApp을 호출하면, Vue 3의 새로운 개념인 앱 인스턴스(app instance)가 반환된다. 경험상 Vue의 동작..

변수가 반응성을 가지기 위해서는 프록시로의 변환이 필요하고, 반응성을 해제하기 위해서는 프록시에서 일반 변수로의 변환이 필요하다. 반응성 관련 API reactive 객체의 속성들이 반응성을 갖게 만든다.기본적으로 변수가 반응성을 갖도록할 때는 ref 함수를 이용하는데, 객체의 속성으로 변수를 모아 reactive를 사용하면 변수의 개수가 많을 때 매우 유리하다. readonly 일반 객체나 프록시 객체를 읽기전용 프록시로 변경한다. 기본적으로 객체 모든 속성을 읽기전용으로 변경 isProxy 인자로 들어온 변수가 reactive나 readonly 등으로 만들어진 프록시 객체인지 확인해준다. isReactive reactive로 생성된 프록시 객체인지 확인해준다. isReadonly readonly로 생..

자바스크립트는 정확하게 클래스 기반 언어는 아니고 프로토타입 기반 언어이다. 하지만 개념과는 상관없이 클래스 방식을 사용할 수 있다. 프로토타입 ( prototype ) new 키워드를 통해서 만드는 생성자 함수에서 반환된 결과, 즉 인스턴스에서 쓸 수 있는 별도의 속성이나 혹은 메소드를 등록하는 객체 const fruits = new Array('Apple', 'Banana', 'Cherry') Array.prototype.test = function() { console.log(this) } fruits.test() 1️⃣ 중괄호 기호를 사용한 리터럴 방식으로 객체 데이터 생성 const test = { firstName: 'Aeri', lastName: 'Kim', getFullName() { re..

선언과 표현 , 호이스팅 📌 함수 선언문 ( Declaration ) function hello() { } 📌 함수 표현식 ( Expression ) 변수의 이름을 지정하고, 할당 연산자를 통해 function 키워드로 시작하는 함수를 할당한다. const hello = function() { } 📌 호이스팅 ( Hoisting ) 함수의 선언부가 유효한 범위 안에서 제일 꼭대기로 끌어올려서 동작하는 현상 hello()// hello function hello() { console.log('hello') } ⭐ 호이스팅 현상은 함수 선언문에서만 발생하고 함수 표현에서는 발생하지 않는다. hello()// hello is not defined const hello = function() { console...

Nullish 병합 연산자 📌 AND / OR 연산자 1️⃣ && : 제일 먼저 만나는 false를 반환 , 모두가 true 이면 가장 마지막 데이터 반환 2️⃣ || : 제일 먼저 만나는 true를 반환 , 모두가 false 이면 가장 마지막 데이터 반환 console.log('a' && 0)// 0 console.log('a' && 'b' && 'c')// c console.log(0 || 7)// 7 console.log(0 || 8 || 9 )// 8 📌 Nullish 연산자 &&, || 연산자와 동일하게 왼쪽에서 오른쪽으로 해석하지만, null ,undefined 를 제외한 먼저 만나는 데이터를 반환한다. 모두 null 또는 undefined면 가장 마지막 데이터 반환 console.log(0 ..

Node.js 란 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 👉 자바스크립트가 동작할 수 있는 환경 Chrome V8 JavaScript 엔진 - 자바스크립트의 문법을 해석하고 실제도 동작시켜주는 엔진 런타임 - 프로그래밍 언어가 동작하는 환경 자바스크립트가 동작할 수 있는 환경 1. NodeJS가 설치되어 있는 컴퓨터 환경 2. 웹 브라우저 (Chrome) → 웹페이지를 개발하기 위해 도움을 받는 용도로 NodeJS를 사용한다. 📌 FrontEnd 개발환경 기본적으로 웹 브라우저는 HTML, CSS, JS 만 동작을 한다. 하지만 순수하게 HTML, CSS, JS로만 개발을 하는 것은 힘드므로 개발을 도와주는 여러가지 모듈을 설치해야한다. 이 모듈들은 실제 브라우저..

미디어 쿼리 ( Media Query ) 미디어 쿼리는 단말기의 유형, 화면 해상도, 뷰포트 너비 등에 따라 사이트의 스타일(CSS)을 적용할 수 있다. @media 타입 and (기능) { 스타일 } 📌 미디어 타입 all : 모든 장치 (기본값) screen : 스크린 화면 print : 인쇄 결과물 및 출력 미리보기 타입을 기본값 all로 지정한다면 all and 생략 가능 👉 @media (기능) { 스타일 } 📌 기능 - BreakPoint (중단점) BreakPoint가 많을수록 관리하기 어렵다. width max-width min-width height max-height min-height orientation - portrait :세로로 긴 형태 ( x < y ) - landscape :..

⚡ Vue 3 는 Composition API가 아니다 ! Vue2에서도 동일하게 Composition API를 사용할 수 있다. Vue 2 플러그인 👉 Vue 3 API 레벨로 진화 https://vuejs.org/guide/extras/composition-api-faq.html Composition API FAQ | Vue.js Haven't migrated to Vue 3 yet? Explore Never-Ending Support for Vue 2 by HeroDevs Learn more vuejs.org ⚡ Vue vs React 1️⃣ Vue - Reactivity (반응성) 반응성을 기반으로 데이터가 변했을 때 화면을 변화시킨다. State 변화를 통해 화면을 갱신시킨다. 2️⃣ React..