Node.js 기본 세팅

GPT한테 물어봐서 대충 했는데 솔직히 아직 잘 모르겠다.

 

전에 노마드코더 강의 들으면서 환경 구축했던 것도 파일들을 만들면서 왜 만드는건지를 모르니까... 이게 좀 어렵다.

다른 코드들의 의도는 설명을 해주니까 알겠는데...

...뭐지

 

일단 조코딩 Nooode.js 로 구축해보자

https://www.youtube.com/watch?v=Tt_tKhhhJqY&t=2s&ab_channel=%EC%A1%B0%EC%BD%94%EB%94%A9JoCoding 

 

 

node.js는 딱 컴퓨터에서 js코드를 실행하는것 까지.

npm? 노드 패키지 매니져

express는 node의 모듈. npm으로 설치할 것.

figlet도 npm의 모듈. 이건 뭐하는 모듈이냐? 아스키 아트 만드는 모듈

 

npm install figlet으로 설치.

npm i figlet으로 짧게 쓸 수도 있음.

 

다운받은 모듈 정리?

npm init?

패키지이름은 뭐로할껀지, 버전은 뭐로 할껀지. 설명은 어쩌구저쩌구...

그냥 엔터해도 됨

 

하고 나면, package.json이 만들어진다.

어떤 것들을 다운받았는지.

프로젝트 이름, 버전, 선명, 메인으로는 뭘 실행하는지... 등 등.

 

node_modules 폴더는 무시해도 되나봄.

npm install에서 --~~~붙여서 옵션도 줄 수 있음

-g 는 글로벌로 설치한다는 의미.

 

package-lock.json은 여기에만 설치한다(?)

package.json의 dependencies 내에 적혀있는것들은 해당 프로젝트에 ~~~라는 npm 모듈이 쓰였다는 것.

package.lock에는 더 자세한 정보들이 쓰여있음.

 

전역으로 설치하면 충돌가능성 높아질 수도 있음.

어지간하면 프로젝트단위로 하자.

설치하고 node_modules 보면 설치한 패키지 폴더가 생겨있는것을 확인할 수 있다.

 

https://www.npmjs.com/package/figlet : npm 공식문서

var figlet = require('figlet');

figlet('Hello World!!', function(err, data) {
    if (err) {
        console.log('Something went wrong...');
        console.dir(err);
        return;
    }
    console.log(data)
});

패키지 삭제 : npm uninstall figlet

 

본격적으로 Express라는것을 배워보자.

express는 node.js를 활용해서 웹 프레임워크를 개발하는 것.

 

express 설치 + hello world?

npm i express

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

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(3000)

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

서버 끌때는 컨트롤 + c 누르면 됨.

app.listen(3000)은 3000포트를 듣는다.

 

위 코드에서

app.get('/', (req, res) => {

    res.send('Hello World!!')

}) 에서

.get : HTTP 메소드

'/' : 라우팅

()=>{} : 콜백 함수

 

HTTP 메소드 : 요청의 목적, 종류를 알리는 수단

Get : 주소창에 데이터

Post : 내부적 body에 데이터 담아 전달

 

라우팅 주소는 request mapping 하는거랑 비슷할 것.

콜백함수 : 함수가 끝나고 실행할 함수

 

ex) 

setTimeout(() => {}, 1000)

앞 인자 : 콜백, 뒤 인자 : 미리초

 

req : 요청정보

res : 응답 정보

res.send('Hello World!)는 응답에 'Hello World!'라는 문자를 담겠다는 의미가 된다.

 

app.get 말고 app.post도 있나?

 

node server.js 명령어로 잘 실행되고있기는 한데, 그럼 개발자모드로는 어떻게 실행하지?

저장할때마다 자동으로 refresh 되고 그런거...

 

axios? 요청을 보내는 라이브러리?

요청을 쏠때? express 반대 느낌?

 

axios로 요청, express는 요청을 받고 응답

 

get data로 dog를 받았을 때

app.get('/dog', (req, res) => {

    res.send({'sound': 'bark'})

});

와 같이 JSON 데이터를 리턴해줄 수 있다.

 

근데, get에 데이터를 여러개 넣어줄 때도 있고, dog='말티즈' 뭐 이런 데이터가 날아올때도 있을텐데 이런 경우는 어떻게 처리를 해야하나?

 

app.get('/dog', (req, res) => {

    //res.send({'sound': 'bark'})

    res.json({'cat' : '야옹'})

});

.json으로 내가 json데이터를 보낸다는것을 명시할 수도 있다.

그리고, req.send 작업은 하자마자 클라이언트에서의 듣기가 끝나기에 그 이후에는 응답이 불가능한 모양.

 

에서 37:37 변수로 줄 수는 없나요?

이건 실습 해보자.

req변수를 활용하면 됨.

req안에 정보를 담아낼 수 있다.

 

const p = req.params;

console.log(p);

const q = req.query;

console.log(q);

 

파라미터로 변수를 받음.

? 뒤에 받는게 변수로 받는 아이들

키와 값으로 이루어져있다.

app.get('/user/:id', (req, res) => {
    // 뭔가를 받을때 : 뒤에 parameter 이름
    const p = req.params;
    console.log(p);
    console.log(`ID : ${p.id}`)

    //query로 받는 경우
    const q = req.query;
    console.log(q);
    console.log(q.name);    

    // res.json({'cat' : '야옹'})
    res.json(q)
});

 

post방식도 req.params로 가져오는것까지는 같다.

Axios, Fetch같은 방식으로 링크에 데이터를 넣는게 아니라 body에 넣는 방식이기 때문에 좀 달라지는데, 

const b = req.body; 와 같은 방식으로 받아올 수 있다.

 

app.get('/user/:name', (req, res) => {
    // const p = req.params;
    // p.name으로만 값을 꺼내올 수 있었음. 이를 아래 코드처럼 단축할 수 있음

    const { name } = req.params;

    console.log('이름 : ' + name);

    switch(name){
        case 'dog':
            console.log('hello');
            res.json({'sound' : '멍멍'});
            break;
        case 'cat':
            res.json({'sound' : '야옹'});
            return;
        case 'pig':
            res.json({'sound' : '꿀꿀'});
            return;
        default:
            console.log('끝');
    }
    res.json(name)
});

위처럼 하는것도 가능하다.

근데 개인적으로 res를 여러개 만들어놓는것은 가독성이 떨어지니, 위같은 경우엔 sound변수를 할당하고 그 다음에 마지막에 json화 해서 보내주는게 나을 것 같다.

 

cors 이슈?

html파일에서 node에 요청을 했을때 cors 설정 안하면 차단될 수 있다.

HTML의 요청을 응답이 잘 들어오도록 할 필요가 있다.

 

이것의 처리는 require('cors')할 필요가 있다.

ex)

const cors = require('cons');

app.use(cors({

    origin: '*'

}));

 

or

 

app.use(cors())

많이 쓰이는 모듈이다.

약간 접근권한 같은 의미를 같는듯.

 

모든 요청에 접근 허가한다 그런 의미라고 함.

 

다음시간에는 deploy 한다고는 함. 난 당장은 지금 배운정도면 충분할듯?

 

이거 해둔거로 다음번부터는 프론트에서 데이터 주고받는 형태로 작업할 수 있도록 해야겠다.

근데 백엔드할때가 맘이 훨씬 편하긴 한거같네 ㅋㅋ

https://github.com/NewChoBo/portfolio_gallery_NodeJS/commit/4986fcbbf1550bcc6d517c2eb1985cdcf2f99df2