React에 Typescript을 적용하는 방법을 배웠고, 이제 tailewind CSS를 이용하여 UI를 구현하고 Docker를 이용해 배포까지 해보자!CRA 없이 웹팩을 이용하여 React와 TS 프로젝트를 생성하는 것은 이미 해보았다!참고하자! 👉 React +
게임들에 접속하기 전 메인 페이지를 만들어보자. 카카오오븐이라는 목업 툴을 통해 대략적으로 구상해보았다.
구구단 문제를 제시하는 게임이다. 추가적으로 input 유효성검사와 score 기능, 모달창 구현을 하였다. 목업 툴을 통해 대략적으로 구상해본 화면이다.1️⃣ landomNumber1, landomNumber2: 랜덤으로 출력되는 숫자 두개 생성.2️⃣ first,
구구단 문제를 제시하는 게임이다. 추가적으로 input 유효성검사와 score 기능, 모달창 구현을 하였다. 목업 툴을 통해 대략적으로 구상해본 화면이다.1️⃣ landomNumber1, landomNumber2: 랜덤으로 출력되는 숫자 두개 생성.2️⃣ first,
숫자 4개를 입력하여 숫자를 맞추는 게임이다. 추가적으로 난수 생성, input 유효성검사와 횟수 제한, 숫자 리스트, 모달창 구현을 하였다. 목업 툴을 통해 대략적으로 구상해본 화면이다.유저가 맞출 숫자를 4개의 난수로 생성해놔야한다.1️⃣ candidates : 1
랜덤으로 출력되는 가위바위보와 유저가 누른 것에 따라 승부를 판별하는 게임이다. 랜덤 그림 출력, 승부판별, 승무패 10회 출력, 모달창 구현을 하였다. 목업 툴을 통해 대략적으로 구상해본 화면이다.유저가 맞출 숫자를 4개의 난수로 생성해놔야한다.1️⃣ setInter
로또 숫자 맞추기 게임이다. 유저가 로또 숫자 선택, 랜덤 로또 숫자 6개 출력, 일치/불일치 판별, 입력 input 유효성 검사, 모달창 구현을 하였다. 목업 툴을 통해 대략적으로 구상해본 화면이다.1️⃣ form : 1 ~ 45 중의 숫자를 입력.2️⃣ myLott
지뢰를 피하여 땅따먹기 하는 게임이다. 추가적으로 원하는대로 맵 생성, 성공까지 타이머, 지뢰 랜덤 배정, 지뢰 위치 힌트 제공, 모달창 구현을 하였다. 목업 툴을 통해 대략적으로 구상해본 화면이다.유저가 가로,세로 길이를 지정하여 맵을 생성 가능.1️⃣ option
먼저 1빙고하는 사람이 이기는 게임이다. 한줄 판별, 유저 변경, 모달창 구현을 하였다. 목업 툴을 통해 대략적으로 구상해본 화면이다.initialState로 설정된 tableData를 테이블로 출력하기.1️⃣ tableData를 table에 props로 전달2️⃣
Start
✅ 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하는 과정은 다음과 같다.✅ props에 타입을 지정해주려면 다음과 같이 작성할 수 있다.✅ 하지만, 다음과 같이 작성할 것을 추천한다.React에서는 generic으로 간단하게 함수형 컴포넌트의 props에 대한
간단한 로또추첨기 게임을 구현해보면서 FC, useMemo, Life Cycle는 어떻게 타이핑되는지 알아보자.