개발노트

Yarn 이란?

• Javascript 패키지 매니저 
• 페이스북에서 만든 npm

장점

• Yarn은 패키지를 순서대로 설치하는 npm과 달리 패키지를 병렬로 설치하므로 설치 속도가 빠르다.
• Yarn은 캐싱을 이용하기 때문에 패키지 설치가 더 빠르다. Yarn은 설치한 패키지를 유저 디렉토리에 저장해서 캐싱한다

Yarn 주의사항

• yarn 과 npm은 가급적이면 혼용하지 않는게 좋다.

Yarn 설치

• macOS에서 설치

$ brew install yarn

• npm으로 설치

$ npm install -g yarn

조건문과 함께 반복문은 프로그래밍에서 매우 중요하면서 가장 많이 사용하는 문법입니다.

for / in문과 for / of문 등을 설명할것이기에 5장 부터는 ES6++ 으로 작성할 것 입니다.

1. for문

for (시작; 조건; 끝) { 내용 } 이렇게 구성 되어 있습니다.

for (let i = 0; i < 3; i++) {
	console.log(`${i}번째 입니다`);
}
// 0번째 입니다
// 1번째 입니다
// 2번째 입니다

2. for / in 문

Object 와 Array를 학습해야합니다.

특정 객체의 열거 가능한 모드 프로퍼티(enumerable properties)를 루프 처리 합니다.

for (변수 in 객체식) {
    // 문장
}

객체와 for in 문

let obj = {name:"king", age:20}; 
for (let key in obj){ 
    console.log(`key : ${key} , value : ${obj[key]}`);
}
// key : name , value : king
// key : age , value : 20

배열과 for in 문

let arr = [1, 3, 5];
for (let num in arr){ 
    console.log(`idx : ${num}, value : ${arr[num]}`);
}
// idx : 0, value : 1
// idx : 1, value : 3
// idx : 2, value : 5

3. for / of 문

Symbol을 학습해야 합니다.

해당 문법은 ES6부터 추가 되었습니다.

let set = new Set([1, 1, 2, 2]);
for (let val of set){ 
    console.log(`set value : ${val}`);
}
// set value : 1
// set value : 2

let map = new Map();
map.set("name", "queen");
console.log(`map has : ${map.has("name")}`);
console.log(`map get : ${map.get("name")}`);

for (let [key, value] of map){     
    console.log(`map key : ${key} , value : ${value}`);
}
// map has : true
// map get : queen
// map key : name , value : queen

let arr = [2, 4, 6];
for (let val of arr){ 
    console.log(`arr value : ${val}`);
}
// arr value : 2
// arr value : 4
// arr value : 6

4. while, do / while문

let i = 3;

while ( i > 0 ) {
	console.log(`while: ${i}`);
    i--;
}

// while: 3
// while: 2
// while: 1 
// 이렇게 출력됩니다.

do {
	console.log(`while: ${i}`);
    i--;
} while ( i > 0 );

// while: 0

5. break과 continue

while문 안에 break 가 있으면 중단할 수 있습니다.

while문 안에 continue가 있으면 그 아랫부분은 실행하지 않고 다음 반복문으로 넘어갑니다

let i = 3;

while ( i > 0 ) {
	if(i === 1){
    	break;
	}
    if(i === 2){
    	continue;
	}
	console.log(`while: ${i}`);
    i--;
}
// while: 3

조건문이란 특정한 조건 아래서만 코드가 실행되게 하는 구문

if문 / switch문 / 삼항연산자

1. if문

조건식이 만족하면 if문 안에 내용을 실행, 조건문이 만족하지 않으면 else문 안에 내용을 실행

if(조건식) {
// 조건식이 true인 경우
} else {
// 조건식이 false인 경우
}

var a = 7;

if (a > 10) { // false
  console.log('10보다 큼');
} else if (a > 5) { // true
  console.log('5보다 큼'); // 실행
} else {
  console.log('5보다 작거나 같음');
}

다음은 자바스크립트에서 false로 인식하는 값들이다

• 0

• "", '' (빈값)

• NaN

• undefined

• null

위 값들을 제외한 모든 값들은 모두 true로 인식한다

2. switch문

보통 else if가 많아졌을때 사용합니다.

var b = 1;

switch(b) {
  case 10 : 
	console.log("10입니다");
  	break;
  case 5 : 
  	console.log("5입니다");
  	break;
  case 1 : //조건값과 일치
  	console.log("1입니다"); // 실행
  	break;
  default: // 모든 조건값과 일치하지 않은 경우 실행할 명령
  	console.log("그 외 입니다");
}

3. 삼항연산자(조건연산자)

조건이 간단하고 명령어도 하나인 경우에 사용합니다.

(조건식) ? 조건식이 true인 경우 : 조건식이 false인 경우

var a = 20;
var b = a > 10 ? 15 : 6 // b = 15

여기서 a > 10 == true면 b 변수는 15가 되고, false면 6이 됩니다.

1. 산술연산자

덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지(%), 거듭제곱(**) 입니다.

연산자: x + y

var a = 1 + 2; //3

연산자: x - y

var b = 5 - 3; // 2

연산자: x / y

var c = 6 / 4; // 1.5
var d = 6 / 0; // Infinity

연산자: x * y

var e = 2 * 4; // 8

연산자: var1 % var2

var f = 8 % 3; // 2

연산자: var1 ** var2

var g = 2 ** 3; // 8

2. 문자열연산자

문자열과 문자열을 연결할때 사용합니다.

문자열과 숫자를 더하면 숫자가 문자열로 변경되어 문자열이 연결되는 형태로 계산됩니다.

연산자: val1 + var2

var str1 = 'hello ' + 'world'; // 'hello world'
var str2 = 'hello ' + 'world' + 123; // 'hello world123'

3. 증감연산자

++, -- 가 있습니다. 변수에 1을 더하거나 1을 빼줍니다. 

• 피연산자 뒤에 붙여(예: x++) 접미사로 사용한 경우 증가하기 전의 값을 반환합니다.

• 피연산자 앞에 붙여(예: ++x) 접두사로 사용한 경우 증가한 후의 값을 반환합니다.

연산자: x++ or ++x

var a = 1;
var x = ++a;
console.log("x = "+x, "a = "+a);
// x = 2 a = 2

var b = 1;
var y = b++;
console.log("y = "+y, "b = "+b);
// y = 1 b = 2

• 피연산자 뒤에 붙여(예: x--) 접미사로 사용한 경우 감소하기 전의 값을 반환합니다.
• 피연산자 앞에 붙여(예: --x) 접두사로 사용한 경우 감소한 후의 값을 반환합니다.

연산자: x-- or --x

var a = 1;
var x = --a;
console.log("x = "+x, "a = "+a);
// x = 0 a = 0
var b = 1;
var y = b--;
console.log("y = "+y, "b = "+b);
// y = 1 a = 0

4.논리연산자

&& = and(그리고),

|| = or(또는),

! = not(아닌)

var a = 10;
var b = 20;
(a < b) && (a * 2 == b); // true
(a > b) || (a * 2 <= 20); // true
!(a < b); // false

5. 비교연산자

== (같음),

!= (같지 않음),

>(큼),

<(작음),

>=(크거나같음),

<=(작거나같음),

=== (자료형까지 같음)

100 == 10 * 10; // true
6 != 2 * 2; // true
2 * 5 > 3 * 3; // true
6 * 3 <= 2 * 9; // true
3 === '3' // false
3 === 1+2 // true

console.log(0 == false); //true
console.log(0 === false); //false
console.log('' == false); //true
console.log('' === false); //false
console.log(null == undefined); //true
console.log(null === undefined); //false

Variable(변수)

Javascript에서 변수의 종류는 3가지이다.

var, let, const

ES6등장부터 let, const가 추가되었으며, 그 전에는 var 한개뿐이였습니다.

let 과 const가 등장한 이유는 var가 너무 유연한 변수이기 때문입니다.

보통 프로그램 언어에서 변수는 선언 -> 초기화 -> 할당 이 3단계가 기본적이나 

var는 선언을 생략할 수 있으며, 중복하여 선언도 가능하며 변수 호이스팅으로 인해 선언과 초기화가 동시에 이루어집니다.

그래서 이 문제를 해결하고자 나온것이 let, const입니다.

다시 정리하면

1. var (변수 재선언 가능 ) : function-level-scope

2. let (변수 재선언 불가능, 변수 재할당 가능) : block-level-scope

3. const (변수 재선언 불가능, 변수 재할당 불가능) : block-level-scope

예를 들면

{
	var age1 = 20;
}
console.log(age1);
//20찍힘

{
	let age2 = 20;
}
console.log(age2);
//Uncaught ReferenceError: age2 is not defined

1993년 NCSA의 마크 앤드리슨(Marc Andreessen)과 에릭 비나가 만든 UI요소가 들어간 첫번째 웹브라우저가 탄생하였다.

1994년 마크 앤드리슨(Marc Andreessen)은 넷스케이프(Netscape)회사를 설립 후 넷스케이프 내비게이터(Netscape Navigator, 또는 간단히 넷스케이프)를 개발하게 되며

HTML과 CSS로 만든 이 정적인 웹 브라우저는 점유율은 80% 이상을 차지된다.

1995년 동적인 웹사이트를 만들기 위해 영입한 브렌던 아이크(Brendan Eich)가 Scheme을 기반으로 당시 인기가 좋았던 JAVA와 비슷한 구문으로 개발하게 되는데  이것은 최초에 내부적으로 Mocha라는 이름으로 나중에는 LiveScript 이름으로 개발하였으며,  그해 12월 네스케이프와 썬은 ‘LiveScript ’를 ‘JavaScript ’라고 최종 이름을 결정하였다.

사실 이름에 JAVA가 들어가지만 자바보다 프로토타입 개념 기반의 개체 지향 프로그래밍언어인 셀프(Self) 혹은 함수형 프로그래밍 언어 스킴(Scheme) 과 유사성이 많다.

좀더 자세히 말하자면 변수 스코프와 클로져등의 규칙은 Lisp dialect Scheme 에서 가져오고

프로토타입 상속은 스몰토크에서 파생된 셀프(Self)언어에서 영향을 받았다.

Javascript가 나온 이후, MS사는 Javascript를 리버스엔지니어링(reverse engineering)하여 Jscript라는 똑같은 언어를 만들어냈고 인터넷익스플로러(IE)를 개발하여 windows 운영체재에 무료로 포함시켰다.

그러면서 넷스케이프의 시장점유율이 급격히 떨어졌고 1999년 AOL에 인수되었으나 결국 2008년 넷스케이프는 모든 개발을 중단하게된다.

1996년 넷스케이프사는 자바스크립트를 표준화 하기 위해, 표준화 기구인 Ecma International에 요청을 했다.

1997년 ECMAScript1 이 첫탄생하게 된다.

1998년 ECMAScript2

1999년 ECMAScript3

2000년 ECMAScript4

하지만 ECMAScript4  이후 인터넷익스플로러(IE)가 95%라는 막강한 점유율을 가지게 되면서  MS사는 IE를 표준으로 지정하게된다. 그러면서 MS사는 더이상의 ECMA표준화에 참가하지 않게 되었다. 

2008년 Google은 자바스크립트 실행 속도가 엄청 빠른 JIT(just-in-time compilation)엔진이 포함된 Chrome 브라우저를 출시하게되고  Chrome 브라우저 등장 이후 모든 브라우저들이 다시 표준화를 하기 시작한다.

2009년 ECMAScript5

2015년 ECMAScript6

.

.

.

현재도 계속하여 표준화 작업은 진행중이다.

현재의 자바스크립트의 동향을 살펴보자면

SPA (Single Page Application) 

하나의 페이지안에서 데이터를 받아와 필요한 부분만 업데이트하는 기술이 유행이다.

이러한 기술을 위해 Angular, React, VueJS 등등이 등장하고 있다.

Swiper API 공식 홈페이지 http://idangero.us/swiper/

다운로드 링크 https://github.com/nolimits4web/swiper/releases

필요한 버전을 다운을 받고 압축을 풀어줍니다.

CSS 파일 : /dist/css/swiper.min.css
JS 파일 : /dist/js/swiper.min.js

Swiper Demo를 적용한 모습입니다.

 

 

 

Swiper 잘 정리해놓은 블로그 주소 http://ktsmemo.cafe24.com/s/SwiperJS/358

IE9 부터 지원한다고는 하지만 IE11은 되야 제대로 지원이 되는것 같다.

vue cli : https://cli.vuejs.org/

크롬 확장프로그램 URL : https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd