db생성 후 import하기
src폴더 안에 db폴더 생성 후 data.json생성
"levels"와 "maps"라는 오브젝트 형식의 변수를 db에 저장
출력할 페이지에 아까 만든 db를 임포트해준다.
map함수를 이용한 db값 출력
levels의 db값을 리스트 안에 불러올 것이다.
{json파일명.오브젝트이름.map((아무변수)) => 출력내용))}
이런식으로 반복문을 구성해 levels오브젝트의
player값과 explain값을 리스트에 출력해준다.
리스트에 넣어줄 키값은 levels의 id로 설정해준다.
불러와진 리스트들을 확인할 수 있다.
구글링하면서 css열심히 입혀주자 (MapPage)
이제 저 버튼들을 누르면 유저 수준별로 알맞는
맵들이 추천된 리스트로 이동하도록 하면 된다.
사실 저 버튼처럼 보이는 건 Link태그(a태그)이지만 편의상 버튼이라고 부를 것이다.id별로 맵 출력하기
버튼 누르면 띄워질 MapListPage를 만들자
이번엔 테이블 안에 "maps"오브젝트들을 불러오자.
filter함수를 사용해 id가 1인 맵의 이름과 레벨을 불러와보자
id가 1인 맵이 불러와진 모습이다.
id에 따른 라우터 설정
MapPage에서의 링크를 id/${level.id}로 수정해준다.
링크값에 변수를 넣을 땐 작은 따옴표가 아닌 백틱을 써야한다.
level.id엔 levels의 데이터별 id가 들어가게된다.
id가 1인 버튼을 누르면
이런식으로 링크가 들어간다.
app.js의 라우터 path값도 위 링크에 알맞게 설정해주자.
id값 변수로 받기
react-rotuer에서 useParams란 걸 임포트 해준다.
useParams로 id의 파라미터 값을 변수로 설정해준다.
id파라미터값은 링크에서 설정해둔 level.id값이 된다.
링크별로 다른 화면구성하기
이제 링크의 id값와 일치하는 맵 리스트와 레벨 리스트를 변수로 설정한다.
useParams는 문자열 형태로 id 파라미터값을 받아오므로
Number()함수를 이용해 숫자로 바꿔줘야한다.
사용자가 실력에 맞는 맵풀을 선택하면
맵풀의 레벨이 몇렙부터 몇렙까지인지 상단에 띄우고
알맞는 맵 리스트들이 뜨도록 화면을 구성했다. (MapListPage)
이미지
라우터 구현 후 이미지가 자꾸 안뜨는 문제가 생겼는데
경로 입력할 때 맨 앞에 '.'을 빼고 입력하면 사진이 잘 나왔다.
