2048 개발기

 

파일구조

일단 4x4 테이블을 만들어보자

아무것도 안뜬다

뭐지? 제대로 한것같았는데

보니깐 인자부분을 {} 로 안감싸줬다

 

고쳤는데도 안뜬다...

 

이럴땐 개발자도구에서 html을 살펴보자

 

table하나만 있다

 

원래 table 밑에 tr이랑 td가 떠야하는데 안뜬다

 

props도 제대로 들어갔는데,,,

이건 아무래도 하위 컴포넌트 쪽에서 문제가 생긴거같다

 

콘솔로그를 찍어봤는데 잘 찍힌다. 이부분은 문제가 없단 소리고...

 

 

이부분에서 아무것도 찍히지 않는다. 여기가 문제라는 소리다

 

보니깐 map (() =>{} ) 을 map (() =>()) 로 바꿔주니 해결됐다... 왜지?

4x4틀

 

원하는대로 틀이 잘 나온다

 

다음으론 첫 시작시 랜덤으로 두군데에 숫자가 나오게 해주자.

 

25%확률로 4가 나오게도 해보자

 

먼저 랜덤한 위치를 선정하는 함수를 만들어줬다

 

그다음엔 reducer을 통해 x,y 값을 넣어주려 했다

 

그랬는데 오류가 발생했다

보니깐 변수를 선언전에 사용한게 가장 문제였던거같다

 

이렇게 바꿔주니 잘 동작한다

 

0~3까지 숫자중에 1이 나오면 4, 아니면 2가 나오도록 짜줬다.

근데 생각해보니깐 따로 분리할 필요가 없을거같아서

 

위치, 숫자 뽑고 넣어주는걸 하나의 함수로 만들었다

 

그리고 useEffect에 dispatch로 두번 넣어줬다

 

근데 가끔 숫자가 겹치는 일이 발생한다. 이럴때는 안에 숫자가 있는 칸이면 다시 뽑게 하면 된다

 

이러면 중복된 칸일경우 위치를 다시뽑게 된다

 

이제 방향키를 누르는 이벤트가 발생시 해당 방향키에 맞춰 요소들을 이동해 주면 된다

 

여기서부턴 밥먹고 해야징