[JS] 전문가교육 1일차 - 오전

오늘부터 2일동안 자바스크립트 전문가 교육을 듣게 되었습니다.

---

자바와 자바스크립트의 차이?

햄과 햄스터의 차이라고 볼 수 있다! 비슷할 것 같지만 전혀 다르다.

자바는 객체 지향 언어지만..

엄밀히 프로그래머 입장에서 자바스크립트 언어는 객체 지향 언어가 아니라 객체 기반 언어다. 근데 객체 기반 언어는 없는 말이다. 객체 기반 언어는 그냥 만든 말이다. 정확히 말하면 프로토타입(모형, 시제품) 언어라고 볼 수 있다.

객체 지향 언어 : 모든 것을 객체로 관리한다. 재사용성과 유지보수성을 생각해서 만들어야 된다. Java, C++ 등

• 객체(object) : 클래스의 인스턴스
• 명사적 특징 : 그 객체가 가지고 있는 데이터(data) ex) 펜의 경우 - 색깔
• 동사적 특징 : 그 객체로 할 수 있는 행위(behavior) ex) 펜의 경우 - 쓰다
  
• 상태는 행위에 영향을 준다.

• 	C	Java	분석/설계
  명사적 특징(data)	변수	Field	attribute
  동사적 특징(behavior)	함수	Method	operation (behavior)

• 클래스(class) : 객체를 만들기 위한 틀
• 객체(object) 와 인스턴스(instance)의 차이 : 객체는 unique하고, 인스턴스는 infinite하다. 
      예를 들어 책상에 여러 개의 펜이 있을 때 책상 위의 펜들을 인스턴스라고 말하고, 그 중 필기를 위해 한 개를 들었을 때 그것을 객체라고 말한다. (객체는 총칭해서 부르는 말이다.)

* 오라클이 다음에 JDK 업데이트 할 때에는 자바가 자바스크립트를 지원하도록 하겠다고 했다고 한다.

자바스크립트 왜 배울까?

가장 많이 사용되는 곳은 Web. (웹의 내용(html), 표현(css), 동작(javascript))

자바스크립트에서는 Ajax(비동기식 요청)와 DOM제어로 많이 사용한다.

자바스크립트의 특징

형(type)을 지정하는 키워드가 없다. 그래서 a=10, a=3.5, a=func() 모두 사용 가능.

즉, 메모리를 효율적으로 관리할 수는 없다. (개발자의 몫)

---

ECMAScript

javascript는 ECMAScript 표준을 따르고 있다.

그럼 개발자는 EMCAScript 표준을 따르면 어떤 해석기에서도 해석 가능하다는 뜻이다.

ECMAScript 객체는 속성들의 모음

- 객체들은 0개 이상 속성을 가질 수 있다.

- 속성들은 다른 객체, 원시 값(primitive values), 함수(functions)를 포함할 수 있다.

▷ 변수와 method 구분 없이 모두 속성이라고 얘기한다.

▷ 자바스크립트에서 method라고 부를 때가 있고 함수라고 부를 때가 있다.

그럼 언제 함수라고 부르지?

▶ 자바스크립트에서는 클래스가 없기 때문에 함수를 가지고 객체를 만들 경우.

그럼 언제 method라고 부르지?

▶ 동작을 실행하는 경우.

내장 오브젝트

이 객체들은 모두 함수로 구현되어 있는 생성자라고 생각하면 된다. ECMAScript에서는 JSON도 지원한다.

JSON은 데이터 표현 형식들 중의 하나이다. (http://json.org)

– global object,

– Object object,

– Function object,

– Array object,

– String object,

– Boolean object,

– Number object,

– Math object,

– Date object,

– RegExp object,

– JSON object,

– Error objects

• Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError and URIError.

Objects

• EMCAScript는 클래스를 사용하지 않는다. - Javascript 역시 클래스 x
• 대신에 객체를 만들기 위해서 함수를 이용한다. (생성자함수)
  첫글자가 대문자이면 '아~생성자함수구나!' 라고 생각하면된다. - 메소드와 구분하기 위해서
• literal notation
• Constructors

ECMAScript 연산자 : 단항, 다항, 사칙, 비트이동, 관계, 동등비교, 비트, 비트논리, 할당, 콤마 연산자 등

자바스크립트의 독특한 연산자!! - 타입까지 비교해주는 연산자 ( ===, !== )가 있다.

short circuit - &&, || : 이것들의 결과는 T/F가 아니다. 왼쪽 항 또는 오른쪽 항의 결과가 대입된다.
    true && true = true(모두 참일 경우 마지막 항이 결과값), false && ? = false(앞이 F면 비교할 필요도없이 결과가 F)

---

자바스크립트 디버깅 (크롬 기준 설명)

크롬 - [F12]를 누르면 개발자도구가 나옵니다.

거기서 [Console] 탭을 눌러봅니다.

이곳에서 간단한 명령(자바스크립트) 실행가능합니다.

* 깨알 Tip!

간단한 명령 실행을 할 때 주소창에

about:blank

에 들어가서 실행하는 것을 추천합니다!

깨~끗해요

간단한 명령(자바스크립트)를 실행해보겠습니다.

> console.log("Hello")

Hello

>alert("Hello")

>a=10;
  b=20;
  c=a+b;

  console.log(c);

30

* 참고로 3번째 명령문의 경우 enter가 아닌 shift + enter로 바로 다음줄에 입력가능합니다.

* Tip!
 위의 사진을 보시다시피, 어느정도 입력하다보면 희미하게 회색으로 자동완성이 되면서 밑에 입력가능한 명령어들이 나옵니다. 이때 희미한 회색이 본인이 사용하려는 명령어인경우 [Tab]을 누르시면 자동완성이 됩니다.

* Java는 인터프리터 언어이다. 그것을 확인하는 명령.

> console.log("log");

   console.error("error");
   console.info("info");

   console.debug("debug");
   console.warn("warning");

console.log("헉! %s가 %d층짜리 건물을 뛰어넘습니다.", animal, count);

console.log('%c배경은 green, 글자색은 red로 표시됩니다.', 'color:red; background-color:green');

자바스크립트는 형식 문자열(%s, %d(10진문자), %c(style을 나타낼수있는데, 안될 수도 있으므로 잘 사용 x))을 가질 수 있다.

---

웹 아키텍처와 웹 어플리케이션 아키텍처

1. HTTP Client-Server Architecture

• 브라우저가 서버의 페이지를 요청하면 서버는 해당 파일을 찾은 다음 HTTP응답을 통해 클라이언트에 전송
• 브라우저는 응답된 페이지를 해석하여 화면에 보여준다.
• request 정보는 사용자가 원하는 파일 또는 리소스의 위치와 브라우저에 관한 정보를 포함
• reponse 정보는 요청한 자원에 관한 정보를 가지고 있으며, 일반적으로 텍스트 형태이며, 그래픽 등을 바이너리 정보를 포함할 수도 있다.

요청은 2가지가 있다.

• 내가 클릭하거나 주소를 입력하면 동기 방식
• 트위터나 페이스북은 화면 전체가 refresh가 안되는데 이것이 비동기 방식(자바스크립트의 역할)

2. HTTP Message

• Request 메세지 본문에 들어가는 것은 서버에 보내야 할 파라미터들, 업로드할 때는 업로드할 파일들
• Response 메세지 본문에 있는 것이 html 본문에 나온다.

3. HTTP Request

• GET : 받는 용도
• POST : 주는 용도

4. HTTP Response

• HTTP 응답에는 응답상태와 헤더, 그리고 메시지 바디를 포함한다.
• 응답 헤더에 간혹 쿠키 정보가 들어있을 수도 있다.

5. 웹사이트 구조와 접근 URL

• protocol://host:port/path/file

6. 웹 어플리케이션 아키텍처

JSP는 결과를 보여주는 페이지인데, 즉 웹 개발자보다 web publisher 직군이 다루는 것이 낫다.

 - 웹 문서 시대(1990년대) : html + css + jsp가 모두 한 파일에...

 - 웹 표준 시대(2000년대 초반) : 서버단에 돌아가는 페이지에 MVC 패턴을 적용.

 - Ajax 시대(2000년대 후반) : 비동기 호출 사용

 - HTML5 시대(2010년대 초반) : HTML5 + CSS3 + HTML5 API(Javascript)