ํฐ์คํ ๋ฆฌ ๋ทฐ
๋จ๋ฆฌ๋ ์ฒซ ํ๋ก์ ํธ!
ํ
๋น vscode์์ ์ต์ข
์ผ๋ก ์ํํ์ด์ง๋ฅผ ๋ง๋ค๊ธฐ๊น์ง!
๊ธฐ์ด์ ์ธ ํ์ ๊ธฐ๋ฅ๊ณผ ์ถ๊ฐ์ ์ธ ๋์ ๊ธฐ๋ฅ์ด ์๋ค. ์ฐ์ ํ์ ๊ธฐ๋ฅ๋ถํฐ ๋ค ๊ตฌํํ๋ ๊ฒ์ ๋ชฉํ๋ก๐
1์ 8์ผ์ ๊ณผ์

1. ํ๋ก์ ํธ ํ์ผ ๊ตฌ์กฐ ์ค์
1-1. js, html, css ํ์ผ ์์ฑ

๊ณผ์ ์งํ ์ , ๋ด๋น ํํฐ๋๊ป์ ์๋ ค์ฃผ์ ๋ฐฉ์์ ์บก์ณํด ๋์๊ณ

๋์ผํ ๋ฐฉ์์ผ๋ก ํ์ผ์ ๋ฐ๋ก๋ฐ๋ก ๋ง๋ค์๋ค.
๐ ๊ทธ ์ ์๋ html์ <style> ํ๊ทธ, <script>ํ๊ทธ๋ฅผ ๋ฃ์ด ํ ๋ฌธ์๋ก ๋ง๋ค์์ง๋ง
์ดํ ์์ ๋ฐ ์ ์ง๋ณด์๊ฐ ์ด๋ ต๋ค๋ ๋จ์ ์ด ์์ด, ๋ถ๋ฆฌํ์ฌ ๊ด๋ฆฌํ๋ฉด ํจ์ฌ ํธํ๋ค!
1-2. js, html, css ํ์ผ ์ฐ๊ฒฐ
์ธ ํ์ผ์ ์ฐ๊ฒฐํ๊ธฐ ์ํด์๋ html ํ์ผ์ ์์ฑํด์ผ ํ๋ค.
๊ฒฐ๊ตญ ์น ์ฌ์ดํธ๋ฅผ ๊ฑฐ์์ ์ผ๋ก ๋ํ๋ด๋ ๊ฒ์ html ํ์ผ์ด๊ธฐ ๋๋ฌธ!

๐ body ํ๊ทธ ํ๋จ์ script์ style ํ๊ทธ๋ฅผ ์ฐ๊ฒฐํด๋์๋ค.
ํ๋จ์ ์ฐ๊ฒฐํ๋ ์ด์ ๋
๋ก์ง์ ์์๋๋ก ์น ์ฌ์ดํธ๊ฐ ๋ก๋ฉ๋๋๋ฐ, html์ ๋ผ๋๋ฅผ ๋จผ์ ๊ตฌ์ฑํ๊ธฐ ์ (dom์ด ๊ตฌ์ฑ๋๊ธฐ ์ )์ ์ด dom์ ๊ฑด๋๋ฆฌ๊ฒ ๋๋ค๋ฉด
์๋ฌ๊ฐ ๋ฐ์ํ ์๋ ์๊ธฐ ๋๋ฌธ!
2. TMDB API ์ฐ๊ฒฐ
2-1. TMDB์์ Key ๋ฐ๊ธ๋ฐ๊ธฐ

- API Reference๋ก ์ ์ํ์ฌ Get API Key์์ ๊ฐ์ธ์ key๋ฅผ ๋ฐ๊ธ๋ฐ๋๋ค.
- ํ์๊ฐ์ ํ, ๊ฐ๋จํ ์ ๋ณด ๋ฐ ์ฃผ์ ์ ๋ ฅ ํ ๋ฐ๊ธ ์ฑ๊ณต
=> key๋ฅผ ๋ฐ๊ธ ๋ฐ์ ์ด์ ๋, ๋ฌด๋ถ๋ณํ๊ฒ ์ฌ์ฉํ๊ธฐ ์ํ ๊ฒ์ ๋ง๊ณ ‘ํ์๊ฐ์ ’์ด๋ผ๋ ์ ์ฐจ๋ฅผ ํตํด API ๋ฐ๊ธ ๊ถํ์ ์ฃผ๊ธฐ ์ํด์์ด๋ค.
2-2. fetch API๋ฅผ ์ฌ์ฉํด ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ธฐ
๐๐ปAPI Reference๊ฐ ์ ๋ง์ ๋ง ๋ง๋ค..! ์ฌ์ง ์ธ์๋ ์ญ์ฐ์ฐ์ฑ ๋ฐ์ผ๋ก ๋ ๋ด๋ ค๊ฐ๋ค.


์๋ด์ฌํญ์ ๋์์๋ ๋ด์ฉ์ ์์์ ์ดํด๋ณด๊ณ '์ธ๊ธฐ ์ํ ๋ฐ์ดํฐ'๋ฅผ ๊ฐ์ ธ์์ผ ํ๋ค.
(์ ๋๋ก ์ ์ฝ๊ณ ๋ค๋ฅธ API ์๋ชป ๊ฐ์ ธ์จ ์ฌ๋ ์ ์..๐๐ปโ๏ธ)

'์ธ๊ธฐ ์๋' ์ฐฝ์ผ๋ก ๋ค์ด์์ ์ค๋ฅธ์ชฝ ์ '์ธ์ด'์์ ์ฌ์ฉํ๋ ์ธ์ด๋ฅผ ์ ํํ๋ค.
(๋ด์ฉ ํ์
ํ ๋ฒ์ญ ์ํ๋ฅผ ํด์ ํด์ผ ๋ค๋ฅธ ์ฐฝ์ ์ ๊ทผ์ด ์ฉ์ดํ๋ค.)
๊ทธ ๋ฐ๋ก ์๋ ๊ฐ์ ธ์ค๊ธฐ ์์ฒญ์ ๋ณต์ฌํ์ฌ JS ํ์ผ์ ๋ถ์ฌ๋ฃ๊ณ
(Authorization์ ๋ด์ฉ์ ๋์ key์ ๋ง๋ ๊ฐ์ ์ ๊ณตํ ๊ฒ์ด๋ค.)


๐๐ปconsole ์ฐฝ์ ํ์ธํ๋ค.
page ์์ results ๊ฐ์๋ฅผ ๋น๊ตํ๋ฉด ์ ์ฐํ๋ ๊ฑธ ํ์ธํ ์ ์๋ค!
'Project' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [MBTI-Test PJ_Day 1] Tailwind ๊ณตํต ์ปดํฌ๋ํธ ์คํ์ผ๋ง (1) | 2025.02.21 |
|---|---|
| [NewsFeed-Final] FootPrint๐ฃ (1) | 2025.02.18 |
| [NewsFeed-Day 1] 10์กฐ์ ์ฒซ ๋ฐ์๊ตญ..๐ฃ (0) | 2025.02.12 |
| [Olympic PJ_Final] ์ฌ๋ฆผํฝ ๋ฉ๋ฌ ๊ฐ์ ํธ๋์ปค ๋ง๋ค๊ธฐ (1) | 2025.01.24 |
| [movie PJ_Final] ์ํ ๊ฒ์ ํ์ด์ง ๋ง๋ค๊ธฐ (0) | 2025.01.17 |