타입스크립트 - 제어문 과 연산자

조건문

타입스크립트는 자바스크립트에서 사용했던 조건문을 사용할 수 있습니다. 대표적으로 if 문과 switch 문이 있습니다.
if 문은 조건의 참과 거짓에 따라 분기를 수행하는 조건문, switch 문은 입력값에 따라 분기를 결정하는 조건문입니다.

if 문

if 문은 조건이 참인지 거짓인지 판단하고 분기를 수행합니다.

if 문 형식
1
2
3
if (조건) {
명령문;
}

이때 if 문에 지정하는 조건은 참과 거짓을 판단할 수 있는 불리언(boolean) 타입이어야 합니다. 이때 if 문에 사용할 변수도 다음과 같이 명시적으로 불리언 타입으로 선언해야 합니다.

1
var idEnable: boolean = true;

타입스크립트 - 변수 선언과 기본 타입

var 의 특징

  • 호이스팅
  • 함수 레벨 스코프(블록 레벨 스코프 지원 되지 않음)

var의 첫 번째 특징은 호이스팅 입니다. 호이스팅은 선언한 변수가 스코프의 최상위로 끌어올림 되는 현상입니다.
두 번째 특징은 함수 레벨 스코프(function level scope)를 지원하므로 함수 내에서 선언한 변수는 함수 내에서만 유효하고 함수 외부에서는 참조할 수 없다는 것이다. var 는 블록 레벨 스코프(block level scope)를 지원하지 않는다. 블록 레벨 스코프란 블록{} 내에서만 유효하고 블록 외부에서는 참조 할 수 없는 것을 말한다.

블록 레벨 스코프를 지원하는 하는 대표적인 선언은 다음과 같다.

  • let, const
  • 클래스, 인터페이스, 타입 에일리어스(type alias), enum 선언

TypeScript? 타입스크립트 소개 및 개발환경 구축

타입스크립트(TypeScript)

타입스크립트(TypeScript)는 오픈소스 프로그래밍 언어입니다. 마이크로소프트가 개발했고 유지 관리하고 있습니다.
독자적인 표준을 가지고 있지 않고 ECMA스크립트 표준을 따르기 때문에 자바스크립트의 특성을 침범하지 않고 최신 ECMA 표준을 지원합니다.
그래서 타입스크립트는 자바스크립트의 상위 집합(superset)언어라고 합니다.
타입스크립트가 ECMA 스크립트를 따르므로 자바스크립트 문법을 타입스크립트에서 이용 할수 있으며, 최신 ECMA 표준을 지원함으로써 하위 ECMA 표준에 대한 컴파일도 지원합니다.

Vue 에서 Axios를 사용하여 서버통신 해보기

Axios 란?

AxiosHTTP 클라이언트 라이브러리 중 하나이다.
비동기 방식으로 HTTP 데이터 요청을 실행하고 또한 IE8 이상을 포함한 모든 최신 브라우저를 지원한다.
AxiosPromise를 기반의 자바스크립트 비동기 처리 방식을 사용합니다.

Github 블로그에 Custom 도메인 연결하기

블로그를 운영하다보니 조금씩 욕심이 생기는것 같다 ㅎㅎ Hexo를 이용해 github 블로그를 만들고 SEO를 적용시켜보기도 하고 댓글 시스템도 연결하고 스타일도 조금씩 건들여보고 하다보니 결국에 나만의 도메인을 만들어서 연결해 보고 싶었다.

그래서 여러가지를 알아보다보니 Github 자체에서 Custom Domain을 간편하게 연결할수 있도록 해주고 있었다.
기본적으로 Github를 통해서 정적페이지를 호스팅 하게되면 기본도메인이 주어는데 아래와 같은 형식으로 생성됩니다.

USERNAME.github.io
그래서 저는 mishka86.github.io 로 설정되었습니다.

클로저(closure)에 대하여

클로저의 의미

클로저(closure)라는 영어단어의 사전적 의미는 ‘닫혀있음’, ‘폐쇄성’, ‘완결성’ 정도의 의미를 가집니다.
그렇다면 자바스크립트에서의 클로저는 무슨 의미를 가지고 있을까요?

클로저(closure)는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특징입니다.
자바스크립트에서만 사용하는 개념이 아니다 보니 ECMAScript 명세에서도 클로저의 정의를 다루지 않고 있습니다.
다양한 서적에서 클로저를 정의하고 있는 문장들을 한번 살펴보겠습니다.

  • 자신을 내포하는 함수의 컨텍스트에 접근 할 수 있는 함수 - 더글라스 크록포드, ‘자바스크립트 핵심 가이드’(한빛 미디어)
  • 함수가 특정 스코프에 접근 할 수 있도록 의도적으로 그 스코프에서 정의 하는 것 - 에단 브라운, ‘러닝 자바스크립트’(한빛 미디어)
  • 함수를 선언할 때 만들어지는 유효범위가 사라진 후에도 호출 할 수 있는 함수 - 존 레식, ‘자바스크립트 닌자 비급’(인사이트)
  • 이미 생명 주기상 끝난 외부 함수의 변수를 참조하는 함수 - 송현주, 고현준, ‘인사이드 자바스크립트’(한빛 미디어)
  • 자유변수가 있는 함수와 자유변수를 알 수 있는 환경의 결합 - 에릭 프리먼, ‘Head First Javascript Programing’(한빛 미디어)
  • 로컬 변수를 참조하고 있는 함수 내의 함수 - 야마다 요시히로, ‘자바스크립트 마스터 북’(제이펍)
  • 자신이 생성될 때의 스코프에서 알 수 있었던 변수들 중 언젠가 자신이 실행될 때 사용할 변수들만을 기억하여 유지시키는 함수 - 유인동, ‘함수형 자바스크립트 프로그래밍’(인사이트)

실행 컨텍스트(execution context)

실행 컨텍스트(execution context)는 쉽게 보면 코드가 실행되고 있는 구역,범위에 대한 개념정도로 볼 수 있다.
실행 컨텍스트는 실행할 코드에 제공할 환경정보들을 모아놓은 객체이다.
ECMAScript 스펙에서는 실행 컨텍스트를 ‘실행 가능한 코드를 형상화하고 구분하는 추상적인 개념’이라고 정의 한다.

자바스크립트 엔진은 코드를 실행하기 위해 실행에 필요한 여러가지 정보들을 알고 있어야 한다고 한다. 실행에 필요한 정보들은 아래와 같다.

  • 변수: 전역변수, 지역변수, 매개변수, 객체의 프로퍼티
  • 함수 선언
  • 변수의 유효범위(Scope)
  • this

1. 프로그레시브 프레임워크 Vue.js - part 2

Vue.js 의 특징

Vue.js는 그 자체로는 뷰만을 다루는 단순한 라이브러리다. Vue.js 본체 뿐만 아니라 관련 라이브러리도 Vue.js 공식 프로젝트의 일부로서 개발 및 관리 된다. 이 때문에 몇가지 라이브러리를 조합하면 마치 종합적인 프레임워크처럼 사용 할 수 있다.

낮은 학습 비용

Vue.js 가 제공하는 API는 매운 단순하다. UI를 구성하는 데는 HTML을 기반으로 하는 평범한 템플릿을 사용한다. HTML이나 자바스크립트에 이미 익숙하면 Vue.js 에 대해 특별히 더 배우지 않고서도 라이브러리를 사용할 수 있다. 기본적인 사용만 한다면 빌드 도구나 패키징, EC2015 이후 문법에 대한 지식이 없어도 바로 동작하는 코드를 작성할 수 있다. Vue.js 는 앞서 언급한 모던 웹 프런트 엔드 개발의 어려움을 잘 극복했다. HTML5 이후 고도화된 개발 스타일에 부응하면서도 개발 환경 구축이 쉬워서 개발을 바로 시작할 수 있으며 자바스크립트에 대한 사전지식과 라이브러리 고유의 문법을 학습하지 않아도 라이브러리를 사용할 수 있다.

1. 프로그레시브 프레임워크 Vue.js - part 1

Vue.js 철저입문 책을 읽으면서 간단하게 정리해 보고자 한다.

Vue.js는 뷰 레이어에 특화된 라이브러리이다. MVVM패턴의 영향을 받은 설계를 채택하고 있어서 대규모 애플리케이션 개발에도 사용할 수 있습니다. 이러한 특징은 애플리케이션의 규모와 상관없이 어떠한 경우에도 단계적으로 유연한 적용이 가능해지는 프로그래시브 프레임워크라는 Vue.js의 설계사상에서 기인한다고 한다. 이 설계사상으로 인해 프로젝트 초기에는 최소한의 학습비용만으로 시험 적용이 가능하며 대규모 시스템에서는 단계적으로 필요한 기능및 라이브러리를 조합해 덧붙여 가는 독특한 스타일의 개발이 가능하다.

Github SSH key 생성 및 적용하기

많은 Git 서버들은 SSH 공개키로 인증을 합니다. 또한 Github 연결시마다 계정정보를 입력해야 하는 번거로움을 제거해 준다. 이번에 입사한 회사에서도 서버에서 SSH를 사용해서 인증하는 시스템을 가지고 있어서 이 기회에 세팅을하면서 적용방법을 정리해 보았다.

SSH 공개키 생성

일단 공개키를 사용하려면 공개키를 만들어야 한다. 그 전에 공개키가 있는지 확인이 필요하다. 기본적으로 사용자의 SSH키들은 사용자의 ~/.ssh 디텍토리에 저장한다. 디텍토리의 파일을 살펴서 공개키가 있는지 확인 할 수 있다.

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×