ES5 에는 원시 타입(primitive data type)인 Boolean, undefined, Number, String, null 그리고 객체 타입(object type)인 Object 를 가지고 있었다. ES6 부터 새로운 친구 Symbol 타입이 생겼다. Symbol 타입에 대해 알아보자. Symbol 생성Symbol 은 고유 값만 가지는 원시 타입(primitive data type)의 값이며, 객체 프로퍼티에 대한 식별자로 사용한다. Symbol 생성 시 Symbol() 을 사용하며, 다른 원시 타입의 객체 생성(new Boolean, new String, new Number)과 다르게 new 써서 생성을 하지 않는다. const createSymbol = Symbol();const numb..
JavaScript는 모두 알다시피 단순한 웹 사이트를 만들기 위한 보조적인 기능을 수행하기 만들어졌다. 그래서 다른 언어와 비교해 보았을 때 문제 되는 점들이 많았다. 그 중 제일 아쉬웠던 부분은 Module 기능을 지원하지 않는 것이었다. 왜 Module 기능을 지원하지 않은 것이 아쉬운 부분인지 한번 알아보자. Module 이란 ?구현 세부 사항을 캡슐화하고 공용으로 필요한 API를 노출시킨다. 즉, 다른 코드에서 쉽게 로드하고 사용할 수 있도록 재사용 가능한 코드 조각이다. Module은 기능별로 분리되어 작성되므로 유지보수 및 효율성을 더 높일 수 있다.Module의 특징은 ?1. 코드 추상화어느 특정한 Module에 기능을 위임하여 실제 구현의 복잡도를 이해할 필요가 없다.2. 코드 캡슐화공용..
외국에서는 이미 인기가 많지만 우리나라에서는 점점 관심을 받고 있는 NestJS 이다.요새는 야놀자에서도 NestJS 도입을 시도한 사례도 있었고 많은 스타트업도 적용하기 위해 많은 시도 중이다.그럼 여기서 질문 !왜 사람들이 기존 사용하던 언어를 뒤로하고 서버사이드 언어인 NestJS를 도입하려고 하는 걸까요 ?NestJS에 대해 알아봅시다. NestJS란 ?Nest는 효율적이고 확장 가능한 Node.js 서버 측 어플리케이션을 구축하기 위한 framework 입니다. Nest도 마찬가지로 Express를 사용하지만 여러 라이브러리와의 호환성도 제공해줍니다. JavaScript를 사용하며 MicroSoft에서 만든 TypeScript 을 사용하며, 객체 지향 프로그래밍, 함수 프로그래밍, 기능적 반응 ..
기존에 비동기를 처리 하려면 콜백 함수를 통해 처리 하였는데 아무래도 비동기 처리이다 보니 가독성 측면과 에러 발생 시 예외 처리를 하기 많이 힘들었다. 아래 예시를 보자. try { setTimeout(() => { throw 'Error'; }, 1000);} catch (err) { console.log(err); // Error Catch 불가} try 문을 시작하여 setTimeout 메소드를 통해 1초 후 'Error' 라는 문자열을 보낸다. 하지만 catch에서 실제 에러를 catch 못하는 현상이 발생한다. 즉 setTimeout 함수의 콜백 함수 내에서 발생시킨 에러는 catch 블록에서 캐치되지 않고 종료되기 때문에 catch 문에서 에러를 잡을 수가 없다. 그래서 이러한 부분들을 해결..
이번 시간에는 Google JavaScript Style Guide에서 가장 흥미로는 규칙들에 대해서 정리한 글을 번역해보았다. 아직 익숙하지 않은 사용자를 위해 Google은 깨끗하고 이해할 수 있는 코드를 작성하기 위한 최고의 문체 관행을 레이아웃하는 JavaScript 작성을 위한 스타일 가이드를 제시합니다. 유효한 JavaScript를 작성하기위한 엄격하고 빠른 규칙은 아니며 원본 파일 전체에서 일관되고 매력적인 스타일 선택을 유지하는 데 필요한 규정 만 있습니다. 이것은 자바 스크립트에서 특히 흥미 롭습니다. 자바 스크립트는 다양한 스타일 선택을 허용하는 유연하고 관대 한 언어입니다. Google과 Airbnb 는 가장 인기있는 스타일 가이드 2 개를 보유하고 있습니다. 나는 JS 작성에 많은 ..
Interfaces 소개TypeScript의 핵심 원리 중 하나는 값이 가지고 있는 상태에 초점을 맞춰 타입 검사를 하는 것 입니다. 이것은 때때로 "오리 타이핑(duck typing)" 또는 "구조적 하위 타입화" 라고 합니다. TypeScript에서 인터페이스는 이러한 형식의 이름을 지정하는 역할을 하며 코드 외부의 코드를 사용하는 약속이며, 코드 내에서 약속을 정의하는 강력한 방법입니다.Our First InterfaceInterface 작동 방식을 보는 가장 쉬운 방법은 간단한 예제로 시작하는 것입니다. function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label);} let myObj = { size: 10..
안녕하세요 ! 오늘은 ES6에서 도입 된 Class에 대해 알아보겠습니다. 들어가기 전 이야기 드리고 싶은 부분이 있습니다. JavaScript는 프로토타입 기반 객체 지향 언어입니다. 모든 객체는 각 부모 역할을 담당하는 객체와 prototype으로 연결이 되어 있다. 그렇기 때문에 class가 필요 없이도 객체 지향 프로그래밍이 가능하다. 어떤 커뮤니티에서는 JavaScript가 무슨 객체 지향 언어냐 라고 이야기를 하는 분들을 본 것 같은데 나는 그분들이 생각하는 다른 언어보다 상상 이상으로 충분한 조건을 갖추고 있는 객체 지향 언어라고 생각한다. 이제 본격적으로 시작해보자.class 는 어떤 것을 제공 해주나 ?기존 prototype 기반의 상속 보다 명료하게 구현해 놓았으며 객체를 생성하고 상속..
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..
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 웹사이트
- 클래스형 컴포넌트
- string
- github
- 리엑트
- ES6
- Function Component
- useEffect
- Angular
- Es5
- array
- HTML
- 함수 컴포넌트
- react
- Let
- NestJS
- window
- 가상돔
- JavaScript
- website
- scope
- Prototype
- virtual dom
- 클래스 컴포넌트
- class component
- 깃헙
- this
- useState
- const
- TypeScript
- Total
- Today
- Yesterday