[Node.js] 2. http 모듈로 API 만들기

* 본 시리즈는 [위데이터랩]의 Node.js 강의를 매주 수요일 1시간씩 듣고 복습한 기록입니다.

 

 실습 전 기본 지식과 준비사항 

• localhost
  • 자신의 컴퓨터 주소
  • localhost나 127.0.0.1이라고 표현 (루프백 주소라고도 불림)
  • 자신만이 사용 가능하며 시뮬레이션 서버로 활용

• 모듈, 패키지, 라이브러리
  • 모듈 ⊂ 패키지 ⊂ 라이브러리

• HTTP 요청 메서드와 주소
  • 클라이언트 > GET, POST, PUT/PATCH, DELETE 메소드를 통해 > 서버에 요청
    • 예: GET/user/1
  • POST, PUT, PATCH 메소드는 body가 필요함 (JSON 필요)
• Postman
  • 다운로드(https://www.postman.com/downloads/) 및 로그인

Download Postman | Get Started for Free

• 워크스페이스 설정: 상단의 Workspaces > My Workspace 클릭
• GET 메소드로 링크를 입력해 Send하면 해당 페이지의 HTML을 긁어옴
  • 예: www.naver.com > 네이버의 HTML을 긁어옴

 

 HTTP 모듈로 API 만들기 실습 

• 주의사항
  • 서버를 사용할 때마다 VSCode 터미널에 명령어를 입력해야 함
    • node 파일명 (내 경우엔 node server.js)

 

 기본적인 코드 짜기 

1.  VSCode에서 NODE 폴더를 생성해 열고 server.js 파일 생성

2.  밑의 코드 작성

• 모듈 선언: const 모듈명 = require(’모듈명’);
• req = request, res = response를 의미
• URL을 입력하면 나타나는 화면에 띄울 HTML 코드 작성
  • http.createServer((req, res) => {
        res.write('HTML 코드')
        res.write('HTML 코드')
        res.end('HTML 코드')
    })

//http 모듈 사용
const http = require('http');

//서버 만들기 - 이 블록만 계속 변경됨
http.createServer((req, res) => {  //req = request, res = response
    res.write('<h1>TEST</h1>')
    res.write('<p>TEST</p>')
    res.end('<p>Hello</p>')
})

//8082 포트 사용
.listen(8082,() => {
    console.log('8082번 포트에서 서버 대기 중입니다.')
})

 

3.  VSCode의 터미널에 node server.js 입력해서 서버 가동

• 터미널 열기/닫기 단축키: Ctrl + `(백쿼트/백틱이라고 함)

4.  브라우저에 http://localhost:8082/ 입력 (포트는 임의로 8082로 설정했음)

5.  화면이 나옴

 

 본격적으로 HTTP 요청 메소드 사용해 API 만들기 

• GET, POST, PUT, DELETE 메소드 사용

//http 모듈 사용
const http = require('http');

//데이터 저장용
const users = {};
//서버 만들기
http.createServer((req, res) => {
    try {
      //GET 메소드 (Read)
      if (req.method === 'GET') {
        //url : /
        if (req.url === '/') {
          return res.end(JSON.stringify({
            message : "hello! Wedata lab",
          }));
        //url : /about
        } else if (req.url === '/about') {
          return res.end(JSON.stringify({
            message : "Welcome to Ezis School!",
          }));
        //url이 users이면
        } else if (req.url === '/user') {
          //users는 빈칸으로 만들어둔 변수라 아무것도 안 나옴
          return res.end(JSON.stringify(users));
        } 

      //POST 메소드 (Create)
      } else if (req.method === 'POST') {
        //url : /addUser
        if (req.url === '/addUser') {
          //해당 URL 입력
          //Body탭에서 raw 클릭 + JSON 선택
          //{key:value} 넣어줌
          let body = '';
          req.on('data', (data) => {
            body += data;
          });
          
          return req.on('end', () => {
            console.log('POST 본문(Body):', body); 
            const { name } = JSON.parse(body); 
            const id = Date.now(); //밀리세컨드 기준이라 id가 겹칠 가능성 극히 낮음
            users[id] = name; 
            res.end(JSON.stringify(users));  
          });
        } 

      //PUT 메소드 (Update)
      } else if (req.method === 'PUT') { 
        // url : /mUser
          if (req.url === '/mUser') { 
            //수정할 내용을 받음
            let body = '';
            req.on('data', (data) => {
              body += data;
            });
            return req.on('end', () => { 
            const { key } = JSON.parse(body); 
            const { name } = JSON.parse(body);
            users[key] = name; 
            res.end(JSON.stringify(users)); 
            })
          }

      //DELETE 메소드 (Delete)
      } else if (req.method === 'DELETE') {
        // url : /delUser
        if (req.url === '/delUser') { 
          //삭제할 데이터를 받음
          let body = '';
          req.on('data', (data) => {
            body += data;
          });
          return req.on('end', () => {
          const { key } = JSON.parse(body); 
          delete users[key]; 
          res.end(JSON.stringify(users));
          })
        }
      }
      // else
      res.writeHead(404);
      return res.end('NOT FOUND');
    } catch (err) {
      console.error(err);
      res.end(err.message);
    }
  })

//8082 포트 사용
.listen(8082,() => {
    console.log('8082번 포트에서 서버 대기 중입니다.')
})

• try-catch문 사용해 오류 처리
• 클라이언트 오류에 출력할 에러 메시지 설정
  • res.writeHead(404);
    return res.end('NOT FOUND');

 

 API 실행하기 

GET 메소드

1. VSCode 터미널에 node server.js 입력
2. 포스트맨에서 메소드를 GET으로 선택
3. 해당 주소 입력 후 Send 클릭

//GET 메소드 (Read)
if (req.method === 'GET') {
  //url : /
  if (req.url === '/') {
    return res.end(JSON.stringify({
      message : "hello! Wedata lab",
    }));
  //url : /about
  } else if (req.url === '/about') {
    return res.end(JSON.stringify({
      message : "Welcome to Ezis School!",
    }));
  //url이 users이면
  } else if (req.url === '/user') {
     //users는 빈칸으로 만들어둔 변수라 아무것도 안 나옴
    return res.end(JSON.stringify(users));
  }

 

GET 메소드 실행 결과

1.  /

2.  /about

3.  /user

 

POST 메소드

1. VSCode 터미널에 node server.js 입력
2. 포스트맨에서 메소드를 POST으로 선택
3. 해당 주소 입력
4. Body 탭 > 라디오 버튼에서 raw를, 콤보 박스에서 JSON 선택
5. {”name” : “name의 value”} 입력 후 Send 클릭

//POST 메소드 (Create)
} else if (req.method === 'POST') {
  //url : /addUser
  if (req.url === '/addUser') {
    let body = '';
    req.on('data', (data) => {
      body += data;
    });
          
    return req.on('end', () => {
      console.log('POST 본문(Body):', body); 
      const { name } = JSON.parse(body); 
      const id = Date.now(); //밀리세컨드 기준이라 id가 겹칠 일 없음
      users[id] = name; 
      res.end(JSON.stringify(users));  
    });
  }

POST 메소드 실행 결과

• /addUser
  • 결과에서 앞의 값은 id, 뒤의 값은 name
  • id: 현재 시각을 밀리세컨드 단위로 구분해 자동 생성
  • name: ‘hhhh’ 생성

• VSCode 터미널

 

PUT 메소드

1. VSCode 터미널에 node server.js 입력
2. 포스트맨에서 메소드를 PUT으로 선택
3. 해당 주소 입력
4. Body 탭 > 라디오 버튼에서 raw를, 콤보 박스에서 JSON 선택
5. 바꿀 새로운 값 {”name” : “name의 value”}를 입력한 후 Send 클릭

//PUT 메소드 (Update)
} else if (req.method === 'PUT') { 
  // url : /mUser
  if (req.url === '/mUser') { 
    //수정할 내용을 받음
    let body = '';
    req.on('data', (data) => {
      body += data;
    });
    return req.on('end', () => { 
      const { key } = JSON.parse(body); 
      const { name } = JSON.parse(body);
      users[key] = name; 
      res.end(JSON.stringify(users)); 
      })
    }

 

PUT 메소드 실행 결과

• /mUser
  • id: 정의되어 있지 않기 때문에 ‘undefined’
  • name: POST 메소드를 통해 입력한 값인 ‘hhhh’ > PUT 메소드를 통해 ‘h’로 변경

 

DELETE 메소드

1. VSCode 터미널에 node server.js 입력
2. 포스트맨에서 메소드를 DELETE으로 선택
3. 해당 주소 입력
4. Body 탭 > 라디오 버튼에서 raw를, 콤보 박스에서 JSON 선택
5. 삭제할 값 {”name” : “name의 value”}를 입력한 후 Send 클릭

//DELETE 메소드 (Delete)
} else if (req.method === 'DELETE') {
  // url : /delUser
  if (req.url === '/delUser') { 
    //삭제할 데이터를 받음
    let body = '';
    req.on('data', (data) => {
    body += data;
    });
    return req.on('end', () => {
    const { key } = JSON.parse(body); 
    delete users[key]; 
    res.end(JSON.stringify(users));
    })
  }
}

DELETE 메소드 실행 결과

• /delUser
  • id: 정의되어 있지 않기 때문에 ‘undefined’
  • name: PUT 메소드를 통해 변경한 값인 ‘h’를 삭제