Logo
Search|
Published on

Using Machine Learning Library on NodeJS

Authors
  • avatar
    Name
    Easyoon
    Twitter

[NodeJS] 내 Youtube 채널을 위한 음악 생성 프로젝트 (Start)

프론트 스캐폴딩

    /server
    /client
      /pages          # Page components
        index.js      # The component for the home page
        _app.js       # A custom App component where you can add global styles, for example
      /components     # Reusable React components
      /public         # Static files like images
      /styles         # CSS or SCSS files
      package.json    # Lists its dependencies and scripts
      next.config.js  # Configures Next.js

음악을 처리할 api endpoint가 필요해서 /server도 추가

NodeJS는 처음이라 … 환경 구성부터 잘 모르겠다.

npm install express multer cors

이렇게 하면 세개를 한번에 다 설치할 수 있음.

  • express: Node.js 웹 애플리케이션 프레임워크

  • multer: 파일 업로드를 위한 미들웨어

  • cors: Cross-Origin Resource Sharing (CORS)를 활성화

HTTP 요청에 첨부된 파일은 바이너리 형태로 전송됩니다. Node.js 서버는 기본적으로 이러한 바이너리 데이터를 직접 처리할 수 없으므로, 파일 업로드를 처리하기 위한 미들웨어가 필요합니다. 미들웨어는 요청과 응답 사이에서 작동하며, HTTP 요청을 가공하거나 변환하는 역할을 합니다.

multer는 Express 애플리케이션에서 파일 업로드를 위해 사용하는 미들웨어입니다. multer는 multipart/form-data 형식으로 전송된 파일을 처리할 수 있습니다. 이 형식은 주로 웹폼에서 파일 업로드를 할 때 사용합니다.

multer는 다음과 같은 역할을 수행합니다:

  • 파일 데이터를 파싱하고 요청 객체에 첨부합니다.

  • 파일 데이터를 디스크에 저장합니다.

  • 파일 데이터에 접근할 수 있도록 API를 제공합니다.

이러한 기능 덕분에, 서버 코드에서는 간단하게 파일 데이터를 처리할 수 있습니다. 예를 들어, multer를 사용하면 요청 객체의 req.file 프로퍼티를 통해 업로드된 파일에 접근할 수 있습니다.

cors

기본적으로, 웹 브라우저는 같은 출처 정책 (Same-Origin Policy)에 따라 다른 출처의 리소스를 요청하는 것을 제한합니다. 즉, 웹 페이지가 서버 A에서 로드되었다면 이 웹 페이지는 서버 A에서만 리소스를 요청할 수 있습니다. 그러나 이런 제한은 웹 애플리케이션의 동작을 제한할 수 있기 때문에, CORS는 이를 완화하기 위해 도입되었습니다.

cors 라이브러리를 사용하려면 먼저 npm install cors 명령을 실행하여 라이브러리를 설치해야 합니다. 그런 다음 Express 애플리케이션에 cors 미들웨어를 추가하면 됩니다

const app = express(); app.use(cors());

이렇게 하면 모든 경로에 대해 CORS가 활성화됩니다. 이제 다른 도메인에서 이 서버의 리소스를 요청하는 것이 가능해집니다.

cors 라이브러리는 다양한 옵션을 제공하여 CORS 동작을 세밀하게 설정할 수 있습니다. 예를 들어, 특정 도메인만 CORS를 허용하도록 설정하거나, 특정 HTTP 메소드만 허용하도록 설정하는 것이 가능

  • 간단한 midi 파일을 다운 받을 수 있는 사이트

BitMidi: https://bitmidi.com/

FreeMidi: https://freemidi.org/

MIDI World: http://www.midiworld.com/

server 디렉토리에서 npm run start

client 디렉토리에서 npm run dev

하지만 이렇게 매번 두 개의 터미널을 열고 각각의 서버를 실행시키는 것은 번거로울 수 있습니다. 이런 경우에는 도구를 사용하여 두 프로세스를 한 번에 실행시킬 수 있습니다. 예를 들어, concurrently 패키지를 사용하면, 두 개의 명령어를 동시에 실행시킬 수 있습니다:

npm install concurrently -D

{
 "scripts": {
 "start": “concurrently \”npm run start — prefix ./server\” \”npm run dev — prefix ./client\””
 }
}

클라이언트와 서버가 다른 포트에서 실행되고 있을 때, 클라이언트에서 API 요청을 보낼 때 서버의 URL을 매번 지정하는 것은 번거로울 수 있습니다. 이런 경우에는 Proxy 설정을 이용하면 편리합니다.

Proxy 설정은 Create React App이나 Next.js 등 많은 프론트엔드 프레임워크에서 지원합니다. Proxy 설정을 사용하면, 특정 요청을 다른 주소로 리다이렉션하는 것이 가능합니다.

Next.js에서는 next.config.js 파일을 생성하고 여기에 proxy 설정을 추가합니다

// Before
axios.post(‘http://localhost:5000/api/upload', formData);

// After
axios.post(‘/api/upload’, formData);

Next.js는 서버 사이드 렌더링(SSR)을 지원하므로, 컴포넌트 코드는 클라이언트와 서버 양쪽에서 실행됩니다. 따라서 window, document, navigator와 같은 브라우저 전용 객체를 컴포넌트에서 직접 사용하면, 서버에서 코드를 실행할 때 이런 오류가 발생합니다.

Discuss on Twitter • View on GitHub