[유튜브 클론] 첫 Express 서버 만들기

첫 서버 만들기

 

src 폴더를 만든 후 index.js를 넣어준다.

다만 이 때 packge.json 의 scripts 내 경로를 수정해준다.

js 파일명도 server.js로 바꾸고 scripts를 아래와 같이 수정해준다.

  "scripts": {
    "dev": "nodemon --exec babel-node src/server.js"
  },

 

첫 express application 만들어보기

 

1. "express"에서 express를 import 해온다

import express from "express";

2. app (application) 을 만든다. 

express function을 사용하면 express application을 생성해준다.

import express from "express";

const app = express();

 

서버는 24시간 내내 온라인에 연결된 컴퓨터와 같으며, request(요청)를 listening하고 응답한다.

여기서도 서버가 사람들이 뭔가를 요청할 때까지 기다리게 해야 하므로 app.listen() 을 사용하여 listening 하도록 만든다.

 

우선 port부터 지정해주는데, 보통 높은 숫자의 port는 비어 있으므로 예제에서는 4000을 사용했다.

listen에는 또 callback이 있다. callback은 서버가 시작될 때 작동하는 함수이다. (바닐라 JS의 handleClick 같은 것)

import express from "express";

const app = express();

app.listen(4000, handleListening);

 

그럼 이제 function 을 만들어준다.

import express from "express";

const app = express();

const handleListening = () => console.log("Server listening on port 4000 🚀");

app.listen(4000, handleListening);

// 위 두 줄은 아래와 같이 줄일 수 있다.
// app.listen(4000, () => console.log("Server listening on port 4000 🚀"));

그리고 실행시켜주면 터미널에 아래와 같이 뜨는 것을 볼 수 있다.

첫 서버를 만들었다!

하나의 서버가 만들어졌고, 그 서버가 port 4000을 listening하고 있다.

 

그렇다면 서버에 어떻게 갈 수 있을까?

보통은 서버를 시작했다면 localhost를 통해 접속할 수 있다.

여기서는 주소창에 localhost:4000을 입력하면 접근 가능하다. 응답이 오는 것이다.

 

제대로 된 건지 확인하려면 서버를 종료해보자. (nodemon과 서버를 종료하려면 ctrl + c를 누르면 된다.)

그러면 nodemon이 종료되고, localhost:4000에 접속이 불가능해진다. 서버가 종료된 것이다

다시 npm run dev로 서버를 시작시켜주면 서버가 돌아온 것을 볼 수 있다.

 

돌아와서 4000 값을 상수 PORT로 작성해준다.

이제 PORT를 listen하고 handleListening 함수도 아래와 같이 수정한다.

그러면 터미널에 바로 서버로 갈 수 있는 링크가 보인다.

import express from "express";

const PORT = 4000;

const app = express();

const handleListening = () =>
  console.log(`Server listening on port http://localhost:${PORT} 🚀`);

app.listen(PORT, handleListening);

 

---

 

GET Requests

 

서버 화면을 보면 아래와 같이 Cannot GET / 이라는 문구가 쓰여 있다.

여기서 / 는 서버의 root (첫 페이지) 를 말한다.

ex) google.com ==== google.com/

 

또한 여기서의 GET은 HTTP method 이다.

HTTP는 서버끼리 의사소통하는 방법인데,

어떤 사이트에 접속하고자 할 때 우리가 (브라우저가 만들어준) http request 를 보낸다.

http request는 웹사이트에 접속하고 서버에 정보를 보내는 방법이다. 

 

서버 첫 화면 캡쳐

 

 

웹사이트에 접속하려고 할 때, 우리는 웹사이트한테

"야 나한테 너네 홈페이지(+로그인 페이지 등등..) 갖다줘. 페이지 가져와!"   라고 얘기한다.

보통은 홈페이지에 접속한다고 표현하면서 내가 해당 서버로 가는것처럼 생각되어지는데

사실은 요청해서 홈페이지를 '가지고온다(GET)'는 것!

 

 

그럼 이제 갓 만든 따끈한 서버에게 get request 에 어떻게 응답(respond)해야 할 지 알려주자.

(get은 여러 종류의 request 중 하나일 뿐임)

 

**주의사항)  이제부터 쓰는 (express와 관련된) 코드는 express application이 만들어진 다음부터 작성되어야 함!

application을 만들고, 외부 접속을 listen하는 코드 사이에, 여기에다 application 설정을 한다.

정리하자면 다음 순서와 같음)  application 만들기 -> application 설정 -> 외부에 개방   

import express from "express";

const PORT = 4000;

const app = express();

///여기부터

const handleListening = () =>
  console.log(`Server listening on port http://localhost:${PORT} 🚀`);

app.listen(PORT, handleListening);

 

그 전에 먼저 request 를 알아보자.

 

request: 유저가 뭔가를 요청하거나, 보내거나, 무슨 행동을 하는 것.

예제 서버에서도 get을 사용해서 root(/)으로의 get request를 날리고 있다.

하지만 get request 에 반응하는 법을 모르기 때문에 에러가 난다. 이 에러를 없애보자. 

 

누군가 root page(/)로 get request를 보낸다면, 함수를 하나 작동시켜준다.
(예제에서는 inline function으로 작성, () => 이게 함수임 )

const app = express();

//app.get("/", () => console.log("Sombody is trying to go home!"));
//아래와 같이 수정한다

const handleHome = () => console.log("Sombody is trying to go home!");

app.get("/", Handsome);

 

그리고 실행시켜주면 home에 접속할 때 전처럼 get 이 안뜨고 계속 로딩하게 되는데,

이제 서버는 get requests 에 반응할 수 있기 때문에 cannot get 에러가 안뜬다.

 

respond 하기

 

나의 서버는 이제 request를 받아들이고 listening하고 있지만, respond(응답)은 해주지 않는다.

이때 arguments 에 대해 알아봐야 한다. 바닐라 JS 에서의 event를 떠올리면 쉽다.

 

route function 에는 두개의 object가 있다.

(어떤 이름이어도 상관 없지만 반드시 두 개가 있어야 한다.)
1. request object  (a.k.a   req)
2. response object  (a.k.a   res)

 

import express from "express";

const PORT = 4000;

const app = express();
//application 설정
const handleHome = (req, res) => console.log("Sombody is trying to go home!");

app.get("/", Handsome);

const handleListening = () =>
  console.log(`Server listening on port http://localhost:${PORT} 🚀`);

app.listen(PORT, handleListening);

 

이때 request와 response는 express로부터 받은 것이다.

home에 접속하려 한다는 request를 받는다면, 실제로 보이지는 않겠지만 아래와 같이 변한다.

app.get("/", );

handleHome({...}, {...})

 

request object 확인하기

 

아래처럼 코드 수정해서 request 보기

그리고 npm run dev를 해주면, 콘솔에 엄청나게 많은 것들이 쭉 뜨는게 보이는데..

이게 전부 request object 라고 한다. 이건 나에게 전달되는 것에 대한 정보이다. 나중에 더 자세히 알아볼 예정! 

일단 여기서는 express 가 request object 를 제공해준다는 것을 알 수 있다. 

//원래 코드
//const handleHome = (req, res) => console.log("Sombody is trying to go home!");
//app.get("/", Handsome);


const handleHome = (req, res) => {
  console.log(req);
};

app.get("/", handleHome);

 

이번에는 res를 입력해서 response를 확인해보자.

방금 본 request는 브라우저가 뭔가를 요청한다는 것이고, 쿠키나 (GET) method 같은 정보를 얻을 수 있었다. 

 

const handleHome = (req, res) => {
  console.log(res);
};

app.get("/", handleHome);

 

브라우저에게 request를 받으면 꼭 response를 return 해줘야한다! (중요)

response를 해주는 방법은 2개가 있다
res.end, res.send

 

res.end()를 해주면 서버가 request를 종료한다.

실제로 response는 없었지만 그냥 끝내버림. 아무 것도 안해서 서버가 계속 대기중인 것보다는 낫다...고 한다(ㅋㅋ)

const handleHome = (req, res) => {
  return res.end();
};

 

다른 방법으로는 res.send()가 있다. ("") 안에 메세지를 쓸 수도 있다. 작성한 메세지는 사이트 메인에서 보인다.

const handleHome = (req, res) => {
  return res.send("i love ya");
};

서버 메인 화면

 

 

route 하나 더 추가해보기

 

const handleHome = (req, res) => {
  return res.send("i love ya");
};

const handleLogin = (req, res) => {
  return res.send("this is log in page");
};

app.get("/", handleHome);
app.get("/login", handleLogin);

 

로그인 페이지를 추가해보았다.

로컬호스트 사이트 주소 뒤에 /login 을 입력하면 잘 반영된 걸 볼 수 있다.

로그인 페이지를 추가했다 (this 가 짤렸군..ㅋㅋ)