자바스크립트 9. 유용한 10가지 배열 함수들. Array APIs 총정리 // Q1. make a string out of an array const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(', '); console.log(result); // Q2. make an array out of a string const fruits = 'apple, banana, cherry'; const result = fruits.split(','); console.log(result); // Q3. make this array look like this: [5, 4, 3, 2, 1] const array = [1, 2, 3, 4, 5]; const result = array.resverse(); console.l..
자바스크립트 13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs 자바스크립트 13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs async & await clear style of using promise :) 1. async function fetchUser() { return new Promise((resolve, reject) => { // do network request in 10secs... resolve('ellie'); }) } 코드 블럭이 자동으로 promise로 바뀜 async function fetchUser() { // do network request in 10secs... return 'ellie' } const user = fetchUser(); user.then(console.log); c..
자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 😱 JavaScript Callback 'use strict'; // javascript is synchronous. 동기적이다. // Execute the code block by order after hoisting. 호이스팅 된 이후부터 작성한 순서에 맞춰 하나하나 동기적으로 실행된다. // hoisting: var, function declaration 함수 선언들이 자동으로 제일 위로 올라가는 것 console.log(1); setTimeout(() => console.log(2), 1000) console.log(3); // Synchronous callback 즉각적으로 동기적으로 실행 function printImmediately(print) { print(); } printImmediately(() => console.log(..
UglifyJs [자바스크립트] 압축(Minify) / 난독화(Uglify) 압축과 난독화 - 서비스에서 공통으로 사용되는 주요 소스 코드들은 별도의 파일로 분리하여 사용 - 코드의 재사용, 캐시 적용, CDN 사용 등의 장점 - 코드 압축은 최소의 노력으로 큰 효과를 볼 수 있는 최적화 방법중 하나. - 파일의 용량이 감소하며, 민감한 코드를 알아보기 어렵게 만들 수 있다 - 경우에 따라서는 스크립트의 수행 속도에도 영향을 미침 - 설정에 따라 압축한 소스로도 디버깅을 위한 Source Maps 기능을 사용 가능. 압축(Minify) 압축은 전체 소스코드 중 아래와 같은 경우를 제거하는 작업을 말합니다. - 불필요한 줄바꿈, 공백 밑 들여쓰기 - 짧게 쓸 수 있는 긴 구문(줄일 수 있는 if 구문, 형 변환 축약 등) - 스코프 내 사용하지 않는 변수 - 주석 - 경우에 따라,..
자바스크립트 8. 배열 제대로 알고 쓰자. 자바스크립트 배열 개념과 APIs 총정리 자바스크립트 8. 배열 제대로 알고 쓰자. 자바스크립트 배열 개념과 APIs 총정리 | 프론트엔드 개발자 입문편 (JavaScript ES6 ) - 한 배열안에는 동일한 타입의 데이터를 넣는 것이 중요 'use strict' // Array // 1. Declaration const arr1 = new Array(); const arr2 = [1, 2,]; // 2. Index position const fruits = ['apple', 'banana']; console.log(fruits); console.log(fruits.length); console.log(fruits[0]); > apple console.log(fruits[1]); > banan console.log(fruits[2]); > u..
Typescript - class ES6에서 새롭게 도입된 클래스는 기존 프로토타입 기반 객체지향 언어보다 클래스 기반 언어에 익숙한 개발자가 보다 빠르게 학습할 수 있는 단순명료한 새로운 문법을 제시하고 있다. 하지만 클래스가 새로운 객체지향 모델을 제공하는 것은 아니다. 사실 클래스도 함수이고 기존 프로토타입 기반 패턴의 Syntactic sugar일 뿐이다. Typescript가 지원하는 클래스는 ECMAScript 6의 클래스와 상당히 유사하지만 몇 가지 Typescript만의 고유한 확장 기능이 있다. 1. 클래스 정의 (Class Definition) ES6 클래스는 클래스 몸체에 메소드만을 포함할 수 있다. 클래스 몸체에 클래스 프로퍼티를 선언할 수 없고 반드시 생성자 내부에서 클래스 프로퍼티를 선언하고 초기화한다. // p..
자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6) 자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6) - Objects - one of the JavaScript's data types. - a collection of related data and/or functionality. - Nearly all objects in JavaScript ar instances of Object - object = { key: value }; 1. Literals and properties const name = 'ellie'; const age = 4; print(name, age); function print(name, age) { console.log(name); console.log(age); } const ell..
자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리 class { 속성 (fields); 행동 (methods); } - 청사진 - template - delcare once - no data in (메모리안에 안들어간다) class를 이용해서 실제 데이터를 넣어서 새로운 인스턴스를 생성하면 object가 된다. object - instance of a class - created many times - data in (메모리안에 들어간다) 'use strict' js파일 제일 위에 써서 모던하게 사용하자. // class: template // object: instance of a class 1. Class declarations class Person { // constructor constructor(name, age) { // fileds thi..
자바스크립트로 공백제거(replace, trim) 자바스크립트에서 문자열의 공백을 제거하고싶을때 상황에 맞게 replace 와 trim 을 이용하여 공백을 제거 할 수 있습니다. replace var a = "가 나 다 라 마 바 사 " a.replace(" ","") //"가나 다 라 마 바 사 " a.replace(/ /g,"") //"가나다라마바사" 위와같이 replace 를 이용하면 공백을 빈값으로 바꾸어 제거하는것과 같은 효과를 볼 수 있습니다. 다만, 문자열의 모든 공백을 제거하기 위해선 정규식을 사용해야합니다. 정규식에서 / /사이의 값을 replace의 두번째 인자값으로 교체가 가능하며, 뒤에붙는 g는 문자열의 모든 / / 사이의 값을 바꿔줍니다. var b = "A가a나A다a" b.replace(/a/g,"") //"A가나A다" b.re..
type 정보들 // 1. Use strict // added in ES5 // use this for vanila javascript 'use strict' // 2. Variable // let (added in ES6) let global = 'global' { let name = 'aaa'; name = 'hello'; console.log(global); } console.log(name); console.log(global); // block scope // global scope - 항상메모리에 탑재, 필요한 부분만 쓰는게 좋음 // var hoisting (어디에 선언했냐에 상관없이 항상 선언을 제일 위로 끌어올려주는 것) // var has no block scope { age = 4; var age; ..
라이브러리 브랜드 그룹 | 찜찜

티스토리툴바