본문 바로가기
코리아 IT아카데미/node.js~~~

2022_0114 | 노드 오류와 예외처리

by Sharon kim 2022. 1. 25.

01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function workP(sec){
            //promise 많은 콜백 함수를 사용하다 보면 코드가 복잡하게 중복이 되는 경우 생김 -> 콜백 함수 발생
            //코드의 중첩이 많아지는 콜백의 지옥에서 벗어나게  해주는 객체
            //promise의 인스턴스를 리턴하고 
            //then에서 리턴한 것을 받는다.

            return new Promise((resolve, reject)=>{ // 서버에 요청 , 응답
                //promise 생성시 넘기는 callback = resolve, reject
            //resolve 동작 완료시 호출, reject 에러 났을 경우

            setTimeout(() => {
                    resolve(new Date().toISOString());
            }, sec*1000);

            })
        }
        workP(1).then((result)=>{
            console.log('첫번째 작업', result);
            return workP(1);
        }).then((result)=>{
            console.log('두번째 작업',result);
        })

        // 첫번째 작업 현재 시간
        //두번째 작업  현재 시간
    </script>
</body>
</html>

01.js

//console.log('안녕하세요.  Node.js');

// const http = require('http'); // 모듈 갖고 오기
// const hostname = '127.0.0.1'; // 서버 주소
// const port = 3000; // 인터넷 경로

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');//html 의  header부분
  res.end('Hello World'); //html의 body부분
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- async / awit
    promise 줄였다 사용하는 방법
    -->
    <script>     // workP 작업할 프로미스 줄인 말
        function workP(sec){
            return new Promise((resolve, reject)=>{
                setTimeout(() => {
                    resolve(new Date().toISOString());
                }, sec*1000);
            })
        }
        function justFunc(){
                return 'just function';

        }

        async function asyncFunc() {
                return 'async function';

        }
        console.log(justFunc()); // Promise로 구현될 함수
        console.log(asyncFunc()); // 일반함수 구현
        console.log(workP()); // async 를 사용한 함수
    </script>
</body>
</html>

03-0.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>     
    // 사용자 정의 오류
        function sum(a, b){ 
            if(typeof a !== 'number' || typeof y !== 'number'){
                throw 'type of arguments must be number type';
                //조건 참이면   throw 예외 발생시켜서 오류메시지가 발생
            }
            console.log(a+b);
        }

        sum(1, '4');
    </script>
    
</body>
</html>

03-1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <script>
        // 일반적인 예외 처리
        function f2(){
            console.log('f2함수 시작');
            throw new Error('에러');
            console.log('f2함수 끝남');
        }

        function f1(){
            console.log('f1함수 시작');
            try{
                f2(); //예외 상황이 발생할 수 있는 문장
            }catch(e){
                console.log(e);//예외 상황이 발생했을 경우 처리할 문장 (e는 Exception 객체)
            }
            console.log('f1함수 끝');
        }

        f1();
    </script>
</body>
</html>

03-2.html

 

3초 뒤 실행

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>
        // 일반적인 예외 처리
        function wait(sec){
            return new Promise((resolve, reject)=>{
                setTimeout(() => {
                    reject('error!');
                }, sec*1000);
            });
        }

        // wait(3).catch( e => {
        //     console.log('1set catch', e);
        // });

        // // chain(catch의 연속  사용)은 같은 객체를 리턴할 때만 가능하다. 
        // wait(3).catch(e=>{
        //     console.log('1set catch', e);
        // })//wait 함수의 에러를 받음
        // .catch(e=>{
        //      console.log('1set catch', e);
        // })// 위 catch 구문의 상태를 받음. 에러를 잘 받았으므로 에러가 발생하지 x

        // chain을 하고 싶을 때
        wait(3).catch(e=>{
            console.log('1set catch', e);
            throw e
        })
        .catch(e=>{
             console.log('1set catch', e);
        })
    </script>
</body>
</html>

03-3.html

직접 결과 보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <script>
        //async/ await의 예외처리 1

        // async function myasyncFunc(){
        //     return 'done';
        // }

        // const result = myasyncFunc(); // 함수 호출이면서도 반환 
        // console.log(result);//함수오류에 발생하지 않았다면 실행 성공

        //async/ await의 예외처리 2
        // promise와 동일하게 예외 처리

        // async function myAsyncFunc(){ // 자바스크립트 내에서 에러가 아니고 가상으로 에러 발생, 일반적인 에러 발생 
        //     throw 'myAsyncFunc Error!';
        // }

        // function myPromiseFunc(){//Promise를 이용
        //     return new Promise((resolve, reject) =>{ // 에러가 발생했다는 가상 reject 사용
        //         reject('myPromiseFunc Error!');
        //     });
        // }

        // const result = myAsyncFunc()//함수를 호출하고
        //                          .catch(e=> {//에러를 처리하기 위한 문장
        //                              console.log(e)
        //                         });
        // const result2 = myPromiseFunc()
        //                         .catch(e=> {
        //                             console.log(e) 
        //                         });

        //async/ await의 예외처리 3
        //     function wait(){
        //         return new Promise((resolve, reject)=>{
        //             setTimeout(() => {
        //                 reject('throw Error!');
        //             }, sec*1000);
        //         })
        //     }

        // async function myFunc(){
        //     console.log(new Date());
        //     try{
        //         await  wait(2); // Promise의 처리를 기다리는 중
        //     }catch(e){
        //         console.log(new Date());
        //     }

        // }
        // const result = myFunc();

         //async/ await의 예외처리 4
        
         async function myAsyncFunc(){
             console.log(new Date());
             const result = await wait(2).catch(e => {
                 console.error(e)
             });
             console.log(new Date());
         }

         try {
             myAsyncFunc();
         } catch (e) {
             
         } // 안됨

             myAsyncFunc().catch(e) // 됨
             //catch(e) Promise에 대한 오류만 잡기 때문에 현재 오류상태로 표시됩니다.
    </script>
</body>
</html>

node.js 다운로드
https://nodejs.org
(LTS버전 다운로드)

node.js 버전 확인
cmd 창에서 node -v 명령어로 확인합니다.

npm 버전 확인
cmd 창에서 npm -v 명령어로 확인합니다.

package.json 파일 만들기
모듈을 관리하는 설정파일

nodejs가 필요한 것들을 준비
json - 자료공유한다면 데이터베이스를 공유를 할수 있는 언어 

npm init : 옵션을 직접 제공
npm init -y : 기본값을 기준으로 바로 생성

node.js 실행하는 방법
node 파일이름


클라이언트 - 사용자가 보는 컴퓨터
서버 - 웹서비스 할 리소스가 저장되어 있는 컴퓨터
웹 서버 - 이후 카페 정리


웹 개발
CRUD - 데이터 처리의 기본 기능인 생성, 조회, 수정, 삭제를 말합니다.
create, read, update, delete

콘솔창에 결과물 확인 - > 리얼타임이라고 함 - 애플리케이션에서 어떤 요청을 신속하게 처리하여 응답해야 하는 것
블로킹, 노블로킹, 동기식, 비동기식

//프론트, 백엔드의 전반적인 과정
블로킹 - 제어권을 넘겨주지 않고 대기하게 만드는 것
논블로킹 - 다른 작업과 관계없이 일을 수행하는 것

[노드의 실행 과정]
노드 -> 비동기식, 논 블로킹 방식

1. 이벤트 루프는 일종의 감시자라고 생각하면 됩니다. 어떤 이벤트가 있는지 계속 감시하고 있는 감시자이고
이벤트가 감지되면, 그 작업을 위해 작업 스레드를 생성합니다.

2. 작업스레드는 일종의 작업 공간 같은 것입니다.
이벤트를 처리하기 위해 이벤트 루프는 처리 작업을 작업 스레드에게 맡겨버리고 다른 이벤트가 없나 다시 검사하기 시작합니다.

스레드 ? 하나의 브라우저를 실행한 것이 프로세스 , 

그 브라우저에서 다른 작업을 수행하는 것이 스레드(경량화된 프로세스)

3. 작업 스레드가 작업을 받았을 때 , 콜백 함수라는 것을 받는데 콜백함수란 작업이 끝나면 실행하는 함수입니다.

4. 작업 스레드는 작업을 마치면 이 콜백함수를 실행하고 싶다고 최고 감시자인 이벤트 루프에게 응답을 보냅니다.
응답을 받은 이벤트 루프는 콜백함수의 결과를 클라이언트에 전송하여 우리가 볼 수 있는 결과로  바꾸어 줍니다.