하루를 마무리 하기 전, 오늘 있었던 일들을 잔잔히 되짚어봅니다.
성공과 실패의 모든 요소에서 '배울 점'을 찾아내어 기록하고,
더 성장하는 내일의 나를 위해 'action plan'을 세웁니다.
이번주는 포트폴리오를 고도화 하는 작업주간.
사실 다양한 기능을 추가하고 싶었지만...
역시 총량의 법칙에 따라 미뤄놓았던 애정을 한꺼번에 갈구하는 아이로 인해 벌써 한 주의 끝을 향해버린 시간. ㅎㅎ.
누굴 탓하랴~
그저 뚜벅이처럼, 발자국 없는 하얀 눈에 신발자욱을 꾹꾹 누르듯 마음을 눌러담고 우직하게 걷는다.
오늘 포트폴리오 어드민 사이드의 테스트를 보완하면서 새롭게 알게된, 새롭게 마주했던 상황을 아래와 같이 기록한다.
메뉴 선택 시 색상 변경하기
상단 헤더의 메뉴를 클릭하면 선택되어 있는 메뉴의 색상을 변경해주고 싶었다.
store에서 상태값을 관리하게 해야하나? 라는 생각을 잠시 했다가 그리 복잡하거나 갯수가 많지 않은 상황이라 useState로 관리해보려 했는데 요상하리만큼 구현이 되지 않은 상황.
한 동료의 예시를 참고하여 속성값으로 css를 다르게 적용하려 했는데 처음 보는 에러메시지가 뜨는 것이었다.
우선 상황은 이랬다.
// islocated라는 속성의 값(boolean)에 따라 css를 다르게 적용하려고 했음
<Link
islocated={location.pathname.includes('map') || location.pathname.includes('places')}
to="/map"
>
장소 검색
</Link>// 상단 styled-componenet를 활용한 css 적용 코드
const List = styled.ul`
a {
color: ${(props) => (props.islocated ? '#005D82' : '#A0A0A0')};
font-weight: 700;
}
`;근데 계속 먹지를 않고...;;;
너무 난감한 상황이 이어지다가 뭐가 문제인가 싶어 동료의 도움을 받아 props를 콘솔로 찍어보니 저 islocated를 받아오려면 단순히 props.islocated로 처리할 문제가 아니었다.
보통 뎁스가 1개만 생기기 때문에 저렇게 해결이 되는데... Link여서 그런지는 모르겠지만 요상한 뎁스가 생겨서 결국 코드를 아래와 같이 고치게 되었는데...
// 1차 props 수정
const List = styled.ul`
a {
color: ${(props) => (props.children.props.islocated ? '#005D82' : '#A0A0A0')};
font-weight: 700;
}
`;이제는 아래와 같은 메시지가 새빨갛게.........-_-
요지인 즉슨. islocated가 non-boolean이라는 것..?
뭐지. boolean으로 바로 하면 되는 것을 왜???
결국 string 타입으로 바꾸라는 메시지의 강력한 권고로 인해... 아래와 같이 코드를 모두 수정했다. 어쨌든! 좀 난감한 상황이 이어지긴 했었지만 그래도 원하는 모양새를 만들 수 있었다는 점에 의의를..
//Header.jsx 일부
//상단
const EachList = styled.li`
a {
color: ${(props) => (props.children.props.islocated === 'true' ? '#005D82' : '#A0A0A0')};
font-weight: 700;
border-bottom: ${(props) => (props.children.props.islocated === 'true' ? '4px solid #005D82' : 'none')};
padding-block: 1.2em;
}
`;
//하단 메뉴
<EachList>
<Link
islocated={(location.pathname.includes('map') || location.pathname.includes('places')).toString()}
to="/map"
>
장소 검색
</Link>
</EachList>뭔가 포트폴리오가 조촐한 느낌이라 마음이 살짝 꺾인 느낌이다.
제한된 상황. 언제나 발목이 붙잡힌 것 같은 떼어낼 수 없는 핸디캡.
그럼에도 불구하고... 꺾이지 않는 마음으로!! 쭉 가자.
오늘 점심시간에 박지성 선수의 슬럼프 극복기를 봤는데,
세계 최고의 선수라고 느껴졌던 그 선수 역시 1년간의 지독한 슬럼프 기간동안 다시 일어서기 위해 가장 기초적인 것을 해낸 나 스스로를 다독이고 칭찬해나가며 일어서더라.
오늘의 자잘한 성공을 통해 스스로를 다독이고 일으키면서. 또 성장을 위한 발판을 마련해나가자.
멈추지 말자. 그리고 시시 때때로 찾아오는 불안에게 먹이를 주지 말자.
