패스트캠퍼스 챌린지 13일차 - 이미지 스트림 서버

0. 공부인증

공부 시작 10 : 17

공부 종료 11 : 45

여튼 집에서 공부하기란 쉬운 일이 아니다.

이번 추석 연휴기간에는 진짜로 공부를 이렇게라도 하니깐 좋긴한데,
빡세긴하다...😂

 

1. unsplash 에서 사진 가져오기

unplash 에서 제공하는 api를 활용해야한다.

또한 일반 브라우저에서 제공하는 fetch를 node에서 제공하는 node-fetch 를 활용해서 이미지를 다운 받을 수 있다.

해당 라이브러리 또한 스트림을 활용할 수 있으며,

클라이언트에게 스트림의 형태로 데이터를 내려줄 수 있다.

import { createApi } from 'unsplash-js';
import nodeFetch from 'node-fetch';

const unsplash = createApi({
  accessKey: 'Unplash 에서 제공받은 AccessKey',
  fetch: nodeFetch,
});


async function seachImage(query){
    const result =  await unsplash.search.getPhotos({ query })
    
    // 하기 코드는 ?를 통해서 Undefined 값에서 값을 조회하는 것을 방지함.
    console.log(result.response?.results)

    if(!result.response) throw new Error("there is no pic")

    return{
        description : result.response.results[0].description || result.response.results[0].alt_description,
        url : result.response.results[0].urls.regular
    }
}

 

클라이언트에서 요청이 들어오면 이미지 파일을 스트림 형태로 보내주기

노드에서는 스트림을 잘 다루는 것이 중요함.

스트림을 통해서 데이터를 주고 받고하는 것이 성능향상이나 부하를 줄일 수 있는 방법 중에 하나임.

: pipe 라는 키워드를 공부해보자

const server = http.createServer((req, res) => {
    async function main(query) {
        const result =  await seachImage(query)

        const resp = await nodeFetch(result.url)

        // 하기 body는 스트림으로 내려받게 됨.
        // 그런데 어차피 바로 클라이언트에 데이터를 내릴 것이라면,
        // 굳이 저장할 필요가 없어
        // resp.body.pipe(
        //     fs.createWriteStream('images/download')
        // )

        // 하기 방법을 통해서 스트림을 통해 데이터를 클라이언트에게 내려줄 수 있음
        resp.body.pipe(
            res
        )
    }

    main("sea")
})

 

위 코드를 실행하여 사진을 스트림의 형태로 브라우져에게 내려준 모습.

이번 강의의 결과물이다.

 

2. 이미지 리사이징하기 

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

sharp

를 활용한 이미지 리사이징임.

const sharp = reuire('sharp')

unplash api 의 요청에 제한이 있음.

그래서 만약에 같은 쿼리 값이 들어온다면,
서버에 캐싱된 이미지 서버를 활용하여, 

이미지 요청 횟수를 줄일 수 있음

->해당 로직을 통해서 전체 속도를 올릴 수 있음

 

이미지 요청 Path 를 구별하는 로직을 만들기

 

 

 

 

 

환급 챌린지 (13/30)

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/37BpXiC

 

패스트캠퍼스 [직장인 실무교육]

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지