리액트공부를 어느정도 마친후에 여태 배운것들로 간단하게 쇼핑몰을 만들어보려한다.
처음으로 쇼핑몰의 데이터로 게임썸네일, 가격, 등 정보는 나무위키와 스팀에서 가져왔다.
(사용해도 문제는없겠지,,)
저장한 데이터를 Json파일로 만들어 준 뒤 github에 올려서 get해오는 식으로 사용해보려한다.
이미지와 Json파일을 업로드해두고
axios get해온 뒤 잘 불러와지는지 부터 확인하고 작업을 시작할것이다.
axios로 불러와보기
-
시작하기전 axios를 설치해준다
npm install axios -
불러올 App.js 최상단에 import 해온다
import axios from 'axios' -
버튼에 클릭이벤트로 클릭했을 때 콘솔창에 데이터를 뿌려서 확인해보기로했다.
<div className="App">
<button onClick={()=>{
axios.get('https://raw.githubusercontent.com/haegi-git/GameShopData/main/gamedata/puzzel.json')
.then((result)=>{
console.log(result.data)
})
.catch(()=>{
console.log('실패')
})
}}>
axios테스트버튼
</button>
</div>
콘솔창에 정상적으로 데이터들이 잘 출력이 됐다!
이걸로 이제 작업을 시작해볼것이다.
메인화면 대충 꾸며주기
헤더부분을 일단 만들어주자
컴포넌트로 따로 만들어준 뒤 여러페이지에서 다 사용가능하게끔 만들어둘것이다.
생긴모습은 이렇다 디자인엔 자신이없어서 일단 대충 만들어두었다.
컴포넌트로 Header.js로 따로 생성한 뒤
const Header = ()=>{
return(
<header className="Header">
<div>
<ul>
<li>
GAMES
</li>
<li>
About
</li>
</ul>
</div>
<p className='Header_logo'>로고</p>
<div>
<ul>
<li>장바구니</li>
<li>로그인</li>
<li>회원가입</li>
</ul>
</div>
</header>
)
}
export default Header정말 대충 작성해주었다. css는 더 간단하게 만들었기때문에 생략..
App.js에서 Header를 불러온뒤 화면구성을 대충 짜보았다
import axios from 'axios'
import { useEffect, useState } from 'react';
import './App.css';
import Header from './components/Header';
function App() {
const [puzzeldata,setPuzzelData] = useState([{
id : 0,
title : '',
price : 0,
img : ''
}])
useEffect(()=>{
axios.get('https://raw.githubusercontent.com/haegi-git/GameShopData/main/gamedata/puzzel.json')
.then((result)=>{
setPuzzelData(result.data)
}).catch(()=>{
console.log('실패')
})
},[])
console.log(puzzeldata)
return (
<div className="App">
<Header/>
{/* 슬라이드 / fade */}
<section className="slide">
<img src={puzzeldata[0].img} alt='슬라이드 이미지'/>
</section>
{/* 추천 게임들 */}
<section className='recommend'>
{puzzeldata.map((a,i)=>{
return(
<div key={i}>데이터{a.title}</div>
)
})}
</section>
</div>
);
}
export default App;
현재까지의 코드인데 뭐.. 크게 만든건 없다.
useEffect로 화면이 마운트될 때 puzzeldata라는 useState에 데이터를 넣어주고
그 데이터를 사용해서 map함수를 이용해서 전부 출력되는지 확인을 해두었고
깃허브에 올려둔 이미지를 확인해보기위해 슬라이드칸을 만들어서 이미지출력도 해보았다.
현재까지 작업한 모습은 이러한데 첫 시작이라 아직은 뭐 .. 구려보인다
오늘은 첫날 첫시작의 작업이라 이정도의 틀만 잡아두고 하루하루 진행할것이다.
완성목표
완성목표로 잡은건 여러 게임들로 쇼핑몰 느낌의 사이트를 만드는건데
그 구성으로 메인화면에 axios로 받아온 데이터를 사용해 슬라이드 이미지넣어서
슬라이드 화면만들기 / 슬라이드가 아니면 fade이벤트
그리고 로그인은 파이어베이스를 사용해보기
서버는 다룰줄모르기에 json파일을 깃허브에올려 사용한것에 만족하고
GAMES 카테고리 리액트라우터로 만들어서 화면구성하기
GAMES안에 게임장르 퍼즐,시뮬레이션,생존 게임 카테고리를 Nested Route 중첩 라우팅하여
분류해서 화면구성하기
장바구니 구현하기, 가격순,이름순정렬기능
이정도까지 생각해두고있다.
여러 기능을 사용해보기위해 생각한 방향인데 잘 만들 수 있을지..
만들면서 생겼던 오류
오늘 화면구성하면서 생겼던 오류에 대한 기록.
puzzleData라는 useState를 만들었는데 ('') 이렇게 아무것도 작성해주지않은 상태로
useEffect에서 setPuzzledata()를 사용해 안에 axios로 받은 데이터를 넣어줬는데
map함수를 사용해서 화면에 출력하려하니 에러가났었다.
아무래도 처음상태가 배열이아닌 그냥 빈 공백이어서 그랬던거같다. 그래서 해결방안은
빈 공백이아닌 배열을 넣어줬다. 그래서 처음엔 useState([]) 이렇게 만들어줬는데
map함수의 에러는 고쳐졌지만 슬라이드의 이미지호출에서 또 에러가 발생했는데 아무것도없는 배열이라 이미지호출에서 puzzleData[0].img 로 이미지 링크를 가져왔는데 [0]번째 배열이없고 안에 img라는 속성또한 없어서 에러가난거같았다...
그래서 puzzleData([{
id : 0,
title : '',
price : 0,
img : ''
}])
로 고쳐줬더니 잘 작동했다. 이런식으로 사용하는게 맞는지는 잘 모르겠지만 일단 버그는 일어나지않아서 만족하고 끝!
