Frontend

JavaScript 화살표 함수 JavaScript ES6의 화살표 함수에 대해 알아보겠습니다. 1. 화살표 함수 화살표 함수는 ES6에서 도입된 문법입니다. function 키워드를 사용하는 것보다 간결하고 항상 익명으로 동작합니다. 1.1. 화살표 함수 선언 화살표 함수의 매개변수를 지정하는 방법입니다. 1 2 3 4 5 6 7 8 // 매개변수가 없는 경우 var arrowFunc = () => { ... }; // 매개변수가 한 개인 경우 (소괄호를 생략 가능) var arrowFunc = x => { ... }; // 매개변수가 여러 개인 경우 (소괄호를 생략 불가) var arrowFunc = (x, y) => { ... }; cs 화살표 함수의 block을 지정하는 방법입니다. 1 2 3 4..

JavaScript 변수 선언 및 특징 JavaScript ES6(ECMAScript6)를 기준으로 변수 선언과 그에 따른 특징에 대해 알아보겠습니다. 1. 변수 선언 JavaScript ES5에서의 변수 선언은 var 키워드를 사용하는 것이 유일한 방법이었습니다. var 키워드를 사용한 변수 선언은 다음과 같은 특징과 문제가 있습니다. 함수레벨 스코프로 동작 (전역 변수의 남발 및 코드 복잡도 증가) 변수 선언시 var 키워드 생략 허용 (변수의 의도하지 않은 전역화) 중복 선언 허용 (변수의 의도하지 않은 값 변경) 변수 호이스팅 (변수 선언 이전에 참조 가능) 이러한 특징은 대부분 전역 변수의 선언과 사용으로 인하여 발생하며 코드 복잡도를 높이는 원인이 됩니다. ES6에서는 var 키워드의 단점을 ..

TypeScript 정적 타이핑 TypeScript의 정적 타이핑에 대해 알아보겠습니다. 1. 타입 선언 TypeScript에서는 다음과 같이 변수명 뒤에 타입(자료형)을 명시하여 타입을 선언하는 것이 가능합니다. 1let text: string = 'Hello';cs 또한 타입 선언 후 맞지 않는 값을 할당하면 컴파일할 때 에러가 발생합니다. 타입 선언의 특징은 다음과 같습니다. 개발자의 코드 예측 가능 및 개발 효율 향상 강력한 타입 체크 기능으로 문법 에러나 일치하지 않는 값의 할당 오류 등을 런타임 이전에 검출TypeScript는 ES5, ES6의 상위 집합이므로 기존 JavaScript의 타입을 그대로 사용할 수 있습니다. 다음은 TypeScript와 JavaScript의 타입을 정리한 내용입니..

Angular 모듈(Module) Angular의 모듈(Module)에 대해 알아보겠습니다. 1. 모듈 (Modue) Angular의 모듈은 Angular의 컴포넌트, 디렉티브, 파이프, 서비스 등과 같이 관련이 있는 요소를 모은 하나의 단위를 의미합니다. 모듈은 다른 모듈과 결합할 수 있으며 Angular는 여러 모듈을 조합하여 하나의 애플리케이션을 구성합니다. 또한 모듈은 다른 모듈을 import 할 수 있습니다. Angular에서 제공하는 라이브러리 모듈이나 서드 파티 라이브러리도 import 하여 사용할 수 있습니다. 이러한 모듈성(Modularity)은 애플리케이션 개발에 있어서 중요한 의미를 갖습니다. 애플리케이션에 대한 요구사항이 많아지면서 코드의 복잡도가 높아짐에 따라 루트 모듈, 기능 모..

Angular 생명주기(Lifecycle)와 훅(Hook) 메소드 Angular의 생명주기(Life cycle)와 훅(Hook) 메소드에 대해 알아보겠습니다. 1. 생명주기 Angular의 컴포넌트와 디렉티브는 생명주기(Lifecycle)를 갖는데, 생명주기는 Angular가 컴포넌트와 디렉티브를 생성하여 소멸하기까지의 과정을 관리하는 것을 의미합니다. 이와 관련하여 생명주기 이름 앞에 ng가 붙은 훅(Hook) 메소드를 제공하는데 이를 구현하여 생명주기의 각 단계에서 처리해야하는 내용을 정의할 수 있습니다. Angular는 다음의 순서대로 생명주기를 관리합니다. ※ 디렉티브 생명주기 훅 메소드디렉티브도 컴포넌트와 동일한 생명주기 훅 메소드를 사용합니다. 하지만 디렉티브에는 뷰가 없기 때문에 뷰와 관련된..

Angular 파일 구조와 처리 흐름 Angular 프로젝트의 파일 구조와 처리 흐름에 대해 알아보겠습니다. 1. Angular CLI Angular CLI는 간단한 명령어를 사용하여 Angular 프로젝트의 스캐폴딩(Scaffolding, 프레임워크의 기본 골격)을 생성, 실행, 빌드 할 수 있도록 지원해주는 Command Line Interface 입니다. Angular CLI는 Angular 프로젝트의 스캐폴딩을 간단한 명령어로 생성해주어 개발환경 구축에 소요되는 시간을 최소화해줍니다. Angular CLI가 지원하는 기능은 다음과 같습니다. Angular 프로젝트 스캐폴딩(Scaffolding) 생성 Angular 프로젝트에 component, directive, service, class, in..

TypeScript 소개와 개발환경 구축 TypeScript는 마이크로소프트에서 개발하여 2012년에 발표한 JavaScript Superset 프로그래밍 언어입니다. 확장자는 .ts를 사용하며 컴파일(또는 트랜스파일)의 결과물로 .js 파일을 출력합니다. 런타임시 컴파일되어 출력된 .js파일을 실행하는 형식을 갖추고 있습니다. 1. TypeScript 소개 초창기 JavaScript는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었고 HTML과 CSS를 렌더링하는 수준이었습니다. 이후 HTML5의 등장으로 플러그인(flash, activex, silverlight 등) 의존 방식은 JavaScript 대체 되었고 AJAX의 활성화로 SPA(Single Page Application) ..

Node.js와 npm Node.js와 npm에 대해 알아보겠습니다. 1. Node.js 소개 Node.js는 Chrome V8 자바스크립트 엔진으로 빌드된 JavaScript Runtime Environment 입니다. 주로 서버 사이드 애플리케이션 개발에 사용되는 플랫폼이며, 웹 브라우저에 종속적인 자바스크립트 애플리케이션을 여러 OS에서 실행할 수 있는 환경을 제공합니다. 또한 애플리케이션 개발에 사용하기 위해 필요한 모듈, 파일 시스템, http 라이브러리 등을 built-in 으로 제공합니다. Node.js는 자바스크립트를 사용해 개발하는데 front-end와 back-end에서 모두 사용이 가능한 동형성(isomorphic)의 특징을 갖고 있습니다. 또한 Non-blocking I/O와 단일 ..

Angular 소개와 특징 Angular는 SPA(Single Page Application) 개발을 위해 구글에서 만들어진 오픈 소스 JavaScript Framework 입니다. 프론트엔드 개발에 필요한 대부분의 기능을 갖추고 있으며, TypeScript 를 주력 언어로 채택하여 대규모 어플리케이션 개발에 적합한 환경을 제공합니다. 1. Angular 소개 Angular 는 이전 버전인 AngularJS 의 후속 버전으로 2014년 처음 소개되었고 이후 지속적인 개선을 거치며 새로운 버전이 release 되고 있습니다. Angular는 AngularJS의 후속 버전이기는 하지만 호환성이 없는 새로운 프레임워크로 보는 것이 좋습니다. Angular는 AngularJS보다 학습이 쉽고 성능은 향상되었으며..