[유튜브 클론코딩] 2.3 Your First Express Server

2.3 Your First Express Server

깃허브관리 - .gitignore 만들기

우선 우리의 프로젝트를 깃허브에서 관리하기 위해서 깃허브 홈페이지에서 repositiory를 만들어준다.

그 다음 node_modules 파일 들이 깃허브에서 전부 관리 대상이 되려고 하니까 이것을 ignore 해주어야 한다.

(내가 만든 코드만 업로드하고 싶기 때문)

그래서 비쥬얼 스튜디오 코드에서 .gitignore를 만들고  그 안에 node_modules 라고 치고 저장하면 깃허브에서 관리 대상이 300몇개에서 4개로 예쁘게 사라진다.

 

gitignore의 표준 같은게 있는데 https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore <<구글에서 gitignore nodejs 검색해서 들어간 깃허브 사이트에서 'raw'눌러서 복사해서 아까 만든 gitignore 밑에 붙여넣고, package-lock.json도 써주고 저장하면 깃허브에서 관리할 대상이 4에서 3으로 줄어든다. 즉, 오직 3개의 파일만 github으로 관리하면 된다.

 

깃허브에 push 하는 법(원격 저장소에 반영)

git add .
git commit -m "Initial Commit"
git push origin master

이렇게 콘솔에 다음과 같이 명령어를 입력한다.

 

 

index.js에 express를 import 하는 법

그 다음 expressjs 홈페이지로 가서 guide(안내서) -> 라우팅에 있는 코드를 복사

var는 const로 바꾸고 index.js에 복사 붙여넣는다.

일단은 이렇게 작성하고, 나중엔 const expresss = require('express'); 코드는 import express from "express";로 대체될 것이다.

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

 

require가 무슨 의미일까?

기본적으로 require가 하는 일은 node module을 어딘가에서 가져오는 것이다.

이 경우엔 express라는 이름의 폴더를 내 파일들 속에서 찾으려고 할 것이다. 만약 못찾으면 그 다음엔 node_modules 안에서 찾으려고 한다. (node_modules라는 폴더 안에 express라는 폴더가 있음) , express 안에 index.js가 있고,,

 

아무튼 저 첫줄의 코드는 express를 불러오고 그런 다음에 application을 만드는 것이다. (두번째 줄 코드)

우린 express를 import 했고 app 변수를 선언해서 express를 실행한것이다.

 

const express = require('express');

const app = express();

app.listen(4000);

app보고 예를 들면 4000포트를 listen하라고 코드를 작성한 다음

콘솔에 node index.js 라고 치면 아무런 반응도 일어나지 않는 것 처럼 보인다.

그러나 크롬에서 localhost:4000으로 들어가면 Cannot GET / 라고 뜬다.

이 의미는 서버에 홈페이지로 보여줄 게 없다는 것이다. 그래도 최소한 서버는 있다는 것이다.

콘솔에서 ctrl+c를 눌러서 실행을 종료하면 크롬에서도 연결이 끊긴다.

 

package.json에 "scripts" 추가하기

우리는 매번 node로 index.js를 실행시키고 싶지 않아서 여기 package.json을 중앙 컨트롤 타워처럼 만들것이다.

"scripts" :{

    "start" : "node index.js"

  }

package.json에 다음과 같은 코드를 추가하면 매번 콘솔에 node index.js 하지 않아도 된다.

결국엔 같은 것인데, 이것은 엄청난 효과를 준다.

만약 우리가 친구와 협업한다고 하면, 친구에게 "오 그걸 실행하려면 'node index.js'라고 해야돼" 라고 알려주지 않아도 이 코드가 json에 포함되어 있기 때문에 그냥 콘솔에 npm start 라고 치면 자동으로 실행된다.

 

다음으로 넘어가기 전에, index.js에서 app.listen(4000)을 콜백으로 바꿔준다.

 

const express = require('express');

const app = express();

function handleListening(){

    console.log('Listening on: http://localhost:4000');

}

app.listen(4000, handleListening);

  

PS C:\Users\user\Desktop\coding\노마드코더\myTube> npm start               

> mytube@1.0.0 start C:\Users\user\Desktop\coding\노마드코더\myTube 

> node index.js                                                                                                                   

Listening on: http://localhost:4000                                                                                

 

라고 뜨는 것을 콘솔에서 확인할 수 있다.

좀 더 멋있게 바꿔보자.

 

const express = require('express');

const app = express();

const PORT = 4000;

function handleListening(){

    console.log(`Listening on: http://localhost:${PORT}`);

}

app.listen(PORT, handleListening);

똑같이 작동한다.

🎊 축하합니다.🎈 express.js로 첫 서버를 갖게 되었습니다. 🎉

 

요약

즉, 우리가 할 것을 요약하면 다음과 같다.

const express = require('express');

express를 호출하고 node_modules에서 import 부터 하고

const app = express();

그런 다음 실행하면 된다. 그렇게 app을 만드는 것이다.

 

const PORT = 4000;

function handleListening(){

    console.log(`Listening on: http://localhost:${PORT}`);

}

app.listen(PORT, handleListening);

그런 다음 application에게 "4000번 포트를 listen해"라고 코드를 쓴다.

listening이 하기 시작할 때 handleListening이라는 함수를 호출하는 것이다.