Study

깃허브 토큰

깃허브 토큰을 발행했다.
맥북 terminal에서 commit을 하려고 했더니 정상적으로 로그인되지 않았고
토큰을 발행해 비밀번호에 토큰을 입력하니 정상적으로 작동햇다.

DS.store

맥북에서 git add *을 사용해 commit을 진행했더니 DS.store도 올라갔다. DS.store는 파일로 숨김파일로 주소, 정보, 사용자정보 등을 저장하는데 *을 입력하여 숨김파일까지 전부 올라갔다.
.으로 바꾸어 add하여 이를 해결했다.

ID차별화

객체를, 배열을 구분할 땐 주로 id를 사용한다. 근데 이 id가 중복되면 문제가 발생한다.

import { v4 as uuidv4 } from "uuid";

{ title: title, content: content, id: uuidv4() },

랜덤으로 id를 생성해주는 라이브러리를 가져와 이를 해결했다.

map에 key값 설정

console창에 계속 unique한 key값을 사용하지 않아서 에러가 발생한다. 라고 알림이 왔고, 객체에서 key값은 id를 의미하기 때문에 id에 고유성을 부여하면 괜찮을 줄 알았는데 여전히 문제가 발생했다.
해결책은 맵 사용시 key를 사용하는 것이였다. map에서 컴포넌트들을 만들어 내보낸다면 key값을 만들어 고유성을 주는 것이 옳다. fragment에 key 속성을 부여하여 해결.

select

edit버튼이 눌리면 input창의 value가 전체선택 되었으면 좋겠다. 그러나 정상적으로 해결이 안되어서 보니 useRef를 사용한 inputRef값에 원하는 정보가 들어오지 않앗다.

//Edit 버튼이 눌리면
{
  !isEdit && <ColorButton onClick={editHandler}>Edit</ColorButton>;
}
//핸들러 작동시켜서 isEdit 값 바꾸고, 전체선택

const editHandler = () => {
  setIsEdit(true);
  console.log(inputRef.current);
  if (inputRef.current) {
    inputRef.current.select();
  }
};

{
  isEdit && (
    <input
      value={editContent}
      ref={inputRef}
      className="memoList_input"
      onChange={contentHandler}
    ></input>
  );
}

ref를 먼저쓰고 value를 써서 못받아오나? 로직이 잘못 됐나? 고민고민하다 모르겠어서 gpt에게 물어봤더니.. 스케줄러 문제라고 답이 왔다.
isEdit가 true가 된 시점에서, 아직 컴포넌트 갱신이 되지 않았기 때문에 editContent가 가져할 값을 갖고 있지 않고 null값을 가지고 있던 것이다.

살짝 현타가 왔다. 단순히 정보 긁어오는 것만이 아니라 디버깅을 하는 것 조차 gpt형님이 나보다 더 잘한다고...?

const editHandler = () => {
  setIsEdit(true);
};

useEffect(() => {
  if (isEdit && inputRef.current) {
    inputRef.current.select();
  }
}, [isEdit]);

editHandler에서 true를 입력받고, useEffect에서 inputRef.current도 true가 되었을때 작동하도록 하니 올바르게 작동했다.

ref

input등에서 ref를 사용하여 동일 컴포넌트에서 사용하는 것은 문제가 없는데 이를 자식 컴포넌트에게 props로 넘기려고 하니 문제가 발생했다. forwardRef를 통해 해결할 수 있었다. Input컴포넌트에서

import React, {forwardRef} from "react";
import "./Input.css";

const Input =forwardRef(({className,...props},ref)=>{
  return ;
})

forwardRef를 선언하고, 함수형 컴포넌트를 forwardRef로 감싸 해결 했다. 자식에서 부모컴포넌트의 ref에 접근하기 위해선 useImperativeHandle를 사용하면 된다.

hover시 버튼

<div
      className="memoList_list"
      onMouseEnter={mouseEnterHandler}
      onMouseLeave={mouseLeaveHandler}
    >

onMouseEnter,onMouseLeave로 js에게 hover상태인지 아닌지 알려줄 수 있었다.

{isHover&&{!isEdit && <ColorButton onClick={editHandler}>Edit</ColorButton>}
        {isEdit && (
          <ColorButton onClick={contentChangeHandler}>Insert</ColorButton>
        )}}

처음에 시도한 방법인데, 올바른 방법이 아니라고 나왔다. 이유는 반환값이 하나가 아니라 여러개 였기 때문이였고

{
  isHover && (
    <>
      {!isEdit && <ColorButton onClick={editHandler}>Edit</ColorButton>}
      {isEdit && (
        <ColorButton onClick={contentChangeHandler}>Insert</ColorButton>
      )}
    </>
  );
}

fragment로 감싸주어 해결했다.

I

눈치

눈치가 부족한 건 알고 있지만, 챙기는 방법은 잘 모르겠다. 아니 어렵다.
서운함을 말하는데, 말하기 전까지 그 포인트를 잘 모른다.
어떻게 생각해보면 대놓고 말하기 전까지 모르는게 당연한 거긴 한데, 그래도 눈치껏 파악하면 더 좋지 않을까?

X

X에 관한 이야기는 섣불리 하는 게 아니라는 것을 시간이 지나면서 뼈저리게 깨닫고 있다.
절대 꺼내지 않기.

서운함을 풀다

서운함이 쌓인 것을 풀어주는 것은 참 어렵다. 풀렸으면 하지만 풀리지 않을 때 조금 막막하다.
해결책을 제시한다고, 공감을 한다고, 사과를 한다고 풀리지 않는다. 시간이 약일까?

Study

깃허브 토큰​

DS.store​

ID차별화​

map에 key값 설정​

select​

ref​

hover시 버튼​

I

눈치​

X​

서운함을 풀다​