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의 설계사상에서 기인한다고 한다. 이 설계사상으로 인해 프로젝트 초기에는 최소한의 학습비용만으로 시험 적용이 가능하며 대규모 시스템에서는 단계적으로 필요한 기능및 라이브러리를 조합해 덧붙여 가는 독특한 스타일의 개발이 가능하다.

러닝 자바스크립트 스터디 자료 - CHAPTER 16. Math

Math 객체는 애플리케이션을 개발하면서 자주 사용하게 될 수학 함수를 담고 있습니다.(전문적인 숫자 분석이 필요하다면 별도의 라이브러리를 찾아야 한다.)
자바스크립트의 숫자는 모두 IEEE 755 64비트 부동소수점 숫자이다.

숫자 형식

자바스크립트는 다양한 숫자 형식을 지원하지는 못한다. 10진수 형식, 고정 소수점 형식, 지수 형식이 몇가지 있는 정도이다.
숫자를 2진수, 8진수, 16진수로 나타낼 수도 있다.

자바스크립트의 숫자 형식 메서드는 모두 숫자가 아니라 문자열을 반환한다. 해당 형식에 필요한 각종 기호를 온전히 표현하려면 반드시 문자열이어야 하기 때문이다.

러닝 자바스크립트 스터디 자료 - CHAPTER 15. 날짜와 시간

자바스크립트의 Date객체는 원래 넷스케이프 프로그래머 캔스미스가 만들었는데, 사실 자바의 java.util.Date을 가져온 것이다. 세계는 타임존으로 나뉘어 있습니다. 타임존은 모두 UTC(Coordinated Universal Time)를 기준으로 한 시차로 나뉩니다.
UTC는 때때로 그리니치 표준시, 즉 GMT(Greenwich Mean Time)라고 불리기도 합니다.

자바스크립트에서 Date 인스턴스는 모두 유닉스 시간 원점으로 부터 몇 밀리초가 지났는지 나타내는 숫자입니다.
자바스크립트는 보통 이 숫자를 사람이 읽기 편한 그리고리력 날짜로 변환합니다. 숫자형 표현이 필요하면 valueOf() 메서드를 쓰면됩니다.

1
2
3
const d = new Date();
console.lod(d); //타임존이 들어간 그레고리력 날짜
console.log(d.valueOf()); //유닉스 타임스탬프

러닝 자바스크립트 스터디 자료 - CHAPTER 14. 비동기적 프로그래밍

사용자의 행동은 전적으로 비동기적이다. 사용자가 언제 클릭할지, 터치할지, 또는 타이핑 할지 프로그래머는 전혀 알수 없기 때문이다. 하지만 비동기적 실행이 사용자입력 하나 때문에 필요한 것은 아니다.

자바스크립트 애플리케이션은 단일 스레드에서 동작한다.
즉 자바스크립트는 한 번에 한가지 일만 할 수 있다. 이러한 자바스크립트의 본질 때문에 비동기적 프로그램밍이 필요하다.

자바스크립트에는 매우 일찍부터 비동기적 실행 메커니즘이 존재 했지만, 자바스크립트의 인기가 높아지고 소프트웨어가 복잡해짐에 따라 비동기적 프로그래밍에 필요한 장치들이 추가 되었다.

자바스크립트의 비동기적 프로그래밍에는 뚜렷이 구분되는 세가지 패러다임이 있습니다.
처음에는 콜백 그 뒤로 프라미스 마지막은 제너레이터 입니다.

러닝 자바스크립트 스터디 자료 - CHAPTER 13. 함수와 추상적 사고

서브루틴으로서의 함수

서브루틴은 아주 오랜 된 개념이며 복잡한 코드를 간단하게 만드는 기초적인 수단입니다.
서브루틴은 프로시저, 루틴, 서브프로그램, 매크로 등 다양한 이름으로 불립니다. 이들은 모두 매우 단순하고 범용적인 호출 할수 있는 한 단위를 일컫는 말이다.

함수로서의 함수

순수함수 - 순수함수에서는 입력이 같으면 결과도 반드시 같다.
순수함수에는 부수효과가 없어야 한다.
함수도 객체다. 자바스크립트 함수는 Function 객체의 인스턴스이다.

러닝 자바스크립트 스터디 자료 - CHAPTER 12. 이터레이터와 제너레이터

이터레이터

이터레이터는 ‘지금 어디있는지’ 파악할 수 있도록 돕는다는 면에서 일종의 책갈피와 비슷한 개념이다. 배열은 이터러블 객체의 좋은 예이다. 책에 여러 페이지가 있는 것처럼 배열에는 여러 요소가 들어 있으므로 책에 책갈피를 끼울수 있듯 배열에는 이터레이터를 사용 할 수 있다.

next메서드는 더이상 진행 할것이 없으면 undefined가 되지만 next는 계속 호출 할 수 있습니다.
물론 그렇다고 결과가 바뀌는건 아니다.

이터레이터는 모두 독립적입니다. 즉 새 이터레이터를 만들 때마다 처음에서 시작합니다.
그리고 각각 다른 요소를 가리키는 이터레이터 여러 개를 동시에 사용할 수도 있습니다.

러닝 자바스크립트 스터디 자료 - CHAPTER 11. 예외와 에러 처리

견고하고 품질 좋은 소프트웨어를 만드는 첫 번째 단계는 에러가 일어날 수 있다는 사실을 받아들이는 것이다.
두 번째 단계는 에러를 예상하고 타당한 방법으로 처리하는 것이다.

예외처리는 에러를 컨트롤 하는 매커니즘이다.
에러처리라고 하지 않고 예외처리라고 하는 이유는 예상치 못한 상황에 대처하는 방식이기 때문이다.

Error 객체

자바스크립트에는 내장된 Error 객체가 있고 이 객체는 에러 처리에 간편하게 사용할 수 있다.
Error 인스턴스를 만들면서 에러 메세지를 지정할 수 있다.

1
const err = new Error(‘invalid email’);

러닝 자바스크립트 스터디 자료 - CHAPTER 10. 맵과 셋

ES6에서 도입 키와 값을 연결한다는 점에서 객체와 비슷
중복을 허용하지 않는다는 점만 제외하면 배열과 비슷

키와값을 연결할때 객체를 사용하면 발생하는 단점

프로토타입 체인 때문에 의도하지 않은 연결이 생길 수 있다.
객체 안에 연결된 키와 값이 몇 개나 되는지 쉽게 알아낼 수 있는 방법이 없다.
키는 반드시 문자열이나 심볼이어야 하므로 객체를 키로 써서 값과 연결 할수 없다.
객체는 프로퍼티 순서를 전혀 보장하지 않는다.
Map 객체는 이들 결함을 모두 해결, 키와 값을 연결할 목적이라면 객체보다 나은 선택이다.

러닝 자바스크립트 스터디 자료 - CHAPTER 9. 객체와 객체지향 프로그래밍

객체

배열과 마찬가지로 자바스크립트 객체 역시 컨테이너지만, 크게 보면 다음 두 가지 측면에서 배열과 다릅니다.
배열은 값을 가지며 각 값에는 숫자형 인덱스가 있습니다. 객체는 프로퍼티를 가지며 각 프로퍼티에는 문자열이나 심볼 인덱스가 있습니다.
배열에는 순서가 있습니다. 즉 arr[0] 는 항상 arr[1]보다 앞에 있습니다. 반면 객체에는 그런 순서가 보장 되지 않습니다.
obj.a가 obj.b보다 앞에 있다고 말할 수는 없습니다.

프로퍼티는 키(문자열 또는 심볼)과 값으로 구성됩니다. 객체의 특징은 키를 통해 프로퍼티에 접근할 수 있다는 점입니다.

Your browser is out-of-date!

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

×