이번에는 template literals 에 대해 알아보겠다. 기존 문자열 표기법은 이중 따옴표(") 또는 작은 따옴표(')를 이용하였다. 하지만 ES6 부터는 templete literals 라는 새로운 문자열 표기법이 도입되었다. templete literals 는 백틱(`) 이라는 문자를 사용하여 표기한다. // ES5var text = 'string text'; // ES6const text = `string text`; // ES5console.log('string text line 1\n' + 'string text line 2');// "string text line 1// string text line 2" // ES6console.log(`string text line 1string te..
arrow function에 대해서 머리속으로 정리해보고자 합니다. 이번 시간에도 마찬가지로 arrow function(ES6) 이 나오기 전 어떤 현상이 있었고 그 현상을 어떻게 해결 했는지에 대해 이야기 하겠습니다. arrow function이 나오기 전에 우리는 느꼈을 수도 있지만 메소드 안에 함수를 만드는게 매우 어려웠을 것이다. 바로 this 때문이다. 일단 아래의 예제를 보자. function Person() { this.age = 0; console.log(this); // Person { age: 0 } setTimeout(function growUp() { console.log(this); // window this.age++; // NaN }, 1000);} var p = new Per..
ES6 이전에는 변수를 선언하는 방법은 var 를 이용하는 방법 밖에 없었습니다. 하지만 var 에 대한 여러가지 문제들로 인해 고통을 너무 많이 받았습니다. 그 동안 고통받았던 문제들에 대해 이야기 나눠보고 시작해야겠죠 ? var 의 문제점들에 대해서 이야기 해보겠습니다. 1. var 로 변수 선언 시 var 키워드 생략 가능 chicken = 'nice'; console.log(chicken); // nice 2. var 로 변수 선언 후 중복 선언 가능 var chicken = 'nice'; console.log(chicken); // nice var chicken = 1; console.log(chicken); // 1 3. 변수가 선언도 되지 않았는데 참조 가능 (변수 호이스팅) console...
Basic Types (기본 유형)소개프로그램을 유용하게 사용하려면 number, string, structure, boolean 등 가장 간단한 데이터 단위로 작업을 할 수 있어야합니다. TypeScript에서는 JavaScript와 같은 타입들을 지원합니다. 편리한 열거 형을 사용하여 상황을 돕습니다. Boolean가장 기본적인 데이터 타입은 boolean 값이며, true / false 값입니다. // Type: booleanconst isBoolean: boolean = false; NumberJavaScript와 마찬가지로 TypeScript의 모든 숫자는 부동 소수점 값입니다. TypeScript는 부동 소수점 숫자의 형식을 16 진수 및 10 진수, ES5에 도입 된 2 진수 및 8 진수를 ..
우리는 작업을 하다보면 많은 값들을 찾고 그 상황에 맞게 값을 변경 또는 삭제를 한다. ES5에서는 주로 Array.prototype.foreach(), Array.prototype.map(), Array.prototype.filter() 를 사용하여 특정 또는 전체 값에 대한 처리를 했다. 처리를 하는 도중 이 모든 함수는 한 배열 안에 있는 모든 데이터를 확인 한 후 변경 및 삭제를 한다. 하지만 이들의 단점 아닌 단점은 어떤 하나의 특정 값만 바꾸려고 하는데 모든 데이터를 확인 한다는 점이다. 배열이 작을 때는 속도 차이가 크게 없지만 배열의 데이터가 클 때 아무래도 모든 데이터를 확인하면서 처리하다 보니 속도가 낮아지는 현상을 볼 수 있다. 그래서 어떤 하나의 값만 찾아서 값을 변경 할 때 ES6..
Angular 2+ 프로젝트를 3개 이상 진행해보면서 수백번 빌드하여 배포를 했었다.기본적인 빌드 방법 및 지식은 알고 있었지만 조금 더 파해쳐보고 싶어 다시 한번 머리속으로 정리할겸 포스팅을 시작한다. Angular 에서 빌드 시 JIT, AOT로 빌드를 할 수 있다. 기본 세팅으로는 Angular CLI로 빌드 시 JIT 방식으로 빌드를 한다. 하지만 수많은 사람들이 JIT 방식보다는 AOT 방식을 많이 선호하고 사용한다.그 이유에 대해서 알아보자. JIT (Just In Time) 란 ?프로그램을 실제 실행하는 시점에 기계어로 번역하는 컴파일하는 방식-> 브라우저에 필요한 바이너리를 스스로 이해하지 못하기 때문에 브라우저가 필요하고 필요함에 있어서 JavaScript 파일을 로드하면 해당 바이너리로..
이번에는 모바일에서 헤더 색 변경하는 방법에 대하여 알아보겠습니다.저는 헤더 색은 기존 맨위에 있는 색에 따라 변경되는 줄 알았는데 찾아보니 직접 변경할 수 있다는 사실을 알게되었습니다. 1. Chrome, Firefox OS, Opera 색 변경 태그를 영역에 추가시켜주면 됩니다. 2. IOS Safari 색 변경위와 똑같이 태그를 영역에 추가시켜주면 됩니다. content 속성에 아래와 같은 옵션을 넣을 수 있습니다. 옵션 1 : default - 기본 스테이터스 바 옵션 2 : blue - 파랑으로 색 변경 (모든 색 가능) 옵션 3 : blue-translucent - 투명한 파랑색으로 변경 (모든 색 가능) 이상으로 오늘 포스터는 마치겠습니다 다들 즐거운 해피코딩 하세요 ~
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 리엑트
- 웹사이트
- useState
- 깃헙
- virtual dom
- react
- Es5
- 클래스형 컴포넌트
- Prototype
- useEffect
- 클래스 컴포넌트
- window
- 가상돔
- Angular
- JavaScript
- HTML
- string
- scope
- class component
- Function Component
- 함수 컴포넌트
- this
- TypeScript
- website
- github
- array
- Let
- const
- NestJS
- ES6
- Total
- Today
- Yesterday