금주 프로젝트 중 기술적으로 막힌 것

1. 빈 채팅방에 대해서 빈 div가 계속 찍히는 이슈(12.6~7)

• 원인 : div가 조건부 렌더링 먹히는 영역이 안쪽이 아니라 바깥쪽이라서..

<div className=" w-[375px] px-4">
  // 아마 위의 div였던 것.. 이게 Room을 판별하는 div 안에 있었기 때문에 값이 비어있는 div가 흰색으로 계속 나온 것
      <div
        className="bg-white rounded-lg "
        onClick={(e) => e.stopPropagation()}
      >
        {Room !== undefined &&
          Room !== [] &&
          Room.map((item, i) => {
            return (
              <>
                {item.chatList.length > 0 && (
                  <div className=" px-3 py-1 " key={i}>
                    <div
                      className="  flex justify-between items-center h-14 "
                      onClick={() => onClickChatting(item)}
                    >

• 해결 : div를 바깥으로 옮겨서 해결

2. input, textarea가 숫자일 때는 maxLength가 아니라 max값이라는 것 + 조건식 걸기

• 원인 : 제목 자체로 조건을 잘 몰라서 사실상 안 건거나 다름 없는 것이 되어버림
• 해결 : 글자수가 넘어가면 alert가 뜨게 조정

3. 글자 길어지면 ... 하는 것

• 해결 :

{item.otherNickname.length > 10 ? item.otherNickname.substring(0, 9) + '...' : item.otherNickname}
// substring 활용(10자 이상이면 9자까지 보이고 ...을 찍는다)

그 외는 TIL에 간단히 해결한 것으로 적혀있다. 기술적으로 크게 막힌 것보다는 이번주는 발표준비 등으로 바빠져서 기술을 많이 못 한 것 같다...