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..

함수로 만들어보기 rfce는 export default가 아래에 작성됨 index.js에서도 컴포넌트 바꿔준다. import React, { useState } from "react"; function GuguFunction() { //useState const [first, setFirst] = useState(Math.ceil(Math.random() * 9)); const [second, setSecond] = useState(Math.ceil(Math.random() * 9)); const [value, setValue] = useState(""); const [result, setResult] = useState(""); const [score, setScore] = useState(0); co..

import React, { useState } from 'react'; const GugudanGame = () => { const [question, setQuestion] = useState({}); // 현재 문제를 담는 상태 const [userAnswer, setUserAnswer] = useState(''); // 사용자가 입력한 답을 담는 상태 const [message, setMessage] = useState(''); // 정답 여부 메시지를 담는 상태 // 랜덤한 구구단 문제 생성 함수 const generateQuestion = () => { const num1 = Math.floor(Math.random() * 9) + 1; // 1부터 9까지의 숫자 중 하나 랜덤 선택 const..

vscode로 열기 local 서버로 실행 사용하던 first-app 폴더를 그대로 사용함 컴포넌트는 앞에 대문자를 사용하는게 원칙임 jsx 파일은 리액트 프로젝트에서만 사용하는 파일임 js로 만들어도 무관함. jsx도 자바스크립트에 포함되기 때문에 js로도 사용 가능하지만 리액트 컴포넌트임을 알기 쉽게 하기 위해서 jsx로 함 단축 기능이 있음 rfc를 치면 자동으로 아래와 같이 파일의 이름으로(Gugudan) 함수를 만들어줌 export -> index에서 구구단 컴포넌트를 불러오는데 export가 붙어있어야 되어야 불러올 수 있음 index.js에서 기존 불러오던 App컴포넌트를 지우고 Gugudan을 불러왔다. 출력화면이 Gugudan으로 바뀐것을 확인 할 수 있다. export와 default가..