안녕세계
[SK고용디딤돌] 자바스크립트 (2/7) - 1주차 본문
[SK고용디딤돌] 자바스크립트 (2/7) - 1주차
Junhong Kim 2016. 7. 6. 18:00** PROGRAM LANGUAGE **
Swift(1.0 → 2.0 → 3.0[올해]) = 객체지향 언어 + 함수형 언어
Java(2/5/8 중요 ver) = 객체지향 언어
자바8부터는 함수형언어가 들어 간다.
자바5에서 nio(new I/O)가 소개 됨 → non Blokcing I/O를 처리하기위한 패키지
Node.js : Asynchronous, Non Blocking I/O
동기 = 입출력이 하나의 사이클
사이클 = 처리 프로세스의 원자적인 단위 (쪼갤 수 없는 단위)
Blocking I/O : 파일을 다 읽을 때 까지 다른 일을 못하는 것.
이를 해결하기 위해서 Thread가 만들어졌다. → Thread의 문제는 자원을 사용한다.
Tomcat의 최대 동시접속수 : 500 → 여러개의 서버로 해결
동시접속수 만큼 Thread를 만들어서 처리한다.
Main Thread는 요청에 대한 응답만 한다.
● Web의 컴포넌트
1) Web Layout [ Webkit 엔진, Geckco]
2) JavaScript [V8 엔진, Spider Monkey, Trident 등)
3) Network ↔ 통신
+ XHR ↔ 통신
네트워크에서 HTML이 Parser를 통과하면 DOM을 만듬 이를 통과하면 HTML Rendering이 된다.
XHR이 하는 일 DOM을 부분적으로 바꿀 수 있다.
자바스크립트는 interpreting하는 언어
Compiler 실행코드를 목적파일로 바꿔주는 것
- 아래의 순서가 Compile time 이라고 한다 -
.c → preprocessor (치환역할) → compiler (목적코드 만듬) →
→ Linker (1. 라이브러리를 연결시켜주는 역할 2. 실행파일이 되기위해는 Startup code) → a.out
- 실행파일 이후는 Run time 이라고 한다 -
main 함수는 누가 실행시킬까?
: 프로세스가 호출될때 바로 호출되는것이 startup code 이며 startup code가 main을 호출한다.
OS → Process management
program을 process로 만든다. 크게 process는 code segment와 data segement로 나누어져 있다.
명령들은 code segment에 올라간다. 상태 값들은 data segement에 올라간다.
data segement는 여러개의 영역에 나누어져 있다. stack, heap, initialized block(상수들) / uninitialized block
program counter라고 하는 해당 번지를 갖는다.
process에 시작 코드에 위치해 있는 것을 startup code라고 한다.
cross platform(=OS) 개발 - 소프트웨어나 하드웨어 등이 다른 환경의 OS에서 공통으로 사용되는 것
: 멀티 플랫폼, 소스 코드는 하나, IDE가 taget OS를 정한다. Win, Max, Linux
- 실행된 코드 정보를 저장해두는 것을 z phase comilation 라고 한다. → 대표적으로 크롬에 장착된 V8엔진이 있다. 이는 Node.js에서 사용
- V8 : js → C++ → natvie code
컴파일 동시에 인터프리팅되는 것이 자바스크립트 언어이다
** 자바스크립트란? **
1. 웹 브라우저에 내장되어 있는 Script 언어
2. Object Oriented 프로그래밍
3. Interpreter 방식
4. 약한 타입 (dynamic and weak typing) 언어
var a = 5; (number type)
a = function() { return ... ; } (function type)
a();로 사용 가능, 값에 의해서 사용 가능
자바스크립트는 ECMAScript를 기반으로 한다.
ECMAScript를 기반 1) JavaScript 2)JScript 3)ActionScript 그러나 구현체가 다름.
JavaScript는 Class가 없다.
그렇다면 어떻게 객체지향을 하는것인가?
: 자바스크립트는 함수를 기반으로 하여 객체지향을 수행한다. 마치 함수를 클래스 대용품 처럼 사용한다.
● 객체지향의 기본적인 개념
1) 클래스 2) 객체 3) 인스턴스
클래스에 메모리를 할당하면 객체라고 하고 이를 사용하면 인스턴스라고 한다.
클래스를 기반으로 객체를 만듬. 객체를 가지고 수행하면 인스턴스를 사용한다라고 한다.
class는 객체에 의해 상태정보가 존재한다.
object는 시점이 없다. 클래스에서 만들어진 메모리 공간 (개별 상태)
instance는 시점에 대한 내용이 들어간다.
* 하이브리드 앱 만드는 방법
1) 패키징 방식
- 껍데기 : 네이티브 , 속은 웹
2) Titanium
- 크로스 플랫폼 앱 개발 도구 (자바스크립트로 target만 설정하면 Android/ios 한번에 개발할 수 있다 taget에 따라 변경 코드 변경해 줌)
- Titanium을 사용하는 국내 개발자가 적다.
[WebStrom 설정]
Configure → Apperarance (Font 설정)
→ Editor / Colors & font
→ Editor / File Encodings (UTF-8)
→ Languages & Frameworks/JavaScript (ECMAScript 5.1)
→ Languages & Frameworks/Node.js and NPM (노드 설치 확인)
→ Tools/Web Browsers -> Default Browser(First listed) - chrome
[프로젝트 저장경로]
D:\Dev\WebstormProjects\JavaScript\Day02
[Webstorm 좌상단에 메시지가 뜰 경우 - 윈7 및 자바7 탑재된 곳 에서만 발생하는 것임]
netsh advfirewall set global StatefulFTP disable
[Webstorm 좌하단]
Terminal : prompt 입력이 가능하다.
Todo : 오늘해야 할 일!
** JavaScript Day02 **
클라이언트에서의 window = global scope object [생성된 상태로 시작된다]
new Activation () → window
● <sciprt> 태그
1) 인라인 스크립트 방식 : <head> 와 <body> 위치 할 수 있다. 즉, 태그안에 쓰는 것
2) 외부 스크립트 방식 : .js 파일을 만들어서 가져와서 사용
<script src="test.js"> </script>
- <head> 태그에는 js파일이 라이브러리가 온다.
- <body>에는 어플리케이션 코드가 온다. JS 위치가 적절한것은 <body> 에서 가장 밑에 위치하는 것이 좋다.
※ 외부 스크립트와 인라인 스크립트 동시에 쓸 수 없다. 같이 쓰면 인라인 스크립트는 무시된다.
● JavaScript의 실행 과정
코드 → 스크립트 코드 파싱 → window( 식별자 a, b, add가 들어있다) → 스크립트 코드 실행
→ add() scopce object ( x, y, result) 이 생성되면, 상위 scope와 연결되게 되어있다 → 함수 호출 → 함수 파싱 → 함수 실행
※ Scope chain? 자바스크립트 실행 과정에 포함이 되지 않고 연결되어 있는 것
● JavaScript에는 Blcok Scope이 없다. Function Scope만 존재
- 동일 scope에서 똑같은 변수 여러번 선언이 가능하다. → 가장 마지막에 있는 변수가 값을 갖는다
- var는 스코프 선언 한정자 (Scope declaration modifier)
- 함수 안에서 변수에 var을 빼고 사용하면 chain을 따라 올라가서 상위에 있는지 확인, 없으면 window에서 (전역으로) 생성된다.
- var가 scope를 한정 시켜준다. 함수안에서 var를 안쓰고 사용하면 window 객체에 만들어지기 때문에 var를 써주는 것을 권장한다.
● 변수선언과 var
- 변수 : 프로그램이 어떤 값을 메모리에 저장해 두고 다시 사용하기 위한 공간
- var 키워드(scopre declation modifier): 자바스크립트는 값을 저장하기 위한 공간을 확보하기 위해 var 키워드를 이용해 변수를 선언
● JavaScript? (웹 페이지 지원을 목적)
- 변수 선언시 초기값을 지정하지 않을 경우, 값을 저장할 때까지 그 변수는 undefined 상태 임.
- 변수를 사용하려면 초기 값을 주고 사용해야 한다.
- 값에의한 데이터 타입 결정
- 자바스크립트는 문자 타입이 없다. 문자열만 존재
- 'a', "a" 둘 다 문자열 a (문자는 없다) 그래서 js는 binary 타입을 처리할 수 없다
- literal : true / false 같은 것
- Decimal, Big Decimal = 화폐처럼 정확하고 큰 범위가 필요할 때 사용하는 클래스 타입 임.
● 값을 저장하는 기본형 데이터 타입
1) 숫자
2) 문자열(string)
3) 불리언(boolean)
4) null(예약어)
: 객체에 대해서만 null 을준다 (이유: garbage collection을 한다.)
reference counter 를 줄일 때 null 을주고, 이를 garbage colletion이 가져간다.
5) undefined(property)
: 변수는 선언되었으나 값이 할당한적이 없는 것, 값을 가지고 있지 않는 상태
● 참조 값을 저장하는 참조형 데이터 타입
1) 배열(array)
: 데이터 값들의 모음, 대괄호([ ])를 사용, 인덱스를 사용하여 값을 가져올 수 있음
2) 객체(object)
: 객체는 이름이 붙은 값들의 모음, 중괄호[{ }]를 사용, [객체명].프로티명으로 사용 가능
3) 함수(function)
: 실행 가능한 코드를 가지고 있는 데이터 타입
● 리터럴(literal) : 프로그램 코드 상에 데이터의 값을 표현하는 방식
- 숫자, 문자열, 배열 ,객체, 함수, 불리언, undefined, null
1) 숫자 리터럴
- Infinity, NaN(Not Number)를 포함한 모든 숫자 데이터는 typeof 연산의 결과 number를 반환
2) 문자열 리터럴
- 작은 따옴표(') 또는 큰 따음표(")로 둘서싸서 포현, " "와 ' '는 섞어서 쓰면 됨. 아니면 \사용
3) 배열 리터럴
- 배열이란 무엇인가? 동일한 데이터 타입(Homogenious Collection) 을 원소로하는 집합체
- 자바스크립트에서는 이 의미가 바뀐다. 이질되는 데이터 타입(Heterogenious Collection) 을 넣을 수 있다.
ㄴ(number, 문자열, 함수형 등 전부 가능) 인덱스를 이용하여 사용한다.
- 자바스크립트 배열은 크기가 정해져있지 않다. 알아서 늘었다 줄었다 한다.
4) 객체 리터럴
* 객체
- 이름이 붙어있는 데이터 값들의 모음
* 프로퍼티
- 이름이 붙어 있는 값
- [객체명].프로퍼티로 사용 가능
- 프로퍼티에는 배열, 함수, 객체를 포함한 어떠한 값이라도 담을 수 있음
- 자바스크립트는 프로퍼티에 접근할 때 this를 생략할 수 없다.
var point = { x : 300, y : 200 }
var point = { "x" : 300, "y" : 200 } // 동일
5) 함수 리터럴
- 어떤 입력값을 이용해 미리 정의된 로직을 처리항 결과를 반환하는 구조
- 객체 프로퍼티에도 할당 될 수 있는 실행 가능한 실행 메서드
- 객체 프로터티에 포함되어있으면 객체의 메소드라고 한다.
● 자바스크립트에서 함수를 만드는 세가지 방법
: 자바스크립트에서 함수는 객체다.
(1) 생성자 함수 이름이 Function -> 함수 객체를 만드는 것임.
var size = new Function("코드", "매개변수");
(2) Function문을 이용한 함수 생성
function test( arg1, arg2 ) { // type 없이 변수명만준다. 심지어 변수명 안줄때도 있음
}
(3) 이름이 없이 만드면 Function Literal 이라고 한다.
Function (arg1, arg2) {
}
var test = Function (arg1, arg2) {
}
function 문은 파싱할 때 타입이 정해진다. 선언된 위치에 상관없이 앞에서든 위에서든 사용 가능.
대입방식 test는 만든다음 이후에 유효하다.
6) Boolean 리터털
- 참/거짓의 진리 값 두가지를 표현
- 산술 연산에서 true는 1, false는 0
- 문자열 연산에서 true는 문자열 "true" false는 문자열 "false"
- 논리 연산에서 0, undefined, null, NaN, ""값은 false로 변환되어 평가됨
● Undefined 와 null
*undefined
- 변수가 선언 되었지만 값이 할당된 적이 없는 변수에 접근하거나, 존재하지 않는 객체 프로퍼티에 접근할 경우 반환되는 값
- 논리 연산 false, 산술 연산 NaN, 문자열 연산에서는 "undefined"
*null
- 보통 참조 타입과 함께 쓰여, 어떠한 객체도 나타내지 않는 특수한 값으로 사용
- 논리 연산에서 false, 산술 연산 0, 문자열은 "null"
- 객체를 다 쓰고 나면 객체 잠조를 제거하기 위해 사용
● 자바스크립트는 인자가 전달 되지 않았을 때 안전장치가 항상 필요로 하다.
* 코드1
function add(x, y) {
x = (x === undefined) ? 0 : x
y = (y === undefined) ? 0 : y
return x + y;
}
* 코드1을 간략하게(이러한 형식이 자바스크립트에서는 필요로 하다)
function add(x, y) {
x = !x ? 0 : x
y = !y ? 0 : y
return x + y;
}
/* 3장 연산자, 제어문 */
● 연산자
* 산술 연산자
- 생략 (전/후치 연산 위험한 연산자라서 사라지는 추세)
* 대입 연산자
- 생략
* 비교연산자
|
연산자 |
특징 |
|
== |
- 좌우 표현식의 평가가 동일할 경우 true 반환 - undefined와 null을 동등하다고 평가 - 문자열과 숫자를 비교할 경우 숫자를 문자열로 변환 후 평가 - 숫자와 불리언 값을 비교할 경우 true는 1로, false는 0으로 변환 후 평가 - 객체를 숫자 또는 문자열과 비교할 경우 객체의 valueOf(0 또는 toString(0 변환 값인 기본 타입 값으로 평가 |
|
=== |
- 좌우 표현싁 평가가 동일하고, 데이터 타입도 같을 경우 true 반환 - ==와 다르게 타입 변환을 하지 않음 |
|
!== |
- 좌우표현식의 평가가 다르거나, 혹은 데이터 타입이 다른 경우 true 반환 - ==와 다르게 타입 변환을 하지 않음 |
* 논리연산자(Short Circuit Lgical Operator)
[false] && [ ] : 앞이 false면 뒤에 연산을 안함
[true ] || [ ] : 앞이 true면 뒤에 연산을 안함
.. 그렇다면 언제쓰면 유용할까? 안전장치로 사용하자
function sum(x) {
var arr = x || [];
var result = 0;
for(var i = 0 ; i < arr.length; i++) { // arr가 undefined 여서 error 발생.
result += arr[i];
}
return result;
}
※자바스크립트에서만 유효한 방법이다.
* 비트 연산자
- 생략
* 기타 연산자 (★★★★★)
new : dynamic memory allocation operator
new는 constructor에게 할당된 메모리의 참조 정보를 전달 → this에 저장되도록 되어 있음
앞에 변수에게도 참조 정보를 전달, 이 정보를 받은것은 참조변수라고 함.
.(dot 연산자)
L-Value = R-Value (왼쪽, 오른쪽 위치의 점의 의미가 다르다)
var obj = { "prop" : "냉무"};
obj.prop = "속성";
여기서 . 은 속성변경의 의미(공간 - 여기에는 상수는 못옴)
var value = obj.prop;
여기서 . 은 속성접근의 의미(읽기)
delete
객체의 프로퍼티나 배열의 원소를 제거
배열은 delete해도 인덱스는 삭제를 못함, 그래서 앞으로 땡겨야함. 그래서 배열은 delete를 쓰지 않는게 좋음
객체에서 delete 하면 깔끔하게 지워짐
delete의 대상은 객체로 한정되고, 배열의 경우에는 사용하지 않는게 좋고, 객체 자체에 사용하는 것이 좋다.
arr.splice(인덱스 위치, 몇개)
instanceof
typeof function만 제외하고 모든 객체가 object를 반환해서 비교하기에 좋지 않다.
typeof의 결과가 object이면 instanceof로 비교한다.
var now = new Date();
now instanceof Date
[링크]
https://developer.mozilla.org/en-US/#
http://www.jetbrains.com/webstorm/
http://www.jetbrains.com/shop/eform/students
http://www.unicode.org/charts/
HIG (Human Interface Guideline)
번외
* 함수 이름에 오른쪽 버튼 refactor하면 해당 함수를 사용하는 것의 이름이 다 바뀐다
* Replace conditional with Polymorphism
* 객체지향은 조건문의 형태를 다형성을 이용한 코드로 바꿔서 사용할 수 있다.
function 일반적인 기능
method 객체가 소유
var arr = ["홍길동", 20, function() { console.log("hello") }];
arr[0];
arr[1];
arr[2](); // 함수 실행
'My Trace > SK고용디딤돌2기' 카테고리의 다른 글
| [SK고용디딤돌] 자바스크립트 (4/7) - 1주차 (0) | 2016.07.08 |
|---|---|
| [SK고용디딤돌] 자바스크립트 (3/7) - 1주차 (0) | 2016.07.07 |
| [SK고용디딤돌] 자바스크립트 (1/7) - 1주차 (0) | 2016.07.05 |
| [SK고용디딤돌] 오리엔테이션 - 1주차 (0) | 2016.07.04 |
| [SK고용디딤돌] SK고용디딤돌 2기 합격! (0) | 2016.07.03 |
