💁🏻‍♀️ too long? click HERE🚨 문제 상황컴포넌트화 한 svg 아이콘을 상수화해서 객체의 프로퍼티 값으로 저장해 두었다. 여기까지는 해결을 했는데 이어지는 문제는 이 컴포넌트에 프롭을 어떻게 내려주어야 하는지.. 상수화를 위해 만든 객체 구조는 대략 이렇다. (전체 코드는 이전 포스트에)export const BOARDS: Boards = { dashboard: { boardName: '대시보드', icon: , link: '/main', },}구조분해 문법을 사용해서 해당 svg 아이콘을 가지고 있는 icon 프로퍼티의 값을 가져온다. 적절한 자리에 {icon}을 넣어 주긴 했는데..function BoardItem({ boardType, pathname }:..

벡엔드, 디자이너분과 같이 협업 프로젝트를 진행 중이다. "Keepy-Uppy"라는 개발 프로젝트 협업을 돕는 서비스다. 작업하는 과정에서 물음표가 생긴 부분을 멘토님께 질문드렸고 새로 알게 된 내용을 정리할 겸, 조금 더 제대로 공부할 겸 남긴다.💁🏻‍♀️ too long? click HERE🚨 문제 상황지난 번 svg 파일을 컴포넌트화 해서 사용하는 방법에 대해 알게 된 후 우리 프로젝트에도 그렇게 변경하는 것이 좋겠다는 의견을 냈고, 감사히 다른 팀원 분께서 변환 작업을 맡아주셨다. 그래서 오늘은 기존에 사용하던 svg 이미지들을 해당 컴포넌트로 바꾸는 작업을 했다. svg 컴포넌트 만들기지난번 "The-Julge" 프로젝트를 진행하며 svg 파일의 색상을 다루느라 시간을 꽤 쓴 적이 있다. ..

지난번 "The-Julge" 프로젝트를 진행하며 svg 파일의 색상을 다루느라 시간을 꽤 쓴 적이 있다. svg 파일 내의 fill 속성에 접근해서 색상값만 변경해 주면 되는 건 알겠는데, 리액트에서 사용하기에 생각보다 번거로웠다. 그러다가 생각해 냈던 방법이 svg 파일을 컴포넌트 화하는 방법이었다. prop으로 색상을 지정해 주는 방법! 그 방법을 생각해내고서 좋은 방법이라고는 생각했는데 굳이 컴포넌트까지 만드는 건 '투 머치'인가 싶은 생각도 들고, 그 방법에 대해 어떤지 물어봤던 팀원의 반응이 뜨뜻미지근해서 결국엔 같은 아이콘을 색상만 바꿔 두 개씩 만들었던 적이 있다. 필요한 색깔이 두 가지였으니 다행이지, 같은 아이콘이 여러 색깔로 필요했다면 파일 하나하나 import 해오기에도, 알맞은 것을..