API 2

[Next.js] fetch data, React vs Next.js

client component์—์„œ ๊ธฐ์กด์˜ API์™€ ์†Œํ†ตํ•˜๋˜ ๋ฐฉ์‹ useEffect useState -> metadata ์‚ฌ์šฉ ๋ถˆ๊ฐ€ ๋กœ๋”ฉ state ๊ตฌํ˜„ 'use client'; import { useEffect, useState } from 'react'; /* useState์˜ ์‚ฌ์šฉ์œผ๋กœ ์ธํ•ด, ์‚ฌ์šฉ ๋ถˆ๊ฐ€๋Šฅ export const metadata = { title: 'Home', }; */ export default function Page() { const [isLoading, setIsLoading] = useState(true); const [movies, setMovies] = useState([]); //useState -> interactive component๋ฅผ ์‚ฌ์šฉํ•˜๊ฒ ๋‹ค. -> "use c..

Next.js 2024.03.19

[Secure] API ์˜ค์šฉ ๋ณด์•ˆ์•ฝ์ 

API ์˜ค์šฉ ๋ณด์•ˆ์•ฝ์  ์˜๋„๋œ ์‚ฌ์šฉ์— ๋ฐ˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ API๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜, ๋ณด์•ˆ์— ์ทจ์•ฝํ•œ API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ๋ณด์•ˆ ์•ฝ์  * DNS lookup ์— ์˜์กดํ•œ ๋ณด์•ˆ๊ฒฐ์ • 1. ์›์ธ ๋„๋ฉ”์ธ๋ช…์— ์˜์กดํ•ด์„œ ๋ณด์•ˆ๊ฒฐ์ •(์ธ์ฆ ๋ฐ ์ ‘๊ทผ ํ†ต์ œ ๋“ฑ)์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๊ฒฝ์šฐ 2. ์˜ํ–ฅ ๊ณต๊ฒฉ์ž๊ฐ€ DNS ์—”ํŠธ๋ฆฌ๋ฅผ ์†์ผ ์ˆ˜ ์žˆ์Œ(DNS spoofing) ๋กœ์ปฌ DNS ์„œ๋ฒ„์˜ ์บ์‹œ๊ฐ€ ๊ณต๊ฒฉ์ž์— ์˜ํ•ด ์˜ค์—ผ๋˜๋ฉด, ์‚ฌ์šฉ์ž์™€ ํŠน์ • ์„œ๋ฒ„๊ฐ„์— ๋„คํŠธ์›Œํฌ ํŠธ๋ž˜ํ”ฝ์ด ๊ณต๊ฒฉ์ž๋ฅผ ๊ฒฝ์œ ํ•˜๋„๋ก ์œ ๋„ ๊ณต๊ฒฉ์ž๊ฐ€ ๋งˆ์น˜ ๋™์ผ ๋„๋ฉ”์ธ์— ์†ํ•œ ์„œ๋ฒ„์ธ ๊ฒƒ ์ฒ˜๋Ÿผ ์œ„์žฅ (ํŒŒ๋ฐ) 3. ๋Œ€์‘ ๋ณด์•ˆ๊ฒฐ์ •์—์„œ ๋„๋ฉ”์ธ๋ช…์„ ์ด์šฉํ•œ DNS lookup์„ ํ•˜์ง€ ์•Š๋„๋ก ์กฐ์น˜ * ์ทจ์•ฝํ•œ API ์‚ฌ์šฉ 1. ์›์ธ ๋ณด์•ˆ์ƒ ๊ธˆ์ง€๋œ(banned) ํ•จ์ˆ˜์ด๊ฑฐ๋‚˜, ๋ถ€์ฃผ์˜ํ•˜๊ฒŒ ์‚ฌ์šฉ๋  ๊ฐ€๋Šฅ์„ฑ์ด ๋งŽ์€ API๋ฅผ ์‚ฌ..