EXPRESS

express 파일 만드는 순서

1) npm init
2) npm i (npm install 과 같아요!)
3) npm i -g express-generator
4) express <express 프로젝트 명> --view=ejs

참고 : https://expressjs.com/ko/starter/generator.html

두개를 혼합해서 express 서버 구축 완료.

package.json

express에서 필요로하는 라이브러리를 모두 가지고 있다고 생각하면 되는 파일이다.

nodemon 이란? & 설치

설치 방법 : npm install nodemon -g

Nodemon은 Node.js에 기반한 웹 애플리케이션을 개발할 떄, 파일에 변경사항이 발생했을때, 저절로 애플리케이션이 재실행되도록 도와주는 패키지다. Nodemon을 설치하면 코드를 수정하고 저장버튼을 눌렀을 때. 애플리케이션이 저절로 실행되게할 수 있다.

express란 무엇인가?

Node.js를 접하게 되면 자연스럽게 웹 프레임워크를 사용하게 되고 그 중 가장 인기가 많은 것이 express이다.

웹프레임워크는 Node.js 개발 시 전체적인 작업을 손쉽고 빠르게 할 수 있도록 도와주는 역할을 한다.

Express는 각종 요청을 처리하고 기능을 추가하기 위해 미들웨어(middlewqre)를 사용한다. JavaScript 코드로 작성된 다양한 기능의 미들웨어는 필요한 것만 선택하여 Express 와 결합해 사용할 수 있다.

HTTP Method

get

• 간단한 데이터를 처리하는데 용이(쿼리스트링의 길이 제한으로 대용량 데이터를 처리할 수 없음.
• 쿼리스트링에 데이터가 노출됨.
• 데이터를 재활용할 수 있음.

post

• 대용량 데이터를 처리하는데 용이.
• 쿼리스트링에 데이터가 노출되지 않음.
• 한번 처리된 데이터는 재활용할 수 없음.

설명

• 리소스(데이터)로 구분/조회하는 작업은 get
• 리소스(데이터)를 생성(등록)하는 작업은 post
• 쿼르스트링에 데이터가 노출됨으로 인해 보안성이 취약하다는 특징이 있다. 그렇다고 post방식이 보안성이 뛰어난 것은 아니다.

use

• use 메서드는 모든 HTTP메서드에 의해 요청 주소만 일치하면 실행되지만
• get, post,put, patch, delete 같은 메서드는 주소뿐만 아니라 HTTP 메서드까지 일치 하는 요청일경우에만 실행된다.

CORS란 무엇인가?

참고사이트 http://guswnsxodlf.github.io/enable-CORS-on-express

현재 도메인과 다른 도메인으로 리소스가 요청될 경우를 말한다. 예를 들어 도메인에서 읽어온 HTML페이지에서 다른 도메인을 요청하는 경우를 말한다. 이런 경우에 해당 리소스는 cross-origin HTTP 요청에 의해 요청된다. 보안 상의 이유로 브라우저는 CORS를 제한하고 있다.

서버(API)의 응답 헤더를 변경해주기

Access-Control-Allow-Origin: * 을 이용하여 모든 곳에서 CORS를 허용하기 위해 사용한다.
만약 특정 도메인에만 허용하길 원한다면,

Access-Control-Allow-Origin: http://주소 를 입력해주면 된다.

자 이제 코드를 통해 알아보도록 하자!

현재 클론코딩을 진행중인 나는 서버에게 image를 요청하고 응답으로 받을것이다.

그러기 위해서 일단 image의 router을 설정해 준다.

app.js(Express server)

const imageRouter = require("./routes/image");

app.use("/image", imageRouter); // 미들웨어 등록

이렇게 세팅해 두고

main.js에서 fetch로 image에 이미지를 요청한다.

const promise = fetch("http://localhost:3000/image")

이렇게 3000번 port를 이용하여 이미지를 요청하게 된다.

(image.js)

const express = require('express');
const router = express.Router();
const fs = require("fs");
const data = JSON.parse(fs.readFileSync("./public/data/response.json","utf8"));
// json파일에는 사진 url들이 들어있다.

router.get('/', (req,res, next) => {
    // req = 클라이언트 main.js 의 fetch 요청을 받음
    // res = fetch 요청에 대한 응답을 보냄
    res.json(data);
    // res.sendFile(__dirname + "/response.json")
});

module.exports = router;

응답 res을 res.json(data)로 주게 되면 json파일안의 내용을 그대로 넘겨주게되고

const promise = fetch("http://localhost:3000/image") // 여기서 서버에 요청함
                                                     // 그럼 router의 image.js에서 파일을 읽어서 보내줌. 
.then(response => response.json())
.then(json => {
                if(json.event) {carousel(json)}
            });


// 캐러셀 슬라이더에 이미지 넣기
const carousel = (img) => {
    const img_prefix = img.event.prefix;
    const array = [];
    const img_url = Object.values(img.event.list);
    
    for(const a of img_url) {
        array.push(img_prefix+a.src);
    }
    
    const BOX = document.querySelector(".carousel_slide");
    
    let str='';
    for(let i=0; i<array.length; i++) {
        str += `<img class="items" src="${array[i]}"></img>`;
    }

    BOX.innerHTML = str;

}

.then(response => reponse.json()) 이렇게 받아 json파일 내의 내가 원하는 이미지의 URL을 추출하면 된다.

fetch API 란?

Fetch는 네트워크 요청/응답에 관련된 일반적인 Request/Response Object를 제공한다. 이 말은 범용성이 좋다는 말이다. Response를 프로그래밍 언오로 조작하는것이 허용된다.
fetch()는 2개의 매개변수를 받는다.
첫번째는 URL이고 두번째는 Option이다. URL은 필수 매개변수이다. 그리고 통신이 성공하든 실패하든 Response로 분해할 수 있는 Promise를 반환한다.

Fetch의 인터페이스와 메서드

BODY

Reequest, Response 두개 모두에서 사용된다.

• Body.arrayBuffer()
• Body.blob()
• Body.formData()
• Body.json()
• Body.text()

Headers

Request와 Response의 Headers instance를 생성할 수 있다.
const Header = new Hade();
생성한 Header에 속성을 추가, 제거, 조회 할 수 있다.
다음과 같은 메서드를 제공한다.
append(), delete(), entries(), forEach(), get(), has(), keys(), set(), values(), getAll()

Request

Request instance는 요청 headers의 properties를 포함한다.
쇼핑하우 클론코딩 중 일부

const promise = fetch("http://localhost:3000/image")
.then(response => response.json())
.then(json => {
	best(json);
    carousel(json);
    mouse_slide(json);
    plus(json);
    });

Response

fetch()는 Promise를 리턴하는데 Promise에서 값을 추출하면 Response를 얻을 수 있다.

추후 내용 추가 필요