이전 회사 코드에서 간간히 보았던 emotion..! 나는 모바일 개발 쪽이었기도 하고, 회사에서 만든 디자인 시스템을 갖다 쓰기만 했던터라 이 쪽에 대해서 관심도 없었다. 하지만 ‘웬 스트링이 변수에 할당이 되어있군’ 하며 의아해 했던 기억이 난다.(지금 생각해 보니 전 회사는 styled-component와 emotion을 적절히 섞어서 썼던 것 같다.)
이번 리액트 강의를 통해서 emotion을 처음 배우게 되었는데, 결론적으로는 넘넘넘 편하다! css 코드만 써주면 컴포넌트를 만들어줌;; 클래스명을 지정하고 css 스타일 시트 파일을 따로 만들어야 하는 번거로움에서 해방시켜 줘서 정말 편했다. 그래서 이번 react 과제에서도 신나게 사용해주었다ㅎㅎ 앞으로도 많이 쓰게 될 것 같다!
스토리북.. 이것 또한 회사에서 썼었는데, 역시나 그냥 관습적으로 쓰기만 했었다. 지금 보니 많은 옵션이 있고 사용법이 방대한 녀석인 것 같다. 다만 emotion과 다르게 실습을 많이 하진 않았다. 내 생각엔 스토리북은 현업에 들어가기 전에 경험 정도만 해보게 될 것 같다. 나중에 보자 토리북아ㅎ
때는 축구를 보러가는 중이었던 어느 주말.. 한 팀원 분이 멘토님께 질문을 남기셨다. 이런게 질문이 뜨면 내가 해결하고 싶다 라는 생각이 마구 드는 나로써는 이번에도 별안간 버스 안에서 해결을 시도해보았다. 그렇게 처음 내 눈에 띄었던 것은 구조분해였다.
내가 여태 했던 구조 분해는 key를 지정해주지 않고 객체의 값들만 바로 꺼내 썼었는데, 질문주신 코드는 처음 보는 형태라 mdn 문서에 객체 구조분해 파트를 쭉 훑어보았다.
팀원분이 남기신 질문
mdn 문서
그러다 보니 ‘새로운 변수 이름으로 할당하기’라는 섹션이 있었고, 뭔가 이 개념이 쓰인 게 아닐까 라는 생각이 들었다. 그렇다면 저기서 key가 되는 target은 어떤 값이 되는 건지 궁금해졌다. 하지만…. 이 당시는 밖이라서 테스트를 할 수가 없었고, 집으로 돌아 온 후 다음날 새벽에 테스트를 해보았다.
내가 남긴 답변
해결완료!!
테스트를 해보니 target이 not defined라는 에러가 났다. 그래서 또 해당 이벤트 콜백함수 밖에서 타겟 상수를 선언한 경우라면 어떻게 될까 싶어 테스트 해보니 신기하게도 그 밖에 있는 상수를 쓰는 것이었다!! 그래서 이게 문제가 아닐까라는 답변을 조심스럽게 남겼고, 다행히 해당 문제가 맞았다.
덕분에 나도 객체 구조분해의 새로운 특성을 알 수 있어서 좋았고, 문제 해결에 도움을 드린 것 같아 뿌듯하기도 했던 기억이 난다. 내가 데브코스를 들어왔을 때 프롱이들에게 도움이 되는 사람이 되자가 목표 중 하나였어서 더 그랬던 것 같다. 앞으로도, 회사에 들어가서도 도움이 되도록 많이 탐구하고 배워야지!