들어가며
텐션이 내려간다. 매너리즘인지 귀찮은건지 피로가 누적됐는지 아니면 운동부족이라 살짝의 우울감이 온건지. 원인은 복합적이다. 대체로 뭔지 모를 때는 운동 부족일 확률이 높고 햇빛을 쬐지 않아서 그럴 확률도 매우 높다. 우울증 지수가 올라간다는 이야기라 경계해야된다. 멘탈 관리가 가장 중요하다. 그래야 의욕도 나고 즐겁게 하지. 좋지 않아.
실습 코드 분석
오늘 TIL은 실습하면서 조금 해맸던 부분에 대한 정리를 하려고 한다. 넌 그동안 CSS 소홀히 하지 않았지.. 게임을 시작하지.
Styled-component
이번 실습의 핵심이다. 컴포넌트가 CSS를 가지고 있는다. 사용법은 심플하다. 하지만 CSS 선택자가 기억이 애매해서 한참 해맸다.
특히 이 부분은 Modal이라는 스타일로 팝업 대신 div 한 장 깔고 확인창을 띄우는 양식이다. 그 중 배경을 띄우는 부분이었는데 여기서 조금 많이 해맸다. position 개념이 다 날라가서 한참 해맸는데 fixed 주고 좌표 0으로 넣어주는거 보고 아하!
export const ModalBackdrop = styled.div`
// TODO : Modal이 떴을 때의 배경을 깔아주는 CSS를 구현합니다.
display: ${props => (props.visible ? 'block' : 'none')};
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
overflow: auto;
outline: 0;
/* opacity: 50%; */
/* background-color: gray; */
background-color: rgba(255, 255, 255, 0.8);
`;컴포넌트 안에서 여러 스타일 스크립트를 가지고 있으면 더욱 햇갈렸다. 사용법은 분명 간단한데 내 머릿속은 복잡했다. styled.ul 로 시작하면 ul 엘리먼트를 가진다는 사실도 햇갈려서 공식 사이트를 몇번이고 봤다.
const TabMenu = styled.ul`
background-color: #dcdcdc;
color: rgba(73, 73, 73, 0.5);
font-weight: bold;
display: flex;
flex-direction: row;
justify-items: center;
align-items: center;
list-style: none;
margin-bottom: 7rem;
.submenu {
${'' /* 기본 Tabmenu 에 대한 CSS를 구현합니다. */}
color: black;
}
.focused {
${'' /* 선택된 Tabmenu 에만 적용되는 CSS를 구현합니다. */}
color: red;
}
& div.desc {
text-align: center;
}
`;이벤트 핸들러
이건 리액트를 소홀히 해서 까먹었다. 조금 변명을 하자면 알고리즘에 힘을 쏟고 있어서 리액트 복습이 미흡하다. 알고리즘 잘 챙기면 어떻게든 되겠다는 생각이었다. 기본기가 탄탄해져서 로직 짜는데는 어려움이 없었는데 조금 해맨다는게 마음에 안들었다. 이번 추석에 정리 쫙 해야겠다.
<div onClick={toggleHandler} className={`toggle-container ${isOn ? 'toggle--checked' : ''}`} />
<div onClick={toggleHandler} className={`toggle-circle ${isOn ? 'toggle--checked' : ''}`} />태그 추가할 때 enter 키를 입력하는 부분도 조금 해맸다. event.code 였었지. 그랬지.
const handleAddTag = event => {
if (
//
event.type === 'keyup' &&
event.code === 'Enter' &&
event.target.value !== '' &&
!tags.includes(event.target.value)
) {
addTags(event.target.value);
event.target.value = '';
}
};그리고 이 부분은 온몸비틀기 하면서 삽질한 부분이다. 이 부분은 콜백 함수로 바로 부를게 아니라 익명 함수로 적당히 정제된 값을 보냈으면 더 깔끔했을 것이다. 이렇게 처리하는 부분 때문에 테스트를 넘어가지 못했던 부분도 있었다.
const handleRemoveTag = event => {
// console.log(event.target.attributes.idx.nodeValue);
removeTags(event.target.attributes.idx.nodeValue);
};
...
<span className="tag-close-icon" idx={index} onClick={handleRemoveTag}>
---
<span className="tag-close-icon" idx={index} onclick={()=> handleRemoveTag(index)}>
이 코드에서 그랬다. 기능은 구현됐는데 로직이 복잡해서 그런지 테스트가 안넘어갔다. 익명 함수로 보내면 간단하고 깔끔하게 떨어지고 테스트도 넘어갔을탠데.
<DropDownContainer>
{/* TODO : input 값에 맞는 autocomplete 선택 옵션이 보여지는 역할을 합니다. */}
{options.map((option, idx) => {
return (
<li key={idx} onClick={() => handleDropDownClick(option)}>
{option}
</li>
);
})}
</DropDownContainer>HTML Entities
X 표시를 보여주는 HTML 객체다. 이런 문자들은 별도의 코드로 표현한다는 사실도 처음 알았다.
https://www.toptal.com/designers/htmlarrows/
