코딩묻은 디자이너

이번에는 보고 타자연습을 할 글귀를 불러오고, 맞았는지 틀렸는지 점수 시스템 만들기~!

타수까지는 사실 목표에도 없고... 총 몇개 틀렸는지, 맞았는지 나중에 정확도 시스템만 넣을 계획이다

(물론 욕심나서 나중엔 몇타인지까지 넣을 수도 있겠지만 그것은 일단 후순위)

저번에는 Enter를 치면 단어가 초기화 되는 시스템을 만들었는데

1. 이번에는 Enter를 치면 랜덤 단어가 나오게하기

2. 점수 시스템

이렇게 만들어 봤다

결과물

JSON 파일 불러오기

//  datas/sample.json


[
    {
        "id" : "1",
        "value" : "안녕하세요"
    },
    {
        "id" : "2",
        "value" : "안녕히가세요"
    },
    {
        "id" : "3",
        "value" : "안녕"
    },
    {
        "id" : "4",
        "value" : "메롱"
    },
    {
        "id" : "5",
        "value" : "잘 먹었습니다"
    }
]

간단하게 데이터가 5개 들어있는 sample.json 파일 생성

필요한 곳에서 import만 해주면 간단하게 사용할 수 있다

타란

딱히 뭐 없음

import React, { useRef, useState } from 'react';
import sample from "../datas/sample" // 데이터를 사용할 파일에서 import를 해줬당

function Content() {

    return (
        <>
            <div>
                <div>
                    {sample[0].value} // json 첫번째 단어를 불러옴
                </div>
                <div>
                    <input type='text'
                        id='filed'
                        onKeyDown={handlePress}
                        ref={inputRef}>
                    </input>
                </div>  
            </div>
        </>
    );
}

export default Content;

이렇게 짜면 일단 JSON 파일의 첫번째 데이터인

'안녕하세요'

가 불러와지는데, 내가 필요한건 Enter이후 랜덤으로 단어가 바뀌는거라 랜덤 숫자를 받아올 수 있어야 한다.

0 ~ 4 사이에 숫자가 랜덤으로 생성되는 함수를 만들었다

랜덤함수

const handlePress = (e) => {
        console.log(e.key)
        if(e.key === 'Enter'){
            setNumber(Math.floor(Math.random()* 5))
            textClear()
        }
    }

<div className='typing-text'>
	{sample[number].value}
</div>

json을 불러오는 곳에서 랜덤으로 만들어준 값에 해당하는 값을 불러오도록 하면 된당

점수시스템

그러면 이제

내가 입력한 값이 랜덤으로 불러온 텍스트와 일치하는지 확인하고 점수를 올리는 시스템을 만들면되는데

useState사용하면 간단

    const [oNum, setONum] = useState(0); // 맞은 값 
    const [xNum, setXNum] = useState(0); // 틀린 값

일단 0으로 초기값을 두고 Enter 함수에 if 문으로 값을 비교해서 점수롤 올리는 시스템을 만든다

    const handlePress = (e) => {
        console.log(e.key)
        if(e.key === 'Enter'){
            if(e.target.value === sample[number].value){
                setONum(oNum + 1) // 맞았을 때
            }
            else{
                setXNum(xNum + 1) // 틀렸을 때
            }
            setNumber(Math.floor(Math.random()* 5))
            textClear()
        }
        
    }

sample[number].value 값과 비교해서 현재 입력된 값이 일치하면 setONum으로 ONum 값 +1

틀리면 setXNum으로 XNum 값 +1을 해준다

근데 이렇게 보니깐 ＼(º □ º l|l)/ 함수 분리해야겠는데ㄷㄷ

마무리

contents와 InputBox를 분리하려고 보니깐... 이미 함수를 Contents에 때려박아놨음

형상관리도구는 이번에 사용할 계획이 없기 때문에 inputBox데이터를 content에 보내려면 값을 main에서 관리해야할 것 같은데

이미 Conents에 다 만들어져있어서 대대적 수술이 필요해졌다

역시 프로젝트는 처음 기획부터 찬찬히 해야한다...

화면 구성부터 다시해야할 듯...

말하는 감자 우러

React 다 까묵어버린 몽총이의 갑작스런 프로젝트 시작

정말로 React 하나도 기억 안나서 당황스럽지만 검색을 통해서 하나하나 다시 만들어가는 중

이번에 만들어볼 것은 타자연습 사이트로

지금 일단 구현하는건

input박스에 단어를 입력하고 Enter를 치면 input 박스의 텍스트가 초기화 되도록 하는 것이다

여기서 useRef를 사용하는데 useRef가 무엇이냐~~ 하면~~

까먹음

사실 다음주부터 react 수강을 하는데 복습 겸 찾아보았다

useRef 사용

특정 DOM을 선택할 수 있게 해주는 react Hook로

- 특정 래퍼런스 값을 참조할 수 있다

- 래퍼런스 값의 DOM 조작 가능

- 래퍼런스 콘텐츠 재 생성 방지

사용하기 위해서는 일단

import { useRef } from 'react';

로 최 상단에서 호출해준다

그리고 처음에는 초기 값을 설정해줘야한다.

const inputRef = useRef(null)

// inputRef 라는 이름을 가진 useRef를 초기값 null로 생성

결과물

키보드의 Enter을 치면 input창에 입력되어있는 텍스트가 초기화되어서 다시 입력을 할 수 있다

코드

import React, { useRef, useState } from 'react';


function Content() {
    const [text, setText] = useState("");
    const inputRef = useRef(null) // 초기 값 null로 설정

    const textClear = () => {
        inputRef.current.value = null // 값을 초기화
    }


    const handlePress = (e) => {
        console.log(e.key)
        if(e.key === 'Enter'){
            setText(e.target)
            textClear()
        }
        
    }
    return (
        <>
            <div className='content-box'>
                <h1>
                    타자연습
                </h1>
                <div className='typing-text'>
                    안녕하세요
                </div>
                <div className='typing-box'>
                    <input type='text'
                        id='filed'
                        onKeyDown={handlePress} // Enter 입력시
                        ref={inputRef}>
                    </input>
                </div>  
            </div>
        </>
    );
}

export default Content;

안녕하세요를 보고 입력하도록 만들었는데

저 부분은 나중에 JSON파일과 연결하여 랜덤으로 텍스트를 불러올 수 있도록 수정할 예정

handlePress 함수를 호출 했을 때 onKeyDown된 값이 'Enter' 인 경우

textClear() 함수를 호출한다

textClear() 함수에서 inputRef의 값을 ' '(빈 값)으로 변경시켜서

Enter를 입력하면 input 값이 사라지는 것을 확인할 수 있다!

참고 : 

https://react.dev/reference/react/useRef

혹시 제가 잘못 알고 있는 부분이 있다면 댓글 주시면 감사하겠습니다

이번엔 npx create-react-app my-app을 실행할 때 발생하는

npm ERR! code ENOENT

npm ERR! syscall lstat

npm ERR! path C:...

npm ERR! errno -4058

.

.

.

에러 해결하기!

이 경우에는 패키지 설치 과정을 넘어가서 생긴 오류일 확률이 높다

npm -g install create-react-app

create-react-app을 install 해준다

그런 다음

npx create-react-app my-app

명령어를 입력하면

정상적으로 리액트 프로젝트가 생기는걸 확인할 수 있다.