min.js

react useEffect 2번 실행되는 문제

min.js — Tue, 30 Jan 2024 14:00:57 +0900

react useEffect를 사용하는데 로그가 이상하게 두번씩 찍힌다.

dependency array에 빈 배열만 넣어주게 되면 컴포넌트가 마운트 되었을 때만 실행된다.

(마운트 되었다는 의미는, DOM 객체가 생성되고 브라우저에 해당 컴포넌트가 나타나는 것)

그 이후에 리렌더링 되어도 해당 로그는 찍히지 않는다.

  useEffect(() => {
    console.log('useEffect');
  }, []);

처음 페이지 로딩 시, useEffect가 두번씩 찍혀서 찾아보니

next.config.js에서 reactStrictMode: false로 추가 또는 변경하니 이제 한 번만 찍히게 된다!

const nextConfig = {
  reactStrictMode: false,
};

참고

react useRef 에러 TS2322 MutableRefObject<undefined>

min.js — Tue, 30 Jan 2024 10:00:55 +0900

react useRef 사용하면서 자주 겪는 에러 TS2322 MutableRefObject<undefined> 해결방법

useRef를 사용하고 나니 아래와 같은 에러와 함께 빨간줄이 그어졌다..

Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
  Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<HTMLDivElement>'.
    Types of property 'current' are incompatible.
      Type 'undefined' is not assignable to type 'HTMLDivElement | null'.ts(2322)
index.d.ts(125, 9): The expected type comes from property 'ref' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>,

찾아보니 useRef 선언시에 null을 빼먹어서 생기는 에러였다.

// ❌ ❌ ❌
const boxRef = useRef();

// ✅ ✅ ✅
const boxRef = useRef(null);

해결 완료!!

게임 분야 용어 정리 FGT IBT CBT OBT

min.js — Sat, 13 Jan 2024 17:48:26 +0900

알파테스트 (Alpha Test)

내부 테스트, 사내에서만 진행되는 비공개 테스트를 알파테스트 라고 한다

FGT (Focus Group Test, 포커스 그룹 테스트)

게임의 컨텐츠를 실험하는 소수 그룹
사내 알파테스트를 통과한 작품을 회사가 고용한 제한된 유저층에게 테스트를 하는 것을 의미한다.
알파테스트와 베타테스트의 중간 단계에 있으며, 특정한 장소에 모여서 진행된다.
CBT(Closed Beta Test)는 게임을 플레이하며 즐기는 유저의 입장이라면, FGT는 조금 더 게임 컨텐츠적인 부분을 평가하는 전문적인 성향을 가진다.

베타테스트 (Beta Test)

정식 서비스에 앞서 외부 대상으로 하는 테스트

IBT (Internal Beta Test)

사내 테스트

CBT (Closed Beta Test)

비공개 베타 테스트, 회사가 선별한 제한된 유저층에게 하는 테스트

OBT (Open Beta Test)

오픈 베타 테스트, 정식 출시 직전에 진행한다.
CBT가 한정된 인원 대상으로 했다면, OBT는 대상 국가의 모든 사용자들이 제한 없이 참여 가능

GIT 로컬, 원격 브랜치 삭제하기, 동기화하기

min.js — Thu, 28 Dec 2023 21:50:06 +0900

git을 사용하면서 제일 많이 찾아보게 되는 명령어 중에 하나가

로컬 브랜치 삭제, 원격 브랜치 삭제하기인데요, 게다가 동기화까지!!

오늘은 git 로컬, 원격 브랜치 삭제하는 명령어에 대해 남겨둘게요!

git 로컬 브랜치 삭제

git branch -d <branch_name>

git 원격 브랜치 삭제

git push origin --delete <branch_name>

이렇게 삭제해주고 나면, 내 피시에서의 로컬 브랜치와 원격 브랜치는 삭제되었고,

깃에서도 삭제된 것을 확인할 수 있다.

다른 피시에서 git pull 당겨서 작업하던 중, 원격 브랜치가 삭제되어 있지 않는 것을 볼 수 있다.

git pull 명령어를 입력해 열심히 당겨왔지만.. 여전히 원격 브랜치는 삭제되어 있지 않았다.

이럴때는

git 브랜치 동기화

git pull --prune origin master

또는

git fetch --all --prune

위 명령어를 입력해주면 동기화가 된다!

** prune 옵션은 로컬에서 더 이상 접근할 필요없는 원격의 refs를 깨끗하게 지울 때 사용하는 옵션

[React] 리액트 'Enter' 키 이벤트 enter key event typescript

min.js — Tue, 12 Apr 2022 14:19:40 +0900

input, button으로 구성된 메시지 입력창

버튼을 클릭하면 메시지 전송이 되지만,

키보드의 엔터키를 눌렀을 때도 전송이 되게 하기 위해서는,

input의 onKeyPress 속성 사용!

자세한 건 아래 코드에서 확인:)

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

function InputBox() {
  const [text, setText] = useState<string>('');
  const inputRef = useRef<HTMLInputElement>(null);

  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };

  const handleMessage = () => {
    if (text === '') {
      return alert('전송할 메시지를 입력해주세요:)');
    }
    // 메시지 전송하는 부분 구현
    // setText(''); // 메시지 전송 후 input 빈값으로 수정
    // inputRef?.current?.focus(); // 메시지 전송 후 input 포커스
  };

  const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      handleMessage();
    }
  };

  return (
    <Container>
      <input
        placeholder="메시지를 입력하세요"
        onChange={onChange}
        value={text}
        ref={inputRef}
        onKeyPress={handleKeyPress}
      />
      <button onClick={handleMessage}>
        <Send /> //메시지 아이콘
      </button>
    </Container>
  );
}

export default InputBox;

첫글

min.js — Fri, 1 Apr 2022 23:11:31 +0900