항해 99 - 2022.03.15.THU (말줄임 표시 & 해시태그 개수 제한)

이번 챕터 일정

• 02/26 기획 회의 ✅
• 02/28 알고리즘 스터디 발제 ✅
• 03/01 1차 기획멘토링 ✅
• 03/05 1차 기술 멘토링  ✅
• 03/09 2차 기획 멘토링 ✅
• 03/12 2차 기술 멘토링 ✅
• 03/16 3차 기획 멘토링
• 03/19 중간 점검
• 04/09 최종 발표회 

오늘 내가 할 일 

• 메인 페이지 제목 말줄임표로 표시하기 ✅
• 참여가능 버튼 누르면 참여가능한 방만 보여지게 하는 기능 ✅
• 태그 갯수 제한 걸기 ✅

혼자서 하려고 했을 땐 잘 안 풀리던 것들이 다른 사람의 도움을 받으면서 점점 풀려나는 주웅 우웅
이것저것 내가 생각했을 때 문제 풀어가는 방식과 남이 풀어가는 방식이 다르다면 
슬퍼할게 아니라 오히려 좋다는 생각을 해야 하는 게 맞는 듯 ㅋㅋㅋㅋ
태그 개수 제한 거는 것도 혼자서 고민해봐도 답도 안 나왔는데
다른 분이 너무 쉽게 힌트를 주고 나니 문제 해결도 시원하게 해결돼버렸다. ㅎㅎ 꾸우웃

 

1. 길이가 길어진 텍스트 말줄임표로 나타나기

• 원하는 width를 정하는 게 중요함
• div태그로 묶어있다면 display를 block처리를 해주는 게 중요함

const TitleText = styled.div`
  width: 171px;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
`;

 

2. 해시태그 개수 제한 걸기!

• 처음에는 그냥 냅다 삼항 연산자를 써야 한다고 생각해서 length의 길이가 6을 넘을 때 처리 방법에 대해서 고민하고 있었다. 
• 그냥 애초에 엔터로 값을 내보낼 때(?)부터 길이가 넘어가면 안 넘어가게 해주는 방법이 있다는 힌트를 듣게 되니 아차 싶었다

  //엔터누르면 작성되기
  const onKeyPress = (e) => {
    if (e.target.value.length !== 0 && e.key === 'Enter') {
      submitTagItem();
    }
  };
  const submitTagItem = () => {
    let updatedTagList = [...tagList];
    updatedTagList.push(tagItem);
    setTagList(updatedTagList);
    setTagItem("");
    if(updatedTagList.length > 5){
      updatedTagList.pop()
    }
  };

• 조건문으로 해시태그 리스트의 길이가 5를 넘어버리면 바로 pop() 함수로 지워버리게 처리해줬다!!
• pop() 함수는 맨 뒤 배열을 지우는 함수!