Kdt5 ju ha rim #63
Kdt5 ju ha rim #63
Conversation
There was a problem hiding this comment.
Reactλ₯Ό μκ³ κ³μλ€λ³΄λ, λ°λλΌ JSλ₯Ό ν΅ν΄μ 'store'μ λ‘μ§μ μ§μ ꡬννλ κ²μ΄ μ½μ§μμ μ νμ΄μμν
λ° κ³ μνμ
¨μ΅λλ€ππ» λμ λ¨μν κ°μμ λ΄μ©μ λ°λΌκ°λ κ² λΏ λ§ μλλΌ stateμ λ΄λΆ λ‘μ§μ΄ μ΄λ»κ² μ§νλκ³ μκ³ , ν΄λμ€λ‘ ꡬνλ μ»΄ν¬λνΈλ€μ constructor render λ©μλκ° μ΄λμμ μ νΈμΆλλμ§ μΈλΆμ μΌλ‘ λ€μ¬λ€λ³Ό μ μμμΌλ©΄ ν©λλ€.
μΆκ°μ μΌλ‘ λͺκ°μ§ μκ°ν΄λ³Ό λΆλΆμ μ½λ©νΈ λλ Έμ΅λλ€. νμΈν΄λ³΄μκ³ λ¦¬ν λ¬μμ£ΌμΈμ! κ³ μνμ ¨μ΅λλ€.ππ»ββοΈ
| <title>Movie App</title> | ||
| <link rel="icon" href="./favicon.ico"> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css" /> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
There was a problem hiding this comment.
preconnectλ₯Ό μ¬μ©νμ¬ font νμΌμ λ€κ³ μ€κ³ μλ€μ:) ν΄λΉ μμ±μ΄ μ΄λ ν μλ―Έλ‘ μ¬μ©λκ³ μλμ§ λ μ΄λ€ ν¨κ³Όκ° μμ΄μ μΆκ°ν κ²μΈμ§ μ€λͺ
ν΄μ£Όμ€ μ μμκΉμ?
| <div class="the-loader hide"></div> | ||
| ` | ||
|
|
||
| const moviesEl = this.el.querySelector(".movies"); |
There was a problem hiding this comment.
μν λͺ©λ‘ νκ·Έλ₯Ό ν΄λμ€λͺ
μΌλ‘ μ‘°ννκ³ μλλ°, CSS νΉμ΄μ±μ λ°λ₯΄λ©΄ ꡬννμ νμ΄μ§ λ΄μμ MovieList μ»΄ν¬λνΈλ νλλ§ μ¬μ©λλ―λ‘ ν΄λμ€λͺ
μ΄ μλ IDλ₯Ό ν΅ν΄μ μμλ₯Ό μ‘°ννλ κ²μ΄ λ ν¨μ¨μ μΌ κ²μΌλ‘ 보μ
λλ€. μ΄μ λ§μ°¬κ°μ§λ‘ μλμ loadEl λν IDλ₯Ό ν΅ν΄μ μ‘°ννλ λ°©μμ κ²ν ν μ μμ κ² κ°μμ! ν΄λμ€λͺ
μ μ¬μ©νμ¬ μ‘°νν΄μΌνλ€λ©΄ κ·Έ μ΄μ λ μ€λͺ
ν΄μ£Όμ€ μ μμκΉμ?π€
| export default class MovieList extends Component { | ||
| constructor(){ | ||
| super() | ||
| movieStore.subscribe('movies', ()=>{ |
There was a problem hiding this comment.
ν΄λΉ μ½λμ λμΌνκ² stateμ κ°μ λ³νμ λ°λΌ ν΄λΉ μ»΄ν¬λνΈμ 리λ λλ§μ λ±λ‘νλ μμ
μ constructorμ μμ±νμ
¨λ€μ. μλμ render() λ©μλκ° μλλΌ constructor()μ μμ±νμ
¨λμ§ κΆκΈν©λλ€!
| .the-loader.hide { | ||
| display: none; | ||
| } | ||
| @keyframes loader { |
There was a problem hiding this comment.
@keyframes μ΄λ
Έν
μ΄μ
μ μ΄λ€ μλ―Έλ₯Ό κ°μ§λμ§ κΆκΈν©λλ€π€ μλ―Έμ μμ± μλλ₯Ό μ€λͺ
ν΄μ£Όμ€ μ μλμ?
|
|
||
| export default store | ||
| export const searchMovies = async page => { | ||
| store.state.loading = true |
There was a problem hiding this comment.
μ½λλΌμΈλ§λ€ μΈλ―Έμ½λ‘ ;μ΄ λΆμ΄μμ§ μμ΅λλ€. λ¬Όλ‘ λ°λμ νμν κ²μ μλμ§λ§, κ°λ
μ±μ μν΄μ μΆκ°νλ κ²μ΄ μ’μ κ²μΌλ‘ 보μ
λλ€. lintμ€μ μ ν΅ν΄μ μ μ₯μμ μλμΌλ‘ μΈλ―Έμ½λ‘ μ΄ λΆμ μ μλλ‘ μΆκ°ν μ μμΌλ λμ
μ κ²ν ν΄λ³΄μλ κ²μ μ΄λ¨κΉμ? μλλ VScodeμ 'lint'μ€μ λ°©λ²μ
λλ€.
| store.state.message = '' | ||
| } | ||
| try { | ||
| const res = await fetch(`https://omdbapi.com?apikey=7035c60c&s=${store.state.searchText}&page=${store.state.page}`) |
There was a problem hiding this comment.
μ§λλ²μ λ©ν λ§ μκ°μλ 곡μ λμλ λΆλΆμΈ fetchλ₯Ό ν΅ν΄μ HTTP μμ²μ κ°μ Έμ€λ λ‘μ§μ λ°λ‘ λΆλ¦¬νμ¬ κ΄λ¦¬νλ κ²μΌλ‘ 리ν©ν λ§ ν΄λ³΄λ κ²μ μ΄λ¨κΉμ? μ΄λ₯Ό ν΅ν΄ storeλ λ¨μν μνκ΄λ¦¬ λ‘μ§μ λ΄λΉνκ³ APIμΈ‘μ HTTP μμ² λ‘μ§μ λ΄λΉνμ¬ μ±
μμ λΆλ¦¬ν μ μμ κ²μΌλ‘ 보μ
λλ€.
π¬ μν κ²μ
λ°°ν¬λ§ν¬: https://roaring-dolphin-d6dd06.netlify.app
β HTML, JS μ¬μ©
β νμ
β μ ν
λ°°μ΄μ
μμ¬μ΄μ