[유튜브 클론코딩] 2.4 Handling Routes with Express

2.4 Handling Routes with Express

GET / POST

브라우저에서 localhost:4000에 접속했을 때 보이는 Cannot GET / 을 보면 GET이 대문자로 표시되어 있다.

 

GET

어떠한 정보를 가져와서 조회하기 위해서 사용되는 방식

예) 웹사이트에 접속하려고 하면 youtube.com과 같은 URL을 적는다. 이때 브라우저가 GET Method를 통해 페이지를 읽어온다.

 

POST

데이터를 서버로 제출하여 추가 또는 수정하기 위해서 사용하는 방식

예)  웹 사이트에 로그인 할 때에는 POST method를 통해서 데이터를 서버로 전송한다.

 

GET request로는 정보를 전달할 수가 없고 POST request로는 정보를 전달할 수 있다.

예를 들어, 영상에 코멘트를 단다고 하면 정보를 전달해야 하기 때문에 POST request를 만들어낼 것이다.

우리의 request와 함께 서버로 말이다. 서버는 그럼 실행을 하게 될텐데 그것은 적합한 http method를 사용하겠다는 것이다.

 

서버가 응답하게 하기 

이제 해볼 것은, 어떤 사람이 이 URL로 접근할 때 서버가 응답하게 하는 것을 할 것이다.

function handleHome(){

    console.log("hi from home!");

    

}

app.get("/", handleHome);

이렇게 코드를 작성한 후 npm start를 하면 계속해서 로딩중인 것을 볼 수가 있다.

왜 이러한 문제가 발생한 것이냐면, request는 있는데(GET request) 그에 대한 응답이 있어야 하기 때문이다.

즉, 뭔가 응답을 하게 만들어야 한다. 

예를 들어 어떤 웹사이트를 보면, 새로고침을 하면 이 서버가 하는 일은 HTML로 응답하는 것이다.

 

뭔가를 응답하도록 코드를 수정해보도록 하자.

일반적으로 이런 함수들은 request object와 response object  2가지를 호출한다.

예를 들어 아이디와 패스워드를 전송한다면 (POST) 서버에는 request object로 그 정보를 얻을 수 있는 것이다.

(post - request/ get - response) 인듯

 

function handleHome(req,res){

    res.send('Hello from home');

}

app.get("/", handleHome);

이렇게 수정하고 다시 localhost:4000으로 들어가면 Hello from home이라고 html로 뜨는 것을 볼 수가 있다.

 

function handleProfile(req,res){

    res.send("You are on my profile");

}

app.get("/profile",handleProfile);

마찬가지로 위와 같이 작성 후 localhost:4000/profile로 들어가면 You are on my profile 라고 뜨는 것을 확인할 수 있다.

 

서버처럼 잘 작동한다. 이 서버가 웹사이트 서버처럼 작동하기를 바란다면  이렇게 그냥 글씨를 send 하는 대신 완전한 html,css 파일을 send 해주어야 한다. 그게 여기서 배울 내용인데 그전에 기본적으로 이게 기본 작동 방식이라고 보면 된다.

서버를 생성하고, route를 생성하고 그리고 그것에 응답하는 방식이다.

 

앞으로 많은 route를 갖게 될 것이다. 영상 올리고, 영상 세부정보를 보고 유저, 유저 프로필, 영상 수정 등등, html과 css 파일을 보내주는 함수도 만들 것이고 그리고 database도 넣어줄 것이다. 다음 시간에는 babel을 이용해볼 것이다.