[Node.js] Node.js 실행하기, express 설치, supervisor 설치

 

 

 

 

 

Node.js

 

main.js 파일을 VScode 에 생성

 

res.end(내용) : 클라이언트에게 내용을 출력

서버를 생성하고 listen(포트번호) 를 설정하여 응답을 대기하고, teminal 창을 열어 현재 Node 를 실행중인 디렉토리에 접근해 node main 을 입력하여 생성한 프로젝트 명인 main.js를 구동시킨다

 

- 만약 서버를 구동할때 오류가 발생하는 경우 -

terminal 기본 창이 posershell 로 설정되어 있을텐데 command prompt 로 추가 / 변경하여 사용한다

 

 

 

 

 

구동된 서버 접속

서버가 구동되었으므로 127.0.0.1(localhost) 주소의 3000 포트로 접속하면 정상적으로 접속된다... 글자가 깨진 것은  연결 성공 되었습니다!!! 문구

 

 

 

 

 

- ip 로 서버를 구동하는 경우 -

ip 주소로 서버를 구동하려는 경우

 

 

 

 

한글이 깨지지 않게 설정

const http = require("http");
// require : 통신하기 위해 http 기능을 가져오겠다는 뜻

const app = http.createServer((req, res) => {
  // http.createServer :  기능안의 서버를 만드는 기능을 호출 - 서버를 생성
  // ( req : request(요청), res : response(응답) )

  console.log("연결 성공!!!!");

  res.writeHead(200, { "Content-Type": "text/html; charset=utf8" });
  // 200 : 성공적으로 연결이 되었을 경우
  // 사용자한테 전달될 값은 html 형식의 텍스트로 전송
  // 인코딩 방식은 utf8 을 사용함

  res.end("연결 성공 되었습니다!!!!");
  // 연결 응답 전송
});

app.listen(3000, "192.168.42.86");
// 생성한 서버를 3000 번 포트로 응답을 대기하겠다는 뜻

res.writeHead() 추가

서버 접속 결과

 

 

 

 

 

 

supervisor npm 설치

현재는 코드를 수정할때마다 터미널에서 ^c 를 눌러서 서버를 종료시킨 뒤 다시 구동시켜야 하는데 이를 실시간으로 반영하게 해주는 supervisor 를 설치 > --save 옵션은 현재 위치 디렉토리에서만 적용하겠다는 뜻

 

npm 이란 ?

npm 은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자, 패키지를 다운로드 하여 컴퓨터에 설치해준다

설치가 정상적으로 완료되면 해당 디렉토리 안에 node_modules, package-lock.json, package.json 이 추가됨

package.json : 의존성 관리 파일

 

supervisor main 명령어를 사용해서 서버를 구동

 

※ 만약 supervisor main 으로 서버가 정상적으로 구동되지 않는다면 npx supervisor main 를 사용하여 구동한다 ※

 

VScode 에서 코드를 변경한 뒤 접속한 웹에서 새로고침을 하면 정상적으로 변경 내용이 반영됨

 

 

 

 

 

접속 경로 별로 접속되는 경로 나누기

if 문을 사용하여 req(응답) 값을 확인 후 응답은 각각 설정

const http = require("http");
// require : 통신하기 위해 http 기능을 가져오겠다는 뜻

const app = http.createServer((req, res) => {
  // http.createServer :  기능안의 서버를 만드는 기능을 호출 - 서버를 생성
  // ( req : request(요청), res : response(응답) )

  console.log("연결 성공!!!!");

  res.writeHead(200, { "Content-Type": "text/html; charset=utf8" });
  // 200 : 성공적으로 연결이 되었을 경우
  // 사용자한테 전달될 값은 html 형식의 텍스트로 전송
  // 인코딩 방식은 utf8 을 사용함

  if (req.url === "/") {
    // 유저가 접속한 값이 192.168.42.86:3000 이라면
    res.end(`<h1>기본 페이지 연결</h1>
    <a href="/test">test이동</a>`);
  } else if (req.url === "/test") {
    // 유저가 접속한 값이 192.168.42.86:3000/test 이라면
    res.end("test 페이지 연결");
  } else {
    res.end("연결 성공 되었습니다!!!!");
  }
  // 연결 응답 전송
});

app.listen(3000, "192.168.42.86");
// 생성한 서버를 3000 번 포트로 응답을 대기하겠다는 뜻

코드 실행

 

 

 

 

 

직접 html 파일 형식으로 접속 경로 나누기

- 해당 형식으로 접속 경로를 나누진 않지만 연습으로 해봄

코드 실행

 

 

 

 

 

---

 

 

 

 

접속 경로별 응답 파일을 나눠주는 express 프레임워크 설치

npm install express --save

 

설치 후 package.json 파일에 설치한 express 가 추가된 모습.... 추후에 모듈을 지우고 다시 설치할땐 저 버전을 기억해둔 다음에 다시 설치해야 함

 

 

 

 

 

모듈을 삭제하고 버전을 명시하여 다시 설치하는 방법

npm uninstall [패키지명] : 모듈 패키지 삭제

npm install [패키지명]@[버전] : 최신버전의 패키지가 아닌 명시한 버전의 패키지를 설치

 

 

 

 

 

설치한 express 를 통해 서버를 구동

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.send("기본 페이지");
});

app.get("/test", (req, res) => {
  res.send("테스트 페이지");
});

app.listen(3000, () => {
  console.log("3000port 서버 구동");
});

main02.js 파일 생성

 

서버 구동