code . 로 vsCode열기 필요없는 파일들을 삭제한다. 테일윈드 CSS https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. tailwindcss.com 테일윈드 CSS 홈페이지에서 사용법을 확인하면 나오는 라이브러리 설치 코드를 복사하여서 터미널에서 실행한다. index.css . 위의 가 정확하게 어떤 css가 적용된지 확인하기 쉽도록 확장 프로그램 설치 tailwindcss는 부트스트랩처럼 CSS를 편하게 사용하도록 도와주는..

https://m.blog.naver.com/c-maker/223241868650 [React] State, Map, Filter State 컴포넌트 내부에서 관리되는 변경이 가능한 데이터 변수는 값이 변한다고 해서 화면이 다시 렌더링... blog.naver.com https://narup.tistory.com/196 [React] React.js 강좌 10. map, slice, concat, spread 사용법 React map, slice, concat, spread 사용법 1. 기본적인 map() 사용법 map()함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용해 처리된 새로운 결과를 새로운 배열에 담아 반환하는 함수입니다! const narup.tistory.com

useEffect는 두 개의 인수를 받는다. 첫 번째는 함수이고, 두 번째는 의존성 배열이다. 함수에는 어떤 sideEffect 코드라도 넣을 수 있다. 그리고 이 함수는 두 번째 인수로 주어질 [의존성 배열] 안에 담긴 값에 변경사항이 생길 경우에만 실행된다. 즉, 의존성 배열이 Side Effect가 실행될 타이밍을 알려준다라고 생각하면 된다. 만약, useEffect()가 포함된 컴포넌트가 재랜더링되더라도 이 함수는 실행되지 않는다. 오로지 [의존성 배열] 안에 담긴 값이 변경될 때만 실행되기 때문임. 만약 위의 경우 처럼 의존성 배열이 없을 경우에는 컴포넌트가 재 랜더링 될 때 마다 함수가 실행된다. 만약 위처럼, 두 번째 인수에 [] 빈 배열이 주어진 경우엔, 처음 컴포넌트가 실행된 순간에만 u..

이제 추가된 각 동물의 목록(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..