■ Front-End
-
[TypeScript] TypeScript란?■ Front-End/- Angular 2019. 9. 3. 14:19
TypeScript는 Javascript(ES5)의 상위 확장 개념 언어이다. 그래서 ES5의 문법을 그대로 사용할 수 있고, ES6에서 새롭게 추가된 기능들을 기존의 자바스크립트 엔진에서 실행할 수 있다. (Babel을 사용하지 않아도 된다.) 장점 1. 정적 타입 지원 기존 Javascript에서 함수를 선언할 때 아래와 같이 사용한다. 위 함수는 2개의 매개변수를 전달받아 두 수의 합을 반환하는 함수이다. 매개변수의 자료형을 다르게 호출해도 자바스크립트 엔진은 동적으로 값을 반환한다. TypeScript는 정적 타입을 지원하는데, 아래와 같이 작성한다. 이처럼 명시적으로 정적 타입을 지정하는 코딩 방식은 여러 장점이 있다. - 컴파일 단계에서 오류를 확인할 수 있다. - 개발자의 의도를 명확하게 코..
-
[Javascript] this에 대하여■ Front-End/- JavaScript & TypeScript 2019. 7. 23. 00:42
자바스크립트를 쓰면서 가장 많이 사용하는 this. 하지만 이 this가 무슨 역할을 하는지 정확히 알지 못했다. 자기 자신 이라고 대강 알고 쓰긴 했는데, 이번에 제대로 정리를 해보려고 한다. this는 함수가 어떻게 호출되느냐에 따라 그 역할이 결정된다. this는 전역에서 사용할 수도 있고, 함수 안에서도 사용할 수 있다. 어떤 함수냐에 따라 그 역할이 다르게 해석되기도 한다. 1. 브라우저 환경에서 전역으로 this 사용하기 this.valueA = 'a'; console.log(valueA); 브라우저 환경에서 this를 전역에서 사용하면, 전역 객체인 Window 객체를 가리킨다. 그래서 valueA는 window.valueA로 해석된다. 2. 함수에서 호출하기 (1) 일반 함수인 경우 fun..
-
[Javascript] Hoisting 호이스팅■ Front-End/- JavaScript & TypeScript 2019. 7. 23. 00:25
Hoisting이란? 함수를 선언하기 전에 호출하는 것. 예) 그런데 함수를 변수에 할당하여 호출하면 TypeError가 발생한다. 왜 이런 에러가 발생하는걸까? 먼저 자바스크립트 실행 과정을 알아야 한다. 자바스크립트는 코드를 해석하는 단계와 코드를 실행하는 단계로 나뉜다. 코드를 해석하는 단계에서는, 선언 문장을 초기화하면서 스코프를 형성한다. 실행하는 단계에서는, 값을 할당하거나 계산을 하는 행위를 한다. 해석 단계에서 hello2 변수를 선언하는 문장이 먼저 초기화 되면서 hello2 변수에는 undefined 값이 할당된다. 그래서 실행 단계에서 hello2(); 를 호출하면 undefined가 리턴된다.
-
#5-1. http 모듈을 이용한 웹 서버 만들기■ Front-End/- Node.js 2019. 6. 26. 02:38
http://www.yes24.com/Product/goods/32442876 Do it! Node.js 프로그래밍 지금 당장 서버가 필요하다면? 실제 서버로 구동 가능한 코드로 배워라! 웹 서버, 채팅 서버, 모바일 서버, 위치 기반 서비스 서버, JSON-RPC 서버까지 한 권으로 끝낸다! 이 책은 누구나 쉽게 접근할 수 있는 자바스크립트 언어로 웹 서버를 만들며 서버 개발에 입문한다. 웹 서버를 만들며 작성한 소스 코드를 바로바로 수정해서 다양한 서버를 단박... www.yes24.com 이 책에서 웹 서버를 만드는 방법을 2가지로 나눠 설명하고 있다. 첫 번째는 http 모듈을 이용해 HTTP 프로토콜로 요청하는 내용과 응답을 처리하는 것이고, 두 번째는 express(익스프레스) 모듈을 이용해 ..
-
# 연습문제 1■ Front-End/- Node.js 2019. 6. 25. 20:12
Mission 1. 파일의 내용을 한 줄씩 읽어들여 화면에 출력하는 기능을 만드시오. +) 하나의 파일을 만들고, 각 줄에는 공백으로 구분된 이름, 나이, 전화번호가 들어가도록 구성합니다. +) 파일의 내용을 한 줄 씩 읽어 들이면서, 각 정보를 공백으로 구분합니다. +) 구분된 정보 중에서 이름만 화면에 출력합니다. 풀이과정 - 파일 쓰기 메소드를 이용해서 이름, 나이, 전화번호가 들어간 파일을 생성한다. - 서버에서 파일을 한 줄씩 읽어와 화면에 출력한다. 처음에는 buffer로 읽으려고 했지만, txt 파일 크기가 커지면 버퍼 크기도 계속 조절해줘야하기 때문에 스트림을 이용해서 풀었다. 파일 한 줄씩 읽기 위해서는 'readline' 이라는 모듈을 사용한다는 것도 알게 되었다. C언어로 파일 읽기 ..
-
#4. 노드의 기본 기능 알아보기■ Front-End/- Node.js 2019. 6. 25. 00:52
http://www.yes24.com/Product/goods/32442876 Do it! Node.js 프로그래밍 지금 당장 서버가 필요하다면? 실제 서버로 구동 가능한 코드로 배워라! 웹 서버, 채팅 서버, 모바일 서버, 위치 기반 서비스 서버, JSON-RPC 서버까지 한 권으로 끝낸다! 이 책은 누구나 쉽게 접근할 수 있는 자바스크립트 언어로 웹 서버를 만들며 서버 개발에 입문한다. 웹 서버를 만들며 작성한 소스 코드를 바로바로 수정해서 다양한 서버를 단박... www.yes24.com 1. 주소 문자열과 요청 파라미터 다루기 URL 모듈의 주요 메소드 (1) parse() : 주소 문자열을 파싱하여 URL 객체를 만든다. (2) format() : URL 객체를 주소 문자열로 변환한다. quer..
-
[Javascript] Closure■ Front-End/- JavaScript & TypeScript 2019. 6. 22. 09:00
클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다. 이를 조금 더 간단히 말하면 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다 예시 위 코드를 실행 컨텍스트로 표현하면 아래와 같다. 사실 아직까지 업무에 closure를 적용해본 경험은 없다. closure를 적용할만한 기능이 있지 않고, 특히 주니어 개발자에게 closure를 실무에 적용해보는건 아직 어렵다(=두렵다);; 예제 클로저를 이용한 간단한 예제로는 카운터가 있다. 위 코드를 실행하면, 변수 increase에 할당된 즉시 실행 함수가 호출된..
-
[Javascript] 실행 컨텍스트(Execution Context)■ Front-End/- JavaScript & TypeScript 2019. 6. 21. 09:00
실행 컨텍스트는 Javascript에서 중요한 scope, hoisting, this, function, closure 등의 동작 원리를 담고 있는 핵심 원리이다. 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경이라고 볼 수 있다. 실행 컨텍스트의 3가지 객체 1. Variable Object(변수 객체) 변수, 매개변수와 인수정보, 함수 선언(함수 표현식은 제외) 의 정보를 담고 있는 객체이다. 전역 컨텍스트의 경우, 전역 객체(Global Object)를 가리킨다. 예제 코드 위 코드를 실행하면 최초에는 전역 컨텍스트가 생성되고, 해당 컨텍스트의 변수 객체는 전역 객체를 가리킨다. 함수 컨텍스트를 가리키는 경우에는 활성 객체(Activation Object)를 가리킨다. 2. Scope..