javaScript/nodeJs

nodejs express // #1 서버 시작

부엉이사장 2022. 7. 1. 19:30

express는 이미 사용해서 todoapp을 개발해봤기에 사실 아직까진 그닥 어렵지않은듯하다

라우터 분리와 로그인기능만 다시 좀 심도있게 보면 좋을듯 하다.

 

 

일단 시작하면서 원하는 폴더에 npm init을 치고 엔트리포인트만 설정한다.

그리고 npm install express 으로 모듈 깔아주고..

 

암튼 이상태에서 server.js(엔트리포인트파일)로 nodemon 실행.

 

 

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

기본모듈은 express 와 path가져왔다.

app.listen(3000, ()=>{
    console.log('서버 고고고')
});

3000포트에서 서버 실행

 

근데 여기서 app.set으로 포트를 좀 관리합시당..

app.set('port', process.env.PORT || 3000);
//이건 기본포트는 3000으로 되어있지만 포트를 바꾸고 싶을때.. 일단 이렇게 적어놔.

이렇게 app.set으로 포트를 지정했다.

port라는거에 포트를 저장할거고 process.env.PORT로 저장할거야. 만약 저게 비어있으면 3000으로 해줘.

이건 변수라고 봐도 된다. process~는 뭔지 잘 모르겠다.

 

그리고 아까 listen코드에서 

app.listen(app.get('port'), ()=>{
    console.log('서버 고고고')
});

라고 해주면 아까랑 똑같이 작동함.

 

 

# get 요청. 라우터

app.get('/',(req,res)=>{
    console.log('슬래시 들어왔네용')
    // res.send('hello express');
    res.sendFile(path.join(__dirname, 'index.html')) //절대경로로 바꿔줌.
})

res.send는 그냥 저 안에 텍스트 보내줌. 

sendFile은 index.html에 들어가는 경로를 적어준다.

절대경로로 바꿔줘야해서 path모듈의 join ~을 썼다. 

path모듈을 사용하면 배포시에 다른 컴퓨터에서 실행이 되더라도 알아서 잘 들어감

사실 path모듈 사용법 까먹었었다 ㅋㅋ

 

 

 

# 미들웨어

// //미들웨어
app.use((req, res, next)=>{
    console.log('all request')
    next(); // next안하면 다음라우터 안넘어감.. 그래서 렉걸린거였네..
})

저렇게 쓰면 모든 라우터실행될때마다 저 안에 있는 코드가 실행된다.

인수는 req, res, next가 있는데

꼭 next를 써줘야한다.

만약 안쓰면 저 코드 실행후 뭘할질 몰라서 멈춰버린다.

예를들어 '/'로 들어가면 all request가 콘솔에 찍히고 다음 '/'주소로 가줘야하는데

멈춰버리는것이다.

이 미들웨어는 쿠키같은거 전달할때 좋을듯?

 

 

 

# 와일드카드

app.get('/category/:name',(req,res)=>{
    console.log(`${req.params.name} 으로 들어왔네영.`) // 이렇게 나눌수도 있는데 만약 /:name하고 /about으로 접속하면 밑에 app.get about 은 무시되어버림
    //따라서 이런 와일드카드는 다른 라우터들보다 아래에 위치해야한다.
    res.send('hello express');
})

저 내용에 :name부분이 서버로 들어와서 변수처럼 쓸수 있다.

만약 /category/hihi 로 들어가면

콘솔에 hihi로 들어왔네요 뜨고 아래코드들이 실행된다.

개인별 장바구니 구현할때 좋을듯.

 

여기서 중요한건 이 라우터들은 아래쪽에 써주는게 좋다. 

예를들어

 

app.get('/:name',(req,res)=>{
    console.log(`${req.params.name} 으로 들어왔네영.`) // 이렇게 나눌수도 있는데 만약 /:name하고 /about으로 접속하면 밑에 app.get about 은 무시되어버림
    //따라서 이런 와일드카드는 다른 라우터들보다 아래에 위치해야한다.
    res.send('hello express');
})

app.get('/about',(req,res)=>{
    console.log('어바웃 들어왔네용')
    // res.send('hello express');
    res.send('여긴 어바웃이야')
})

이렇게 두가지 라우터가 있고 /about으로 접속하면

아래 라우터요청은 쌩까진다.

그래서 콘솔엔 about으로 들어왔네용, 브라우저엔 hello express가 뜨게되는것이다.

 

 

app.get('*',(req,res)=>{
    console.log('다 들어왔네용')
    res.send('hello all'); // 얘도 마찬가지임. 범위가 넓은 라우터들은 밑에 넣어주라. 순서대로 실행되기때문.
})

이런것도 있다. 모든 라우터를 다 먹어버림 ㅋㅋ 

없는 페이지입니다 뜨게하면 될듯.