NodeJS (1) NodeJS 튜토리얼

지식이 늘었다/웹개발

NodeJS (1) NodeJS 튜토리얼

PurpleGuy101 2024. 11. 30. 10:37

- 잡설 1.

(100-2022-web-development , Maximilian S. , Udemy)

지금까지 웹페이지 버튼만들기를 꾸역꾸역 들었다.

1. HTML의 구조와 안에 들어가는 여러 Element들의 태그와 id들

2. Style에 관한 요소와 CSS에 관해서

3. 유저와의 상호작용을 위한 자바스크립트와 이벤트, 함수, 객체(DOM)를 만들고 연결하는 방법에 관해서

배우는 과정이었고..

개인적으로 느낀점은 이 과정 자체가 상당한 진입장벽이었다는 점이다.

막상 나에게 필요한 지식은 Input Form을 작성한 뒤 서버에 제출하는 버튼과

서버에서 받은 수치를 표시해주는 투박한 출력공간만 있으면 되었기에..

나머지 지식에 대해서는 그다지 필요로 하지 않는 상황에서 억지로 들어야 하는 기분으로 겨우 들었다.

개인적으로 만들고 싶은 것은...

0.클라이언트가 특정 주식 종목 코드를 입력하면

1.서버단에서 주가에 관한 정보를 DB에서든 다른회사의 API를 통해 받아와서

2.캔들차트로 한번 출력하고

3.개인적으로 마사지한 데이터들을 차트나 지표의 형태로 출력

하고 싶은 것.

뭐 많은 기능이 필요한건 아니다.

- 잡설 2.

하여튼.. 이제 서버사이드의 코드를 작성하는 방법을 알아놔야 한다.

강의에서는 JS를 베이스로 작성하는 NodeJS와 ExpressJS를 사용하는 방법을 알려주고 있으나..

한국의 SI업체들은 Spring을 많이 사용하며, 취업을 위해서는 Vue.js를 배우고 싶은 생각도 든다.

개인적으로 파이썬을 이용해 데이터를 처리해야 하니 Django를 배우고 싶은 마음도 있지만..

경험상 이 경우에는 강사의 커리큘럼을 존중해주는 것이 맡는 것 같다.

싸구려 강의가 아닌 가끔의 경우.. 커리큘럼에는 그 사람의 교육철학이 담겨있기 마련이다.

잡설은 여기까지이고.. 다음 문단부터 Node.JS에 대한 강의를 필기하도록 하자.

--------

Node.js

이번 강의에서는 노드 JS를 배울 것이다.

앞서 배운 JavaScript Runtime에서는 브라우저 내부에서 JS코드를 실행하는 것이었고.

이제 배울 것은 서버사이드에서 JS코드를 작성하고 실행하는 방법을 배울 것이다.

nodejs.org에서 NodeJS를 다운 받아서 디폴트설정으로 설치하면 된다.

또한 nodejs.org사이트의 공식 다큐먼트를 통해 필요한 정보를 확인할 수도 있다.

---

const userName = 'Max' 나 let userName = 'Max'처럼

Nodejs에서도 자바스크립트 문법을 사용할 수 있다.

다만 브라우저상에서 실행되지 않기 때문에 상호작용할 수 있는 DOM이 존재하지 않기에

완전히 같지는 않다.

const userName = 'Max';

console.log(userName);

을 통해 변수를 출력할 수도 있다.

다만 이러한 코드를 어떻게 실행할 것인가? 브라우저는 아니다.

시스템에는 Command Line Utility가 존재하는데

텍스트 기반으로 사용자가 OS와 상호작용할 수 있는 인터페이스이다.

역시 Node.js의 Node도 터미널(Command Prompt)에서 실행할 수 있다.

(*파이썬에서 터미널을 켜고 해당 디렉토리로 이동한 뒤

python helloworld.py를 입력하면, OS가 python 프로그램을 이용하여 해당 파일을 실행하는 것과 동일)

다만, VSC에서는 터미널 기능이 탑재되어 있으므로 편리하게 터미널을 실행할 수 있으며

기본 경로가 우리가 실행하려는 파일이 존재하는 디렉토리로 설정되어있다.

PS C:\coding\udemy_html_webdev\day47_node.js> node app2.js
Debugger attached.
Maximilian
Waiting for the debugger to disconnect...

---

노드js를 사용한다는 것은 이전처럼 html파일을 통째로 보내지 않아도 된다는 의미이다.

해당 서버에서 발생하는 일을 이전보다 더 많이 제어할 수 있다는 것이다.

이를 위해서는 서버는 Incoming Request(요청)을 처리하는 방법과

Response(응답)을 되돌려보내는 방법을 배워야 할 것이다.

그리고 이러한 방식에 대해서 굳이 우리가 직접 구현할 필요는 없다.

아두이노에서 시리얼 통신을 하거나, 파이썬에서 파일을 불러오는 것을 직접 구현하지 않았듯이..

Node JS에서도 기본적으로 이러한 Request와 Response를 처리하는 기능이 다 달려있고

우리는 이걸 딸깍해서 받아쓰기만 하면 되는 것이다.

그 메소드가 require이다.

const http  = require('http');

http.createServer();

require 함수를 통해 Node.js에서 미리 제공하는 유틸리티 메소드와 속성(property)가 가득찬

객체를 반환받을 수 있다.

이러한 객체는 바꿀 일이 거의 없을 예정이라서 const로 받아주도록 하자.

그리고 그 객체에서 createServer 메소드를 통해서 서버를 만들어주도록 하자.

const server = http.createServer()

createServer메소드를 통해 서버기능이 담긴 객체를 반환하는데, 이를 다른 const에 저장할 수 있다.

이 서버에서 빌트인 메소드인 리슨메소드를 사용하자.

server.listen(portnum);

const http = require('http'); // require함수를 통한 http 객체 생성

const server = http.createServer(); // http객체의 createServer 메소드를 통한 서버 객체 생성

server.listen(portnum); // 서버 객체의 listen 메소드를 통한 Request 수신

가령 우리가 브라우저에서 amazon.com 사이트를 방문한다면,

amazon.com:80이나 amazon.com:443으로 방문하는 것이다.

Well Known 포트인 http 88번이나 ssl상의 http인 https의 443번 포트로 방문하는 것이기 때문.

그래서 amazon.com:80은 접속이 되는 반면 amazon.com:100은 접속이 안되는 것을 볼 수 있을 것이다.

그렇기에 server.listen(); 코드를 사용하면, 디폴트 값으로 80번 포트를 listen하게 된다.

우리는 portnum에서 3000번 포트를 사용할 것인데,

이유는 1024번부터 49151번 포트까지는 사용자가 개인적으로 등록해서 사용하는 포트이기 때문.

(well-known은 0~1023, Registered는 1024~49151, Dynamic은 49152~66535)

---

이제 더 많은 Instruction을 통해 원하는 작업을 수애하기 위한 방법을 알아보자.

const http = require('http');

function handleRequest(request, response) {}

const server = http.createServer(handleRequest);

server.listen(3000);

function handleRequest() {}를 통해

들어오는 Request에 대해서 어떻게 대응할지를 설정해줄 수 있다.

(함수이름은 아무거나 상관없다.)

이후 createServer의 파라미터를 해당 함수로 설정하여

const server = http.createServer(handleRequest);를 해주자.

서버가 처음 생성될 때, createServer매소드는

handleRequest함수를 수행할 것이다.

function handleRequest(request, response) {

// 내용

}

또한 request, response를 handleRequest에 파라미터로 설정하여

이 후 response를 내보낼때 사용하도록 할 것이다.

---

그래서 이제 handleRequest 함수에서

이 Request로 작성할 수도 있고 내보내질 Response로 작업할 수 있을 것이다.

현재로서는 Request를 받기만 하고 Response를 필요로 하지 않는 서버를 만들거지만

나중에 가면 Reponse를 결국 내보내야 한다.

Response가 없는 웹서버는 제 기능을 못하는 셈이기 때문이다.

function handleRequest(request, response) {

    response.statusCode = 200;
    // 성공적으로 수신했을 때는 200, 클라이언트가 요청한 리소스나 URL이 없으면 404
    // 클라이언트가 권한이 없는 리소스/URL을 요청했을 때는 401, 서버가 에러가 발생하면 500을 반환
	response.end('<h1>Hello World!</h1>');
}

statusCode 속성(property)는 브라우저에게 request를 성공적으로 수신했음을 알리는 속성이다.

우리는 성공적으로 수신했음을 알리기 위해 response.statusCode를 200으로 설정하였다.

그리고 end 메소드를 통해 Response준비를 마칠 수 있다.

response.end('<h1>Hello World!</h1>');

를 통해 응답준비를 마치도록 하자.

다만 이러한 방식은 출력을 위한 임시방편일 뿐이고

나중에는 파일이나 다른 출력결과를 응답하는 방법을 추가적으로 배울 것이다.

---

const http = require('http'); // require함수를 통한 http 객체 생성

function handleRequest(request, response) {
    response.statusCode = 200;
    response.end('<h1>Hello World!</h1>');
} 

const server = http.createServer(handleRequest); // http객체의 createServer 메소드를 통한 서버 객체 생성

server.listen(3000); // 서버 객체의 listen 메소드를 통한 Request 수신

이 코드를 Node에서 실행시키면