코딩묻은 디자이너

최근 제작중인 프로젝트를 vercel로 배포해서 확인하고 잇는 중이다

vercel은 깃에만 올린다면 무료로 배포할 수 있어서 매우 매우 좋다

다만 그저 배포만 했을때는 사용자가 얼마나 들어오고 있는지 확인하기 어려운데

Vercel Analytics로 방문자수를 확인할 수 있다!

Analytics 삽입

import { Analytics } from '@vercel/analytics/react'

function App() {
  return (
    <div className="App">
		...
      <Analytics></Analytics>
    </div>
  );
}

export default App;

src/app.js 에서

import {Analytics} from '@vercel/analytics/react'

불러오고, <Analytics></Analytics>를 입력하면 해당 페이지 내부에 페이지 방문자수를 집계 가능하다

버셀 프로젝트 클릭수 상단 Analytics탭에서 확인 가능하다

아래 글을 참조하면 어렵지 않다!

https://vercel.com/docs/analytics/quickstart

HTML에서 <input type="checkbox">를 다른 옵션 없이 사용하면

클릭

위와 같이 만들 수 있다

기능은 작동하지만 실제로 배포를 할 때 사용자들에게 편리한 UX는 아니다

저 조그만 체크박스를 사용하는건 불편...

더 편리한 UX를 제공하기 위해서는 옆의 글자를 클릭했을 때 체크박스가 함께 클릭되도록 하면 좋다

클릭

코드 작성 예시 (label 사용)

<input type="checkbox" id="cleck" name="cleck">

<label for="cleck">클릭</label>

id 를 지정하고, label의 for 부분을 id와 동일하게 설정하면

체크박스 옆의 글자를 클릭했을 때 체크박스의 on/off를 변경할 수 있다!

실제 적용된 코드

<ol>
    <li>
    	<input id="yomigana" type="checkbox" 
         onChange={yomiganaHandle}/>
         <label for="yomigana">요미가나 숨기기</label>
    </li>
    <li>
    	<input id="alpabet" type="checkbox" 
        onChange={alpabetHandle}/>
        <label for="alpabet">알파벳 가이드 숨기기(준비중)</label>
    </li>
 </ol>

개발중인 타자연습의 메뉴모달

사이트에 완성이라는게 없겠지만 점점 배포해서 보여줄 정도의 웹이 되고 있다!

Python에서 문자열을 구분자로 분할할 때 str.split 을 사용해서 분리한다

그런데, 구분자가 여러개일 때의 분리가 필요해서 찾아보게 되었다.

re.split 사용법

import re

result = re.split(pattern, string, maxsplit=0, flags=0)

re를 import 해준다

pattern : 구분자 패턴

string : 분할할 문자열

maxsplit=0 : 수행할 최대의 분할 수로, 기본값은 0(생략가능)

flags=0 : 선택적 플래그 인자(생략가능)

여러 구분자로 나누기

ex)

text = "가1나다라1마바사2아자차1카타"

print(text.split("1"))

print(re.split("1|2",text))

결과값
['가', '나다라', '마바사2아자차', '카타']
['가', '나다라', '마바사', '아자차', '카타']

구분자는 "|" 로 나눌 수 있다

혹은 [] 대괄호 안에 넣어서 구분할 수도 있다

text = "가1나다라1마바사2아자차1카타"

print(text.split("1"))

print(re.split("[12]",text))

결과값
['가', '나다라', '마바사2아자차', '카타']
['가', '나다라', '마바사', '아자차', '카타']

공백으로 나누기

text = "가 나다라    마바사  아자차 카타"

print(text.split(" "))

print(re.split(r"\s",text))

print(re.split(r"\s+",text))


결과값
['가', '나다라', '', '', '', '마바사', '', '아자차', '카타']
['가', '나다라', '', '', '', '마바사', '', '아자차', '카타']
['가', '나다라', '마바사', '아자차', '카타']

\s 문자열 패던을 입력하면 공백으로 나눌 수 있다
\s+를 사용하면 공백이 여러개라도 하나의 공백으로 처리해서 나눌 수 있다!

maxsplit

text = "가 나다라    마바사  아자차 카타"

print(re.split(r"\s+",text, maxsplit=1))
print(re.split(r"\s+",text, maxsplit=2))
print(re.split(r"\s+",text, maxsplit=3))

결과값
['가', '나다라    마바사  아자차 카타']
['가', '나다라', '마바사  아자차 카타']
['가', '나다라', '마바사', '아자차 카타']

maxsplit 은 분할을 제한한다

값이 1이면 2개로 분할, 2이면 3으로 분할... 이런식으로 분할은 해당 값 만큼 분할 되어서 나온 결과값은 값+1

flag는 사실 뭘 하는건지 모르겠다...

re.split을 이용해서 크롤링 값을 나눠서 저장하는거에 유용하게 사용했다

https://docs.python.org/3/library/re.html

최근 개인 프로젝트로 만드는 중인 타자연습 사이트

JSON파일을 만들어서 로컬에서 던어를 불로오도록 만들었는데 DB와 프론트를 연결해보고 싶어졌다.

항상 팀 프로젝트만 해와서 다른 분들이 DB나 백을 해주셨던터라 그쪽으로는 아는게 없어서 Chat GPT에게 질문하면서

JSON 파일을 테이블로 만들어봤다

1. Chat GPT에게 제안받은 방법

JSON 파일 -> csv파일 -> MySQL에 테이블로 생성

Chat GPT가 제안한 방법은 가지고 있는 JSON파일을 일단 CSV파일로 생성한 후

MySQL에서 다시 테이블로 변환하는 과정을 추천해줬다

일단 Json 파일을 csv로 만드는 javaScript 코드를 생성하여 csv파일을 생성하는 것 까지는 어렵지 않았으나

이제 막 설치한 MySQL Workbench는 설정이 안된게 많았던건지 여러가지 오류를 발생시키며 진행이 안되어서 3시간이나 쓰고 말았다

2. MySQL Workbrench를 사용해서 테이블을 생성하는 방법 *매우간단

스키마에서 오른쪽 마우스 클릭 후

"Table Data Import Wizard"를 클릭해준다.

table에 넣기 원하는 json 파일 경로를 지정

새로운 테이블을 만들거나, 기존에 테이블에 넣기를 선택한다

이후 원하는 Field Type을 작성해주면 완료

--

id, value와 같은 컬럼 명을 사용하여서 생성하였는데, 이런... 단어들은 뭔가 컬럼명으로 사용해도 괜찮은걸까? 좀 더 고민해보고 컬럼 명은 수정하도록 해야겠다

Error Code: 1046. No database selected Select the default DB to be used by double-clicking its name in the SCHEMAS list in the sidebar.

해당 오류는 어떤 DB의 데이터 테이블을 가지고 올지 선언을 해주지 않았을 때 해당 오류가 발생한다.

해결방안으로는

1. 테이블 앞에 DB이름을 작성해준다

2. 자주 사용하는 스키마를 기본 스키마(Default Schema)로 지정해준다.

1. 테이블 앞에 DB이름 작성

회사에서는 이 방법으로 DB 조회를 하고있다.

SELECT *
FROM DB이름.테이블 이름
WHERE ...

위와 같이 DB이름을 먼저 입력 후 뒤에 테이블 이름을 작성해주면 된다.

나의 경우 1046오류를 내가 기존에 가지고 있는 scv파일을 새로운 테이블로 새로 작성하는 과정에서 만났는데

스키마가 생성되지 않은 상태라서 스키마부터 생성해주었다

스키마 생성 방법

MySQL Workbench의 왼쪽 상단

"Create a new schema in the connected server"

을 클릭하여 새로운 스키마를 생성해준다

이름과 캐릭터셋을 설정해주면 된다

utf8로 설정하여 만든다

2. 자주 사용하는 스키마를 기본 스키마(Default Schema)로 지정

개인 프로젝트를 진행할 예정이므로 가장 자주 사용할 DB를 기본 스키마로 지정해주었다

오른쪽 마우스 클릭 후 Set as Default Schema 클릭

만약 네비게이터에서 스키마가 보이지 않는다면

탭의 하단에서 Schemas를 클릭하여 찾아준다

'mysql'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다

원인

환경 변수가 설정이 되어있지 않아 발생하는 오류

해결방법

시스템 환경 변수 편집 접속 > 고급 > 환경변수 클릭 > 아래 시스템 변수 중 path 클릭 > 편집 클릭 > 가장 하단에 MySQL 경로 삽입 > 확인

1. 시스템 환경 변수 편집 접속

3번째 탭인 고급에서 아래의 환경 변수(N)... 클릭

시스템 변수 중 Path 를 선택하고, 편집 버튼을 누른다

해당 편집 창에서 MySQL 의 경로를 붙여넣어준다

나의 경우는

C:\Program File\MySQL\MySQL Server 8.0\bin

해당 경로를 입력하고 확인을 눌러준다

그 후 cmd 창에서 입력을 시도하면 Enter password : 가 나오고, 처음 입력받은 비밀번호를 입력해주면 CMD창에서 MySQl 을 실행할 수 있다.

MySQL설치

프로젝트를 MySQL과 연동하기 위해서 MySQL을 설치 할 예정이다.

타 블로그 등을 참고하여 MySQL을 설치해보았다.

MySQL 다운로드 주소

https://dev.mysql.com/downloads/windows/installer/8.0.html

사이트에 들어간 후 쿠키 관련 팝업이 나오면 모든 쿠키를 허용해준다.

위 버전은 웹이라 아래걸로 다운받아준다

로그인/회원가입 페이지가 나오는데 하단의

No thanks, just start my download.를 클릭해서 가입하지 않고 다운받아준다. (몰론 가입해두 된다)

다운로드 한 파일을 열면 아래 Installer가 나온다.

Choosing a Setup Type

설치 유형을 선택할 수 있다.

위 페이지에서는 필요한 것들을 골라서 설치하기 위해 Custom을 선택해준다

처음 들어가면 3개의 대분류 폴더가 있는데 각 폴더에서 하나씩 제품을 선택해서 설치해준다

경로

MySQL servers > MySQL Server -MySQL Server 

Applications > MySQL Workbench -MySQL Workbench 8.0.xx

Documentation > Samples and Examples > Samples and Examples 8.0.xx

Development Computer를 선택하고, TCP/IP체크 도니 상태에서 Port는 3306으로 설정해준다

MySQL은 기본설정으로 127.0.0.1 주소의 3306 번의 포트로 접속하게 되어있는데, 이전에 사용하던 MySQL이 있다면 위와같이 빨간 느낌표가 뜨는 오류가 발생할 수 있다.

해당 오류가 발생한다면 기존에 사용하고있는 MySQL의 3306 포트는 삭제한다면 해결할 수 있다.

Use Strong Password Encryption for Authentication

MySQL 8 supports a new authentication based on improved stronger SHA256-based password methods. it is recommended that all new MySQL Server installations use this method going forward.

Attention : this new authentication plugin on the server side require new versions of connectors and clients which add support for this new 8.0 default authentication(caching_sha2_password authentication).


Currently MySQL 8.0 Connectors and community drivers which use libmysqlclient 8.0 support this new method. if clients and applications cannot be updated to support this new authentication method, the MySQL 8.0 Server can be configured to use the legacy MySQL Authentication Method below.

인증에 강력한 암호 암호화 사용

MySQL 8은 향상된 더 강력한 SHA256 기반 암호 방식을 기반으로 하는 새로운 인증을 지원합니다. 앞으로 모든 새로운 MySQL Server 설치에서 이 방식을 사용하는 것이 좋습니다.

주의: 서버 측의 이 새 인증 플러그인에는 이 새 8.0 기본 인증(caching_sha2_password 인증)을 지원하는 새로운 버전의 커넥터 및 클라이언트가 필요합니다.


현재 libmysqlclient 8.0을 사용하는 MySQL 8.0 커넥터 및 커뮤니티 드라이버가 이 새 방식을 지원합니다. 이 새 인증 방식을 지원하도록 클라이언트 및 애플리케이션을 업데이트할 수 없는 경우 MySQL 8.0 서버는 아래의 레거시 MySQL 인증 방식을 사용하도록 구성할 수 있습니다.

Use Legacy Authentication Method (Retain MySQL 5.x Compatibility)

Using the old MySQL 5.x legacy authentication method should only be considered in the following cases :

- If applications cannot be updated to use MySQL 8 enabled Connectors and drivers.
- For cases wherre re-compilation of an existing application is not feasible.
- An updated, language specific connector or driver is not yet available.

Security Guidance : When possible, we highly recommend taking needed steps towards upgrading your applications, libraries, and database servers to the new stronger authentication. This new method will significantly improve your security.

레거시 인증 방법 사용(MySQL 5.x 호환성 유지)

이전 MySQL 5.x 레거시 인증 방법을 사용하는 것은 다음과 같은 경우에만 고려해야 합니다:

- MySQL 8 지원 커넥터 및 드라이버를 사용하도록 애플리케이션을 업데이트할 수 없는 경우.
- 기존 애플리케이션의 재컴파일이 불가능한 경우.
- 업데이트된 언어별 커넥터 또는 드라이버를 아직 사용할 수 없습니다.

보안 지침 : 가능하면 응용 프로그램, 라이브러리 및 데이터베이스 서버를 새로운 더 강력한 인증으로 업그레이드하기 위해 필요한 조치를 취할 것을 강력히 권장합니다. 이 새로운 방법은 보안을 크게 향상시킬 것입니다.

위의 선택창이 추천되는 선택지지만, 나는 파이썬과의 연동을 진행할 예정이라 아래 선택지를 선택하였다.

다른 블로그들을 확인했을 때에도 아래 선택지를 선택한 분들이 많았다

Accounts and Roles 에서는 비밀번호를 설정한다.

Windows Service Name은 전통적으로 MySQL을 많이 사용한다고 한다.

기본 설정은 MySQL80으로 설정되어있지만, MySQL로 변경하여준다.

Server File Permissions 에서 서버 권한을 설정할 수 있다.

그룹 관지자 그룹만 권한을 부여하도록 가장 위에 있는것을 체크한다.

Apply Configuration 모두 설치 완료되면 finish 클릭

아래 비밀번호를 입력하고 Check 클릭 

Start MySQL  Workbench after setup 을 클릭하고 종료하면 바로 MySQL Workbench가 실행된다.

설치가 완료되면 클릭 후 설치 과정에서 입력한 비밀번호를 설정하면 정상적으로 접속이 가능하다

참고한 문서

https://hongong.hanbit.co.kr/mysql-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EB%B0%8F-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0mysql-community-8-0/

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

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

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

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

명령어를 입력하면

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