React/응용프로젝트 (4) 썸네일형 리스트형 Sortable 컴포넌트 만들기 (drag and drop) 리액트 (React) 로 Sortable 컴포넌트 만들기입니다. 강의 보고 이해가 안가서, 복습할 겸 정리하는 글이다보니 정확도가 높지않을 수 있습니다. 그래도 구현은 했으니, 참고해주세요 https://www.npmjs.com/package/@imsmallgirl/sortable-list @imsmallgirl/sortable-list This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).. Latest version: 0.1.0, last published: 10 minutes ago. Start using @imsmallgirl/sortable-list in your proj.. [노마드 코더] React로 영화 앱 만들기3 이제, id를 사용해서 어떤 영화의 상세페이지로 들어가게 해주는지 설정해줄거임 url 에는 변수를 사용해줄 수 있는데, :id 이런 식으로 앞에 : 를 붙히면 된답니당. App.js 이렇게 되면, Movie 컴포넌트에 id가 필요하게 된다는 것을 알 수 있듬. 하지만 우리 Movie 컴포넌트를 확인해보면 Movie.jsx function Movie({coverImg, title, summary, genres}){ id 를 props 로 받고 있지 않다는 걸 알 수 있습다. Home.jsx 로 가서 Home.jsx { const json = await (await (await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)).json()).. [노마드코더] React로 영화 앱 만들기2 이제 다음 페이지로 넘어가기 위해서. 1. 페이지 컴포넌트를 만들어준다 페이지 컴포넌트에는, 전에 App.js 에서 썼던 데이터 정보를 스크린에 보여주는 태그들을 가져올것이당. function Movie({}) { return {title} {summary} {genres.map((g) => { return {g} })} } export default Movie; 바로 요러케 근데 이 데이터들은 지금 오류가 뜰것이야. 왜냐면 App.js 에서 불러온 데이터들이니까! 그래서 이 Movie 컴포넌트가 App.js 로부터 받을 예정인 정보들을 props object로 받을겡 function Movie({medium_cover_image, title, summary, genres}) { return {title.. [노마드코더] React로 영화 앱 만들기1 앱 안에서 페이지를 전환하는 방법 먼저 영화 정보를 불러와서 보여줘야함. 1. 영화 정보를 받을 수 있는 api 를 가지고 온댜. https://yts.mx/api API Documentation - YTS YIFY Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details. yts.mx 나는 이 사이트를 쓸것이당. 2. 정보를 불러오는 도중에 보여줄 로딩 창을 구현한다. import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { const [loading.. 이전 1 다음
