본문으로 건너뛰기

Study

커스텀 훅​

create,read,delete훅을 만들었다. 컴포넌트의 props로 인자를 넘기는게 아니라, 커스텀 훅 내 함수의 매개변수로 변수, 함수를 넘겼더니 원하는대로 동작되었다.

const createList = () => {
  create(user, { content: list });
};
const readAndSet = snapshot => {
  user === 'eunsu'
    ? setEunsuList(
        snapshot.docs.map(doc => {
          return { ...doc.data(), id: doc.id };
        })
      )
    : setChaewonList(
        snapshot.docs.map(doc => {
          return { ...doc.data(), id: doc.id };
        })
      );
};
const readList = () => {
  read(user, readAndSet);
};
const deleteList = () => {
  user === 'eunsu'
    ? eunsuCheckList.map(id => _delete(user, id))
    : chaewonCheckList.map(id => _delete(user, id));
  readList();
};

커스텀 훅을 사용해서 코드를 훨씬 단순화 시켰다.
다만 내가 만든 코드는 2인용코드, 다수의 사람들을 관리하기 위해서는 이렇게 실행할 수 없을 것이다.
다수의 사람들을 관리하기 위해선, 하나의 배열만을 사용해야할 것 같다.

마주한 문제들​

label​

<label
  htmlFor="member"
  //...
>
  //...
  <input
    id="member"
    //...
  />
</label>

map함수에서 반환되는 컴포넌트를 이런식으로 짜주었는데, label이 정상적으로 동작하지 않았다. 이유는 id의 중복이였다.
만드는 컴포넌트에서 같은 id의 label을 뱉으니 문제가 발생했다.
id를 {content}를 받게 했더니 정상적으로 작동했다.

width​

wishlist를 만드는데 overflow가 발생하면 일부 list들이 보이지 않았다. 크기를 제한하는등의 임시방편으로 조치는 가능했지만 근본적인 원인을 찾고싶었다.
이유는 justify-content:center; 였다. overflow가 발생했을때도 적용되면서 가운데 부분에 focus를 해서 위에 부분이 짤리고, 이 부분들을 볼 수 없었다.
제거하니 해결되었다.

기준점​

일부 고정된 layout를 띄워두고, 나머지를 띄운 layout을 제외하고 flex를 적용하고 싶었다.
부모에게 margin을 부여하고 flex를 먹이면 가능했다.

opponent​

지금까지 상대방 스펠링이 oppenent인줄;
wishlist에서 상대방의 wishlist도 볼 수 있게 만들고 싶었다. 다만 내 것과 다르게 조작이 불가능하게 만들고 싶었다.
분기처리를 할 수도 있지만, 소요되는게 너무 많은 거 같아 새로운 opponent컴포넌트를 만들어 해결했다.

I

욱​