2022_11_19_프로미스

동기와 비동기

동기는 순차적이라면,

비동기는 병렬적

서버와 웹브라우저의 통신은 예측하기 힘들다.

 

프로미스(Promise)

는 비동기를 간편히 처리할 수 있도록 돕는 오브젝트

• 콜벡으로 인한 복잡도 증가와 예외처리 어려움을 해결하기 위해 만들어짐
• 비동기 작업에서 성공과 실패를 분리해 메소드를 수행
• resolve(value):일이 성공적으로 끝난 경우 -> 프로미스를 실행한 곳의 then으로 들어간다.
• reject(error):일이 성공적이지 않은 경우. 에러 발생 시 ,> 프로미스를 실행한 곳의 catch로 들어간다.

// new Promise ( function ( resolve, reject ){ });
//함수의 return은 값을 받을 수 있다.
function func1( ){
    return new Promise (function(resolve, reject){
        resolve('성&&공');
    });
}
function func2(){
    return new Promise (function(resolve, reject){
        setTimeout(function(){
            resolve('성_공');}, 1000);
    });
}

func1().then(function(result){
    console.log('result1 : ', result);
});
func2()
.then(function(result){
    console.log('result2 : ', result);
    return 'a'; 
}).then(function(abc){
    console.log('abc : ', abc);
}); 
//함수1을 리턴하면 .then이라는 친구로 값을 받겠다.
//then은 promise를 벗기고 팬딩 벗기고 resolve에 들어온 내용이 온다.
//func2 팬딩을 then이 기다렷다가 그 resolve 내용을 첫번째 인자로 받아옴 - 1초 성공을 가져온다.
//then 안에 return 시키면, 다음 then이 받는다. = 체이닝

1. state (상태)

pending > fulfilled(성공) or rejected(실패)

pending : promise가 만들어져서 지정한 명령어를 실행(opaeration)할때

pending이 실행완료 하면 > fulfilled(성공) or rejected(실패)

pending : promise를 수행중인 상태 / 성공과 실패가 결론이 나지 않고 돌고 있는 상태

fulfilled : resolve된 상태

rejected : 지켜지지 못한 상태

settled : fulfiied 혹은 rejected로 결론이 난 상태

 

프로미스는 비동기

동기처럼 사용하는 방법 체이닝

 

 

Producer  vs  Consumer

1. Producer

• 새로운 프로미스가 만들어질때는, 함수가 바로 실행 된다. (염두!!!)
• 우리가 원하는 기능을 비동기적으로 실행하는 promise
• promise는 class기 때문에 new라는 키워드를 통해 오브젝트 생성 가능
• 콜벡함수 2개 받음 > 기능을 성공적으로 수행했을 때 resolve(value), 실패 했을 때 reject(error)
• 파일을 읽거나 network 서버 관련일은 비동기적으로 하는게 좋다.

2. Consumers : then, catch, finally

then은 앞의 함수의 팬딩을 기다렸다가 resolve 값을 뒤의 인자로 받는다.(return과 비슷하다)

then에서 return 은 다음 .then에게 그 값을 반환한다.  =  체이닝

 

 

 

 

 

 

 

---

fs 모듈 

콜벡함수 방식으로 처리했었으나, 업그레이드로 프로미스 방식을 사용할 수 있게 되었다.

 

 

 

프로미스

 

---

실습

 

 

 

---

http 통신

클라이언트 -> 서버로 요청(request)

서버의 응답(response)  > 클라이언트 

 

nodejs를 통해 서버 구축 방법

http와 express 두개

 

 express 를 쓸것임

---

http 모듈로 서버 만들어보기!

 

http 모듈

는 내장모듈이고, 오래전부터 있어서 요즘은 거희 사용하지 않음

 

 

1. const http = require('http');

http모듈을 불러와서 객체에 넣는다.

내장 모듈은 require로 불러서 객체에 넣는다.

 

 

2.const fs = require('fs').Promise;   //파일을 읽기위해 fs모듈 불러오기

const server = http.createServer( function (req, res ){   // server라는 객체에 서버 생성 객체 함수 createServer

fs.readFile('./2022_10_27_Cafe drink documentation.html')  // fs모듈 파일 읽어오는 명령어
        .then(function(data){                                                 // than > 위의 명령어 실행 후 대기했다가 뒤의 명령어를 실행                                                                                                              res.end(data.toString()); 해라
            res.end(data.toString());                                         // res 서버의 응답. end 마침표로 (해당 파일을 보낸다.)

};

 

 

createServer는

• 서버를 만드는 객체
• req(클라이언트의 서버요청)
• res(서버의 그에 대한 응답)

 

 

 res.end 를 해주지 않으면,

서버는 응답에 대한 마무리를 설정하지 않아서 무한 로딩에 빠짐

 

 

sever.listen( port, callback)은

서버를 첫번째 매개변수 포트로 실행

listen은 서버를 실행시키고, 클라이언트를 기다린다. 

sever.listen(8080, function(){

   console.log('8080번 포트로 실행');

}); 

 

=> fs. ~ . then은

앞의것을 실행 완료 후, 뒤의 것을 실행한다.

 

=> 밑의 콜벡은

8080포트를 실행시키고, '8080번 포트로 실행'이란 console.log가 실행 된다.

서버 주의 할 점

홈페이지 접속 방법 : 브라우저 키고 > localhost:8080 

접속은 파일이 실행중인 상태에서 서버에 접속해야 한다 ( node js파일 터미널로 실행 )

파일을 수정 : 현재 로딩중이면 x, 터미널에서 실행 취소 : ctrl + c 해주고, 파일 수정 한 것을 저장해야 된다.

서버 코드 수정시 서버를 끄고 >  저장  > 다시 실행 >   접속

우리는 접속시 listen(8080, ~)이란 얘는 접속시 8080포트를 열겠다는 의미이다.

 

const http = require('http');
const server = http.createServer( function (req, res ){ //createServer는 req(클라이언트의 서버요청) res(서버의 그에 대한 응답)
        res.write('<h1>HELLO</h1>');   //클라이언트가 8080으로 접속하면 실행될 함수
        res.end('<hr>');   //res.end를 해주지 않으면, 마침표가 없어서 끝나지 않음 = 더이상 응답을 보내지 않겟다. (서버의 응답)
});

//서버라는 객체 
//createServer로 만들어진 객체는 .on이라는 얘를 쓸수있고, 얘는 이벤트를 등록하는 함수임
//server.on(); // 이벤트 등록

server.listen(8080, function(){         //서버실행 하고, 클라이언트를 기다림 
    console.log('8080번 포트로 실행'); 
});

 

 

 

response 객체

서버가 클라이언트한테 응답할 때 필요한 것들이 들어간다.

• writeHead ( = 응답헤더를 여기서 작성 )
• write 응답 본문 작성
• end 응답 본문 작성 후 응답 종료 ( 질문 마무리 )

검사 > 네트워크 > 새로고침 (서버에 접속하게 됨) > 네트워크란에 어찌 통신했는지 쓰임 

 

 

 

localhost

• 내 컴퓨터
• ( localhost:8080 > 내 컴퓨터의 8080포트 열어라)

port

• 서버 내에서 데이터를 주고받는 프로세스를 구분하기 위한 번호
• 기본적으로 http 서버는 80번 포트 사용 ( 생략 가능, https는 443 )

 

씨컬라이즈 배울떄 에이싱크웨이즈? 배울것

 

http 응답

상태코드란? 응답을 할 때 상태를 알려주는 것

이것은 정해져있다

 

100번대는 처리중인 상태

 

200번대는 성공

 

300번대는 리다이렉트 다른페이지로 이동할때

 

400번대: 요청 오류

400:잘못된 요청, 401:권한 없음, 403: 금지됨

404: 찾을 수 없음(page not found)

 

500 : 서버 오류

정해진 형식을 따라서 해줘야 한다.

 

http는 우리가 잘 사용하지 않을것이라, 깊게 공부 ㄴㄴ

---

실습 로컬, 서버에 파일 적용

 

http 모듈

1.로컬 8080 포트로 접속하면 애벌레 html이 뜨도록 시키기

2.파일질라에서 서버 접속 후 애벌레 html업로드 후 putty에서 실행

 

내컴퓨터에서 서버파일 적용 시키고 >  해당 파일(서버js + 관련된 파일)을 서버에 업로드(파일질라로)

> 푸티로 실행햇을떄 > 내 서버(공인아이피 : 8080)로 애벌레 html파이 뜨게 하도록

1. 로컬 작업

1. 로컬 서버 만들고 html파일 적용

const http = require('http');
const fs = require('fs').promises;

const server = http.createServer( function (req, res){
    fs.readFile('./애벌레.html')
    
    .then(function(data){
        res.end(data.toString());
    });
    console.log('데이터 전송됬나?');
});

server.listen(8080, function(){
    console.log('8080번 포트로 실행');
});

2. localhost:8080 으로 적용 확인

 

 

2. 서버 작업

파일질라에서

 

1.서버js 파일과 그곳에 쓰인 소스 파일들 같이 서버에 업로드

 

 

2. ncp(네이버 클라우드 플랫폼)에서 8080포트를 열어줘야 한다.

 

3. 그 다음 putty로 접속

로그인 후

vscode랑 사용법은 같다

cd명령어로 해당 서버 폴더에서 노드 파일 열기!

cd /var/www/html/sever2 node '파일명.js'

 

서버 적용 확인법은

웹브라우저에서

공인 아이피 : 포트넘버

여기서 나는 8080포트를 사용했으니 > 공인 아이피: 8080