VanillaJS Movie App (TypeScript ver.)

OMDb API를 활용해 VanillaJS 영화 검색 애플리케이션을 만들어봅니다.
이 프로젝트는 JS 버전과 TS 버전으로 나누어져 있습니다.
기본 버전은 TS입니다.

DEMO

Reset.css

브라우저의 기본 스타일을 초기화합니다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />

Google Fonts

Oswald, Roboto 폰트를 사용합니다.

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=Roboto:wght@400;700&display=swap" rel="stylesheet" />

Headline.js HTML

<h1>
  <span>OMDb API</span><br />
  THE OPEN<br />
  MOVIES DATABASE
</h1>
<p>
  The OMDb API is a RESTful web service to obtain movie information,
  all content and images on the site are contributed and maintained by our users.<br />
  If you find this service useful, please consider making a one-time donation or become a patron.
</p>

Vercel

$ npm i -D vercel dotenv node-fetch

환경변수

개발용 서버에서 사용할 환경변수를 지정합니다.
이후 Vercel 서비스에 배포할 때는 프로젝트의 'Settings / Environment Variables' 옵션에서 환경변수를 지정해야 합니다!

/.env

APIKEY=<MY_OMDb_API_KEY>

Vercel 구성 옵션

Vercel 서비스에 배포할 구성 옵션을 지정합니다.

/vercel.json

{
  "devCommand": "npm run dev",
  "buildCommand": "npm run build"
}

서버리스 함수

APIKEY를 노출하지 않도록 서버리스 함수를 작성합니다.

/api/movie.js

import fetch from 'node-fetch'

const { APIKEY } = process.env

export default async function handler(request, response) {
  const { title, page, id } = JSON.parse(request.body)
  const url = id
    ? `https://www.omdbapi.com/?apikey=${APIKEY}&i=${id}&plot=full`
    : `https://www.omdbapi.com/?apikey=${APIKEY}&s=${title}&page=${page}`
  const res = await fetch(url)
  const json = await res.json()
  response
    .status(200)
    .json(json)
}

TypeScript

$ npm i -D typescript @types/node-fetch

/tsconfig.json 파일을 만들고 TypeScript 구성 옵션을 지정합니다.

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ESNext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "strict": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "api/**/*.ts"
  ]
}