이제 추가된 각 동물의 목록(Pet 컴포넌트) 에 삭제 버튼을 추가하여 목록에 있는 동물을 삭제하는 기능을 구현하고자 한다. Pet 컴포넌트에서 props를 id 값이 넘어 가도록 작성한다. 해당 아이디 값으로 filter를 사용하여 삭제할 예정임 그리고 setPets함수도 넘겨줘서, Pets의 변동이 있을 때 ( 삭제 처리) 바로 리랜더링하도록 할 예정이다. 일단 버튼을 추가해주고 삭제 버튼을 클릭하면 handleDelete 함수가 실행되도록 한다. handleDelete함수는 삭제 버튼 클릭! 이라는 메세지를 담은 alert창을 띄운다. handleDelete함수를 수정한다. props에서 넘어오는 setPets함수를 사용할거고 이 함수의 주요 목적은 props.id와 각 pet의 id를 비교하여 p..

현재는 브라우저를 새로고침하면 모두 초기화된다. 실제 앱은 DB에 저장해서 마지막 상태가 업데이트 되어야 함 영속성(persistence)은 생성한 프로그램의 실행이 종료되더라도 사라지지 않는 데이터의 특성을 의미함 localstorage에 저장해서 영속성을 유지해 보도록 하겠다. 현재 useState에 저장되어있던 초기 동물 값을 다 지우고, 빈 배열을 만든다. useEffect(() => { //처음 실행시 한 번 실행됨(초기값을 넣을 때 사용한다. ) }, []); useEffect(() => { //pets가 변경될 때 마다 실행됨 }, [pets]); useEffect를 통해서 내가 구현하고자 하는 두 가지 기능은 아래와 같다. 1.처음 앱 실행시 데이터 불러오기 useEffect(() => {..

이제 화면에 표시한다. 3가지 경우 첫번째 선택 두번째 선택 두개가 맞을경우 matched: true 일경우 그림을 뒤집어 표시 => flipped SingleCard.jsx import "./SingleCard.css"; import React from "react"; const SingleCard = ({ card, handleChoice, flipped }) => { function handleClick() { handleChoice(card); } return ( ); }; export default SingleCard; SingleCard.CSS /* front of card - the picture */ .card .front { transform: rotateY(90deg); position..

back이미지를 클릭했을 경우 card의 정보를 출력하게끔 만듬 테스트 해보기 카드 두 개를 선택 시 같은 카드를 클릭하면 맞췄습니다. 다른 카드를 클릭하면 틀렸습니다. 출력하기 function App() { // 카드와 턴수 useState 만들기 // useState 사용 const [cards, setCards] = useState([]); //카드는 배열로 시작함 const [turns, setTurns] = useState(0); const [choiceOne, setChoiceOne] = useState(null); //첫 번째 카드 선택 const [choiceTwo, setChoiceTwo] = useState(null); //두 번째 카드 선택 const shuffleCards = () ..

https://blog.naver.com/drv983/222860183874 🎪 매직 메모리 게임 수업용 블로그 blog.naver.com 압축 풀고 vsCode로 열기 node_modules를 삭제하면 용량이 많이 줄어듬 깃허브에서 다운로드 받아서 실행하고자 할 때 삭제한 다음에 npm install을 하여 node_modules를 만들 수 있음 npm start를 통하여 실행해 준다 파일 정리하기 App.js function App() { // 카드와 턴수 useState 만들기 // useState 사용 const [cards, setCards] = useState([]); //카드는 배열로 시작함 const [turns, setTurns] = useState(0); const shuffleCard..

build 폴더 생성되어있음 배포할 때는 용량이 작은게 좋아서 줄이고 줄여놓음 ctrl + local 주소 클릭하면 됨 화면 잘 출력되는지 확인하기 https://www.netlify.com/ Scale & Ship Faster with a Composable Web Architecture | Netlify Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now! www.netlify.com 깃허브 계정으로 로그인 가능함 . 배포완료! 배포 주소 바꾸기 https://react-movieapp-joeuni.net..

영화 제목 변경 및 내 선호작 추가 구글 폰트 적용 선호작 추가할거임 App.js 무비 리스트에 props로 내려보내줌 MovieList에 추가 (onclick) //선호작 - 로컬스토리지에 저장된 myMovies를 가져올거임 useEffect(() => { //처음 시작 시 myMovies가 있으면 가져와서 초기값을 넣는다 const movieFavourites = JSON.parse(localStorage.getItem("myMovies")); if (movieFavourites) { setMyMovies(movieFavourites); } }, []); //로컬스토리지에 저장한다. const saveToLocalStorage = (items) => { localStorage.setItem("myMo..

import React from "react"; const MovieList = (props) => { return ( {props.movies.map((movie) => ( 선호작 추가 ❤️ ))} ); }; export default MovieList; App.css .image-container { position: relative; transition: transform 0.2s; } .image-container:hover { cursor: pointer; transform: scale(1.1); } .image-container:hover .overlay { opacity: 1; } .overlay { position: absolute; background: rgba(0, 0, 0, 0.8);..

App.js에서 검색어로 영화 데이터를 가져오게 만들거임 //영화 데이터 가져오기 await를 써서 async를 써야함 const getMovieRequest = async (searchValue) => { const url = `https://www.omdbapi.com/?apikey=6862e21d&s=${searchValue}`; const response = await fetch(url); //데이터를 받아올 때 까지 기다림 await const responseJson = await response.json(); //결과 -> json으로 변환 console.log(responseJson); }; //실행해보기 getMovieRequest("amazing"); url로 검색을 하는데 아까 발급받은..

https://www.omdbapi.com/ OMDb API - The Open Movie Database www.omdbapi.com 위의 주소로 영화 정보를 API로 받아온다 free로 함 이메일로 키를 보내줌 포스트맨으로 테스트해봄 새 프로젝트 생성 실행하기 파일 정리하기 App.js에서 useState를 사용해서 포스트맨에서 가져온 영화 초기값을 가져온다. 한 3개정도 components 폴더 생성 후 MovieList.jsx 생성 컴포넌트를 사용할 수 있도록 rafc로 함수형 컴포넌트로 설정한다 영화정보를 props로 내려주면 movieList에서 그 정보를 가져와서 map. 반복문임 foreach와 틀린점이 리턴을 시켜준다는 점임 부트스트랩 설치 부트스트랩 디펜더시 추가 App.css추가 bo..