TIL: 2022-10-31

⚙️ 오늘 배운 주제

React로 custom component 만들기 2

 

🐹 오늘의 기분

지난 주에 이어서 컴포넌트 만들기 과제를 했다. 주말에 일이 있어서 복습을 평소보다 깊게 못해서 약간 걱정됐었음. 페어분과 머리 싸매고 한 덕에 어드밴스드까지 무사히 끝냈다. 진짜 불태웠다고 말할 수 있다.... 이론 학습한 게 까마득하게 느껴질 정도다. 이번 과제에서는 CSS 관련해서 배워가는게 참 많았다. 아무래도 실생활에서 자주 보는 컴포넌트들이다 보니 더 깔끔하게 만들고 싶은 마음이 있었다.

개발공부하면서 느끼는 건 기본이라도 하는게 참 어렵다는 거다. 당연하게 느꼈던 기능인데 막상 직접 구현하려니 엉망진창이고 이런 경우가 많아서 여기서 기능을 더 더하는 것보다 일단 기본이라도 하는게 진짜 중요하다는 걸 뼈저리게 느끼고 있다. 그래도 수정할 때마다 변화가 바로 눈에 보이니까 재밌었다. 예상치 못한 오류를 만났을 때 원인을 탐구해보는 것도 재밌었다. 

 

🗣 과제 되돌아보기

페어분과 CSS 수정한 방식을 공유한 후에 바로 어드밴스드 구현을 시작했다.
저번 글과 마찬가지로 과제하면서 새로 배운 부분들을 남겨두려고 한다.
자잘하지만 묘하게 사람 불편하게 만드는 CSS 오류를 자주 만났어서 꼭 기록해두고 싶음.

CSS 수정하기

1. Modal.js

모달이 화면 전체에 띄워지도록 수정하면서 굉장히 불편한 오류를 발견했다.

 

??

바로 모달을 띄운 채로 스크롤하면 이렇게 토글이 모달에 겹쳐지는 것이다....

분명 원인은 토글 컴포넌트의 position이 absolute가 되면서 레이어가 하나 더 씌워진 건데, 이걸 어떻게 다뤄야할지를 몰랐다.
개발자 도구를 켜서 이것저것 조작해보고 별 짓을 다 해봤는데도 모르겠어서 오늘 페어분 만나자마자 바로 여쭤봤는데 모달 뒷배경에 z-index 속성을 넣어주면 바로 해결되는 문제였다.

/* ModalBackdrop */
z-index: 1;

이렇게 하니 토글이 더 이상 겹쳐지지 않았다.

 

 

2. Toggle.js

이건 또 왜...

토글은 이렇게 옆의 여백을 눌러도 활성화되는 문제가 있었다.
div 엘리먼트라 줄 전체를 차지해서 그런 거였다.
이것도 어떻게 해야할지 모르겠어서 페어분이랑 같이 고민했는데 해결법은 아주 간단했다
그냥 토글 컨테이너에 width를 주면 되는 거였음...!
border 지정해놓고 봐가면서 적당한 너비로 맞춰주니 아주 편안해졌다.

/* 토글 컨테이너 */
width: 50px;

 

 

Advanced

1. Autocomplete.js

기능 구현은 다 했는데 또 테스트 통과가 안 돼서 맞왜틀만 수없이 반복했던 컴포넌트이다.
페어분이랑 몇십분동안 삽질하다가 무심코 들어간 아고라스테이츠에서 답을 찾았다....

(사실 다른 거 찾아보려고 들어갔던 건데 용케 관련 질문이 올라와 있었다)

테스트코드에서는 li 태그로 드롭다운 메뉴 요소들을 찾고 있었는데 우리는 p 태그로 렌더링하고 있어서 계속 드롭다운 테스트에서만 X가 떴던 거였다...........

export const DropDown = ({ options, handleComboBox, count }) => {
  return (
    <DropDownContainer onClick={(event) => handleComboBox(event.target)}>
      {/* TODO : input 값에 맞는 autocomplete 선택 옵션이 보여지는 역할을 합니다. */}
      {options.map((a, index) => {
        const selected = count === index ? "selected" : null;
        return (
        {/* 여기가 문제였다 */}
          <li key={index} className={selected}>
            {a}
          </li>
        );
      })}
    </DropDownContainer>
  );
};

잘 생각해보면 li로 렌더링하는게 당연한건데 참 ㅠㅠㅋㅋㅋㅋㅋ 실수란 뭘까....

 

2. ClickToEdit.js

이건 CSS가 묘하게 거슬려서 거기에 좀 신경썼다.

 

export const InputEdit = styled.input`
  text-align: center;
  display: inline-block;
  width: 150px;
  height: 30px;
  margin: 0px;
  padding: 0px;
  border-radius: 10px;
  /* border: 1px solid dodgerblue;
  box-shadow: 0 0 3px dodgerblue; */
  &:focus {
    border: 1px solid dodgerblue;
    box-shadow: 0 0 3px dodgerblue;
  }
`;

수정하려고 클릭하면 텍스트가 너무 왔다갔다해서 우선 input태그에 기본으로 적용되어있던 padding과 margin을 없앴다.
InputBox 컴포넌트에 line-height를 컴포넌트의 높이와 같은 값을 적용하여 텍스트가 위로 치우치지 않도록 만들었다.

 

추가적으로 focus되었을 때 테두리 색도 조금 넣으니 이렇게 깔끔하게 완성되었다.
자세히 보면 InputEdit이랑 기존 InputBox랑 살짝 겹치는 게 보이는데 이 이상은 모르겠다.....

여백이 아니라 정확히 문자 영역을 눌러야 수정이 가능한 게 조금 신경쓰여서 이 부분도 수정해보고 싶었지만 방법을 몰라서 일단 여기는 그대로 뒀다.

{newValue === "" ? "click to edit" : newValue}

또 이렇게 되면 input을 완전히 지웠을 때는 텍스트가 없으니까 아무리 클릭해도 수정 자체가 불가능해졌다.

그래서 한 번 값을 렌더링할 때 빈문자열이면 placeholder처럼 기본 문구가 나오도록 해봤다.

 

ClickToEdit은 이렇게 마무리했다.

 

🔎 공부가 더 필요한 부분

z-index
input 태그의 value 속성
useEffect가 아직은 잘 와닿지 않는다.