[Node.js] Node.js로 백엔드 개발자와 소통하는 프론트엔드 개발자 되기

MINEW·2022년 11월 16일
0

Node.js

  1. Node.js 란?
    - Node.js는 자바스크립트 실행 환경입니다.
    - 과거에는 자바스크립트 런타임이 브라우저 뿐이었지만, 이런 한계를 극복하고 나온 것이 Node.js 입니다.
    - 즉, 자바스크립트를 웹 브라우저 뿐만아니라 다른 곳에서도 실행할 수 있게합니다.

  2. Node.js가 할 수 있는 일
    - Node.js는 개발자가 애플리케이션 서버측에서 JavaScript를 사용할 수 있도록 하는 백엔드 기술입니다.
    - 웹 브라우저나 모바일 앱으로 어떤 요청을 보냈을 때 '응답을 해주는 컴퓨터'인 서버에서 사용되는 프로그램을 만들 수 있습니다.

  3. Node.js 장점
    - 자바스크립트만 알아도 하나의 웹 서비스를 만들 수 있습니다. (프론트엔드, 백엔드 둘 다)
    - 쉬운 코드를 사용하여 빠르고 확장 가능한 네트워크 애플리케이션을 구축 가능합니다.

  4. Node.js vs 브라우저 (차이점)

  • 제공하는 API가 다르다
    - API는 어떤 플랫폼이나 실행환경 등에서 제공하는 인터페이스로, 특정 환경에서 자유롭게 가져다 쓸 수 있는 함수나 객체 등을 의미합니다.
    - 브라우저와 달리 Node.js에서는 시각적인 표현 UI 부분을 구현할 필요가 없습니다. 따라서, UI 관련 API들이 브라우저에는 존재하지만 Node.js에는 존재하지 않습니다.
    - 브라우저와 달리 Node.js에는 컴퓨터를 깊숙한 곳까지 제어할 수 있는 컴퓨터 제어 API들이 있습니다. (예를들어, 파일 생성, 컴퓨터 cpu 정보 확인 등)

  • 자바스크립트를 실행하는 엔진
    - Node.js의 경우 구글 크롬브라우저에서 사용되는 V8 엔진을 자바스크립트 실행 엔진으로 사용합니다.
    - 브라우저는 그 종류와 버전에 따라 다른 엔진을 사용합니다. 예를들어, 파이어폭스에서는 스파이더몽키라는 엔진을 사용합니다.

  1. Node.js 개발 팁
    - 특정 브라우저가 자바스크립트의 표준 문법 중에서 어디까지를 지원하는지 확인하는게 중요합니다.
    - 물론, Node.js 버전에서도 자바스크립트의 표준 문법 중에서 어디까지를 지원하는지 확인하는게 중요합니다.

Node.js로 Web 서버 만들기

  1. 특수한 IP 주소, 127.0.0.1
    - 개발자들이 자신이 만든 서버 프로그램을 테스트하기 위한 용도로 사용합니다.
    - http://127.0.0.1:3000http://localhost:3000 과 같습니다.

  2. URL 구성
    - URL: http://www.shopping.com/men/shirts?color=blue&size=m
    - URL 중 scheme(스킴): http://
    - URL 중 Host: www.shopping.com
    - URL 중 Path: /men/shirts
    - URL 중 Query: ?color=blue&size=m

// 1번) URL 객체에는 쿼리 속성이 없기때문에,
const url = new URL('http://www.shopping.com/men/shirts?color=blue&size=m');

console.log(url.protocol); // http:
console.log(url.host); // www.shopping.com
console.log(url.pathname); // /men/shirts
console.log(url.search); // ?color=blue&size=m // 2번) 쿼리 값을 (물음표 포함) search 라는 속성으로 갖는다.
  1. 포트번호
    - URL 객체 예시에서 포트번호가 없는 이유는 기본값으로 http는 80을, https는 443을 쓰도록 정해져 있습니다. (default 값)
    - 포트번호를 생략해도 맨 앞의 http, https 같은 프로토콜 정보를 보고, 브라우저는 자동으로 그에 맞는 포트번호를 설정하고 서버에 접속을 시도합니다.
    - 개발 단계에서만 포트번호 3000번을 쓰고 있는 것뿐이고, 프로그램을 본격적으로 서비스로 배포하려면 당연히 정해진 포트번호(80번 또는 443번)를 사용해야합니다.

  2. 기본 예시 (서버 만들기 + 라우팅)

// 1번) http: 클라이언트인 웹 브라우저가 서버와 통신을 할 때 지켜야할 규칙. 통신규약 or 프로토콜 이라고 부른다.
// 2번) http를 사용하면, http라는 통신규약으로 클라이언트와 통신하는 서버를 만들 수 있다.
const http = require('http');
const port = 3000;

const users = ['Tom', 'Andy', 'Jessica', 'Paul'];

// 7번) request는 클라이언트의 요청에 관한 객체, response는 이 서버 객체가 할 응답에 관한 객체.
const requestListener = (request, response) => {
  // 8번) request.url: path 부터의 문자열만 들어온다.
  // 9번) http://localhost:3000 입력하면 -> / , http://localhost:3000/programming 입력하면 -> /programming
  console.log(request.url);

  if (request.url === '/') {
    response.end('<h1>Welcome!</h1>');
  } else if (request.url === '/users') {
    response.end(`<h1>${users}</h1>`);
  } else if (request.url.split('/')[1] === 'users') { // 10번) 동적 라우팅
    // 11번) URL에 http://localhost:3000/users/1 을 입력하면, request.url.split('/') 는 [ '', 'users', '1' ] 이다.
    const userIdx = request.url.split('/')[2];
    const userName = users[userIdx - 1];

    response.end(`<h1>${userName}</h1>`); // 12번) users/4 이런식으로 배열에 없는 요소를 입력하면 -> undefined가 화면에 출력된다. (주의!)
  } else {
    response.end('<h1>Page Not Available</h1>');
  }


  // response.end(); // 13번) response 응답을 다 작성하면, 끝내는 end를 입력! 이후에는 더이상 response 에 관해 입력하면 안된다! 오류발생!

  // process.exit(); // 14번) 서버를 중지. 보통은, 서버를 중지하면 유저가 웹페이지에 연결할 수 없기때문에 사용하지 않는다. (원리를 알기위해 작성)
};

// 3번) 서버 역할을 하는 객체 1개를 생성해준다.
// 6번) createServer(함수): 서버 객체에 클라이언트의 요청이 들어올 때 마다, 실행되는 함수이다.
const server = http.createServer(requestListener);

// 4번) server.listen(포트번호, hostname, 콜백함수);
// 5번) 이제 서버 객체는 외부로부터 오는 클라이언트 요청을 받아들일 준비가 되었다.
server.listen(port);

// 15번) listen 메소드의 3번째 인자로 콜백함수를 넣어주면, 서버 객체가 외부로부터 오는 클라이언트 요청을 받아들일 준비가 되면 -> 자동으로 콜백함수가 실행된다.
// server.listen(port, hostname, () => {
//   console.log('Server is listening...');
// });

profile
JS, TS, React, Vue, Node.js, Express, SQL 공부한 내용을 기록하는 장소입니다

0개의 댓글