코딩묻은 디자이너

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

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

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

저번에는 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

명령어를 입력하면

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

react 프로젝스 생성을 위해 npx create-react-app my-app 실행했는데

npx: command not found 에러가 발생했다.

첫 번째 해결 방법

https://nodejs.org/en

왼쪽에 있는 버전을 설치해주는게 좋다

왼쪽이 조금 더 안정화 되어있는 버전이라고 생각하면 된다.

node.js 를 설치해준다

설치이후 cmd에 

node -v

를 입력하면

버전을 확인할 수 있다

마찬가지로

npx -v

를 입력하면

npx 버전또한 확인할 수 있다.

분명히 node를 깔았는데도 안된다?!?

node.js 를 깔았는데도 불구하고 npx command not found 에러가 발생한다면...

재부팅을 해보자!

한시간 동안 구글 붙잡고 난리 쳤는데 재부팅 한방에 해결~!

NULL값 조회

1. NULL의 특징

• NULL은 모르는 값을 의미한다
• NULL은 값의 부재를 의미한다
• NULL과 숫자 혹은 날짜를 더하면 NULL이 된다
• NULL과 어떤 값을 비교할 때 '알 수 없음'이 반환된다

2. NULL값 조회

• NULL을 조회 할 경우는 IS NULL을 사용하고 NULL값이 아닌 NOT NULL을 사용한다

2023.04.23 - [study/SQL] - [ORACLE] NULL값 처리 IS NULL / IS NOT NULL 연산자

NULL 관련 함수

NVL

SELECT NVL(user_name, 'Unknown') as user_name
FROM game_player;

해당 쿼리는 'game_player' 테이블에서 'user_name'열의 NULL값을 기본값'Unknown'으로 바꾼다

NVL2

SELECT NVL2(nick_name, nick_name, 'Who are you') as nick_name
FROM game_player;

NULLIF

SELECT first_name, NULLIF(salary, 0) as salary
FROM employees;

해당 쿼리는 'employees'테이블에서 'first_name'열을 검색하고 0과 같은 급여 값을 NULL으로 바꾼다

COALESCE

SELECT COALESCE(first_name, last_name, 'Unknown') as full_name
FROM employees;

해당 쿼리는 null이 아닌 첫 번째 인자의 값을 반환한다.

WHERE은 오라클에서 특정 범위를 필터링 할 수 있다.

날짜, 숫자, 문자의 특정 값의 사이 값을 조회할 수 있다.

WHERE 절 기본형식

SELECT *
FROM 테이블명
WHERE 컬럼명 BETWEEN '시작 범위' AND '끝 범위';

WHERE 문 예제

다음과 같은 지브리 영화 목록에 대한 테이블이 있는데 2000년 부터 2010년 사이에 개봉한 영화를 조회하기 위해서는

다음 쿼리문을 통해 조회할 수 있다.

select *
from studio_ghibli
where release between 2000 and 2010;

한글로도 범위를 지정해서 검색할 수 있다.

select *
from test
where text_ between '나' and '마';

나 ~ 마 사이를 검색!

Oracle 데이터베이스에는 값이 없는 NULL값이 있다.

IS NULL과 IS NOT NULL을 사용해서 해당 값들을 조회할 수 있다

다음의 테이블에서 salary값이 null인 데이터를 추출하기 위해서는

select *
from employees
where salary is null;

salary가 null인 데이터 하나만 추출된다.

해당 테이블에서 salary값이 null이 아닌 데이터를 추출하기 위해서는

select *
from employees
where salary is not null;

salary값이 null이 아닌 데이터가 추출된다.

∩  ∩
ฅ(=ˇωˇ=)ฅ

Oracle 데이터베이스는 관계형 데이터베이스 관리 시스템(RDBMS)으로, 다양한 종류의 테이블을 생성하여 데이터를 생성하고, 수정하고, 삭제하며 관리할 수 있다.

테이블 생성

기본형식

CREATE TABLE 테이블명
(
	컬럼명 데이터타입 NOT NULL,
    컬럼명 데이터타입,
    ...
);

예제

CREATE TABLE employees
(
  emp_id NUMBER(5) PRIMARY KEY,
  first_name VARCHAR2(50),
  last_name VARCHAR2(50) NOT NULL,
  hire_date DATE,
  salary NUMBER(10,2

PRIMARY KEY

• 기본키를 지정할 때 칼럼 옆에 작성
• 기본키는 기본적으로 NOT NULL 옵션을 가진다

NOT NULL

• 해당 칼럼에 NOT NULL 옵션을 부여한다
• NULL 값이 들어갈 수 없다

NULL DEFAULT(값)

• 초기값을 지정해서 넣을 수 있다

테이블 변경

기본 형식

ALTER TABLE 테이블명;

예제

-- 컬럼 추가
ALTER TABLE employees
ADD (email VARCHAR2(100));

-- 컬럼 삭제
ALTER TABLE employees
DROP COLUMN email;

-- 컬럼 수정
ALTER TABLE employees
MODIFY (salary NUMBER(12,2));

-- 제약 조건 추가
ALTER TABLE employees
ADD CONSTRAINT emp_pk PRIMARY KEY (emp_id);

-- 제약 조건 삭제
ALTER TABLE employees
DROP CONSTRAINT emp_pk;

-- 제약 조건 수정
ALTER TABLE employees
MODIFY (salary DEFAULT 0);

테이블 삭제

기본형식

DROP TABLE 테이블명;

예제

-- 테이블 삭제
DROP TABLE employees;

-- 테이블 삭제시 CASCADE 옵션 사용
DROP TABLE employees CASCADE CONSTRAINTS;

DROP

• 해당 테이블 삭제
• 테이블의 데이터 구조 뿐 아니라 저장된 데이터도 모두 삭제

CASECADE CONSTRAINT

• 해당 테이블의 데이터를 외래키로 참조한 테이블과 관련된 제약사항도 함께 삭제한다

sqldeveloper 내에서 한글 데이터가 다음과 같이 깨지는 것을 발견했다.

도구 > 환경설정 > 환경 > 인코딩 을 확인한다

MS949로 되어있는 것을 UTF-8로 변경시켜준다