From cd5dac60adeecd53f7d76471a2a5d11a37552a73 Mon Sep 17 00:00:00 2001 From: vi-wolhwa Date: Thu, 3 Oct 2024 17:51:27 +0900 Subject: [PATCH 1/3] =?UTF-8?q?chore:=20npm=20script=20=ED=99=98=EA=B2=BD?= =?UTF-8?q?=EB=B3=80=EC=88=98=20=EC=84=A4=EC=A0=95=20=EB=B0=A9=EC=8B=9D?= =?UTF-8?q?=EC=9D=84=20=EC=9C=88=EB=8F=84=EC=9A=B0=EC=A6=88=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ssr/package.json b/ssr/package.json index db1a534..2ef58a6 100644 --- a/ssr/package.json +++ b/ssr/package.json @@ -4,8 +4,8 @@ "description": "SSR 렌더링으로 영화 목록 불러오기", "main": "server/index.js", "scripts": { - "start": "NODE_TLS_REJECT_UNAUTHORIZED=0 node server/index.js", - "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 nodemon server/index.js --watch" + "start": "set NODE_TLS_REJECT_UNAUTHORIZED=0 && node server/index.js", + "dev": "set NODE_TLS_REJECT_UNAUTHORIZED=0 && nodemon server/index.js --watch" }, "type": "module", "dependencies": { @@ -16,4 +16,4 @@ "nodemon": "^3.1.6", "dotenv": "^16.0.0" } -} +} \ No newline at end of file From 75bab61856798bd5dd2fa3dc1bf3e37c9bab977f Mon Sep 17 00:00:00 2001 From: vi-wolhwa Date: Thu, 3 Oct 2024 20:26:29 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EC=98=81=ED=99=94=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/routes/index.js | 20 ++++++-------------- ssr/src/api.js | 7 +++++++ ssr/src/constant.js | 28 ++++++++++++++++++++++++++++ ssr/src/html.js | 19 +++++++++++++++++++ ssr/src/render.js | 21 +++++++++++++++++++++ 5 files changed, 81 insertions(+), 14 deletions(-) create mode 100644 ssr/src/api.js create mode 100644 ssr/src/constant.js create mode 100644 ssr/src/html.js create mode 100644 ssr/src/render.js diff --git a/ssr/server/routes/index.js b/ssr/server/routes/index.js index 84d32f2..e1885b2 100644 --- a/ssr/server/routes/index.js +++ b/ssr/server/routes/index.js @@ -1,21 +1,13 @@ import { Router } from "express"; -import fs from "fs"; -import path from "path"; -import { fileURLToPath } from "url"; +import { renderMovieList } from "../../src/render.js"; -const __filename = fileURLToPath(import.meta.url); -const __dirname = path.dirname(__filename); const router = Router(); -router.get("/", (_, res) => { - const templatePath = path.join(__dirname, "../../views", "index.html"); - const moviesHTML = "

들어갈 본문 작성

"; - - const template = fs.readFileSync(templatePath, "utf-8"); - const renderedHTML = template.replace("", moviesHTML); - - res.send(renderedHTML); -}); +router.get("/", renderMovieList); +router.get("/now-playing", renderMovieList); +router.get("/popular", renderMovieList); +router.get("/top-rated", renderMovieList); +router.get("/upcoming", renderMovieList); export default router; diff --git a/ssr/src/api.js b/ssr/src/api.js new file mode 100644 index 0000000..2e89faf --- /dev/null +++ b/ssr/src/api.js @@ -0,0 +1,7 @@ +import { FETCH_OPTIONS, TMDB_MOVIE_LISTS } from "./constant.js"; + +export const fetchMovieList = async (listType) => { + const response = await fetch(TMDB_MOVIE_LISTS[listType], FETCH_OPTIONS); + + return await response.json(); +}; \ No newline at end of file diff --git a/ssr/src/constant.js b/ssr/src/constant.js new file mode 100644 index 0000000..8bac807 --- /dev/null +++ b/ssr/src/constant.js @@ -0,0 +1,28 @@ +export const BASE_URL = "https://api.themoviedb.org/3/movie"; + +export const TMDB_THUMBNAIL_URL = "https://media.themoviedb.org/t/p/w440_and_h660_face/"; +export const TMDB_ORIGINAL_URL = "https://image.tmdb.org/t/p/original/"; +export const TMDB_BANNER_URL = "https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/"; +export const TMDB_MOVIE_LISTS = { + POPULAR: BASE_URL + "/popular?language=ko-KR&page=1", + NOW_PLAYING: BASE_URL + "/now_playing?language=ko-KR&page=1", + TOP_RATED: BASE_URL + "/top_rated?language=ko-KR&page=1", + UPCOMING: BASE_URL + "/upcoming?language=ko-KR&page=1", +}; +export const TMDB_MOVIE_DETAIL_URL = "https://api.themoviedb.org/3/movie/"; + +export const FETCH_OPTIONS = { + method: "GET", + headers: { + accept: "application/json", + Authorization: "Bearer " + process.env.TMDB_TOKEN, + }, +}; + +export const URL_TO_MOVIE_LIST = { + "/": "NOW_PLAYING", + "/now-playing": "NOW_PLAYING", + "/popular": "POPULAR", + "/top-rated": "TOP_RATED", + "/upcoming": "UPCOMING", +}; diff --git a/ssr/src/html.js b/ssr/src/html.js new file mode 100644 index 0000000..b242063 --- /dev/null +++ b/ssr/src/html.js @@ -0,0 +1,19 @@ +export const getMoviesHTML = (movieItems = []) => movieItems.map( + ({ id, title, backdrop_path: thumbnail, vote_average: rate }) => /*html*/ ` +
  • + +
    + ${title} +
    +

    ${rate}

    + ${title} +
    +
    +     +
    • + ` +).join(''); \ No newline at end of file diff --git a/ssr/src/render.js b/ssr/src/render.js new file mode 100644 index 0000000..64d2c46 --- /dev/null +++ b/ssr/src/render.js @@ -0,0 +1,21 @@ +import fs from "fs"; +import path from "path"; +import { fileURLToPath } from "url"; +import { getMoviesHTML } from "../src/html.js"; +import { fetchMovies } from "../src/api.js"; +import { URL_TO_MOVIE_LIST } from "./constant.js"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +export const renderMovieList = async (req, res) => { + const templatePath = path.join(__dirname, "../views", "index.html"); + const movieListType = URL_TO_MOVIE_LIST[req.url]; + + const movieList = (await fetchMovies(movieListType)).results; + const moviesHTML = getMoviesHTML(movieList); + const template = fs.readFileSync(templatePath, "utf-8"); + const renderedHTML = template.replace("", moviesHTML); + + res.send(renderedHTML); +}; \ No newline at end of file From b3141c7aeefd7fbb80a5f009519581b0dc9f86d0 Mon Sep 17 00:00:00 2001 From: vi-wolhwa Date: Thu, 3 Oct 2024 20:57:48 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EC=83=81=EC=84=B8=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EB=AA=A8=EB=8B=AC=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/routes/index.js | 3 +- ssr/src/api.js | 8 ++++- ssr/src/html.js | 61 ++++++++++++++++++++++++++++++++++++-- ssr/src/render.js | 22 ++++++++++---- 4 files changed, 84 insertions(+), 10 deletions(-) diff --git a/ssr/server/routes/index.js b/ssr/server/routes/index.js index e1885b2..9588a04 100644 --- a/ssr/server/routes/index.js +++ b/ssr/server/routes/index.js @@ -1,5 +1,5 @@ import { Router } from "express"; -import { renderMovieList } from "../../src/render.js"; +import { renderMovieDetail, renderMovieList } from "../../src/render.js"; const router = Router(); @@ -9,5 +9,6 @@ router.get("/now-playing", renderMovieList); router.get("/popular", renderMovieList); router.get("/top-rated", renderMovieList); router.get("/upcoming", renderMovieList); +router.get("/detail/:id", renderMovieDetail); export default router; diff --git a/ssr/src/api.js b/ssr/src/api.js index 2e89faf..3661844 100644 --- a/ssr/src/api.js +++ b/ssr/src/api.js @@ -1,7 +1,13 @@ -import { FETCH_OPTIONS, TMDB_MOVIE_LISTS } from "./constant.js"; +import { FETCH_OPTIONS, TMDB_MOVIE_DETAIL_URL, TMDB_MOVIE_LISTS } from "./constant.js"; export const fetchMovieList = async (listType) => { const response = await fetch(TMDB_MOVIE_LISTS[listType], FETCH_OPTIONS); + return await response.json(); +}; + +export const fetchMovieDetail = async (id) => { + const response = await fetch(`${TMDB_MOVIE_DETAIL_URL}${id}?language=ko-KR`, FETCH_OPTIONS); + return await response.json(); }; \ No newline at end of file diff --git a/ssr/src/html.js b/ssr/src/html.js index b242063..342d9fd 100644 --- a/ssr/src/html.js +++ b/ssr/src/html.js @@ -1,6 +1,8 @@ -export const getMoviesHTML = (movieItems = []) => movieItems.map( +import { TMDB_THUMBNAIL_URL } from "./constant.js"; + +export const getMovieListHTML = (movieItems = []) => movieItems.map( ({ id, title, backdrop_path: thumbnail, vote_average: rate }) => /*html*/ ` -
  • +
  • movieItems.map(
    • ` -).join(''); \ No newline at end of file +).join(''); + +export const getMovieDetailHTML = (movieDetail) => /*html*/ ` + + + + `; \ No newline at end of file diff --git a/ssr/src/render.js b/ssr/src/render.js index 64d2c46..4d69f1a 100644 --- a/ssr/src/render.js +++ b/ssr/src/render.js @@ -1,8 +1,8 @@ import fs from "fs"; import path from "path"; import { fileURLToPath } from "url"; -import { getMoviesHTML } from "../src/html.js"; -import { fetchMovies } from "../src/api.js"; +import { getMovieDetailHTML, getMovieListHTML } from "../src/html.js"; +import { fetchMovieDetail, fetchMovieList } from "../src/api.js"; import { URL_TO_MOVIE_LIST } from "./constant.js"; const __filename = fileURLToPath(import.meta.url); @@ -12,10 +12,22 @@ export const renderMovieList = async (req, res) => { const templatePath = path.join(__dirname, "../views", "index.html"); const movieListType = URL_TO_MOVIE_LIST[req.url]; - const movieList = (await fetchMovies(movieListType)).results; - const moviesHTML = getMoviesHTML(movieList); + const movieList = (await fetchMovieList(movieListType)).results; + const movieListHTML = getMovieListHTML(movieList); const template = fs.readFileSync(templatePath, "utf-8"); - const renderedHTML = template.replace("", moviesHTML); + const renderedHTML = template.replace("", movieListHTML); + + res.send(renderedHTML); +}; + +export const renderMovieDetail = async (req, res) => { + const templatePath = path.join(__dirname, "../views", "index.html"); + const { id } = req.params; + + const movieDetail = await fetchMovieDetail(id); + const movieDetailHTML = getMovieDetailHTML(movieDetail); + const template = fs.readFileSync(templatePath, "utf-8"); + const renderedHTML = template.replace("", movieDetailHTML); res.send(renderedHTML); }; \ No newline at end of file