[💻 코드스테이츠 FE 44기]pre-project - 9일차

✔️ 시작

서버와의 통신에 성공하고 기능 개발에 들어갔다.

나는 질문 작성페이지에서 태그 선택 영역을 맡았다.

---

📍 태그 선택

요구 사항은

• 3개 까지 선택이 가능하다.
• 배열 형식으로 들어간다.

이정도 였던 거 같다.

우선 API 명세서에서 태그 리스트 관련해 작업이 되어있지 않아 더미 데이터를 만들어 진행했다.

export const tagList =
    [
      {
        tagName: 'java',
        tagDescription: 'Java programming language'
      }, {
        tagName: 'spring-boot',
        tagDescription: 'Spring Boot framework'
      }, {
        tagName: 'python',
        tagDescription: 'Python programming language'
      },
      .
      .
      .
     ]

더미 데이터를 만들고

{
  tagList.map((el) => (
    <TagCheckBoxed key={el.tagName}>
      <TagCheck
        type="checkbox"
        id={el.tagName}
        value={el.tagName}
        />
      <TagLabel htmlFor={el.tagName}>
        <span>{el.tagName}</span>
      </TagLabel>
    </TagCheckBoxed>
  ))
}

map메서드를 이용해 화면에 보여주었다.

map메서드를 사용할 때 고유한 key값이 들어가야 하는데 id값은 없고,
index는 추후 오류가 날 수 있기에 tagName으로 지정해 줬다.

const [tags, setTags] = useState([]);

const handlerTag = (name, description) => {
    const tagSelected = tags.some((el) => el.tagName === name);

    if (tagSelected) {
      const updatedTags = tags.filter((el) => el.tagName !== name);
      setTags(updatedTags);
    } else {
      const newTag = { tagName: name, tagDescription: description };
      setTags((prevTags) => [...prevTags, newTag]);
    }
  };
.
.
.
{
  tagList.map((el) => (
    <TagCheckBoxed key={el.tagName}>
      <TagCheck
        type="checkbox"
        id={el.tagName}
        value={el.tagName}
        onChange={() => handlerTag(el.tagName, el.tagDescription)}
        ></TagCheck>
      <TagLabel htmlFor={el.tagName}>
        <span>{el.tagName}</span>
      </TagLabel>
    </TagCheckBoxed>
  ))
}

• useState를 이용해 tags 상태를 만들었다.
  만들어 tag name, description를 인자로 받아 전달할 수 있도록 했다.

• const tagSelected = tags.some((el) => el.tagName === name);
  some메서드는 해당 값에 따라 boolean 값을 반환한다.

• tags 요소의 tagName과 인자로 들어온 name이 동일하면 true, 아니면 false로 반환한 값을
  tagSelected에 할당해 주었다.

• 이후 조건문으로 tagSelected가 true인 경우
  const updatedTags = tags.filter((el) => el.tagName !== name);
  tagName이 동일한 값만 뺀 나머지를 setTags(updatedTags) tags에 추가했다.

• 아닌 경우 const newTag = { tagName: name, tagDescription: description };
setTags((prevTags) => [...prevTags, newTag]); 기존에 있던 값을 그대로 두고 새로운 값 newTag를 추가해 줬다.

3개만 체크 되도록 작업하기

3개만 체크 되도록 checkCount라는 상태를 하나 더 만들어 줬다.

const [tags, setTags] = useState([]);
const [checkCount, setCheckCount] = useState(0);

const handlerTag = (name, description) => {
  const tagSelected = tags.some((el) => el.tagName === name);

  if (tagSelected) {
    const updatedTags = tags.filter((el) => el.tagName !== name);
    setTags(updatedTags);
    setCheckCount((prevCount) => prevCount - 1);
  } else {
    const newTag = { tagName: name, tagDescription: description };
    setTags((prevTags) => [...prevTags, newTag]);
    setCheckCount((prevCount) => prevCount + 1);
  }
};

기존에 작성한 코드에 넣어줬다.
tagSelected가 true일 때는 -1를 아닌 경우 +1을 해줬다.

checkCount가 3이 되면 클릭이 되지 않도록 input checkbox를 수정해 줬다.

{
  tagList.map((el) => (
    <TagCheckBoxed key={el.tagName}>
      <TagCheck
        type="checkbox"
        id={el.tagName}
        value={el.tagName}
        checked={tags.some(item => item.tagName === el.tagName)}
        disabled={!tags.some(item => item.tagName === el.tagName) && checkCount >= 3}
        onChange={() => handlerTag(el.tagName, el.tagDescription)}
        ></TagCheck>
      <TagLabel htmlFor={el.tagName}>
        <span>{el.tagName}</span>
      </TagLabel>
    </TagCheckBoxed>
  ))
}

disabled의 조건을
!tags.some(item => item.tagName === el.tagName) && checkCount >= 3 줬다.

해당 조건이 만족하면 false로 체크되지 않도록 했다.

📍막혔던 부분

input의 checked의 상태에 따라 표시해 주고 싶었다.
처음에는 상태를 하나 만들어 넣었지만 에러가 났다.

그러다 some메서드도 boolean으로 반환하니 굳이 상태를 만들 필요가 없다 생각했다.
다행히 잘 진행 되는거 같았다.

disabled도 event.target.checked를 이용해 진행하려고 했으나
생각대로 잘 되지 않았다 그러다 input의 disabled를 알게 되어 해결할 수 있었다.

---

✔️ Keep

• 작업 중 해결이 잘 되지 않는 부분이 있을 경우 다른 방향으로 해결했다.
• 여러 메서드를 사용해 보려고 했다.
• 최대한 input 속성을 활용하려고 했다.

---

✍️ Problem

• 작성 페이지는 각각 파트를 맡아 추합한 형식으로 진행했다. 코드 리뷰를 진행 후 머지를 할 줄 알았지만 그냥 머지 후 추합했다.
• 추합하는 과정에서 다른 분이 나의 코드의 네이밍 등을 수정하신 흔적을 발견했다.
  - 차라리 나한테 말을하고 수정해 의견을 제시 하셨으면 어땠을까 싶었다.
  그래야 내가 어느 부분이 부족한지 파악하고 똑같은 실수를 저지르지 않도록 주의했을 거다.

---

🚀 Try

• github에 PR을 날리면 꼭 코드 리뷰 후 머지를 해야할 것 같다.
  - 코드 리뷰가 진짜 중요하다 생각한다.
  - 근데 프로젝트 기간에 쫒기다 보면 어쩔 수 없이 넘어가는 상황이 발생하게 되는 것 같다.
• 이후에도 동일한 일이 발생한다면 코드 리뷰 요청을 하자고 건의해 봐야겠다.

---

✏️ 마치며

드디어 기능 개발에 들었갔다.
마크업 단계에서는 tailwind CSS가 익숙하지 않아 오래 걸렸지만
기능적인 부분은 생각 보다 빨리 끝날 수 있었다.

프로젝트 작업 기간이 짧아 코드 리뷰 없이 바로 머지를 한 점은 아쉽다고 생각한다.
코드 리뷰를 통해 나의 코드에 대한 상대방의 생각을 알 수 있고 좀 더 개선할 수 있다 생각하는데
그 점이 사라지니 그 만큼 나의 성장 기회도 없어진다고 생각한다.