0601 _ 서버 수업 내용

서버 수업
MDN : javascript
비주얼 스튜디오 코드 다운

자바스크립트를 해야한다.
자바스크립트는 주로 웹에 사용한다. 
요즘은 웹 밖에서도 사용 할 수 있게 환경이 마련
우리는 웹 밖에서 사용하는 자바스크립터를 사용해서 서버를 만들것

문법은 도큐먼터리를 찾아서 하자
노드.js를 하면서 나오는 문법들을 찾아가면서 한다

Node.js 교과서 라는 책이 정리가 잘되어있다.
Node.js 프로그래밍 라는 책도 잘 되어있따.

 

언어는 다양하게 사용한다.

하지만, 서치를 통해서 어떤 언어든 케어가 가능하다.

 

개념을 잡는게 더 어렵다. 

구조를 어떻게 잡는지,

 

우리는 웹 서버를 개발을 하는 것이다. 

위에서 동그라미를 친 부분

HTTP(프로토) 서버

 

 

 

클라에서 요청을 보내면, 서버에서 요청을 처리해서 응답한다.

이 구조가 중요한 것

 

중요 1. 1번 요청 1번 응답이다.

 

Connectionless & Stateless

 

중요 2. 상태를 저장하지 않는다.

 

 

중요 3. 자원의 위치를 찾는다. 위치가 있다. 

 

 

https://www.coupang.com/vp/products/50177365?itemId=176796786&vendorItemId=3422857702&isAddedCart=

 

? 뒤 부터는 데이터이다.

 

https://www.coupang.com/vp/products/50177365 까지가 URI

 

 

GET 방식은 URI 뒤에 붙여서 보내는 것

POST 는 Body에 넣어서 숨겨서 보내는 방법

 

Get 방식은 끌고올때 

Post 는 밀어넣을때

Put 정보 업데이트

Del 정보 삭제 

 

이걸 묶어서  CRUD(Create Read Update Delete) 방식아리 부른다

 

여기까지는 HTTP 프로토콜의 특징이다.

 

------

 

노드에 대해서

 

Node.js

 

 

노드는 언어가 아니라 자바스크립터가 동작할 수있는 런타임 환경이다.

 

즉, 자바스크립터를 사용할 수있는 공간을 만들어서 사용하는 것

 

 

V8 엔지 위에서 작업을 하는 것. 

 

 

 

 

노드.js 는 이벤트 기반, 논블로킹 I/o 모델 사용 (병렬적으로 사용한다. 비동기 방식으로)

 

npm은 패키지 생태계이다. (유니티 어셋) // 오픈소스에 다양한 패키지가 있는 것

 

서버에게 요청을 보내는 건 모드 클라이언트이다. 

 

HTML + CSS + javaSC 로 웹페이지는 만든다.  - 퍼블리셔 = 프론트 개발자 = 웹 개발자

 

서버를 만드는 것 - 서버 개발자 = 백앤드 개발자

 

내가 도메인으로 들어가는 거 (입력하는 것 ) = 요청하는 것

 

페이지를 받아오면 (HTML)

 

요청을 하면 브라우저(클라)에 띄어줍니다.

 

--

 

이벤트 기반 

이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식

이벤트로는 클릭이나 네트워크 요청

 

이벤트가 발생할 때 무엇을 할지 미리 등록해두어야 합니다.

이벤트 리스너에 콜백함수를 등록한다고 표현합니다.

 

우리가 사용하는 델리게이트와 비슷함.

 

이벤트 기반 모델에서는 이번테 루프라는 개념이 있다.

여러 이벤트가 동시에 발생했을 때 어떤 순서로 콜백함수를 호출 할지를 이벤트 루트가 판단합니다

 

자바스크립트 코드에서 맨 위부터 한 줄 씩 실행합니다.

 

언어의 종류 

인터프리터  - 자바는 인터프리터라서 컴파일 하지 않고, 맨 위에서 한 줄씩 처리

컴파일 - 우리가 사용하는 C# // 우리가 작성한 언어를 컴파일로 묶어서 처리

 

호출한 함수를 호출 스택에 넣습니다.

스택으로 동작

 

function first() {

 

}  

 

-- 메서드의 정의 방법

 

= C# 에서는

void First(){

 

}

 

자바는 네임은 소문자로 시작

 

호출 할 떄는 

 

first(); 하면 호출

 

---

setTimeout(run,3000);  -> 내장 메서드 씨샾에서 인터벌 // 3초 뒤에 run 메서드 실행

 

 

★

이벤트 루프, 테스크 큐, 백그라운드 를 알아야한다.

 

이벤트 루프 - 이벤트 발생시 호출할 콜백 함수들을 관리하고, 호출된 콜백 함수의 실행순서를 결정하는 역할을 담당.

노드가 종료될때까지 이벤트 처리를 위한 작업을 반복하므로 루프라 불립니다.

 

테스크 큐 - 이벤트 발생 후 호출되어야 할 콜백 함수들이 기다리는 공간, 콜백들이 이벤트 루프가 정한 순서대로 줄을 서 있으므로 콜백 큐라고도 부릅니다.

 

백그라운드 - 타이머나 I/O 작업이 기다리는 공간

 

 

 

 

 

만약 호출 스택에 함수들이 너무 많이 차 있으면 3초가 지난 후에도 run 함수가 실행되지 않을 수도 있습니다.

이벤트 루프는 호출 스택이 비어 있을 때만 테스크 큐에 있는 run 함수를 호출 스택으로 가져오니깐

이것이 setTimeout의 시간이 정확하지 않을 수도 있는 이유

 

-----

논블로킹 I/O

 

이벤트 루프를 잘 활용하면 오래 걸리는 작업을 효율적으로 처리 할 수있다.

오래 걸리는 함수를 백그라운드로 보내서 다음 코드가 먼저 실행하게되고...

 

비동기방식

setTimeout(콜백, 0) // 비동기방식으로 만드는 것

 

싱글 스레드

싱글 스레드는 작업을 혼자서 처리해야한다.

자바 스크립트와 노드에서 논블로킹이 중요한 이유는 바로 싱글 스레드 이기 때문입니다. 

 

----

 

서버로서의 노드의 장단점

싱글스레드 방식으로 프로그래밍은 멀티 스레드 방식보다 상대적으로 쉽습니다.

 

개수는 만지만 크기는 작은 데이터를 실시간으로 주고 받는데 적합합니다.

API서버가 노드를 많이 사용합니다.

이미지나 비디오 처리, 대규모 데이터 처리는 노드를 권장하지 않는다.

 

JS 자바스크립터와 파이썬 두 개는 정말 핫하고, 공부해야하는 언어이다.

 

노드는 웹, 모바일, 데스크톱, 어플리케이션 (리액트)까지 사용이 된다.

공부한다면, React를 강력추천한다. React는 페이북 진영에서 주로 사용한다.

 

-----

 

노드 설치하기 

 

LTS 가 안정성, 최신버전은 베타 느낌이라서 LTS 추천

 

깔리면 cmd 창 열어서

 

node -v  

npm -v 

 

입력해서 버전 확인해보자

 

 

 

npm 버전이 너무 낮으면 업데이트를 할 수있다.

 

cmd 에서 입력하면 최선버전으로 업데이트

npm install -g npm 

 

npm install option

 

-g 는 글로벌 옵션 // 프로젝트 상관없이 전역으로 설치하겠다

 

 

 

 

---

 

자바스크립터 문법

 

자바스크립트는 ES2015+ 문법을 사용한다.

자바스크립트는 매년 새로운 버전을 출시한다.

JAVA와 JavaScript는 전혀 다른 것이다.

 

공부할 떄는 ES2015(ES6)  ES6 이후 버전을 하는ㄱ ㅔ좋다.

많은 변화가 있어서

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Grammar_and_Types

문법과 자료형 - JavaScript | MDN

---

const, let 

 

 

var 는 쓰지 말기

 

변수의 값이 변한다. let

변수의 값이 상수 값이다. const 

 

서버는 const 를 더 많이 사용한ㄷ.

 

DataType 변수명 ;

 

const hello();

 

const 와 let이 공통으로 가지는 특징인 블록 스코프에 대해서 알아보자

블록 스코프 = 영역

 

자바스크립터를 조금더 고급버전은 TypeScript이다. (문법 제약이 더 심한것)

자바스크립터는 유연하지만, 모호한게 많았다.

 

const는 한번 대입하면 다른 값으로 바꾸지못한다.

let는 변화 가능

 

 

---

 

큰따옴표나 작은따옴표로 감싸는 기존 문자열과 다르게 " " ' ' 두 개 다 가능하다.

그리고 백틱 ` ` 으로도 감쌀 수 있다. 

`` 를 사용하면 문자열을 할 수 있다.  

 

 

실습 해보자

 

파일열기 - 노드 폴더만들기 열기 하면 노드 폴더가 생긴다.

 

 

새 폴더 만들기

 

폴더 누르고 안에 파일 만들기 

 

 

코드 치고, 새터미널 -> cd 

 

---

 

 

변수에 함수를 넣을 수도 있다.

 

 

 

sayJs:  // 이렇게 메서드의 맴버를 정의 해줄 수 있다.

 

 

 

동적으로 변수를 추가 할 수도 있다.

 

 

 

forEach 문은 이런식으로 사용하기

 

 

----

함수선언

 

// let relationship1 = {
//     name: 'zero',
//     friends: ['nero', 'hero', 'xero'],
//     logFriends: function (){
//         let that = this;
//         this.friends.forEach(function (friend){
//             console.log(that.name, friend);
//         });
//     }
// };
// console.log(relationship1);
// relationship1.logFriends();

// let relationship1 = {
//     name: 'zero',
//     friends: ['nero', 'hero', 'xero'],
//     logFriends(){
//         this.friends.forEach((friend)=>{
//             console.log(this.name, friend);
//         });
//     }
// };
// console.log(relationship1);
// relationship1.logFriends();



//변수 선언 
//let, const 
let age = 10;
const name = '홍길동';

//출력 
console.log(name);
console.log(`age: ${age}, name: ${name}`);

//함수 선언 
function sayHello(){
    console.log("Hello World!");
}
//함수 호출 
sayHello();

//함수 선언 + 매겨변수 
function sayHello2(message){
    console.log('Hello World!' + message);
}

//함수 선언 + 반환 
function sayHello3(){
    return 'Hello~3';
}

let message = sayHello3();
console.log(message);

//객체 만들기 
let obj = {};

//객체에 속성추가 : function 
let obj2 = {
    sayHello(){
        console.log('Hello~');      
    }
};
let obj2_1 = {
    sayHello : function (){
        console.log('Hello~2');
    }
};

//개체에 속성(function) 호출 
obj2.sayHello();


//객체에 속성추가 : variable 
let obj3  = {
  name : '임꺽정'  
};

obj3["age"] = 34;   //동적으로 속성추가 
obj3.level = 99;

//객체에 속성 출력 
console.log(obj3.name);
console.log(obj3.age);
console.log(obj3.level);

이걸 할 줄 알아야한다.

 

 

 

---

 

최종적을 우리가 만드는 건 RestAPI 이다.