Node.js를 통한 서버 구축

• http모듈 사용
• express모듈 사용

---

• http 모듈 은 기본적으로 내장되어있어 굳이 설치하거나 불러올 필요가 없다.
• http 모듈만 사용해서 웹 서버를 구성하면 직접 많은 기능을 개발해야한다. 그리고 코드의 가독성이나 확장성이 떨어진다. 그래서 이러한 문제를 해결하기 위해 만들어진 것이 express모듈 이다.

Express

• express모듈을 사용하면 http모듈 보다 간단한 코드로 웹 서버의 기능을 구현 할 수있다.
• Node.js의 모듈 중에 하나이며, Node.js상에서 동작하는 웹 개발 프레임워크이다.
• 웹 서버를 생성하는 것과 관련된 기능을 담당하는 프레임워크이다.
  • 웹 앱을 만들기 위한 메소드, 미들웨어 등이 내장되어 있다.

---

💡모듈, 라이브러리, 프레임워크?

• 모듈
  • 각 방의 구성과 꾸밈으로 생각. 옷방에는 옷과 행거가 있고, 침실에는 침대가 있다.
  • 별도의 파일로 분리된 독립된 기능이다. 모듈이 생성되면 다른 파일에서 모듈을 불러와 사용할 수 있다.
  • 예를 들어 로그인을 하는 모듈이 생성되어있다면, 네이버블로그에도 로그인을 할 수 있고 네이버카페, 네이버 클라우드에서도 로그인을 할 수 있다.
• 라이브러리
  • 집의 인테리어로 생각. 옷방과 침실, 거실은 방이 나누어져있지만 모두 화이트톤의 소품과 가구들을 사용하고 있는 것.
  • 모듈이 프로그램을 구성하는 작은 부품이라면, 라이브러리는 자주 사용되는 로직을 모아서 사용하기 편하게 정리한 것. 모듈의 집합체로 생각.
  • 큰 도서관에 가면 문학, 예술 등 파트가 나누어져있다. 편하게 원하는 부분을 꺼내서 쓸 수 있도록 집합별로 나누어 모아놓은 느낌?
• 프레임워크 (집의 뼈대로 생각. 방 구조가 나누어져 있고 전기, 수도까지 되어있는)
  • 기본 개념 구조인 뼈대 느낌. 무언가를 구축할 때 공통적인 뼈대를 제공해준다.
  • 이 안에는 기본적으로 필요한 기능이 있기 때문에 라이브러리, 모듈이 포함되어 있을 수 있다.
  • 설계도를 어느정도 제공해준다고 생각하자.

Express 설치

• Express는 내장모델이 아니라 설치가 필요하다.
• VScode를 열어준다.
• 프로젝트를 기준으로 해당 폴더의 터미널로 들어가 npm install express 를 입력해준다. (npm을 이용해 사용하고 싶은 모듈을 설치해주는 것이다. 모듈을 설치하게 되면 폴더가 자동 생성되고 node_modules에 설치되게 된다.
• 사이드 바 탐색기를 보면 바뀐 부분들 확인할 수 있다. 준비가 된 것!
• 그리고 package.json파일을 보면 dedencies에 express가 생긴걸 확인할 수 있다.
  

• 그리고 이 과정에서 라이브러리와 관련된 파일들도 많이 설치가 된다. 이 부분까지 git에 올려놓을 필요는 없으니 특정한 폴더를 무시하게 만들어보자.

▶️ git이 폴더를 무시하게 만들기

• .gitignore 은 git 버전 관리에서 제외할 파일 목록을 지정하는 파일이다.
• 해당 폴더의 상단에 .gitignore 이라는 파일을 만들어준다. 파일 아이콘은 git아이콘이 보여지게 된다. 꼭 해당파일 저장 후 commit 해야 한다.
• 명령어 알아보기
  • 파일명 해당 파일 무시
  • *.txt 확장자가 txt로 끝나는 파일 모두 무시
  • !test.txt test.txt는 무시되지 않음.
  • test/ test 폴더명을 가진 내부의 모든 파일을 무시
  • /test (현재 위치한 폴더) 내에 존재하는 폴더 내부의 모든 파일 무시 ( b.exe무시 )
• 이런식으로 작성하면 된다.

//'node_modules' 폴더명을 가졌다면? 그 폴더 내부의 모든 파일을 무시한다.
node_modules/
//아래 파일 무시.
package-lock.json

▶️ 그럼 다른 컴퓨터에서 git pull을 하면 해당 파일이 없는데 이럴 때는?

• package.json 파일이 있으니 괜찮다! 해당 파일에 모듈에 대한 모든 정보가 작성되어있기 때문. 이 정보를 컴퓨터가 참고를 하고 필요한 것들을 다시 설치할 수 있는 셈.
• 프로젝트의 메인폴더로 이동 후 npm install 을 입력해준다.
  

• 그럼 준비는 끝! 제대로 사용해보자.

Express 사용

• express 를 사용해 웹 서버의 기능을 구현 해보자.
• node.js 에서는 모듈을 require(”모듈이름”); 을 통해 가져온다.

▶️ 기본적으로 아래 형태로 사용한다.

• app 객체 : express() 함수를 호출함으로써 만들어진 express application.
• express() : express모듈이 내보내는 최상위 함수로, express application을 만든다.

//express모듈을 가져온다. 노드 모듈이 없다면 당연히 불러올 수 없다.
const express = require("express");

//가져온 express모듈을 app이라는 변수에 담아 express프레임워크를 시작하겠다.
//이제 server객체를 만들 수 있다.
const app = express();

//포트번호를 지정해준다.
const PORT = 8000;
//포트번호는 1~65536까지 존재한다. 1~1023까지는 정해진 기능이 있다.
//3000,8000,8080,3010,3001등을 사용한다.
//포트가 이미 사용중인게 아니라면 어떤 포트번호든 상관은 없다.
//3306은 mysql에서 사용하기때문에 피하자.

▶️ http메소드 get

• http메소드는 클라이언트가 요청할 수 있는 방법들을 정의한다.
• get메소드는 웹브라우저에서 다른 링크로 이동하기 위해 주소창에 특정 url을 입력하는 경우를 예로 들 수 있다.

//get메소드의 기본 형태
//app에 있는 get메소드를 실행하겠다.

app.get("/", function (req, res) {
  //'/' 위치의 브라우저로 접속 요청을 받았을 시 실행할 것 작성
});

//get메소드가 받아오는 인자는 (req, res)이다.
//첫번째 매개변수는 request객체(요청) . 여기에 요청을 받을 수 있다고 하는거.
//두번째 매개변수는 response객체(응답). 서버가 응답할 수 있는 객체인것.

//여기서 슬래시('/')의 의미는?
//슬래시에 의해 브라우저에 접속하게 되는 것으로 생각하자.
//'/' 위치의 브라우저로 접속했을 시.
//포트번호를 8000으로 지정했다면
//localhost:8000/ 이렇게 입력해 웹브라우저를 들어갈 수 있다.
//'/' 작성을 안하면 서버요청에 대한 설정을 안했다는 것. 꼭 설정해줘야 한다.

//이렇게 작성!

app.get("/", function (req, res) {
  res.send("hello express"); 
});

// '/' 위치의 브라우저로 접속했을 시.
// response객체(응답)의 send메소드를 실행. 무언가를 출력하겠다는.
// 어떤걸 전송할건지?
// "hello express" 를 브라우저 화면에 출력한다.

//위의 상황에서는 localhost:8000/ 이라는 주소로 인터넷에 접속할 수 있다.
//const PORT = 8000;으로 지정했기 때문.
//그럼 동일한 상황에서 localhost:8000/test 이 주소로 들어가고 싶다면?

app.get("/test", function (req, res) {
   res.send("localhost:8000/test 로 들어왔습니다.");
});

//그리고!!! 
//send 메소드에는 div나 css요소 작성해도 먹힌다!
//그런데 html의 내용이 길다면? 파일 자체를 제공하는 것이 더 좋겠다.
//이 때 sendFile메소드를 이용한다.
//상대경로로는 접근이 안되기 때문에 우선 HTML파일의 절대경로를 구해야한다.

console.log(__dirname); 
//__dirname 을 사용해보자.
//현재의 파일(file)이 위치한 폴더(directory)의 절대경로(absolute path)를 알려줍니다.

res.sendFile(__dirname + "/index.html");
// 이런식으로 사용 가능!

▶️ http메소드 listen

• 서버를 실행시킨다. 서버를 연다는 의미.
• 해당 주소 (localhost, port)로 접속할 수 있는 하나의 서버를 만든다고 생각.

  • localhost : 컴퓨터 내부 주소로 자신의 컴퓨터를 가르키는 hostname이다.

  • port : 서버 내에서 데이터를 주고받는 프로세스를 구분하기 위한 번호이다. 기본적으로 http서버는 80번 포트를 사용한다.

    서버가 열리면?
    
    [port의 경우]
    localhost:8000 이라는 주소로 인터넷에 접속할수있게된다.
    
    [localhost의 경우]
    127.0.0.1:8000 이라는 주소로 웹브라우저에 접속할 수 있다.

• 아래처럼 사용하면 된다.

//app에 있는 listen메소드를 실행하겠다.

//매개변수는 두가지를 가진다.
// 1) 어떤 포트번호로 브라우저를 열건지 (브라우저에 들어가는 하나의 이벤트 발생)
// 2) 실행한 이벤트에 대한 콜백함수 (즉 서버가 열리면 어떤 동작을 할건지)

app.listen(PORT, function () {
  console.log("서버가 실행중입니다.");
});

//서버가 열리면 localhost:8000/ 이라는 주소로 인터넷에 접속할 수 있게 된다.
// 위 기본형태에서 const PORT = 8000;로 지정했기 때문.
//그리고 서버가 실행중일 동안 콘솔창에는 "서버가 실행중입니다."가 출력된다.

웹 브라우저에 들어가보자

• 이 내용들을 웹브라우저에서 확인해보려면 우선 서버를 열어주어야 한다.
• 해당 폴더로 들어간 후 아래 터미널에서 node 파일명 입력하면 sever open!
  

• 그럼 지정한 주소를 주소창에 입력하면 화면이 보여진다.
• VScode에서 내용을 변경하고 브라우화면을 보면 적용이 안된다. 해당 서버가 아니기 때문!
• 이 때에는 서버를 닫고 새로 열어주면 된다. 터미널에서 무언가를 나가거나 실행 취소시키는 단축키는 ctrl + c

---

💬

• 개발을 하게 되면 많은 폴더들 많은 코드들이 생길 것이다. 조금 더 깔끔하게 분류하고 보기에 편하게 하기 위해 이런식으로 사용하는 것 같다. 파일이 왔다갔다 거리는게 헷갈리기는 한데 그래도 어느정도 분류가 되어있으니 익숙해지면 더 편해질 것 같다.
• 웹브라우저에 주소를 입력해서 들어가게 되는 게 신기했다. 이전에는 GoLive를 클릭해서만 웹페이지를 확인할 수 있었는데 주소로 들어가서 화면이 보여진다는게 괜히 뿌듯했다.