728x90
반응형

https://www.youtube.com/watch?v=Tt_tKhhhJqY&t=2s 영상내용 정리

 

<개념>

파이썬은 설치하고 실행가능하지만,

자바스크립트는 브라우저 자체에서 인터프리터가 있어서 실행가능

자바스크립트를 백앤드에서 사용하려면 Node.js 설치해야함

 

모듈이란?

프로그램을 구성하는 구성 요소로, 관련된 데이터와 함수를 하나로 묶은 단위 (미리 짜여진 코드)

node.js에선 npm을 사용함

 

npm이란?

node package manager의 약자 (npm instal express 와 같이 설치하는데 도움)

 

express란?

npm에서 설치 가능한 웹 서버 프레임워크

 

<실행법>

노드 설치후 실행방법

터미널 키고 node app.js(파일명)

 

시작전엔 가능하면 npm init 을 입력 (이제 npm을 사용하겠다. 패키지를 관리할 파일이 생김)

그러면 package.json이 생성됨 (패키지 정보가 담김)

 

npm i figlet (아스키 아트 설치)

npm uninstall figlet (삭제)

npm 패치지 사용법 - https://www.npmjs.com/package/figlet

var figlet = require('figlet');

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

 | | | | ___| | | ___   \ \      / /__  _ __| | __| | | |
 | |_| |/ _ \ | |/ _ \   \ \ /\ / / _ \| '__| |/ _` | | |
 |  _  |  __/ | | (_) |   \ V  V / (_) | |  | | (_| |_|_|
 |_| |_|\___|_|_|\___/     \_/\_/ \___/|_|  |_|\__,_(_|_)

 

express란?

노드js 기반의 웹프레임워크

https://expressjs.com/ko/starter/hello-world.html

https://www.npmjs.com/package/express

 

Express "Hello World" 예제

Hello world 예제 기본적으로 이 앱은 여러분이 작성할 수 있는 가장 간단한 Express 앱일 것입니다. 이 앱은 하나의 파일로 된 앱이며 Express 생성기를 통해 얻게 되는 앱과는 같지 않습니다. (이 예제

expressjs.com

 

기본 명령어 (node app.js 로 실행하면 서버가 켜짐, 끄는 방법 컨트롤+c)

 

기본 코드 (https://expressjs.com/ko/starter/hello-world.html)

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}`)
})

HTTP 메소드

Get - 주소창에서 데이터를 넘기는 방식

Post - 내부적으로 body에 데이터를 전달

라우팅

콜백함수

함수 (끝나고 실행할 함수)

다른 코드의 인수(파라미터)로서 넘겨주는 실행 가능한 코드

정의 :  함수에 파라미터로 들어가는 함수

용도 : 순차적으로 실행하고 싶을 때 씀

참고 : 콜백함수가 필요한 함수들에만 콜백함수 사용가능

setTimeout( ()=> {console.log("5초지남")},5000}

콜백함수 정의(코딩애플)

 

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

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

//send와 json은 똑같으나 명시적으로 json
app.get('/dog', (req, res) => {
    res.json({'sound': '멍멍'})
  })

  app.get('/cat', (req, res) => {
    res.send('고양이!')
  })
  

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

파라미터로 변수 받는 법 (1개만 받을때?)

:id (원하는변수) 넣어서 해당 값에 넣는대로 불러온다.

https://www.youtube.com/user/woowakgood

위처럼 user/ 뒤에 오는 변수값은 아래와 같이 만들 수 있다.

 

res.send 와 res.json이 있는데

기본적으로 send를 쓰지만 json형식으로 받을땐 json으로 써주는게 좋다.

app.get('/user/:id', (req, res) => {
    const q = req.params
    console.log(q.id)

    res.json({'userid': q.id})
  })

 

 

쿼리로 변수 받는 법 (여러정보를 받을때?)

query로 JSON (또는 딕셔너리) 형태로 값을 받을 수 있다. [ Key : Value ]

app.get('/user/:id', (req, res) => {
    const q = req.query
    console.log(q)
    console.log(q.name)

    res.json({'userid': q.name})
  })

API 서버 만들기 (동물 소리 API)

값에 따라 다른 변수값을 보여주기

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

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

  app.get('/sound/:name', (req, res) => {
    const { name } = req.params
    if (name == 'dog'){
        res.send({'sound': '멍멍'})
    } else if(name =='cat'){
        res.send({'sound':'야옹'})
    } else if( name =='pig'){
        res.send({'sound':'꿀꿀'})
    } else {
        res.json({'sound':'알수없음'})
    }
  })

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

CORS

  CORS는 Cross Origin Resource Sharing의 약자로 도메인 및 포트가 다른 서버로 클라이언트가 요청했을 때 브라우저가 보안상의 이유로 API를 차단하는 문제입니다.  예로 들면 로컬에서 클라이언트는 3000 포트로 서버는 10000 포트로 서버를 띄웠을때 또는 로컬 서버에서 다른 서버로 호출할 때 발생하게 됩니다.

 

설치 - npm i cors

var express = require('express')
    var cors = require('cors')
var app = express()
const port = 30000
 
    app.use(cors())

//기본 사용법

 

https://www.npmjs.com/package/cors

 

cors

Node.js CORS middleware. Latest version: 2.8.5, last published: 4 years ago. Start using cors in your project by running `npm i cors`. There are 11565 other projects in the npm registry using cors.

www.npmjs.com

 

HTML과 연결하여 사용 하는 방법 (fetch)

HTML에서 패치를 사용하면 기본적으로는 막힘. cors를 꼭 해줘야함

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch  패치 참고

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>안녕하세요</title>
</head>
<body>
    <h1 id="sound"></h1>
    <input id="name" type="text">
    <button onclick="getSound()">API 요청</button>
<script>
    function getSound(){
        const name = document.getElementById('name').value
        fetch(`http://localhost:3000/sound/${name}`)
        .then((response) => response.json())
        .then((data) => {
            console.log(data.sound)
            document.getElementById('sound').innerHTML = data.sound
        });
    }
</script>
</body>
</html>

728x90
반응형

'코딩공부 > Node.js' 카테고리의 다른 글

웹개발 5주 완성 5주차 - DB, CRUD (조코딩)  (0) 2022.12.19
조코딩 - 백엔드 서버 클릭 몇번으로 무료 배포하는 방법  (0) 2022.12.17
노드js 입문(04. Express.js)  (0) 2022.12.14
노드js 입문(03. Package Manager)  (0) 2022.12.13
노드js 입문(02. HTTP / Web Server)  (0) 2022.12.13

+ Recent posts

티스토리툴바