MERN 스택 학습 32일 차
오늘은 뱀과 사다리 게임을 만들었습니다.
이 프로젝트에는 복잡한 배열 조작과 로직이 필요했습니다. HTML5, CSS3, 그리고 Vanilla JavaScript를 사용했습니다.
어제는 가위바위보 게임을 만들었습니다. 오늘은 100개의 셀로 구성된 그리드로 넘어왔습니다. 이를 위해 수학적 레이아웃에 따른 위치 추적이 필요했습니다.
구현 방법은 다음과 같습니다:
- 루프를 사용하여 그리드를 생성했습니다. 100개의 div를 일일이 하드코딩하지 않았습니다.
- CSS Grid를 사용하여 10x10 레이아웃을 만들었습니다.
- JavaScript 객체를 사용하여 사다리와 뱀을 관리했습니다.
객체 맵은 트리거 타일과 목적지 타일을 연결합니다. 이를 통해 긴 if-else 문을 피할 수 있었습니다.
예시 맵:
- 사다리: 4에서 14로, 9에서 31로, 28에서 84로.
- 뱀: 17에서 7로, 54에서 34로, 98에서 79로.
동적인 인터페이스에서 공간적 전환을 관리하면서 상태 관리(state management)에 대해 많은 것을 배웠습니다.
출처: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1